icd导入按钮及权限控制

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

@@ -28,6 +28,10 @@ export const updateICD = (params: FormData) => {
     return http.upload(`/icd/update`, params)
 }
 
+export const importICDJson = (params: FormData) => {
+    return http.upload(`/icd/import/json`, params)
+}
+
 export const deleteICD = (params: string[]) => {
     return http.post(`/icd/delete`, params)
 }

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

@@ -2,13 +2,16 @@
     <div class="table-box">
         <ProTable ref="proTable" :columns="columns" :request-api="getTableList">
             <template #tableHeader>
-                <el-button v-auth.devType="'add'" type="primary" :icon="CirclePlus" @click="openDialog('add')">
+                <el-button v-auth.icd="'add'" type="primary" :icon="CirclePlus" @click="openDialog('add')">
                     新增
                 </el-button>
+                <el-button v-auth.icd="'import'" type="primary" plain :icon="Upload" @click="openImportDialog">
+                    导入
+                </el-button>
             </template>
             <template #operation="scope">
                 <el-button
-                    v-auth.devType="'edit'"
+                    v-auth.icd="'edit'"
                     type="primary"
                     link
                     :icon="EditPen"
@@ -17,7 +20,7 @@
                     编辑
                 </el-button>
                 <el-button
-                    v-auth.devType="'delete'"
+                    v-auth.icd="'delete'"
                     type="primary"
                     link
                     :icon="Delete"
@@ -30,17 +33,42 @@
         </ProTable>
     </div>
     <IcdPopup ref="icdPopup" :refresh-table="proTable?.getTableList" />
+    <el-dialog v-model="importDialogVisible" title="导入ICD" width="460px" destroy-on-close>
+        <el-upload
+            ref="importUploadRef"
+            action="#"
+            class="upload"
+            :auto-upload="false"
+            :limit="1"
+            accept=".json,application/json"
+            :http-request="handleImportRequest"
+            :on-exceed="handleImportExceed"
+            :before-upload="beforeImportUpload"
+        >
+            <el-button type="primary" :icon="Upload">选择文件</el-button>
+            <template #tip>
+                <div class="el-upload__tip">请上传 .json 文件</div>
+            </template>
+        </el-upload>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="closeImportDialog">取消</el-button>
+                <el-button type="primary" @click="submitImport">开始导入</el-button>
+            </div>
+        </template>
+    </el-dialog>
 </template>
 
 <script setup lang="tsx" name="useIcd">
 import { reactive, ref } from 'vue'
-import { CirclePlus, Delete, Download, EditPen } from '@element-plus/icons-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 type { ICD } from '@/api/device/interface/icd'
 import ProTable from '@/components/ProTable/index.vue'
 import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
 import { useHandleData } from '@/hooks/useHandleData'
 import { useDownloadWithServerFileName } from '@/hooks/useDownload'
-import { deleteICD, exportICD, getICDList } from '@/api/device/icd'
+import { deleteICD, exportICD, getICDList, importICDJson } from '@/api/device/icd'
 import { formatIcdTypeLabel, ICD_TYPE_OPTIONS } from './components/icdForm'
 import IcdPopup from './components/icdPopup.vue'
 
@@ -50,6 +78,8 @@ defineOptions({
 
 const proTable = ref<ProTableInstance>()
 const icdPopup = ref<InstanceType<typeof IcdPopup>>()
+const importDialogVisible = ref(false)
+const importUploadRef = ref<UploadInstance | null>(null)
 
 const getTableList = async (params: ICD.ReqICDParams) => {
     return getICDList({ ...params })
@@ -134,4 +164,49 @@ const handleDelete = async (row: ICD.ResICD) => {
 const handleExport = async (row: ICD.ResICD) => {
     await useDownloadWithServerFileName(() => exportICD(row.id), row.name, {}, false, '.zip')
 }
+
+const openImportDialog = () => {
+    importDialogVisible.value = true
+}
+
+const closeImportDialog = () => {
+    importDialogVisible.value = false
+    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)
+}
+
+const handleImportRequest = async (param: UploadRequestOptions) => {
+    const formData = new FormData()
+    formData.append('file', param.file)
+    await importICDJson(formData)
+    ElMessage.success('导入成功')
+    closeImportDialog()
+    await proTable.value?.getTableList()
+}
+
+const submitImport = () => {
+    if (!importUploadRef.value?.uploadFiles.length) {
+        ElMessage.warning('请选择文件！')
+        return
+    }
+    importUploadRef.value.submit()
+}
 </script>