UI授权

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

@@ -8,8 +8,9 @@
             :destroy-on-close="true"
             :close-on-click-modal="false"
             @close="cancelDialog">
    <el-container style="height: 550px">
    <el-aside>
      <basic-container>
      <basic-container style="height: 500px">
        <avue-tree ref="tree" :data="treeData" :option="treeOption" @node-click="nodeClick">
          <span slot-scope="{ node, data }" class="el-tree-node__label">
           <span style="font-size: 15px">
@@ -22,17 +23,21 @@
    </el-aside>

    <el-main>
      <basic-container>
        <avue-tree ref="uiTree" :data="uiTreeData" :option="uiTreeOption">
      <basic-container style="height: 500px">
        <h3 style="margin: 0">模块权限配置</h3>
        <div style="height: 445px;">
          <avue-tree ref="uiTree" :data="uiTreeData" :option="uiTreeOption">
          <span slot-scope="{ node, data }" class="el-tree-node__label">
           <span style="font-size: 15px">
              <i class="el-icon-user-solid"></i>
            <span style="font-size: 15px">
              <i :class="data.icon"></i>
                {{ (node || {}).label }}
            </span>
          </span>
        </avue-tree>
          </avue-tree>
        </div>
      </basic-container>
    </el-main>
    </el-container>
    <div class="dialog-footer avue-dialog__footer">
      <el-button type="primary" plain size="small" @click="submitDialog" >授权</el-button>
      <el-button type="primary" plain size="small" @click="clearValue" >重置</el-button>
@@ -58,7 +63,6 @@
      type:'',//业务类型
      context:'',//UI上下文code
      treeOption: {
        height: '500px',
        menu: false,
        addBtn: false,
        props: {
@@ -69,13 +73,17 @@
      },
      nodeRow: {},
      treeData: [],
      defaultExpandKeys:[],
      uiTreeOption: {
        height: '500px',
        nodeKey:'oid',
        checkOnClickNode:true,
        defaultExpandKeys:[],
        multiple: true,
        menu: false,
        addBtn: false,
        filter:false,
        props: {
          label: 'name',
          label: 'label',
          value: 'oid',
          children: 'children'
        }
@@ -89,7 +97,7 @@
      this.context=context;
      this.dialog.showDialog = true;
      this.getTreeList()

      this.uiTreeData=[];
    },
    cancelDialog() {
      this.dialog.loading = false;
@@ -105,31 +113,81 @@
      })
    },
    // 角色点击
    nodeClick(row) {
    nodeClick(row,node) {
      this.nodeRow = row;

      const loading = this.$loading({});
      getUIAuthor().then(res => {
        this.uiTreeData = res.data.data;
      const params = {
        'conditionMap[roleId]': this.nodeRow.oid,
        'conditionMap[type]': this.type,
        'conditionMap[context]': this.context
      }
      this.defaultExpandKeys=['root'];
      getUIAuthor(params).then(res => {
        this.processChildren(res.data.data[0]); // 处理每个节点
        this.uiTreeOption.defaultExpandKeys=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
        }];
        loading.close();
      }).catch(error=>{
      }).catch(error => {
        loading.close();
      })
    },
    //处理树
    processChildren(item) {
      if (item.children && item.children.length > 0) {
        item.children = item.children.map(child => {
          if(child.level<5){
            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-ticket';
            child.label=child.text
          }
          this.processChildren(child); // 递归处理每个子节点
          return child; // 只返回子节点的 attributes
        });
      }
    },
    submitDialog() {
      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();
      if (selectTreeList.length == 0) {
        this.$message.error("请选择功能模块");
        return;
      }
      const formData = {
        roleId: this.nodeRow.oid,
        type: this.type,
        context: this.context,
        selectTreeList: selectTreeList
      }
      authorizedUI(formData).then(res => {
        if (res.data.success) {
          this.$message.success("授权成功");
          this.cancelDialog();
        }
      });

    },
    clearValue(){
      this.$refs.uiTree.setCheckedNodes([])

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

@@ -20,6 +20,37 @@

    <el-main>
      <basic-container>
        <h3 style="margin: 0 0 10px 0">UI权限配置</h3>
        <div>
          <el-button icon="el-icon-place" plain size="small" type="primary" @click="saveHandler">授权</el-button>
          <el-button icon="el-icon-close" plain size="small" type="primary" @click="clearValue" style="margin-right: 40px;">重置</el-button>
          业务类型：<el-select v-model="type" placeholder="请选择" :clearable="true" @change="typeChange" style="width: 350px;margin-right: 20px;">
            <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" placeholder="请选择" :clearable="true" @change="contextChange" style="width: 350px;">
          <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 - 277px);margin-top: 10px;">
          <avue-tree ref="uiTree" :data="uiTreeData" :option="uiTreeOption">
            <span slot-scope="{ node, data }" class="el-tree-node__label">
               <span style="font-size: 15px">
                  <i :class="data.icon"></i>
                    {{ (node || {}).label }}
                </span>
            </span>
          </avue-tree>
        </div>
      </basic-container>
    </el-main>

@@ -29,14 +60,15 @@
<script>
import {gridRoles} from "@/api/system/role/api";
import {getUIAuthor,authorizedUI} from "@/api/authority/ui/uiAuthor";
import {getBizTree, gridUIContextData} from "@/api/UI/uiDefine";

export default {
  name: "index",
  data() {
    return {
      type:'',//业务类型
      context:'',//UI上下文code
      treeOption: {
        height: '500px',
        menu: false,
        addBtn: false,
        props: {
@@ -47,22 +79,27 @@
      },
      nodeRow: {},
      treeData: [],
      defaultExpandKeys:[],
      uiTreeOption: {
        height: '500px',
        defaultExpandKeys:[],
        multiple: true,
        menu: false,
        addBtn: false,
        filter:false,
        props: {
          label: 'name',
          label: 'label',
          value: 'oid',
          children: 'children'
        }
      },
      uiTreeData: [],
      typeData:[],
      contextData:[]
    }
  },
  created() {
    this.getTreeList()
    this.getTreeList();
    this.getTypeList()
  },
  methods:{
    getTreeList() {
@@ -77,26 +114,105 @@
    // 角色点击
    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() {
      if (this.nodeRow && this.nodeRow.oid) {
        const loading = this.$loading({});
        const params = {
          'conditionMap[roleId]': this.nodeRow.oid,
          'conditionMap[type]': this.type,
          'conditionMap[context]': this.context
        }
        this.defaultExpandKeys=['root'];
        getUIAuthor(params).then(res => {
          this.processChildren(res.data.data[0]); // 处理每个节点
          this.uiTreeOption.defaultExpandKeys=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
          }];
          loading.close();
        }).catch(error => {
          loading.close();
        })
      }
    },
    //处理树
    processChildren(item) {
      if (item.children && item.children.length > 0) {
        item.children = item.children.map(child => {
          if(child.level<5){
            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-ticket';
            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();
      if (selectTreeList.length == 0) {
        this.$message.error("请选择功能模块");
        return;
      }
      const formData = {
        roleId: this.nodeRow.oid,
        type: this.type,
        context: this.context,
        selectTreeList: selectTreeList
      }
      authorizedUI(formData).then(res => {
        if (res.data.success) {
          this.$message.success("授权成功");
          this.cancelDialog();
        }
      });
    },