sasp-admin 0.2.57

package/src/views/role/commonRole/compoment/roleMenuPower.vue

@@ -0,0 +1,226 @@
+<template>
+    <div style="width: 100%;height: 100%;">
+        <el-card class="box-card">
+            <div slot="header" class="clearfix" style="text-align: center;">
+                <div style="float:left;padding-left: 20px;box-sizing: border-box;">
+                    <el-checkbox v-model="checkAll" true-label="1" false-label="0" @change="checkAllData">全选</el-checkbox>
+                </div>
+                <span style="font-size: 16px;">{{cardTitle}}</span>
+            </div>
+            <el-tree ref="elTree"
+                     class="tree"
+                     :data="powerDataTree"
+                     node-key="id"
+                     :props="defaultProps"
+                     default-expand-all
+                     show-checkbox
+                     :render-content="renderOperateContent"
+                     @check="checkNode">
+            </el-tree>
+        </el-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "roleMenuPower",
+        props:{
+            cardTitle:{type:String,default:"操作权限"},//卡片名称
+            powerData:{type:Array,default:() => {return [];}},//数据（最底层数据）
+            powerDataTree:{type:Array,default:() => {return [];}},//数据（树数据）
+            currentClickNode:{type:Object,default:() => {return {};}},//当前点击节点
+            type:{type:String,default:""},//类型
+            checkOptPower:{type:Object,default:() => {return {};}},//勾选的菜单操作权限
+            checkDataPower:{type:Object,default:() => {return {};}},//勾选的菜单数据权限
+            operationAddObj:{type:Object,default:() => {return {};}},//新增的操作权限
+            operationDeleteObj:{type:Object,default:() => {return {};}},//删除的操作权限
+        },
+        data(){
+            return {
+                checkAll:"0",
+                defaultProps:{children: 'children', label: 'powerName',id:"id"},
+                checkedData:[],//选中节点
+                ownOptLastData:[],
+            }
+        },
+        created(){
+        },
+
+        mounted(){
+            let id = this.currentClickNode.id || this.currentClickNode.key;
+            let checkData = [];
+            if(this.type == "opt"){
+                checkData = this.checkOptPower[id];
+            }else{
+                checkData = this.checkDataPower[id];
+            }
+            if(checkData){
+                this.$refs.elTree && this.$refs.elTree.setCheckedKeys(checkData);
+            }else{
+                this.checkAll = "1";
+                this.checkAllData("1");
+            }
+            let halfKey = this.$refs.elTree.getHalfCheckedKeys();
+            this.isCheckAll(halfKey,checkData);
+
+            if(this.powerDataTree.length!=0 && this.powerDataTree.length==this.$refs.elTree.getCheckedKeys().length){
+                this.checkAll = "1";
+            }else{
+                this.checkAll = "0";
+            }
+        },
+
+        methods:{
+            checkAllData(value){
+                let id = this.currentClickNode.id || this.currentClickNode.key;
+                this.checkedData = [];
+                if(value == "1"){ //全选
+                    this.checkedData = (this.powerData);
+                    if(this.type == "opt"){
+                        this.checkOptPower[id] = this.powerData;
+                    }else{
+                        this.checkDataPower[id] = this.powerData;
+                    }
+                }else{ //取消全选
+                    this.checkedData = [];
+                    this.$set(this.currentClickNode,"optPower",[]);
+                    if(this.type == "opt"){
+                        this.checkOptPower[id] = "";
+                    }else{
+                        this.checkDataPower[id] = "";
+                    }
+                }
+                this.$refs.elTree && this.$refs.elTree.setCheckedKeys(this.checkedData);
+            },
+
+            checkNode(data,checked){
+                let checkedPower = [];
+                let checkedKeys = checked.checkedKeys || [];
+                checkedKeys.forEach(item => {
+                   if(this.powerData.indexOf(item) > -1){
+                       checkedPower.push(item);
+                   }
+                });
+                let id = this.currentClickNode.id || this.currentClickNode.key;
+                if(this.type == "opt"){
+                    this.$set(this.checkOptPower,id,checkedPower);
+                }else{
+                    this.$set(this.checkDataPower,id,checkedPower);
+                }
+                let halfKeys = checked.halfCheckedKeys || [];
+                this.isCheckAll(halfKeys,checkedKeys);
+            },
+
+            //递归删除未选择的数据
+            getHalfTreeData(checkedKeys,halfCheckedNodes){
+                halfCheckedNodes.forEach(item => {
+                    (item.childrens || []).forEach((node,index) => {
+                        if(checkedKeys.indexOf(node.key) == -1){ //设置当前节点 isCheked：false
+                            item["childrens"].splice(index,1);
+                        }
+                        halfCheckedNodes = item["childrens"];
+                        this.getHalfTreeData(checkedKeys,halfCheckedNodes);
+                    });
+                });
+            },
+
+            //获取最后一层数据
+            getLastLayerData(dataArr){
+                (dataArr || []).forEach(item => {
+                    if(item.childrens && item.childrens.length > 0){
+                        this.getLastLayerData(item.childrens)
+                    }else{
+                        this.ownOptLastData.push(item);
+                    }
+                });
+            },
+            //全选的状态
+            isCheckAll(halfKey,checkData){
+                if(!this.currentClickNode || !this.currentClickNode.bindSource){
+                    this.checkAll = "0";
+                    return;
+                }
+                let bindSourceType = JSON.parse(this.currentClickNode.bindSource)[0];
+                let checkedTree=this.$refs.elTree.getCheckedKeys();
+                let powerDataTreeArr= JSON.parse(JSON.stringify(this.powerDataTree));
+                let allSizes=this.powerDataTree.length;
+                if( powerDataTreeArr){
+                    powerDataTreeArr.forEach(parent =>{
+                        if(parent.children){
+                            allSizes=allSizes+parent.children.length;
+                        }
+                    });
+                }
+                if(this.powerDataTree.length==0){
+                    this.checkAll = "0";
+                }else if(bindSourceType == "cview"){
+                    if(checkData.length == allSizes || checkedTree.length==allSizes){
+                        this.checkAll = "1";
+                    }else{
+                        this.checkAll = "0";
+                    }
+                }else{
+                    if((checkData || []).length == (this.powerDataTree || []).length){
+                        this.checkAll = "1";
+                    }else{
+                        this.checkAll = "0";
+                    }
+                }
+            },
+
+            /**
+             * 操作权限
+             * @param h
+             * @param node
+             * @param data
+             * @param store
+             * @returns {*}
+             */
+            renderOperateContent(h, { node, data, store }) {
+                if(this.type == "opt"){
+                    let type = "按钮";
+                    if((data.powerKey || "").indexOf("tree") > -1){
+                        type = "树"
+                    }
+                    return (
+                        <span >
+                    <span>{node.label}</span>
+                    <span class="custom-operate-tree-node">
+                      ({type})
+                    </span>
+                  </span>);
+                }else {
+                    return (
+                        <span>{node.label}</span>
+                    );
+                }
+
+            },
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .tree /deep/.custom-operate-tree-node {
+        margin-left: 10px;
+        font-size: 11px;
+        color: #409EFF;
+    }
+    .box-card{
+        /deep/.el-card_header{
+            height: 60px;
+        }
+        /deep/.el-card__body{
+            height: calc(90% - 60px);
+            overflow-y:scroll;
+            ::-webkit-scrollbar-thumb {
+                border-radius: 3px;
+                background-color: #dddddd !important;
+            }
+            ::-webkit-scrollbar-thumb {
+                background-color: #ddd !important;
+                border-radius: 3px !important;
+            }
+        }
+    }
+</style>

package/src/views/role/commonRole/compoment/roleMenuPowerSetting.vue

@@ -0,0 +1,69 @@
+<template>
+    <el-container style="width: 100%;height: 100%;">
+        <div style="width: 50%;height: 100%;">
+            <role-menu-power
+                    ref="optPowerRef"
+                    card-title="操作权限"
+                    :power-data="optPower"
+                    :power-data-tree="optPowerTree"
+                    type="opt"
+                    :current-click-node="currentClickNode"
+                    :check-opt-power="checkOptPower"
+                    :check-data-power="checkDataPower"
+                    :operation-add-obj="operationAddObj"
+                    :operation-delete-obj="operationDeleteObj">
+            </role-menu-power>
+        </div>
+        <div style="width: 50%;height: 100%;margin-left: 20px;">
+            <role-menu-power
+                    ref="dataPowerRef"
+                    card-title="数据权限"
+                    :power-data="dataPower"
+                    :power-data-tree="dataPowerTree"
+                    type="data"
+                    :current-click-node="currentClickNode"
+                    :check-opt-power="checkOptPower"
+                    :check-data-power="checkDataPower"
+                    :operation-add-obj="operationAddObj"
+                    :operation-delete-obj="operationDeleteObj">
+            </role-menu-power>
+        </div>
+    </el-container>
+</template>
+
+<script>
+    import RoleMenuPower from "./roleMenuPower";
+    export default {
+        name: "roleMenuPowerSetting",
+        components: {RoleMenuPower},
+        props:{
+            optPower:{type:Array,default:() => {return []}},//操作权限（最底层数据）
+            dataPower:{type:Array,default:() => {return []}},//数据权限（最底层数据）
+            optPowerTree:{type:Array,default:() => {return []}},//操作权限（树数据）
+            dataPowerTree:{type:Array,default:() => {return []}},//数据权限（树数据）
+            checkOptPower:{type:Object,default:() => {return {};}},//勾选的菜单操作权限
+            checkDataPower:{type:Object,default:() => {return {};}},//勾选的菜单数据权限
+            currentClickNode:{type:Object,default:() => {return {};}},//当前点击节点
+            operationAddObj:{type:Object,default:() => {return {};}},//新增的操作权限
+            operationDeleteObj:{type:Object,default:() => {return {};}},//删除的操作权限
+        },
+        data(){
+            return {
+            }
+        },
+        watch:{
+
+        },
+
+        created(){
+        },
+        methods:{
+        }
+    }
+</script>
+
+<style scoped>
+    /deep/ .el-card{
+        height: 100%;
+    }
+</style>

package/src/views/role/commonRole/compoment/roleMenuSetting.vue

@@ -0,0 +1,365 @@
+<template>
+<div style="height: 100%;width: 100%;">
+    <el-select v-model="cdss" style="width: 100%;margin-bottom: 5px" @change="changeCdss">
+        <el-option v-for="(text,index) in cdssArr" :key="index" :label="orgDimObj[text]" :value="text"></el-option>
+    </el-select>
+    <el-input v-model="filterMenu" size="small" prefix-icon="el-icon-search" style="margin-bottom: 5px" placeholder="输入关键字过滤"></el-input>
+    <div style="height: calc(100% - 80px);overflow-y: auto">
+        <common-tree v-if="showMenuTree" v-show="showMenuTreeShow"
+                     ref="menuTree"
+                     :root-datas="menuShowDatas"
+                     parent-id="menuChiefNum"
+                     :default-props="defaultProps"
+                     :filter-text="filterMenu"
+                     :default-expand-all="true"
+                     :expand-onclick-node="false"
+                     :node-click="nodeClick"
+                     :init-check="initCheck"
+                     :init-call-back="initCallBack">
+        </common-tree>
+    </div>
+</div>
+</template>
+
+<script>
+    export default {
+        name: "RoleMenuSetting",
+        props:{
+            roleId:{type:String,default:""},//角色权限id
+            roleType:{type:String,default:""},
+            checkMenuOptPower:{type:Object,default:() => {return {};}},//勾选的菜单操作权限
+            checkMenuDataPower:{type:Object,default:() => {return {};}},//勾选的菜单数据权限
+            tenantId:{type:String,default:''},//租户id
+        },
+        data(){
+            return {
+                cdss:"",//组织维度
+                cdssArr:[],//组织维度
+                menuDatas:[],//用户可分配的所有菜单数据
+                menuShowDatas:[],//需要显示的菜单
+                loginUser:{},//当前登录用户
+                orgDimObj:{},//组织维度
+                allMenuObj:{},//所有菜单信息
+                menuOptPowerTree:{},//菜单拥有的操作权限（树数据）
+                menuDataPowerTree:{},//菜单拥有的数据权限（树数据）
+                menuOptPower:{},//菜单拥有的操作权限（最底层数据）
+                menuDataPower:{},//菜单拥有的数据权限（最底层数据）
+                defaultProps:{"children":"children","label":"menuName"},//树数据显示配置
+                filterMenu:"",//搜索菜单的参数
+                showMenuTree:false,
+                showMenuTreeShow:true,//用于控制树生成后数据还未加载完成页面不显示
+                initCheck:{initCheck:""},
+                oldChecked:[],
+                oldData:{},
+                oldDataArray:[],
+                paramSetting:{"id":"id","pId":"parentId","children":"children"},
+                checkedArr:[],//选中模块（树数据）
+                checkedObj:{},//选中对象数组（树数据）
+                isChange:false,
+                cdssBak:"",//记录上一个cdss
+
+                tenantCdss:'', //租户维度
+            }
+        },
+        watch:{
+            roleId(){
+                this.getCheckedData();
+                this.initTreeData();
+            }
+        },
+        created(){
+            this.getCheckedData();
+            this.initTreeData();
+        },
+        methods:{
+            /**
+             * 获取需默认勾取的菜单
+             */
+            async getCheckedData(){
+                this.oldChecked = [];
+                let res = await this.axios.post(this.api.roleMenuOpt.find,{roleId:this.roleId || "$$$$",type:"menu"});
+                if(res && res.data){
+                    res.data.forEach(item => {
+                        this.oldChecked.push(item.menuId);
+                        this.oldData[item.menuId] = item.id;
+                    });
+                    this.$set(this.initCheck,"initCheck",this.oldChecked);
+                }
+            },
+            /**
+             * 获取树数据
+             */
+            async initTreeData(){
+                this.$emit("setMenuLoading",true);
+                //获取当前登录用户信息
+                this.loginUser = this.USER_GLOBAL.getLoginUser() || {};
+                //用户类型
+                let userType = this.loginUser.userType;
+                //组织维度
+                await this.getOrgDim();
+                //当前登录用户拥有的菜单权限
+                let userMenuOptTRes = await this.axios.post(this.api.sysUser.getLoginMenuOpt,{userId:this.loginUser.id,userType:userType});
+                let userMenuOptObj = {};
+                if(userMenuOptTRes && userMenuOptTRes.data && userMenuOptTRes.data.operateObj){
+                    userMenuOptObj = userMenuOptTRes.data.operateObj || {};
+                }
+                //是否是开发者
+                let caseSup = userType == "sup";
+                //如果是开发者，可分配菜单是所有，如果是下级授权用户，可分配菜单是根据授权id获取
+                let authRoleId = this.roleId;
+                let empowerCheckPower = {};
+                if(!caseSup){
+                    authRoleId = this.loginUser.empowerId || "$$$$";
+                    if(this.tenantId){
+                        authRoleId = this.roleId;
+                    }
+                    let powerRes = await this.axios.post(this.api.roleMenuOpt.find,{roleId:this.roleId});
+                    if(powerRes && powerRes.data){
+                        (powerRes.data || []).forEach(item => {
+                            empowerCheckPower[item.menuId] = item;
+                        });
+                    }
+                }
+                //菜单查询参数
+                let paramObj = {caseSup:caseSup,authRoleId:authRoleId,menuChiefNum:"Y",menuIsUse:"Y"};
+                if(this.tenantId){
+                    paramObj["caseSup"] = "true";
+                    //传组织维度
+                    // paramObj["cdss"] = this.tenantCdss ||'';
+                }
+                //可分配菜单
+                let menuRes = await this.axios.post(this.api.menu.findAuthMenu,paramObj);
+                if(menuRes && menuRes.data && menuRes.data.operateObj){
+                    let data = menuRes.data.operateObj || [];
+                   //菜单归属
+                   let cdssArr = [];
+                   let parentTree = "";
+                   let menuIdMap = {};
+                   data.forEach(menu => {
+                       parentTree += "," + menu.menuPath;
+                       let menuId = menu.id;
+                       menuIdMap[menuId] = menu;
+                       //记录菜单归属
+                       if(menu.cdss && cdssArr.indexOf(menu.cdss) == -1 && this.orgDimObj.hasOwnProperty(menu.cdss)){
+                               cdssArr.push(menu.cdss);
+                       }
+                       //保存菜单信息
+                       this.allMenuObj[menuId] = menu;
+                       //开发者拥有菜单所有的操作权限和数据权限，授权用户拥有被下发的操作权限和数据权限
+                       if(caseSup || this.tenantId){
+                           //菜单操作权限
+                           if(menu.operatePermis){
+                               //可操作的操作权限权限
+                               this.menuOptPower[menuId] = menu.operatePermis.split(",");
+                               this.menuOptPowerTree[menuId] = this.COMMON_FUNC.buildElTree(menu.optAllPower || [],this.paramSetting);
+                               //勾选的操作权限，未配置的默认全选
+                               if(this.oldChecked.indexOf(menuId) > -1){
+                                   let optArr = menu.optPower ? menu.optPower.split(",") : [];
+                                   this.checkMenuOptPower[menuId] = optArr;
+                               }else{
+                                   this.checkMenuOptPower[menuId] = menu.operatePermis.split(",");
+                               }
+                           }
+                           //菜单数据权限
+                           if(menu.dataPermis){
+                               //可操作的数据权限
+                               this.menuDataPower[menuId] = menu.dataPermis.split(",");
+                               this.menuDataPowerTree[menuId] = this.COMMON_FUNC.buildElTree(menu.dataAllPower || [],this.paramSetting);
+                               //勾选的数据权限，未配置的默认全选
+                               if(this.oldChecked.indexOf(menuId) > -1){
+                                   let dataArr = menu.dataPower ? menu.dataPower.split(",") : [];
+                                   this.checkMenuDataPower[menuId] = dataArr;
+                               }else{
+                                   this.checkMenuDataPower[menuId] = menu.dataPermis.split(",");
+                               }
+                           }
+                       }else{
+                           if(menu.optPower){
+                               //可操作的操作权限权限
+                               this.menuOptPower[menuId] = menu.optPower.split(",");
+                               this.menuOptPowerTree[menuId] = this.COMMON_FUNC.buildElTree(menu.optAllPower || [],this.paramSetting);
+                               if (this.oldChecked.indexOf(menuId) > -1){
+                                   let optPower = (empowerCheckPower[menuId] || {}).optPower;
+                                   let optArr = optPower ? optPower.split(",") : [];
+                                   this.checkMenuOptPower[menuId] = optArr;
+                               }else{
+                                   this.checkMenuOptPower[menuId] = menu.optPower.split(",");
+                               }
+                           }
+                           if(menu.dataPower){
+                               //可操作的数据权限权限
+                               this.menuDataPower[menuId] = menu.dataPower.split(",");
+                               this.menuDataPowerTree[menuId] = this.COMMON_FUNC.buildElTree(menu.dataAllPower || [],this.paramSetting);
+                               if (this.oldChecked.indexOf(menuId) > -1){
+                                   let dataPower = (empowerCheckPower[menuId] || {}).dataPower;
+                                   let dataArr = dataPower ? dataPower.split(",") : [];
+                                   this.checkMenuDataPower[menuId] = dataArr;
+                               }else{
+                                   this.checkMenuDataPower[menuId] = menu.dataPower.split(",");
+                               }
+                           }
+                       }
+                   });
+                   //获取授权用户可分配菜单的上级菜单
+                   if(!caseSup){
+                       let empowerMenuRes = await this.axios.post(this.api.menu.find,{id:parentTree.substring(1)});
+                       let parentMenuArr = [];
+                       if(empowerMenuRes && empowerMenuRes.data){
+                           empowerMenuRes.data.forEach(item => {
+                               item.disabled = true;
+                               if(!menuIdMap.hasOwnProperty(item.id)){
+                                    parentMenuArr.push(item);
+                               }
+                           });
+                           data = data.concat(parentMenuArr);
+                       }
+                   }
+                    this.initCheckedObj();
+                   this.cdssArr = cdssArr;
+                   if(this.cdssArr && this.cdssArr.length > 0){
+                       this.cdss = this.cdssArr[0];
+                   }
+                   this.menuDatas = data;
+                   this.dealTreeData();
+                   this.$emit("setMenuLoading",false);
+                }
+            },
+
+            /**
+             * 整理树数据
+             */
+            dealTreeData(){
+                let vm=this;
+                this.showMenuTree= false;
+                let data = JSON.parse(JSON.stringify(this.menuDatas));
+                this.menuShowDatas = data.filter(each => {
+                    if (each["cdss"] == this.cdss) {
+                        return true;
+                    }
+                });
+                this.$nextTick(() => {
+                    vm.showMenuTree = true;
+                    vm.showMenuTreeShow=false;
+                });
+            },
+            initCallBack(treeVm){
+                let vm=this;
+                if(vm.isChange){
+                    // 置空选项
+                    vm.$refs.menuTree.setTreeCheckedKeys([],true);
+                }else{ //没切换选项就不走
+                    vm.showMenuTreeShow=true;
+                    return ;
+                }
+                if(vm.checkedArr && Object.keys(vm.checkedObj).length>0){
+                    //用于切换选项卡 记录之前的选项
+                    let arr=[];
+                    Object.keys(vm.checkedObj).forEach(item=>{
+                        arr=arr.concat(vm.checkedObj[item]);
+                    });
+                    if(arr.length>0){
+                        vm.$refs.menuTree.setTreeCheckedKeys(arr,false,true);
+                    }
+                    vm.showMenuTreeShow=true;
+                }else{
+                    vm.$refs.menuTree.setTreeCheckedKeys([],true);
+                }
+                vm.showMenuTreeShow=true;
+            },
+            /**
+             * 获取组织维度
+             * @returns {Promise<void>}
+             */
+            async getOrgDim(){
+                this.orgDimObj=[];
+                let orgDimRes = await this.axios(this.api.sysOrgDimension.find,{isUse:"1"});
+                if(orgDimRes && orgDimRes.data){
+                    orgDimRes.data.forEach(orgDim => {
+                        if(orgDim.dimSpec){
+                            let dimSpecObj = JSON.parse(orgDim.dimSpec);
+                            if(dimSpecObj.hasOwnProperty("menuLocalName")&&(this.roleType==orgDim.id||this.loginUser.userType=="sup")){
+                                this.orgDimObj[orgDim.id] = dimSpecObj["menuLocalName"];
+                            }
+                        }
+                    });
+                }
+                this.orgDimObj["sys"] = "系统";
+            },
+
+            /**
+             * 菜单归属change事件
+             */
+            changeCdss(){
+                this.isChange=true;
+                this.checkedArr = this.$refs.menuTree.$refs.elTree.getCheckedNodes();
+                this.checkedObj[this.cdssBak]=[];
+                this.checkedObj[this.cdssBak] = this.checkedArr;
+                this.cdssBak=JSON.parse(JSON.stringify(this.cdss));
+                this.dealTreeData();
+            },
+
+
+            /**
+             * 树节点点击事件
+             */
+            nodeClick(data,node){
+                this.$emit("setMenuPower",this.menuOptPower[data.id],this.menuDataPower[data.id],
+                    this.menuOptPowerTree[data.id],this.menuDataPowerTree[data.id]);
+                this.$emit("setCurrentMenuNode",data);
+            },
+
+            /**
+             *
+             */
+            getCheckData(){
+                let checkedArr = this.$refs.menuTree.$refs.elTree.getCheckedNodes();
+                if(checkedArr.length > 0){
+                    this.checkedArr = this.checkedArr.concat(this.$refs.menuTree.$refs.elTree.getCheckedNodes());
+                }
+                return this.checkedArr;
+                // return this.$refs.menuTree.$refs.elTree.getCheckedNodes();
+            },
+
+            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>
+            );
+            },
+            initCheckedObj(){
+                this.axios.post(this.api.menu.findByIds,{"ids":this.oldChecked.join(",")}).then(res=>{
+                    if(res.data){
+                        this.oldDataArray=res.data || [];
+                        this.oldDataArray.forEach(item=>{
+                            if(!this.checkedObj[item.cdss]){
+                                this.checkedObj[item.cdss]=[];
+                            }
+                            this.checkedObj[item.cdss].push(item);
+                        })
+                    }
+                    this.cdssBak=JSON.parse(JSON.stringify(this.cdss));
+                })
+            },
+        }
+    }
+</script>
+
+<style scoped>
+    /* 滚动条宽度 */
+    ::-webkit-scrollbar {
+        width: 5px;
+    }
+
+    /* 滚动槽 */
+    ::-webkit-scrollbar-track {
+        background: none;
+    }
+
+    /* 滚动条滑块 */
+    ::-webkit-scrollbar-thumb {
+        background-color: #a9a9a9;
+        border-radius: 3px;
+    }
+</style>