| 1 |
- {"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\setting\\systemMenus\\index.vue?vue&type=style&index=0&id=4064d7f5&scoped=true&lang=scss","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\setting\\systemMenus\\index.vue","mtime":1761185180188},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoudnhlVGFibGUgew0KICA+IC52eGUtdGFibGUtLWhlYWRlci13cmFwcGVyIHsNCiAgICBiYWNrZ3JvdW5kOiAjZmZmICFpbXBvcnRhbnQ7DQogIH0NCg0KICAuaWNvbiB7DQogICAgZm9udC1zaXplOiAyMHB4Ow0KICB9DQp9DQo6OnYtZGVlcCAudnhlLXRhYmxlLS1yZW5kZXItZGVmYXVsdCAudnhlLXRhYmxlLS1ib3JkZXItbGluZSB7DQogIHotaW5kZXg6IDIgIWltcG9ydGFudDsNCn0NCi5ydWxlIHsNCiAgZGlzcGxheTogZmxleDsNCiAgZmxleC13cmFwOiB3cmFwOw0KICBvdmVyZmxvdy15OiBzY3JvbGw7DQogIGhlaWdodDogbWF4LWNvbnRlbnQ7DQogIG1heC1oZWlnaHQ6IDYwMHB4Ow0KICBmbGV4OiAxOw0KfQ0KLnRyZWU6Oi13ZWJraXQtc2Nyb2xsYmFyIHsNCiAgd2lkdGg6IDJweDsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2Y1ZjVmNTsNCn0NCi8q5a6a5LmJ5rua5Yqo5p2h6auY5a695Y+K6IOM5pmvIOmrmOWuveWIhuWIq+WvueW6lOaoquerlua7muWKqOadoeeahOWwuuWvuCovDQoucnVsZTo6LXdlYmtpdC1zY3JvbGxiYXIgew0KICB3aWR0aDogMTBweDsNCiAgaGVpZ2h0OiAxMHB4Ow0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjVmNWY1Ow0KfQ0KDQovKuWumuS5iea7muWKqOadoei9qOmBkyDlhoXpmLTlvbEr5ZyG6KeSKi8NCi5ydWxlOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7DQogIGJvcmRlci1yYWRpdXM6IDRweDsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2Y1ZjVmNTsNCn0NCg0KLyrlrprkuYnmu5HlnZcg5YaF6Zi05b2xK+WchuinkiovDQoucnVsZTo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWIgew0KICBib3JkZXItcmFkaXVzOiA0cHg7DQogIGJhY2tncm91bmQtY29sb3I6ICNjY2M7DQp9DQoNCi5ydWxlLWxpc3Qgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjJmMmYyOw0KICB3aWR0aDogNDguNSU7DQogIGhlaWdodDogbWF4LWNvbnRlbnQ7DQogIG1hcmdpbjogNXB4Ow0KICBib3JkZXItcmFkaXVzOiAzcHg7DQogIHBhZGRpbmc6IDEwcHg7DQogIGNvbG9yOiAjMzMzOw0KICBjdXJzb3I6IHBvaW50ZXI7DQogIHRyYW5zaXRpb246IGFsbCAwLjFzOw0KfQ0KDQoucnVsZS1saXN0OmhvdmVyIHsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2JhZGJmYjsNCn0NCg0KLnJ1bGUtbGlzdCBkaXYgew0KICB3aGl0ZS1zcGFjZTogbm93cmFwOw0KfQ0KDQouc2VsZWN0LXJ1bGUgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjYmFkYmZiOw0KfQ0KLnJvdXRlLWxpc3Qgew0KICBkaXNwbGF5OiBmbGV4Ow0KICBtYXJnaW4tdG9wOiAxMHB4Ow0KDQogIC50cmVlIHsNCiAgICB3aWR0aDogMjAwcHg7DQogICAgb3ZlcmZsb3cteTogc2Nyb2xsOw0KICAgIG1heC1oZWlnaHQ6IDYwMHB4Ow0KICAgIDo6di1kZWVwIC5lbC10cmVlLW5vZGVfX2NoaWxkcmVuIC5lbC10cmVlLW5vZGUgLmVsLXRyZWUtbm9kZV9fY29udGVudCB7DQogICAgICBwYWRkaW5nLWxlZnQ6IDE0cHggIWltcG9ydGFudDsNCiAgICB9DQogIH0NCn0NCg=="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAseA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/pages/setting/systemMenus","sourcesContent":["<template>\r\n <div>\r\n <el-card :bordered=\"false\" shadow=\"never\" class=\"ivu-mb-16\" :body-style=\"{ padding: 0 }\">\r\n <div class=\"padding-add\">\r\n <el-form\r\n ref=\"roleData\"\r\n :model=\"roleData\"\r\n :label-width=\"labelWidth\"\r\n :label-position=\"labelPosition\"\r\n @submit.native.prevent\r\n inline\r\n >\r\n <el-form-item label=\"按钮名称：\" prop=\"status2\" label-for=\"status2\">\r\n <el-input clearable v-model=\"roleData.keyword\" placeholder=\"请输入按钮名称\" class=\"form_content_width\" />\r\n </el-form-item>\r\n <el-form-item>\r\n <el-button type=\"primary\" v-db-click @click=\"getData\">查询</el-button>\r\n </el-form-item>\r\n <!-- <el-row >\r\n <el-col v-bind=\"grid\">\r\n <el-button type=\"primary\" v-db-click @click=\"menusAdd('添加规则')\">添加规则 </el-button>\r\n </el-col>\r\n </el-row> -->\r\n </el-form>\r\n </div>\r\n </el-card>\r\n <el-card :bordered=\"false\" shadow=\"never\" class=\"ivu-mt\">\r\n <vxe-table\r\n :border=\"false\"\r\n class=\"vxeTable\"\r\n highlight-hover-row\r\n highlight-current-row\r\n :loading=\"loading\"\r\n ref=\"xTable\"\r\n header-row-class-name=\"false\"\r\n :tree-config=\"tabconfig\"\r\n :data=\"tableData\"\r\n row-id=\"id\"\r\n >\r\n <vxe-table-column field=\"menu_name\" tree-node title=\"按钮名称\" min-width=\"100\"></vxe-table-column>\r\n <vxe-table-column field=\"menu_path\" title=\"类型\" min-width=\"240\" tooltip=\"true\">\r\n <template v-slot=\"{ row }\">\r\n <span v-if=\"row.auth_type == 1\">菜单：{{ row.menu_path }}</span>\r\n <span v-if=\"row.auth_type == 3\">按钮</span>\r\n <span v-if=\"row.auth_type == 2\">数据权限</span>\r\n </template>\r\n </vxe-table-column>\r\n <vxe-table-column field=\"sort\" title=\"排序\" width=\"150\"></vxe-table-column>\r\n <vxe-table-column field=\"flag\" title=\"是否显示\" width=\"150\">\r\n <template v-slot=\"{ row }\">\r\n <el-switch\r\n :active-value=\"1\"\r\n :inactive-value=\"0\"\r\n v-model=\"row.is_show_path\"\r\n :value=\"row.is_show_path\"\r\n @change=\"onchangeIsShow(row)\"\r\n size=\"large\"\r\n >\r\n </el-switch>\r\n </template>\r\n </vxe-table-column>\r\n <vxe-table-column field=\"date\" title=\"操作\" align=\"center\" width=\"150\" fixed=\"right\">\r\n <template v-slot=\"{ row }\">\r\n <a v-db-click @click=\"edit(row, '编辑')\">编辑</a>\r\n </template>\r\n </vxe-table-column>\r\n </vxe-table>\r\n </el-card>\r\n <menus-from\r\n :formValidate=\"formValidate\"\r\n :titleFrom=\"titleFrom\"\r\n @getList=\"getList\"\r\n @changeMenu=\"changeMenu\"\r\n ref=\"menusFrom\"\r\n @clearFrom=\"clearFrom\"\r\n ></menus-from>\r\n <el-dialog :visible.sync=\"ruleModal\" width=\"1100px\" title=\"权限列表\" @closed=\"modalchange\">\r\n <div class=\"search-rule\">\r\n <el-alert\r\n title=\"基础接口，可多选，并且添加后不会再展示出现；删除权限后才会出现；公共接口，可多选，并且添加后会继续展示；\"\r\n ></el-alert>\r\n <el-input\r\n class=\"mr10\"\r\n v-model=\"searchRule\"\r\n placeholder=\"输入关键词搜索\"\r\n clearable\r\n style=\"width: 300px\"\r\n ref=\"search\"\r\n @on-enter=\"searchRules\"\r\n @on-clear=\"searchRules\"\r\n />\r\n <el-button type=\"primary\" v-db-click @click=\"searchRules\">搜索</el-button>\r\n <el-button v-db-click @click=\"init\">重置</el-button>\r\n </div>\r\n <div class=\"route-list\">\r\n <div class=\"tree\">\r\n <el-tree\r\n ref=\"treeBox\"\r\n :data=\"ruleCateList\"\r\n :highlight-current=\"true\"\r\n :props=\"defaultProps\"\r\n node-key=\"id\"\r\n :default-expanded-keys=\"expandedKeys\"\r\n :current-node-key=\"nodeKey\"\r\n @node-click=\"handleNodeClick\"\r\n ></el-tree>\r\n </div>\r\n <div class=\"rule\">\r\n <div\r\n class=\"rule-list\"\r\n v-show=\"!arrs.length || arrs.includes(item.id)\"\r\n :class=\"{ 'select-rule': seletRouteIds.includes(item.id) }\"\r\n v-for=\"(item, index) in children\"\r\n :key=\"index\"\r\n v-db-click\r\n @click=\"selectRule(item)\"\r\n >\r\n <div>接口名称：{{ item.name }}</div>\r\n <div>请求方式：{{ item.method }}</div>\r\n <div>接口地址：{{ item.path }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <el-tabs v-model=\"routeType\" @on-click=\"changTab\">\r\n <el-tab-pane :label=\"item.name\" :name=\"'' + index\" v-for=\"(item, index) in foundationList\" :key=\"item\"></el-tab-pane>\r\n </el-tabs> -->\r\n <span slot=\"footer\" class=\"dialog-footer\">\r\n <el-button v-db-click @click=\"ruleModal = false\">取 消</el-button>\r\n <el-button type=\"primary\" v-db-click @click=\"addRouters\">确 定</el-button>\r\n </span>\r\n </el-dialog>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapState } from 'vuex';\r\nimport {\r\n getTable,\r\n menusDetailsApi,\r\n isShowApi,\r\n editMenus,\r\n getRuleList,\r\n menusBatch,\r\n getMenusUnique,\r\n menusRuleCate,\r\n} from '@/api/systemMenus';\r\nimport formCreate from '@form-create/element-ui';\r\nimport menusFrom from './components/menusFrom';\r\nimport { formatFlatteningRoutes, findFirstNonNullChildren, findFirstNonNullChildrenKeys } from '@/libs/system';\r\n\r\nexport default {\r\n name: 'systemMenus',\r\n data() {\r\n return {\r\n children: [],\r\n expandedKeys: [],\r\n tabconfig: { children: 'children', reserve: true, accordion: true },\r\n spinShow: false,\r\n ruleModal: false,\r\n searchRule: '',\r\n grid: {\r\n xl: 7,\r\n lg: 7,\r\n md: 12,\r\n sm: 24,\r\n xs: 24,\r\n },\r\n roleData: {\r\n is_show: 1,\r\n keyword: '',\r\n // auth_type: 3,\r\n },\r\n defaultProps: {\r\n children: 'children',\r\n label: 'name',\r\n },\r\n ruleCateList: [], //权限树\r\n loading: false,\r\n tableData: [],\r\n FromData: null,\r\n icons: '',\r\n formValidate: {},\r\n titleFrom: '',\r\n modalTitleSs: '',\r\n routeType: '0',\r\n arrs: [],\r\n foundationList: [], // 基础接口列表\r\n openList: [], // 公开接口列表\r\n seletRoute: [], // 选中路由\r\n seletRouteIds: [], // 选中id\r\n menusId: 0, // 选中分类id\r\n nodeKey: 0, // 选中节点\r\n openId: '',\r\n };\r\n },\r\n components: { menusFrom, formCreate: formCreate.$form() },\r\n computed: {\r\n ...mapState('admin/layout', ['isMobile']),\r\n labelWidth() {\r\n return this.isMobile ? undefined : '80px';\r\n },\r\n labelPosition() {\r\n return this.isMobile ? 'top' : 'right';\r\n },\r\n },\r\n mounted() {\r\n this.getData();\r\n },\r\n methods: {\r\n init() {\r\n this.searchRule = '';\r\n this.searchRules();\r\n },\r\n addRouters() {\r\n let data = {\r\n menus: this.seletRoute,\r\n };\r\n menusBatch(data)\r\n .then((res) => {\r\n this.getData();\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n selectRule(data) {\r\n if (this.seletRouteIds.includes(data.id)) {\r\n let i = this.seletRouteIds.findIndex((e) => e == data.id);\r\n this.seletRouteIds.splice(i, 1);\r\n this.seletRoute.splice(i, 1);\r\n } else {\r\n this.seletRouteIds.push(data.id);\r\n this.seletRoute.push({\r\n menu_name: data.name,\r\n unique_auth: '',\r\n api_url: data.path,\r\n path: this.menusId,\r\n method: data.method,\r\n });\r\n }\r\n },\r\n changTab(name) {\r\n this.routeType = name;\r\n let index = parseInt(name);\r\n this.children = this.foundationList[index] ? this.foundationList[index].children : [];\r\n this.searchRules();\r\n },\r\n // 搜索规则\r\n searchRules() {\r\n if (this.searchRule.trim()) {\r\n this.arrs = [];\r\n let arr = this.foundationList;\r\n for (var i = 0; i < arr.length; i++) {\r\n if (arr[i].name.indexOf(this.searchRule) !== -1) {\r\n this.arrs.push(arr[i].id);\r\n }\r\n }\r\n } else {\r\n this.arrs = [];\r\n }\r\n },\r\n addRoute(row) {\r\n this.menusId = row.id;\r\n this.routeType = '0';\r\n // this.getRuleList();\r\n menusRuleCate().then((res) => {\r\n this.ruleCateList = res.data;\r\n this.ruleModal = true;\r\n if (res.data.length) {\r\n this.$nextTick((e) => {\r\n this.expandedKeys = findFirstNonNullChildrenKeys(res.data[0], []);\r\n this.nodeKey = findFirstNonNullChildren(res.data).id;\r\n this.$refs.treeBox.setCurrentKey(this.nodeKey);\r\n this.getRuleList(this.nodeKey);\r\n });\r\n }\r\n });\r\n },\r\n handleNodeClick(data) {\r\n this.getRuleList(data.id);\r\n },\r\n modalchange() {\r\n this.seletRouteIds = [];\r\n this.seletRoute = [];\r\n },\r\n // 获取权限列表\r\n getRuleList(cate_id) {\r\n getRuleList(cate_id).then((res) => {\r\n this.foundationList = res.data;\r\n this.children = res.data;\r\n this.searchRules();\r\n\r\n // this.openList = [];\r\n // this.seletRouteIds = [];\r\n // this.seletRoute = [];\r\n });\r\n },\r\n // 修改规则状态\r\n onchangeIsShow(row) {\r\n let data = {\r\n id: row.id,\r\n is_show_path: row.is_show_path,\r\n is_show: -1,\r\n };\r\n isShowApi(data)\r\n .then(async (res) => {\r\n this.$message.success(res.msg);\r\n this.$store.dispatch('menus/getMenusNavList');\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n // 请求列表\r\n getList() {\r\n this.formValidate = Object.assign({}, this.$options.data().formValidate);\r\n this.getData();\r\n },\r\n\r\n // 清除表单数据\r\n clearFrom() {\r\n this.formValidate = Object.assign({}, this.$options.data().formValidate);\r\n },\r\n // 添加子菜单\r\n addE(row, title) {\r\n this.formValidate = {};\r\n let pid = row.id.toString();\r\n if (pid) {\r\n menusDetailsApi(row.id)\r\n .then(async (res) => {\r\n this.formValidate.path = res.data.path;\r\n this.formValidate.path.push(row.id);\r\n this.formValidate.pid = pid;\r\n this.$refs.menusFrom.modals = true;\r\n this.$refs.menusFrom.valids = false;\r\n this.titleFrom = title;\r\n this.formValidate.auth_type = 1;\r\n this.formValidate.is_show = 0;\r\n this.formValidate.is_show_path = 0;\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n } else {\r\n this.formValidate.pid = pid;\r\n this.$refs.menusFrom.modals = true;\r\n this.$refs.menusFrom.valids = false;\r\n this.titleFrom = title;\r\n this.formValidate.auth_type = 1;\r\n this.formValidate.is_show = 0;\r\n this.formValidate.is_show_path = 0;\r\n }\r\n // this.formValidate.pid = row.id.toString();\r\n // this.$refs.menusFrom.modals = true;\r\n // this.$refs.menusFrom.valids = false;\r\n // this.titleFrom = title;\r\n // this.formValidate.auth_type = 1;\r\n // this.formValidate.is_show = '0';\r\n },\r\n // 删除\r\n del(row, tit) {\r\n let delfromData = {\r\n title: tit,\r\n url: `/setting/menus/${row.id}`,\r\n method: 'DELETE',\r\n ids: '',\r\n };\r\n\r\n this.$modalSure(delfromData)\r\n .then((res) => {\r\n this.$message.success(res.msg);\r\n this.getData();\r\n this.getMenusUnique();\r\n // this.$store.dispatch('menus/getMenusNavList');\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n // 规则详情\r\n menusDetails(id) {\r\n menusDetailsApi(id)\r\n .then(async (res) => {\r\n this.formValidate = res.data;\r\n this.$refs.menusFrom.modals = true;\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n // 编辑\r\n edit(row, title, index) {\r\n this.openId = row.id;\r\n this.formValidate = {};\r\n this.menusDetails(row.id);\r\n this.titleFrom = title;\r\n this.$refs.menusFrom.valids = false;\r\n this.$refs.menusFrom.getAddFrom(row.id);\r\n },\r\n // 添加\r\n menusAdd(title) {\r\n this.formValidate = {};\r\n this.$refs.menusFrom.modals = true;\r\n this.$refs.menusFrom.valids = false;\r\n // this.formValidate = Object.assign(this.$data, this.$options.formValidate());\r\n this.titleFrom = title;\r\n this.formValidate.auth_type = 1;\r\n this.formValidate.is_show = 0;\r\n this.formValidate.is_show_path = 0;\r\n },\r\n // 新增页面表单\r\n // getAddFrom () {\r\n // this.spinShow = true;\r\n // addMenus(this.roleData).then(async res => {\r\n // this.FromData = res.data;\r\n // this.$refs.menusFrom.modals = true;\r\n // this.spinShow = false;\r\n // }).catch(res => {\r\n // this.spinShow = false;\r\n // this.$message.error(res.msg);\r\n // })\r\n // },\r\n // 列表\r\n getData() {\r\n this.loading = true;\r\n getTable(this.roleData)\r\n .then(async (res) => {\r\n this.tableData = res.data;\r\n this.loading = false;\r\n })\r\n .catch((res) => {\r\n this.loading = false;\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n changeMenu(data) {\r\n this.changeData(this.tableData, data);\r\n this.getMenusUnique();\r\n },\r\n changeData(arr, data) {\r\n let arrKey = Object.keys(data);\r\n arr.map((e) => {\r\n if (e.id == this.openId) {\r\n arrKey.map((el) => {\r\n e[el] = data[el];\r\n });\r\n } else if (e.children) {\r\n this.changeData(e.children, data);\r\n }\r\n });\r\n },\r\n getMenusUnique() {\r\n getMenusUnique().then((res) => {\r\n let data = res.data;\r\n this.$store.commit('userInfo/uniqueAuth', data.uniqueAuth);\r\n this.$store.commit('menus/getmenusNav', data.menus);\r\n this.$store.dispatch('routesList/setRoutesList', data.menus);\r\n let arr = formatFlatteningRoutes(this.$router.options.routes);\r\n this.formatTwoStageRoutes(arr);\r\n let routes = formatFlatteningRoutes(data.menus);\r\n this.$store.commit('menus/setOneLvRoute', routes);\r\n this.bus.$emit('routesListChange');\r\n });\r\n },\r\n formatTwoStageRoutes(arr) {\r\n if (arr.length <= 0) return false;\r\n const newArr = [];\r\n const cacheList = [];\r\n arr.forEach((v) => {\r\n if (v && v.meta && v.meta.keepAlive) {\r\n newArr.push({ ...v });\r\n cacheList.push(v.name);\r\n this.$store.dispatch('keepAliveNames/setCacheKeepAlive', cacheList);\r\n }\r\n });\r\n return newArr;\r\n },\r\n // 关闭按钮\r\n cancel() {\r\n this.$emit('onCancel');\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.vxeTable {\r\n > .vxe-table--header-wrapper {\r\n background: #fff !important;\r\n }\r\n\r\n .icon {\r\n font-size: 20px;\r\n }\r\n}\r\n::v-deep .vxe-table--render-default .vxe-table--border-line {\r\n z-index: 2 !important;\r\n}\r\n.rule {\r\n display: flex;\r\n flex-wrap: wrap;\r\n overflow-y: scroll;\r\n height: max-content;\r\n max-height: 600px;\r\n flex: 1;\r\n}\r\n.tree::-webkit-scrollbar {\r\n width: 2px;\r\n background-color: #f5f5f5;\r\n}\r\n/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/\r\n.rule::-webkit-scrollbar {\r\n width: 10px;\r\n height: 10px;\r\n background-color: #f5f5f5;\r\n}\r\n\r\n/*定义滚动条轨道 内阴影+圆角*/\r\n.rule::-webkit-scrollbar-track {\r\n border-radius: 4px;\r\n background-color: #f5f5f5;\r\n}\r\n\r\n/*定义滑块 内阴影+圆角*/\r\n.rule::-webkit-scrollbar-thumb {\r\n border-radius: 4px;\r\n background-color: #ccc;\r\n}\r\n\r\n.rule-list {\r\n background-color: #f2f2f2;\r\n width: 48.5%;\r\n height: max-content;\r\n margin: 5px;\r\n border-radius: 3px;\r\n padding: 10px;\r\n color: #333;\r\n cursor: pointer;\r\n transition: all 0.1s;\r\n}\r\n\r\n.rule-list:hover {\r\n background-color: #badbfb;\r\n}\r\n\r\n.rule-list div {\r\n white-space: nowrap;\r\n}\r\n\r\n.select-rule {\r\n background-color: #badbfb;\r\n}\r\n.route-list {\r\n display: flex;\r\n margin-top: 10px;\r\n\r\n .tree {\r\n width: 200px;\r\n overflow-y: scroll;\r\n max-height: 600px;\r\n ::v-deep .el-tree-node__children .el-tree-node .el-tree-node__content {\r\n padding-left: 14px !important;\r\n }\r\n }\r\n}\r\n</style>\r\n"]}]}
|
