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

<template>
  <div class="main-card__body" v-loading="pageLoading">
    <h1 class="main-card__title">
      账户管理
    </h1>
    <el-input class="main-card__filter" v-model="filter" placeholder="筛选"></el-input>
    <el-table
      :data="filterUsers"
      stripe
      class="main-card__table"
    >
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="110">
      </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="80">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="封号"
        width="70">
        <template slot-scope="scope">
          <el-button @click="block(scope.row)" type="text" size="small" v-if="scope.row.valid">封禁</el-button>
          <el-button @click="unblock(scope.row)" type="text" size="small" v-else>解封</el-button>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="setSEEC(scope.row)" type="text" size="small" v-if="scope.row.role==='STUDENT'">设为开发人员</el-button>
          <el-button @click="setStudent(scope.row)" type="text" size="small" v-else-if="scope.row.role==='SEEC'">恢复普通用户</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'userAdmin',
  layout: 'admin',
  data () {
    return {
      users: [],
      filterUsers: [],
      pageLoading: true,
      filter: ''
    }
  },
  mounted () {
    this.getUsers()
    this.pageLoading = false
  },
  methods: {
    getUsers () {
      this.$api.$get('/admin/getUsers').then((res) => {
        console.log('users', res.data)
        if (res.code === 0) {
          for (const item of res.data) {
            if (item.valid) {
              item.state = '正常'
            } else {
              item.state = '封禁中'
            }
          }
          this.users = res.data
          this.filterUser()
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
        }
      }
      ).catch((e) => {
        console.log(e)
      })
    },
    block (row) {
      this.$api.$post('/admin/updateUserValid', { id: row.id, valid: false }).then((res) => {
        if (res.code === 0) {
          this.$message({
            showClose: true,
            message: '已封禁用户' + row.name,
            type: 'success'
          })
          row.valid = false
          row.state = '封禁中'
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
        }
      }
      ).catch((e) => {
        console.log(e)
      })
    },
    unblock (row) {
      this.$api.$post('/admin/updateUserValid', { id: row.id, valid: true }).then((res) => {
        if (res.code === 0) {
          this.$message({
            showClose: true,
            message: '已解封用户' + row.name,
            type: 'success'
          })
          row.valid = true
          row.state = '正常'
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
        }
      }
      ).catch((e) => {
        console.log(e)
      })
    },
    setSEEC (row) {
      this.$api.$post('/admin/updateUserRole', { id: row.id, role: 'SEEC' }).then((res) => {
        if (res.code === 0) {
          this.$message({
            showClose: true,
            message: row.name + '已设置为开发人员',
            type: 'success'
          })
          row.role = 'SEEC'
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
        }
      }).catch((e) => {
        console.log(e)
      })
    },
    setStudent (row) {
      this.$api.$post('/admin/updateUserRole', { id: row.id, role: 'STUDENT' }).then((res) => {
        if (res.code === 0) {
          this.$message({
            showClose: true,
            message: row.name + '已恢复为普通用户',
            type: 'success'
          })
          row.role = 'STUDENT'
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
        }
      }).catch((e) => {
        console.log(e)
      })
    },
    filterUser () {
      const filterUsers = []
      this.users.forEach(user => {
        if (user.name.toLowerCase().indexOf(this.filter.toLowerCase()) !== -1 ||
          user.phone.toLowerCase().indexOf(this.filter.toLowerCase()) !== -1 ||
          user.role.toLowerCase().indexOf(this.filter.toLowerCase()) !== -1) {
          filterUsers.push(user)
        }
      })
      this.filterUsers = filterUsers
    }
  },
  watch: {
    filter: function () {
      this.filterUser()
    }
  }
}
</script>

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