sasp-admin 0.2.57

package/src/views/user/empowerUser/empowerUserListMenuDeatil.vue

@@ -0,0 +1,656 @@
+<template>
+    <el-container style="height: 100%;">
+        <el-main style="height: 100%;padding: 2px 10px 10px 5px">
+            <pl-lazy>
+                <el-main ref="menuDetailRef" class="roleMenuDetailMain" :style="{'height':menuDetailDivHeight}">
+                    <el-card shadow="never" class="role-menu-detail-card" style="height: 100%;">
+                        <div slot="header" class="clearfix" style="background-color: #E8F1FF;">
+                            <span><i class="el-icon-document"></i>菜单属性</span>
+                        </div>
+                        <el-card class="role-menu-detail-card-card" shadow="never">
+                            <div v-if="!isShow" style="text-align: center;color: #9198a5;">无菜单属性</div>
+                            <el-form :model="formData" v-if="isShow">
+                                <el-row>
+                                    <el-col :span="12">
+                                        <el-form-item label="菜单名称：" :label-width="formLabelWidth">
+                                            {{formData.menuName}}
+                                        </el-form-item>
+                                    </el-col>
+                                    <el-col :span="12">
+                                        <el-form-item label="菜单类型：" :label-width="formLabelWidth">
+                                            {{menuTypeObj[formData.menuType]}}
+                                        </el-form-item>
+                                    </el-col>
+                                </el-row>
+                                <el-row>
+                                    <el-col :span="12" v-if="formData.menuType == 'resourcePool'">
+                                        <el-form-item label="绑定资源：" :label-width="formLabelWidth">
+                                            {{formData.bindSourceName}}
+                                        </el-form-item>
+                                    </el-col>
+                                    <el-col :span="12">
+                                        <el-form-item label="是否启用：" :label-width="formLabelWidth">
+                                            {{formData.menuIsUse == 'Y' ? '启用' : '禁用'}}
+                                        </el-form-item>
+                                    </el-col>
+                                    <el-col :span="12">
+                                        <el-form-item label="菜单图标：" :label-width="formLabelWidth">
+                                            <div style="height: 30px;width: 30px;">
+                                                <i :class="formData.menuIcon" style="font-size: 30px;"></i>
+                                            </div>
+                                        </el-form-item>
+                                    </el-col>
+                                    <el-col :span="12">
+                                        <el-form-item label="菜单颜色：" :label-width="formLabelWidth">
+                                            <div :style="'height: 30px;width: 30px;background: ' + formData.menuColor"></div>
+                                        </el-form-item>
+                                    </el-col>
+                                    <el-col :span="12">
+                                        <el-form-item label="菜单排序：" :label-width="formLabelWidth">
+                                            {{formData.menuOrder}}
+                                        </el-form-item>
+                                    </el-col>
+                                </el-row>
+                                <el-row>
+                                    <el-col :span="24">
+                                        <el-form-item label="菜单简介：" :label-width="formLabelWidth">
+                                            {{formData.menuBz}}
+                                        </el-form-item>
+                                    </el-col>
+                                </el-row>
+                            </el-form>
+                        </el-card>
+                    </el-card>
+                </el-main>
+                <el-main ref="menuOptRef" class="roleMenuOptMain" :style="{'padding-top':'10px','height':optDivHeight}">
+                    <el-card class="role-menu-opt-card" shadow="never" style="height: 100%;">
+                        <div slot="header" class="clearfix" style="background-color: #E8F1FF;">
+                            <span><i class="el-icon-document"></i>权限信息</span>
+                        </div>
+                        <el-card class="role-menu-opt-card-card" style="margin-right: 10px;box-sizing: border-box;" shadow="never">
+                            <div slot="header" class="clearfix">
+                                <span>操作权限</span>
+                            </div>
+                            <div v-if="(formData.optPower || []).length == 0" style="text-align: center;color: #9198a5;">
+                                无操作权限
+                            </div>
+                            <el-tree v-else :data="formData.optPower" :props="defaultTreeProps" default-expand-all></el-tree>
+                        </el-card>
+                        <el-card class="role-menu-opt-card-card" shadow="never">
+                            <div slot="header" class="clearfix">
+                                <span>数据权限</span>
+                            </div>
+                            <div v-if="(formData.dataPower || []).length == 0" style="text-align: center;color: #9198a5;">
+                                无数据权限
+                            </div>
+                            <el-tree v-else :data="formData.dataPower" :props="defaultTreeProps" default-expand-all></el-tree>
+                        </el-card>
+                        <!--<el-card  class="role-menu-opt-card-card" shadow="never">
+                            <div v-if="((allSettingObj[formData.id] || {})['optArr'] || []).length == 0
+                                && ((allSettingObj[formData.id] || {})['complexFieldArr'] || []).length == 0" style="text-align: center">无权限信息</div>
+                            <div v-else style="text-align: left">
+                                <div v-for="(item,index) in ((allSettingObj[formData.id] || {})['optArr'] || [])"
+                                     :key="index" class="opt-button-class">
+                                    <span>{{item.name}}</span>
+                                </div>
+                                <fieldset v-for="(item,index) in ((allSettingObj[formData.id] || {})['complexFieldArr'] || [])" :key="index" style="padding: 10px">
+                                    <legend>{{item.legendName}}</legend>
+                                    <div v-for="(fieldItem,fieldIndex) in (item['buttonArr'] || [])" :key="fieldIndex" class="opt-button-class">
+                                        {{fieldItem['buttonName']}}
+                                    </div>
+                                    <div v-show="(item['buttonArr'] || []).length == 0" style="text-align: center">无操作权限</div>
+                                </fieldset>
+                            </div>
+                        </el-card>-->
+
+                    </el-card>
+                </el-main>
+            </pl-lazy>
+        </el-main>
+    </el-container>
+</template>
+
+<script>
+    const groupBy = (arr, func) =>
+        arr.map(typeof func === 'function' ? func : val => val[func]).reduce((acc, val, i) => {
+            acc[val] = (acc[val] || []).concat(arr[i]);
+            return acc;
+        }, {});
+    export default {
+        name:"emopwer-user-view-menu-detail",
+        props:{
+            formData:{type:Object,default:function () {return {};}},//菜单数据
+            menuModelObj:{type:Object,default:function () {return {};}},//菜单模块
+            dataDictionaryObj:{type:Object,default:function () {return {};}},//数据字典
+            currentRoleOptAll:{type:Object,default:function () {return {};}},// 当前角色设置的所有roleMenuOpt
+            menuOptAll:{type:Object,default:function () {return {};}},// 初始化获取的所有当前用户的opt
+            refreshBooleanProper:{type:Boolean,default:false},//是否刷新
+        },
+        data(){
+            return{
+                formLabelWidth:"130px",
+                menuTypeObj: {
+                    'pMenu': '父菜单',
+                    'resourcePool': '资源池'
+                },
+                menuTypeFormItemLabel:"",
+                colResult:"",
+                menuConditionObj:{},
+                menuShowTypeObj:{'列表视图':'列表视图','列表&树视图':'列表&树视图'},
+                rSourceTypeObj:{"form":"自定义表单","singleForm":"自定义单表表单","flow":"工作流","cview":"复合视图","sysFea":"自定义功能",
+                    "sysFun":"系统功能","url":"url链接","statRep":"统计报表"},
+                defaultTreeProps:{
+                    children: 'children',
+                    label: 'powerName',
+                    id:'id'
+                },
+                defaultSelectDicObj:{},
+                workFlowNodeObj:{},
+                defaultMenuIcon: '',
+                menuRealOpenObj:{'Y':'是','N':'否'},
+
+                allDataPower:false, // 全选按钮
+                allSettingObj:{}, // 收集当前所有处理过的配置
+                allOptData:false, // 全选按钮
+                loginUser:{},
+                operateNameMap:{}, // 按钮code与名称的对应关系
+                operateAll:"", // 所有的操作代碼
+                optArr:[],
+                complexFieldArr:[],
+
+
+                sysFunctionAddressMap:{},
+                sysFeatureMenuTypeOptObj:{},
+                customFunctionAddressMap:{},
+                customFunctionMenuObj:{},
+                optDivHeight:'50%',
+                menuDetailDivHeight:'50%',
+                isShow:false,
+                paramSetting:{"id":"id","pId":"parentId","children":"children"},
+            }
+        },
+        created(){
+            this.getBindSource();
+            this.getData();
+            this.initSysFeatureMenuTypeObj();
+            this.initCustomFunctionMenuObj();
+        },
+        mounted(){
+        },
+        watch: {
+            'formData.menuType'() {
+                this.setColName();
+            },
+            'formData.id'(){
+                this.getBindSource();
+            },
+            refreshBooleanProper(){
+                if(this.refreshBooleanProper){
+                    this.colResult = "";
+                    this.menuDetailDivHeight = '50%';
+                    this.optDivHeight = '50%';
+                    this.isShow = false;
+                }
+            }
+        },
+        methods:{
+            getBindSource(){
+                if(this.formData.bindSource){
+                    let bindSource = JSON.parse(this.formData.bindSource);
+                    let id = bindSource[bindSource.length - 1];
+                    this.axios.post(this.api.resources.getById,{id:id}).then(res =>{
+                        if(res && res.data){
+                            let name = this.rSourceTypeObj[res.data.rsource] + "/" + res.data.rclass + "/" + res.data.rname;
+                            this.$set(this.formData,"bindSourceName",name);
+                        }
+                    });
+                }
+                if(this.formData.optAllPower){
+                    let optPowerTree = this.COMMON_FUNC.buildElTree(this.formData.optAllPower || [],this.paramSetting);
+                    this.$set(this.formData,"optPower",optPowerTree);
+                }
+                if(this.formData.dataAllPower){
+                    let dataPowerTree = this.COMMON_FUNC.buildElTree(this.formData.dataAllPower || [],this.paramSetting);
+                    this.$set(this.formData,"dataPower",dataPowerTree);
+                }
+            },
+            setColName(){
+                let vm = this;
+                vm.$set(vm.formData, 'menuRelUrl', '');
+                let menuType = vm.formData.menuType;
+                if(menuType == "系统功能"){
+                    vm.menuTypeFormItemLabel = menuType;
+                    vm.colResult = vm.sysFeatureMenuTypeOptObj[vm.formData.menuXtgn];
+                }else if(menuType ==='自定义表单'){
+                    vm.menuTypeFormItemLabel = '表单名称：';
+                    vm.colResult = vm.formData.menuForm;
+                }else if(menuType ==='数据字典'){
+                    vm.menuTypeFormItemLabel = '表单名称：';
+                    vm.colResult = vm.formData.menuForm;
+                }else if(menuType ==='自定义单表表单'){
+                    vm.menuTypeFormItemLabel = '关联表单视图：';
+                    vm.colResult = vm.formData.menuForm;
+                }else if(menuType === "工作流"){
+                    vm.menuTypeFormItemLabel = '流程选择：';
+                    vm.colResult = vm.formData.menuGzl;
+                }else if(menuType === "统计报表"){
+                    vm.menuTypeFormItemLabel = menuType + "：";
+                    vm.colResult = vm.formData.menuGzl;
+                }else if(menuType === "复合视图"){
+                    vm.menuTypeFormItemLabel = menuType + "：";
+                    vm.colResult = vm.formData.menuGzl;
+                }else if(menuType === "自定义功能菜单"){
+                    vm.menuTypeFormItemLabel = menuType + "：";
+                    vm.colResult = vm.customFunctionMenuObj[vm.formData.menuZdygncd];
+                }else if(menuType === "url链接"){
+                    vm.menuTypeFormItemLabel = menuType + "：";
+                    vm.colResult = vm.formData.menuUrl;
+                }
+            },
+
+            initConditionObj(data){
+                let vm = this;
+                let menuViewId = data.menuViewId;
+                if(menuViewId){
+                    vm.axios.post('/formConditionController/find', {
+                        'viewId': menuViewId
+                    }).then(res => {
+                        vm.menuConditionObj = {};
+                        for (let item of res.data) {
+                            vm.menuConditionObj[item.id] = item.condintionName;
+                        }
+                        vm.$set(vm.menuConditionObj, '$', '');
+                    });
+                }
+
+            },
+
+            initDefaultSelectDicObj(data) {
+                let vm = this;
+                let typeId = vm.dataDictionaryObj[data.menuGzl];
+                if(typeId){
+                    this.axios.post(this.api.data.find, {
+                        'typeId': typeId
+                    }).then(res => {
+                        res.data.forEach(item => {
+                            vm.defaultSelectDicObj[item.id] = item.dataName;
+                        });
+                        vm.$set(vm.menuConditionObj, '$', '');
+                    });
+                }
+
+            },
+
+            initWorkFlowNodeObj(data){
+                let vm = this;
+                vm.workFlowNodeObj = {};
+                let menuGzlId = data.menuGzlId;
+                if(menuGzlId){
+                    vm.axios.post('/flowDefineNodeController/find', {
+                        'sort': 'NODE_TYPE_EXTEND',
+                        'flowId': menuGzlId
+                    }).then(res => {
+                        res.data.forEach(item => {
+                            vm.workFlowNodeObj[item.id] = item.nodeName;
+                        });
+                        vm.$set(vm.workFlowNodeObj, '$', '');
+                    });
+                }
+            },
+
+            operateSetting(data){ // 操作权限设置
+                let vm = this;
+                vm.allSettingObj = {};
+                vm.optArr = [];
+                let collectObj = [];
+                let settingObj = vm.allSettingObj[data.id] || vm.currentRoleOptAll[data.id] || {}; // 当前的数据配置
+                let currentOpt = vm.menuOptAll[data.id]; // 当前菜单的opt
+                let alReadySet = "";
+                if(settingObj["enableOperation"] && settingObj["enableOperation"] != "false"){
+                    collectObj["enableOperation"] = true;
+                    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) && (checkedArr.indexOf(value))> -1){
+                                    obj["value"] = value;
+                                    obj["name"] = opt["czlx"];
+                                    obj["checked"] = (checkedArr.indexOf(value))> -1;
+                                    vm.optArr.push(obj);
+                                }
+                                collectObj["optArr"] = vm.optArr;
+                            });
+                            if(res.data.length == 0){ // 没有操作数据设置按钮禁用
+                                vm.openOptDataDisable = true;
+                                collectObj["openOptDataDisable"] = true;
+                            }
+                            vm.$forceUpdate();
+                        });
+                        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;
+                        break;
+                    case "自定义表单":
+                        vm.axios.post("/formbuttonController/find",{"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)  && (checkedArr.indexOf(value))> -1){ // 如果权限里当前值不存在则跳过
+                                    obj["value"] = value;
+                                    obj["name"] = button.buttonName;
+                                    obj["checked"] = (checkedArr.indexOf(value))> -1;
+                                    vm.optArr.push(obj);
+                                }
+                                collectObj["optArr"] = vm.optArr;
+                            });
+                            if(res.data.length  == 0){
+                                vm.openOptDataDisable = true;
+                                collectObj["openOptDataDisable"] = true;
+                            }
+                            vm.$forceUpdate();
+                        });
+                        break;
+                    case "复合视图":
+                        vm.complexFieldArr = [];
+                        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 == "自定义表单"){
+                                        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) && (checkedArr.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) && (checkedArr.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();
+                        });
+                        break;
+                    // case "统计报表": // 统计报表未做逻辑，咱不处理，设为禁用
+                    //     break;
+                    default:
+                        vm.openOptDataDisable = true;
+                        collectObj["openOptDataDisable"] = true;
+                }
+
+                vm.allSettingObj[data.id] = collectObj;
+            },
+
+            getData() { // 元数据中操作权限对应的中文
+                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.operateAll = operateArr.join(",");
+                });
+            },
+
+            initSysFeatureMenuTypeObj() {
+                let vm = this;
+                // vm.axios.post(vm.api.sysFunction.find, {
+                //     'sort': 'gnlb,sx',
+                //     'ifcustomizemenu': 'no'
+                // }).then(res => {
+                //     let data = res.data;
+                //     if(data){
+                //         data.forEach(item => {
+                //             vm.sysFunctionAddressMap[item.id] = item.ljdz;
+                //         });
+                //         let groupData = groupBy(data, 'gnlb');
+                //         Object.keys(groupData).forEach(key => {
+                //             let item = groupData[key];
+                //             for (let i = 0; i < item.length; i++) {
+                //                 vm.sysFeatureMenuTypeOptObj[item[i].id] = item[i].gnmc;
+                //             }
+                //         });
+                //     }
+                //
+                // })
+            },
+            //初始化自定义功能菜单下拉框
+            initCustomFunctionMenuObj() {
+                // let vm = this;
+                // vm.axios.post(vm.api.sysFunction.find, {
+                //     'sort': 'gnlb,sx',
+                //     'ifcustomizemenu': 'yes'
+                // }).then(res => {
+                //     //分组结构
+                //     let data = res.data;
+                //     if(data){
+                //         data.forEach(item => {
+                //             vm.customFunctionAddressMap[item.id] = item.ljdz;
+                //         });
+                //         let groupData = groupBy(data, 'gnlb');
+                //         Object.keys(groupData).forEach(key => {
+                //             let item = groupData[key];
+                //             for (let i = 0; i < item.length; i++) {
+                //                 vm.customFunctionMenuObj[item[i].id] = item[i].gnmc;
+                //             }
+                //         });
+                //     }
+                // })
+            },
+
+            countMneuOptDivHeight(){
+                let vm = this;
+                vm.isShow = true;
+                vm.menuDetailDivHeight = "auto";
+                vm.$nextTick(function () {
+                    let height = vm.$refs.menuDetailRef.$el.clientHeight + 20;
+                    vm.optDivHeight = "calc(100% - " + height + "px)";
+                });
+            },
+        }
+    }
+</script>
+
+
+<style scoped lang="scss">
+    .roleMenuDetailMain /deep/ .el-card__header{
+        background-color: white;
+        color:black;
+        height: 40px;
+        line-height: 40px;
+        padding: 5px;
+        font-size: 16px;
+        box-sizing: border-box;
+        border: 0;
+    }
+    .roleMenuDetailMain /deep/ .el-card__body{
+        padding: 0;
+        min-height: 50px;
+    }
+    .roleMenuDetailMain /deep/ .el-card{
+        padding: 5px;
+        box-sizing: border-box;
+        min-height: 50px;
+    }
+    .roleMenuDetailMain /deep/ .role-menu-detail-card-card{
+        height: 100%;
+        min-height: 50px;
+        line-height: 50px;
+    }
+    .roleMenuDetailMain{
+        padding: 0 10px;
+        box-sizing: border-box;
+    }
+
+    .role-menu-detail-card-card /deep/ .el-checkbox__label{
+        padding-left: 5px;
+    }
+
+    .role-menu-detail-card-card /deep/ .el-form-item{
+        margin-bottom: 10px;
+    }
+
+    .roleMenuOptMain /deep/ .el-card__header{
+        background-color: white;
+        color:black;
+        height: 40px;
+        line-height: 40px;
+        padding: 5px;
+        font-size: 16px;
+        box-sizing: border-box;
+        border: 0;
+    }
+    .roleMenuOptMain /deep/ .el-card__body{
+        padding: 0;
+        min-height: 50px;
+    }
+    .roleMenuOptMain /deep/ .el-card{
+        padding: 5px;
+        box-sizing: border-box;
+        min-height: 50px;
+    }
+    .roleMenuOptMain /deep/ .role-menu-opt-card-card {
+        min-height: 50px;
+        text-align: center;
+        line-height: 50px;
+        height: 100%;
+        width: calc(100%/2 - 5px);
+        float: left;
+        /*overflow-y: auto;*/
+    }
+    .roleMenuOptMain{
+        padding: 0 10px;
+        box-sizing: border-box;
+    }
+    .role-menu-opt-card /deep/ .el-card__body{
+        height: calc(100% - 40px);
+    }
+    .role-menu-opt-card-card /deep/ .el-card__header{
+        font-size: 14px;
+        border-bottom: 1px solid #EBEEF5;
+        height: 30px;
+        line-height: 30px;
+
+        /deep/ .clearfix {
+            text-align: center;
+            line-height: 15px;
+        }
+    }
+    .role-menu-opt-card-card /deep/ .el-card__body{
+        height: calc(100% - 30px);
+        overflow-y: auto;
+    }
+
+    .role-menu-opt-card-card {
+        /deep/ {
+            ::-webkit-scrollbar {
+                width: 0;
+            }
+            ::-webkit-scrollbar-track {
+                background: none;
+            }
+        }
+    }
+
+    .role-menu-detail-card /deep/ .el-card__body{
+        height: calc(100% - 40px);
+    }
+    fieldset{
+        border: 1px solid #EBEEF5;
+        border-radius: 5px;
+        height: 100%;
+        box-sizing: border-box;
+        padding-left: 20px;
+    }
+    legend{
+        height: 30px;
+        line-height: 30px;
+    }
+    .role-menu-opt-card-card /deep/ .el-checkbox__label{
+        padding-left: 5px;
+    }
+    .clearfix{
+        line-height: 25px;
+        text-align: left;
+    }
+
+    .opt-button-class{
+        width: 80px;
+        float: left;
+        height: 20px;
+        line-height: 20px;
+        margin-right: 10px;
+        border: 1px solid rgb(235, 238, 245);
+        padding: 5px 15px;
+        text-align: center;
+    }
+    .opt-button-class /deep/ .el-checkbox{
+        height: 20px;
+        line-height: 20px;
+    }
+</style>