| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\setting\\systemRole\\index.vue?vue&type=style&index=0&id=24a55c6b&scoped=true&lang=scss","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\setting\\systemRole\\index.vue","mtime":1761614939062},{"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:DQoudHJlZXMtY29hZGQgew0KICB3aWR0aDogMTAwJTsNCiAgaGVpZ2h0OiAzODVweDsNCiAgZGlzcGxheTogZmxleDsNCiAgLnNjb2xsaGlkZSB7DQogICAgcG9zaXRpb246IHJlbGF0aXZlOw0KICAgIHdpZHRoOiAxMDAlOw0KICAgIGhlaWdodDogMTAwJTsNCiAgICBtYXJnaW4tdG9wOiA0cHg7DQogICAgb3ZlcmZsb3cteTogc2Nyb2xsOw0KICB9DQogIC5pY29ubGlzdC1idG4gew0KICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7DQogICAgY3Vyc29yOiBwb2ludGVyOw0KICAgIGNvbG9yOiB2YXIoLS1wcmV2LWNvbG9yLXByaW1hcnkpOw0KICB9DQp9DQovLyBtYXJnaW4tbGVmdDogMThweDsNCi5zY29sbGhpZGU6Oi13ZWJraXQtc2Nyb2xsYmFyIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCg=="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AA4eA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/pages/setting/systemRole","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=\"formValidate\"\r\n :model=\"formValidate\"\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=\"状态：\" label-for=\"status\">\r\n <el-select\r\n v-model=\"formValidate.status\"\r\n placeholder=\"请选择\"\r\n @change=\"userSearchs\"\r\n clearable\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=\"身份昵称：\" label-for=\"role_name\">\r\n <el-input\r\n clearable\r\n placeholder=\"请输入身份昵称\"\r\n v-model=\"formValidate.role_name\"\r\n class=\"form_content_width\"\r\n />\r\n </el-form-item>\r\n <el-form-item>\r\n <el-button type=\"primary\" v-db-click @click=\"userSearchs\">查询</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\" v-loading=\"spinShow\">\r\n <el-button v-auth=\"['setting-system_role-add']\" type=\"primary\" v-db-click @click=\"add('添加')\"\r\n >添加身份</el-button\r\n >\r\n <el-table\r\n :data=\"tableList\"\r\n ref=\"table\"\r\n class=\"mt14\"\r\n v-loading=\"loading\"\r\n highlight-current-row\r\n no-userFrom-text=\"暂无数据\"\r\n no-filtered-userFrom-text=\"暂无筛选结果\"\r\n >\r\n <el-table-column label=\"ID\" min-width=\"80\">\r\n <template slot-scope=\"scope\">\r\n <span>{{ scope.row.id }}</span>\r\n </template>\r\n </el-table-column>\r\n <el-table-column label=\"身份昵称\" min-width=\"130\">\r\n <template slot-scope=\"scope\">\r\n <span>{{ scope.row.role_name }}</span>\r\n </template>\r\n </el-table-column>\r\n <!-- <el-table-column label=\"权限\" min-width=\"1000\">\r\n <template slot-scope=\"scope\">\r\n <span class=\"line1\">{{ scope.row.rules }}</span>\r\n </template>\r\n </el-table-column> -->\r\n <el-table-column label=\"状态\" min-width=\"120\">\r\n <template slot-scope=\"scope\">\r\n <el-switch\r\n class=\"defineSwitch\"\r\n :active-value=\"1\"\r\n :inactive-value=\"0\"\r\n v-model=\"scope.row.status\"\r\n :value=\"scope.row.status\"\r\n @change=\"onchangeIsShow(scope.row)\"\r\n size=\"large\"\r\n active-text=\"显示\"\r\n inactive-text=\"隐藏\"\r\n >\r\n </el-switch>\r\n </template>\r\n </el-table-column>\r\n <el-table-column label=\"操作\" fixed=\"right\" width=\"120\">\r\n <template slot-scope=\"scope\">\r\n <a v-db-click @click=\"edit(scope.row, '编辑')\">编辑</a>\r\n <el-divider direction=\"vertical\"></el-divider>\r\n <a v-db-click @click=\"del(scope.row, '删除', scope.$index)\">删除</a>\r\n </template>\r\n </el-table-column>\r\n </el-table>\r\n <div class=\"acea-row row-right page\">\r\n <pagination\r\n v-if=\"total\"\r\n :total=\"total\"\r\n :page.sync=\"formValidate.page\"\r\n :limit.sync=\"formValidate.limit\"\r\n @pagination=\"getList\"\r\n />\r\n </div>\r\n </el-card>\r\n <!-- 新增编辑-->\r\n <el-dialog\r\n :visible.sync=\"modals\"\r\n :title=\"`${modelTit}身份`\"\r\n :close-on-click-modal=\"false\"\r\n :show-close=\"true\"\r\n width=\"540px\"\r\n @closed=\"closed\"\r\n >\r\n <el-form\r\n ref=\"formInline\"\r\n :model=\"formInline\"\r\n :rules=\"ruleValidate\"\r\n label-width=\"100px\"\r\n :label-position=\"labelPosition2\"\r\n @submit.native.prevent\r\n >\r\n <el-form-item label=\"身份名称：\" label-for=\"role_name\" prop=\"role_name\">\r\n <el-input placeholder=\"请输入身份昵称\" v-model=\"formInline.role_name\" />\r\n </el-form-item>\r\n <el-form-item label=\"是否开启：\" prop=\"status\">\r\n <el-radio-group v-model=\"formInline.status\">\r\n <el-radio :label=\"1\">开启</el-radio>\r\n <el-radio :label=\"0\">关闭</el-radio>\r\n </el-radio-group>\r\n </el-form-item>\r\n <el-form-item label=\"权限：\">\r\n <div class=\"trees-coadd\">\r\n <div class=\"scollhide\">\r\n <div class=\"iconlist\">\r\n <el-tree\r\n :data=\"menusList\"\r\n node-key=\"id\"\r\n check-strictly\r\n show-checkbox\r\n highlight-current\r\n ref=\"tree\"\r\n :default-checked-keys=\"selectIds\"\r\n :props=\"defaultProps\"\r\n @check=\"clickDeal\"\r\n :default-expand-all=\"defaultExpandAll\"\r\n ></el-tree>\r\n </div>\r\n </div>\r\n <span class=\"iconlist-btn\" @click=\"changeExpandAll\">{{ defaultExpandAll ? '折叠' : '展开' }}</span>\r\n </div>\r\n </el-form-item>\r\n </el-form>\r\n <span slot=\"footer\" class=\"dialog-footer\">\r\n <el-button v-db-click @click=\"onCancel\">取 消</el-button>\r\n <el-button type=\"primary\" v-db-click @click=\"handleSubmit('formInline')\">提 交</el-button>\r\n </span>\r\n </el-dialog>\r\n </div>\r\n</template>\r\n<script>\r\nimport { mapState } from 'vuex';\r\nimport { roleListApi, roleSetStatusApi, menusListApi, roleCreateApi, roleInfoApi } from '@/api/setting';\r\nexport default {\r\n name: 'systemrRole',\r\n data() {\r\n return {\r\n spinShow: false,\r\n modals: false,\r\n total: 0,\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 loading: false,\r\n defaultExpandAll: false,\r\n formValidate: {\r\n status: '',\r\n role_name: '',\r\n page: 1,\r\n limit: 20,\r\n },\r\n tableList: [],\r\n formInline: {\r\n role_name: '',\r\n status: 0,\r\n checked_menus: [],\r\n id: 0,\r\n },\r\n menusList: [],\r\n selectIds: [],\r\n modelTit: '',\r\n ruleValidate: {\r\n role_name: [{ required: true, message: '请输入身份昵称', trigger: 'blur' }],\r\n status: [{ required: true, type: 'number', message: '请选择是否开启', trigger: 'change' }],\r\n // checked_menus: [\r\n // { required: true, validator: validateStatus, trigger: 'change' }\r\n // ]\r\n },\r\n defaultProps: {\r\n children: 'children',\r\n label: 'title',\r\n },\r\n };\r\n },\r\n computed: {\r\n ...mapState('media', ['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 labelPosition2() {\r\n return this.isMobile ? 'top' : 'right';\r\n },\r\n },\r\n created() {\r\n this.getList();\r\n },\r\n methods: {\r\n changeExpandAll() {\r\n // 控制按钮点击之后失焦\r\n if (this.defaultExpandAll) {\r\n this.defaultExpandAll = false;\r\n for (let key in this.$refs.tree.store.nodesMap) {\r\n this.$refs.tree.store.nodesMap[key].expanded = false;\r\n }\r\n } else {\r\n this.defaultExpandAll = true;\r\n for (let key in this.$refs.tree.store.nodesMap) {\r\n this.$refs.tree.store.nodesMap[key].expanded = true;\r\n }\r\n }\r\n },\r\n closed() {\r\n this.formInline = {\r\n role_name: '',\r\n status: 0,\r\n checked_menus: [],\r\n id: 0,\r\n };\r\n this.selectIds = [];\r\n },\r\n // 添加\r\n add(name) {\r\n this.formInline.id = 0;\r\n this.modelTit = name;\r\n this.modals = true;\r\n this.getmenusList();\r\n },\r\n // 删除\r\n del(row, tit, num) {\r\n let delfromData = {\r\n title: tit,\r\n num: num,\r\n url: `setting/role/${row.id}`,\r\n method: 'DELETE',\r\n ids: '',\r\n };\r\n this.$modalSure(delfromData)\r\n .then((res) => {\r\n this.$message.success(res.msg);\r\n this.tableList.splice(num, 1);\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n // 修改是否显示\r\n onchangeIsShow(row) {\r\n let data = {\r\n id: row.id,\r\n status: row.status,\r\n };\r\n roleSetStatusApi(data)\r\n .then(async (res) => {\r\n this.$message.success(res.msg);\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.loading = true;\r\n this.formValidate.status = this.formValidate.status || '';\r\n roleListApi(this.formValidate)\r\n .then(async (res) => {\r\n let data = res.data;\r\n this.tableList = data.list;\r\n this.total = res.data.count;\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 // 表格搜索\r\n userSearchs() {\r\n this.formValidate.page = 1;\r\n this.getList();\r\n },\r\n // 编辑\r\n edit(row, name) {\r\n this.modelTit = name;\r\n this.formInline.id = row.id;\r\n this.modals = true;\r\n this.rows = row;\r\n this.getIofo(row);\r\n },\r\n // 菜单列表\r\n getmenusList() {\r\n this.spinShow = true;\r\n menusListApi()\r\n .then(async (res) => {\r\n let data = res.data;\r\n this.menusList = data.menus;\r\n this.menusList.map((item, index) => {\r\n if (item.title === '主页') {\r\n // item.checked = true;\r\n // item.disableCheckbox = true;\r\n if (item.children.length) {\r\n item.children.map((v) => {\r\n // v.checked = true;\r\n // v.disableCheckbox = true;\r\n });\r\n }\r\n }\r\n item.expand = false;\r\n });\r\n this.spinShow = false;\r\n })\r\n .catch((res) => {\r\n this.spinShow = false;\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n // 详情\r\n getIofo(row) {\r\n this.spinShow = true;\r\n roleInfoApi(row.id)\r\n .then(async (res) => {\r\n let data = res.data;\r\n this.formInline = data.role || this.formInline;\r\n this.formInline.checked_menus = this.formInline.rules;\r\n this.$nextTick((e) => {\r\n this.selectIds = this.formInline.rules.split(',');\r\n this.tidyRes(data.menus);\r\n // this.$refs.tree.setCheckedKeys(Array(arr));\r\n });\r\n this.spinShow = false;\r\n })\r\n .catch((res) => {\r\n this.spinShow = false;\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n forChildrenChecked(arr, status, pid) {\r\n if (arr.length) {\r\n let len = arr.length;\r\n for (var j = 0; j < len; j++) {\r\n var childNode = this.$refs.tree.getNode(arr[j].id).data;\r\n if (status) {\r\n this.$refs.tree.setChecked(childNode.id, true);\r\n childNode.checked = true;\r\n }\r\n if (!status) {\r\n this.$refs.tree.setChecked(childNode.id, false);\r\n childNode.checked = false;\r\n }\r\n if (childNode.children.length) {\r\n this.forChildrenChecked(childNode.children, status);\r\n }\r\n }\r\n }\r\n },\r\n\r\n clickDeal(currentObj, treeStatus, ccc) {\r\n // 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。\r\n let selected = treeStatus.checkedKeys.indexOf(currentObj.id); // -1未选中\r\n // 选中\r\n if (selected !== -1) {\r\n // 子节点只要被选中父节点就被选中\r\n this.selectedParent(currentObj);\r\n // 统一处理子节点为相同的勾选状态\r\n this.uniteChildSame(currentObj, true);\r\n } else {\r\n // 未选中 处理子节点全部未选中\r\n if (currentObj.children.length !== 0) {\r\n this.uniteChildSame(currentObj, false);\r\n }\r\n let selParent = false;\r\n let parentNode = currentObj.pid ? this.$refs.tree.getNode(currentObj.pid).data : undefined;\r\n if (parentNode && parentNode.children.length) {\r\n for (let i = 0; i < parentNode.children.length; i++) {\r\n if (treeStatus.checkedKeys.includes(parentNode.children[i].id)) {\r\n selParent = true;\r\n }\r\n }\r\n }\r\n if (!selParent && currentObj.pid) this.$refs.tree.setChecked(currentObj.pid, false);\r\n }\r\n },\r\n // 统一处理子节点为相同的勾选状态\r\n uniteChildSame(treeList, isSelected) {\r\n this.$refs.tree.setChecked(treeList.id, isSelected);\r\n for (let i = 0; i < treeList.children.length; i++) {\r\n this.uniteChildSame(treeList.children[i], isSelected);\r\n }\r\n },\r\n // 统一处理父节点为选中\r\n selectedParent(currentObj) {\r\n let currentNode = this.$refs.tree.getNode(currentObj);\r\n if (currentNode.parent.key !== undefined) {\r\n this.$refs.tree.setChecked(currentNode.parent, true);\r\n this.selectedParent(currentNode.parent);\r\n }\r\n },\r\n tidyRes(menus) {\r\n let data = [];\r\n menus.map((menu) => {\r\n if (menu.title === '主页') {\r\n menu.checked = true;\r\n // menu.disabled = true;\r\n if (menu.children.length) {\r\n menu.children.map((v) => {\r\n v.checked = true;\r\n });\r\n }\r\n data.push(menu);\r\n } else {\r\n data.push(this.initMenu(menu));\r\n }\r\n });\r\n this.$set(this, 'menusList', data);\r\n },\r\n initMenu(menu) {\r\n let data = {},\r\n checkMenus = ',' + this.formInline.checked_menus + ',';\r\n data.title = menu.title;\r\n data.id = menu.id;\r\n data.pid = menu.pid;\r\n data.children = menu.children;\r\n data.checked = menu.checked;\r\n\r\n if (menu.children && menu.children.length > 0) {\r\n data.children = [];\r\n menu.children.map((child) => {\r\n data.children.push(this.initMenu(child));\r\n });\r\n } else {\r\n data.checked = checkMenus.indexOf(String(',' + data.id + ',')) !== -1;\r\n data.expand = !data.checked;\r\n }\r\n return data;\r\n },\r\n // 提交\r\n handleSubmit(name) {\r\n this.$refs[name].validate((valid) => {\r\n if (valid) {\r\n this.formInline.checked_menus = [\r\n ...this.$refs.tree.getCheckedKeys(),\r\n ...this.$refs.tree.getHalfCheckedKeys(),\r\n ];\r\n if (this.formInline.checked_menus.length === 0) return this.$message.warning('请至少选择一个权限');\r\n roleCreateApi(this.formInline)\r\n .then(async (res) => {\r\n this.$message.success(res.msg);\r\n this.modals = false;\r\n this.getList();\r\n this.$refs[name].resetFields();\r\n this.formInline.checked_menus = [];\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n } else {\r\n return false;\r\n }\r\n });\r\n },\r\n onCancel() {\r\n this.$refs['formInline'].resetFields();\r\n this.formInline.checked_menus = [];\r\n this.selectIds = [];\r\n this.modals = false;\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.trees-coadd {\r\n width: 100%;\r\n height: 385px;\r\n display: flex;\r\n .scollhide {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n margin-top: 4px;\r\n overflow-y: scroll;\r\n }\r\n .iconlist-btn {\r\n white-space: nowrap;\r\n cursor: pointer;\r\n color: var(--prev-color-primary);\r\n }\r\n}\r\n// margin-left: 18px;\r\n.scollhide::-webkit-scrollbar {\r\n display: none;\r\n}\r\n</style>\r\n"]}]}
|
