Files
education/frontend/node_modules/.cache/vue-loader/867cf0646441079366f470f5e79e9b77.json
T

1 line
26 KiB
JSON

{"remainingRequest":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\views\\system\\role\\index.vue?vue&type=style&index=0&id=5fc99eaf&scoped=true&lang=css","dependencies":[{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\views\\system\\role\\index.vue","mtime":1787567871666},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\css-loader\\dist\\cjs.js","mtime":1787309792478},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1787309794547},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\postcss-loader\\src\\index.js","mtime":1787309793084},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1787309791955},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js","mtime":1787309793790}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoNCi5zeXN0ZW0tcm9sZSA6OnYtZGVlcCAuZWwtdGFibGUgOjotd2Via2l0LXNjcm9sbGJhciB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouc3lzdGVtLXJvbGUgOjp2LWRlZXAgLmVsLXRhYmxlIHsNCiAgc2Nyb2xsYmFyLXdpZHRoOiBub25lOw0KICAtbXMtb3ZlcmZsb3ctc3R5bGU6IG5vbmU7DQp9DQouc3lzdGVtLXJvbGUgOjp2LWRlZXAgLmVsLXRhYmxlX19ib2R5LXdyYXBwZXI6Oi13ZWJraXQtc2Nyb2xsYmFyIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5zeXN0ZW0tcm9sZSA6OnYtZGVlcCAuZWwtdGFibGVfX2JvZHktd3JhcHBlciB7DQogIHNjcm9sbGJhci13aWR0aDogbm9uZTsNCiAgLW1zLW92ZXJmbG93LXN0eWxlOiBub25lOw0KfQ0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmnBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/views/system/role","sourcesContent":["<template>\r\n <div class=\"app-container system-role\">\r\n <el-form :model=\"queryParams\" ref=\"queryForm\" size=\"small\" :inline=\"true\" v-show=\"showSearch\">\r\n <el-form-item label=\"角色名称\" prop=\"roleName\">\r\n <el-input\r\n v-model=\"queryParams.roleName\"\r\n placeholder=\"请输入角色名称\"\r\n clearable\r\n style=\"width: 240px\"\r\n @keyup.enter.native=\"handleQuery\"\r\n />\r\n </el-form-item>\r\n <el-form-item label=\"权限字符\" prop=\"roleKey\">\r\n <el-input\r\n v-model=\"queryParams.roleKey\"\r\n placeholder=\"请输入权限字符\"\r\n clearable\r\n style=\"width: 240px\"\r\n @keyup.enter.native=\"handleQuery\"\r\n />\r\n </el-form-item>\r\n <el-form-item label=\"状态\" prop=\"status\">\r\n <el-select\r\n v-model=\"queryParams.status\"\r\n placeholder=\"角色状态\"\r\n clearable\r\n style=\"width: 240px\"\r\n >\r\n <el-option\r\n v-for=\"dict in dict.type.sys_normal_disable\"\r\n :key=\"dict.value\"\r\n :label=\"dict.label\"\r\n :value=\"dict.value\"\r\n />\r\n </el-select>\r\n </el-form-item>\r\n <el-form-item label=\"创建时间\">\r\n <el-date-picker\r\n v-model=\"dateRange\"\r\n style=\"width: 240px\"\r\n value-format=\"yyyy-MM-dd\"\r\n type=\"daterange\"\r\n range-separator=\"-\"\r\n start-placeholder=\"开始日期\"\r\n end-placeholder=\"结束日期\"\r\n ></el-date-picker>\r\n </el-form-item>\r\n <el-form-item>\r\n <el-button type=\"primary\" icon=\"el-icon-search\" size=\"mini\" @click=\"handleQuery\">搜索</el-button>\r\n <el-button icon=\"el-icon-refresh\" size=\"mini\" @click=\"resetQuery\">重置</el-button>\r\n </el-form-item>\r\n </el-form>\r\n\r\n <el-row :gutter=\"10\" class=\"mb8\">\r\n <el-col :span=\"1.5\">\r\n <el-button\r\n type=\"primary\"\r\n plain\r\n icon=\"el-icon-plus\"\r\n size=\"mini\"\r\n @click=\"handleAdd\"\r\n v-hasPermi=\"['system:role:add']\"\r\n >新增</el-button>\r\n </el-col>\r\n <el-col :span=\"1.5\">\r\n <el-button\r\n type=\"success\"\r\n plain\r\n icon=\"el-icon-edit\"\r\n size=\"mini\"\r\n :disabled=\"single\"\r\n @click=\"handleUpdate\"\r\n v-hasPermi=\"['system:role:edit']\"\r\n >修改</el-button>\r\n </el-col>\r\n <el-col :span=\"1.5\">\r\n <el-button\r\n type=\"danger\"\r\n plain\r\n icon=\"el-icon-delete\"\r\n size=\"mini\"\r\n :disabled=\"multiple\"\r\n @click=\"handleDelete\"\r\n v-hasPermi=\"['system:role:remove']\"\r\n >删除</el-button>\r\n </el-col>\r\n <el-col :span=\"1.5\">\r\n <el-button\r\n type=\"warning\"\r\n plain\r\n icon=\"el-icon-download\"\r\n size=\"mini\"\r\n @click=\"handleExport\"\r\n v-hasPermi=\"['system:role:export']\"\r\n >导出</el-button>\r\n </el-col>\r\n <right-toolbar :showSearch.sync=\"showSearch\" @queryTable=\"getList\"></right-toolbar>\r\n </el-row>\r\n\r\n <el-table v-loading=\"loading\" :data=\"roleList\" @selection-change=\"handleSelectionChange\" :height=\"tableHeight\">\r\n <el-table-column type=\"selection\" width=\"55\" align=\"center\" />\r\n <el-table-column label=\"角色编号\" prop=\"roleId\" width=\"120\" />\r\n <el-table-column label=\"角色名称\" prop=\"roleName\" :show-overflow-tooltip=\"true\" width=\"150\" />\r\n <el-table-column label=\"权限字符\" prop=\"roleKey\" :show-overflow-tooltip=\"true\" width=\"150\" />\r\n <el-table-column label=\"显示顺序\" prop=\"roleSort\" width=\"100\" />\r\n <el-table-column label=\"状态\" align=\"center\" width=\"100\">\r\n <template slot-scope=\"scope\">\r\n <el-switch\r\n v-model=\"scope.row.status\"\r\n active-value=\"0\"\r\n inactive-value=\"1\"\r\n @change=\"handleStatusChange(scope.row)\"\r\n ></el-switch>\r\n </template>\r\n </el-table-column>\r\n <el-table-column label=\"创建时间\" align=\"center\" prop=\"createTime\" width=\"180\">\r\n <template slot-scope=\"scope\">\r\n <span>{{ parseTime(scope.row.createTime) }}</span>\r\n </template>\r\n </el-table-column>\r\n <el-table-column label=\"操作\" align=\"center\" class-name=\"small-padding fixed-width\">\r\n <template slot-scope=\"scope\" v-if=\"scope.row.roleId !== 1\">\r\n <el-button\r\n size=\"mini\"\r\n type=\"text\"\r\n icon=\"el-icon-edit\"\r\n @click=\"handleUpdate(scope.row)\"\r\n v-hasPermi=\"['system:role:edit']\"\r\n >修改</el-button>\r\n <el-button\r\n size=\"mini\"\r\n type=\"text\"\r\n icon=\"el-icon-delete\"\r\n @click=\"handleDelete(scope.row)\"\r\n v-hasPermi=\"['system:role:remove']\"\r\n >删除</el-button>\r\n <el-dropdown size=\"mini\" @command=\"(command) => handleCommand(command, scope.row)\" v-hasPermi=\"['system:role:edit']\">\r\n <el-button size=\"mini\" type=\"text\" icon=\"el-icon-d-arrow-right\">更多</el-button>\r\n <el-dropdown-menu slot=\"dropdown\">\r\n <el-dropdown-item command=\"handleDataScope\" icon=\"el-icon-circle-check\"\r\n v-hasPermi=\"['system:role:edit']\">数据权限</el-dropdown-item>\r\n <el-dropdown-item command=\"handleAuthUser\" icon=\"el-icon-user\"\r\n v-hasPermi=\"['system:role:edit']\">分配用户</el-dropdown-item>\r\n </el-dropdown-menu>\r\n </el-dropdown>\r\n </template>\r\n </el-table-column>\r\n </el-table>\r\n\r\n <pagination\r\n v-show=\"total>0\"\r\n :total=\"total\"\r\n :page.sync=\"queryParams.pageNum\"\r\n :limit.sync=\"queryParams.pageSize\"\r\n @pagination=\"getList\"\r\n />\r\n\r\n <!-- 添加或修改角色配置对话框 -->\r\n <el-dialog :title=\"title\" :visible.sync=\"open\" width=\"500px\" append-to-body>\r\n <el-form ref=\"form\" :model=\"form\" :rules=\"rules\" label-width=\"100px\">\r\n <el-form-item label=\"角色名称\" prop=\"roleName\">\r\n <el-input v-model=\"form.roleName\" placeholder=\"请输入角色名称\" />\r\n </el-form-item>\r\n <el-form-item prop=\"roleKey\">\r\n <span slot=\"label\">\r\n <el-tooltip content=\"控制器中定义的权限字符,如:@PreAuthorize(`@ss.hasRole('admin')`)\" placement=\"top\">\r\n <i class=\"el-icon-question\"></i>\r\n </el-tooltip>\r\n 权限字符\r\n </span>\r\n <el-input v-model=\"form.roleKey\" placeholder=\"请输入权限字符\" />\r\n </el-form-item>\r\n <el-form-item label=\"角色顺序\" prop=\"roleSort\">\r\n <el-input-number v-model=\"form.roleSort\" controls-position=\"right\" :min=\"0\" />\r\n </el-form-item>\r\n <el-form-item label=\"状态\">\r\n <el-radio-group v-model=\"form.status\">\r\n <el-radio\r\n v-for=\"dict in dict.type.sys_normal_disable\"\r\n :key=\"dict.value\"\r\n :label=\"dict.value\"\r\n >{{dict.label}}</el-radio>\r\n </el-radio-group>\r\n </el-form-item>\r\n <el-form-item label=\"菜单权限\">\r\n <el-checkbox v-model=\"menuExpand\" @change=\"handleCheckedTreeExpand($event, 'menu')\">展开/折叠</el-checkbox>\r\n <el-checkbox v-model=\"menuNodeAll\" @change=\"handleCheckedTreeNodeAll($event, 'menu')\">全选/全不选</el-checkbox>\r\n <el-checkbox v-model=\"form.menuCheckStrictly\" @change=\"handleCheckedTreeConnect($event, 'menu')\">父子联动</el-checkbox>\r\n <el-tree\r\n class=\"tree-border\"\r\n :data=\"menuOptions\"\r\n show-checkbox\r\n ref=\"menu\"\r\n node-key=\"id\"\r\n :check-strictly=\"!form.menuCheckStrictly\"\r\n empty-text=\"加载中,请稍候\"\r\n :props=\"defaultProps\"\r\n ></el-tree>\r\n </el-form-item>\r\n <el-form-item label=\"备注\">\r\n <el-input v-model=\"form.remark\" type=\"textarea\" placeholder=\"请输入内容\"></el-input>\r\n </el-form-item>\r\n </el-form>\r\n <div slot=\"footer\" class=\"dialog-footer\">\r\n <el-button type=\"primary\" @click=\"submitForm\">确 定</el-button>\r\n <el-button @click=\"cancel\">取 消</el-button>\r\n </div>\r\n </el-dialog>\r\n\r\n <!-- 分配角色数据权限对话框 -->\r\n <el-dialog :title=\"title\" :visible.sync=\"openDataScope\" width=\"500px\" append-to-body>\r\n <el-form :model=\"form\" label-width=\"80px\">\r\n <el-form-item label=\"角色名称\">\r\n <el-input v-model=\"form.roleName\" :disabled=\"true\" />\r\n </el-form-item>\r\n <el-form-item label=\"权限字符\">\r\n <el-input v-model=\"form.roleKey\" :disabled=\"true\" />\r\n </el-form-item>\r\n <el-form-item label=\"权限范围\">\r\n <el-select v-model=\"form.dataScope\" @change=\"dataScopeSelectChange\">\r\n <el-option\r\n v-for=\"item in dataScopeOptions\"\r\n :key=\"item.value\"\r\n :label=\"item.label\"\r\n :value=\"item.value\"\r\n ></el-option>\r\n </el-select>\r\n </el-form-item>\r\n <el-form-item label=\"数据权限\" v-show=\"form.dataScope == 2\">\r\n <el-checkbox v-model=\"deptExpand\" @change=\"handleCheckedTreeExpand($event, 'dept')\">展开/折叠</el-checkbox>\r\n <el-checkbox v-model=\"deptNodeAll\" @change=\"handleCheckedTreeNodeAll($event, 'dept')\">全选/全不选</el-checkbox>\r\n <el-checkbox v-model=\"form.deptCheckStrictly\" @change=\"handleCheckedTreeConnect($event, 'dept')\">父子联动</el-checkbox>\r\n <el-tree\r\n class=\"tree-border\"\r\n :data=\"deptOptions\"\r\n show-checkbox\r\n default-expand-all\r\n ref=\"dept\"\r\n node-key=\"id\"\r\n :check-strictly=\"!form.deptCheckStrictly\"\r\n empty-text=\"加载中,请稍候\"\r\n :props=\"defaultProps\"\r\n ></el-tree>\r\n </el-form-item>\r\n </el-form>\r\n <div slot=\"footer\" class=\"dialog-footer\">\r\n <el-button type=\"primary\" @click=\"submitDataScope\">确 定</el-button>\r\n <el-button @click=\"cancelDataScope\">取 消</el-button>\r\n </div>\r\n </el-dialog>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from \"@/api/system/role\"\r\nimport { treeselect as menuTreeselect, roleMenuTreeselect } from \"@/api/system/menu\"\r\n\r\nexport default {\r\n name: \"Role\",\r\n dicts: ['sys_normal_disable'],\r\n data() {\r\n return {\r\n // 遮罩层\r\n loading: true,\r\n // 表格高度\r\n tableHeight: window.innerHeight - 240,\r\n // 选中数组\r\n ids: [],\r\n // 非单个禁用\r\n single: true,\r\n // 非多个禁用\r\n multiple: true,\r\n // 显示搜索条件\r\n showSearch: true,\r\n // 总条数\r\n total: 0,\r\n // 角色表格数据\r\n roleList: [],\r\n // 弹出层标题\r\n title: \"\",\r\n // 是否显示弹出层\r\n open: false,\r\n // 是否显示弹出层(数据权限)\r\n openDataScope: false,\r\n menuExpand: false,\r\n menuNodeAll: false,\r\n deptExpand: true,\r\n deptNodeAll: false,\r\n // 日期范围\r\n dateRange: [],\r\n // 数据范围选项\r\n dataScopeOptions: [\r\n {\r\n value: \"1\",\r\n label: \"全部数据权限\"\r\n },\r\n {\r\n value: \"2\",\r\n label: \"自定数据权限\"\r\n },\r\n {\r\n value: \"3\",\r\n label: \"本部门数据权限\"\r\n },\r\n {\r\n value: \"4\",\r\n label: \"本部门及以下数据权限\"\r\n },\r\n {\r\n value: \"5\",\r\n label: \"仅本人数据权限\"\r\n }\r\n ],\r\n // 菜单列表\r\n menuOptions: [],\r\n // 部门列表\r\n deptOptions: [],\r\n // 查询参数\r\n queryParams: {\r\n pageNum: 1,\r\n pageSize: 10,\r\n roleName: undefined,\r\n roleKey: undefined,\r\n status: undefined\r\n },\r\n // 表单参数\r\n form: {},\r\n defaultProps: {\r\n children: \"children\",\r\n label: \"label\"\r\n },\r\n // 表单校验\r\n rules: {\r\n roleName: [\r\n { required: true, message: \"角色名称不能为空\", trigger: \"blur\" }\r\n ],\r\n roleKey: [\r\n { required: true, message: \"权限字符不能为空\", trigger: \"blur\" }\r\n ],\r\n roleSort: [\r\n { required: true, message: \"角色顺序不能为空\", trigger: \"blur\" }\r\n ]\r\n }\r\n }\r\n },\r\n created() {\r\n this.getList()\r\n },\r\n mounted() {\r\n this.getTableHeight()\r\n window.addEventListener('resize', this.getTableHeight)\r\n },\r\n beforeDestroy() {\r\n window.removeEventListener('resize', this.getTableHeight)\r\n },\r\n watch: {\r\n showSearch() {\r\n this.$nextTick(() => {\r\n this.getTableHeight()\r\n })\r\n }\r\n },\r\n methods: {\r\n /** 获取表格高度 */\r\n getTableHeight() {\r\n const offset = this.showSearch ? 240 : 190\r\n this.tableHeight = window.innerHeight - offset\r\n },\r\n /** 查询角色列表 */\r\n getList() {\r\n this.loading = true\r\n listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {\r\n this.roleList = response.rows\r\n this.total = response.total\r\n this.loading = false\r\n }\r\n )\r\n },\r\n /** 查询菜单树结构 */\r\n getMenuTreeselect() {\r\n menuTreeselect().then(response => {\r\n this.menuOptions = response.data\r\n })\r\n },\r\n // 所有菜单节点数据\r\n getMenuAllCheckedKeys() {\r\n // 目前被选中的菜单节点\r\n let checkedKeys = this.$refs.menu.getCheckedKeys()\r\n // 半选中的菜单节点\r\n let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys()\r\n checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)\r\n return checkedKeys\r\n },\r\n // 所有部门节点数据\r\n getDeptAllCheckedKeys() {\r\n // 目前被选中的部门节点\r\n let checkedKeys = this.$refs.dept.getCheckedKeys()\r\n // 半选中的部门节点\r\n let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys()\r\n checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)\r\n return checkedKeys\r\n },\r\n /** 根据角色ID查询菜单树结构 */\r\n getRoleMenuTreeselect(roleId) {\r\n return roleMenuTreeselect(roleId).then(response => {\r\n this.menuOptions = response.menus\r\n return response\r\n })\r\n },\r\n /** 根据角色ID查询部门树结构 */\r\n getDeptTree(roleId) {\r\n return deptTreeSelect(roleId).then(response => {\r\n this.deptOptions = response.depts\r\n return response\r\n })\r\n },\r\n // 角色状态修改\r\n handleStatusChange(row) {\r\n let text = row.status === \"0\" ? \"启用\" : \"停用\"\r\n this.$modal.confirm('确认要\"' + text + '\"\"' + row.roleName + '\"角色吗?').then(function() {\r\n return changeRoleStatus(row.roleId, row.status)\r\n }).then(() => {\r\n this.$modal.msgSuccess(text + \"成功\")\r\n }).catch(function() {\r\n row.status = row.status === \"0\" ? \"1\" : \"0\"\r\n })\r\n },\r\n // 取消按钮\r\n cancel() {\r\n this.open = false\r\n this.reset()\r\n },\r\n // 取消按钮(数据权限)\r\n cancelDataScope() {\r\n this.openDataScope = false\r\n this.reset()\r\n },\r\n // 表单重置\r\n reset() {\r\n if (this.$refs.menu != undefined) {\r\n this.$refs.menu.setCheckedKeys([])\r\n }\r\n this.menuExpand = false,\r\n this.menuNodeAll = false,\r\n this.deptExpand = true,\r\n this.deptNodeAll = false,\r\n this.form = {\r\n roleId: undefined,\r\n roleName: undefined,\r\n roleKey: undefined,\r\n roleSort: 0,\r\n status: \"0\",\r\n menuIds: [],\r\n deptIds: [],\r\n menuCheckStrictly: true,\r\n deptCheckStrictly: true,\r\n remark: undefined\r\n }\r\n this.resetForm(\"form\")\r\n },\r\n /** 搜索按钮操作 */\r\n handleQuery() {\r\n this.queryParams.pageNum = 1\r\n this.getList()\r\n },\r\n /** 重置按钮操作 */\r\n resetQuery() {\r\n this.dateRange = []\r\n this.resetForm(\"queryForm\")\r\n this.handleQuery()\r\n },\r\n // 多选框选中数据\r\n handleSelectionChange(selection) {\r\n this.ids = selection.map(item => item.roleId)\r\n this.single = selection.length != 1\r\n this.multiple = !selection.length\r\n },\r\n // 更多操作触发\r\n handleCommand(command, row) {\r\n switch (command) {\r\n case \"handleDataScope\":\r\n this.handleDataScope(row)\r\n break\r\n case \"handleAuthUser\":\r\n this.handleAuthUser(row)\r\n break\r\n default:\r\n break\r\n }\r\n },\r\n // 树权限(展开/折叠)\r\n handleCheckedTreeExpand(value, type) {\r\n if (type == 'menu') {\r\n let treeList = this.menuOptions\r\n for (let i = 0; i < treeList.length; i++) {\r\n this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value\r\n }\r\n } else if (type == 'dept') {\r\n let treeList = this.deptOptions\r\n for (let i = 0; i < treeList.length; i++) {\r\n this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value\r\n }\r\n }\r\n },\r\n // 树权限(全选/全不选)\r\n handleCheckedTreeNodeAll(value, type) {\r\n if (type == 'menu') {\r\n this.$refs.menu.setCheckedNodes(value ? this.menuOptions: [])\r\n } else if (type == 'dept') {\r\n this.$refs.dept.setCheckedNodes(value ? this.deptOptions: [])\r\n }\r\n },\r\n // 树权限(父子联动)\r\n handleCheckedTreeConnect(value, type) {\r\n if (type == 'menu') {\r\n this.form.menuCheckStrictly = value ? true: false\r\n } else if (type == 'dept') {\r\n this.form.deptCheckStrictly = value ? true: false\r\n }\r\n },\r\n /** 新增按钮操作 */\r\n handleAdd() {\r\n this.reset()\r\n this.getMenuTreeselect()\r\n this.open = true\r\n this.title = \"添加角色\"\r\n },\r\n /** 修改按钮操作 */\r\n handleUpdate(row) {\r\n this.reset()\r\n const roleId = row.roleId || this.ids\r\n const roleMenu = this.getRoleMenuTreeselect(roleId)\r\n getRole(roleId).then(response => {\r\n this.form = response.data\r\n this.open = true\r\n this.$nextTick(() => {\r\n roleMenu.then(res => {\r\n let checkedKeys = res.checkedKeys\r\n checkedKeys.forEach((v) => {\r\n this.$nextTick(()=>{\r\n this.$refs.menu.setChecked(v, true ,false)\r\n })\r\n })\r\n })\r\n })\r\n })\r\n this.title = \"修改角色\"\r\n },\r\n /** 选择角色权限范围触发 */\r\n dataScopeSelectChange(value) {\r\n if (value !== '2') {\r\n this.$refs.dept.setCheckedKeys([])\r\n }\r\n },\r\n /** 分配数据权限操作 */\r\n handleDataScope(row) {\r\n this.reset()\r\n const deptTreeSelect = this.getDeptTree(row.roleId)\r\n getRole(row.roleId).then(response => {\r\n this.form = response.data\r\n this.openDataScope = true\r\n this.$nextTick(() => {\r\n deptTreeSelect.then(res => {\r\n this.$refs.dept.setCheckedKeys(res.checkedKeys)\r\n })\r\n })\r\n })\r\n this.title = \"分配数据权限\"\r\n },\r\n /** 分配用户操作 */\r\n handleAuthUser(row) {\r\n const roleId = row.roleId\r\n this.$router.push(\"/system/role-auth/user/\" + roleId)\r\n },\r\n /** 提交按钮 */\r\n submitForm() {\r\n this.$refs[\"form\"].validate(valid => {\r\n if (valid) {\r\n if (this.form.roleId != undefined) {\r\n this.form.menuIds = this.getMenuAllCheckedKeys()\r\n updateRole(this.form).then(() => {\r\n this.$modal.msgSuccess(\"修改成功\")\r\n this.open = false\r\n this.getList()\r\n })\r\n } else {\r\n this.form.menuIds = this.getMenuAllCheckedKeys()\r\n addRole(this.form).then(() => {\r\n this.$modal.msgSuccess(\"新增成功\")\r\n this.open = false\r\n this.getList()\r\n })\r\n }\r\n }\r\n })\r\n },\r\n /** 提交按钮(数据权限) */\r\n submitDataScope() {\r\n if (this.form.roleId != undefined) {\r\n this.form.deptIds = this.getDeptAllCheckedKeys()\r\n dataScope(this.form).then(() => {\r\n this.$modal.msgSuccess(\"修改成功\")\r\n this.openDataScope = false\r\n this.getList()\r\n })\r\n }\r\n },\r\n /** 删除按钮操作 */\r\n handleDelete(row) {\r\n const roleIds = row.roleId || this.ids\r\n this.$modal.confirm('是否确认删除角色编号为\"' + roleIds + '\"的数据项?').then(function() {\r\n return delRole(roleIds)\r\n }).then(() => {\r\n this.getList()\r\n this.$modal.msgSuccess(\"删除成功\")\r\n }).catch(() => {})\r\n },\r\n /** 导出按钮操作 */\r\n handleExport() {\r\n this.download('system/role/export', {\r\n ...this.queryParams\r\n }, `role_${new Date().getTime()}.xlsx`)\r\n }\r\n }\r\n}\r\n</script>\r\n<style scoped>\r\n.system-role ::v-deep .el-table ::-webkit-scrollbar {\r\n display: none;\r\n}\r\n.system-role ::v-deep .el-table {\r\n scrollbar-width: none;\r\n -ms-overflow-style: none;\r\n}\r\n.system-role ::v-deep .el-table__body-wrapper::-webkit-scrollbar {\r\n display: none;\r\n}\r\n.system-role ::v-deep .el-table__body-wrapper {\r\n scrollbar-width: none;\r\n -ms-overflow-style: none;\r\n}\r\n</style>"]}]}