1

lzhe

2024-09-30 245cbd725988d579d015fd4834277aacca352dec

1

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

@@ -24,24 +24,27 @@
                </ul>
                <div class="role-main-title">权限管理</div>
            </div>
            <el-tabs tab-position="top">
            <el-tabs tab-position="top" class="topStyle" @tab-click="topHandleClick">
                <el-tab-pane label="菜单">
                    <div class="treeMain">
                        <el-tabs tab-position="left" class="demo-tabs" v-model="menuActiveName" @tab-click="menuHandleClick">
                        <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="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-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>
                        </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> -->
                        123
                        <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>
                        </el-tabs>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <div class="roleSubmit"><el-button type="primary" :loading="submitIsSaveing" @click="roleSubmit()">保 存</el-button></div>
        </div>

        <el-dialog title="人员选择" v-model="userVisible" :width="500" destroy-on-close>
@@ -75,10 +78,12 @@
        },
        data() {
            return {
                menuHandleText: "",
                showtree: true,
                treeCheck: [],
                menuActiveName: "",
                treeData: [],
                treeData1: [],
                menuGrantList: [],
                total: 0,
                searchData: {
@@ -130,7 +135,7 @@
                var obj = {
                    apiScopeIds: [],
                    dataScopeIds: [],
                    menuIds: this.$refs.tree[0].getCheckedKeys(),
                    menuIds: this.treeCheck,
                    roleIds: [this.tableLiId]
                }
                this.isSaveing = true;
@@ -141,17 +146,43 @@
                    }
                })
            },
            menuHandleClick(tab, event) {
                this.setTreeList(this.menuGrantList,event.target.innerText);  //tree
            topHandleClick(tab,event) {
                if(this.menuHandleText == "") {
                    this.menuHandleText = this.menuGrantList[0].title;
                }
                if(event.target.innerText == "菜单") {
                    this.setTreeList(this.menuGrantList,this.menuHandleText,'0');  //tree
                }
                if(event.target.innerText == "卡片") {
                    this.setTreeList(this.menuGrantList1,this.menuHandleText,'1');  //tree
                }
            },
            treeHandleCheckChange() {

            menuHandleClick(tab, event,index) {
                if(index == 0) {
                    this.setTreeList(this.menuGrantList,event.target.innerText,index);  //tree
                }
                if(index == 1) {
                    this.setTreeList(this.menuGrantList1,event.target.innerText,index);  //tree
                }
                this.menuHandleText = event.target.innerText;
            },
            setTreeList(arr,name) {
            treeHandleCheckChange(item) {
                if(!item.hasChildren) {
                    this.treeCheck.push(item.id);
                }
            },
            setTreeList(arr,name,index=0) {
                this.treeData = [];
                this.treeData1 = [];
                arr.forEach(item=> {
                    if(item.title == name) {
                        //this.treeData = item.children;
                        if(index == '0') {
                        this.treeData = item.children;
                        }
                        if(index == '1') {
                            this.treeData1 = item.children;
                        }
                    }
                })
            },
@@ -180,7 +211,7 @@
            },
            getSelectTree(res,id,index) {//获取已选数据
                this.$HTTP.get(`/api/blade-system/menu/role-tree-keys?roleIds=${id}`).then(resp=> {
                    if(res.code == 200) {
                    if(resp.code == 200) {
                        this.tableData.forEach(item=> {
                            item.active = false;
                        })
@@ -189,15 +220,30 @@
                        this.tableLiId = id;  //角色id
                        this.$nextTick(()=> {
                            this.showtree = true;
                            //菜单
                            this.menuGrantList = res.data.menu.filter(item=> { //过滤掉没有children的
                                return item.children;
                            });
                            //卡片
                            this.menuGrantList1 = [];
                            res.data.card.forEach(item=> {
                                this.menuGrantList.forEach(item1=> {
                                    if(item.id == item1.id) {
                                        this.menuGrantList1.push(item);
                                    }
                                })
                            })
                            this.menuActiveName = this.menuGrantList[0].title;//默认第一个菜单
                            this.setTreeList(this.menuGrantList,this.menuActiveName);//展示树（左侧菜单list，左侧菜单名字）
                            var lastId = [],idarr = [];
                            var lastId = [];
                            var lastId = this.extractLastLevelIds(this.menuGrantList);  //获取最后一级id
                            var idarr = this.findOverlap(lastId,resp.data.menu); //找出两个数组重合的部分
                            this.treeCheck = idarr;  //获取选中数据

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

                            this.treeCheck = [...idarr,...idarr1];  //获取选中数据
                        })
                    }
                })
@@ -453,3 +499,8 @@
    z-index: 11;
}
</style>
<style>
.topStyle .el-tabs__header .el-tabs__nav-scroll .el-tabs__item{
    padding-left: 20px;
}
</style>