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

WitMiao · Dec 6, 2023 · 1ca3f7c · 1ca3f7c
1 parent e656b5d
commit 1ca3f7c
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 1 deletion.
diff --git 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,13 +271,36 @@
           component,
           field,
           changeEvent = 'change',
+          watchEventNames = ['search', 'change'],
+          enableWatchEvent = true,
           valueField,
         } = props.schema;
 
         const isCheck = component && ['Switch', 'Checkbox'].includes(component);
 
         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,
         };
 

diff --git 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<RowProps>,
+
+  // 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
@@ -124,6 +124,7 @@ export interface FormProps {
   submitFunc?: () => Promise<void>;
   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
@@ -259,6 +259,45 @@ export function getFormConfig(): Partial<FormProps> {
           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,
+        },
+      },
     ],
   };
 }