1

lzhe

2024-04-07 ea57d9c45a677c1875301e09ea6aa68c6d562f44

1

 src/config/index.js

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-04-07 12:06:03
 * @LastEditTime: 2024-04-07 12:16:15
 * @FilePath: /smart-web/src/config/index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
@@ -39,7 +39,7 @@

    //布局 默认：default | 通栏：header | 经典：menu | 功能坞：dock
    //dock将关闭标签和面包屑栏
    LAYOUT: 'default',
    LAYOUT: 'dock',

    //菜单是否折叠
    MENU_IS_COLLAPSE: false,

 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 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,12 +126,111 @@
            this.getUser();  //获取全部账号
        },
        methods: {
            roleSubmit() {  //保存
                var obj = {
                    apiScopeIds: [],
                    dataScopeIds: [],
                    menuIds: ["1519970491499069442", "1519971258746322945", "1519972116229832706", "1519972350729175041"],
                    roleIds: [this.tableLiId]
                }
                // 0: "1519970491499069442"
                // 1: "1519971258746322945"
                // 2: "1519972116229832706"
                // 3: "1519972350729175041"
                // 4: "1519972501539569666"
                // 5: "1123598815738675201"
                // 6: "1483632111746801666"
                // 7: "1470274120439566338"
                // 8: "1503966666579030018"
                // 9: "1529388585562615809"
                // 10: "1529365139944321026"
                // this.$HTTP.post(`/api/blade-system/role/grant`,obj).then(res=> {
                //     this.isSaveing = false;
                //     if(res.code == 200) {
                //         this.userVisible = false;
                //         this.$message.success("操作成功");
                //         this.getBladeList(this.tableLiId);  //获取人员列表
                //     }
                // })
            },
            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("操作成功");
@@ -128,7 +239,6 @@
                })
            },
            userVisibleChange(selection) {
                console.log(selection);
                this.userSelection = selection;
            },
            addUser() {  //添加账号
@@ -142,10 +252,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 +267,15 @@
                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);  //默认第一个角色获
                        console.log(this.tableData[0],this.tableData[0].id)
                    }
                })
            },
@@ -340,4 +446,19 @@
    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>

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

@@ -1,15 +1,50 @@
<template>
    <el-dialog title="角色权限设置" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
        <el-tabs tab-position="top">
            <el-tab-pane label="菜单">
            <el-tab-pane label="菜单权限">
                <div class="treeMain">
                    <el-tree ref="menu" node-key="name" :data="menu.list" :props="menu.props" show-checkbox></el-tree>
                </div>
            </el-tab-pane>
            <el-tab-pane label="卡片">
            <el-tab-pane label="数据权限">
                <el-form label-width="100px" label-position="left">
                    <el-form-item label="规则类型">
                        <el-select v-model="data.dataType" placeholder="请选择">
                            <el-option label="全部可见" value="1"></el-option>
                            <el-option label="本人可见" value="2"></el-option>
                            <el-option label="所在部门可见" value="3"></el-option>
                            <el-option label="所在部门及子级可见" value="4"></el-option>
                            <el-option label="选择的部门可见" value="5"></el-option>
                            <el-option label="自定义" value="6"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择部门" v-show="data.dataType=='5'">
                        <div class="treeMain" style="width: 100%;">
                            <el-tree ref="dept" node-key="id" :data="data.list" :props="data.props" show-checkbox></el-tree>
                        </div>
                    </el-form-item>
                    <el-form-item label="规则值" v-show="data.dataType=='6'">
                        <el-input v-model="data.rule" clearable type="textarea" :rows="6" placeholder="请输入自定义规则代码"></el-input>
                    </el-form-item>
                </el-form>
            </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>
                </div>
            </el-tab-pane>
            <el-tab-pane label="控制台">
                <el-form label-width="100px" label-position="left">
                    <el-form-item label="控制台视图">
                        <el-select v-model="dashboard" placeholder="请选择">
                            <el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label" :value="item.value">
                                <span style="float: left">{{ item.label }}</span>
                                <span style="float: right; color: #8492a6; font-size: 12px">{{ item.views }}</span>
                            </el-option>
                        </el-select>
                        <div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <template #footer>
@@ -71,9 +106,9 @@
            }
        },
        mounted() {
            // this.getMenu()
            // this.getDept()
            // this.getGrid()
            this.getMenu()
            this.getDept()
            this.getGrid()
        },
        methods: {
            open(){
@@ -120,25 +155,29 @@
                this.grid.list = [
                    {
                        key: "welcome",
                        title: "主数据",
                        title: "欢迎",
                        isFixed: true
                    },
                    {
                        key: "ver",
                        title: "采集分析",
                        title: "版本信息",
                        isFixed: true
                    },
                    {
                        key: "time",
                        title: "生产工艺"
                        title: "时钟"
                    },
                    {
                        key: "progress",
                        title: "数字看板"
                        title: "进度环"
                    },
                    {
                        key: "echarts",
                        title: "配置中心"
                        title: "实时收入"
                    },
                    {
                        key: "about",
                        title: "关于项目"
                    }
                ]
            }