| 1 |
- {"remainingRequest":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\boman-framwork\\ruoyi-ui\\src\\views\\system\\role\\index.vue?vue&type=style&index=0&id=5fc99eaf&lang=scss&scoped=true&","dependencies":[{"path":"E:\\boman-framwork\\ruoyi-ui\\src\\views\\system\\role\\index.vue","mtime":1617152835177},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\css-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoucm9sZUNvbnRyQm94ewogIGJhY2tncm91bmQtY29sb3I6ICNmZmY7CiAgYm9yZGVyLXJhZGl1czogNnB4OwogIG92ZXJmbG93OiBoaWRkZW47CiAgcGFkZGluZzogMjNweCAwOwp9Ci5yb2xlQ29udHJ7CiAgcGFkZGluZy1sZWZ0OiAxN3B4OwoKICAuc2VhckNvbnRMZWZ0ewogICAgcGFkZGluZzogMjNweCAxN3B4IDIzcHggMjNweDsKICAgIGJvcmRlci1yaWdodDogMnB4IHNvbGlkICNFNUU1RTU7CiAgfQogIC5zZWFyQ29udFJpZ2h0ewogICAgcGFkZGluZy1sZWZ0OiAxOHB4OwogICAgLnNlYXJUaXRsZXsKICAgICAgZGlzcGxheTogZmxleDsKICAgICAgcGFkZGluZy1sZWZ0OiAxMXB4OwogICAgICBtYXJnaW4tYm90dG9tOiAyNnB4OwogICAgICAuc2Vhck5hbWV7CiAgICAgICAgY29sb3I6ICMzNDM0MzQ7CiAgICAgICAgZm9udC1zaXplOiAxMnB4OwogICAgICAgIHdpZHRoOiAxNTZweDsKICAgICAgfQogICAgICAuc2Vhckl0ZW17CiAgICAgICAgZmxleDogMTsKICAgICAgICBmb250LXNpemU6IDEycHg7CiAgICAgIH0KICAgIH0KICAgIC5zZWFyQ29udHsKICAgICAgZGlzcGxheTogZmxleDsKICAgICAgaGVpZ2h0OiAyM3B4OwogICAgICBwYWRkaW5nLWxlZnQ6IDExcHg7CiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICAgIG1hcmdpbi1ib3R0b206IDRweDsKICAgICAgY3Vyc29yOiBwb2ludGVyOwogICAgICAuc2Vhck5hbWV7CiAgICAgICAgY29sb3I6ICMzNDM0MzQ7CiAgICAgICAgZm9udC1zaXplOiAxMnB4OwogICAgICAgIHdpZHRoOiAxNTZweDsKICAgICAgfQogICAgICAuc2Vhckl0ZW17CiAgICAgICAgZmxleDogMTsKICAgICAgICBmb250LXNpemU6IDEycHg7CiAgICAgIH0KICAgICAgJjpob3ZlcnsKICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsMCwwLC4xKTsKICAgICAgfQogICAgfQogICAgLmFjdGl2ZXsKICAgICAgYmFja2dyb3VuZC1jb2xvcjogI0NBREJFNDsKICAgICAgLnNlYXJOYW1lewogICAgICAgIGNvbG9yOiAjZmZmOwogICAgICB9CiAgICB9CiAgfQp9Cgouc2VhckJveHN7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgcGFkZGluZzogMjNweDsKICAuc2VhckJveHsKICAgIGRpc3BsYXk6IGZsZXg7CiAgICAuc2VhcklucHV0ewogICAgICBmbGV4OiAxOwogICAgICBoZWlnaHQ6IDMycHg7CiAgICAgIG1hcmdpbi1yaWdodDogOHB4OwogICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogICAgfQogICAgaW5wdXR7CiAgICAgIHdpZHRoOiAxMDAlOwogICAgICBoZWlnaHQ6IDEwMCU7CiAgICAgIGJhY2tncm91bmQtY29sb3I6ICNGN0Y2RjY7CiAgICAgIGJvcmRlcjogbm9uZTsKICAgICAgcGFkZGluZzogMCA3cHg7CiAgICAgIG91dGxpbmU6IG5vbmU7CiAgICAgICY6OnBsYWNlaG9sZGVyewogICAgICAgIGNvbG9yOiAjQUFBQUFBOwogICAgICAgIGZvbnQtc2l6ZTogMTJweDsKICAgICAgfQogICAgfQogICAgLnNlYXJCdG57CiAgICAgIHdpZHRoOiAzMHB4OwogICAgICBoZWlnaHQ6IDMycHg7CiAgICAgIGRpc3BsYXk6IGZsZXg7CiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyOwogICAgICBhbGlnbi1pdGVtczogY2VudGVyOwogICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjM0M4REJDOwogICAgICAuaWNvbnsKICAgICAgICB3aWR0aDogMThweDsKICAgICAgICBoZWlnaHQ6IDE3cHg7CiAgICAgIH0KICAgIH0KICB9CiAgLnNlYXJMaXN0ewogICAgcGFkZGluZzogMTBweCAwOwogICAgLnNlYXJJdGVtewogICAgICBwYWRkaW5nOiAwIDhweDsKICAgICAgbGluZS1oZWlnaHQ6IDMwcHg7CiAgICAgIGZvbnQtc2l6ZTogMTJweDsKICAgICAgY29sb3I6ICMzNDM0MzQ7CiAgICAgIGN1cnNvcjogcG9pbnRlcjsKICAgIH0KICAgIC5hY3RpdmV7CiAgICAgIGJhY2tncm91bmQtY29sb3I6ICNDQURCRTQ7CiAgICAgIGNvbG9yOiAjM0M4REJDOwogICAgfQogIH0KfQouYXBwLWNvbnRhaW5lcnsKICAgYmFja2dyb3VuZC1jb2xvcjogI0VGRjBGRjsKICAgbWluLWhlaWdodDogY2FsYygxMDB2aCAtIDYwcHgpOwogICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Ci5yb2xlQm94ewogIHBhZGRpbmc6IDAgMjNweDsKICBiYWNrZ3JvdW5kOiAjZmZmOwogIGJvcmRlci1yYWRpdXM6IDZweDsKICAucm9sZUNvbHsKICAgIHBhZGRpbmc6IDIwcHggMDsKICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjRTVFNUU1OwogICAgLnJvbGVIewogICAgICB3aWR0aDogMThweDsKICAgICAgaGVpZ2h0OiA4cHg7CiAgICAgIGJvcmRlci1yYWRpdXM6IDRweDsKICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzNDOERCQzsKICAgICAgbWFyZ2luLWJvdHRvbTogOHB4OwogICAgfQogICAgc3BhbnsKICAgICAgZm9udC1zaXplOiAxNXB4OwogICAgICBjb2xvcjogIzNDOERCQzsKICAgIH0KICB9CiAgLnJvbGVCb3R7CiAgICBwYWRkaW5nOiAyMnB4IDA7CiAgICAucm9sZUJ0bnsKICAgICAgaGVpZ2h0OiAzMnB4OwogICAgICBkaXNwbGF5OiBmbGV4OwogICAgICBib3JkZXItcmFkaXVzOiAzcHg7CiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyOwogICAgICBhbGlnbi1pdGVtczogY2VudGVyOwogICAgICB3aWR0aDogODNweDsKICAgICAgbWFyZ2luLXJpZ2h0OiAxOHB4OwogICAgICAuaWNvbnsKICAgICAgICB3aWR0aDogMTRweDsKICAgICAgICBoZWlnaHQ6IDE0cHg7CiAgICAgICAgbWFyZ2luLXJpZ2h0OiA3cHg7CiAgICAgIH0KICAgICAgc3BhbnsKICAgICAgICBjb2xvcjogI2ZmZjsKICAgICAgICBmb250LXNpemU6IDEycHg7CiAgICAgIH0KICAgIH0KICB9Cn0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsdA;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;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/views/system/role","sourcesContent":["<template>\r\n <div class=\"app-container\">\r\n <el-row class=\"roleBox\">\r\n <el-col :span=\"24\" class=\"roleCol\">\r\n <div class=\"roleH\"></div>\r\n <span>功能权限</span>\r\n </el-col>\r\n <el-col :span=\"24\" class=\"roleBot\">\r\n <el-col :span=\"1.5\">\r\n <div class=\"roleBtn\" style=\"background-color: #2AC1CA;\">\r\n <img src=\"@/assets/images/icon_btn_xz@2x.png\" alt=\"\" class=\"icon\">\r\n <span>新增</span>\r\n </div>\r\n </el-col>\r\n <el-col :span=\"1.5\">\r\n <div class=\"roleBtn\" style=\"background-color: #FF9639;\">\r\n <img src=\"@/assets/images/icon_btn_sx@2x.png\" alt=\"\" class=\"icon\">\r\n <span>刷新</span>\r\n </div>\r\n </el-col>\r\n <el-col :span=\"1.5\">\r\n <div class=\"roleBtn\" style=\"background-color: #3C8DBC;\">\r\n <img src=\"@/assets/images/icon_btn_bc@2x.png\" alt=\"\" class=\"icon\">\r\n <span>保存</span>\r\n </div>\r\n </el-col>\r\n </el-col>\r\n </el-row>\r\n <el-row style=\"margin-top: 18px;\">\r\n <el-col :span = \"5\" class=\"searBoxs\">\r\n <div class=\"searBox\">\r\n <div class=\"searInput\">\r\n <input type=\"text\" placeholder=\"请输入角色\">\r\n </div>\r\n <div class=\"searBtn\">\r\n <img src=\"@/assets/images/icon_sr_ss@2x.png\" alt=\"\" class=\"icon\">\r\n </div>\r\n </div>\r\n <div class=\"searList\">\r\n <div class=\"searItem\" v-for=\"item in 15\" @click=\"indexs = item\" :class=\"{'active': item==indexs}\">\r\n 用户角色\r\n </div>\r\n </div>\r\n </el-col>\r\n <el-col :span = \"19\" class=\"roleContr\">\r\n <div class=\"roleContrBox\">\r\n <el-col :span = \"7\">\r\n <div class=\"searContLeft\">\r\n <el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\r\n </div>\r\n </el-col>\r\n <el-col :span=\"17\">\r\n <div class=\"searContRight\">\r\n <div class=\"searTitle\">\r\n <div class=\"searName\">\r\n 功能\r\n </div>\r\n <div class=\"searItem\" v-for=\"item in 8\">\r\n <el-checkbox :label=\"'新增'+item\"></el-checkbox>\r\n </div>\r\n </div>\r\n <div class=\"searCont\" v-for=\"items in 12\" @click=\"searIndex = item\" :class=\"{'active': searIndex == item}\">\r\n <div class=\"searName\">\r\n 功能功能{{items}}\r\n </div>\r\n <div class=\"searItem\" v-for=\"item in 8\">\r\n <el-checkbox></el-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n </el-col>\r\n </div>\r\n </el-col>\r\n </el-row>\r\n </div>\r\n</template>\r\n\r\n<script>\r\n\r\nexport default {\r\n name: \"Role\",\r\n data() {\r\n return {\r\n searIndex: '',\r\n data: [{\r\n label: '一级 1',\r\n children: [{\r\n label: '二级 1-1',\r\n children: [{\r\n label: '三级 1-1-1'\r\n }]\r\n }]\r\n }, {\r\n label: '一级 2',\r\n children: [{\r\n label: '二级 2-1',\r\n children: [{\r\n label: '三级 2-1-1'\r\n }]\r\n }, {\r\n label: '二级 2-2',\r\n children: [{\r\n label: '三级 2-2-1'\r\n }]\r\n }]\r\n }, {\r\n label: '一级 3',\r\n children: [{\r\n label: '二级 3-1',\r\n children: [{\r\n label: '三级 3-1-1'\r\n }]\r\n }, {\r\n label: '二级 3-2',\r\n children: [{\r\n label: '三级 3-2-1'\r\n }]\r\n }]\r\n }],\r\n defaultProps: {\r\n children: 'children',\r\n label: 'label'\r\n },\r\n indexs: 3,\r\n // 遮罩层\r\n loading: true,\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 statusOptions: [],\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 this.getDicts(\"sys_normal_disable\").then(response => {\r\n this.statusOptions = response.data;\r\n });\r\n },\r\n methods: {\r\n /** 查询角色列表 */\r\n getList() {\r\n this.loading = true;\r\n listRole(this.addDateRange(this.queryParams, this.dateRange)).then(\r\n 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 getDeptTreeselect() {\r\n deptTreeselect().then(response => {\r\n this.deptOptions = 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(id) {\r\n return roleMenuTreeselect(id).then(response => {\r\n this.menuOptions = response.menus;\r\n return response;\r\n });\r\n },\r\n /** 根据角色ID查询部门树结构 */\r\n getRoleDeptTreeselect(id) {\r\n return roleDeptTreeselect(id).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.$confirm('确认要\"' + text + '\"\"' + row.roleName + '\"角色吗?', \"警告\", {\r\n confirmButtonText: \"确定\",\r\n cancelButtonText: \"取消\",\r\n type: \"warning\"\r\n }).then(function() {\r\n return changeRoleStatus(row.id, row.status);\r\n }).then(() => {\r\n this.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 id: 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.id)\r\n this.single = selection.length!=1\r\n this.multiple = !selection.length\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 id = row.id || this.ids\r\n const roleMenu = this.getRoleMenuTreeselect(id);\r\n getRole(id).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 this.title = \"修改角色\";\r\n });\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 roleDeptTreeselect = this.getRoleDeptTreeselect(row.id);\r\n getRole(row.id).then(response => {\r\n this.form = response.data;\r\n this.openDataScope = true;\r\n this.$nextTick(() => {\r\n roleDeptTreeselect.then(res => {\r\n this.$refs.dept.setCheckedKeys(res.checkedKeys);\r\n });\r\n });\r\n this.title = \"分配数据权限\";\r\n });\r\n },\r\n /** 提交按钮 */\r\n submitForm: function() {\r\n this.$refs[\"form\"].validate(valid => {\r\n if (valid) {\r\n if (this.form.id != undefined) {\r\n this.form.menuIds = this.getMenuAllCheckedKeys();\r\n updateRole(this.form).then(response => {\r\n this.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(response => {\r\n this.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: function() {\r\n if (this.form.id != undefined) {\r\n this.form.deptIds = this.getDeptAllCheckedKeys();\r\n dataScope(this.form).then(response => {\r\n this.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 ids = row.id || this.ids;\r\n this.$confirm('是否确认删除角色编号为\"' + ids + '\"的数据项?', \"警告\", {\r\n confirmButtonText: \"确定\",\r\n cancelButtonText: \"取消\",\r\n type: \"warning\"\r\n }).then(function() {\r\n return delRole(ids);\r\n }).then(() => {\r\n this.getList();\r\n this.msgSuccess(\"删除成功\");\r\n })\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 lang=\"scss\" scoped>\r\n .roleContrBox{\r\n background-color: #fff;\r\n border-radius: 6px;\r\n overflow: hidden;\r\n padding: 23px 0;\r\n }\r\n .roleContr{\r\n padding-left: 17px;\r\n\r\n .searContLeft{\r\n padding: 23px 17px 23px 23px;\r\n border-right: 2px solid #E5E5E5;\r\n }\r\n .searContRight{\r\n padding-left: 18px;\r\n .searTitle{\r\n display: flex;\r\n padding-left: 11px;\r\n margin-bottom: 26px;\r\n .searName{\r\n color: #343434;\r\n font-size: 12px;\r\n width: 156px;\r\n }\r\n .searItem{\r\n flex: 1;\r\n font-size: 12px;\r\n }\r\n }\r\n .searCont{\r\n display: flex;\r\n height: 23px;\r\n padding-left: 11px;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n cursor: pointer;\r\n .searName{\r\n color: #343434;\r\n font-size: 12px;\r\n width: 156px;\r\n }\r\n .searItem{\r\n flex: 1;\r\n font-size: 12px;\r\n }\r\n &:hover{\r\n background-color: rgba(0,0,0,.1);\r\n }\r\n }\r\n .active{\r\n background-color: #CADBE4;\r\n .searName{\r\n color: #fff;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .searBoxs{\r\n background-color: #fff;\r\n border-radius: 6px;\r\n padding: 23px;\r\n .searBox{\r\n display: flex;\r\n .searInput{\r\n flex: 1;\r\n height: 32px;\r\n margin-right: 8px;\r\n box-sizing: border-box;\r\n }\r\n input{\r\n width: 100%;\r\n height: 100%;\r\n background-color: #F7F6F6;\r\n border: none;\r\n padding: 0 7px;\r\n outline: none;\r\n &::placeholder{\r\n color: #AAAAAA;\r\n font-size: 12px;\r\n }\r\n }\r\n .searBtn{\r\n width: 30px;\r\n height: 32px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: #3C8DBC;\r\n .icon{\r\n width: 18px;\r\n height: 17px;\r\n }\r\n }\r\n }\r\n .searList{\r\n padding: 10px 0;\r\n .searItem{\r\n padding: 0 8px;\r\n line-height: 30px;\r\n font-size: 12px;\r\n color: #343434;\r\n cursor: pointer;\r\n }\r\n .active{\r\n background-color: #CADBE4;\r\n color: #3C8DBC;\r\n }\r\n }\r\n }\r\n .app-container{\r\n background-color: #EFF0FF;\r\n min-height: calc(100vh - 60px);\r\n box-sizing: border-box;\r\n }\r\n .roleBox{\r\n padding: 0 23px;\r\n background: #fff;\r\n border-radius: 6px;\r\n .roleCol{\r\n padding: 20px 0;\r\n border-bottom: 1px solid #E5E5E5;\r\n .roleH{\r\n width: 18px;\r\n height: 8px;\r\n border-radius: 4px;\r\n background-color: #3C8DBC;\r\n margin-bottom: 8px;\r\n }\r\n span{\r\n font-size: 15px;\r\n color: #3C8DBC;\r\n }\r\n }\r\n .roleBot{\r\n padding: 22px 0;\r\n .roleBtn{\r\n height: 32px;\r\n display: flex;\r\n border-radius: 3px;\r\n justify-content: center;\r\n align-items: center;\r\n width: 83px;\r\n margin-right: 18px;\r\n .icon{\r\n width: 14px;\r\n height: 14px;\r\n margin-right: 7px;\r\n }\r\n span{\r\n color: #fff;\r\n font-size: 12px;\r\n }\r\n }\r\n }\r\n }\r\n</style>\r\n"]}]}
|
