feat: table搜索表单值发生改变可以触发reload (#3378)

luchanan

2023-12-06 1ca3f7c2c0c0c00e8395e26c59796c875d34e12c

feat: table搜索表单值发生改变可以触发reload (#3378)

 src/components/Form/src/components/FormItem.vue

@@ -24,6 +24,7 @@
  import { cloneDeep, upperFirst } from 'lodash-es';
  import { useItemLabelWidth } from '../hooks/useLabelWidth';
  import { useI18n } from '@/hooks/web/useI18n';
  import { useDebounceFn } from '@vueuse/core';

  export default defineComponent({
    name: 'BasicFormItem',
@@ -270,6 +271,8 @@
          component,
          field,
          changeEvent = 'change',
          watchEventNames = ['search', 'change'],
          enableWatchEvent = true,
          valueField,
        } = props.schema;

@@ -277,6 +280,27 @@

        const eventKey = `on${upperFirst(changeEvent)}`;

        const { autoSetPlaceHolder, size, watchEvent } = props.formProps;
        let eventNames = {};
        if (watchEvent && enableWatchEvent) {
          // table search 开启才触发事件
          let immediateEvents = ['search']; // 立即执行的事件
          watchEventNames.forEach((item) => {
            let timer: number = 500;
            if (immediateEvents.includes(item)) {
              timer = 0;
            }
            eventNames[`on${upperFirst(item)}`] = useDebounceFn(
              (...args: Nullable<Recordable<any>>[]) => {
                // todo 后续需要优化input中文输入的问题
                console.log(args);
                const { reload = () => {} } = props.tableAction || {};
                reload();
              },
              timer,
            );
          });
        }
        const on = {
          [eventKey]: (...args: Nullable<Recordable<any>>[]) => {
            const [e] = args;
@@ -290,7 +314,6 @@
        };
        const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>;

        const { autoSetPlaceHolder, size } = props.formProps;
        const propsData: Recordable<any> = {
          allowClear: true,
          size,
@@ -315,6 +338,7 @@
        const compAttr: Recordable<any> = {
          ...propsData,
          ...on,
          ...eventNames,
          ...bindValue,
        };


 src/components/Form/src/props.ts

@@ -100,4 +100,7 @@
  labelAlign: propTypes.string,

  rowProps: Object as PropType<RowProps>,

  // table 开启监听表单监听事件，触发table reload
  watchEvent: propTypes.bool.def(false),
};

 src/components/Form/src/types/form.ts

@@ -124,6 +124,7 @@
  submitFunc?: () => Promise<void>;
  transformDateFunc?: (date: any) => string;
  colon?: boolean;
  watchEvent?: boolean;
}
export type RenderOpts = {
  disabled: boolean;
@@ -223,6 +224,11 @@
  dynamicReadonly?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);

  dynamicRules?: (renderCallbackParams: RenderCallbackParams) => Rule[];

  watchEventNames?: string[];

  // 禁用事件监听触发reload
  enableWatchEvent?: boolean;
}
export interface ComponentFormSchema extends BaseFormSchema {
  // render component

 src/views/demo/table/tableData.tsx

@@ -259,6 +259,45 @@
          xxl: 8,
        },
      },
      {
        field: `field12`,
        label: `input值改变`,
        component: 'InputSearch',
        enableWatchEvent: true,
        componentProps: {
          placeholder: '需要开启watchEvent',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: 'field13',
        component: 'Select',
        label: 'select值改变',
        componentProps: {
          placeholder: '需要开启watchEvent',
          options: [
            {
              label: '公开',
              value: '1',
            },
            {
              label: '部分公开',
              value: '2',
            },
            {
              label: '不公开',
              value: '3',
            },
          ],
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
    ],
  };
}