update

gaoshp

2024-11-03 3e091224ab26252d8624b42b461ba773ee8bee0f

 src/views/console/authority/role/index.vue

@@ -28,8 +28,8 @@
            <el-tab-pane label="菜单">
               <div class="treeMain">
                  <el-tabs tab-position="left" class="demo-tabs" v-model="menuActiveName" @tab-click="(tab,event)=>menuHandleClick(tab,event,'0')">
                     <el-tab-pane v-for="item in menuGrantList" :label="item.title" :name="item.title">
                        <el-tree ref="tree0" v-if="showtree" :data="treeData" :props="{ label: 'title',children: 'children'}" node-key="id" show-checkbox @check-change="treeHandleCheckChange" :default-checked-keys="treeCheck" default-expand-all />
                     <el-tab-pane v-for="(item,index) in menuGrantList" :label="item.title" :name="item.title">
                        <el-tree ref="tree0" v-if="showtree" :data="treeData" :props="{ label: 'title',children: 'children'}" node-key="id" show-checkbox @check-change="(item,isCheck)=>treeHandleCheckChange(item,isCheck,index)" :default-checked-keys="treeCheck" default-expand-all :check-strictly="true"/>
                     </el-tab-pane>
                  </el-tabs>
               </div>
@@ -37,8 +37,8 @@
            <el-tab-pane label="卡片">
               <div class="treeMain">
                  <el-tabs tab-position="left" class="demo-tabs" v-model="menuActiveName" @tab-click="(tab,event)=>menuHandleClick(tab,event,'1')">
                     <el-tab-pane v-for="item in menuGrantList" :label="item.title" :name="item.title">
                        <el-tree ref="tree1" v-if="showtree" :data="treeData1" :props="{ label: 'title',children: 'children'}" node-key="id" show-checkbox @check-change="treeHandleCheckChange" :default-checked-keys="treeCheck" default-expand-all />
                     <el-tab-pane v-for="(item,index) in menuGrantList" :label="item.title" :name="item.title">
                        <el-tree ref="tree1" v-if="showtree" :data="treeData1" :props="{ label: 'title',children: 'children'}" node-key="id" show-checkbox @check-change="(item,isCheck)=>treeHandleCheckChange(item,isCheck,index)" :default-checked-keys="treeCheck" default-expand-all :check-strictly="true"/>
                     </el-tab-pane>
                  </el-tabs>
               </div>
@@ -78,6 +78,7 @@
      },
      data() {
         return {
            templateGrantTreeCard: [],  //临时存储/menu/grant-tree中的card
            menuHandleText: "",
            showtree: true,
            treeCheck: [],
@@ -132,10 +133,20 @@
      },
      methods: {
         roleSubmit() {  //保存
            var cardIdArrId = [];  //默认增加全局卡片
            this.templateGrantTreeCard.forEach(item=> {
               if(item.code == "desk") {
                  cardIdArrId.push(item.id);
                  item.children.forEach(item1=> {
                     cardIdArrId.push(item1.id);
                  })
               }
            })
            var list = [...new Set([...cardIdArrId, ...this.treeCheck])];;  //新数组，cardIdArr和this.treeCheck合并
            var obj = {
               apiScopeIds: [],
               dataScopeIds: [],
               menuIds: this.treeCheck,
               menuIds: list,
               roleIds: [this.tableLiId]
            }
            this.isSaveing = true;
@@ -166,9 +177,46 @@
            }
            this.menuHandleText = event.target.innerText;
         },
         treeHandleCheckChange(item) {
            if(!item.hasChildren) {
               this.treeCheck.push(item.id);
         treeHandleCheckChange(item,isCheck,index) {
            var that = this;
            if(isCheck) {
               function checkoutId(val){
                  if(!that.treeCheck.includes(val.id)) {
                     that.treeCheck.push(val.id);
                  }
                  if(val.children) {
                     val.children.forEach(item1=> {
                        checkoutId(item1);
                     })
                  }
               }
               checkoutId(item);
               that.$refs.tree0[index].setCheckedKeys(this.treeCheck,false);
            }else {  //取消选中
               if(item.children) {  //有children
                  function delCheckoutId(val){
                     that.treeCheck.forEach((val1,valIndex)=> {
                        if(val1 == val.id) {
                           that.treeCheck.splice(valIndex,1);
                        }
                     })
                     if(val.children) {
                        val.children.forEach(item1=> {
                           delCheckoutId(item1);
                        })
                     }
                  }
                  delCheckoutId(item);
                  that.$refs.tree0[index].setCheckedKeys(this.treeCheck,false);
               }else {  //没有children
                  if(this.treeCheck.length != 0) {
                     this.treeCheck.forEach((val,valIndex)=> {
                        if(val == item.id) {
                           this.treeCheck.splice(valIndex,1);
                        }
                     })
                  }
               }	
            }
         },
         setTreeList(arr,name,index=0) {
@@ -176,7 +224,6 @@
            this.treeData1 = [];
            arr.forEach(item=> {
               if(item.title == name) {
                  //this.treeData = item.children;
                  if(index == '0') {
                     this.treeData = item.children;
                  }
@@ -215,17 +262,17 @@
                  this.tableData.forEach(item=> {
                     item.active = false;
                  })
                  this.tableData[index].active = true;  //选中
                  this.tableData[index].active = true;  //左侧切换角色选中
                  this.showtree = false;
                  this.tableLiId = id;  //角色id
                  this.$nextTick(()=> {
                     this.showtree = true;
                     //菜单
                     this.menuGrantList = res.data.menu.filter(item=> { //过滤掉没有children的
                     this.menuGrantList = res.data.menu.filter(item=> { //过滤掉没有children的,这里是res，不是resp，是菜单tree左侧的选项
                        return item.children;
                     });
                     //卡片
                     this.menuGrantList1 = [];
                     this.menuGrantList1 = [];  //card的tree左侧的选项
                     res.data.card.forEach(item=> {
                        this.menuGrantList.forEach(item1=> {
                           if(item.id == item1.id) {
@@ -235,15 +282,18 @@
                     })
                     this.menuActiveName = this.menuGrantList[0].title;//默认第一个菜单
                     this.setTreeList(this.menuGrantList,this.menuActiveName);//展示树（左侧菜单list，左侧菜单名字）
                     var lastId = [];
                     var lastId = this.extractLastLevelIds(this.menuGrantList);  //获取最后一级id
                     var idarr = this.findOverlap(lastId,resp.data.menu); //找出两个数组重合的部分

                     var lastId1 = [];
                     var lastId1 = this.extractLastLevelIds(this.menuGrantList1);  //获取最后一级id
                     var idarr1 = this.findOverlap(lastId1,resp.data.card); //找出两个数组重合的部分
                     var idarr = resp.data.menu.concat(resp.data.card);
                     this.treeCheck = [...new Set(idarr)];  //获取选中数据
                     // var lastId = [];
                     // var lastId = this.extractLastLevelIds(this.menuGrantList);  //获取最后一级id
                     // var idarr = this.findOverlap(lastId,resp.data.menu); //找出两个数组重合的部分

                     this.treeCheck = [...idarr,...idarr1];  //获取选中数据
                     // var lastId1 = [];
                     // var lastId1 = this.extractLastLevelIds(this.menuGrantList1);  //获取最后一级id
                     // var idarr1 = this.findOverlap(lastId1,resp.data.card); //找出两个数组重合的部分

                     // this.treeCheck = [...idarr,...idarr1];  //获取选中数据
                  })
               }
            })
@@ -251,6 +301,7 @@
         getMenuGrant(row,index) {
            this.$HTTP.get(`/api/blade-system/menu/grant-tree`).then(res=> {
               if(res.code == 200) {
                  this.templateGrantTreeCard = res.data.card;  //临时存储/menu/grant-tree中的card
                  //获取已选数据  (树的数据，角色id)
                  this.getSelectTree(res,row.id,index);
               }