kd-aiot-frontend/src/views/system/role/components/role-data-auth.vue

<!-- 角色权限分配弹窗 -->
<template>
  <ele-modal
    width="460px"
    title="分配权限"
    :close-on-click-modal="false" custom-class="ele-dialog-form"
    :visible.sync="roleDataAuthDialogFlag"
    :before-close="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="角色名称">
        <el-tag>{{ form.name }}</el-tag>
      </el-form-item>
      <el-form-item label="组织名称">
        <el-tag>{{ form.groupName }}</el-tag>
      </el-form-item>
      <el-form-item label="权限范围" prop="dataScope">
        <DictSelection
          dictName="角色数据权限字典"
          clearable
          v-model="form.dataScope"
        >
        </DictSelection>
      </el-form-item>
      <el-form-item prop="dataScope">
        <el-scrollbar
          v-if="form.dataScope=='2'"
          v-loading="authLoading"
          style="height: 40vh"
          wrap-style="overflow-x: hidden;">
          <el-tree
            ref="tree"
            :data="deptData"
            :check-strictly="true"
            highlight-current
            node-key="id"
            :props="{ label: 'name' }"
            :expand-on-click-node="false"
            show-checkbox
            :default-expand-all="true"
            :default-checked-keys="checkedKeys"
          />
        </el-scrollbar>
      </el-form-item>
    </el-form>


    <template v-slot:footer>
      <el-button @click="updateVisible">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
import {putRoles} from '@/api/system/role';
import {listOrganizations} from "@/api/system/organization";

export default {
  components: {},
  props: {
    // 弹窗是否打开
    roleDataAuthDialogFlag: Boolean,
  },
  data() {
    return {
      form: {
        dataScope: '',
        dataScopeDeptIds: ''
      },
      rules: {},
      // 权限数据
      deptData: [],
      // 权限数据请求状态
      authLoading: false,
      // 提交状态
      loading: false,
      // 角色权限选中的keys
      checkedKeys: [],
      ids: []
    };
  },
  created() {
   this.getListOrganizations()
  },
  methods: {

    /* 查询权限数据 */
    init(row) {
      this.form = row
      this.form.dataScope = this.form.dataScope + ''
      this.$nextTick(()=>{
        this.$refs.tree.setCheckedKeys(this.form.dataScopeDeptIds.split(','))
      })

    },
    getListOrganizations(){
      this.authLoading = true;
      listOrganizations()
        .then((list) => {
          let _list = list.filter((i) => i.name != '超级管理员')
          this.authLoading = false;
          this.deptData = this.$util.toTreeData({
            data: _list,
            idField: 'id',
            parentIdField: 'parentId'
          });
        })
        .catch((e) => {
          this.loading = false;
          // this.$message.error(e.message);
        });
    },
    /* 保存权限分配 */
    save() {
      this.loading = true;
      if(this.form.dataScope=='2'){
        const ids = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
        this.form.dataScopeDeptIds = ids.join(',');
      }
      putRoles(this.form)
        .then((msg) => {
          this.loading = false;
          this.$message.success('操作成功');
          this.updateVisible();
          this.$emit('reload');
        })
        .catch((e) => {
          this.loading = false;
          // this.$message.error(e.message);
        });
    },
    /* 更新visible */
    updateVisible() {
      this.$emit('update:roleDataAuthDialogFlag', false);
    },
  },

};
</script>