fix: 角色右上角关闭未清空数据问题修复(Closes #I6483U)

src/api/role/types.ts

@@ -25,10 +25,10 @@ export interface Role {
 export type RolePageResult = PageResult<Role[]>;
 
 /**
- * 角色表单类型
+ * 角色表单
  */
 export interface RoleForm {
-  id?: string;
+  id?: number;
   name: string;
   code: string;
   sort: number;

src/views/system/role/index.vue

@@ -47,7 +47,7 @@ const state = reactive({
     dataScope: [{ required: true, message: '请选择数据权限', trigger: 'blur' }],
     status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
   },
-  menuDialogVisible: false,
+  allocationDialogVisible: false,
   resourceOptions: [] as OptionType[],
   // 勾选的菜单ID
   checkedMenuIds: new Set([]),
@@ -67,7 +67,7 @@ const {
   dialog,
   formData,
   rules,
-  menuDialogVisible,
+  allocationDialogVisible,
   checkedRole,
   resourceOptions
 } = toRefs(state);
@@ -117,12 +117,12 @@ function handleUpdate(row: any) {
   });
 }
 
-function submitFormData() {
+function handleSubmit() {
   loading.value = true;
   dataFormRef.value.validate((valid: any) => {
     if (valid) {
       if (state.formData.id) {
-        updateRole(state.formData.id as any, state.formData).then(() => {
+        updateRole(state.formData.id, state.formData).then(() => {
           ElMessage.success('修改角色成功');
           closeDialog();
           handleQuery();
@@ -130,8 +130,8 @@ function submitFormData() {
         });
       } else {
         addRole(state.formData).then(() => {
-          closeDialog();
           ElMessage.success('新增角色成功');
+          closeDialog();
           handleQuery();
           loading.value = false;
         });
@@ -169,10 +169,10 @@ function handleDelete(row: any) {
 }
 
 /**
- * 资源分配
+ * 资源分配弹窗
  */
-function showRoleMenuDialog(row: Role) {
-  menuDialogVisible.value = true;
+function showAllocationDialog(row: Role) {
+  allocationDialogVisible.value = true;
   loading.value = true;
 
   const roleId: any = row.id;
@@ -197,16 +197,16 @@ function showRoleMenuDialog(row: Role) {
   });
 }
 /**
- * 分配资源提交
+ * 资源分配提交
  */
-function handleRoleResourceSubmit() {
+function handleAllocationSubmit() {
   const checkedMenuIds: number[] = resourceRef.value
     .getCheckedNodes(false, true)
     .map((node: any) => node.value);
 
   updateRoleMenus(checkedRole.value.id, checkedMenuIds).then(res => {
     ElMessage.success('分配权限成功');
-    menuDialogVisible.value = false;
+    allocationDialogVisible.value = false;
     handleQuery();
   });
 }
@@ -214,8 +214,8 @@ function handleRoleResourceSubmit() {
 /**
  * 关闭资源弹窗
  */
-function closeMenuDialogVisible() {
-  menuDialogVisible.value = false;
+function closeAllocationDialog() {
+  allocationDialogVisible.value = false;
 }
 
 onMounted(() => {
@@ -288,7 +288,7 @@ onMounted(() => {
             <el-button
               type="success"
               link
-              @click.stop="showRoleMenuDialog(scope.row)"
+              @click.stop="showAllocationDialog(scope.row)"
             >
               资源分配
             </el-button>
@@ -322,7 +322,7 @@ onMounted(() => {
       :title="dialog.title"
       v-model="dialog.visible"
       width="500px"
-      destroy-on-close
+      @close="closeDialog"
     >
       <el-form
         ref="dataFormRef"
@@ -366,7 +366,7 @@ onMounted(() => {
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitFormData">确 定</el-button>
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
           <el-button @click="closeDialog">取 消</el-button>
         </div>
       </template>
@@ -375,7 +375,7 @@ onMounted(() => {
     <!-- assign permission dialog -->
     <el-dialog
       :title="'【' + checkedRole.name + '】资源分配'"
-      v-model="menuDialogVisible"
+      v-model="allocationDialogVisible"
       width="800px"
     >
       <el-scrollbar max-height="600px" v-loading="loading">
@@ -394,10 +394,10 @@ onMounted(() => {
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="handleRoleResourceSubmit"
+          <el-button type="primary" @click="handleAllocationSubmit"
             >确 定</el-button
           >
-          <el-button @click="closeMenuDialogVisible">取 消</el-button>
+          <el-button @click="closeAllocationDialog">取 消</el-button>
         </div>
       </template>
     </el-dialog>

types/index.d.ts

@@ -1,5 +1,5 @@
 declare type DialogType = {
-  title: string;
+  title?: string;
   visible: boolean;
 };