1

lzhe

2024-05-24 c9ce5e7f9a9ef52c66baf4f8a6e8d9e48b7cb251

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

@@ -27,12 +27,18 @@
         <el-tabs tab-position="top">
            <el-tab-pane label="菜单">
               <div class="treeMain">
                  <el-tree ref="menu" node-key="name" :data="menu.list" :props="menu.props" show-checkbox></el-tree>
                  <el-tabs tab-position="left" class="demo-tabs" v-model="menuActiveName" @tab-click="menuHandleClick">
                     <el-tab-pane v-for="item in menuGrantList" :label="item.title" :name="item.title">
                        <el-tree ref="tree" 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>
                  </el-tabs>
                  <div class="roleSubmit"><el-button type="primary" :loading="submitIsSaveing" @click="roleSubmit()">保 存</el-button></div>
               </div>
            </el-tab-pane>
            <el-tab-pane label="卡片">
               <div class="treeMain">
                  <el-tree ref="grid" node-key="key" :data="grid.list" :props="grid.props" :default-checked-keys="grid.checked" show-checkbox></el-tree>
                  <!-- <el-tree ref="grid" node-key="key" :data="grid.list" :props="grid.props" :default-checked-keys="grid.checked" show-checkbox></el-tree> -->
                  123
               </div>
            </el-tab-pane>
         </el-tabs>
@@ -69,6 +75,11 @@
      },
      data() {
         return {
            showtree: true,
            treeCheck: [],
            menuActiveName: "",
            treeData: [],
            menuGrantList: [],
            total: 0,
            searchData: {
               current: 1,
@@ -76,6 +87,7 @@
            },
            tableLiId: "", //当前角色id
            isSaveing: false,
            submitIsSaveing: false,
            userVisibleData: [],
            userVisible: false,
            roleHeaderList: [],
@@ -114,21 +126,111 @@
         this.getUser();  //获取全部账号
      },
      methods: {
         roleSubmit() {  //保存
            var obj = {
               apiScopeIds: [],
               dataScopeIds: [],
               menuIds: this.$refs.tree[0].getCheckedKeys(),
               roleIds: [this.tableLiId]
            }
            this.isSaveing = true;
            this.$HTTP.post(`/api/blade-system/role/grant`,obj).then(res=> {
               this.isSaveing = false;
               if(res.code == 200) {
                  this.$message.success("操作成功");
               }
            })
         },
         menuHandleClick(tab, event) {
            this.setTreeList(this.menuGrantList,event.target.innerText);  //tree
         },
         treeHandleCheckChange() {

         },
         setTreeList(arr,name) {
            this.treeData = [];
            arr.forEach(item=> {
               if(item.title == name) {
                  this.treeData = item.children;
               }
            })
         },
         extractLastLevelIds(array) {  //递归获取children最后一级的id的数组
            let ids = [];  
            for (let i = 0; i < array.length; i++) {  
               const obj = array[i];  
               if (obj.children) {  
                  // 递归调用以提取更深层级的children中的id  
                  ids = ids.concat(this.extractLastLevelIds(obj.children));  
               } else {  
                  // 如果没有children属性，则假定当前对象是最后一级  
                  if (obj.id) {  
                     ids.push(obj.id);  
                  }  
               }  
            }  
            return ids; 
         },
         findOverlap(array1, array2) {   //找出两个数组重合的部分
            // 创建一个集合（Set）来存储第二个数组中的元素，以便于快速查找  
            const set = new Set(array2);  
            // 使用filter方法过滤出第一个数组中在集合中存在的元素  
            const overlap = array1.filter(item => set.has(item));  
            return overlap;  
         },
         getSelectTree(res,id,index) {//获取已选数据
            this.$HTTP.get(`/api/blade-system/menu/role-tree-keys?roleIds=${id}`).then(resp=> {
               if(res.code == 200) {
                  this.tableData.forEach(item=> {
                     item.active = false;
                  })
                  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的
                        return item.children;
                     });
                     this.menuActiveName = this.menuGrantList[0].title;//默认第一个菜单
                     this.setTreeList(this.menuGrantList,this.menuActiveName);//展示树（左侧菜单list，左侧菜单名字）
                     var lastId = [],idarr = [];
                     var lastId = this.extractLastLevelIds(this.menuGrantList);  //获取最后一级id
                     var idarr = this.findOverlap(lastId,resp.data.menu); //找出两个数组重合的部分
                     this.treeCheck = idarr;  //获取选中数据
                  })
               }
            })
         },
         getMenuGrant(row,index) {
            this.$HTTP.get(`/api/blade-system/menu/grant-tree`).then(res=> {
               if(res.code == 200) {
                  //获取已选数据  (树的数据，角色id)
                  this.getSelectTree(res,row.id,index);
               }
            })
         },
         userSubmit() {
            var ids = [];
            this.userSelection.forEach(item=> {
               ids.push(item.id);
            })
            this.isSaveing = true;

            this.$HTTP.post(`/api/blade-user/${this.tableLiId}/save`,{ids}).then(res=> {
               this.isSaveing = false;
               if(res.code == 200) {
                  this.userVisible = false;
                  this.$message.success("操作成功");
                  this.getBladeList(this.tableLiId);  //获取人员列表
                  this.$HTTP.get(`/api/blade-user/${this.tableLiId}/list`).then(res=> {
                     if(res.code == 200) {
                        this.roleHeaderList = res.data;
                     }
                  })
               }
            })
         },
         userVisibleChange(selection) {
            console.log(selection);
            this.userSelection = selection;
         },
         addUser() {  //添加账号
@@ -142,10 +244,11 @@
               }
            })
         },
         getBladeList(id) {  //人员列表
            this.$HTTP.get(`/api/blade-user/${this.tableLiId}/list`).then(res=> {
         getBladeList(row,index) {  //人员列表
            this.$HTTP.get(`/api/blade-user/${row.id}/list`).then(res=> {
               if(res.code == 200) {
                  this.roleHeaderList = res.data;
                  this.getMenuGrant(row,index);   //获取tree
               }
            })
         },
@@ -156,20 +259,14 @@
            this.roleHeaderList[index].active = true;
         },
         changeTabaleLi(row,index) {
            this.tableData.forEach(item=> {
               item.active = false;
            })
            this.tableData[index].active = true;
            this.tableLiId = row.id;
            this.getBladeList(row.id);  //获取人员列表
            this.getBladeList(row,index);  //获取人员列表
         },
         getRoleList() {
            this.$HTTP.get("/api/blade-system/role/list?current=1&size=1000").then(res=> {
               if(res.code == 200) {
                  res.data[0].active = true;
                  this.tableData = res.data;
                  this.tableLiId = this.tableData[0].id;
                  this.getBladeList(this.tableData[0].id);  //获取人员列表
                  this.getBladeList(this.tableData[0],0);  //默认第一个角色获
               }
            })
         },
@@ -272,7 +369,7 @@
   line-height: 41px;
   font-size: 14px;
   text-align: center;
   background-color: #3b8e8e;
   background-color: #409eff;
   color: #fff;
}
.rolePage .roleContainer ul {
@@ -292,7 +389,7 @@
}
.rolePage .roleContainer ul li .active {
   font-weight: bold;
   color: #3b8e8e;
   color: #409eff;
}
.rolePage .roleContainer ul li:hover {
   background-color: #f5f7fa;
@@ -314,7 +411,7 @@
.role-main-title {
   padding: 6px 10px;
    font-size: 14px;
    background-color: #d8e8d8;
    background-color: #9dc7f2;
    margin-bottom: 8px;
    border-radius: 2px;
}
@@ -334,10 +431,25 @@
    text-overflow: ellipsis;
}
.role-main-header ul li.titleActive {
   border: 1px solid #3b8e8e;
   border: 1px solid #409eff;
}
.role-main-header ul li.role-header-add {
   display: inline-block;
   border: 1px dashed #e5e5e5;
}
.treeMain {
   position: relative;
   margin-bottom: 60px;
}
.roleSubmit {
   bottom: 0;
    position: fixed;
    width: 100%;
    text-align: right;
    right: 0;
    padding-right: 20px;
    padding-bottom: 12px;
    background: #fff;
    z-index: 11;
}
</style>