微调

frontend/src/api/device/icd/index.ts

@@ -29,7 +29,7 @@ export const updateICD = (params: FormData) => {
 }
 
 export const importICDJson = (params: FormData) => {
-    return http.upload(`/icd/import/json`, params)
+    return http.upload(`/icd/import/json`, params, { loading: false })
 }
 
 export const deleteICD = (params: string[]) => {

frontend/src/views/machine/icd/index.vue

@@ -33,27 +33,39 @@
         </ProTable>
     </div>
     <IcdPopup ref="icdPopup" :refresh-table="proTable?.getTableList" />
-    <el-dialog v-model="importDialogVisible" title="导入ICD" width="460px" destroy-on-close>
+    <el-dialog
-        <el-upload
+        v-model="importDialogVisible"
-            ref="importUploadRef"
+        title="导入ICD"
-            action="#"
+        width="460px"
-            class="upload"
+        destroy-on-close
-            :auto-upload="false"
+        :close-on-click-modal="!importLoading"
-            :limit="1"
+        :show-close="!importLoading"
-            accept=".json,application/json"
+    >
-            :http-request="handleImportRequest"
+        <div v-loading="importLoading" element-loading-text="导入中，请稍候..." class="icd-import-content">
-            :on-exceed="handleImportExceed"
+            <el-upload
-            :before-upload="beforeImportUpload"
+                ref="importUploadRef"
-        >
+                action="#"
-            <el-button type="primary" :icon="Upload">选择文件</el-button>
+                class="upload"
-            <template #tip>
+                :auto-upload="false"
-                <div class="el-upload__tip">请上传 .json 文件</div>
+                :limit="1"
-            </template>
+                accept=".json,application/json"
-        </el-upload>
+                :on-exceed="handleImportExceed"
+                :before-upload="beforeImportUpload"
+                :on-change="handleImportChange"
+                :on-remove="handleImportRemove"
+                :disabled="importLoading"
+            >
+                <el-button type="primary" :icon="Upload" :disabled="importLoading">选择文件</el-button>
+                <template #tip>
+                    <div class="el-upload__tip">请上传 .json 文件</div>
+                </template>
+            </el-upload>
+            <div v-if="importLoading" class="icd-import-loading-text">导入中，请稍候...</div>
+        </div>
         <template #footer>
             <div class="dialog-footer">
-                <el-button @click="closeImportDialog">取消</el-button>
+                <el-button :disabled="importLoading" @click="closeImportDialog">取消</el-button>
-                <el-button type="primary" @click="submitImport">开始导入</el-button>
+                <el-button type="primary" :loading="importLoading" @click="submitImport">开始导入</el-button>
             </div>
         </template>
     </el-dialog>
@@ -62,7 +74,7 @@
 <script setup lang="tsx" name="useIcd">
 import { reactive, ref } from 'vue'
 import { CirclePlus, Delete, Download, EditPen, Upload } from '@element-plus/icons-vue'
-import { ElMessage, ElNotification, genFileId, type UploadInstance, type UploadProps, type UploadRawFile, type UploadRequestOptions } from 'element-plus'
+import { ElMessage, ElNotification, genFileId, type UploadFile, type UploadInstance, type UploadProps, type UploadRawFile } from 'element-plus'
 import type { ICD } from '@/api/device/interface/icd'
 import ProTable from '@/components/ProTable/index.vue'
 import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
@@ -79,7 +91,9 @@ defineOptions({
 const proTable = ref<ProTableInstance>()
 const icdPopup = ref<InstanceType<typeof IcdPopup>>()
 const importDialogVisible = ref(false)
+const importLoading = ref(false)
 const importUploadRef = ref<UploadInstance | null>(null)
+const selectedImportFile = ref<File | null>(null)
 
 const getTableList = async (params: ICD.ReqICDParams) => {
     return getICDList({ ...params })
@@ -170,7 +184,11 @@ const openImportDialog = () => {
 }
 
 const closeImportDialog = () => {
+    if (importLoading.value) {
+        return
+    }
     importDialogVisible.value = false
+    selectedImportFile.value = null
     importUploadRef.value?.clearFiles()
 }
 
@@ -191,22 +209,50 @@ const handleImportExceed: UploadProps['onExceed'] = files => {
     const file = files[0] as UploadRawFile
     file.uid = genFileId()
     importUploadRef.value?.handleStart(file)
+    selectedImportFile.value = file
 }
 
-const handleImportRequest = async (param: UploadRequestOptions) => {
+const handleImportChange: UploadProps['onChange'] = uploadFile => {
-    const formData = new FormData()
+    selectedImportFile.value = (uploadFile.raw as File | undefined) ?? null
-    formData.append('file', param.file)
-    await importICDJson(formData)
-    ElMessage.success('导入成功')
-    closeImportDialog()
-    await proTable.value?.getTableList()
 }
 
-const submitImport = () => {
+const handleImportRemove = () => {
-    if (!importUploadRef.value?.uploadFiles.length) {
+    selectedImportFile.value = null
+}
+
+const submitImport = async () => {
+    if (importLoading.value) {
+        return
+    }
+    if (!selectedImportFile.value) {
         ElMessage.warning('请选择文件！')
         return
     }
-    importUploadRef.value.submit()
+
+    const formData = new FormData()
+    formData.append('file', selectedImportFile.value)
+    importLoading.value = true
+    try {
+        await importICDJson(formData)
+        ElMessage.success('导入成功')
+        importDialogVisible.value = false
+        selectedImportFile.value = null
+        importUploadRef.value?.clearFiles()
+        await proTable.value?.getTableList()
+    } finally {
+        importLoading.value = false
+    }
 }
 </script>
+
+<style scoped>
+.icd-import-content {
+    min-height: 120px;
+}
+
+.icd-import-loading-text {
+    margin-top: 12px;
+    color: var(--el-text-color-secondary);
+    font-size: 13px;
+}
+</style>