From 69562ab13847341152975a154167c0de89d034c3 Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Tue, 18 Oct 2022 11:34:19 +0800
Subject: [PATCH 1/2] advanced conditions enhance scalability

---
 .../Table/src/components/AdvancedSearch.vue   | 33 +++++++++++++------
 .../Table/src/types/advancedSearch.ts         |  7 ++++
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/apps/vue/src/components/Table/src/components/AdvancedSearch.vue b/apps/vue/src/components/Table/src/components/AdvancedSearch.vue
index 18a25ec6d..564472b1c 100644
--- a/apps/vue/src/components/Table/src/components/AdvancedSearch.vue
+++ b/apps/vue/src/components/Table/src/components/AdvancedSearch.vue
@@ -96,9 +96,16 @@
       type: Boolean,
       default: false,
     },
+    allowDuplicateFieldSearch: {
+      type: Boolean,
+      default: true,
+    },
     defineFieldApi: {
       type: Function as PropType<() => Promise<any>>
     },
+    defineFieldReplace: {
+      type: Function as PropType<(response: any) => DefineParamter[]>,
+    },
     listField: {
       type: String,
     }
@@ -202,14 +209,15 @@
   ]);
 
   const getAvailableParams = computed(() => {
-    // 如果每个字段只允许出现一次则取消注释
-    // const defineParams = unref(defineParamsRef);
-    // if (!defineParams.length) return[];
-    // return defineParams.filter(dp => !formMdel.paramters.some(fp => fp.field === dp.name));
-
-    // 允许字段出现多次,用于区间查询
+    const { allowDuplicateFieldSearch } = props;
+    if (allowDuplicateFieldSearch) {
+      // 允许字段出现多次, 直接返回原数据
+      return defineParamsRef.value;
+    }
+    // 每个字段只允许出现一次，已选择字段不再出现在可选列表
     const defineParams = unref(defineParamsRef);
-    return defineParams;
+    if (!defineParams.length) return[];
+    return defineParams.filter(dp => !formMdel.paramters.some(fp => fp.field === dp.name));
   });
 
   onMounted(fetch);
@@ -217,13 +225,18 @@
   const [registerModal, { closeModal }] = useModalInner();
 
   function fetch() {
-    const { useAdvancedSearch, defineFieldApi, listField } = props;
+    const { useAdvancedSearch, defineFieldApi, defineFieldReplace, listField } = props;
     if (!useAdvancedSearch) return;
     if (!defineFieldApi || !isFunction(defineFieldApi)) return;
     setLoading(true);
     defineFieldApi().then((res) => {
-      const isArrayResult = Array.isArray(res);
-      const resultItems: DefineParamter[] = isArrayResult ? res : get(res, listField || 'items');
+      let resultItems: DefineParamter[] = [];
+      if (defineFieldReplace && isFunction(defineFieldReplace)) {
+        resultItems = defineFieldReplace(res);
+      } else {
+        const isArrayResult = Array.isArray(res);
+        resultItems = isArrayResult ? res : get(res, listField || 'items');
+      }
       defineParamsRef.value = resultItems;
     }).finally(() => {
       setLoading(false);
diff --git a/apps/vue/src/components/Table/src/types/advancedSearch.ts b/apps/vue/src/components/Table/src/types/advancedSearch.ts
index c87ddce21..3a63abf5c 100644
--- a/apps/vue/src/components/Table/src/types/advancedSearch.ts
+++ b/apps/vue/src/components/Table/src/types/advancedSearch.ts
@@ -2,8 +2,15 @@
 export interface AdvanceSearchProps {
   /** 使用高级查询 */
   useAdvancedSearch?: boolean;
+  /** 允许字段重复搜索 */
+  allowDuplicateFieldSearch?: boolean;
   /** 字段列表api */
   defineFieldApi?: () => Promise<any>;
+  /**
+   * 自定义字段列表
+   * @remarks 从服务器返回字段列表后自定义过滤函数,返回字段列表
+   */
+  defineFieldReplace?: (response: any) => DefineParamter[];
   /**
    * 字段列表api返回结果字段
    * @remarks 从服务器返回字段列表在数据结构中的字段名,默认: items

From 2f2aa7e9b01c8ef665e77a376ce1e15acc6e3112 Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Tue, 18 Oct 2022 11:46:05 +0800
Subject: [PATCH 2/2] add support table selected alert

---
 .../src/components/Table/src/BasicTable.vue   |  8 ++++-
 .../Table/src/components/TableAlert.vue       | 36 +++++++++++++++++++
 .../Table/src/components/TableHeader.vue      | 15 +++++++-
 .../Table/src/hooks/useTableAlert.ts          | 33 +++++++++++++++++
 .../Table/src/hooks/useTableHeader.ts         |  5 +++
 .../src/components/Table/src/types/table.ts   |  3 ++
 apps/vue/src/locales/lang/en/component.ts     |  2 ++
 apps/vue/src/locales/lang/zh-CN/component.ts  |  2 ++
 8 files changed, 102 insertions(+), 2 deletions(-)
 create mode 100644 apps/vue/src/components/Table/src/components/TableAlert.vue
 create mode 100644 apps/vue/src/components/Table/src/hooks/useTableAlert.ts

diff --git a/apps/vue/src/components/Table/src/BasicTable.vue b/apps/vue/src/components/Table/src/BasicTable.vue
index d0b693de0..ef850c02b 100644
--- a/apps/vue/src/components/Table/src/BasicTable.vue
+++ b/apps/vue/src/components/Table/src/BasicTable.vue
@@ -82,6 +82,7 @@
   import { useTableScrollTo } from './hooks/useScrollTo';
   import { useCustomRow } from './hooks/useCustomRow';
   import { useTableStyle } from './hooks/useTableStyle';
+  import { useTableAlert } from './hooks/useTableAlert';
   import { useTableHeader } from './hooks/useTableHeader';
   import { useTableExpand } from './hooks/useTableExpand';
   import { createTableContext } from './hooks/useTableContext';
@@ -247,9 +248,14 @@
           // support useTable
           unref(getProps).onColumnsChange?.(data);
         },
+        deSelect: () => {
+          clearSelectedRowKeys();
+        },
       };
 
-      const { getHeaderProps } = useTableHeader(getProps, slots, handlers);
+      const { getAlertEnabled, getAlertMessage } = useTableAlert(getProps, getSelectRowKeys);
+
+      const { getHeaderProps } = useTableHeader(getProps, slots, handlers, getAlertEnabled, getAlertMessage);
 
       const { getFooterProps } = useTableFooter(
         getProps,
diff --git a/apps/vue/src/components/Table/src/components/TableAlert.vue b/apps/vue/src/components/Table/src/components/TableAlert.vue
new file mode 100644
index 000000000..53ee929ab
--- /dev/null
+++ b/apps/vue/src/components/Table/src/components/TableAlert.vue
@@ -0,0 +1,36 @@
+<template>
+  <Alert :class="prefixCls" type="info" :message="message">
+    <template #closeText>
+      <Button type="link" @click="handleDeSelect">{{ t('component.table.deSelected') }}</Button>
+    </template>
+  </Alert>
+</template>
+
+<script lang="ts" setup>
+  import { Alert, Button } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  defineProps({
+    message: {
+      type: String,
+      default: '',
+    },
+  });
+  const emits = defineEmits(['onDeSelect']);
+
+  const { t } = useI18n();
+  const { prefixCls } = useDesign('basic-table-alert');
+
+  function handleDeSelect() {
+    emits('onDeSelect');
+  }
+</script>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-table-alert';
+
+  .@{prefix-cls} {
+    margin: 6px 0 3px 0;
+  }
+</style>
\ No newline at end of file
diff --git a/apps/vue/src/components/Table/src/components/TableHeader.vue b/apps/vue/src/components/Table/src/components/TableHeader.vue
index 189e913d9..d89152fd8 100644
--- a/apps/vue/src/components/Table/src/components/TableHeader.vue
+++ b/apps/vue/src/components/Table/src/components/TableHeader.vue
@@ -20,6 +20,9 @@
         />
       </div>
     </div>
+    <div v-if="showTableAlert" :class="`${prefixCls}__alert`">
+      <TableAlert :message="tableAlertMessage" @on-de-select="$emit('de-select')" />
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -29,12 +32,14 @@
   import { Divider } from 'ant-design-vue';
   import TableSettingComponent from './settings/index.vue';
   import TableTitle from './TableTitle.vue';
+  import TableAlert from './TableAlert.vue';
   import { useDesign } from '/@/hooks/web/useDesign';
 
   export default defineComponent({
     name: 'BasicTableHeader',
     components: {
       Divider,
+      TableAlert,
       TableTitle,
       TableSetting: TableSettingComponent,
     },
@@ -52,8 +57,16 @@
         type: [String, Array] as PropType<string | string[]>,
         default: '',
       },
+      showTableAlert: {
+        type: Boolean,
+        default: false,
+      },
+      tableAlertMessage: {
+        type: String,
+        default: ''
+      },
     },
-    emits: ['columns-change'],
+    emits: ['columns-change', 'de-select'],
     setup(_, { emit }) {
       const { prefixCls } = useDesign('basic-table-header');
       function handleColumnChange(data: ColumnChangeParam[]) {
diff --git a/apps/vue/src/components/Table/src/hooks/useTableAlert.ts b/apps/vue/src/components/Table/src/hooks/useTableAlert.ts
new file mode 100644
index 000000000..da0c9d57d
--- /dev/null
+++ b/apps/vue/src/components/Table/src/hooks/useTableAlert.ts
@@ -0,0 +1,33 @@
+import type { ComputedRef } from 'vue';
+import type { BasicTableProps } from '../types/table';
+
+import { computed, unref } from 'vue';
+import {} from '/@/hooks/web/useI18n';
+import { useI18n } from 'vue-i18n';
+
+export function useTableAlert(
+  propsRef: ComputedRef<BasicTableProps>,
+  getSelectRowKeys: () => string[]
+) {
+  const { t } = useI18n();
+
+  const getAlertEnabled = computed(() => {
+    const props = unref(propsRef);
+    if (!props.useSelectedAlert) {
+      return false;
+    }
+    const selectedKeys = getSelectRowKeys();
+    return selectedKeys.length > 0;
+  });
+
+  const getAlertMessage = computed(() => {
+    const selectedKeys = getSelectRowKeys();
+    console.log(selectedKeys);
+    return t('component.table.selectedRows', { count: selectedKeys.length });
+  });
+
+  return {
+    getAlertEnabled,
+    getAlertMessage,
+  };
+}
diff --git a/apps/vue/src/components/Table/src/hooks/useTableHeader.ts b/apps/vue/src/components/Table/src/hooks/useTableHeader.ts
index e72820755..f052d8bb8 100644
--- a/apps/vue/src/components/Table/src/hooks/useTableHeader.ts
+++ b/apps/vue/src/components/Table/src/hooks/useTableHeader.ts
@@ -9,6 +9,8 @@ export function useTableHeader(
   propsRef: ComputedRef<BasicTableProps>,
   slots: Slots,
   handlers: InnerHandlers,
+  useTableAlert?: ComputedRef<Boolean>,
+  tableAlertMessage?: ComputedRef<String>,
 ) {
   const getHeaderProps = computed((): Recordable => {
     const { title, showTableSetting, titleHelpMessage, tableSetting } = unref(propsRef);
@@ -28,7 +30,10 @@ export function useTableHeader(
                 titleHelpMessage,
                 showTableSetting,
                 tableSetting,
+                showTableAlert: unref(useTableAlert),
+                tableAlertMessage: unref(tableAlertMessage),
                 onColumnsChange: handlers.onColumnsChange,
+                onDeSelect: handlers.deSelect,
               } as Recordable,
               {
                 ...(slots.toolbar
diff --git a/apps/vue/src/components/Table/src/types/table.ts b/apps/vue/src/components/Table/src/types/table.ts
index dcc949230..fa57d016a 100644
--- a/apps/vue/src/components/Table/src/types/table.ts
+++ b/apps/vue/src/components/Table/src/types/table.ts
@@ -187,6 +187,8 @@ export interface BasicTableProps<T = any> {
   formConfig?: Partial<FormProps>;
    // 高级查询配置
   advancedSearchConfig?: Partial<AdvanceSearchProps>;
+  // 使用已选择提示
+  useSelectedAlert?: boolean;
   // 列配置
   columns: BasicColumn[];
   // 是否显示序号列
@@ -480,4 +482,5 @@ export type ColumnChangeParam = {
 
 export interface InnerHandlers {
   onColumnsChange: (data: ColumnChangeParam[]) => void;
+  deSelect: () => void;
 }
diff --git a/apps/vue/src/locales/lang/en/component.ts b/apps/vue/src/locales/lang/en/component.ts
index 0308706e6..fd03007eb 100644
--- a/apps/vue/src/locales/lang/en/component.ts
+++ b/apps/vue/src/locales/lang/en/component.ts
@@ -68,6 +68,8 @@ export default {
     settingFullScreen: 'Full Screen',
     index: 'Index',
     total: 'total of {total}',
+    selectedRows: 'The {count} item has been selected',
+    deSelected: 'De Select',
     advancedSearch: {
       title: 'Advanced Search',
       conditions: 'Condition',
diff --git a/apps/vue/src/locales/lang/zh-CN/component.ts b/apps/vue/src/locales/lang/zh-CN/component.ts
index 363b658cf..ae04d9e92 100644
--- a/apps/vue/src/locales/lang/zh-CN/component.ts
+++ b/apps/vue/src/locales/lang/zh-CN/component.ts
@@ -70,6 +70,8 @@ export default {
     settingFullScreen: '全屏',
     index: '序号',
     total: '共 {total} 条数据',
+    selectedRows: '已选择 {count} 项',
+    deSelected: '取消选择',
     advancedSearch: {
       title: '高级查询',
       conditions: '查询条件',