fix: 角色管理、账号管理修复编辑和新建时会把上次打开的数据带过来的问题

src/types/role/type.ts

@@ -12,7 +12,7 @@ export interface Role {
   // 备注
   remark: string;
   // 租户ID
-  tenantId?: number; 
+  tenantId?: number;
   isDeleted?: number;
   createdAt?: string;
   createdBy?: string;
@@ -35,7 +35,6 @@ export interface RolePageRequest extends PaginationRequest {
  */
 export type RolePageResponse = PaginationResponse<Role>;
 
-
 /**
  * 角色表单
  */
@@ -43,11 +42,9 @@ export interface RoleForm {
   id: number | null;
   roleName: string;
   remark: string;
-  cameraIds: PermissionTreeKey[];
   menuIds: PermissionTreeKey[];
   permIds: PermissionTreeKey[];
   tenantId?: number;
 }
 
 export type AssignedPermissions = Pick<RoleForm, 'cameraIds' | 'menuIds' | 'permIds'>;
-

src/views/system/role/components/RoleDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-drawer :title="title" v-model="drawerOpened" @close="reset">
+  <el-drawer :title="title" v-model="drawerOpened" @close="clear">
     <el-form label-position="left" label-width="80px" :model="formData" :rules="formRules" ref="formInstance">
       <el-form-item label="角色名称" prop="roleName">
         <el-input placeholder="角色名称" v-model="formData.roleName" />
@@ -48,17 +48,16 @@
   const funcCardInstance = ref<InstanceType<typeof PermissioTreeCard>>();
 
   let initialPermissions: AssignedPermissions | null = null;
-
-  // 表单相关
-  const defaultFormData = (): RoleForm => ({
+  const emptyValue = {
     id: null,
     roleName: '',
     remark: '',
-    cameraIds: [],
     menuIds: [],
     permIds: [],
-  });
-  const formData = reactive<RoleForm>(defaultFormData());
+  };
+  // 表单相关
+  let defaultFormData: RoleForm = { ...emptyValue };
+  let formData = reactive<RoleForm>(defaultFormData);
   const formRules: FormRules = {
     roleName: { required: true, trigger: 'blur', message: '请填写角色名称' },
     remark: {},
@@ -73,6 +72,9 @@
    */
   const open = (role?: Role) => {
     if (role) {
+      defaultFormData.id = role.id;
+      defaultFormData.roleName = role.roleName;
+      defaultFormData.remark = role.remark;
       formData.id = role.id;
       formData.roleName = role.roleName;
       formData.remark = role.remark;
@@ -80,10 +82,13 @@
 
       // TODO: 获取已拥有的权限
     } else {
+      formData.id = null;
+      formData.roleName = '';
+      formData.remark = '';
+      defaultFormData = { ...emptyValue };
       menuCardInstance.value?.setAssignedPermissions([]);
       funcCardInstance.value?.setAssignedPermissions([]);
     }
-
     drawerOpened.value = true;
   };
 
@@ -99,7 +104,12 @@
     }
   };
 
-  const displayAssignedPermissions = (result: AssignedPermissions) => {
+  const displayAssignedPermissions = (result: AssignedPermissions | null) => {
+    if (!result) {
+      menuCardInstance.value?.setAssignedPermissions([]);
+      funcCardInstance.value?.setAssignedPermissions([]);
+      return;
+    }
     if (result?.menuIds?.length) {
       menuCardInstance.value?.setAssignedPermissions(result.menuIds);
     } else {
@@ -114,14 +124,20 @@
   };
 
   /**
-   * 重置表单,回复为修改之前的默认值
+   * 重置表单,恢复为修改之前的默认值
    */
   const reset = () => {
     formInstance.value?.resetFields();
-    Object.assign(formData, defaultFormData());
+    Object.assign(formData, defaultFormData);
     displayAssignedPermissions(initialPermissions!);
   };
 
+  const clear = () => {
+    formInstance.value?.resetFields();
+    formData = Object.assign(formData, emptyValue);
+    displayAssignedPermissions(null);
+  };
+
   /**
    * 提交。创建和编辑统一
    */

src/views/system/user/CreateDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-drawer v-model="isDrawer" :size="width" :title="props.title" @close="handleReset">
+  <el-drawer v-model="isDrawer" :size="width" :title="props.title" @close="clear">
     <el-form :model="formParams" :rules="rules" ref="formRef" label-placement="left" :label-width="80">
       <el-form-item label="工号" prop="staffNo">
         <el-input placeholder="请输入工号" v-model="formParams.staffNo" v-if="staffNoHtmlType === 'INPUT'" />
@@ -148,7 +148,8 @@
       width: 450,
     },
   );
-  let defaultValue = {
+
+  const emptyValue = {
     password: '',
     passwordRe: '',
     deptId: null,
@@ -159,6 +160,7 @@
     realname: '',
     roleIdList: [],
   };
+  let defaultValue = { ...emptyValue };
   const message = ElMessage;
   const formRef: any = ref(null);
   const isDrawer = ref(false);
@@ -291,6 +293,11 @@
     formParams.value = Object.assign(formParams.value, defaultValue);
   }
 
+  function clear() {
+    formRef.value.resetFields();
+    formParams.value = Object.assign(formParams.value, emptyValue);
+  }
+
   function getInfo() {
     userInfo({ userId: Number(formParams.value.userId) }).then((res) => {
       defaultValue = res;