fix: reset back to default value after fixing form query

vben
1 parent 5cff73bc
Showing 6 changed files with 83 additions and 47 deletions
CHANGELOG.zh_CN.md
lint-staged.config.js
src/components/Basic/src/BasicArrow.vue
src/components/Form/src/BasicForm.vue
src/components/Table/src/BasicTable.vue
src/views/demo/table/tableData.tsx
@@ -3,6 +3,7 @@
 ### 🐛 Bug Fixes
  
 - 修复抽屉组件自动高度及显示 footer 显示问题
+- 修复表单查询后重置回默认值
  
 # 2.0.0-rc.4 (2020-10-21)
  
@@ -2,7 +2,7 @@ module.exports = {
   '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
   '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
   'package.json': ['prettier --write'],
-  '*.vue': ['prettier --write', 'stylelint --fix', 'git add .'],
-  '*.{scss,less,styl,css,html}': ['stylelint --fix', 'prettier --write', 'git add .'],
+  '*.vue': ['prettier --write', 'stylelint --fix'],
+  '*.{scss,less,styl,css,html}': ['stylelint --fix', 'prettier --write'],
   '*.md': ['prettier --write'],
 };
@@ -51,9 +51,6 @@
  
     &__active {
       transform: rotate(90deg);
-      // > span {
-      //   transform: rotate(90deg);
-      // }
     }
   }
 </style>
@@ -6,7 +6,7 @@
         <FormItem
           :schema="schema"
           :formProps="getProps"
-          :allDefaultValues="getAllDefaultValues"
+          :allDefaultValues="defaultValueRef"
           :formModel="formModel"
         >
           <template #[item]="data" v-for="item in Object.keys($slots)">
@@ -56,8 +56,8 @@
  
   export default defineComponent({
     name: 'BasicForm',
-    inheritAttrs: false,
     components: { FormItem, Form, Row, FormAction },
+    inheritAttrs: false,
     props: basicProps,
     emits: ['advanced-change', 'reset', 'submit', 'register'],
     setup(props, { emit }) {
@@ -68,6 +68,7 @@
         isLoad: false,
         actionSpan: 6,
       });
+      const defaultValueRef = ref<any>({});
       const propsRef = ref<Partial<FormProps>>({});
       const schemaRef = ref<FormSchema[] | null>(null);
       const formElRef = ref<Nullable<FormType>>(null);
@@ -132,17 +133,6 @@
         return schemas as FormSchema[];
       });
  
-      const getAllDefaultValues = computed(() => {
-        const schemas = unref(getSchema);
-        const obj: any = {};
-        schemas.forEach((item) => {
-          if (item.defaultValue) {
-            obj[item.field] = item.defaultValue;
-            (formModel as any)[item.field] = item.defaultValue;
-          }
-        });
-        return obj;
-      });
       const getEmptySpanRef = computed((): number => {
         if (!advanceState.isAdvanced) {
           return 0;
@@ -174,6 +164,19 @@
         },
         { immediate: true }
       );
+
+      function initDefault() {
+        const schemas = unref(getSchema);
+        const obj: any = {};
+        schemas.forEach((item) => {
+          if (item.defaultValue) {
+            obj[item.field] = item.defaultValue;
+            (formModel as any)[item.field] = item.defaultValue;
+          }
+        });
+        defaultValueRef.value = obj;
+      }
+
       function updateAdvanced() {
         let itemColSum = 0;
         let realItemColSum = 0;
@@ -191,7 +194,7 @@
               model: formModel,
               field: schema.field,
               values: {
-                ...getAllDefaultValues,
+                ...unerf(defaultValueRef),
                 ...formModel,
               },
             });
@@ -343,6 +346,7 @@
         }
         schemaRef.value = schemaList as any;
       }
+
       /**
        * @description: 根据字段名删除
        */
@@ -354,6 +358,7 @@
           }
         }
       }
+
       /**
        * @description: 往某个字段后面插入,如果没有插入最后一个
        */
@@ -400,7 +405,6 @@
             }
           });
         });
-
         schemaRef.value = unique(schema, 'field') as any;
       }
  
@@ -412,6 +416,7 @@
         toRef(props, 'transformDateFunc'),
         toRef(props, 'fieldMapToTime')
       );
+
       function getFieldsValue(): any {
         const formEl = unref(formElRef);
         if (!formEl) return;
@@ -426,6 +431,7 @@
           return item.field === key ? dateItemType.includes(item.component!) : false;
         });
       }
+
       /**
        * @description:设置表单
        */
@@ -438,6 +444,7 @@
         if (!formElRef.value) return;
         return formElRef.value.validateFields(nameList);
       }
+
       function validate(nameList?: NamePath[] | undefined) {
         if (!formElRef.value) return;
         return formElRef.value.validate(nameList);
@@ -460,14 +467,17 @@
         validateFields: validateFields as ValidateFields,
         validate: validate as ValidateFields,
       };
+
       onMounted(() => {
+        initDefault();
         emit('register', methods);
       });
+
       return {
         handleToggleAdvanced,
         formModel,
         getActionPropsRef,
-        getAllDefaultValues,
+        defaultValueRef,
         advanceState,
         getProps,
         formElRef,
@@ -216,34 +216,36 @@
         fetch();
       }
  
+      function handleSummary() {
+        if (unref(getMergeProps).showSummary) {
+          nextTick(() => {
+            const tableEl = unref(tableElRef);
+            if (!tableEl) {
+              return;
+            }
+            const bodyDomList = tableEl.$el.querySelectorAll('.ant-table-body') as HTMLDivElement[];
+            const bodyDom = bodyDomList[0];
+            useEvent({
+              el: bodyDom,
+              name: 'scroll',
+              listener: () => {
+                const footerBodyDom = tableEl.$el.querySelector(
+                  '.ant-table-footer .ant-table-body'
+                ) as HTMLDivElement;
+                if (!footerBodyDom || !bodyDom) return;
+                footerBodyDom.scrollLeft = bodyDom.scrollLeft;
+              },
+              wait: 0,
+              options: true,
+            });
+          });
+        }
+      }
+
       watch(
         () => unref(getDataSourceRef),
         () => {
-          if (unref(getMergeProps).showSummary) {
-            nextTick(() => {
-              const tableEl = unref(tableElRef);
-              if (!tableEl) {
-                return;
-              }
-              const bodyDomList = tableEl.$el.querySelectorAll(
-                '.ant-table-body'
-              ) as HTMLDivElement[];
-              const bodyDom = bodyDomList[0];
-              useEvent({
-                el: bodyDom,
-                name: 'scroll',
-                listener: () => {
-                  const footerBodyDom = tableEl.$el.querySelector(
-                    '.ant-table-footer .ant-table-body'
-                  ) as HTMLDivElement;
-                  if (!footerBodyDom || !bodyDom) return;
-                  footerBodyDom.scrollLeft = bodyDom.scrollLeft;
-                },
-                wait: 0,
-                options: true,
-              });
-            });
-          }
+          handleSummary();
         },
         { immediate: true }
       );
@@ -227,7 +227,33 @@ export const getAdvanceSchema = (itemNumber = 6): FormSchema[] =&gt; {
 export function getFormConfig(): Partial<FormProps> {
   return {
     labelWidth: 100,
-    schemas: getAdvanceSchema(6),
+    schemas: [
+      ...getAdvanceSchema(5),
+      {
+        field: `field11`,
+        label: `字段33`,
+        component: 'Select',
+        defaultValue: '1',
+        componentProps: {
+          options: [
+            {
+              label: '选项1',
+              value: '1',
+              key: '1',
+            },
+            {
+              label: '选项2',
+              value: '2',
+              key: '2',
+            },
+          ],
+        },
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+    ],
   };
 }
 export function getBasicData() {