fix: reset back to default value after fixing form query

vben

2020-10-22 1c075a7a32dd05454bc45d4eb686e2234c3c6175

fix: reset back to default value after fixing form query

 CHANGELOG.zh_CN.md

@@ -3,6 +3,7 @@
### 🐛 Bug Fixes

- 修复抽屉组件自动高度及显示 footer 显示问题
- 修复表单查询后重置回默认值

# 2.0.0-rc.4 (2020-10-21)


 lint-staged.config.js

@@ -2,7 +2,7 @@
  '*.{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'],
};

 src/components/Basic/src/BasicArrow.vue

@@ -51,9 +51,6 @@

    &__active {
      transform: rotate(90deg);
      // > span {
      //   transform: rotate(90deg);
      // }
    }
  }
</style>

 src/components/Form/src/BasicForm.vue

@@ -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,

 src/components/Table/src/BasicTable.vue

@@ -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 }
      );

 src/views/demo/table/tableData.tsx

@@ -227,7 +227,33 @@
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() {