| 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\\components\\menusFrom.vue?vue&type=style&index=0&id=0fee3832&scoped=true&lang=css","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\setting\\systemMenus\\components\\menusFrom.vue","mtime":1761185180187},{"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\\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:DQoudHJlZXMtY29hZGQgew0KICB3aWR0aDogMTAwJTsNCiAgaGVpZ2h0OiA1MDBweDsNCiAgYm9yZGVyLXJhZGl1czogNHB4Ow0KICBvdmVyZmxvdzogaGlkZGVuOw0KfQ0KDQouc2NvbGxoaWRlIHsNCiAgd2lkdGg6IDEwMCU7DQogIGhlaWdodDogMTAwJTsNCiAgb3ZlcmZsb3c6IGF1dG87DQogIG1hcmdpbi1sZWZ0OiAxOHB4Ow0KICBwYWRkaW5nOiAxMHB4IDAgMTBweCAwOw0KICBib3gtc2l6aW5nOiBib3JkZXItYm94Ow0KfQ0KDQouY29udGVudCB7DQogIGZvbnQtc2l6ZTogMTJweDsNCn0NCg0KLnRpbWUgew0KICBmb250LXNpemU6IDEycHg7DQogIGNvbG9yOiAjMmQ4Y2YwOw0KfQ0KDQouaWNvbnMtaXRlbSB7DQogIGZsb2F0OiBsZWZ0Ow0KICBtYXJnaW46IDZweCA2cHggNnB4IDA7DQogIHdpZHRoOiA1M3B4Ow0KICB0ZXh0LWFsaWduOiBjZW50ZXI7DQogIGxpc3Qtc3R5bGU6IG5vbmU7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgaGVpZ2h0OiA1MHB4Ow0KICBjb2xvcjogIzVjNmI3NzsNCiAgdHJhbnNpdGlvbjogYWxsIDAuMnMgZWFzZTsNCiAgcG9zaXRpb246IHJlbGF0aXZlOw0KICBwYWRkaW5nLXRvcDogMTBweDsNCn0NCg0KLmljb25zLWl0ZW0gLmYtcy0yNCB7DQogIGZvbnQtc2l6ZTogMjRweDsNCn0NCg0KLnNlYXJjaC1ydWxlIHsNCiAgZGlzcGxheTogZmxleDsNCiAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgcGFkZGluZzogMTBweDsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2YyZjJmMjsNCn0NCg0KLnJ1bGUgew0KICBkaXNwbGF5OiBmbGV4Ow0KICBmbGV4LXdyYXA6IHdyYXA7DQogIG1heC1oZWlnaHQ6IDcwMHB4Ow0KICBvdmVyZmxvdzogc2Nyb2xsOw0KfQ0KDQovKuWumuS5iea7muWKqOadoemrmOWuveWPiuiDjOaZryDpq5jlrr3liIbliKvlr7nlupTmqKrnq5bmu5rliqjmnaHnmoTlsLrlr7gqLw0KLnJ1bGU6Oi13ZWJraXQtc2Nyb2xsYmFyIHsNCiAgd2lkdGg6IDEwcHg7DQogIGhlaWdodDogMTBweDsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2Y1ZjVmNTsNCn0NCg0KLyrlrprkuYnmu5rliqjmnaHovajpgZMg5YaF6Zi05b2xK+WchuinkiovDQoucnVsZTo6LXdlYmtpdC1zY3JvbGxiYXItdHJhY2sgew0KICBib3JkZXItcmFkaXVzOiA0cHg7DQogIGJhY2tncm91bmQtY29sb3I6ICNmNWY1ZjU7DQp9DQoNCi8q5a6a5LmJ5ruR5Z2XIOWGhemYtOW9sSvlnIbop5IqLw0KLnJ1bGU6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHsNCiAgYm9yZGVyLXJhZGl1czogNHB4Ow0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTU1Ow0KfQ0KDQoucnVsZS1saXN0IHsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2Y4ZjVmNTsNCiAgd2lkdGg6IDMyJTsNCiAgbWFyZ2luOiA1cHg7DQogIGJvcmRlci1yYWRpdXM6IDNweDsNCiAgcGFkZGluZzogMTBweDsNCiAgY29sb3I6ICMzMzM7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgdHJhbnNpdGlvbjogYWxsIDAuMXM7DQp9DQoNCi5ydWxlLWxpc3Q6aG92ZXIgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjYzVkMWRkOw0KfQ0KDQoucnVsZS1saXN0IGRpdiB7DQogIHdoaXRlLXNwYWNlOiBub3dyYXA7DQp9DQoNCi5zZWxlY3QtcnVsZSB7DQogIGJhY2tncm91bmQtY29sb3I6ICNjNWQxZGQ7DQp9DQoNCi5hZGQgew0KICBkaXNwbGF5OiBmbGV4Ow0KICBhbGlnbi1pdGVtczogY2VudGVyOw0KfQ0KDQouZGYgew0KICBkaXNwbGF5OiBmbGV4Ow0KICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsNCn0NCg=="},{"version":3,"sources":["menusFrom.vue"],"names":[],"mappings":";AAiXA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;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;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"menusFrom.vue","sourceRoot":"src/pages/setting/systemMenus/components","sourcesContent":["<template>\r\n <div>\r\n <el-dialog :visible.sync=\"modals\" width=\"540px\" :title=\"titleFrom\" :close-on-click-modal=\"false\" @closed=\"visible\">\r\n <el-form ref=\"formValidate\" :model=\"formValidate\" label-width=\"80px\" @submit.native.prevent>\r\n <el-row :gutter=\"24\">\r\n <el-col v-bind=\"grid\">\r\n <el-form-item :label=\"!authType ? '接口名称：' : '按钮名称：'\" prop=\"menu_name\">\r\n <div class=\"add\">\r\n <el-input\r\n v-model=\"formValidate.menu_name\"\r\n :placeholder=\"!authType ? '请输入接口名称' : '请输入按钮名称'\"\r\n >\r\n </el-input>\r\n </div>\r\n </el-form-item>\r\n </el-col>\r\n <el-col v-bind=\"grid\">\r\n <el-form-item label=\"父级分类：\">\r\n <el-cascader\r\n :options=\"menuList\"\r\n change-on-select\r\n v-model=\"formValidate.path\"\r\n filterable\r\n style=\"width: 100%\"\r\n ></el-cascader>\r\n </el-form-item>\r\n </el-col>\r\n <el-col v-bind=\"grid\" v-if=\"authType\">\r\n <el-form-item label=\"图标：\">\r\n <el-input v-model=\"formValidate.icon\" placeholder=\"请选择图标，点击右面图标\" icon=\"ios-appstore\">\r\n <el-button slot=\"append\" icon=\"el-icon-picture-outline\" v-db-click @click=\"iconClick\"></el-button>\r\n </el-input>\r\n </el-form-item>\r\n </el-col>\r\n <el-col v-bind=\"grid\" v-if=\"authType\">\r\n <el-form-item label=\"排序：\">\r\n <el-input type=\"number\" v-model=\"formValidate.sort\" placeholder=\"请输入排序\" number></el-input>\r\n </el-form-item>\r\n </el-col>\r\n <el-col v-bind=\"grid\">\r\n <el-form-item label=\"是否显示：\">\r\n <el-radio-group v-model=\"formValidate.is_show_path\">\r\n <el-radio :label=\"item.value\" v-for=\"(item, i) in isShowPathRadio\" :key=\"i\">\r\n <span>{{ item.label }}</span>\r\n </el-radio>\r\n </el-radio-group>\r\n </el-form-item>\r\n </el-col>\r\n </el-row>\r\n </el-form>\r\n <span slot=\"footer\" class=\"dialog-footer\">\r\n <el-button v-db-click @click=\"handleReset\">取 消</el-button>\r\n <el-button type=\"primary\" v-db-click @click=\"handleSubmit('formValidate')\" :disabled=\"valids\">提 交</el-button>\r\n </span>\r\n </el-dialog>\r\n <el-dialog :visible.sync=\"modal12\" width=\"720px\" title=\"图标选择\">\r\n <el-input\r\n v-model=\"iconVal\"\r\n placeholder=\"输入关键词搜索,注意全是英文\"\r\n clearable\r\n style=\"width: 300px\"\r\n @change=\"upIcon(iconVal)\"\r\n ref=\"search\"\r\n />\r\n <div class=\"trees-coadd\">\r\n <div class=\"scollhide\">\r\n <div class=\"iconlist\">\r\n <ul class=\"list-inline\">\r\n <li class=\"icons-item\" v-for=\"(item, i) in iconVal ? searchData : list\" :key=\"i\" :title=\"item\">\r\n <i :class=\"'el-icon-' + item\" class=\"f-s-24\" v-db-click @click=\"iconChange(item)\"></i>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </el-dialog>\r\n <el-dialog :visible.sync=\"ruleModal\" width=\"1100px\" title=\"权限列表\" @closed=\"modalchange\">\r\n <div class=\"search-rule\">\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 />\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=\"rule\">\r\n <div\r\n class=\"rule-list\"\r\n v-show=\"!arrs.length || arrs.includes(index)\"\r\n :class=\"{ 'select-rule': arrs.includes(index) }\"\r\n v-for=\"(item, index) in ruleList\"\r\n :key=\"index\"\r\n v-db-click\r\n @click=\"selectRule(item)\"\r\n >\r\n <div>接口名称：{{ item.real_name }}</div>\r\n <div>请求方式：{{ item.method }}</div>\r\n <div>接口地址：{{ item.rule }}</div>\r\n </div>\r\n </div>\r\n </el-dialog>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { addMenusApi, addMenus, getRuleList } from '@/api/systemMenus';\r\nimport icon from '@/utils/icon';\r\n\r\nexport default {\r\n name: 'menusFrom',\r\n props: {\r\n formValidate: {\r\n type: Object,\r\n default: null,\r\n },\r\n titleFrom: {\r\n type: String,\r\n default: '',\r\n },\r\n },\r\n data() {\r\n return {\r\n arrs: [],\r\n searchRule: '',\r\n iconVal: '',\r\n grid: {\r\n xl: 24,\r\n lg: 24,\r\n md: 24,\r\n sm: 24,\r\n xs: 24,\r\n },\r\n modals: false,\r\n modal12: false,\r\n FromData: [],\r\n valids: false,\r\n list2: [],\r\n list: icon,\r\n authType: true,\r\n search: icon,\r\n ruleModal: false,\r\n ruleList: [],\r\n searchData: [],\r\n };\r\n },\r\n watch: {\r\n 'formValidate.header': function (n) {\r\n this.formValidate.is_header = n ? 1 : 0;\r\n },\r\n 'formValidate.auth_type': function (n) {\r\n if (n === undefined) {\r\n n = 1;\r\n }\r\n this.authType = n === 1;\r\n },\r\n 'formValidate.data': function (n) {},\r\n },\r\n computed: {\r\n /* eslint-disable */\r\n optionsList() {\r\n let a = [];\r\n this.FromData.map((item) => {\r\n if ('pid' === item.field) {\r\n a = item.options;\r\n }\r\n });\r\n return a;\r\n },\r\n headerOptionsList() {\r\n let a = [];\r\n this.FromData.map((item) => {\r\n if ('header' === item.field) {\r\n a = item.options;\r\n }\r\n });\r\n return a;\r\n },\r\n optionsListmodule() {\r\n let a = [];\r\n this.FromData.map((item) => {\r\n if ('module' === item.field) {\r\n a = item.options;\r\n }\r\n });\r\n return a;\r\n },\r\n optionsRadio() {\r\n let a = [];\r\n this.FromData.map((item) => {\r\n if ('auth_type' === item.field) {\r\n a = item.options;\r\n }\r\n });\r\n return a;\r\n },\r\n isheaderRadio() {\r\n let a = [];\r\n this.FromData.map((item) => {\r\n if ('is_header' === item.field) {\r\n a = item.options;\r\n }\r\n });\r\n return a;\r\n },\r\n isShowRadio() {\r\n let a = [];\r\n this.FromData.map((item) => {\r\n if ('is_show' === item.field) {\r\n a = item.options;\r\n }\r\n });\r\n return a;\r\n },\r\n isShowPathRadio() {\r\n let a = [];\r\n this.FromData.map((item) => {\r\n if ('is_show_path' === item.field) {\r\n a = item.options;\r\n }\r\n });\r\n return a;\r\n },\r\n menuList() {\r\n let a = [];\r\n this.FromData.map((item) => {\r\n if ('menu_list' === item.field) {\r\n a = item.props.options;\r\n }\r\n });\r\n return a;\r\n },\r\n },\r\n methods: {\r\n // 获取权限列表\r\n getRuleList() {\r\n getRuleList().then((res) => {\r\n this.ruleList = res.data;\r\n this.ruleModal = true;\r\n });\r\n },\r\n modalchange() {\r\n this.arrs = [];\r\n this.ruleModal = '';\r\n this.ruleModal = false;\r\n },\r\n changeUnique(val) {\r\n let value = this.$routeProStr + val.target.value;\r\n if (value.slice(0, 1) === '/') value = value.replace('/', '');\r\n this.formValidate.unique_auth = value.replaceAll('/', '-');\r\n },\r\n visible() {\r\n this.authType = true;\r\n },\r\n selectRule(data) {\r\n this.$emit('selectRule', data);\r\n this.$nextTick((e) => {\r\n this.ruleModal = false;\r\n });\r\n },\r\n changeRadio(n) {\r\n this.authType = n === 1 ? true : false;\r\n },\r\n // 搜索\r\n upIcon(n) {\r\n this.searchData = this.list.filter((item) => item.indexOf(this.iconVal) > -1);\r\n },\r\n // 搜索规则\r\n searchRules() {\r\n if (this.searchRule.trim()) {\r\n this.arrs = [];\r\n for (var i = 0; i < this.ruleList.length; i++) {\r\n if (this.ruleList[i].real_name.indexOf(this.searchRule) !== -1) {\r\n this.arrs.push(i);\r\n }\r\n }\r\n } else {\r\n this.arrs = [];\r\n }\r\n },\r\n init() {\r\n this.searchRule = '';\r\n this.arrs = [];\r\n },\r\n handleCreate1(val) {\r\n this.headerOptionsList.push({\r\n value: val,\r\n label: val,\r\n });\r\n },\r\n // 获取新增表单\r\n getAddFrom() {\r\n addMenus()\r\n .then(async (res) => {\r\n this.FromData = res.data.rules;\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n iconClick() {\r\n this.modal12 = true;\r\n },\r\n iconChange(n) {\r\n this.formValidate.icon = n;\r\n this.modal12 = false;\r\n },\r\n // 提交\r\n handleSubmit(name) {\r\n //判断是否选择父级分类\r\n if (this.formValidate.path) {\r\n let length = this.formValidate.path.length;\r\n this.formValidate.pid = this.formValidate.path[length - 1] || 0;\r\n }\r\n let data = {\r\n url: this.formValidate.id ? `/setting/menus/${this.formValidate.id}` : '/setting/menus',\r\n method: this.formValidate.id ? 'put' : 'post',\r\n datas: this.formValidate,\r\n };\r\n if (this.authType) {\r\n if (!this.formValidate.menu_name) {\r\n return this.$message.warning('请填写按钮名称');\r\n }\r\n if (!this.formValidate.menu_path) {\r\n return this.$message.warning('请填写路由地址');\r\n }\r\n } else {\r\n if (!this.formValidate.menu_name) {\r\n return this.$message.warning('请填写接口名称');\r\n }\r\n if (!this.formValidate.methods) {\r\n return this.$message.warning('请选择请求方式');\r\n }\r\n if (!this.formValidate.api_url) {\r\n return this.$message.warning('请选择接口地址');\r\n }\r\n }\r\n this.valids = true;\r\n addMenusApi(data)\r\n .then(async (res) => {\r\n this.$message.success(res.msg);\r\n this.modals = false;\r\n this.$emit('changeMenu', this.formValidate);\r\n this.getAddFrom();\r\n // this.$store.dispatch('menus/getMenusNavList');\r\n })\r\n .catch((res) => {\r\n this.valids = false;\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n handleReset() {\r\n this.modals = false;\r\n this.authType = true;\r\n this.$refs['formValidate'].resetFields();\r\n this.$emit('clearFrom');\r\n },\r\n },\r\n created() {\r\n this.list = this.search;\r\n this.getAddFrom();\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n.trees-coadd {\r\n width: 100%;\r\n height: 500px;\r\n border-radius: 4px;\r\n overflow: hidden;\r\n}\r\n\r\n.scollhide {\r\n width: 100%;\r\n height: 100%;\r\n overflow: auto;\r\n margin-left: 18px;\r\n padding: 10px 0 10px 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.content {\r\n font-size: 12px;\r\n}\r\n\r\n.time {\r\n font-size: 12px;\r\n color: #2d8cf0;\r\n}\r\n\r\n.icons-item {\r\n float: left;\r\n margin: 6px 6px 6px 0;\r\n width: 53px;\r\n text-align: center;\r\n list-style: none;\r\n cursor: pointer;\r\n height: 50px;\r\n color: #5c6b77;\r\n transition: all 0.2s ease;\r\n position: relative;\r\n padding-top: 10px;\r\n}\r\n\r\n.icons-item .f-s-24 {\r\n font-size: 24px;\r\n}\r\n\r\n.search-rule {\r\n display: flex;\r\n align-items: center;\r\n padding: 10px;\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.rule {\r\n display: flex;\r\n flex-wrap: wrap;\r\n max-height: 700px;\r\n overflow: scroll;\r\n}\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: #555;\r\n}\r\n\r\n.rule-list {\r\n background-color: #f8f5f5;\r\n width: 32%;\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: #c5d1dd;\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: #c5d1dd;\r\n}\r\n\r\n.add {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.df {\r\n display: flex;\r\n justify-content: center;\r\n}\r\n</style>\r\n"]}]}
|
