edit.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <template>
  2. <el-container>
  3. <el-main>
  4. <el-form :model="form.model" :rules="form.rules" ref="formRef" label-width="100px">
  5. <el-form-item label="角色名称" prop="name">
  6. <el-input v-model="form.model.name" placeholder="请输入角色名称"></el-input>
  7. </el-form-item>
  8. <el-form-item label="角色说明">
  9. <el-input
  10. type="textarea"
  11. maxlength="200"
  12. show-word-limit
  13. v-model="form.model.description"
  14. placeholder="请输入角色说明"
  15. ></el-input>
  16. </el-form-item>
  17. <el-form-item label="权限信息">
  18. <sa-access
  19. type="select"
  20. :isChangeParentId="isChangeParentId"
  21. :role_id="form.model.parent_id"
  22. :multiple="true"
  23. v-model="form.model.rules"
  24. >
  25. </sa-access>
  26. </el-form-item>
  27. </el-form>
  28. </el-main>
  29. <el-footer class="sa-footer--submit">
  30. <el-button v-if="modal.params.type == 'add'" type="primary" @click="confirm">保存</el-button>
  31. <el-button v-if="modal.params.type == 'edit'" type="primary" @click="confirm">更新</el-button>
  32. </el-footer>
  33. </el-container>
  34. </template>
  35. <script setup>
  36. import { reactive, ref, unref, onMounted } from 'vue';
  37. import { ElMessage } from 'element-plus';
  38. import { roleMockData } from '@/sheep/mock/role';
  39. import SaAccess from '../access/components/sa-access.vue';
  40. import { cloneDeep } from 'lodash';
  41. const emit = defineEmits(['modalCallBack']);
  42. const props = defineProps({
  43. modal: {
  44. type: Object,
  45. },
  46. });
  47. // 添加 编辑 form
  48. const formRef = ref(null);
  49. const form = reactive({
  50. model: {
  51. parent_id: '',
  52. name: '',
  53. description: '',
  54. status: 'normal',
  55. rules: [],
  56. },
  57. rules: {
  58. name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
  59. },
  60. });
  61. const isChangeParentId = ref(false);
  62. // 获取详情
  63. async function getDetail(id) {
  64. try {
  65. const result = roleMockData.getDetail(id);
  66. if (result.code == '200') {
  67. form.model = { ...result.data };
  68. // 确保rules是数组格式,用于sa-access组件
  69. if (!form.model.rules || !Array.isArray(form.model.rules)) {
  70. form.model.rules = [];
  71. }
  72. console.log('角色详情数据:', form.model);
  73. } else {
  74. ElMessage.error(result.msg);
  75. }
  76. } catch (error) {
  77. console.error('获取详情失败:', error);
  78. ElMessage.error('获取详情失败');
  79. }
  80. }
  81. // 表单关闭时提交
  82. function confirm() {
  83. // 表单验证
  84. unref(formRef).validate(async (valid) => {
  85. if (!valid) return;
  86. try {
  87. let submitForm = cloneDeep(form.model);
  88. console.log('提交的表单数据:', submitForm);
  89. // 处理权限数据,从rules数组中提取权限信息
  90. if (submitForm.rules && submitForm.rules.length > 0) {
  91. const permissions = [];
  92. const extractPermissions = (rules) => {
  93. rules.forEach((rule) => {
  94. if (rule.title && rule.checked) {
  95. permissions.push(rule.title);
  96. }
  97. if (rule.children && rule.children.length > 0) {
  98. extractPermissions(rule.children);
  99. }
  100. });
  101. };
  102. extractPermissions(submitForm.rules);
  103. submitForm.permissions = permissions;
  104. submitForm.permissions_text = permissions.join('、');
  105. }
  106. const result =
  107. props.modal.params.type == 'add'
  108. ? roleMockData.create(submitForm)
  109. : roleMockData.update(props.modal.params.id, submitForm);
  110. if (result.code == '200') {
  111. ElMessage.success(props.modal.params.type == 'add' ? '创建成功' : '更新成功');
  112. emit('modalCallBack', { event: 'confirm' });
  113. } else {
  114. ElMessage.error(result.msg);
  115. }
  116. } catch (error) {
  117. console.error('提交失败:', error);
  118. ElMessage.error('提交失败');
  119. }
  120. });
  121. }
  122. onMounted(async () => {
  123. if (props.modal.params.type == 'edit') {
  124. await getDetail(props.modal.params.id);
  125. }
  126. });
  127. </script>
  128. <style lang="scss" scoped>
  129. .sa-access {
  130. height: 500px;
  131. :deep() {
  132. .el-main {
  133. background: transparent;
  134. }
  135. .el-scrollbar {
  136. border-top: 1px solid var(--sa-border);
  137. border-bottom: 1px solid var(--sa-border);
  138. &:first-of-type {
  139. margin-left: 0;
  140. }
  141. }
  142. }
  143. }
  144. </style>