Source/plt-web/plt-web-ui/src/views/authority/ui/uiAuthorization/index.vue

@@ -1,13 +1,13 @@
<template>
  <el-container>
    <el-aside>
      <basic-container>
      <basic-container v-loading="treeLoading">
        <div ref="TreeBox" style="height: calc(100vh - 154px);!important;">
          <!-- 左侧树         -->
          <div style="height:  calc(100vh - 200px);">
          <div style="height:  calc(100vh - 195px);">
            <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick">
              <span slot-scope="{ node, data }" class="el-tree-node__label">
               <span style="font-size: 15px">
               <span>
                  <i class="el-icon-user-solid"></i>
                    {{ (node || {}).label }}
                </span>
@@ -19,7 +19,50 @@
    </el-aside>

    <el-main>
      <basic-container>
      <basic-container v-loading="mainLoading">
        <h3 style="margin: 0 0 10px 0">UI权限配置</h3>
        <div>
          <el-button v-if="permissionList.rightBtn" class="button-custom-icon" plain size="small" type="primary" @click="saveHandler">
            <icon-show :name="permissionList.rightBtn.source"></icon-show>
            授权
          </el-button>
          <el-button v-if="permissionList.resetBtn" class="button-custom-icon" plain size="small" style="margin-right: 40px;" type="primary"
                     @click="clearValue">
            <icon-show :name="permissionList.resetBtn.source"></icon-show>
            重置
          </el-button>
          业务类型：
          <el-select v-model="type" :clearable="true" placeholder="请选择" size="small"
                     style="width: 300px;margin-right: 20px;"
                     @change="typeChange">
            <el-option
              v-for="item in typeData"
              :key="item.oid"
              :label="item.text"
              :value="item.attributes.name">
            </el-option>
          </el-select>
          UI上下文：
          <el-select v-model="context" :clearable="true" placeholder="请选择" size="small" style="width: 350px;"
                     @change="contextChange">
            <el-option
              v-for="item in contextData"
              :key="item.oid"
              :label="item.plCode+' '+item.plName"
              :value="item.plCode">
            </el-option>
          </el-select>
        </div>
        <div style="height:  calc(100vh - 232px);margin-top: 10px;">
          <avue-tree ref="uiTree" :data="uiTreeData" :node-key="oid" :option="uiTreeOption">
            <span slot-scope="{ node, data }" class="el-tree-node__label">
               <span>
                  <i :class="data.icon"></i>
                    {{ (node || {}).label }}
                </span>
            </span>
          </avue-tree>
        </div>
      </basic-container>
    </el-main>

@@ -27,16 +70,20 @@
</template>

<script>
import {gridRoles} from "@/api/system/role/api";
import {getUIAuthor,authorizedUI} from "@/api/authority/ui/uiAuthor";
import {gridRoles, getRightListByRoleId} from "@/api/system/role/api";
import {getUIAuthor, authorizedUI} from "@/api/authority/ui/uiAuthor";
import {getBizTree, gridUIContextData} from "@/api/UI/uiDefine";
import {mapGetters} from "vuex";

export default {
  name: "index",
  data() {
    return {
      type:'',//业务类型
      treeLoading: false,
      mainLoading:false,
      type: '',//业务类型
      context: '',//UI上下文code
      treeOption: {
        height: '500px',
        menu: false,
        addBtn: false,
        props: {
@@ -47,61 +94,210 @@
      },
      nodeRow: {},
      treeData: [],
      defaultExpandKeys: [],
      uiTreeOption: {
        height: '500px',
        defaultExpandedKeys: this.defaultExpandKeys,
        multiple: true,
        menu: false,
        addBtn: false,
        filter:false,
        filter: false,
        props: {
          label: 'name',
          label: 'label',
          value: 'oid',
          children: 'children'
        }
      },
      uiTreeData: [],
      typeData: [],
      contextData: []
    }
  },
  created() {
    this.getTreeList()
  computed:{
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        rightBtn: this.vaildData(this.permission[this.$route.query.id].RIGHT, false),
        resetBtn: this.vaildData(this.permission[this.$route.query.id].RESET, false),
      };
    },
  },
  methods:{
  created() {
    this.getTreeList();
    // this.getUITree();
    this.getTypeList();
  },
  methods: {
    getTreeList() {
      const loading = this.$loading({});
      this.treeLoading = true;
      gridRoles().then(res => {
        this.treeData = res.data.data;
        loading.close();
      }).catch(error=>{
        loading.close();
        this.treeLoading = false;
      }).catch(error => {
        this.treeLoading = false;
      })
    },

    // 角色点击
    nodeClick(row) {
      this.nodeRow = row;
      const loading = this.$loading({});
      getUIAuthor().then(res => {
        this.uiTreeData = res.data.data;
        loading.close();
      }).catch(error=>{
        loading.close();
      this.getUITree();
    },

    getUITree() {
      this.mainLoading = true;
      const params = {
        'conditionMap[roleId]': this.nodeRow.oid,
        'conditionMap[type]': this.type,
        'conditionMap[context]': this.context,
        'conditionMap[showCheckbox]': true
      }
      this.defaultExpandKeys = ['root'];
      getUIAuthor(params).then(res => {
        this.processChildren(res.data.data[0]); // 处理每个节点
        this.uiTreeOption.defaultExpandedKeys = this.defaultExpandKeys;
        this.uiTreeData = [{
          attributes: {},
          checked: false,
          expanded: true,
          data: "root",
          level: 0,
          icon: 'el-icon-s-home',
          oid: res.data.data[0].oid,
          label: res.data.data[0].text,
          children: res.data.data[0].children
        }];
        const checkedData = this.findCheckedOids(res.data.data[0]);
        this.$refs.uiTree.setCheckedKeys(checkedData);

        this.mainLoading = false;
      }).catch(error => {
        this.mainLoading = false;
      })
    },

    // 查找已选择节点
    findCheckedOids(obj, result = []) {
      if (obj.checked === true) {
        result.push(obj.oid);
      }
      // 如果有 children，则继续遍历
      if (obj.children && obj.children.length > 0) {
        obj.children.forEach(child => {
          this.findCheckedOids(child, result);
        });
      }
      return result;
    },

    //处理树
    processChildren(item) {
      if (item.children && item.children.length > 0) {
        item.children = item.children.map(child => {
          if (child.level < 3) {
            // 默认树节点展开两层效果
            this.defaultExpandKeys.push(child.oid)
          }
          if (child.level == 1) {
            child.icon = 'el-icon-s-promotion';
            child.label = child.data.label + '（' + child.data.name + '）'
          } else if (child.level == 2) {
            child.icon = 'el-icon-s-order';
            child.label = child.text
          } else if (child.level == 3) {
            child.icon = 'el-icon-office-building';
            child.label = child.text
          } else if (child.level == 4) {
            child.icon = 'el-icon-document';
            child.label = child.text
          } else if (child.level == 5) {
            child.icon = 'el-icon-s-tools';
            child.label = child.text
          }
          this.processChildren(child); // 递归处理每个子节点
          return child; // 只返回子节点的 attributes
        });
      }
    },

    getTypeList() {
      getBizTree().then(res => {
        this.typeData = res.data.obj.children;
      })
    },

    typeChange(data) {
      this.contextData = [];
      this.type = data;
      if (data) {
        const params = {
          'conditionMap[btmName]': data,
        }
        gridUIContextData(1, 500, params).then(res => {
          this.contextData = res.data.data;
        })
      } else {
        this.contextData = [];
      }
      this.getUITree();
    },

    contextChange(data) {
      this.context = data;
      this.getUITree();
    },

    saveHandler() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const formData={}
          authorizedUI(formData).then(res => {
            if (res.data.success) {
              this.$message.success("保存成功");
              this.cancelDialog();
            }
          });
        } else {
          return false;
      const selectTreeList = this.$refs.uiTree.getCheckedNodes();
      const selectParentList = this.$refs.uiTree.getHalfCheckedNodes();
      if (selectTreeList.length == 0) {
        this.$message.error("请选择功能模块");
        return;
      }
      const selectTreeData = selectTreeList.map(item => {
        return {
          checked: true,
          expanded: true,
          data:item.data,
          parentId:item.parentId,
          level: item.level,
          leaf:item.leaf,
          oid: item.oid,
          text: item.text
        }
      })

      const parentData = selectParentList.map(item => {
        return {
          checked: false,
          expanded: true,
          data:item.data,
          parentId:item.parentId,
          level: item.level,
          leaf:item.leaf,
          oid: item.oid,
          text: item.text
        }
      })
      // 在半选状态中过滤掉顶级节点 oid 为 root
      const filterSelectTreeData = parentData.filter(item => item.oid !== 'root');

      const data = [...selectTreeData,...filterSelectTreeData];
      const formData = {
        roleId: this.nodeRow.oid,
        type: this.type,
        context: this.context,
        selectTreeList: data
      }
      authorizedUI(formData).then(res => {
        if (res.data.success) {
          this.$message.success("授权成功");
          this.cancelDialog();
        }
      });
    },
    clearValue(){
      this.$refs.uiTree.setCheckedNodes([])

    clearValue() {
      this.$refs.uiTree.setCheckedNodes([]);
    }
  }
}
@@ -112,8 +308,9 @@
  .el-scrollbar__wrap {
    overflow: auto !important;
  }
  .headerCon{
    .el-button{

  .headerCon {
    .el-button {
      width: 82px;
    }
  }