SEEC-Portal-Front/pages/admin/userAdmin.vue

<template>
  <div class="main-card__body" v-loading="pageLoading">
    <h1 class="main-card__title">
      账户管理
    </h1>
    <el-table
      :data="users"
      stripe
      class="main-card__table"
    >
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系方式">
      </el-table-column>
      <el-table-column
        prop="role"
        label="角色"
        width="100">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="100">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="block(scope.row)" type="text" size="small" v-if="scope.row.isValid">封禁</el-button>
          <el-button @click="unblock(scope.row)" type="text" size="small" v-else>解封</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "userAdmin",
    layout: 'admin',
    data(){
      return{
        users: [],
        pageLoading: true
      }
    },
    mounted(){
      this.getUsers();
      this.pageLoading = false;
    },
    methods: {
      getUsers(){
        this.$api.$get('/admin/users').then((res) =>
          {
            console.log('users',res.data);
            if(res.code === 0){
              for(let item of res.data){
                if(item.isValid){
                  item.state = '正常';
                }else{
                  item.state = '封禁中';
                }
              }
              this.users = res.data;
            }else{
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error'
              });
            }
          }
        ).catch((e)=>{
          console.log(e);
        });
      },
      block(row){
        this.$api.$put('/admin/user', {id: row.id, isValid: false}).then((res) =>
          {
            if(res.code === 0){
              this.$message({
                showClose: true,
                message: "已封禁用户" + row.name,
                type: 'success'
              });
              row.isValid = false;
              row.state = "封禁中"
            }else{
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error'
              });
            }
          }
        ).catch((e)=>{
          console.log(e);
        });
      },
      unblock(row){
        this.$api.$put('/admin/user', {id: row.id, isValid: true}).then((res) =>
          {
            if(res.code === 0){
              this.$message({
                showClose: true,
                message: "已解封用户" + row.name,
                type: 'success'
              });
              row.isValid = true;
              row.state = "正常"
            }else{
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error'
              });
            }
          }
        ).catch((e)=>{
          console.log(e);
        });
      }
    }
  };
</script>


<style lang="scss" scoped>
  @import '~/assets/css/person.scss';
</style>