|
@@ -1,13 +1,12 @@
|
|
|
<template>
|
|
|
<el-dialog
|
|
|
- class="modify-role"
|
|
|
+ class="modify-system-role"
|
|
|
:visible.sync="modalIsShow"
|
|
|
:title="title"
|
|
|
- top="10px"
|
|
|
- width="700px"
|
|
|
:close-on-click-modal="false"
|
|
|
:close-on-press-escape="false"
|
|
|
append-to-body
|
|
|
+ fullscreen
|
|
|
@opened="visibleChange"
|
|
|
>
|
|
|
<div class="part-box part-box-pad part-box-border">
|
|
@@ -25,30 +24,13 @@
|
|
|
clearable
|
|
|
></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="privilegeIds" label="角色权限:">
|
|
|
- <div class="part-box part-box-pad part-box-border">
|
|
|
- <el-tree
|
|
|
- :data="menus"
|
|
|
- show-checkbox
|
|
|
- node-key="id"
|
|
|
- ref="MenuTree"
|
|
|
- highlight-current
|
|
|
- check-on-click-node
|
|
|
- :expand-on-click-node="false"
|
|
|
- :default-expanded-keys="defaultExpandedKeys"
|
|
|
- :props="defaultProps"
|
|
|
- @check-change="checkChange"
|
|
|
- >
|
|
|
- <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
- <span
|
|
|
- ><i class="el-icon-link" v-if="data.type === 'URL'"></i>
|
|
|
- {{ node.label }}</span
|
|
|
- >
|
|
|
- </span>
|
|
|
- </el-tree>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
+ <el-form-item label="角色权限:" required></el-form-item>
|
|
|
</el-form>
|
|
|
+ <privilege-set
|
|
|
+ v-if="menus && menus.length"
|
|
|
+ ref="PrivilegeSet"
|
|
|
+ :menus="menus"
|
|
|
+ ></privilege-set>
|
|
|
</div>
|
|
|
<div slot="footer">
|
|
|
<el-button type="primary" :disabled="isSubmit" @click="submit"
|
|
@@ -60,17 +42,18 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { updateRole, menuAuthList, roleBoundPrivileges } from "../../base/api";
|
|
|
+import { updateRole, privilegeList, roleBoundPrivileges } from "../../base/api";
|
|
|
+import PrivilegeSet from "../../base/components/PrivilegeSet";
|
|
|
|
|
|
const initModalForm = {
|
|
|
id: null,
|
|
|
name: "",
|
|
|
- type: "CUSTOM",
|
|
|
privilegeIds: []
|
|
|
};
|
|
|
|
|
|
export default {
|
|
|
- name: "modify-role",
|
|
|
+ name: "modify-system-role",
|
|
|
+ components: { PrivilegeSet },
|
|
|
props: {
|
|
|
instance: {
|
|
|
type: Object,
|
|
@@ -92,37 +75,13 @@ export default {
|
|
|
modalIsShow: false,
|
|
|
isSubmit: false,
|
|
|
menus: [],
|
|
|
- defaultExpandedKeys: [],
|
|
|
modalForm: {},
|
|
|
- defaultProps: {
|
|
|
- label: "name"
|
|
|
- },
|
|
|
rules: {
|
|
|
name: [
|
|
|
{
|
|
|
required: true,
|
|
|
- pattern: /^[0-9a-zA-Z\u4E00-\u9FA5]{1,10}$/,
|
|
|
- message: "角色名称只能输入汉字、字母和数字,长度不能超过10",
|
|
|
- trigger: "change"
|
|
|
- }
|
|
|
- ],
|
|
|
- type: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请选择角色类型",
|
|
|
- trigger: "change"
|
|
|
- }
|
|
|
- ],
|
|
|
- privilegeIds: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- validator: (rule, value, callback) => {
|
|
|
- if (this.modalForm.type !== "CUSTOM" || value.length) {
|
|
|
- callback();
|
|
|
- } else {
|
|
|
- callback(new Error("请选择扩展字段"));
|
|
|
- }
|
|
|
- },
|
|
|
+ pattern: /^[0-9a-zA-Z\u4E00-\u9FA5]{1,20}$/,
|
|
|
+ message: "角色名称只能输入汉字、字母和数字,长度不能超过20",
|
|
|
trigger: "change"
|
|
|
}
|
|
|
]
|
|
@@ -134,37 +93,27 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
async getMenus() {
|
|
|
- const data = await menuAuthList();
|
|
|
- if (data) this.menus = data.filter(item => item.url !== "common");
|
|
|
- this.defaultExpandedKeys = [];
|
|
|
- this.getDefaultExpandedKeys(this.menus);
|
|
|
+ const data = await privilegeList();
|
|
|
+ if (data) {
|
|
|
+ this.menus = data.map(item => {
|
|
|
+ item.parentId = null;
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
async visibleChange() {
|
|
|
- console.log(this.instance);
|
|
|
+ let privilegeIds = [];
|
|
|
if (this.instance.id) {
|
|
|
this.modalForm = this.$objAssign(initModalForm, this.instance);
|
|
|
- let privilegeIds = await roleBoundPrivileges(this.instance.id);
|
|
|
+ privilegeIds = await roleBoundPrivileges(this.instance.id);
|
|
|
privilegeIds = privilegeIds || [];
|
|
|
- let checkedIds = [];
|
|
|
- const getCheckedIds = list => {
|
|
|
- list.forEach(item => {
|
|
|
- if (item["children"] && item["children"].length) {
|
|
|
- getCheckedIds(item.children);
|
|
|
- } else {
|
|
|
- const isChecked = privilegeIds.includes(item.id);
|
|
|
- if (isChecked) checkedIds.push(item.id);
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
- getCheckedIds(this.menus);
|
|
|
- this.$refs.MenuTree.setCheckedKeys(checkedIds);
|
|
|
- this.modalForm.privilegeIds = checkedIds;
|
|
|
+ this.modalForm.privilegeIds = privilegeIds;
|
|
|
} else {
|
|
|
this.modalForm = { ...initModalForm };
|
|
|
- this.$refs.MenuTree.setCheckedKeys([]);
|
|
|
}
|
|
|
this.$nextTick(() => {
|
|
|
this.$refs.modalFormComp.clearValidate();
|
|
|
+ this.$refs.PrivilegeSet.buildTableData(privilegeIds);
|
|
|
});
|
|
|
},
|
|
|
cancel() {
|
|
@@ -173,33 +122,19 @@ export default {
|
|
|
open() {
|
|
|
this.modalIsShow = true;
|
|
|
},
|
|
|
- getDefaultExpandedKeys(menus) {
|
|
|
- menus.forEach(item => {
|
|
|
- if (
|
|
|
- item.children &&
|
|
|
- item.children.length &&
|
|
|
- !item.children.some(elem => elem.type === "URL")
|
|
|
- ) {
|
|
|
- this.defaultExpandedKeys.push(item.id);
|
|
|
- this.getDefaultExpandedKeys(item.children);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- checkChange(data, checked) {
|
|
|
- this.modalForm.privilegeIds = this.$refs.MenuTree.getCheckedKeys();
|
|
|
- this.$refs.modalFormComp.validateField("privilegeIds");
|
|
|
- },
|
|
|
async submit() {
|
|
|
const valid = await this.$refs.modalFormComp.validate().catch(() => {});
|
|
|
if (!valid) return;
|
|
|
|
|
|
+ const privilegeIds = this.$refs.PrivilegeSet.getSelectedPrivilegeIds();
|
|
|
+ if (!privilegeIds.length) {
|
|
|
+ this.$emit("请设置角色权限!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
if (this.isSubmit) return;
|
|
|
this.isSubmit = true;
|
|
|
const datas = { ...this.modalForm };
|
|
|
- const privilegeIds = [
|
|
|
- ...this.$refs.MenuTree.getCheckedKeys(),
|
|
|
- ...this.$refs.MenuTree.getHalfCheckedKeys()
|
|
|
- ];
|
|
|
datas.privilegeIds = privilegeIds;
|
|
|
const data = await updateRole(datas).catch(() => {});
|
|
|
this.isSubmit = false;
|