<template> <el-dialog class="modify-system-role" :visible.sync="modalIsShow" :title="title" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body fullscreen @opened="visibleChange" > <el-form ref="modalFormComp" :model="modalForm" :rules="rules" label-position="top" @submit.native.prevent > <el-form-item prop="name" label="角色名称:"> <el-input v-model.trim="modalForm.name" style="width:282px;" placeholder="请输入角色名称" clearable ></el-input> </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 slot="footer"> <el-button type="primary" :disabled="isSubmit" @click="submit" >确认</el-button > <el-button @click="cancel">取消</el-button> </div> </el-dialog> </template> <script> import { updateRole, roleBoundPrivileges } from "../../base/api"; import { schoolMenuTree } from "../api"; import PrivilegeSet from "../../base/components/PrivilegeSet"; const initModalForm = { id: null, name: "", privilegeIds: [] }; export default { name: "modify-system-role", components: { PrivilegeSet }, props: { instance: { type: Object, default() { return {}; } } }, computed: { isEdit() { return !!this.instance.id; }, title() { return (this.isEdit ? "编辑" : "新增") + "角色"; } }, data() { return { modalIsShow: false, isSubmit: false, menus: [], modalForm: {}, rules: { name: [ { required: true, pattern: /^[0-9a-zA-Z\u4E00-\u9FA5]{1,20}$/, message: "角色名称只能输入汉字、字母和数字,长度不能超过20", trigger: "change" } ] } }; }, created() { this.getMenus(); }, methods: { async getMenus() { const needHideModules = ["common", "customer"]; const data = await schoolMenuTree(); const menus = data.customPrivilegeList || []; this.menus = menus .filter(item => !needHideModules.includes(item.url)) .map(item => { item.parentId = null; return item; }); }, async visibleChange() { let privilegeIds = []; if (this.instance.id) { this.modalForm = this.$objAssign(initModalForm, this.instance); privilegeIds = await roleBoundPrivileges(this.instance.id); privilegeIds = privilegeIds || []; this.modalForm.privilegeIds = privilegeIds; } else { this.modalForm = { ...initModalForm }; } this.$nextTick(() => { this.$refs.modalFormComp.clearValidate(); this.$refs.PrivilegeSet && this.$refs.PrivilegeSet.buildTableData(privilegeIds); }); }, cancel() { this.modalIsShow = false; }, open() { this.modalIsShow = true; }, 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 }; datas.privilegeIds = privilegeIds; const data = await updateRole(datas).catch(() => {}); this.isSubmit = false; if (!data) return; this.$emit("modified", this.modalForm); this.cancel(); } } }; </script>