Merge pull request #795 from colinin/enhanced-table-props

feat(table): enhanced table props

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 };

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,
     },
   ]);
 

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" />
+    <DownloadOutlined @click="exportData" />
-    <ExpExcelModal @register="registerModal" @success="handleExport" />
+    <ExpExcelModal @register="registerModal" @success="handleExport"  />
   </Tooltip>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
   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({
+  const table = useTableContext();
-    name: 'TableExport',
+  const { t } = useI18n();
-    components: {
+  const [registerModal, { openModal }] = useModal();
-      ExpExcelModal,
-      ExportOutlined,
-      Tooltip,
-    },
-    setup() {
-      const table = useTableContext();
-      const { t } = useI18n();
-      const [registerModal, { openModal }] = useModal();
 
-      function exportData() {
+  function exportData() {
-        openModal(true);
+    openModal(true);
-      }
+  }
 
-      function handleExport(options) {
+  function handleExport(options) {
-        const dataSource = table.getDataSource();
+    table.setLoading(true);
-        // 列排序过滤
+    try {
-        const columns = table.getColumns()
+      exportDataToExcel(options);
-          .filter((col) => !col.flag || col.flag === 'DEFAULT')
+    } finally {
-          .filter((col) => isString(col.title) && isString(col.dataIndex));
+      table.setLoading(false);
-        // 标题列
+    }
-        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,
-          },
-        });
-      }
 
-      return {
+  function exportDataToExcel(options) {
-        registerModal,
+    const dataSource = table.getDataSource();
-        exportData,
+    // 列排序过滤
-        handleExport,
+    const columns = table.getColumns()
-        t,
+      .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>

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 props.useSelectedAlert === true;
-      return false;
-    }
-    
-    return unref(getSelectRowKeysCount) > 0;
   });
 
   const getAlertMessage = computed(() => {

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: () => [],

apps/vue/src/hooks/abp/useSettings.ts

@@ -5,7 +5,7 @@ type SettingValue = NameValue<string>;
 /**
  * 设置接口
  */
-interface ISettingProvider {
+export interface ISettingProvider {
   /**
    * 查询 number 类型设定值
    * @param name 设置名称