read_opc/chuanyi-admin/src/views/system/role/user-auth.vue

<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">
      <el-form-item label="用户名称" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openSelectUser">添加用户</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-circle-close"
          size="mini"
          :disabled="multiple"
          @click="cancelAuthUserAll"
        >批量取消授权</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-close" size="mini" @click="handleClose">关闭</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
      <el-table-column label="用户状态" prop="state" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ convertUserStatus(scope.row.state) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户类型" prop="userType" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ convertUserType(scope.row.userType) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后登录时间" prop="lastLoginTime" width="160" />
      <el-table-column label="创建时间" prop="createTime" width="160" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-circle-close" @click="cancelAuthUser(scope.row)">取消授权
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.limit"
      align="right"
      @pagination="getList"
    />
    <select-user ref="select" :role-id="queryParams.roleId" @updateUserList="getList()" />
  </div>
</template>

<script>
import selectUser from './user-select'
import { getUserListById, cancelRoleAuth, cancelAllRoleAuth } from '@/api/system/user'
export default {
  name: 'UserAuth',
  components: { selectUser },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中用户组
      userIds: [],
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: [],
      // 用户状态
      userStatus: this.$store.getters.userStatus,
      // 用户类型
      userType: this.$store.getters.userType,
      // 查询参数
      queryParams: {
        page: 1,
        limit: 10,
        roleId: undefined,
        userName: undefined
      }
    }
  },
  created() {
    const roleId = this.$route.params.userId
    if (roleId) {
      this.queryParams.roleId = roleId
      this.getList()
    }
  },
  methods: {
    /** 用户状态转换 */
    convertUserStatus(val) {
      let result = ''
      this.userStatus.forEach((e) => {
        if (e.value === val) {
          result = e.name
        }
      })
      return result
    },
    /** 用户类型转换 */
    convertUserType(val) {
      let result = ''
      // this.userType.forEach((e) => {
      //   if (e.value === val) {
      //     result = e.name
      //   }
      // })
      val === 0 ? result = '客户端用户' : result = '管理用户'
      return result
    },
    /** 查询授权用户列表 */
    getList() {
      getUserListById(this.queryParams).then(res => {
        if (res.code === 200) {
          const data = res.data
          this.userList = data.userList
          this.total = data.count
          this.loading = false
        }
      })
    },
    /** 返回按钮 */
    handleClose() {
      this.$router.push('/system/role')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      if (this.$refs['queryForm']) {
        this.$refs['queryForm'].resetFields()
      }
      this.handleQuery()
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.userIds = selection.map(item => {
        return {
          userId: item.userId,
          roleId: this.queryParams.roleId
        }
      })
      this.multiple = !selection.length
    },
    /** 打开授权用户表弹窗 */
    openSelectUser() {
      this.$refs.select.show()
    },
    /** 取消授权按钮操作 */
    cancelAuthUser(row) {
      const query = {
        roleId: this.queryParams.roleId,
        userId: row.userId
      }
      this.$confirm('是否取消授权?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'btn_custom_cancel',
        type: 'warning'
      }).then(() => {
        cancelRoleAuth(query).then(res => {
          if (res.code === 200) {
            this.getList()
            this.$message({
              type: 'success',
              message: res.data
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消操作'
        })
      })
    },
    /** 批量取消授权按钮操作 */
    cancelAuthUserAll() {
      this.$confirm('是否取消授权?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'btn_custom_cancel',
        type: 'warning'
      }).then(() => {
        cancelAllRoleAuth(this.userIds).then(res => {
          if (res.code === 200) {
            this.getList()
            this.$message({
              type: 'success',
              message: '已取消授权'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消操作'
        })
      })
    }
  }
}
</script>