feat(table): Add badge to advanced search

colinin · Sep 16, 2024 · 48f40a4 · 48f40a4
1 parent c5af9ed
commit 48f40a4
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 29 deletions.
diff --git a/apps/vue/src/components/Table/src/BasicTable.vue b/apps/vue/src/components/Table/src/BasicTable.vue
@@ -15,14 +15,15 @@
         <slot :name="item" v-bind="data || {}"></slot>
       </template>
       <template #advanceBefore>
-        <Button
-          v-if="getAdvancedSearchProps?.useAdvancedSearch"
-          type="link"
-          size="small"
-          @click="handleAdvanceSearch"
-        >
-          {{ t('component.table.advancedSearch.title') }}
-        </Button>
+        <Badge v-if="getAdvancedSearchProps?.useAdvancedSearch" :count="advancedSearchInput?.paramters.length">
+          <Button
+            type="link"
+            size="small"
+            @click="handleAdvanceSearch"
+          >
+            {{ t('component.table.advancedSearch.title') }}
+          </Button>
+        </Badge>
       </template>
     </BasicForm>
 
@@ -55,7 +56,7 @@
       ref="advancedSearchRef"
       @register="registerAdSearchModal"
       v-bind="getAdvancedSearchProps"
-      @change="handleAdvanceSearchChange"
+      @change="handleAdvanceSearchChanged"
       @search="handleAdvanceSearchInfoChange"
     />
   </div>
@@ -70,13 +71,14 @@
   } from './types/table';
 
   import { defineComponent, ref, reactive, computed, unref, toRaw, inject, watchEffect, nextTick } from 'vue';
-  import { Button, Table } from 'ant-design-vue';
+  import { Badge, Button, Table } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { useModal } from '/@/components/Modal/index';
   import { PageWrapperFixedHeightKey } from '/@/components/Page';
   import HeaderCell from './components/HeaderCell.vue';
   import AdvancedSearch from './components/AdvancedSearch.vue';
   import { InnerHandlers } from './types/table';
+  import { DynamicQueryable } from './types/advancedSearch';
 
   import { usePagination } from './hooks/usePagination';
   import { useColumns } from './hooks/useColumns';
@@ -105,6 +107,7 @@
     name: 'BasicTable',
     components: {
       Table,
+      Badge,
       BasicForm,
       Button,
       HeaderCell,
@@ -137,6 +140,7 @@
       const wrapRef = ref(null);
       const formRef = ref(null);
       const advancedSearchRef = ref<any>(null);
+      const advancedSearchInput = ref<DynamicQueryable>();
       const innerPropsRef = ref<Partial<BasicTableProps>>();
 
       const { prefixCls } = useDesign('basic-table');
@@ -276,6 +280,11 @@
         getDataSourceRef,
       );
 
+      function handleAdvanceSearchChanged(queryable: DynamicQueryable) {
+        advancedSearchInput.value = queryable;
+        handleAdvanceSearchChange(queryable);
+      }
+
       const {
         getFormProps,
         getAdvancedSearchProps,
@@ -401,12 +410,13 @@
         formRef,
         tableElRef,
         advancedSearchRef,
+        advancedSearchInput,
         getBindValues,
         getLoading,
         registerForm,
         handleSearchInfoChange,
         registerAdSearchModal,
-        handleAdvanceSearchChange,
+        handleAdvanceSearchChanged,
         handleAdvanceSearchInfoChange,
         handleSearchInfoReset,
         handleAdvanceSearch,

diff --git a/apps/vue/src/components/Table/src/components/AdvancedSearch.vue b/apps/vue/src/components/Table/src/components/AdvancedSearch.vue
@@ -330,7 +330,7 @@
   function handleDelField(paramter) {
     const index = formMdel.paramters.findIndex(p => p.field === paramter.field);
     formMdel.paramters.splice(index, 1);
-    emits('change', getSearchInput());
+    emits('change', formMdel);
   }
 
   function handleFieldChange(field, record) {
@@ -344,26 +344,18 @@
       if (defineParam.javaScriptType === 'boolean') {
         record.value = false;
       }
-      emits('change', getSearchInput());
+      emits('change', formMdel);
     }
   }
 
   function handleSubmit() {
-    emits('search', getSearchInput());
+    emits('search', formMdel);
     closeModal();
   }
 
   function resetFields() {
     formMdel.paramters = [];
-    emits('change', getSearchInput());
-  }
-
-  function getSearchInput() {
-    const searchInput = {
-      // 过滤未定义值
-      paramters: formMdel.paramters.filter(p => p.value !== undefined)
-    };
-    return searchInput;
+    emits('change', formMdel);
   }
 
   function setLoading(loading: boolean) {

diff --git a/apps/vue/src/components/Table/src/hooks/useDataSource.ts b/apps/vue/src/components/Table/src/hooks/useDataSource.ts
@@ -242,12 +242,17 @@ export function useDataSource(
     } = unref(propsRef);
     let fetchApi = api;
     // 高级查询条件支持
+    const searchInput = cloneDeep(getFieldsValue());
     if (advancedSearchConfig?.useAdvancedSearch) {
-      const searchInput = getFieldsValue();
-      if (Reflect.has(searchInput, 'queryable') &&
-          Array.isArray(searchInput.queryable?.paramters) &&
-          searchInput.queryable.paramters.length > 0)
-      fetchApi = advancedSearchConfig?.fetchApi;
+      if (Reflect.has(searchInput, 'queryable') 
+          && searchInput?.queryable?.paramters 
+          && Array.isArray(searchInput.queryable?.paramters)) {
+        searchInput.queryable.paramters = searchInput.queryable.paramters
+            .filter((p) => p.value !== undefined);
+        if (searchInput.queryable.paramters.length > 0) {
+          fetchApi = advancedSearchConfig?.fetchApi;
+        }
+      }
     }
     if (!fetchApi || !isFunction(fetchApi)) return;
     try {
@@ -275,7 +280,7 @@ export function useDataSource(
 
       let params: Recordable = merge(
         pageParams,
-        useSearchForm ? getFieldsValue() : {},
+        useSearchForm ? searchInput : {},
         searchInfo,
         opt?.searchInfo ?? {},
         defSort,