rightsManagement.vue

<template>
  <div class="rightManagement">
    <!-- 超级管理员    -->
    <div class="superAdministrator">
      <div class="superAdministratorTitle">
        1.超级管理员
        <span>（该角色拥有系统的所有权限）</span>
      </div>
      <div class="superAdministratorTable">
        <a-table :columns="columns" :dataSource="superAdministratorList" size="default" rowKey="key" :pagination="false">
          <span slot="userHasRoles" slot-scope="userHasRoles">
            <a-tag  v-for="(userHasRole, index) in userHasRoles" :key="index">{{userHasRole}}</a-tag>
          </span>
          <span slot="action" slot-scope="text, record, index">
            <a href="javascript:;" @click="selectSuperAdministrator(record, text, index, superAdministratorListId)">编辑</a>
          </span>
        </a-table>
      </div>
    </div>
    <!--  角色  -->
    <div class="role">
      <div class="roleTitle">2.创建角色</div>
      <div class="roleTable">
        <a-button type="primary" icon="plus" class="addRole" @click="addRole" key="key">添加</a-button>
        <a-table :columns="roleColumns" :dataSource="roleList" size="default" rowKey="key" :pagination="false">
          <span slot="userHasRoles" slot-scope="userHasRoles">
            <a-tag  v-for="(userHasRole, index) in userHasRoles" :key="index">{{userHasRole}}</a-tag>
          </span>
          <span slot="action" slot-scope="text, record, index">
            <a href="javascript:;" @click="editRoles(record, text, index)">编辑</a>
            <a href="javascript:;" class="delete" @click="delectRoles(record, text, index)">删除</a>
          </span>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import { config } from '../../../api/config.js'
import { $http } from '../../../api/axios.js'
export default {
  name: 'rightsManagement',
  component: {},
  data () {
    return {
      columns: [{
        title: '角色名称',
        dataIndex: 'administratorName',
        width: '30%'
      }, {
        title: '拥有该角色的员工',
        dataIndex: 'userHasRoles',
        width: '60%',
        scopedSlots: { customRender: 'userHasRoles' }
      }, {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }],
      roleColumns: [{
        title: '角色名称',
        dataIndex: 'roleName'
      }, {
        title: '角色描述',
        dataIndex: 'roleDesc'
      }, {
        title: '拥有该角色的员工',
        dataIndex: 'userHasRoles',
        scopedSlots: { customRender: 'userHasRoles' }
      }, {
        title: '创建时间',
        dataIndex: 'creatTime'
      }, {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }],
      superAdministratorList: [], // 超级管理员列表
      roleList: [], // 超级管理员列表
      superAdministratorListId: [] // 超级管理员的ddId
    }
  },
  created () {
    this.getAllAdminisgtrator()
  },
  methods: {
    // 编辑超级管理员
    selectSuperAdministrator (record, text, index, superAdministratorListId) {
      config.ddready('ddchooseTen', superAdministratorListId).then((res) => {
        let roleId = record.key
        let roleName = record.administratorName
        let roleDesc = ''
        let ddUserIds = []
        let menuIds = []
        let roleCode = record.roleCode
        res.users.forEach((item, index) => {
          ddUserIds.push(item.emplId)
        })
        let data = {
          roleId: roleId,
          roleName: roleName,
          roleDesc: roleDesc,
          ddUserIds: ddUserIds,
          menuIds: menuIds,
          roleCode: roleCode
        }
        $http.post(`/admin/manager/modifyFullRole`, data).then(success => {
          this.$message.success('编辑成功')
          return this.getAllAdminisgtrator()
        })
      })
    },
    // 删除角色
    delectRoles (record) {
      const _that = this
      this.$confirm({
        title: '确认要删除该角色吗？',
        content: '删除后，拥有该角色员工自动解除',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          let data = { roleId: record.key }
          $http.post(`/admin/role/del1`, data).then(res => {
            _that.$message.success('删除成功')
            _that.getAllAdminisgtrator()
          })
        }
      })
    },
    // 增加角色
    addRole (obj) {
      // console.log(obj, 111)
      // this.chooseMenuList = obj.key
      this.$router.push({ name: 'addOrRights' })
    },
    // 获取所有管理员列表
    getAllAdminisgtrator () {
      let data = {
        item: 'e-card'
      }
      $http.post(`/admin/role/page1`, data).then(res => {
        this.superAdministratorList = []
        this.roleList = []
        this.superAdministratorListId = []
        res.data.data.forEach((item, index) => {
          if (item.roleCode === 'ROLE_SUPER_ADMIN') {
            let userHasRoles = []
            item.userList.forEach((userItem, userIndex) => {
              userHasRoles.push(userItem.realName)
              this.superAdministratorListId.push(userItem.ddUserId)
            })
            this.superAdministratorList.push({
              roleCode: item.roleCode,
              key: item.roleId,
              administratorName: item.roleName,
              userHasRoles: userHasRoles
            })
          } else {
            let userHasRoles = []
            let ddUserId = []
            item.userList.forEach((userItem, userIndex) => {
              userHasRoles.push(userItem.realName)
              ddUserId.push(userItem.ddUserId)
            })
            this.roleList.push({
              key: item.roleId,
              roleName: item.roleName,
              userHasRoles: userHasRoles,
              roleDesc: item.roleDesc,
              creatTime: item.createTime ? item.createTime.replace('T', ' ') : '',
              action: { ddUserId: ddUserId, name: userHasRoles }
            })
          }
        })
      })
    },
    // 编辑角色
    editRoles (record) {
      this.$router.push({ name: 'addOrRights', params: { roleId: record.key, record: record } })
      let data = { roleId: record.key }
    }
  },
  watch: {
    $route (to, from) {
      this.defaultSelectedKeys = to.name
      this.chooseMenuList = to.name
    }
  }
}
</script>

<style scoped>
  a {
    text-decoration: none;
  }
  .superAdministratorTitle,
  .roleTitle {
    height: 40px;
    width: 100%;
    line-height: 40px;
    color: rgba(0,0,0,0.85);
    font-weight: 500;
  }
  .superAdministratorTitle>span {
    color: #A0A0A0;
  }
  .superAdministratorTable {
    margin-top: 20px;
  }
  .role {
    margin-top: 20px;
  }
  .addRole {
    margin-top: 25px;
    margin-bottom: 20px;
  }
  .delete {
    margin-left: 5px;
  }
</style>