ModifySystemRole.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. <template>
  2. <el-dialog
  3. class="modify-role"
  4. :visible.sync="modalIsShow"
  5. :title="title"
  6. top="10px"
  7. width="700px"
  8. :close-on-click-modal="false"
  9. :close-on-press-escape="false"
  10. append-to-body
  11. @opened="visibleChange"
  12. >
  13. <div class="part-box part-box-pad part-box-border">
  14. <el-form
  15. ref="modalFormComp"
  16. :model="modalForm"
  17. :rules="rules"
  18. label-width="100px"
  19. >
  20. <el-form-item prop="name" label="角色名称:">
  21. <el-input
  22. style="width:100%;"
  23. v-model.trim="modalForm.name"
  24. placeholder="请输入角色名称"
  25. clearable
  26. ></el-input>
  27. </el-form-item>
  28. <el-form-item prop="privilegeIds" label="角色权限:">
  29. <div class="part-box part-box-pad part-box-border">
  30. <el-tree
  31. :data="menus"
  32. show-checkbox
  33. node-key="id"
  34. ref="MenuTree"
  35. highlight-current
  36. check-on-click-node
  37. :expand-on-click-node="false"
  38. :default-expanded-keys="defaultExpandedKeys"
  39. :props="defaultProps"
  40. @check-change="checkChange"
  41. >
  42. <span class="custom-tree-node" slot-scope="{ node, data }">
  43. <span
  44. ><i class="el-icon-link" v-if="data.type === 'URL'"></i>
  45. {{ node.label }}</span
  46. >
  47. </span>
  48. </el-tree>
  49. </div>
  50. </el-form-item>
  51. </el-form>
  52. </div>
  53. <div slot="footer">
  54. <el-button type="primary" :disabled="isSubmit" @click="submit"
  55. >确认</el-button
  56. >
  57. <el-button type="danger" @click="cancel" plain>取消</el-button>
  58. </div>
  59. </el-dialog>
  60. </template>
  61. <script>
  62. import { updateRole, menuAuthList, roleBoundPrivileges } from "../../base/api";
  63. const initModalForm = {
  64. id: null,
  65. name: "",
  66. type: "CUSTOM",
  67. privilegeIds: []
  68. };
  69. export default {
  70. name: "modify-role",
  71. props: {
  72. instance: {
  73. type: Object,
  74. default() {
  75. return {};
  76. }
  77. }
  78. },
  79. computed: {
  80. isEdit() {
  81. return !!this.instance.id;
  82. },
  83. title() {
  84. return (this.isEdit ? "编辑" : "新增") + "角色";
  85. }
  86. },
  87. data() {
  88. return {
  89. modalIsShow: false,
  90. isSubmit: false,
  91. menus: [],
  92. defaultExpandedKeys: [],
  93. modalForm: {},
  94. defaultProps: {
  95. label: "name"
  96. },
  97. rules: {
  98. name: [
  99. {
  100. required: true,
  101. pattern: /^[0-9a-zA-Z\u4E00-\u9FA5]{1,10}$/,
  102. message: "角色名称只能输入汉字、字母和数字,长度不能超过10",
  103. trigger: "change"
  104. }
  105. ],
  106. type: [
  107. {
  108. required: true,
  109. message: "请选择角色类型",
  110. trigger: "change"
  111. }
  112. ],
  113. privilegeIds: [
  114. {
  115. required: true,
  116. validator: (rule, value, callback) => {
  117. if (this.modalForm.type !== "CUSTOM" || value.length) {
  118. callback();
  119. } else {
  120. callback(new Error("请选择扩展字段"));
  121. }
  122. },
  123. trigger: "change"
  124. }
  125. ]
  126. }
  127. };
  128. },
  129. created() {
  130. this.getMenus();
  131. },
  132. methods: {
  133. async getMenus() {
  134. const data = await menuAuthList();
  135. if (data) this.menus = data.filter(item => item.url !== "common");
  136. this.defaultExpandedKeys = [];
  137. this.getDefaultExpandedKeys(this.menus);
  138. },
  139. async visibleChange() {
  140. console.log(this.instance);
  141. if (this.instance.id) {
  142. this.modalForm = this.$objAssign(initModalForm, this.instance);
  143. let privilegeIds = await roleBoundPrivileges(this.instance.id);
  144. privilegeIds = privilegeIds || [];
  145. let checkedIds = [];
  146. const getCheckedIds = list => {
  147. list.forEach(item => {
  148. if (item["children"] && item["children"].length) {
  149. getCheckedIds(item.children);
  150. } else {
  151. const isChecked = privilegeIds.includes(item.id);
  152. if (isChecked) checkedIds.push(item.id);
  153. }
  154. });
  155. };
  156. getCheckedIds(this.menus);
  157. this.$refs.MenuTree.setCheckedKeys(checkedIds);
  158. this.modalForm.privilegeIds = checkedIds;
  159. } else {
  160. this.modalForm = { ...initModalForm };
  161. this.$refs.MenuTree.setCheckedKeys([]);
  162. }
  163. this.$nextTick(() => {
  164. this.$refs.modalFormComp.clearValidate();
  165. });
  166. },
  167. cancel() {
  168. this.modalIsShow = false;
  169. },
  170. open() {
  171. this.modalIsShow = true;
  172. },
  173. getDefaultExpandedKeys(menus) {
  174. menus.forEach(item => {
  175. if (
  176. item.children &&
  177. item.children.length &&
  178. !item.children.some(elem => elem.type === "URL")
  179. ) {
  180. this.defaultExpandedKeys.push(item.id);
  181. this.getDefaultExpandedKeys(item.children);
  182. }
  183. });
  184. },
  185. checkChange(data, checked) {
  186. this.modalForm.privilegeIds = this.$refs.MenuTree.getCheckedKeys();
  187. this.$refs.modalFormComp.validateField("privilegeIds");
  188. },
  189. async submit() {
  190. const valid = await this.$refs.modalFormComp.validate().catch(() => {});
  191. if (!valid) return;
  192. if (this.isSubmit) return;
  193. this.isSubmit = true;
  194. const datas = { ...this.modalForm };
  195. const privilegeIds = [
  196. ...this.$refs.MenuTree.getCheckedKeys(),
  197. ...this.$refs.MenuTree.getHalfCheckedKeys()
  198. ];
  199. datas.privilegeIds = privilegeIds;
  200. const data = await updateRole(datas).catch(() => {});
  201. this.isSubmit = false;
  202. if (!data) return;
  203. this.$emit("modified", this.modalForm);
  204. this.cancel();
  205. }
  206. }
  207. };
  208. </script>