diff --git a/src/components/Form/src/components/FormItem.vue b/src/components/Form/src/components/FormItem.vue index c0021519846..ec23e4b3518 100644 --- a/src/components/Form/src/components/FormItem.vue +++ b/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>[]) => { + // todo 后续需要优化input中文输入的问题 + console.log(args); + const { reload = () => {} } = props.tableAction || {}; + reload(); + }, + timer, + ); + }); + } const on = { [eventKey]: (...args: Nullable>[]) => { const [e] = args; @@ -290,7 +314,6 @@ }; const Comp = componentMap.get(component) as ReturnType; - const { autoSetPlaceHolder, size } = props.formProps; const propsData: Recordable = { allowClear: true, size, @@ -315,6 +338,7 @@ const compAttr: Recordable = { ...propsData, ...on, + ...eventNames, ...bindValue, }; diff --git a/src/components/Form/src/props.ts b/src/components/Form/src/props.ts index fb96e471e8f..8f017745f7f 100644 --- a/src/components/Form/src/props.ts +++ b/src/components/Form/src/props.ts @@ -100,4 +100,7 @@ export const basicProps = { labelAlign: propTypes.string, rowProps: Object as PropType, + + // table 开启监听表单监听事件,触发table reload + watchEvent: propTypes.bool.def(false), }; diff --git a/src/components/Form/src/types/form.ts b/src/components/Form/src/types/form.ts index 0838de8b7d6..e6c15eee0ff 100644 --- a/src/components/Form/src/types/form.ts +++ b/src/components/Form/src/types/form.ts @@ -124,6 +124,7 @@ export interface FormProps { submitFunc?: () => Promise; transformDateFunc?: (date: any) => string; colon?: boolean; + watchEvent?: boolean; } export type RenderOpts = { disabled: boolean; @@ -223,6 +224,11 @@ interface BaseFormSchema { dynamicReadonly?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean); dynamicRules?: (renderCallbackParams: RenderCallbackParams) => Rule[]; + + watchEventNames?: string[]; + + // 禁用事件监听触发reload + enableWatchEvent?: boolean; } export interface ComponentFormSchema extends BaseFormSchema { // render component diff --git a/src/views/demo/table/tableData.tsx b/src/views/demo/table/tableData.tsx index a4eb7855c0f..a1397ee9f81 100644 --- a/src/views/demo/table/tableData.tsx +++ b/src/views/demo/table/tableData.tsx @@ -259,6 +259,45 @@ export function getFormConfig(): Partial { 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, + }, + }, ], }; }