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,28 +3,19 @@
     <template #title>
       <span>{{ t('common.export') }}</span>
     </template>
-    <ExportOutlined @click="exportData" />
+    <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();
@@ -34,6 +25,15 @@
   }
 
   function handleExport(options) {
+    table.setLoading(true);
+    try {
+      exportDataToExcel(options);
+    } finally {
+      table.setLoading(false);
+    }
+  }
+
+  function exportDataToExcel(options) {
     const dataSource = table.getDataSource();
     // 列排序过滤
     const columns = table.getColumns()
@@ -68,13 +68,4 @@
       },
     });
   }
-
-      return {
-        registerModal,
-        exportData,
-        handleExport,
-        t,
-      };
-    },
-  });
 </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 false;
-    }
-    
-    return unref(getSelectRowKeysCount) > 0;
+    return props.useSelectedAlert === true;
   });
 
   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 设置名称