pqdif

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

@@ -33,50 +33,20 @@
         </ProTable>
     </div>
     <IcdPopup ref="icdPopup" :refresh-table="proTable?.getTableList" />
-    <el-dialog
-        v-model="importDialogVisible"
+    <JsonImportDialog
+        ref="jsonImportDialog"
         title="导入ICD"
-        width="460px"
-        destroy-on-close
-        :close-on-click-modal="!importLoading"
-        :show-close="!importLoading"
-    >
-        <div v-loading="importLoading" element-loading-text="导入中，请稍候..." class="icd-import-content">
-            <el-upload
-                ref="importUploadRef"
-                action="#"
-                class="upload"
-                :auto-upload="false"
-                :limit="1"
-                accept=".json,application/json"
-                :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 :disabled="importLoading" @click="closeImportDialog">取消</el-button>
-                <el-button type="primary" :loading="importLoading" @click="submitImport">开始导入</el-button>
-            </div>
-        </template>
-    </el-dialog>
+        :request-api="importICDJson"
+        @success="handleImportSuccess"
+    />
 </template>
 
 <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 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 JsonImportDialog from '@/components/JsonImportDialog/index.vue'
 import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
 import { useHandleData } from '@/hooks/useHandleData'
 import { useDownloadWithServerFileName } from '@/hooks/useDownload'
@@ -90,10 +60,7 @@ 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 jsonImportDialog = ref<InstanceType<typeof JsonImportDialog>>()
 
 const getTableList = async (params: ICD.ReqICDParams) => {
     return getICDList({ ...params })
@@ -128,7 +95,7 @@ const columns = reactive<ColumnProps<ICD.ResICD>[]>([
         prop: 'type',
         label: '类型',
         minWidth: 180,
-        enum: ICD_TYPE_OPTIONS,
+        enum: [...ICD_TYPE_OPTIONS],
         fieldNames: { label: 'label', value: 'value' },
         search: {
             el: 'select',
@@ -180,79 +147,10 @@ const handleExport = async (row: ICD.ResICD) => {
 }
 
 const openImportDialog = () => {
-    importDialogVisible.value = true
+    jsonImportDialog.value?.open()
 }
 
-const closeImportDialog = () => {
-    if (importLoading.value) {
-        return
-    }
-    importDialogVisible.value = false
-    selectedImportFile.value = null
-    importUploadRef.value?.clearFiles()
-}
-
-const beforeImportUpload = (file: UploadRawFile) => {
-    const isJsonFile = file.name.toLowerCase().endsWith('.json') || file.type === 'application/json'
-    if (!isJsonFile) {
-        ElNotification({
-            title: '温馨提示',
-            message: '上传文件只能是 json 格式！',
-            type: 'warning'
-        })
-    }
-    return isJsonFile
-}
-
-const handleImportExceed: UploadProps['onExceed'] = files => {
-    importUploadRef.value?.clearFiles()
-    const file = files[0] as UploadRawFile
-    file.uid = genFileId()
-    importUploadRef.value?.handleStart(file)
-    selectedImportFile.value = file
-}
-
-const handleImportChange: UploadProps['onChange'] = uploadFile => {
-    selectedImportFile.value = (uploadFile.raw as File | undefined) ?? null
-}
-
-const handleImportRemove = () => {
-    selectedImportFile.value = null
-}
-
-const submitImport = async () => {
-    if (importLoading.value) {
-        return
-    }
-    if (!selectedImportFile.value) {
-        ElMessage.warning('请选择文件！')
-        return
-    }
-
-    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
-    }
+const handleImportSuccess = () => {
+    proTable.value?.getTableList()
 }
 </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>