|
@@ -3,11 +3,10 @@
|
|
class="modify-role"
|
|
class="modify-role"
|
|
:visible.sync="modalIsShow"
|
|
:visible.sync="modalIsShow"
|
|
:title="title"
|
|
:title="title"
|
|
- top="10px"
|
|
|
|
- width="700px"
|
|
|
|
:close-on-click-modal="false"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:close-on-press-escape="false"
|
|
append-to-body
|
|
append-to-body
|
|
|
|
+ fullscreen
|
|
@opened="visibleChange"
|
|
@opened="visibleChange"
|
|
>
|
|
>
|
|
<div class="part-box part-box-pad part-box-border">
|
|
<div class="part-box part-box-pad part-box-border">
|
|
@@ -25,34 +24,13 @@
|
|
clearable
|
|
clearable
|
|
></el-input>
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item
|
|
|
|
- v-show="modalForm.type === 'CUSTOM'"
|
|
|
|
- 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>
|
|
</el-form>
|
|
|
|
+ <privilege-set
|
|
|
|
+ v-if="menus && menus.length"
|
|
|
|
+ ref="PrivilegeSet"
|
|
|
|
+ :menus="menus"
|
|
|
|
+ ></privilege-set>
|
|
</div>
|
|
</div>
|
|
<div slot="footer">
|
|
<div slot="footer">
|
|
<el-button type="primary" :disabled="isSubmit" @click="submit"
|
|
<el-button type="primary" :disabled="isSubmit" @click="submit"
|
|
@@ -65,6 +43,8 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import { updateRole, menuAuthList, roleBoundPrivileges } from "../api";
|
|
import { updateRole, menuAuthList, roleBoundPrivileges } from "../api";
|
|
|
|
+import PrivilegeSet from "./PrivilegeSet";
|
|
|
|
+import navs from "./privilege/navs.json";
|
|
|
|
|
|
const initModalForm = {
|
|
const initModalForm = {
|
|
id: null,
|
|
id: null,
|
|
@@ -75,6 +55,7 @@ const initModalForm = {
|
|
|
|
|
|
export default {
|
|
export default {
|
|
name: "modify-role",
|
|
name: "modify-role",
|
|
|
|
+ components: { PrivilegeSet },
|
|
props: {
|
|
props: {
|
|
instance: {
|
|
instance: {
|
|
type: Object,
|
|
type: Object,
|
|
@@ -95,12 +76,8 @@ export default {
|
|
return {
|
|
return {
|
|
modalIsShow: false,
|
|
modalIsShow: false,
|
|
isSubmit: false,
|
|
isSubmit: false,
|
|
- menus: [],
|
|
|
|
- defaultExpandedKeys: [],
|
|
|
|
|
|
+ menus: navs,
|
|
modalForm: {},
|
|
modalForm: {},
|
|
- defaultProps: {
|
|
|
|
- label: "name"
|
|
|
|
- },
|
|
|
|
rules: {
|
|
rules: {
|
|
name: [
|
|
name: [
|
|
{
|
|
{
|
|
@@ -109,32 +86,12 @@ export default {
|
|
message: "角色名称只能输入汉字、字母和数字,长度不能超过10",
|
|
message: "角色名称只能输入汉字、字母和数字,长度不能超过10",
|
|
trigger: "change"
|
|
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("请选择扩展字段"));
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- trigger: "change"
|
|
|
|
- }
|
|
|
|
]
|
|
]
|
|
}
|
|
}
|
|
};
|
|
};
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
- this.getMenus();
|
|
|
|
|
|
+ // this.getMenus();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
async getMenus() {
|
|
async getMenus() {
|
|
@@ -142,8 +99,6 @@ export default {
|
|
const needHideModules = ["common", "customer"];
|
|
const needHideModules = ["common", "customer"];
|
|
if (data)
|
|
if (data)
|
|
this.menus = data.filter(item => !needHideModules.includes(item.url));
|
|
this.menus = data.filter(item => !needHideModules.includes(item.url));
|
|
- this.defaultExpandedKeys = [];
|
|
|
|
- this.getDefaultExpandedKeys(this.menus);
|
|
|
|
},
|
|
},
|
|
async visibleChange() {
|
|
async visibleChange() {
|
|
if (this.instance.id) {
|
|
if (this.instance.id) {
|
|
@@ -151,20 +106,10 @@ export default {
|
|
if (this.instance.type === "CUSTOM") {
|
|
if (this.instance.type === "CUSTOM") {
|
|
let privilegeIds = await roleBoundPrivileges(this.instance.id);
|
|
let privilegeIds = await roleBoundPrivileges(this.instance.id);
|
|
privilegeIds = privilegeIds || [];
|
|
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;
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.$refs.PrivilegeSet.buildTableData(privilegeIds);
|
|
|
|
+ });
|
|
}
|
|
}
|
|
} else {
|
|
} else {
|
|
this.modalForm = { ...initModalForm };
|
|
this.modalForm = { ...initModalForm };
|
|
@@ -180,33 +125,19 @@ export default {
|
|
open() {
|
|
open() {
|
|
this.modalIsShow = true;
|
|
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() {
|
|
async submit() {
|
|
const valid = await this.$refs.modalFormComp.validate().catch(() => {});
|
|
const valid = await this.$refs.modalFormComp.validate().catch(() => {});
|
|
if (!valid) return;
|
|
if (!valid) return;
|
|
|
|
|
|
|
|
+ const privilegeIds = this.$refs.PrivilegeSet.getSelectedPrivilegeIds();
|
|
|
|
+ if (!privilegeIds.length) {
|
|
|
|
+ this.$emit("请设置角色权限!");
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
if (this.isSubmit) return;
|
|
if (this.isSubmit) return;
|
|
this.isSubmit = true;
|
|
this.isSubmit = true;
|
|
const datas = { ...this.modalForm };
|
|
const datas = { ...this.modalForm };
|
|
- const privilegeIds = [
|
|
|
|
- ...this.$refs.MenuTree.getCheckedKeys(),
|
|
|
|
- ...this.$refs.MenuTree.getHalfCheckedKeys()
|
|
|
|
- ];
|
|
|
|
datas.privilegeIds = privilegeIds;
|
|
datas.privilegeIds = privilegeIds;
|
|
const data = await updateRole(datas).catch(() => {});
|
|
const data = await updateRole(datas).catch(() => {});
|
|
this.isSubmit = false;
|
|
this.isSubmit = false;
|