From 382d441c3d89e2b21657ae7e71148bed37b0141e Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Sun, 9 Oct 2022 17:18:16 +0800
Subject: [PATCH 1/2] add dynamic query ui

---
 .../api/task-management/backgroundJobInfo.ts  |  16 ++
 .../src/components/Table/src/BasicTable.vue   |  37 ++-
 .../Table/src/components/AdvancedSearch.vue   | 270 ++++++++++++++++++
 .../Table/src/hooks/useDataSource.ts          |  16 +-
 .../Table/src/hooks/useTableForm.ts           |  18 +-
 .../Table/src/types/advancedSearch.ts         |  82 ++++++
 .../src/components/Table/src/types/table.ts   |   6 +-
 apps/vue/src/locales/lang/en/component.ts     |  24 ++
 apps/vue/src/locales/lang/en/table.ts         |   1 +
 apps/vue/src/locales/lang/zh-CN/component.ts  |  26 +-
 apps/vue/src/locales/lang/zh-CN/table.ts      |   1 +
 .../background-jobs/components/JobTable.vue   |   7 +
 .../Queryable/Dto/DynamicParamterDto.cs       |   1 +
 .../Queryable/DynamicQueryableAppService.cs   |  48 +++-
 .../Reflection/NullableTypeExtensions.cs      |   9 +
 15 files changed, 549 insertions(+), 13 deletions(-)
 create mode 100644 apps/vue/src/components/Table/src/components/AdvancedSearch.vue
 create mode 100644 apps/vue/src/components/Table/src/types/advancedSearch.ts
 create mode 100644 aspnet-core/modules/dynamic-queryable/LINGYUN.Linq.Dynamic.Queryable/System/Reflection/NullableTypeExtensions.cs

diff --git a/apps/vue/src/api/task-management/backgroundJobInfo.ts b/apps/vue/src/api/task-management/backgroundJobInfo.ts
index fbf58bd43..41f46f7f4 100644
--- a/apps/vue/src/api/task-management/backgroundJobInfo.ts
+++ b/apps/vue/src/api/task-management/backgroundJobInfo.ts
@@ -8,6 +8,7 @@ import {
 } from './model/backgroundJobInfoModel';
 import { format } from '/@/utils/strings';
 import { ListResultDto, PagedResultDto } from '../model/baseModel';
+import { DefineParamter, DynamicQueryable } from '/@/components/Table/src/types/advancedSearch';
 
 enum Api {
   GetById = '/api/task-management/background-jobs/{id}',
@@ -27,6 +28,8 @@ enum Api {
   BulkStop = '/api/task-management/background-jobs/bulk-stop',
   BulkDelete = '/api/task-management/background-jobs/bulk-delete',
   GetDefinitions = '/api/task-management/background-jobs/definitions',
+  GetAvailableFields = '/api/task-management/background-jobs/available-fields',
+  AdvancedSearch = '/api/task-management/background-jobs/search',
 }
 
 export const getById = (id: string) => {
@@ -42,6 +45,19 @@ export const getList = (input: BackgroundJobInfoGetListInput) => {
   });
 };
 
+export const getAvailableFields = () => {
+  return defAbpHttp.get<ListResultDto<DefineParamter>>({
+    url: Api.GetAvailableFields,
+  });
+}
+
+export const advancedSearch = (input: DynamicQueryable) => {
+  return defAbpHttp.post<PagedResultDto<BackgroundJobInfo>>({
+    url: Api.AdvancedSearch,
+    data: input,
+  });
+}
+
 export const getDefinitions = () => {
   return defAbpHttp.get<ListResultDto<BackgroundJobDefinition>>({
     url: Api.GetDefinitions,
diff --git a/apps/vue/src/components/Table/src/BasicTable.vue b/apps/vue/src/components/Table/src/BasicTable.vue
index 80a33c439..f5b8c8ff3 100644
--- a/apps/vue/src/components/Table/src/BasicTable.vue
+++ b/apps/vue/src/components/Table/src/BasicTable.vue
@@ -13,6 +13,16 @@
       <template #[replaceFormSlotKey(item)]="data" v-for="item in getFormSlotKeys">
         <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>
+      </template>
     </BasicForm>
 
     <Table
@@ -36,6 +46,7 @@
       <!--        <HeaderCell :column="column" />-->
       <!--      </template>-->
     </Table>
+    <AdvancedSearch @register="registerAdSearchModal" v-bind="getAdvancedSearchProps" @search="handleAdvanceSearchChange" />
   </div>
 </template>
 <script lang="ts">
@@ -46,11 +57,13 @@
     ColumnChangeParam,
   } from './types/table';
 
-  import { defineComponent, ref, reactive, computed, unref, toRaw, inject, watchEffect } from 'vue';
+  import { defineComponent, ref, reactive, computed, nextTick, unref, toRaw, inject, watchEffect } from 'vue';
   import { 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 { usePagination } from './hooks/usePagination';
@@ -68,6 +81,7 @@
   import { useTableFooter } from './hooks/useTableFooter';
   import { useTableForm } from './hooks/useTableForm';
   import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
 
   import { omit } from 'lodash-es';
   import { basicProps } from './props';
@@ -79,6 +93,7 @@
       Table,
       BasicForm,
       HeaderCell,
+      AdvancedSearch,
     },
     props: basicProps,
     emits: [
@@ -100,6 +115,7 @@
       'columns-change',
     ],
     setup(props, { attrs, emit, slots, expose }) {
+      const { t } = useI18n();
       const tableElRef = ref(null);
       const tableData = ref<Recordable[]>([]);
 
@@ -109,6 +125,7 @@
 
       const { prefixCls } = useDesign('basic-table');
       const [registerForm, formActions] = useForm();
+      const [registerAdSearchModal, { openModal: openAdSearchModal }] = useModal();
 
       const getProps = computed(() => {
         return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
@@ -232,7 +249,14 @@
         getDataSourceRef,
       );
 
-      const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } =
+      const {
+        getFormProps,
+        getAdvancedSearchProps,
+        replaceFormSlotKey,
+        getFormSlotKeys,
+        handleSearchInfoChange,
+        handleAdvanceSearchChange
+      } =
         useTableForm(getProps, slots, fetch, getLoading);
 
       const getBindValues = computed(() => {
@@ -333,13 +357,22 @@
         }
       }
 
+      function handleAdvanceSearch() {
+        nextTick(() => openAdSearchModal(true));
+      }
+
       return {
+        t,
         formRef,
         tableElRef,
         getBindValues,
         getLoading,
         registerForm,
         handleSearchInfoChange,
+        registerAdSearchModal,
+        getAdvancedSearchProps,
+        handleAdvanceSearch,
+        handleAdvanceSearchChange,
         getEmptyDataIsShowTable,
         handleTableChange,
         getRowClassName,
diff --git a/apps/vue/src/components/Table/src/components/AdvancedSearch.vue b/apps/vue/src/components/Table/src/components/AdvancedSearch.vue
new file mode 100644
index 000000000..ff3f52da0
--- /dev/null
+++ b/apps/vue/src/components/Table/src/components/AdvancedSearch.vue
@@ -0,0 +1,270 @@
+<template>
+  <BasicModal
+    @register="registerModal"
+    :width="800"
+    :title="t('component.table.advancedSearch.title')"
+    :can-fullscreen="false"
+    @ok="handleSubmit"
+  >
+    <Card :title="t('component.table.advancedSearch.conditions')">
+      <template #extra>
+        <Button @click="handleAddField" type="primary">{{ t('component.table.advancedSearch.addCondition') }}</Button>
+      </template>
+      <Table
+        size="small"
+        rowKey="field"
+        :columns="columns"
+        :data-source="formMdel.paramters"
+        :pagination="false"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dataIndex==='field'">
+            <Select
+              style="width: 100%;"
+              v-model:value="record.field"
+              :options="getAvailableParams"
+              :field-names="{ label: 'description', value: 'name' }"
+              @change="(field) => handleFieldChange(field, record)"
+            />
+          </template>
+          <template v-else-if="column.dataIndex==='comparison'">
+            <Select
+              style="width: 100%;"
+              v-model:value="record.comparison"
+              :options="comparisonOptions"
+            />
+          </template>
+          <template v-else-if="column.dataIndex==='value'">
+            <Input v-if="record.javaScriptType==='string'" v-model:value="record.value" />
+            <InputNumber v-else-if="record.javaScriptType==='number'" style="width: 100%;" v-model:value="record.value" />
+            <Switch v-else-if="record.javaScriptType==='boolean'" v-model:checked="record.value" />
+            <DatePicker v-else-if="record.javaScriptType==='Date'" style="width: 100%;" v-model:value="record.value" />
+            <CodeEditorX
+              v-else-if="['array', 'object'].includes(record.javaScriptType)"
+              style="width: 100%; height: 300px"
+              :mode="MODE.JSON"
+              v-model="record.value"
+            />
+          </template>
+          <template v-else-if="column.dataIndex==='logic'">
+            <Select
+              style="width: 100%;"
+              v-model:value="record.logic"
+              :options="logicOptions"
+            />
+          </template>
+          <template v-else-if="column.dataIndex==='actions'">
+            <Popconfirm
+              v-if="formMdel.paramters.length"
+              :title="t('table.sureToDelete')"
+              @confirm="handleDelField(record)"
+            >
+              <DeleteTwoTone two-tone-color="#FF4500" />
+            </Popconfirm>
+          </template>
+        </template>
+      </Table>
+    </Card>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, reactive, unref, onMounted } from 'vue';
+  import { DeleteTwoTone } from '@ant-design/icons-vue';
+  import {
+    Button,
+    Card,
+    DatePicker,
+    Input,
+    InputNumber,
+    Popconfirm,
+    Select,
+    Switch,
+    Table
+  } from 'ant-design-vue';
+  import { CodeEditorX, MODE } from '/@/components/CodeEditor';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { DefineParamter, DynamicLogic, DynamicComparison, DynamicQueryable } from '../types/advancedSearch';
+  import { isFunction } from '/@/utils/is';
+  import { get } from 'lodash-es';
+
+  const emits = defineEmits(['register', 'search']);
+  const props = defineProps({
+    defineFieldApi: {
+      type: Function as PropType<() => Promise<any>>
+    },
+    listField: {
+      type: String,
+    }
+  });
+  const { t } = useI18n();
+  const loadingRef = ref(false);
+  const formMdel = reactive<DynamicQueryable>({
+    paramters: [],
+  });
+
+  const columns = [
+    {
+      dataIndex: 'field',
+      key: 'field',
+      title: t('component.table.advancedSearch.field'),
+    },
+    {
+      dataIndex: 'comparison',
+      key: 'comparison',
+      title: t('component.table.advancedSearch.comparison'),
+    },
+    {
+      dataIndex: 'value',
+      key: 'value',
+      title: t('component.table.advancedSearch.value'),
+    },
+    {
+      dataIndex: 'logic',
+      key: 'logic',
+      title: t('component.table.advancedSearch.logic'),
+    },
+    {
+      title: t('table.action'),
+      dataIndex: 'actions',
+      align: 'center',
+    },
+  ];
+
+  const defineParamsRef = ref<DefineParamter[]>([]);
+
+  const logicOptions = reactive([
+    {
+      label: t('component.table.advancedSearch.and'),
+      value: DynamicLogic.And,
+    },
+    {
+      label: t('component.table.advancedSearch.or'),
+      value: DynamicLogic.Or,
+    },
+  ]);
+
+  const comparisonOptions = reactive([
+    {
+      label: t('component.table.advancedSearch.equal'),
+      value: DynamicComparison.Equal,
+    },
+    {
+      label: t('component.table.advancedSearch.notEqual'),
+      value: DynamicComparison.NotEqual,
+    },
+    {
+      label: t('component.table.advancedSearch.lessThan'),
+      value: DynamicComparison.LessThan,
+    },
+    {
+      label: t('component.table.advancedSearch.lessThanOrEqual'),
+      value: DynamicComparison.LessThanOrEqual,
+    },
+    {
+      label: t('component.table.advancedSearch.greaterThan'),
+      value: DynamicComparison.GreaterThan,
+    },
+    {
+      label: t('component.table.advancedSearch.greaterThanOrEqual'),
+      value: DynamicComparison.GreaterThanOrEqual,
+    },
+    {
+      label: t('component.table.advancedSearch.startsWith'),
+      value: DynamicComparison.StartsWith,
+    },
+    {
+      label: t('component.table.advancedSearch.notStartsWith'),
+      value: DynamicComparison.NotStartsWith,
+    },
+    {
+      label: t('component.table.advancedSearch.endsWith'),
+      value: DynamicComparison.EndsWith,
+    },
+    {
+      label: t('component.table.advancedSearch.notEndsWith'),
+      value: DynamicComparison.NotEndsWith,
+    },
+    {
+      label: t('component.table.advancedSearch.contains'),
+      value: DynamicComparison.Contains,
+    },
+    {
+      label: t('component.table.advancedSearch.notContains'),
+      value: DynamicComparison.NotContains,
+    },
+  ]);
+
+  const getAvailableParams = computed(() => {
+    const defineParams = unref(defineParamsRef);
+    if (!defineParams.length) return[];
+    return defineParams.filter(dp => !formMdel.paramters.some(fp => fp.field === dp.name));
+  });
+
+  onMounted(fetch);
+
+  const [registerModal, { closeModal }] = useModalInner();
+
+  function fetch() {
+    const { defineFieldApi, listField } = props;
+    if (!defineFieldApi || !isFunction(defineFieldApi)) return;
+    setLoading(true);
+    defineFieldApi().then((res) => {
+      const isArrayResult = Array.isArray(res);
+      const resultItems: DefineParamter[] = isArrayResult ? res : get(res, listField || 'items');
+      defineParamsRef.value = resultItems;
+    }).finally(() => {
+      setLoading(false);
+    });
+  }
+
+  function handleAddField() {
+    const availableParams = unref(getAvailableParams);
+    if (availableParams.length > 0) {
+      const bindParamter = availableParams[availableParams.length - 1];
+      formMdel.paramters.push({
+        field: bindParamter.name,
+        logic: DynamicLogic.And,
+        comparison: DynamicComparison.Equal,
+        javaScriptType: bindParamter.javaScriptType,
+        value: undefined,
+      });
+    }
+  }
+
+  function handleDelField(paramter) {
+    const index = formMdel.paramters.findIndex(p => p.field === paramter.field);
+    formMdel.paramters.splice(index, 1);
+  }
+
+  function handleFieldChange(field, record) {
+    const defineParams = unref(defineParamsRef);
+    const defineParam = defineParams.find(dp => dp.name === field);
+    if (defineParam) {
+      record.field = defineParam.name;
+      record.javaScriptType = defineParam.javaScriptType;
+      record.value = undefined;
+      if (defineParam.javaScriptType === 'boolean') {
+        record.value = false;
+      }
+    }
+  }
+
+  function handleSubmit() {
+    const searchInput = {
+      // 过滤未定义值
+      paramters: formMdel.paramters.filter(p => p.value !== undefined)
+    };
+    emits('search', searchInput);
+    closeModal();
+  }
+
+  function setLoading(loading: boolean) {
+    loadingRef.value = loading;
+  }
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/apps/vue/src/components/Table/src/hooks/useDataSource.ts b/apps/vue/src/components/Table/src/hooks/useDataSource.ts
index 6c3c5d86a..3a82c07ed 100644
--- a/apps/vue/src/components/Table/src/hooks/useDataSource.ts
+++ b/apps/vue/src/components/Table/src/hooks/useDataSource.ts
@@ -239,16 +239,22 @@ export function useDataSource(
     return findRow(dataSourceRef.value);
   }
 
-  async function fetch(opt?: FetchParams) {
+  async function fetch(opt?: FetchParams, api?: (...arg: any) => Promise<any>, request?: any) {
+    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,
       beforeFetch,
       beforeResponse,
       afterFetch,
-      useSearchForm,
       pagination,
     } = unref(propsRef);
     if (!api || !isFunction(api)) return;
@@ -274,7 +280,7 @@ export function useDataSource(
 
       let params: Recordable = merge(
         pageParams,
-        useSearchForm ? getFieldsValue() : {},
+        request,
         searchInfo,
         opt?.searchInfo ?? {},
         defSort,
@@ -308,7 +314,7 @@ export function useDataSource(
           setPagination({
             current: currentTotalPage,
           });
-          return await fetch(opt);
+          return await _fetch(opt, api, request);
         }
       }
 
diff --git a/apps/vue/src/components/Table/src/hooks/useTableForm.ts b/apps/vue/src/components/Table/src/hooks/useTableForm.ts
index bc09c7f6d..f89e28e89 100644
--- a/apps/vue/src/components/Table/src/hooks/useTableForm.ts
+++ b/apps/vue/src/components/Table/src/hooks/useTableForm.ts
@@ -1,5 +1,6 @@
 import type { ComputedRef, Slots } from 'vue';
 import type { BasicTableProps, FetchParams } from '../types/table';
+import type { DynamicQueryable } from '../types/advancedSearch';
 import { unref, computed } from 'vue';
 import type { FormProps } from '/@/components/Form';
 import { isFunction } from '/@/utils/is';
@@ -7,7 +8,7 @@ import { isFunction } from '/@/utils/is';
 export function useTableForm(
   propsRef: ComputedRef<BasicTableProps>,
   slots: Slots,
-  fetch: (opt?: FetchParams | undefined) => Promise<void>,
+  fetch: (opt?: FetchParams | undefined, api?: (...arg: any) => Promise<any>, request?: any) => Promise<void>,
   getLoading: ComputedRef<boolean | undefined>,
 ) {
   const getFormProps = computed((): Partial<FormProps> => {
@@ -28,6 +29,12 @@ export function useTableForm(
       .filter((item) => !!item) as string[];
   });
 
+  const getAdvancedSearchProps = computed(() => {
+    const { advancedSearchConfig } = unref(propsRef);
+
+    return advancedSearchConfig;
+  });
+
   function replaceFormSlotKey(key: string) {
     if (!key) return '';
     return key?.replace?.(/form\-/, '') ?? '';
@@ -41,10 +48,19 @@ export function useTableForm(
     fetch({ searchInfo: info, page: 1 });
   }
 
+  function handleAdvanceSearchChange(queryable: DynamicQueryable) {
+    const { advancedSearchConfig } = unref(propsRef);
+    if (!advancedSearchConfig) return;
+    const { fetchApi } = advancedSearchConfig;
+    fetch({ searchInfo: { queryable: queryable }, page: 1 }, fetchApi, {});
+  }
+
   return {
     getFormProps,
+    getAdvancedSearchProps,
     replaceFormSlotKey,
     getFormSlotKeys,
     handleSearchInfoChange,
+    handleAdvanceSearchChange,
   };
 }
diff --git a/apps/vue/src/components/Table/src/types/advancedSearch.ts b/apps/vue/src/components/Table/src/types/advancedSearch.ts
new file mode 100644
index 000000000..c87ddce21
--- /dev/null
+++ b/apps/vue/src/components/Table/src/types/advancedSearch.ts
@@ -0,0 +1,82 @@
+/** 高级查询条件属性 */
+export interface AdvanceSearchProps {
+  /** 使用高级查询 */
+  useAdvancedSearch?: boolean;
+  /** 字段列表api */
+  defineFieldApi?: () => Promise<any>;
+  /**
+   * 字段列表api返回结果字段
+   * @remarks 从服务器返回字段列表在数据结构中的字段名,默认: items
+  */
+  listField?: string;
+  /** 高级查询api */
+  fetchApi?: (...arg: any) => Promise<any>,
+}
+
+/** 自定义字段 */
+export interface DefineParamter {
+  /** 字段名称 */
+  name: string;
+  /** 字段描述 */
+  description?: string;
+  /** 数据类型(后端) */
+  type: string;
+  /** 数据类型(js) */
+  javaScriptType: string;
+}
+
+/** 连接条件 */
+export enum DynamicLogic {
+  /** 且 */
+  And = 0,
+  /** 或 */
+  Or = 1
+}
+
+/** 运算条件 */
+export enum DynamicComparison {
+  /** 等于 */
+  Equal = 0,
+  /** 不等于 */
+  NotEqual = 1,
+  /** 小于 */
+  LessThan = 2,
+  /** 小于等于 */
+  LessThanOrEqual = 3,
+  /** 大于 */
+  GreaterThan = 4,
+  /** 大于等于 */
+  GreaterThanOrEqual = 5,
+  /** 左包含 */
+  StartsWith = 6,
+  /** 左不包含 */
+  NotStartsWith = 7,
+  /** 右包含 */
+  EndsWith = 8,
+  /** 右不包含 */
+  NotEndsWith = 9,
+  /** 包含 */
+  Contains = 10,
+  /** 不包含 */
+  NotContains = 11
+}
+
+/** 动态查询字段 */
+export interface DynamicParamter {
+  /** 字段名称 */
+  field: string;
+  /** 连接条件 */
+  logic: DynamicLogic;
+  /** 运算条件 */
+  comparison: DynamicComparison;
+  /** 比较值 */
+  value: any;
+  /** 数据类型(js), 仅作为前端输入控件切换 */
+  javaScriptType?: string;
+}
+
+/** 动态查询条件 */
+export interface DynamicQueryable {
+  /** 参数列表 */
+  paramters: DynamicParamter[];
+}
diff --git a/apps/vue/src/components/Table/src/types/table.ts b/apps/vue/src/components/Table/src/types/table.ts
index 6e261fb4f..dcc949230 100644
--- a/apps/vue/src/components/Table/src/types/table.ts
+++ b/apps/vue/src/components/Table/src/types/table.ts
@@ -1,8 +1,8 @@
 import type { VNodeChild } from 'vue';
 import type { PaginationProps } from './pagination';
 import type { FormProps } from '/@/components/Form';
-import type { TableRowSelection as ITableRowSelection } from 'ant-design-vue/lib/table/interface';
-import type { ColumnProps } from 'ant-design-vue/lib/table';
+import type { ColumnProps, TableRowSelection as ITableRowSelection } from 'ant-design-vue/lib/table/interface';
+import type { AdvanceSearchProps } from './advancedSearch';
 
 import { ComponentType } from './componentType';
 import { VueNode } from '/@/utils/propTypes';
@@ -185,6 +185,8 @@ export interface BasicTableProps<T = any> {
   useSearchForm?: boolean;
   // 表单配置
   formConfig?: Partial<FormProps>;
+   // 高级查询配置
+  advancedSearchConfig?: Partial<AdvanceSearchProps>;
   // 列配置
   columns: BasicColumn[];
   // 是否显示序号列
diff --git a/apps/vue/src/locales/lang/en/component.ts b/apps/vue/src/locales/lang/en/component.ts
index 379f0d081..0308706e6 100644
--- a/apps/vue/src/locales/lang/en/component.ts
+++ b/apps/vue/src/locales/lang/en/component.ts
@@ -68,6 +68,30 @@ export default {
     settingFullScreen: 'Full Screen',
     index: 'Index',
     total: 'total of {total}',
+    advancedSearch: {
+      title: 'Advanced Search',
+      conditions: 'Condition',
+      addCondition: 'Add Condition',
+      delCondition: 'Del Condition',
+      field: 'Field',
+      logic: 'Logic',
+      and: 'And',
+      or: 'Or',
+      comparison: 'Comparison',
+      value: 'Value',
+      equal: 'Equal',
+      notEqual: 'Not Equal',
+      lessThan: 'Less Than',
+      lessThanOrEqual: 'less Than Or Equal',
+      greaterThan: 'Greater Than',
+      greaterThanOrEqual: 'Greater Than Or Equal',
+      startsWith: 'Starts With',
+      notStartsWith: 'Not Starts With',
+      endsWith: 'Ends With',
+      notEndsWith: 'Not Ends With',
+      contains: 'Contains',
+      notContains: 'Not Contains',
+    }
   },
   time: {
     before: ' ago',
diff --git a/apps/vue/src/locales/lang/en/table.ts b/apps/vue/src/locales/lang/en/table.ts
index 9b0e00bf3..ac8672f9b 100644
--- a/apps/vue/src/locales/lang/en/table.ts
+++ b/apps/vue/src/locales/lang/en/table.ts
@@ -1,3 +1,4 @@
 export default {
   action: 'Actions',
+  sureToDelete: 'Sure to delete?',
 };
diff --git a/apps/vue/src/locales/lang/zh-CN/component.ts b/apps/vue/src/locales/lang/zh-CN/component.ts
index 07bc8f1ea..363b658cf 100644
--- a/apps/vue/src/locales/lang/zh-CN/component.ts
+++ b/apps/vue/src/locales/lang/zh-CN/component.ts
@@ -68,10 +68,32 @@ export default {
     settingFixedLeft: '固定到左侧',
     settingFixedRight: '固定到右侧',
     settingFullScreen: '全屏',
-
     index: '序号',
-
     total: '共 {total} 条数据',
+    advancedSearch: {
+      title: '高级查询',
+      conditions: '查询条件',
+      addCondition: '增加条件',
+      delCondition: '删除条件',
+      field: '字段',
+      logic: '连接条件',
+      and: '且',
+      or: '或',
+      comparison: '运算符',
+      value: '比较值',
+      equal: '等于',
+      notEqual: '不等于',
+      lessThan: '小于',
+      lessThanOrEqual: '小于等于',
+      greaterThan: '大于',
+      greaterThanOrEqual: '大于等于',
+      startsWith: '左包含',
+      notStartsWith: '左不包含',
+      endsWith: '右包含',
+      notEndsWith: '右不包含',
+      contains: '包含',
+      notContains: '不包含',
+    }
   },
   time: {
     before: '前',
diff --git a/apps/vue/src/locales/lang/zh-CN/table.ts b/apps/vue/src/locales/lang/zh-CN/table.ts
index 0f863333a..219934071 100644
--- a/apps/vue/src/locales/lang/zh-CN/table.ts
+++ b/apps/vue/src/locales/lang/zh-CN/table.ts
@@ -1,3 +1,4 @@
 export default {
   action: '操作方法',
+  sureToDelete: '你确定要删除吗?',
 };
diff --git a/apps/vue/src/views/task-management/background-jobs/components/JobTable.vue b/apps/vue/src/views/task-management/background-jobs/components/JobTable.vue
index 6f581ddd0..e99ba1355 100644
--- a/apps/vue/src/views/task-management/background-jobs/components/JobTable.vue
+++ b/apps/vue/src/views/task-management/background-jobs/components/JobTable.vue
@@ -112,6 +112,8 @@
     deleteById,
     bulkStop,
     bulkStart,
+    getAvailableFields,
+    advancedSearch,
   } from '/@/api/task-management/backgroundJobInfo';
   import { JobStatus } from '/@/api/task-management/model/backgroundJobInfoModel';
   import { getDataColumns } from '../datas/TableData';
@@ -145,6 +147,11 @@
     immediate: true,
     clickToRowSelect: false,
     formConfig: getSearchFormSchemas(),
+    advancedSearchConfig: {
+      useAdvancedSearch: true,
+      defineFieldApi: getAvailableFields,
+      fetchApi: advancedSearch,
+    },
     rowSelection: {
       type: 'checkbox',
       onChange: handleSelectChange,
diff --git a/aspnet-core/modules/dynamic-queryable/LINGYUN.Abp.Dynamic.Queryable.Application.Contracts/LINGYUN/Abp/Dynamic/Queryable/Dto/DynamicParamterDto.cs b/aspnet-core/modules/dynamic-queryable/LINGYUN.Abp.Dynamic.Queryable.Application.Contracts/LINGYUN/Abp/Dynamic/Queryable/Dto/DynamicParamterDto.cs
index 93d637c3d..0f63b83c8 100644
--- a/aspnet-core/modules/dynamic-queryable/LINGYUN.Abp.Dynamic.Queryable.Application.Contracts/LINGYUN/Abp/Dynamic/Queryable/Dto/DynamicParamterDto.cs
+++ b/aspnet-core/modules/dynamic-queryable/LINGYUN.Abp.Dynamic.Queryable.Application.Contracts/LINGYUN/Abp/Dynamic/Queryable/Dto/DynamicParamterDto.cs
@@ -5,4 +5,5 @@ public class DynamicParamterDto
     public string Name { get; set; }
     public string Description { get; set; }
     public string Type { get; set; }
+    public string JavaScriptType { get; set; }
 }
diff --git a/aspnet-core/modules/dynamic-queryable/LINGYUN.Abp.Dynamic.Queryable.Application/LINGYUN/Abp/Dynamic/Queryable/DynamicQueryableAppService.cs b/aspnet-core/modules/dynamic-queryable/LINGYUN.Abp.Dynamic.Queryable.Application/LINGYUN/Abp/Dynamic/Queryable/DynamicQueryableAppService.cs
index 47101f6a4..263e52643 100644
--- a/aspnet-core/modules/dynamic-queryable/LINGYUN.Abp.Dynamic.Queryable.Application/LINGYUN/Abp/Dynamic/Queryable/DynamicQueryableAppService.cs
+++ b/aspnet-core/modules/dynamic-queryable/LINGYUN.Abp.Dynamic.Queryable.Application/LINGYUN/Abp/Dynamic/Queryable/DynamicQueryableAppService.cs
@@ -3,6 +3,7 @@ using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Linq.Expressions;
+using System.Reflection;
 using System.Threading.Tasks;
 using Volo.Abp.Application.Dtos;
 using Volo.Abp.Application.Services;
@@ -36,7 +37,8 @@ public abstract class DynamicQueryableAppService<TEntity, TEntityDto> : Applicat
                 {
                     Name = propertyInfo.Name,
                     Type = propertyInfo.PropertyType.FullName,
-                    Description = localizedProp.Value ?? propertyInfo.Name
+                    Description = localizedProp.Value ?? propertyInfo.Name,
+                    JavaScriptType = ConvertToJavaScriptType(propertyInfo.PropertyType)
                 });
         }
 
@@ -71,4 +73,48 @@ public abstract class DynamicQueryableAppService<TEntity, TEntityDto> : Applicat
     {
         return ObjectMapper.Map<List<TEntity>, List<TEntityDto>>(entities);
     }
+
+    protected virtual string ConvertToJavaScriptType(Type propertyType)
+    {
+        if (propertyType.IsNullableType())
+        {
+            propertyType = propertyType.GetGenericArguments().FirstOrDefault();
+        }
+        var typeCode = Type.GetTypeCode(propertyType);
+        switch (typeCode)
+        {
+            case TypeCode.Int16:
+            case TypeCode.Int32:
+            case TypeCode.Int64:
+            case TypeCode.UInt16:
+            case TypeCode.UInt32:
+            case TypeCode.UInt64:
+            case TypeCode.Single:
+            case TypeCode.Byte:
+            case TypeCode.Double:
+            case TypeCode.SByte:
+            case TypeCode.Decimal:
+                return "number";
+            case TypeCode.Boolean:
+                return "boolean";
+            case TypeCode.Char:
+            case TypeCode.String:
+                return "string";
+            case TypeCode.DateTime:
+                return "Date";
+            case TypeCode.Object:
+                if (propertyType.IsArray)
+                {
+                    return "array";
+                }
+                else
+                {
+                    return "object";
+                }
+            default:
+            case TypeCode.Empty:
+            case TypeCode.DBNull:
+                return "object";
+        }
+    }
 }
diff --git a/aspnet-core/modules/dynamic-queryable/LINGYUN.Linq.Dynamic.Queryable/System/Reflection/NullableTypeExtensions.cs b/aspnet-core/modules/dynamic-queryable/LINGYUN.Linq.Dynamic.Queryable/System/Reflection/NullableTypeExtensions.cs
new file mode 100644
index 000000000..d1d92ffea
--- /dev/null
+++ b/aspnet-core/modules/dynamic-queryable/LINGYUN.Linq.Dynamic.Queryable/System/Reflection/NullableTypeExtensions.cs
@@ -0,0 +1,9 @@
+namespace System.Reflection;
+
+public static class NullableTypeExtensions
+{
+    public static bool IsNullableType(this Type theType)
+    {
+        return (theType.IsGenericType && theType.GetGenericTypeDefinition().Equals(typeof(Nullable<>)));
+    }
+}

From 11cd1e7eb5e2e405083d4682c9bd0852880d7bdc Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Mon, 10 Oct 2022 10:07:13 +0800
Subject: [PATCH 2/2] optimizing advanced queries

---
 .../src/components/Form/src/componentMap.ts   |  3 ++
 .../src/components/Form/src/types/index.ts    |  3 +-
 .../src/components/Table/src/BasicTable.vue   | 27 +++++++++++----
 .../Table/src/components/AdvancedSearch.vue   | 18 ++++++++--
 .../Table/src/hooks/useDataSource.ts          | 34 +++++++++++--------
 .../Table/src/hooks/useTableForm.ts           | 31 ++++++++++++-----
 6 files changed, 84 insertions(+), 32 deletions(-)

diff --git a/apps/vue/src/components/Form/src/componentMap.ts b/apps/vue/src/components/Form/src/componentMap.ts
index a6e292354..f2d909b8c 100644
--- a/apps/vue/src/components/Form/src/componentMap.ts
+++ b/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);
diff --git a/apps/vue/src/components/Form/src/types/index.ts b/apps/vue/src/components/Form/src/types/index.ts
index 294b0805e..9ea4997bf 100644
--- a/apps/vue/src/components/Form/src/types/index.ts
+++ b/apps/vue/src/components/Form/src/types/index.ts
@@ -114,4 +114,5 @@ export type ComponentType =
   | 'Slider'
   | 'Rate'
   | 'Divider'
-  | 'ApiTransfer';
+  | 'ApiTransfer'
+  | 'CodeEditorX';
diff --git a/apps/vue/src/components/Table/src/BasicTable.vue b/apps/vue/src/components/Table/src/BasicTable.vue
index f5b8c8ff3..c425d7d27 100644
--- a/apps/vue/src/components/Table/src/BasicTable.vue
+++ b/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 { Table } from 'ant-design-vue';
+  import { defineComponent, ref, reactive, computed, unref, toRaw, inject, watchEffect, nextTick } from '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,
diff --git a/apps/vue/src/components/Table/src/components/AdvancedSearch.vue b/apps/vue/src/components/Table/src/components/AdvancedSearch.vue
index ff3f52da0..103b8c09c 100644
--- a/apps/vue/src/components/Table/src/components/AdvancedSearch.vue
+++ b/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>
\ No newline at end of file
diff --git a/apps/vue/src/components/Table/src/hooks/useDataSource.ts b/apps/vue/src/components/Table/src/hooks/useDataSource.ts
index 3a82c07ed..f86511b18 100644
--- a/apps/vue/src/components/Table/src/hooks/useDataSource.ts
+++ b/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) {
-    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) {
+  async function fetch(opt?: FetchParams) {
     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;
   }
 
diff --git a/apps/vue/src/components/Table/src/hooks/useTableForm.ts b/apps/vue/src/components/Table/src/hooks/useTableForm.ts
index f89e28e89..697621f48 100644
--- a/apps/vue/src/components/Table/src/hooks/useTableForm.ts
+++ b/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);
-    if (!advancedSearchConfig) return;
-    const { fetchApi } = advancedSearchConfig;
-    fetch({ searchInfo: { queryable: queryable }, page: 1 }, fetchApi, {});
+    setFieldsValue({ queryable: queryable });
+    setTimeout(() => {
+      fetch({ page: 1 });
+    }, 300);
   }
 
   return {
     getFormProps,
-    getAdvancedSearchProps,
     replaceFormSlotKey,
     getFormSlotKeys,
+    getAdvancedSearchProps,
     handleSearchInfoChange,
     handleAdvanceSearchChange,
   };