| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\system\\systemMenus\\index.vue?vue&type=style&index=0&id=0489b0ec&scoped=true&lang=scss","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\system\\systemMenus\\index.vue","mtime":1761614939078},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoudnhlVGFibGUgew0KICA+IC52eGUtdGFibGUtLWhlYWRlci13cmFwcGVyIHsNCiAgICBiYWNrZ3JvdW5kOiAjZmZmICFpbXBvcnRhbnQ7DQogIH0NCiAgLmljb24gew0KICAgIGZvbnQtc2l6ZTogMjBweDsNCiAgfQ0KfQ0KDQoucnVsZSB7DQogIGRpc3BsYXk6IGZsZXg7DQogIGZsZXgtd3JhcDogd3JhcDsNCiAgb3ZlcmZsb3cteTogc2Nyb2xsOw0KICBoZWlnaHQ6IG1heC1jb250ZW50Ow0KICBtYXgtaGVpZ2h0OiA2MDBweDsNCiAgZmxleDogMTsNCn0NCi50cmVlOjotd2Via2l0LXNjcm9sbGJhciB7DQogIHdpZHRoOiAycHg7DQogIGJhY2tncm91bmQtY29sb3I6ICNmNWY1ZjU7DQp9DQovKuWumuS5iea7muWKqOadoemrmOWuveWPiuiDjOaZryDpq5jlrr3liIbliKvlr7nlupTmqKrnq5bmu5rliqjmnaHnmoTlsLrlr7gqLw0KLnJ1bGU6Oi13ZWJraXQtc2Nyb2xsYmFyIHsNCiAgd2lkdGg6IDEwcHg7DQogIGhlaWdodDogMTBweDsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2Y1ZjVmNTsNCn0NCg0KLyrlrprkuYnmu5rliqjmnaHovajpgZMg5YaF6Zi05b2xK+WchuinkiovDQoucnVsZTo6LXdlYmtpdC1zY3JvbGxiYXItdHJhY2sgew0KICBib3JkZXItcmFkaXVzOiA0cHg7DQogIGJhY2tncm91bmQtY29sb3I6ICNmNWY1ZjU7DQp9DQoNCi8q5a6a5LmJ5ruR5Z2XIOWGhemYtOW9sSvlnIbop5IqLw0KLnJ1bGU6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHsNCiAgYm9yZGVyLXJhZGl1czogNHB4Ow0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjY2NjOw0KfQ0KDQoucnVsZS1saXN0IHsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2YyZjJmMjsNCiAgd2lkdGg6IDQ4LjUlOw0KICBoZWlnaHQ6IG1heC1jb250ZW50Ow0KICBtYXJnaW46IDVweDsNCiAgYm9yZGVyLXJhZGl1czogM3B4Ow0KICBwYWRkaW5nOiAxMHB4Ow0KICBjb2xvcjogIzMzMzsNCiAgY3Vyc29yOiBwb2ludGVyOw0KICB0cmFuc2l0aW9uOiBhbGwgMC4xczsNCn0NCg0KLnJ1bGUtbGlzdDpob3ZlciB7DQogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXByZXYtYmctbWVudS1ob3Zlci1iYS1jb2xvcik7DQp9DQoNCi5ydWxlLWxpc3QgZGl2IHsNCiAgd2hpdGUtc3BhY2U6IG5vd3JhcDsNCn0NCg0KLnNlbGVjdC1ydWxlIHsNCiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tcHJldi1iZy1tZW51LWhvdmVyLWJhLWNvbG9yKTsNCn0NCi5yb3V0ZS1saXN0IHsNCiAgZGlzcGxheTogZmxleDsNCiAgbWFyZ2luLXRvcDogMTBweDsNCg0KICAudHJlZSB7DQogICAgd2lkdGg6IDIwMHB4Ow0KICAgIG92ZXJmbG93LXk6IHNjcm9sbDsNCiAgICBtYXgtaGVpZ2h0OiA2MDBweDsNCiAgICA6OnYtZGVlcCAuZWwtdHJlZS1ub2RlX19jaGlsZHJlbiAuZWwtdHJlZS1ub2RlIC5lbC10cmVlLW5vZGVfX2NvbnRlbnQgew0KICAgICAgcGFkZGluZy1sZWZ0OiAxNHB4ICFpbXBvcnRhbnQ7DQogICAgfQ0KICB9DQp9DQouZWwtZHJvcGRvd24tbGluayB7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgY29sb3I6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSk7DQogIGZvbnQtc2l6ZTogMTJweDsNCiAgbWFyZ2luLWxlZnQ6IDZweDsNCn0NCi5lbC1pY29uLWFycm93LWRvd24gew0KICBmb250LXNpemU6IDEycHg7DQp9DQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AA8eA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/pages/system/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=\"规则状态：\">\r\n <el-select\r\n v-model=\"roleData.is_show\"\r\n placeholder=\"请选择\"\r\n clearable\r\n @change=\"getData\"\r\n class=\"form_content_width\"\r\n >\r\n <el-option value=\"1\" label=\"显示\"></el-option>\r\n <el-option value=\"0\" label=\"不显示\"></el-option>\r\n </el-select>\r\n </el-form-item>\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-form>\r\n </div>\r\n </el-card>\r\n <el-card :bordered=\"false\" shadow=\"never\" class=\"ivu-mt\">\r\n <el-button type=\"primary\" v-db-click @click=\"menusAdd('添加规则')\">添加规则 </el-button>\r\n <vxe-table\r\n :border=\"false\"\r\n class=\"vxeTable mt14\"\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=\"unique_auth\" title=\"前端权限\" min-width=\"200\"></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\">接口：[{{ row.methods }}]{{ row.api_url }}</span>\r\n </template>\r\n </vxe-table-column>\r\n <vxe-table-column field=\"flag\" title=\"规则状态\" min-width=\"120\">\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\"\r\n :value=\"row.is_show\"\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=\"mark\" title=\"备注\" min-width=\"120\"></vxe-table-column>\r\n <vxe-table-column field=\"date\" title=\"操作\" width=\"230\" fixed=\"right\">\r\n <template v-slot=\"{ row }\">\r\n <span>\r\n <a v-db-click @click=\"addRoute(row)\" v-if=\"row.auth_type === 1 || row.auth_type === 3\">选择权限</a>\r\n <el-divider direction=\"vertical\" v-if=\"row.auth_type === 1 || row.auth_type === 3\" />\r\n <a v-db-click @click=\"addE(row, '添加子菜单')\" v-if=\"row.auth_type === 1 || row.auth_type === 3\"\r\n >添加下级</a\r\n >\r\n <!-- <a v-db-click @click=\"addE(row, '添加规则')\" v-else>添加规则</a> -->\r\n </span>\r\n <el-divider direction=\"vertical\" v-if=\"row.auth_type === 1 || row.auth_type === 3\"></el-divider>\r\n <a v-db-click @click=\"edit(row, '编辑')\">编辑</a>\r\n <el-divider direction=\"vertical\"></el-divider>\r\n <a v-db-click @click=\"del(row, '删除规则')\">删除</a>\r\n </template>\r\n </vxe-table-column>\r\n </vxe-table>\r\n </el-card>\r\n <menus-from\r\n :formVal=\"formValidate\"\r\n :titleFrom=\"titleFrom\"\r\n @getList=\"getList\"\r\n @changeMenu=\"getMenusUnique\"\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 <template slot=\"title\">\r\n 1.接口可多选，可重复添加；<br />2.添加路由按照路由规则进行添加，即可在开发工具->接口管理里面点击同步；<br />3.同步完成即可在此选择对应的接口；\r\n </template>\r\n </el-alert>\r\n <el-input\r\n class=\"mr10 mt10 form_content_width\"\r\n v-model=\"searchRule\"\r\n placeholder=\"输入关键词搜索\"\r\n clearable\r\n ref=\"search\"\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 <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: '',\r\n keyword: '',\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 auth_type: '',\r\n menu_name: '',\r\n path: '',\r\n api_url: '',\r\n menu_path: '',\r\n methods: '',\r\n unique_auth: '',\r\n mark: '',\r\n sort: '',\r\n is_show: 0,\r\n },\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 };\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 this.ruleModal = false;\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: row.is_show,\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 is_show: 0,\r\n };\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.valids = false;\r\n this.titleFrom = title;\r\n this.formValidate.auth_type = 1;\r\n this.formValidate.is_show_path = 0;\r\n this.$refs.menusFrom.getAddFrom();\r\n this.$refs.menusFrom.modals = true;\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_path = 0;\r\n }\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.modals = true;\r\n\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.modals = true;\r\n this.$refs.menusFrom.modals = true;\r\n this.$refs.menusFrom.valids = false;\r\n this.$refs.menusFrom.getAddFrom();\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 this.roleData.is_show = this.roleData.is_show || '';\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 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 .icon {\r\n font-size: 20px;\r\n }\r\n}\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: var(--prev-bg-menu-hover-ba-color);\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: var(--prev-bg-menu-hover-ba-color);\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.el-dropdown-link {\r\n cursor: pointer;\r\n color: var(--prev-color-primary);\r\n font-size: 12px;\r\n margin-left: 6px;\r\n}\r\n.el-icon-arrow-down {\r\n font-size: 12px;\r\n}\r\n</style>\r\n"]}]}
|
