ojk_dtb_manage_ui/src/components/systemManage/AuthManage.vue

<template>
  <div id="AuthManageContainer">
    <h3>角色权限管理</h3>
    <el-divider />
    <el-card class="box-card" style="width: 35%; display: inline-block;vertical-align: top">
      <template #header>
        <div class="card-header">
          <span style="font-weight: bold">角色列表</span>
        </div>
      </template>
      <div v-for="role in roleList" :key="role.id" class="roleItem" :style="currRole.id===role.id?checkRoleStyle:''" @click="handleRoleSelect(role)">{{ role.noteStr }}</div>
    </el-card>

    <div class="authDetails" v-show="currRole.id">
      <h4 style="display: inline-block;padding-top: 3px">权限管理</h4>
      <el-button type="default" title="保存" @click="submit" style="display: inline-block;font-size: 15px;float: right">
        <el-icon><IconPark-save /></el-icon>
      </el-button>
      <el-divider />
      <el-tree v-loading="authLoading" ref="authTree" :data="authData" :props="authDataProps" node-key="id" show-checkbox />
    </div>
  </div>
</template>

<script>
import api from "@/api/data/AuthInfo";

export default {
  data() {
    return {
      roleList: [],
      authData: [],
      authDataProps: {
        children: 'children',
        label: 'name',
      },
      currRole: {},
      checkRoleStyle: {
        background: 'rgba(101,102,244,0.7)',
        color: 'white',
      },
      currCheckedAuth: [],
      authLoading: false
    }
  },
  created() {
    this.getRoleList();
    this.getAuthList();
  },
  mounted() {
  },
  methods: {
    getRoleList() {
      let app = this;
      let params = {
        serviceId: this.$constant.serviceId,
      }
      api.getRoleList(params).then(res=>{
        if (res.code===200) {
          app.roleList = []
          res.content.list.forEach(item => {
            if (item.id>1) {
              app.roleList.push(item)
            }
          })
        }
      })
    },
    handleRoleSelect(role) {
      let app = this;
      this.authLoading = true;
      this.currRole = role;
      this.$refs.authTree.setCheckedKeys([]);
      if (role.permissionId) {
        this.$refs.authTree.setCheckedKeys(role.permissionId.split(','))
      }
      setTimeout(function () {
        app.authLoading = false
      },300)
    },
    getAuthList() {
      let app = this;
      let params = {
        serviceId: this.$constant.serviceId,
        type: app.$constant.authType,
      }
      api.getAuthList(params).then(res=>{
        if (res.code===200) {
          app.authData = res.content
        }
      })
    },
    submit() {
      let app = this;
      let params = {
        serviceId: this.$constant.serviceId,
        type: app.$constant.authType,
        roleId: this.currRole.id,
        permissionId: this.$refs.authTree.getCheckedKeys().join(','),
      }
      app.$util.loading.handleLoading(true);
      api.updateRoleAuth(params).then(res=>{
        if (res.code===200) {
          app.$message({ message: '保存成功', type: 'success' });
          app.getRoleList()
          app.$util.loading.handleLoading(false);
        }
      })
    },
  }
}
</script>

<style scoped>
#AuthManageContainer {
  width: 100%;
  height: 100%;
  padding-left: 2%;
}
.roleItem {
  padding: 5px 15px;
  cursor: pointer;
  border-radius: 12px;
  margin-bottom: 5px;
}
.roleItem:hover {
  background-color: rgba(100,90,200,0.1);
}
.authDetails {
  width: 45%;
  margin-left: 2%;
  padding: 1%;
  padding-left: 3%;
  border: 1px solid #e4e7ed;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  height: 60%;
  display: inline-block;
}
</style>