sasp-admin 0.2.57

package/src/views/role/authRole/component/authSetting.vue

@@ -0,0 +1,1196 @@
+<template>
+    <el-tabs v-model="activeName" class="link-tabs">
+        <el-tab-pane label="菜单设置" name="1">
+            <el-container class="tab-contain" v-loading="loading" element-loading-text="加载中">
+                <el-header class="tab-header" style="height: 50px">
+                    可分配菜单
+                </el-header>
+                <el-main style="padding: 5px;box-sizing:border-box;overflow-y: hidden;">
+                    <div class="aside-tree">
+                        <role-menu-setting
+                                ref="menuRef"
+                                :role-id="currentRowObj.id"
+                                :role-type="orgDims"
+                                :check-menu-opt-power="checkMenuOptPower"
+                                :check-menu-data-power="checkMenuDataPower"
+                                v-if="loadRoleMenuSuccess"
+                                @setMenuPower="setMenuPower"
+                                @setMenuLoading="setMenuLoading"
+                                @setCurrentMenuNode="setCurrentMenuNode">
+                        </role-menu-setting>
+                    </div>
+                    <div class="opt-div-class">
+                        <role-menu-power-setting
+                                v-if="refreshMenuPower"
+                                :opt-power="menuOptPower"
+                                :data-power="menuDataPower"
+                                :opt-power-tree="menuOptPowerTree"
+                                :data-power-tree="menuDataPowerTree"
+                                :check-opt-power="checkMenuOptPower"
+                                :check-data-power="checkMenuDataPower"
+                                :current-click-node="currentClickMenuNode"
+                                :operation-add-obj="operationAddObj"
+                                :operation-delete-obj="operationDeleteObj">
+                        </role-menu-power-setting>
+                    </div>
+                </el-main>
+            </el-container>
+            <el-container class="link-contain">
+                <el-header class="link-header" style="height:50px">
+                    关联菜单
+                </el-header>
+                <el-main style="padding: 5px">
+                    <el-input v-model="filterLinkMenu" size="small" prefix-icon="el-icon-search" style="margin-bottom: 5px" placeholder="输入关键字过滤"></el-input>
+                    <common-tree
+                            :root-datas="linkMenuRootDatas" v-if="showAuthTree"
+                            parent-id="menuSjbh" :default-props="defaultLinkProps" node-key="id" :filter-text="filterLinkMenu"
+                            :init-check="authLinkInitCheck"
+                            ref="authMenuRef" :default-expand-all=true :refresh-boolean-proper="roleSettingDialog"
+                            :node-click-and-check=true
+                    >
+                    </common-tree>
+                </el-main>
+            </el-container>
+        </el-tab-pane>
+
+        <!--资源权限 start-->
+<!--        <el-tab-pane label="资源权限" name="2">-->
+<!--            <el-container class="comomSettiingStyle" v-loading="sourceLoading"  element-loading-text="加载中">-->
+<!--                <el-main style="height: 100%;overflow: hidden;padding: 0">-->
+<!--                    <div class="aside-tree">-->
+<!--                        <role-source-setting-->
+<!--                                ref="sourceRef"-->
+<!--                                :role-id="currentRowObj.id"-->
+<!--                                :check-source-opt-power="checkSourceOptPower"-->
+<!--                                :check-source-data-power="checkSourceDataPower"-->
+<!--                                @setSourcePower="setSourcePower"-->
+<!--                                @setSourceLoading="setSourceLoading"-->
+<!--                                @setCurrentSourceNode="setCurrentSourceNode">-->
+<!--                        </role-source-setting>-->
+<!--                    </div>-->
+<!--                    <div class="opt-div-class">-->
+<!--                        <role-menu-power-setting-->
+<!--                                v-if="refreshSourcePower"-->
+<!--                                :opt-power="sourceOptPower"-->
+<!--                                :data-power="sourceDataPower"-->
+<!--                                :opt-power-tree="sourceOptPowerTree"-->
+<!--                                :data-power-tree="sourceDataPowerTree"-->
+<!--                                :check-opt-power="checkSourceOptPower"-->
+<!--                                :check-data-power="checkSourceDataPower"-->
+<!--                                :current-click-node="currentClickSourceNode">-->
+<!--                        </role-menu-power-setting>-->
+<!--                    </div>-->
+<!--                </el-main>-->
+<!--            </el-container>-->
+<!--        </el-tab-pane>-->
+        <!--资源权限 end-->
+
+
+        <el-tab-pane label="人员设置" name="3">
+            <sys-org-pos-user-select :choose-param="{'roleId':currentRowObj.id}" :refresh-proper="roleSettingDialog" :orgTreeIds="orgTreeIds"
+                                     :choose-url="api.roleUser.find" choose-field="userAttach" :pos-enable=false
+                                     :ogn-enable=false :filterUserParam="{'authUserType':'empower','created':loginUser.id,'empowerId':currentRowObj.id}"
+                                     :org-dims="orgDims" :case-auth=true ref="staffSetRef" v-if="showPosUserSelect"
+            >
+            </sys-org-pos-user-select>
+        </el-tab-pane>
+    </el-tabs>
+</template>
+
+<script>
+    import SysOrgPosUserSelect from "../../../../components/public/org/sysOrgPosUserSelect";
+    import Role from "../../role";
+    import RoleMenuSetting from "../../commonRole/compoment/roleMenuSetting";
+    import RoleMenuPowerSetting from "../../commonRole/compoment/roleMenuPowerSetting";
+    import AuthLinkMenuTree from "../../commonRole/compoment/authLinkMenuTree";
+    import RoleSourceSetting from "../../commonRole/compoment/roleSourceSetting";
+    export default {
+        name: "auth-setting",
+        components:{
+            RoleSourceSetting,
+            AuthLinkMenuTree, RoleMenuPowerSetting, RoleMenuSetting, Role, SysOrgPosUserSelect},
+        props:['currentRowObj',"roleSettingDialog"],
+        data(){
+            return {
+                defaultProps:{"children":"children","label":"menuShowName"},
+                defaultLinkProps:{"children":"children","label":"menuName"},
+                activeName:"1", // 当前激活的tab页名称
+                roleRequestParam:{}, // 权限
+                filterAllowMenu:"",
+                filterLinkMenu:"",
+                loading:true, // 加载条
+                sourceLoading:false,//资源加载条
+                showAuthTree:false, // 权限关联菜单树是否显示
+                linkMenuModel:"$$$$", // 权限关联菜单的数据来源
+                cdssArr:[],
+                cdss:"", // 当前菜单所在的模块
+                lastCdss:"", // 上一次菜单所在的模块
+                allowMenuParam:{},
+                showAllowMenuTree:false,
+                allowMenurefreshProper:"", // 刷新可分配菜单树的办法
+                operateNameMap:{}, // 操作按钮名称代码对应关系
+                complexFieldArr:[],
+                currentMenuId:"", // 当前点击的菜单id
+                loginUser:{}, // 登录用户
+                caseSup:false, // 是否是开发者
+                initCheck:{}, // 初始化选中
+                authLinkInitCheck:{}, // 关联菜单初始化选中
+                rootDatas:[], // 可分配菜单的树数据
+                linkMenuRootDatas:[], // 关联菜单的树数据
+                allSettingObj:{}, // 所有按钮配置数据,
+                oldRoleOptAll:{}, // 可分配菜单数据库已选择的Opt数据
+                menuOptAll:{}, // 当前用户拥有的所有操作权限，如果是开发者那么视为所有
+                menuAllBaseInfo:{}, // 菜单对应的基础信息
+                userMap:{}, // 已选择人员pos_user_id的集合
+                userDataMap:{}, // 已选择人员信息的集合
+                showPosUserSelect:false,
+                operationAddObj:{}, // 增加的操作权限数据
+                operationDeleteObj:{}, // 删除的操作权限数据
+                orgTreeIds:"",
+                allMenuObj:{}, // 所有菜单数据
+                orgDims:"",
+                dimensionObj:{}, // 维度对应中文名
+                dimensionOrder:{}, // 维度顺序
+
+                menuOptPower:[],//菜单操作权限
+                menuDataPower:[],//菜单数据权限
+                menuOptPowerTree:[],//菜单操作权限（树数据）
+                menuDataPowerTree:[],//菜单数据权限（树数据）
+                sourceOptPower:[],//资源操作权限
+                sourceDataPower:[],//资源数据权限
+                sourceOptPowerTree:[],//资源操作权限（树数据）
+                sourceDataPowerTree:[],//资源数据权限（树数据）
+                checkMenuOptPower:{},//勾选的菜单操作权限
+                checkMenuDataPower:{},//勾选的菜单数据权限
+                checkSourceOptPower:{},//勾选的资源操作权限
+                checkSourceDataPower:{},//勾选的资源数据权限
+                refreshMenuPower:true,
+                currentClickMenuNode:{},//当前点击的菜单节点
+                defaultMenu:[
+                    {id:"normalUser",menuName:"普通用户管理",menuUrl:"/commonHome/userManage/ent",parentId:"-1"},
+                    {id:"empowerUser",menuName:"授权用户管理",menuUrl:"/commonHome/empowerUserList",parentId:"-1"},
+                    {id:"sysOrg",menuName:"组织岗位管理",menuUrl:"/commonHome/sysOrgTree",parentId:"-1"},
+                    {id:"sysRole",menuName:"角色权限管理",menuUrl:"/commonHome/role",parentId:"-1"}
+                ],
+                linkMenuInitCheck:{},
+                ownOptLastData:[],
+                allLevelData:{},
+                refreshSourcePower:true,
+                currentClickSourceNode:{},//当前点击的资源节点
+                loadRoleMenuSuccess:false,
+            }
+        },
+        watch:{
+            cdss(){
+                this.dealTreeData();
+                this.allowMenurefreshProper = this.cdss;
+            },
+            roleSettingDialog(){
+                let vm = this;
+                vm.activeName = "1";
+                if(vm.roleSettingDialog){
+                    vm.showAllowMenuTree = false;
+                    vm.$nextTick(function () {
+                        vm.cdssArr.length > 0 && (vm.cdss = vm.cdssArr[0]) && (vm.lastCdss = vm.cdssArr[0]);
+                        vm.init();
+                    })
+                }
+            }
+        },
+        created(){
+            let vm = this;
+            vm.axios.post(vm.api.sysOrgDimension.find).then(res => {
+                let {data} = res;
+                for (let {dimSpec, id, isUse,sort} of data) {
+                    //判断是否启用和dimSpec是否有值
+                    if (isUse === '1' && dimSpec) {
+                        let dimSpecObj = JSON.parse(vm.platStringUtil.replaceAll(dimSpec,"'","\"") || "{}");
+                        if(dimSpecObj.hasOwnProperty("menuLocalName")){
+                            vm.dimensionObj[id]=dimSpecObj["menuLocalName"];
+                        }
+                        vm.dimensionOrder[id] = Number(sort || "0");
+                        vm.dimensionOrder["sys"] = 99;
+                    }
+                }
+                vm.dimensionObj["sys"] = "系统";
+                //获取当前登录用户信息
+                this.loginUser = this.USER_GLOBAL.getLoginUser() || {};
+                vm.caseSup = vm.loginUser.userType == "sup";
+                if(vm.caseSup){
+                    vm.showPosUserSelect = true;
+                    vm.loadRoleMenuSuccess = true;
+                }else{
+                    vm.axios.post(vm.api.sysOrgPosUser.findNoPage,{"userId":vm.loginUser.id}).then(res => {
+                        vm.orgTreeIds = res.data[0].orgId;
+                        vm.orgDims = res.data[0].orgDim;
+                        vm.showPosUserSelect = true;
+                        vm.loadRoleMenuSuccess = true;
+                    });
+                }
+                vm.axios.post(vm.api.menu.find).then(function (res) {
+                    (res.data || []).forEach(item => {
+                        vm.allMenuObj[item.id] = item;
+                    });
+                    vm.initRootData();
+                    vm.loadAllowTree();
+                });
+            });
+        },
+        methods:{
+            init(){
+                this.userMap = {};
+                this.userDataMap = {};
+                // this.oldRoleOptAll = {};
+                this.allSettingObj = {};
+                // this.loadLinkTree();
+            },
+
+            getLastLayerData(dataArr){
+                (dataArr || []).forEach(item => {
+                   if(item.childrens && item.childrens.length > 0){
+                       this.getLastLayerData(item.childrens)
+                   }else{
+                       this.ownOptLastData.push(item);
+                   }
+                });
+            },
+
+            loadAllowTree(){
+                let vm = this;
+                /* 初始化已选择人员信息 */
+                vm.axios.post(vm.api.roleUser.find,{"roleId":vm.currentRowObj.id}).then(function (res) {
+                    (res.data || []).forEach(function (info) {
+                        vm.userMap[info.userAttach] = info.id;
+                        vm.userDataMap[info.userAttach] = info;
+                    });
+                });
+                /* 初始化可分配菜单选中 */
+                vm.oldRoleOptAll = {};
+                vm.axios.post(vm.api.roleMenuOpt.find,{"roleId":vm.currentRowObj.id}).then(function (resOpt) {
+                    resOpt.data.forEach(each=>{
+                        if(each.optPower){
+                            vm.oldRoleOptAll[each.menuId] = each.optPower.split(",");
+                        }
+                        /*if(each.optPower){
+                            let bindSource = JSON.parse(vm.allMenuObj[each.menuId].bindSource)[0];
+                            let opt = [];
+                            vm.ownOptLastData = [];
+                            vm.getLastLayerData(JSON.parse(each.optPower));
+                            if(vm.ownOptLastData.length > 0){
+                                vm.ownOptLastData.forEach(optObj => {
+                                    let optKey = optObj.key;
+                                    if(bindSource == "cview" && optObj.parentTree){
+                                        optKey = optObj.parentTree + "_" + optObj.key;
+                                    }else if(bindSource == "cview" && !optObj.parentTree){
+                                        optKey = "-1_" + optObj.key;
+                                    }
+                                    opt.push(optKey);
+                                });
+                                vm.oldRoleOptAll[each.menuId] = opt;
+                            }
+                        }*/
+                    });
+                    vm.showAllowMenuTree = true;
+                });
+            },
+
+            async initRootData(){ //此处代码仅初始化一次
+                if(this.caseSup){
+                    this.linkMenuRootDatas = this.defaultMenu;
+                    let linkMenu = this.currentRowObj.allowAllotMenu || ""; // 设置已选择
+                    this.authLinkInitCheck["initCheck"] = (linkMenu || "").split(","); //已选择信息
+                }else{
+                    let res = await this.axios.post(this.api.role.getById,{id:this.loginUser.empowerId || "$$$$"});
+                    if(res && res.data){
+                        let linkMenu = res.data.allowAllotMenu;
+                        this.defaultMenu.forEach(item => {
+                          if(linkMenu.indexOf(item.id) > -1){
+                              this.linkMenuRootDatas.push(item);
+                          }
+                        });
+                    }
+                }
+                let linkMenu = this.currentRowObj.allowAllotMenu || ""; // 设置已选择
+                this.authLinkInitCheck["initCheck"] = (linkMenu || "").split(","); //已选择信息
+                this.showAuthTree = true;
+                /*let vm = this;
+                let operateArr = [];
+                // 获取代码与按钮名称对应关系(仅初始化一次)
+                vm.axios.post(vm.api.data.findToArray, {'typeId': 'c2a9831b1d464862b35a64b522be064c'}).then(function (res) {
+                    res.data.forEach(function (data) {
+                        vm.operateNameMap[data["dataName"]] = data["dataCode"];
+                        operateArr.push(data["dataCode"]);
+                    });
+                });
+                vm.axios.post("/sysParamController/getSysParams",{"key":"authModel"}).then(res=>{
+                    vm.linkMenuModel = ((res.data || {}).paramVal) || "$$$$";
+                    vm.roleRequestParam["menuModel"] = vm.linkMenuModel; // 权限关联菜单的数据来源
+                    vm.roleRequestParam["menuSfqy"] = "Y";
+                    vm.axios.post("/platMenuController/listNoPage",vm.roleRequestParam).then(resRoleLink=>{
+                        if(vm.caseSup){ // 开发者权限为所有
+                            vm.linkMenuRootDatas = resRoleLink.data;
+                            vm.linkDealTreeData(vm.linkMenuRootDatas);
+                            vm.loadLinkTree(); // 加载关联菜单已选中信息
+                        }else{
+                            if(vm.loginUser.empowerId){
+                                vm.axios.post(vm.api.role.getById,{"id":vm.loginUser.empowerId}).then(roleRes=>{
+                                    let allowArr = (roleRes.data.allowAllotMenu || "").split(",");
+                                    resRoleLink.data.forEach(each=>{
+                                        if(allowArr.indexOf(each["id"]) > -1){
+                                            vm.linkMenuRootDatas.push(each);
+                                        }
+                                    });
+                                    vm.linkDealTreeData(vm.linkMenuRootDatas);
+                                    vm.loadLinkTree(); // 加载关联菜单已选中信息
+                                })
+                            }
+                        }
+                    });
+                });
+                vm.initAllowTree();*/
+            },
+            compareCdss(a,b){
+                let vm = this;
+                return  (vm.dimensionOrder[a] || 0) - (vm.dimensionOrder[b] || 0);
+            },
+            dealTreeData(){
+                let vm = this;
+                let data = JSON.parse(JSON.stringify(vm.allDatas)); // 重新序列化对象
+                let arr = [];
+                data = data.filter(each => {
+                    if(each["menuModel"] == vm.linkMenuModel || each["cdss"] != vm.cdss){
+                        return false;
+                    }
+                    return true;
+                });
+                if(vm.caseSup){
+                    data.forEach(function (each) {
+                        each["parentCode"] = each["menuSjbh"];
+                        if(each["menuSjbh"] == '-1'){
+                            each["parentCode"] = each["menuModel"] + "_model";
+                        }
+                        each["menuShowName"] = each["menuName"];
+                    });
+                    vm.rootDatas = arr.concat(data);
+                    return;
+                }
+                let realInfoArr = []; // 实际需要的数据，清除未勾选的数据，但保留已勾选的上级未选中的数据
+                let realInfoIds = [];
+                data.forEach(function (item) {
+                    recursionData(vm.allMenuObj[item.id]);
+                });
+                function recursionData(data){
+                    if(data){
+                        if(realInfoIds.indexOf(data["id"]) == -1){
+                            if(!vm.menuAllBaseInfo[data.id]){ // 增加额外数据时如果不在这个全菜单信息集合则加进去
+                                vm.menuAllBaseInfo[data.id] = data;
+                            }
+                            realInfoArr.push(data);
+                            realInfoIds.push(data["id"]);
+                        }
+                        recursionData(vm.allMenuObj[data["menuSjbh"]]);
+                    }
+                }
+                realInfoArr.forEach(function (each) {
+                    each["parentCode"] = each["menuSjbh"];
+                    if(each["menuSjbh"] == '-1'){
+                        each["parentCode"] = each["menuModel"] + "_model";
+                    }
+                    each["menuShowName"] = each["menuName"];
+                });
+                let result = arr.concat(realInfoArr).sort(vm.sortData);
+                vm.rootDatas =  result;
+            },
+            sortData(a,b){ // 数据排序
+                if(a["menuLevel"] == b["menuLevel"]){
+                    return Number(a["menuOrder"]) - Number(b["menuOrder"]);
+                }else{
+                    return Number(a["menuLevel"]) - Number(b["menuLevel"]);
+                }
+            },
+            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>
+                    </span>
+                );
+            },
+            nodeClick(data,node){
+                let vm = this;
+                if (node.level === 1) { // 第一级数据
+                    node.expanded = !node.expanded;
+                    return;
+                }
+                vm.currentMenuId = data.id; // 当前操作的菜单id
+                // vm.operateSetting(data);
+            },
+            optAllChange(checked){ // 全选
+                let vm = this;
+                vm.optArr.forEach(function (each) {
+                    each["checked"] = checked;
+                });
+                vm.complexFieldArr.forEach(function (each) {
+                    each["legendChecked"] = checked;
+                    (each["buttonArr"] || []).forEach(function (button) {
+                        button["checked"] = checked;
+                    })
+                });
+                if(vm.optArr.length > 0){
+                    vm.operateChange("optArr");
+                }
+                if(vm.complexFieldArr.length > 0){
+                    vm.operateChange("complexFieldArr");
+                }
+            },
+            optChange(checked){
+                let vm = this;
+                vm.optArr.forEach(function (each) {
+                    each["checked"] = checked;
+                });
+                vm.complexFieldArr.forEach(function (each) {
+                    each["legendChecked"] = checked;
+                    (each["buttonArr"] || []).forEach(function (button) {
+                        button["checked"] = checked;
+                    })
+                });
+                if(vm.optArr.length > 0){
+                    vm.operateChange("optArr");
+                }
+                if(vm.complexFieldArr.length > 0){
+                    vm.operateChange("complexFieldArr");
+                }
+            },
+            operateChange(type){ // 操作权限变更
+                let vm = this;
+                let CheckedArr = [];
+                if(type == "optArr"){
+                    let arr = vm.allSettingObj[vm.currentMenuId]['optArr'] || [];
+                    arr.forEach(function (each) {
+                        each["checked"] && CheckedArr.push(each["value"]);
+                    })
+                }
+                if(type == "complexFieldArr"){
+                    let arr = vm.allSettingObj[vm.currentMenuId]['complexFieldArr'] || [];
+                    arr.forEach(function (each) {
+                        each["legendChecked"] && CheckedArr.push(each["legendValue"]);
+                        (each["buttonArr"] || []).forEach(function (button) {
+                            button["checked"] && CheckedArr.push(button["value"]);
+                        })
+                    })
+                }
+                vm.comPareOperation(CheckedArr);
+                vm.allSettingObj[vm.currentMenuId]['operation'] = CheckedArr.join(",");
+                vm.$forceUpdate();
+            },
+            comPareOperation(checkedArr){ // 比对当前选中的操作权限与初始化的操作权限增删情况
+                let vm = this;
+                let beforeOperation = (vm.oldRoleOptAll[vm.currentMenuId] || {})["operation"];
+                let beforeArr = (beforeOperation || "").split(",");
+                let addOperation = [];
+                let deleteOperation = [];
+                checkedArr.forEach(item => {
+                    if(beforeArr.indexOf(item) == -1){
+                        addOperation.push(item);
+                    }
+                });
+                beforeArr.forEach(item => {
+                    if(checkedArr.indexOf(item) == -1){
+                        deleteOperation.push(item);
+                    }
+                });
+                vm.operationAddObj[vm.currentMenuId] = addOperation.join(","); // 增加的操作权限
+                vm.operationDeleteObj[vm.currentMenuId] = deleteOperation.join(","); // 删除的操作权限
+            },
+            cdssChange(cdss){ // 菜单所属在切换时，要同时记下当前选中与取消的项目
+                let vm = this;
+                let checkedArr = vm.$refs.allowMenuSettingTreeRef.getTreeCheckedNodes("key"); // 菜单更改前树勾选的数据
+                let initCheckArr = vm.initCheck["initCheck"] || [];
+                // 对比
+                initCheckArr = initCheckArr.filter(item=>{ // item是菜单id
+                   return (vm.menuAllBaseInfo[item] || {})["cdss"] != vm.lastCdss;
+                });
+                vm.initCheck["initCheck"] = initCheckArr.concat(checkedArr);
+                vm.lastCdss = cdss;
+                vm.currentMenuId = ""; // 切换时将当前菜单id清空
+            },
+            operateSetting(data){ // 操作权限设置
+                let vm = this;
+                vm.complexFieldArr = [];
+                vm.optArr=[];
+                vm.noSetting = false; // 没配置过
+                let collectObj = {};
+                let settingObj = vm.allSettingObj[data.id] || vm.oldRoleOptAll[data.id]; // 当前的数据配置
+                if(!settingObj){ // 没有做过任何配置，选中全部按钮
+                    vm.noSetting = true;
+                }
+                !settingObj && (settingObj = {});
+                let currentOpt = vm.menuOptAll[data.id]; // 当前菜单的opt
+                vm.allSettingObj[data.id] = collectObj; // 后面操作collectObj这个对象就可以了
+
+                let alReadySet = "";
+                collectObj["enableOperation"] = true;
+                collectObj["checkAll"] = settingObj["checkAll"] || false;
+                collectObj["operation"] = settingObj["operation"] || "";
+                alReadySet = settingObj["operation"] || "";
+                let checkedArr = alReadySet ? alReadySet.split(","):[];
+                let menuType = data.menuType;
+                switch (menuType) {
+                    case "系统功能":
+                    case "自定义功能菜单":
+                        let belong = "";
+                        if(data.menuType == "系统功能"){
+                            belong = data.menuXtgn;
+                        }else{
+                            belong = data.menuZdygncd;
+                        }
+                        vm.axios.post(vm.api.menuOpt.find,{"sscdid":belong}).then(function (res) {
+                            res.data.forEach(function (opt) {
+                                let obj = {};
+                                let value = opt["czbm"];
+                                if(opt.czbm == "diy"){
+                                    value = opt["czbm"] + "_" + opt["czlx"];
+                                }
+                                if(!(currentOpt && currentOpt.indexOf(value) == -1)){
+                                    obj["value"] = value;
+                                    obj["name"] = opt["czlx"];
+                                    obj["checked"] = (checkedArr.indexOf(value))> -1;
+                                    vm.optArr.push(obj);
+                                }
+                                collectObj["optArr"] = vm.optArr;
+                            });
+                            vm.$forceUpdate();
+                            if(vm.noSetting){
+                                collectObj["checkAll"] = true;
+                                vm.optAllChange(true);
+                            }
+                        });
+                        break;
+                    case "自定义单表表单":
+                        if(currentOpt){
+                            if(currentOpt.indexOf("view") > -1){
+                                vm.optArr.push({"name":"仅查看","value":"view","checked":(checkedArr.indexOf("view"))> -1});
+                            }
+                            if(currentOpt.indexOf("update") > -1){
+                                vm.optArr.push({"name":"可修改查看","value":"update","checked":(checkedArr.indexOf("update"))> -1});
+                            }
+                        }else{
+                            vm.optArr.push({"name":"仅查看","value":"view","checked":(checkedArr.indexOf("view"))> -1});
+                            vm.optArr.push({"name":"可修改查看","value":"update","checked":(checkedArr.indexOf("update"))> -1});
+                        }
+                        collectObj["optArr"] = vm.optArr;
+                        if(vm.noSetting){
+                            collectObj["checkAll"] = true;
+                            vm.optAllChange(true);
+                        }
+                        break;
+                    case "自定义表单":
+                    case "自定义表单-VUE":
+                        vm.axios.post("/formbuttonController/listNoPage",{"viewId":data.menuViewId}).then(function (res) {
+                            res.data.forEach(function (button) {
+                                let obj = {};
+                                let value = vm.operateNameMap[button.buttonType];
+                                if(vm.operateNameMap[button.buttonType] == "diy"){
+                                    value = vm.operateNameMap[button.buttonType] + "_" + button.buttonName;
+                                }
+                                if(!(currentOpt && currentOpt.indexOf(value) == -1)){ // 如果权限里当前值不存在则跳过
+                                    obj["value"] = value;
+                                    obj["name"] = button.buttonName;
+                                    obj["checked"] = (checkedArr.indexOf(value))> -1;
+                                    vm.optArr.push(obj);
+                                }
+                                collectObj["optArr"] = vm.optArr;
+                            });
+                            vm.$forceUpdate();
+                            if(vm.noSetting){
+                                collectObj["checkAll"] = true;
+                                vm.optAllChange(true);
+                            }
+                        });
+                        break;
+                    case "复合视图":
+                    case "复合视图-VUE":
+                        let complexId = data.menuGzlId;
+                        vm.axios.post(vm.api.complextab.findAllLinkData,{'viewId': complexId, 'sort': 'sort', 'order': '0'}).then(function (res) {
+                            let result = res.data;
+                            result.forEach(function (data) {
+                                let complexTab = data.complexTab;
+                                let value = "complexTab:" + complexTab.id;
+                                if(!(currentOpt && currentOpt.indexOf(value) == -1)){
+                                    let obj = {};
+                                    let buttonArr = [];
+                                    let urlType = complexTab.urlType;
+                                    let linkData = data.linkData || [];
+                                    let lengendValue = "complexTab:"+complexTab.id;
+                                    obj["legendName"] = complexTab.tabName;
+                                    obj["legendValue"] = lengendValue;
+                                    obj["legendChecked"] = checkedArr.indexOf(lengendValue) > -1 ;
+                                    // 下面两个if可以合并为一个forEach，但是为了代码易读性暂不合并
+                                    if((urlType || "") .indexOf("自定义表单") > -1){
+                                        linkData.forEach(function (each) {
+                                            let optValue = "complex:" + complexTab.id + ":" + vm.operateNameMap[each["buttonType"]];
+                                            if(vm.operateNameMap[each["buttonType"]] == "diy"){
+                                                optValue += "_" + each["buttonName"];
+                                            }
+                                            if(!(currentOpt && currentOpt.indexOf(optValue) == -1)){
+                                                let buttonObj = {};
+                                                buttonObj["checked"] = checkedArr.indexOf(optValue) > -1;
+                                                buttonObj["value"] = optValue;
+                                                buttonObj["buttonName"] = each["buttonName"];
+                                                buttonArr.push(buttonObj);
+                                            }
+                                        })
+
+                                    }
+                                    if(urlType == "系统功能" || urlType =="自定义功能"){
+                                        linkData.forEach(function (each) {
+                                            let optValue = "complex:" + complexTab.id + ":" + each["czbm"];
+                                            if(!(currentOpt && currentOpt.indexOf(optValue) == -1)){
+                                                let buttonObj = {};
+                                                buttonObj["checked"] = checkedArr.indexOf(optValue) > -1;
+                                                buttonObj["value"] = optValue;
+                                                buttonObj["buttonName"] = each["czlx"];
+                                                buttonArr.push(buttonObj);
+                                            }
+                                        })
+                                    }
+                                    obj["buttonArr"] = buttonArr;
+                                    vm.complexFieldArr.push(obj);
+                                    collectObj["complexFieldArr"] = vm.complexFieldArr;
+                                }
+                            });
+                            vm.$forceUpdate();
+                            if(vm.noSetting){
+                                collectObj["checkAll"] = true;
+                                vm.optAllChange(true);
+                            }
+                        });
+                        break;
+                    // case "统计报表": // 统计报表未做逻辑，咱不处理，设为禁用
+                    //     break;
+                    default:
+                        break;
+                }
+            },
+            /**
+             * 保存人员，保存关联菜单，保存可分配菜单
+             * @returns {Promise<void>}
+             */
+            async save(){
+               let orgPosUserObj = this.saveOrgPosUser();
+               let linkMenuObj = this.saveAuthLinkMenu();
+               let submitObj = Object.assign({},orgPosUserObj,linkMenuObj);
+               submitObj["roleId"] = this.currentRowObj.id;
+               submitObj["userId"] = this.loginUser.id;
+
+
+                let updateArr = [];//修改
+                let addArr = [];//新增
+                let removeArr = [];//删除
+                let menuNameArr = [];
+                let removeMenus = [];
+                let [addOperationCollect,deleteOperationCollect,insertCollect] = [{},{},{}];
+                let allowResult = await this.saveAllowMenu(menuNameArr,removeArr,updateArr,addArr,removeMenus);
+                addOperationCollect = allowResult.addOperationCollect;
+                deleteOperationCollect = allowResult.deleteOperationCollect;
+                insertCollect = allowResult.insertCollect;
+                // await this.saveAllowResource(menuNameArr,removeArr,updateArr,addArr,removeMenus,
+                //     addOperationCollect,deleteOperationCollect,insertCollect);
+                submitObj["remark"] = JSON.stringify(menuNameArr);
+                submitObj["removeIds"] = removeArr.join(",");
+                submitObj["updateObj"] = JSON.stringify(updateArr);
+                submitObj["addObj"] = JSON.stringify(addArr);
+                submitObj["addOperationCollect"] = JSON.stringify(addOperationCollect);
+                submitObj["deleteOperationCollect"] = JSON.stringify(deleteOperationCollect);
+                submitObj["insertCollect"] = JSON.stringify(insertCollect);
+                submitObj["removeMenuIds"] = removeMenus.join(",");
+                this.axios.post(this.api.roleMenuOpt.saveAll,submitObj).then(res => {
+                    this.$message({
+                        duration: 1200,
+                        type: "success",
+                        message: res.data.operateMessage
+                    });
+                    this.loadAllowTree();
+                    // this.$refs.menuRef && this.$refs.menuRef.getCheckedData();
+                    // this.$refs.sourceRef && this.$refs.sourceRef.getCheckedData();
+                    this.$emit("closeSettingDialog");
+                });
+            },
+            /**
+             * 保存用户
+             * @returns
+             */
+            saveOrgPosUser(){
+                let vm = this;
+                let resultArr = vm.$refs.staffSetRef.getCheckedInfo("user") || [];
+                let newAttachArr = []; // 当前保存的数据归属集合
+                let newMap = {}; // 当前保存的所有数据集合
+                resultArr.forEach(function (data) {
+                    newMap[data.id] = data;
+                    newAttachArr.push(data.id);
+                });
+                let removeIdArr  = []; // 删除的数据集合
+                let tempAttachArr = []; // 新增的数据集合
+                let removeEmpowerIdUserIdArr = []; // 移除用户时需要将用户的角色关联id去除EmpowerId
+                for(let [key] of Object.entries(vm.userMap)){ // 移除无效的用户归属,userMap用户旧归属合集,新归属不存在则移除
+                    if(newAttachArr.indexOf(key) == -1){
+                        removeIdArr.push(vm.userMap[key]);
+                        removeEmpowerIdUserIdArr.push((vm.userDataMap[key] || {})["userId"]);
+                    }
+                }
+                let tempArr = Object.keys(vm.userMap);
+                for(let [key,val] of Object.entries(newMap)){ // 原归属中已存在的，但当前选择的归属中不存在，则新增
+                    if(tempArr.indexOf(key) == -1){
+                        tempAttachArr.push(val);
+                    }
+                }
+                let addAttachArr = [];
+                let addEmpowerIdUserIdArr = []; // 添加用户时需要将用户的角色关联id加上
+                tempAttachArr.forEach(function (data) {
+                    let obj = {};
+                    // 提交只需要几个有效属性,id->userAttach
+                    obj["userAttach"] = data["id"];
+                    obj["roleType"] = "user";
+                    obj["userId"] = data["userId"];
+                    obj["roleId"] = vm.currentRowObj.id;
+                    addEmpowerIdUserIdArr.push(data["userId"]);
+                    addAttachArr.push(obj);
+                });
+                return {"userList":JSON.stringify(addAttachArr),"removeRoleUserIds":removeIdArr.join(","),
+                        "removeEmpowerIdUserIds":removeEmpowerIdUserIdArr.join(","),"addEmpowerIdUserIds":addEmpowerIdUserIdArr.join(",")
+                };
+            },
+
+            /**
+             * 保存可分配菜单
+             * @returns
+             */
+            async saveAllowMenu(menuNameArr,removeArr,updateArr,addArr,removeMenus){
+                let vm = this;
+                let oldCheckMenu = vm.$refs.menuRef.oldChecked || [];
+                let oldCheckMenuObj = vm.$refs.menuRef.oldData || {};
+                let checkedArr = vm.$refs.menuRef.getCheckData() || []; // 当前菜单树勾选的数据
+
+                let updateMenuId = [];//修改id
+                let menuArr = [];
+                checkedArr.forEach(item => {
+                    //数据
+                    let optPower = "";
+                    if(this.checkMenuOptPower[item.id]){
+                        optPower = this.checkMenuOptPower[item.id].join(",");
+                    }
+                    let dataPower = "";
+                    if(this.checkMenuDataPower[item.id]){
+                        dataPower = this.checkMenuDataPower[item.id].join(",");
+                    }
+                    let obj = {roleId:vm.currentRowObj.id,menuId:item.id,optPower:optPower, dataPower:dataPower,type:"menu"};
+                    if(vm.checkMenuOptPower[item.id]){
+                        obj.lastOpts = vm.checkMenuOptPower[item.id];
+                    }
+                    if(oldCheckMenu.indexOf(item.id) > -1){//修改
+                        obj.id = oldCheckMenuObj[item.id];
+                        updateArr.push(obj);
+                        updateMenuId.push(item.id);
+                    }else if(oldCheckMenu.indexOf(item.id) == -1){//新增
+                        addArr.push(obj);
+                    }
+                });
+                //删除
+                oldCheckMenu.forEach(item => {
+                    if(updateMenuId.indexOf(item) == -1){
+                        removeArr.push(oldCheckMenuObj[item]);
+                        removeMenus.push(item);
+                    }
+                });
+                /**
+                 * 修改权限时需要考虑到下级的同步，新增删除与修改
+                 * 菜单移除：将下级的权限全部移除，这是强制的
+                 * 菜单新增：提示框询问下级是否同步
+                 * 按钮权限在菜单权限的基础上进行，只有菜单权限新增修改进行，移除不操作
+                 * 按钮移除：下级全部移除
+                 * 按钮新增：提示
+                 * 这边主要通过PARENT_USER_TREE进行关联操作
+                 */
+                let [addOperationCollect,deleteOperationCollect,insertCollect] = [{},{},{}];
+                updateArr.forEach(function (update) {
+                    let menuId = update.menuId;
+                    let oldOptArr = vm.oldRoleOptAll[menuId] || [];
+                    let currentOptArr = update.lastOpts || [];
+                    let deleteOperation = deleteOperationCollect[menuId] || "";
+                    let addOperation = addOperationCollect[menuId] || "";
+                    //原有现无，删除
+                    oldOptArr.forEach(oldOpt => {
+                        if(oldOpt && currentOptArr.indexOf(oldOpt) == -1){
+                            deleteOperation += "," + oldOpt;
+                        }
+                    });
+                    if(deleteOperation){
+                        deleteOperationCollect[menuId] = deleteOperation;
+                    }
+                    //现有原无，新增
+                    currentOptArr.forEach(currentOpt => {
+                        if(currentOpt && oldOptArr.indexOf(currentOpt) == -1){
+                            addOperation += "," + currentOpt;
+                        }
+                    });
+                    if(addOperation){
+                        addOperationCollect[menuId] = addOperation.substring(1);
+                    }
+                });
+                addArr.forEach(function (add) {
+                    let menuId = add.menuId;
+                    insertCollect[menuId] = add.lastOpts || [];
+                });
+                menuArr.forEach(function (each) { // 更新拥有的菜单
+                    menuNameArr.push(each["menuName"]);
+                });
+                return {addOperationCollect:addOperationCollect,deleteOperationCollect:deleteOperationCollect,insertCollect:insertCollect};
+
+            },
+
+
+            async saveAllowResource(menuNameArr,removeArr,updateArr,addArr,removeResource,
+                                    addOperationCollect,deleteOperationCollect,insertCollect){
+                let vm = this;
+                let oldCheckResource = vm.$refs.sourceRef.oldChecked || [];
+                let oldCheckResourceObj = vm.$refs.sourceRef.oldData || {};
+                let checkedArr = vm.$refs.sourceRef.getCheckData() || []; // 当前资源树勾选的数据
+
+                let updateResourceId = [];//修改id
+                let resourceArr = [];
+                checkedArr.forEach(item => {
+                    //数据
+                    let optPower = "";
+                    if(this.checkSourceOptPower[item.key]){
+                        optPower = this.checkSourceOptPower[item.key].join(",");
+                    }
+                    let dataPower = "";
+                    if(this.checkSourceDataPower[item.key]){
+                        dataPower = this.checkSourceDataPower[item.key].join(",");
+                    }
+                    let obj = {roleId:vm.currentRowObj.id,menuId:item.key,optPower:optPower, dataPower:dataPower,type:"source"};
+                    if(vm.checkSourceOptPower[item.key]){
+                        obj.lastOpts = vm.checkSourceOptPower[item.key];
+                    }
+                    if(oldCheckResource.indexOf(item.key) > -1){//修改
+                        obj.id = oldCheckResourceObj[item.key];
+                        updateArr.push(obj);
+                        updateResourceId.push(item.key);
+                    }else if(oldCheckResource.indexOf(item.key) == -1){//新增
+                        addArr.push(obj);
+                    }
+                });
+                //删除
+                oldCheckResource.forEach(item => {
+                    if(updateResourceId.indexOf(item) == -1){
+                        removeArr.push(oldCheckResourceObj[item]);
+                        removeResource.push(item);
+                    }
+                });
+                /**
+                 * 修改权限时需要考虑到下级的同步，新增删除与修改
+                 * 菜单移除：将下级的权限全部移除，这是强制的
+                 * 菜单新增：提示框询问下级是否同步
+                 * 按钮权限在菜单权限的基础上进行，只有菜单权限新增修改进行，移除不操作
+                 * 按钮移除：下级全部移除
+                 * 按钮新增：提示
+                 * 这边主要通过PARENT_USER_TREE进行关联操作
+                 */
+                /*updateArr.forEach(function (update) {
+                    let menuId = update.menuId;
+                    let oldOptArr = vm.oldRoleOptAll[menuId] || [];
+                    let currentOptArr = update.lastOpts || [];
+                    let deleteOperation = deleteOperationCollect[menuId] || "";
+                    let addOperation = addOperationCollect[menuId] || "";
+                    //原有现无，删除
+                    oldOptArr.forEach(oldOpt => {
+                        if(oldOpt && currentOptArr.indexOf(oldOpt) == -1){
+                            deleteOperation += "," + oldOpt;
+                        }
+                    });
+                    if(deleteOperation){
+                        deleteOperationCollect[menuId] = deleteOperation;
+                    }
+                    //现有原无，新增
+                    currentOptArr.forEach(currentOpt => {
+                        if(currentOpt && oldOptArr.indexOf(currentOpt) == -1){
+                            addOperation += "," + currentOpt;
+                        }
+                    });
+                    if(addOperation){
+                        addOperationCollect[menuId] = addOperation;
+                    }
+                });
+                addArr.forEach(function (add) {
+                    let menuId = add.menuId;
+                    insertCollect[menuId] = add.lastOpts;
+                });*/
+                resourceArr.forEach(function (each) { // 更新拥有的菜单
+                    menuNameArr.push(each["menuName"]);
+                });
+            },
+
+
+
+
+
+            /**
+             * 保存关联菜单
+             * @returns {{allowAllotMenu: string}}
+             */
+            saveAuthLinkMenu(){
+                let vm = this;
+                let checkedNodes = [];
+                if(vm.$refs.authMenuRef){
+                    checkedNodes = vm.$refs.authMenuRef.getTreeCheckedNodes();
+                }
+                let checkedSet = new Set(); // 已选择菜单数据
+                checkedNodes.forEach(function (data) {
+                    checkedSet.add(data.id);
+                });
+                let checkedArr = vm.setToArray(checkedSet);
+                return {"allowAllotMenu":checkedArr.join(",")};
+            },
+
+            /**
+             * 获取除最底层外的数据
+             */
+            getAllLevelData(dataArr){
+                (dataArr || []).forEach(item => {
+                    this.allLevelData[item.key] = item;
+                    if(item.childrens && item.childrens.length > 0){
+                        this.getAllLevelData(item.childrens);
+                    }
+                });
+            },
+            setToArray(set){ // set转array
+                let arr = [];
+                for(let item of set.keys()){
+                    arr.push(item);
+                }
+                return arr;
+            },
+            linkDealTreeData(data){
+                data.forEach(item =>{
+                    if(!item["menuSjbh"] || item["menuSjbh"] == "-1"){
+                        item["disabled"] = true;
+                    }
+                });
+                return data;
+            },
+
+            setMenuPower(optPower,dataPower,optPowerTree,dataPowerTree){
+                this.refreshMenuPower = false;
+                this.menuOptPower = optPower || [];
+                this.menuDataPower = dataPower || [];
+                this.menuOptPowerTree = optPowerTree || [];
+                this.menuDataPowerTree = dataPowerTree || [];
+                this.$nextTick(() => {
+                    this.refreshMenuPower = true;
+                });
+            },
+
+            setSourcePower(optPower,dataPower,optPowerTree,dataPowerTree){
+                this.refreshSourcePower = false;
+                this.sourceOptPower = optPower || [];
+                this.sourceDataPower = dataPower || [];
+                this.sourceOptPowerTree = optPowerTree || [];
+                this.sourceDataPowerTree = dataPowerTree || [];
+                this.$nextTick(() => {
+                    this.refreshSourcePower = true;
+                });
+            },
+
+            setMenuLoading(loading){
+                this.loading = loading;
+            },
+
+            setSourceLoading(loading){
+                this.sourceLoading = loading;
+            },
+
+            setCurrentMenuNode(node){
+                this.currentClickMenuNode = node;
+            },
+
+            setCurrentSourceNode(node){
+                this.currentClickSourceNode = node;
+            },
+        }
+    }
+</script>
+
+<style scoped>
+    .clearfix{
+        line-height: 30px;
+        text-align: left;
+    }
+    /*.clearfix /deep/ .el-checkbox__label{
+        font-size: 15px;
+    }
+    .clearfix /deep/ .el-checkbox__inner{
+        position: relative;
+        top: -1px;
+        left: 5px;
+    }*/
+    .role-menu-opt-card{
+        height: 100%;
+    }
+    .role-menu-opt-card /deep/ >.el-card__header{
+        padding: 0;
+    }
+    .role-menu-opt-card-card{
+        min-height: 50px;
+        text-align: center;
+        line-height: 50px;
+    }
+    /*.role-menu-opt-card-card /deep/ .el-checkbox__label{
+        color: black;
+    }
+    legend /deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
+        color: black!important;
+    }*/
+    .tab-contain{
+        height: 100%;
+        width: calc(100% - 300px);
+        float: left;
+        box-sizing: border-box;
+    }
+    .aside-tree{
+        width:400px;
+        height: calc(100% - 10px);
+        float: left;
+        padding:0 5px;
+        box-sizing: border-box;
+    }
+    .aside-tree /deep/ .model-color span{
+        font-size: 16px;
+    }
+
+    .aside-tree /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;
+    }
+    .opt-div-class{
+        float: right;
+        width: calc(100% - 400px);
+        box-sizing: border-box;
+        height: 100%;
+        border: 1px solid #ebeef5;
+        border-radius: 4px;
+        padding: 10px 20px;
+    }
+    /*.opt-div-class /deep/ .el-card__body{
+        height: calc(100% - 30px);
+        overflow-y: auto;
+    }*/
+    .opt-button-class{
+        min-width: 80px;
+        float: left;
+        height: 20px;
+        line-height: 20px;
+        margin: 10px 10px 0 0;
+        border: 1px solid rgb(235, 238, 245);
+        padding: 5px 15px;
+        text-align: center;
+    }
+    .opt-button-no-class{
+        float: left;
+        height: 20px;
+        line-height: 20px;
+        margin: 10px 10px 0 0;
+        border: 1px solid rgb(235, 238, 245);
+        padding: 5px 15px;
+        text-align: center;
+    }
+    /*.opt-button-class /deep/ .el-checkbox{
+        height: 20px;
+        line-height: 20px;
+    }
+
+    .opt-button-class /deep/ .el-checkbox__label{
+        color: white;
+    }*/
+
+    fieldset{
+        border: 1px solid #EBEEF5;
+        border-radius: 5px;
+        height: 100%;
+        box-sizing: border-box;
+        padding-left: 20px;
+    }
+    legend{
+        height: 30px;
+        line-height: 30px;
+    }
+    .link-contain{
+        height: 100%;
+        width: 300px;
+        float: right;
+        box-sizing: border-box;
+        border-left: 1px solid #c2c2c2;
+    }
+    .link-header{
+        line-height: 25px;
+        border-bottom: 1px solid #c2c2c2;
+        font-size: 16px;
+    }
+    .link-tabs /deep/ .el-tabs__item{
+        font-size: 16px;
+    }
+
+    .link-tabs /deep/ .el-tabs__nav-scroll{
+        padding: 0 20px;
+    }
+
+    .opt-button-class{
+        background-color: #409EFF;
+    }
+
+    /*.opt-div-class /deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
+        color: white;
+    }
+
+    .opt-div-class /deep/ .el-checkbox, .el-checkbox-button__inner{
+        color: white;
+    }
+
+    .opt-div-class /deep/ .el-checkbox__inner{
+        background-color: white;
+    }
+    .clearfix /deep/  .el-checkbox__input.is-checked+.el-checkbox__label{
+        color: black;
+    }
+    .clearfix /deep/  .el-checkbox, .el-checkbox-button__inner{
+        color: black;
+    }
+
+    .opt-div-class /deep/ .el-checkbox__inner::after{
+        border: 1px solid #409EFF;
+        border-left: 0;
+        border-top: 0;
+    }*/
+
+    /*.link-tabs /deep/ .el-tabs__header{
+        margin: 0;
+    }*/
+
+    .tab-header,.link-header{
+        line-height: 50px;
+        border-bottom: 1px solid #c2c2c2;
+        font-size: 16px;
+        background-color: #E8F1FF;
+    }
+
+    .comomSettiingStyle{
+        height: 100%;
+        width: calc(100% - 20px);
+        float: left;
+        box-sizing: border-box;
+        padding-right: 5px
+    }
+</style>