表单设置初始值defaultValue时候使用深度拷贝 (#1935)

* fix: fix wrong naming * perf: 表单设置初始值defaultValue时候使用深度拷贝 * perf: 表单设置初始值defaultValue时候使用深度拷贝 * Revert "perf: 表单设置初始值defaultValue时候使用深度拷贝" This reverts commit a103cd11b4c8e4eeac3be114c103a5c30f562042. * perf: perf Tree Component * fix: 解决tree树形异步懒加载,点击两次才能关闭 Co-authored-by: yfh01 <unconfigured@null.spigotmc.org>

表单设置初始值defaultValue时候使用深度拷贝 (#1935)
* fix: fix wrong naming * perf: 表单设置初始值defaultValue时候使用深度拷贝 * perf: 表单设置初始值defaultValue时候使用深度拷贝 * Revert "perf: 表单设置初始值defaultValue时候使用深度拷贝" This reverts commit a103cd11b4c8e4eeac3be114c103a5c30f562042. * perf: perf Tree Component * fix: 解决tree树形异步懒加载,点击两次才能关闭 Co-authored-by: yfh01 <unconfigured@null.spigotmc.org>
Arvin · GitHub
1 parent 857af11c
Showing 9 changed files with 32 additions and 21 deletions
src/components/Form/src/BasicForm.vue
src/components/Form/src/hooks/useFormEvents.ts
src/components/Form/src/hooks/useFormValues.ts
src/components/Tree/index.ts
src/components/Tree/src/Tree.vue → src/components/Tree/src/BasicTree.vue
src/components/Tree/src/TreeHeader.vue → src/components/Tree/src/components/TreeHeader.vue
src/components/Tree/src/useTree.ts → src/components/Tree/src/hooks/useTree.ts
src/components/Tree/src/tree.ts → src/components/Tree/src/types/tree.ts
src/views/demo/tree/index.vue
@@ -62,6 +62,7 @@
  
   import { basicProps } from './props';
   import { useDesign } from '/@/hooks/web/useDesign';
+  import { cloneDeep } from 'lodash-es';
  
   export default defineComponent({
     name: 'BasicForm',
@@ -132,9 +133,11 @@
           }
         }
         if (unref(getProps).showAdvancedButton) {
-          return schemas.filter((schema) => schema.component !== 'Divider') as FormSchema[];
+          return cloneDeep(
+            schemas.filter((schema) => schema.component !== 'Divider') as FormSchema[],
+          );
         } else {
-          return schemas as FormSchema[];
+          return cloneDeep(schemas as FormSchema[]);
         }
       });
  
@@ -39,7 +39,8 @@ export function useFormEvents({
     Object.keys(formModel).forEach((key) => {
       const schema = unref(getSchema).find((item) => item.field === key);
       const isInput = schema?.component && defaultValueComponents.includes(schema.component);
-      formModel[key] = isInput ? defaultValueRef.value[key] || '' : defaultValueRef.value[key];
+      const defaultValue = cloneDeep(defaultValueRef.value[key]);
+      formModel[key] = isInput ? defaultValue || '' : defaultValue;
     });
     nextTick(() => clearValidate());
  
@@ -100,7 +101,7 @@ export function useFormEvents({
           } catch (e) {
             // key not exist
             if (isDef(defaultValueRef.value[nestKey])) {
-              formModel[nestKey] = defaultValueRef.value[nestKey];
+              formModel[nestKey] = cloneDeep(defaultValueRef.value[nestKey]);
             }
           }
         });
@@ -3,7 +3,7 @@ import { dateUtil } from &#39;/@/utils/dateUtil&#39;;
 import { unref } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
 import type { FormProps, FormSchema } from '../types/form';
-import { set } from 'lodash-es';
+import { cloneDeep, set } from 'lodash-es';
  
 interface UseFormValuesContext {
   defaultValueRef: Ref<any>;
@@ -124,7 +124,7 @@ export function useFormValues({
         }
       }
     });
-    defaultValueRef.value = obj;
+    defaultValueRef.value = cloneDeep(obj);
   }
  
   return { handleFormValues, initDefault };
-import BasicTree from './src/Tree.vue';
+import BasicTree from './src/BasicTree.vue';
 import './style';
  
 export { BasicTree };
 export type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
-export * from './src/tree';
+export * from './src/types/tree';
 <script lang="tsx">
   import type { CSSProperties } from 'vue';
-  import type { FieldNames, TreeState, TreeItem, KeyType, CheckKeys, TreeActionType } from './tree';
+  import type {
+    FieldNames,
+    TreeState,
+    TreeItem,
+    KeyType,
+    CheckKeys,
+    TreeActionType,
+  } from './types/tree';
  
   import {
     defineComponent,
@@ -13,7 +20,7 @@
     watch,
     onMounted,
   } from 'vue';
-  import TreeHeader from './TreeHeader.vue';
+  import TreeHeader from './components/TreeHeader.vue';
   import { Tree, Spin, Empty } from 'ant-design-vue';
   import { TreeIcon } from './TreeIcon';
   import { ScrollContainer } from '/@/components/Container';
@@ -21,10 +28,10 @@
   import { isArray, isBoolean, isEmpty, isFunction } from '/@/utils/is';
   import { extendSlots, getSlot } from '/@/utils/helper/tsxHelper';
   import { filter, treeToList, eachTree } from '/@/utils/helper/treeHelper';
-  import { useTree } from './useTree';
+  import { useTree } from './hooks/useTree';
   import { useContextMenu } from '/@/hooks/web/useContextMenu';
   import { CreateContextOptions } from '/@/components/ContextMenu';
-  import { treeEmits, treeProps } from './tree';
+  import { treeEmits, treeProps } from './types/tree';
   import { createBEM } from '/@/utils/bem';
  
   export default defineComponent({
@@ -40,7 +40,7 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useDebounceFn } from '@vueuse/core';
   import { createBEM } from '/@/utils/bem';
-  import { ToolbarEnum } from './tree';
+  import { ToolbarEnum } from '../types/tree';
  
   const searchValue = ref('');
  
-import type { InsertNodeParams, KeyType, FieldNames, TreeItem } from './tree';
+import type { InsertNodeParams, KeyType, FieldNames, TreeItem } from '../types/tree';
 import type { Ref, ComputedRef } from 'vue';
 import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
  
@@ -59,7 +59,8 @@
   import { treeData } from './data';
   import { PageWrapper } from '/@/components/Page';
   import { Card, Row, Col, Spin } from 'ant-design-vue';
-  import { cloneDeep } from 'lodash-es';
+  import { cloneDeep, uniq } from 'lodash-es';
+  import { isArray } from '/@/utils/is';
  
   export default defineComponent({
     components: { BasicTree, PageWrapper, Card, Row, Col, Spin },
@@ -107,7 +108,7 @@
  
       function onLoadData(treeNode) {
         return new Promise((resolve: (value?: unknown) => void) => {
-          if (!treeNode.children) {
+          if (isArray(treeNode.children) && treeNode.children.length > 0) {
             resolve();
             return;
           }
@@ -119,15 +120,14 @@
                 { title: `Child Node ${treeNode.eventKey}-1`, key: `${treeNode.eventKey}-1` },
               ];
               asyncTreeAction.updateNodeByKey(treeNode.eventKey, { children: nodeChildren });
-              asyncTreeAction.setExpandedKeys([
-                treeNode.eventKey,
-                ...asyncTreeAction.getExpandedKeys(),
-              ]);
+              asyncTreeAction.setExpandedKeys(
+                uniq([treeNode.eventKey, ...asyncTreeAction.getExpandedKeys()]),
+              );
             }
  
             resolve();
             return;
-          }, 1000);
+          }, 300);
         });
       }
       return {