From 01cfb8f3e2526f737d34bc9fcac9660794fb65cb Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Fri, 10 Mar 2023 20:22:24 +0800
Subject: [PATCH] feat(table): enhanced table props

---
 .../src/components/Excel/src/ImportExcel.vue  |  22 +++-
 .../Table/src/components/AdvancedSearch.vue   |   2 +
 .../src/components/settings/TableExport.vue   | 115 ++++++++----------
 .../Table/src/hooks/useTableAlert.ts          |   6 +-
 apps/vue/src/components/Table/src/props.ts    |   8 ++
 apps/vue/src/hooks/abp/useSettings.ts         |   2 +-
 6 files changed, 84 insertions(+), 71 deletions(-)

diff --git a/apps/vue/src/components/Excel/src/ImportExcel.vue b/apps/vue/src/components/Excel/src/ImportExcel.vue
index fb3dc9d6b..406972cce 100644
--- a/apps/vue/src/components/Excel/src/ImportExcel.vue
+++ b/apps/vue/src/components/Excel/src/ImportExcel.vue
@@ -32,10 +32,11 @@
         default: 8,
       },
     },
-    emits: ['success', 'error'],
+    emits: ['success', 'error', 'cancel'],
     setup(props, { emit }) {
       const inputRef = ref<HTMLInputElement | null>(null);
       const loadingRef = ref<Boolean>(false);
+      const cancelRef = ref<Boolean>(true);
 
       /**
        * @description: 第一行作为头部
@@ -115,7 +116,7 @@
               resolve('');
             } catch (error) {
               reject(error);
-              emit('error');
+              emit('error', error);
             } finally {
               loadingRef.value = false;
             }
@@ -142,15 +143,30 @@
         const rawFile = files && files[0]; // only setting files[0]
         target.value = '';
         if (!rawFile) return;
+        cancelRef.value = false;
         upload(rawFile);
       }
 
+      function handleFocusChange() {
+        const timeId = setInterval(() => {
+          if (cancelRef.value === true) {
+            emit('cancel');
+          }
+          clearInterval(timeId);
+          window.removeEventListener('focus', handleFocusChange);
+        }, 1000);
+      }
+
       /**
        * @description: 点击上传按钮
        */
       function handleUpload() {
         const inputRefDom = unref(inputRef);
-        inputRefDom && inputRefDom.click();
+        if (inputRefDom) {
+          cancelRef.value = true;
+          inputRefDom.click();
+          window.addEventListener('focus', handleFocusChange);
+        }
       }
 
       return { handleUpload, handleInputClick, inputRef };
diff --git a/apps/vue/src/components/Table/src/components/AdvancedSearch.vue b/apps/vue/src/components/Table/src/components/AdvancedSearch.vue
index bd1be9bdc..ee557e871 100644
--- a/apps/vue/src/components/Table/src/components/AdvancedSearch.vue
+++ b/apps/vue/src/components/Table/src/components/AdvancedSearch.vue
@@ -136,6 +136,7 @@
       dataIndex: 'comparison',
       key: 'comparison',
       title: t('component.table.advancedSearch.comparison'),
+      width: 120,
     },
     {
       dataIndex: 'value',
@@ -151,6 +152,7 @@
       title: t('table.action'),
       dataIndex: 'actions',
       align: 'center',
+      width: 120,
     },
   ]);
 
diff --git a/apps/vue/src/components/Table/src/components/settings/TableExport.vue b/apps/vue/src/components/Table/src/components/settings/TableExport.vue
index 8b458df42..46bce79b9 100644
--- a/apps/vue/src/components/Table/src/components/settings/TableExport.vue
+++ b/apps/vue/src/components/Table/src/components/settings/TableExport.vue
@@ -3,78 +3,69 @@
     <template #title>
       <span>{{ t('common.export') }}</span>
     </template>
-    <ExportOutlined @click="exportData" />
-    <ExpExcelModal @register="registerModal" @success="handleExport" />
+    <DownloadOutlined @click="exportData" />
+    <ExpExcelModal @register="registerModal" @success="handleExport"  />
   </Tooltip>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { Tooltip } from 'ant-design-vue';
-  import { ExportOutlined } from '@ant-design/icons-vue';
+  import { DownloadOutlined } from '@ant-design/icons-vue';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useTableContext } from '../../hooks/useTableContext';
   import { ExpExcelModal, jsonToSheetXlsx } from '/@/components/Excel';
   import { useModal } from '/@/components/Modal';
   import { isString } from '/@/utils/is';
 
-  export default defineComponent({
-    name: 'TableExport',
-    components: {
-      ExpExcelModal,
-      ExportOutlined,
-      Tooltip,
-    },
-    setup() {
-      const table = useTableContext();
-      const { t } = useI18n();
-      const [registerModal, { openModal }] = useModal();
+  const table = useTableContext();
+  const { t } = useI18n();
+  const [registerModal, { openModal }] = useModal();
 
-      function exportData() {
-        openModal(true);
-      }
+  function exportData() {
+    openModal(true);
+  }
 
-      function handleExport(options) {
-        const dataSource = table.getDataSource();
-        // 列排序过滤
-        const columns = table.getColumns()
-          .filter((col) => !col.flag || col.flag === 'DEFAULT')
-          .filter((col) => isString(col.title) && isString(col.dataIndex));
-        // 标题列
-        const header: {[key:string]: string} = {};
-        columns.forEach((col) => {
-          header[String(col.dataIndex)] = String(col.title);
-        });
-        // 数据列
-        const rows: {[key:string]: string}[] = [];
-        dataSource.forEach((data) => {
-          const row: {[key:string]: string} = {};
-          columns.forEach((col) => {
-            const colName = String(col.dataIndex);
-            if (Reflect.has(data, colName)) {
-              row[colName] = data[colName];
-            }
-          });
-          if (Object.keys(row).length > 0) {
-            rows.push(row);
-          }
-        });
-        // 输出到excel
-        jsonToSheetXlsx({
-          data: rows,
-          header: header,
-          filename: options.filename,
-          write2excelOpts: {
-            bookType: options.bookType,
-          },
-        });
-      }
+  function handleExport(options) {
+    table.setLoading(true);
+    try {
+      exportDataToExcel(options);
+    } finally {
+      table.setLoading(false);
+    }
+  }
 
-      return {
-        registerModal,
-        exportData,
-        handleExport,
-        t,
-      };
-    },
-  });
+  function exportDataToExcel(options) {
+    const dataSource = table.getDataSource();
+    // 列排序过滤
+    const columns = table.getColumns()
+      .filter((col) => !col.flag || col.flag === 'DEFAULT')
+      .filter((col) => isString(col.title) && isString(col.dataIndex));
+    // 标题列
+    const header: {[key:string]: string} = {};
+    columns.forEach((col) => {
+      header[String(col.dataIndex)] = String(col.title);
+    });
+    // 数据列
+    const rows: {[key:string]: string}[] = [];
+    dataSource.forEach((data) => {
+      const row: {[key:string]: string} = {};
+      columns.forEach((col) => {
+        const colName = String(col.dataIndex);
+        if (Reflect.has(data, colName)) {
+          row[colName] = data[colName];
+        }
+      });
+      if (Object.keys(row).length > 0) {
+        rows.push(row);
+      }
+    });
+    // 输出到excel
+    jsonToSheetXlsx({
+      data: rows,
+      header: header,
+      filename: options.filename,
+      write2excelOpts: {
+        bookType: options.bookType,
+      },
+    });
+  }
 </script>
diff --git a/apps/vue/src/components/Table/src/hooks/useTableAlert.ts b/apps/vue/src/components/Table/src/hooks/useTableAlert.ts
index bd8bc5497..94372faa7 100644
--- a/apps/vue/src/components/Table/src/hooks/useTableAlert.ts
+++ b/apps/vue/src/components/Table/src/hooks/useTableAlert.ts
@@ -21,11 +21,7 @@ export function useTableAlert(
 
   const getAlertEnabled = computed(() => {
     const props = unref(propsRef);
-    if (!props.useSelectedAlert) {
-      return false;
-    }
-    
-    return unref(getSelectRowKeysCount) > 0;
+    return props.useSelectedAlert === true;
   });
 
   const getAlertMessage = computed(() => {
diff --git a/apps/vue/src/components/Table/src/props.ts b/apps/vue/src/components/Table/src/props.ts
index df541a443..05e4fc715 100644
--- a/apps/vue/src/components/Table/src/props.ts
+++ b/apps/vue/src/components/Table/src/props.ts
@@ -12,6 +12,7 @@ import type {
 import type { FormProps } from '/@/components/Form';
 import { DEFAULT_FILTER_FN, DEFAULT_SORT_FN, FETCH_SETTING, DEFAULT_SIZE } from './const';
 import { propTypes } from '/@/utils/propTypes';
+import { AdvanceSearchProps } from './types/advancedSearch';
 
 export const basicProps = {
   clickToRowSelect: { type: Boolean, default: true },
@@ -82,6 +83,13 @@ export const basicProps = {
     type: Object as PropType<Partial<FormProps>>,
     default: null,
   },
+  // 展示选择提示
+  useSelectedAlert: propTypes.bool,
+  // 使用高级搜索
+  advancedSearchConfig: {
+    type: Object as PropType<Partial<AdvanceSearchProps>>,
+    default: null,
+  },
   columns: {
     type: Array as PropType<BasicColumn[]>,
     default: () => [],
diff --git a/apps/vue/src/hooks/abp/useSettings.ts b/apps/vue/src/hooks/abp/useSettings.ts
index 92366707a..3eaa71597 100644
--- a/apps/vue/src/hooks/abp/useSettings.ts
+++ b/apps/vue/src/hooks/abp/useSettings.ts
@@ -5,7 +5,7 @@ type SettingValue = NameValue<string>;
 /**
  * 设置接口
  */
-interface ISettingProvider {
+export interface ISettingProvider {
   /**
    * 查询 number 类型设定值
    * @param name 设置名称