admin_home/src/views/role/userList.vue

<template>
  <div class="mainBox">
    <!--搜索功能 start------------------------------------------------------------>
    <div class="layerBox_search">
      <div class="layerBoxLine">
        <el-row>
          <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">用户账号：</div>
              <el-input placeholder="请输入用户账号" autocomplete="off" v-model="getApiData.keyword"/>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">用户类型：</div>
              <el-select placeholder="请选择用户类型" v-model="getApiData.type_id">
                <el-option label="个人会员" value="1"></el-option>
                <el-option label="政务会员" value="2"></el-option>
                <el-option label="企业会员" value="3"></el-option>
                <el-option label="调研员" value="4"></el-option>
                <el-option label="管理员" value="10000"></el-option>
                <el-option label="游客" value="20000"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">账号状态：</div>
              <el-select placeholder="请选择用户类型" v-model="getApiData.status">
                <el-option label="启用" value="1"></el-option>
                <el-option label="停用" value="0"></el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    
    <div class="layerBoxNoBg">
      <div>
        <el-button type="primary" @click="goCreat">添加用户</el-button>
      </div>
      <div>
        <el-button @click="clearSearchList">重置</el-button>
        <el-button type="primary" @click="getData">搜索</el-button>
      </div>
    </div>
    <!--搜索功能 end------------------------------------------------------------>

    <!--表格内容 start------------------------------------------------------------>
    <div class="layerBox">
      <tableTitle :name="tableDivTitle"/>
      <el-row>
        <template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
            <el-table-column prop="real_name" label="用户姓名" width=""></el-table-column>
            <el-table-column prop="type_name" label="用户类型" width=""></el-table-column>
            <el-table-column prop="mobile" label="联系电话" width=""></el-table-column>
            <el-table-column prop="created_at" label="创建时间" width=""></el-table-column>
            <el-table-column prop="status" label="账号状态" width="">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="0"
                  @change="upRow(scope.row.id,scope.row.status)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200" header-align="center">
              <template slot-scope="scope">
                <div class="listBtnBox">
                  <div class="listEditBtn" @click="goEdit(scope.row.id)"><i class="el-icon-edit-outline"></i>编辑</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-row>
    </div>
    <!--分页 start------------------------------------------------------------>
    <div class="alignBox">
      <el-row>
        <el-col :span="24">
          <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
        </el-col>
      </el-row>
    </div>
    <!--分页 end------------------------------------------------------------>
    <!--表格内容 end------------------------------------------------------------>
  </div>
</template>

<script>
//表格标题
import tableTitle from './components/tableTitle';
//引入公用样式
import '@/styles/global.less';

export default {
  components: {
    tableTitle,//表格标题
  },
  data() {
    return {
      //1.列表和分页相关 start ------------------------------------------------------------>
      tableDivTitle:"用户列表",
      tableData:[],//内容
      editId:0,//要修改的网站id
      getApiData:{
        type_id:"",//用户类型
        keyword:"",//用户账号
        status:"",//用户状态
        page:1,//当前是第几页
        pageSize:10,//一共多少条
      },
      allCount:0,//总条数
      //分页相关 end ------------------------------------------------------------>
    }
  },
  methods: {
    //1.列表和分页相关 start ------------------------------------------------------------>
    //1.1 开始请求列表信息方法
    getData(){
      this.$store.dispatch('userMember/getUserList',this.getApiData).then(res=> {
        this.tableData = res.data.rows; //给与内容
        this.allCount = res.data.count; //给与总条数
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '网络错误，请重试！'
        });
      })
    },
    //1.2 删除内容
    // deleteRow(id){
    //   this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     console.log("当前删除：" + id)
    //     this.$store.dispatch('',{id:id}).then(res=> {
    //       this.getData();
    //       this.$message({
    //         type: 'success',
    //         message: '删除成功!'
    //       });
    //     }).catch(() => {
    //       this.$message({
    //         type: 'warning',
    //         message: '网络错误，请重试！'
    //       });
    //     })
    //   }).catch(() => {
    //     this.$message({
    //       type: 'warning',
    //       message: '已取消删除'
    //     });
    //   });
    // },
    //1.3 修改用户状态
    upRow(id,status){
      let data = {
        id:id,
        status:status
      }
      this.$store.dispatch('userMember/upUserStatus',data).then(res=> {
        if(res.code==200){
          this.$message({
            type: 'success',
            message: '用户状态已修改!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除'
        });
      });
    },
    //1.4 列表内容分页
    //直接跳转
    handleSizeChange(val) {
      this.getApiData.page = val;
      this.getData();
    },
    //1.5 点击分页
    handleCurrentChange(val) {
      this.getApiData.page = val;
      this.getData();
    },
    //1.6 重置按钮
    clearSearchList(){
      this.tableData = [];
      this.getApiData.type_id = "";
      this.getApiData.keyword = "";
      this.getApiData.status = "";
      this.getApiData.page = 1;
      this.getApiData.pageSize = 10;
      this.getData();
    },
    //列表和分页相关 end ------------------------------------------------------------>

    //2.添加新闻 start ------------------------------------------------------------>
    //跳转到资讯发布页面
    goCreat(){
      this.$router.push({
        path: '/creatUser',
      });
    },
    goEdit(id){
      let data = {
        id:id
      }
      this.$router.push({
        path: '/creatUser',
        query: data
      });
    }
    //添加新闻 end ------------------------------------------------------------>
  },
  mounted(){
    //1.获得初始数据
    this.getData();
  }
}
</script>

<style scoped lang="less">

</style>