easyflow-ui-admin/app/src/views/datacenter/components/ExcelActionDrawer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { UploadUserFile } from 'element-plus';
+import type { UploadFile, UploadInstance } from 'element-plus';
 
 import { computed, ref } from 'vue';
 
@@ -7,6 +7,7 @@ import {
   ElButton,
   ElDrawer,
   ElInput,
+  ElMessage,
   ElOption,
   ElSelect,
   ElUpload,
@@ -37,6 +38,9 @@ const splitForm = defineModel<any>('splitForm', { required: true });
 const mergeForm = defineModel<any>('mergeForm', { required: true });
 const deriveForm = defineModel<any>('deriveForm', { required: true });
 const exportForm = defineModel<any>('exportForm', { required: true });
+const excelUploadRef = ref<UploadInstance>();
+const EXCEL_FILE_ACCEPT =
+  '.xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
 
 const drawerTitle = computed(() => {
   const titles: Record<string, string> = {
@@ -58,10 +62,31 @@ function open(action: 'derive' | 'export' | 'import' | 'merge' | 'split') {
   visible.value = true;
 }
 
-function handleUploadChange(file: UploadUserFile) {
+function handleUploadChange(file: UploadFile) {
+  if (!isSupportedExcelFile(file.name)) {
+    excelUploadRef.value?.handleRemove(file);
+    emit('update:pendingUploadFile', null);
+    ElMessage.warning('仅支持 .xls 和 .xlsx 格式的 Excel 文件');
+    return;
+  }
   emit('update:pendingUploadFile', file.raw || null);
 }
 
+function handleUploadRemove() {
+  emit('update:pendingUploadFile', null);
+}
+
+function handleDrawerClosed() {
+  emit('update:pendingUploadFile', null);
+}
+
+function isSupportedExcelFile(fileName: string) {
+  const normalizedFileName = fileName.trim().toLowerCase();
+  return (
+    normalizedFileName.endsWith('.xls') || normalizedFileName.endsWith('.xlsx')
+  );
+}
+
 function handleConfirm() {
   const action = activeAction.value;
   switch (action) {
@@ -97,16 +122,20 @@ defineExpose({ open });
     :title="drawerTitle"
     size="480px"
     destroy-on-close
+    @closed="handleDrawerClosed"
   >
     <div class="action-form">
       <!-- 导入 -->
       <template v-if="activeAction === 'import'">
         <ElUpload
+          ref="excelUploadRef"
+          :accept="EXCEL_FILE_ACCEPT"
           drag
           :auto-upload="false"
           :show-file-list="true"
           :limit="1"
           :on-change="handleUploadChange"
+          :on-remove="handleUploadRemove"
         >
           <div class="upload-hint">拖拽或点击上传 Excel 文件</div>
         </ElUpload>

easyflow-ui-admin/app/src/views/datacenter/composables/use-datacenter-excel.ts

@@ -1,5 +1,7 @@
 import type { Ref } from 'vue';
 
+import type { DatacenterId } from './datacenter-id';
+
 import { reactive, ref } from 'vue';
 
 import { downloadFileFromBlob } from '@easyflow/utils';
@@ -9,9 +11,9 @@ import { ElMessage } from 'element-plus';
 import { api } from '#/api/request';
 
 export function useDatacenterExcel(
-  selectedSourceId: Ref<null | number>,
+  selectedSourceId: Ref<DatacenterId | null>,
-  selectedCatalogId: Ref<null | number>,
+  selectedCatalogId: Ref<DatacenterId | null>,
-  selectedTableId: Ref<null | number>,
+  selectedTableId: Ref<DatacenterId | null>,
   reloadAll: () => Promise<void>,
 ) {
   const actionLoading = ref(false);
@@ -26,7 +28,7 @@ export function useDatacenterExcel(
 
   const mergeForm = reactive({
     mergeMode: 'VERTICAL',
-    tableIds: [] as number[],
+    tableIds: [] as DatacenterId[],
     targetTableName: '',
     joinKey: '',
   });
@@ -91,7 +93,7 @@ export function useDatacenterExcel(
   }
 
   async function handleSplit() {
-    if (!selectedTableId.value) return false;
+    if (selectedTableId.value === null) return false;
     if (
       splitForm.splitMode === 'BY_ROW_COUNT' &&
       Number(splitForm.rowBatchSize) <= 0
@@ -152,7 +154,7 @@ export function useDatacenterExcel(
   }
 
   async function handleDerive() {
-    if (!selectedTableId.value) return false;
+    if (selectedTableId.value === null) return false;
     if (!deriveForm.targetTableName.trim()) {
       ElMessage.warning('请输入新表名称');
       return false;
@@ -196,7 +198,7 @@ export function useDatacenterExcel(
   }
 
   async function handleExport(loadTableRuntime: () => Promise<void>) {
-    if (exportForm.exportScope === 'TABLE' && !selectedTableId.value) {
+    if (exportForm.exportScope === 'TABLE' && selectedTableId.value === null) {
       ElMessage.warning('请先选择已接入表');
       return false;
     }