optimizing advanced queries

apps/vue/src/components/Form/src/componentMap.ts

@@ -33,9 +33,12 @@ import { StrengthMeter } from '/@/components/StrengthMeter';
 import { IconPicker } from '/@/components/Icon';
 import { CountdownInput } from '/@/components/CountDown';
 import { Input as BInput } from '/@/components/Input';
+import { CodeEditorX } from '/@/components/CodeEditor';
 
 const componentMap = new Map<ComponentType, Component>();
 
+componentMap.set('CodeEditorX', CodeEditorX);
+
 componentMap.set('Input', BInput);
 componentMap.set('InputGroup', Input.Group);
 componentMap.set('InputPassword', Input.Password);

apps/vue/src/components/Form/src/types/index.ts

@@ -114,4 +114,5 @@ export type ComponentType =
   | 'Slider'
   | 'Rate'
   | 'Divider'
-  | 'ApiTransfer';
+  | 'ApiTransfer'
+  | 'CodeEditorX';

apps/vue/src/components/Table/src/BasicTable.vue

@@ -8,6 +8,7 @@
       :tableAction="tableAction"
       @register="registerForm"
       @submit="handleSearchInfoChange"
+      @reset="handleSearchInfoReset"
       @advanced-change="redoHeight"
     >
       <template #[replaceFormSlotKey(item)]="data" v-for="item in getFormSlotKeys">
@@ -46,7 +47,12 @@
       <!--        <HeaderCell :column="column" />-->
       <!--      </template>-->
     </Table>
-    <AdvancedSearch @register="registerAdSearchModal" v-bind="getAdvancedSearchProps" @search="handleAdvanceSearchChange" />
+    <AdvancedSearch
+      ref="advancedSearchRef"
+      @register="registerAdSearchModal"
+      v-bind="getAdvancedSearchProps"
+      @search="handleAdvanceSearchChange"
+    />
   </div>
 </template>
 <script lang="ts">
@@ -57,8 +63,8 @@
     ColumnChangeParam,
   } from './types/table';
 
-  import { defineComponent, ref, reactive, computed, nextTick, unref, toRaw, inject, watchEffect } from 'vue';
+  import { defineComponent, ref, reactive, computed, unref, toRaw, inject, watchEffect, nextTick } from 'vue';
-  import { Table } from 'ant-design-vue';
+  import { Button, Table } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { useModal } from '/@/components/Modal/index';
   import { PageWrapperFixedHeightKey } from '/@/components/Page';
@@ -92,6 +98,7 @@
     components: {
       Table,
       BasicForm,
+      Button,
       HeaderCell,
       AdvancedSearch,
     },
@@ -121,6 +128,7 @@
 
       const wrapRef = ref(null);
       const formRef = ref(null);
+      const advancedSearchRef = ref<any>(null);
       const innerPropsRef = ref<Partial<BasicTableProps>>();
 
       const { prefixCls } = useDesign('basic-table');
@@ -257,7 +265,7 @@
         handleSearchInfoChange,
         handleAdvanceSearchChange
       } =
-        useTableForm(getProps, slots, fetch, getLoading);
+        useTableForm(getProps, slots, fetch, getLoading, formActions.setFieldsValue);
 
       const getBindValues = computed(() => {
         const dataSource = unref(getDataSourceRef);
@@ -357,6 +365,11 @@
         }
       }
 
+      function handleSearchInfoReset() {
+        const advancedSearch = unref(advancedSearchRef);
+        advancedSearch?.resetFields();
+      }
+
       function handleAdvanceSearch() {
         nextTick(() => openAdSearchModal(true));
       }
@@ -365,14 +378,15 @@
         t,
         formRef,
         tableElRef,
+        advancedSearchRef,
         getBindValues,
         getLoading,
         registerForm,
         handleSearchInfoChange,
         registerAdSearchModal,
-        getAdvancedSearchProps,
-        handleAdvanceSearch,
         handleAdvanceSearchChange,
+        handleSearchInfoReset,
+        handleAdvanceSearch,
         getEmptyDataIsShowTable,
         handleTableChange,
         getRowClassName,
@@ -380,6 +394,7 @@
         tableAction,
         redoHeight,
         getFormProps: getFormProps as any,
+        getAdvancedSearchProps,
         replaceFormSlotKey,
         getFormSlotKeys,
         getWrapperClass,

apps/vue/src/components/Table/src/components/AdvancedSearch.vue

@@ -8,7 +8,8 @@
   >
     <Card :title="t('component.table.advancedSearch.conditions')">
       <template #extra>
-        <Button @click="handleAddField" type="primary">{{ t('component.table.advancedSearch.addCondition') }}</Button>
+        <Button @click="resetFields" danger>{{ t('component.table.advancedSearch.clearCondition') }}</Button>
+        <Button @click="handleAddField" type="primary" style="margin-left: 20px;">{{ t('component.table.advancedSearch.addCondition') }}</Button>
       </template>
       <Table
         size="small"
@@ -91,6 +92,10 @@
 
   const emits = defineEmits(['register', 'search']);
   const props = defineProps({
+    useAdvancedSearch: {
+      type: Boolean,
+      default: false,
+    },
     defineFieldApi: {
       type: Function as PropType<() => Promise<any>>
     },
@@ -207,7 +212,8 @@
   const [registerModal, { closeModal }] = useModalInner();
 
   function fetch() {
-    const { defineFieldApi, listField } = props;
+    const { useAdvancedSearch, defineFieldApi, listField } = props;
+    if (!useAdvancedSearch) return;
     if (!defineFieldApi || !isFunction(defineFieldApi)) return;
     setLoading(true);
     defineFieldApi().then((res) => {
@@ -260,11 +266,17 @@
     closeModal();
   }
 
+  function resetFields() {
+    formMdel.paramters = [];
+  }
+
   function setLoading(loading: boolean) {
     loadingRef.value = loading;
   }
+
+  defineExpose({ resetFields });
 </script>
 
 <style lang="less" scoped>
 
-</style>
+</style>

apps/vue/src/components/Table/src/hooks/useDataSource.ts

@@ -239,25 +239,30 @@ export function useDataSource(
     return findRow(dataSourceRef.value);
   }
 
-  async function fetch(opt?: FetchParams, api?: (...arg: any) => Promise<any>, request?: any) {
+  async function fetch(opt?: FetchParams) {
-    const { api: apiFunc, useSearchForm } = unref(propsRef);
-    api = api || apiFunc;
-    if (!api || !isFunction(api)) return;
-    request = request || useSearchForm ? getFieldsValue() : {};
-    _fetch(opt, api, request);
-  }
-
-  async function _fetch(opt?: FetchParams, api?: (...arg: any) => Promise<any>, request?: any) {
     const {
+      api,
       searchInfo,
       defSort,
       fetchSetting,
+      useSearchForm,
       beforeFetch,
       beforeResponse,
       afterFetch,
       pagination,
+      advancedSearchConfig,
     } = unref(propsRef);
-    if (!api || !isFunction(api)) return;
+    let fetchApi = api;
+    // 高级查询条件支持
+    if (advancedSearchConfig?.useAdvancedSearch) {
+      const searchInput = getFieldsValue();
+      console.log(searchInput);
+      if (Reflect.has(searchInput, 'queryable') &&
+          Array.isArray(searchInput.queryable?.paramters) &&
+          searchInput.queryable.paramters.length > 0)
+      fetchApi = advancedSearchConfig?.fetchApi;
+    }
+    if (!fetchApi || !isFunction(fetchApi)) return;
     try {
       setLoading(true);
       const { pageField, sizeField, listField, totalField } = Object.assign(
@@ -280,7 +285,7 @@ export function useDataSource(
 
       let params: Recordable = merge(
         pageParams,
-        request,
+        useSearchForm ? getFieldsValue() : {},
         searchInfo,
         opt?.searchInfo ?? {},
         defSort,
@@ -289,11 +294,12 @@ export function useDataSource(
         opt?.sortInfo ?? {},
         opt?.filterInfo ?? {},
       );
+      console.log(params);
       if (beforeFetch && isFunction(beforeFetch)) {
         params = (await beforeFetch(params)) || params;
       }
 
-      let res = await api(params);
+      let res = await fetchApi(params);
 
       // 增加用户自定义的返回数据处理函数
       if (beforeResponse && isFunction(beforeResponse)) {
@@ -314,7 +320,7 @@ export function useDataSource(
           setPagination({
             current: currentTotalPage,
           });
-          return await _fetch(opt, api, request);
+          return await fetch(opt);
         }
       }
 
@@ -346,7 +352,7 @@ export function useDataSource(
     }
   }
 
-  function setTableData<T = Recordable>(values: T[]) {
+  function setTableData(values: any[]) {
     dataSourceRef.value = values;
   }
 

apps/vue/src/components/Table/src/hooks/useTableForm.ts

@@ -1,18 +1,33 @@
 import type { ComputedRef, Slots } from 'vue';
 import type { BasicTableProps, FetchParams } from '../types/table';
+import type { FormProps } from '/@/components/Form';
 import type { DynamicQueryable } from '../types/advancedSearch';
+
 import { unref, computed } from 'vue';
-import type { FormProps } from '/@/components/Form';
 import { isFunction } from '/@/utils/is';
 
 export function useTableForm(
   propsRef: ComputedRef<BasicTableProps>,
   slots: Slots,
-  fetch: (opt?: FetchParams | undefined, api?: (...arg: any) => Promise<any>, request?: any) => Promise<void>,
+  fetch: (opt?: FetchParams | undefined) => Promise<void>,
   getLoading: ComputedRef<boolean | undefined>,
+  setFieldsValue: <T>(values: T) => Promise<void>,
 ) {
   const getFormProps = computed((): Partial<FormProps> => {
-    const { formConfig } = unref(propsRef);
+    const { formConfig, advancedSearchConfig } = unref(propsRef);
+    if (advancedSearchConfig?.useAdvancedSearch && formConfig?.schemas) {
+      const advIndex = formConfig.schemas.findIndex(s => s.field === 'queryable');
+      if (advIndex < 0) {
+        // 加入高级条件的隐藏字段
+        formConfig.schemas.push({
+          label: 'queryable',
+          field: 'queryable',
+          component: 'CodeEditorX',
+          show: false,
+          colProps: { span: 24 },
+        });
+      }
+    }
     const { submitButtonOptions } = formConfig || {};
     return {
       showAdvancedButton: true,
@@ -49,17 +64,17 @@ export function useTableForm(
   }
 
   function handleAdvanceSearchChange(queryable: DynamicQueryable) {
-    const { advancedSearchConfig } = unref(propsRef);
+    setFieldsValue({ queryable: queryable });
-    if (!advancedSearchConfig) return;
+    setTimeout(() => {
-    const { fetchApi } = advancedSearchConfig;
+      fetch({ page: 1 });
-    fetch({ searchInfo: { queryable: queryable }, page: 1 }, fetchApi, {});
+    }, 300);
   }
 
   return {
     getFormProps,
-    getAdvancedSearchProps,
     replaceFormSlotKey,
     getFormSlotKeys,
+    getAdvancedSearchProps,
     handleSearchInfoChange,
     handleAdvanceSearchChange,
   };