sasp-admin 0.2.57

package/src/views/org/ownerMenu/ownerMenuTree.vue

@@ -0,0 +1,269 @@
+<template>
+    <el-container style="height: 100%;">
+        <el-header>
+            <el-input size="medium" prefix-icon="el-icon-search" placeholder="输入关键字进行过滤" clearable v-model="filterText">
+            </el-input>
+        </el-header>
+        <el-main class="mainTree" style="height:calc(100% - 45px);">
+            <pl-lazy>
+                <common-tree  v-if="isLoadTree" ref="roleMenuTreeRef" :request-url="api.auth.getOwnMenu" :request-param="requestParam"
+                              :default-props="defaultProps" parent-id="menuChiefNum" :deal-tree-data="dealTreeData"
+                              :render-content-func="renderContent"
+                              :filterText="filterText"
+                              :checkbox=false defaultExpandAll
+                              :init-check="initCheck" :refresh-boolean-proper="refreshBooleanProper" :node-click="nodeClick"
+                              :expand-onclick-node="false">
+                </common-tree>
+            </pl-lazy>
+        </el-main>
+    </el-container>
+</template>
+
+
+<script>
+    export default {
+        name:"owner-menu-tree",
+        props:{
+            roleId:{type:String,default:""},//关联的角色权限id
+            userType:{type:String,default:"empower"},
+            userId:{type:String,default:""},
+            refreshBooleanProper:{type:Boolean,default:false}//是否刷新树组件
+        },
+        data(){
+            return {
+                filterText:"",
+                requestParam:{"userId":this.userId,"userType":this.userType},
+                defaultProps: {
+                    children: 'children',
+                    label: 'menuName'
+                },
+                initCheck:{},
+                currentDataObj:{},
+                isLoadTree:false,//树是否重新加载
+                dimensionObj:{}
+            }
+        },
+        watch:{
+            refreshBooleanProper(){
+                let vm = this;
+                if(vm.refreshBooleanProper){
+                    vm.init();
+                }else{
+                    vm.isLoadTree = false;
+                }
+
+            }
+        },
+        created(){
+            let vm = this;
+            vm.axios.post(vm.api.sysOrgDimension.find).then(res => {
+                (res.data || []).forEach(item => {
+                   let dimSpec = JSON.parse(vm.platStringUtil.replaceAll(item.dimSpec,"'","\"") || "{}");
+                   vm.dimensionObj[item["id"]] = dimSpec["menuLocalName"];
+                });
+                vm.dimensionObj["sys"] = "系统";
+                this.init();
+            });
+        },
+        methods:{
+            init(){
+                let vm = this;
+                vm.currentDataObj = {};
+                let url = "";
+                let dataObj = {};
+                if(vm.userType == "empower"){
+                    if(!vm.roleId){
+                        vm.initCheck["initCheck"] = [];
+                        vm.isLoadTree = true;
+                        return;
+                    }
+                    url = vm.api.roleMenuOpt.find;
+                    dataObj = {"roleId":vm.roleId};
+                }else{
+                    if(!vm.userId){
+                        vm.initCheck["initCheck"] = [];
+                        vm.isLoadTree = true;
+                        return;
+                    }
+                    url = vm.api.menu.findNormalUserByUserId;
+                    dataObj = {"userId":vm.userId};
+                }
+
+                vm.axios.post(url,dataObj).then(function (res) {
+                    let checkArr = [];
+                    res.data.forEach(function (each) {
+                        if(vm.userType == "empower"){
+                            checkArr.push(each.menuId);
+                        }else{
+                            checkArr.push(each.id);
+                        }
+                    });
+                    vm.initCheck["initCheck"] = checkArr; // 初始化选中数据
+                    vm.isLoadTree = true;
+                });
+            },
+            dealTreeData(data){
+                // let arr = [];
+                // let vm = this;
+                let realInfoArr = []; // 实际需要的数据，清除未勾选的数据，但保留已勾选的上级未选中的数据
+                let realInfoIds = [];
+                let obj = {};
+                data.forEach(function (each) {
+                    obj[each["id"]] = each;
+                    recursionData(each);
+                });
+                function recursionData(data){
+                    if(data){
+                        if(realInfoIds.indexOf(data["id"]) == -1){
+                            realInfoArr.push(data);
+                            realInfoIds.push(data["id"]);
+                        }
+                        recursionData(obj[data["menuChiefNum"]]);
+                    }
+                }
+                /*realInfoArr.forEach(function (each) {
+                    let belong = "";
+                    each["disabled"] = true;
+                    if(each["menuChiefNum"] == '-1'){
+                        each["menuChiefNum"] = each["menuModel"] + "_model";
+                    }
+                    each["cdss"] && (belong = "(" + (vm.dimensionObj[each["cdss"]] || each["cdss"]) + ")");
+                    each["menuShowName"] = each["menuName"] + belong;
+                    if(modelArr.indexOf(each["menuModel"]) == -1){
+                        modelArr.push(each["menuModel"]);
+                        arr.push({
+                            'id': each.menuModel + "_model",
+                            "menuModel":each.menuModel,
+                            "menuShowName": (each["frontMenuModelName"] || "无") + '(所属模块)',
+                            'order': "1",
+                            'menuLevel': 0,
+                            'menuChiefNum': "-2",
+                            'menuPath': "-2",
+                            'menuSfqy': "Y",
+                            "disabled":true,
+                        });
+                    }
+                });*/
+                // arr.concat(realInfoArr);
+                realInfoArr = realInfoArr.sort(this.sortData);
+                return realInfoArr;
+            },
+            sortData(a,b){
+                return Number(a.menuOrder) - Number(b.menuOrder);
+            },
+
+            renderContent(h, {node, data, store}) {
+                return (
+                    <span class={node.level == 1 ? 'model-color':''} style={node.level == 1 ? 'letter-spacing:1px':''}>
+            <i class={data.className}></i>
+                <span style={node.level == 2 ? 'font-weight:bold':""}>{node.label}
+                <span style={data.sourceRoleName && data.sourceRoleName.length > 0 ? 'margin-left:5px;color:#FF9067':'display: none' }>
+                {'('+(data.sourceRoleName || []).join(",")+')'}
+                </span>
+                </span>
+                </span>
+            );
+            },
+
+            // initCallBack() { // 树初始化回调函数，展开已勾选的数据
+            //     // let vm = this;
+            //     // let nodesMap = this.$refs.roleMenuTreeRef.getAllNode();
+            //     // for(let [key,node] of Object.entries(nodesMap)){
+            //     //     if(node.checked){
+            //     //         node.expanded = true;
+            //     //         vm.recursionExpand(node);
+            //     //     }
+            //     // }
+            // },
+            recursionExpand(node){ // 递归将上级展开
+                let nodesMap = this.$refs.roleMenuTreeRef.getAllNode();
+                let parentNode = nodesMap[node.data.menuChiefNum];
+                if(parentNode){
+                    parentNode.expanded = true;
+                    this.recursionExpand(parentNode);
+                }
+            },
+
+            //节点点击事件
+            nodeClick(data,node){
+                let vm = this;
+                //第一级可展开数据
+                /*if (node.level === 1) { // 第一级数据
+                    node.expanded = !node.expanded;
+                    return;
+                }*/
+
+                let menuSfqy = data.menuSfqy;
+                let menuRealOpen = menuSfqy;
+                if (menuSfqy && menuSfqy.indexOf(";") > -1) {
+                    menuRealOpen = menuSfqy.substring(0, menuSfqy.indexOf(";")); // 截取菜单的实际启用状态
+                }
+                data.menuRealOpen = menuRealOpen;
+                vm.currentDataObj = data;
+                // vm.$refs.menuDetailRef.initConditionObj(data);
+                // vm.$refs.menuDetailRef.initDefaultSelectDicObj(data);
+                // vm.$refs.menuDetailRef.initWorkFlowNodeObj(data);
+                // vm.$refs.menuDetailRef.operateSetting(data);
+                // vm.$refs.menuDetailRef.countMneuOptDivHeight();
+            },
+        }
+    }
+</script>
+
+<style rel="stylesheet/scss" scoped>
+    .el-aside /deep/ .model-color span{
+        font-size: 16px;
+    }
+
+    .el-aside /deep/ .el-tree > .el-tree-node > .el-tree-node__content{  /* 选中第一级菜单 */
+        background-color:#1A598A;
+        text-decoration: none;
+        border: 1px silver solid;
+        color:#fff;
+        text-align: center;
+        height: 35px;
+    }
+
+    .el-header{
+        padding: 2px 0 0 2px;
+        height: 42px!important;
+    }
+
+    .el-main{
+        padding: 5px 0 0 0;
+    }
+
+    .el-aside /deep/ ::-webkit-scrollbar {
+        height: 6px;
+    }
+
+    .mainTree {
+        overflow-y: auto;
+        width: 100% !important;
+        height: calc(100% - 45px);
+        position: relative;
+        margin-top: 5px;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        padding: 0 10px;
+    }
+    .mainTree /deep/ .model-color span{
+        font-size: 16px;
+    }
+    .mainTree /deep/ .el-tree > .el-tree-node > .el-tree-node__content{  /* 选中第一级菜单 */
+        background-color:#1A598A;
+        text-decoration: none;
+        border: 1px silver solid;
+        color:#fff;
+        text-align: center;
+        height: 35px;
+        font-size: 16px;
+    }
+
+    .mainTree /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
+        background-color: #409EFF;
+        border-color: #409EFF;
+    }
+</style>