feat: import Terminologies

frontend/src/api/professional.ts

@@ -16,4 +16,13 @@ export const professionalApi = {
       responseType: 'blob',
       requestOptions: { customError: true },
     }),
+  downloadError: (path: any) =>
+    request.post(
+      `/system/terminology/download-fail-info`,
+      { file: path },
+      {
+        responseType: 'blob',
+        requestOptions: { customError: true },
+      }
+    ),
 }

frontend/src/views/system/professional/index.vue

@@ -12,6 +12,9 @@ import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlin
 import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
 import { useI18n } from 'vue-i18n'
 import { cloneDeep } from 'lodash-es'
+import { genFileId, type UploadInstance, type UploadProps, type UploadRawFile } from 'element-plus'
+import { trainingApi } from '@/api/training.ts'
+import { useCache } from '@/utils/useCache.ts'
 
 interface Form {
   id?: string | null
@@ -24,6 +27,7 @@ interface Form {
 }
 
 const { t } = useI18n()
+const { wsCache } = useCache()
 const multipleSelectionAll = ref<any[]>([])
 const allDsList = ref<any[]>([])
 const keywords = ref('')
@@ -67,7 +71,91 @@ const cancelDelete = () => {
   isIndeterminate.value = false
 }
 
-const uploadExcel = () => {}
+const uploadRef = ref<UploadInstance>()
+const uploadLoading = ref(false)
+
+const token = wsCache.get('user.token')
+const headers = ref<any>({ 'X-SQLBOT-TOKEN': `Bearer ${token}` })
+const getUploadURL = import.meta.env.VITE_API_BASE_URL + '/system/terminology/uploadExcel'
+
+const handleExceed: UploadProps['onExceed'] = (files) => {
+  uploadRef.value!.clearFiles()
+  const file = files[0] as UploadRawFile
+  file.uid = genFileId()
+  uploadRef.value!.handleStart(file)
+}
+
+const beforeUpload = (rawFile: any) => {
+  if (rawFile.size / 1024 / 1024 > 50) {
+    ElMessage.error(t('common.not_exceed_50mb'))
+    return false
+  }
+  uploadLoading.value = true
+  return true
+}
+const onSuccess = (response: any) => {
+  uploadRef.value!.clearFiles()
+  search()
+
+  if (response?.data?.failed_count > 0 && response?.data?.error_excel_filename) {
+    ElMessage.error(
+      t('training.upload_failed', {
+        success: response.data.success_count,
+        fail: response.data.failed_count,
+        fail_info: response.data.error_excel_filename,
+      })
+    )
+    trainingApi
+      .downloadError(response.data.error_excel_filename)
+      .then((res) => {
+        const blob = new Blob([res], {
+          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        })
+        const link = document.createElement('a')
+        link.href = URL.createObjectURL(blob)
+        link.download = response.data.error_excel_filename
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      })
+      .catch(async (error) => {
+        if (error.response) {
+          try {
+            let text = await error.response.data.text()
+            try {
+              text = JSON.parse(text)
+            } finally {
+              ElMessage({
+                message: text,
+                type: 'error',
+                showClose: true,
+              })
+            }
+          } catch (e) {
+            console.error('Error processing error response:', e)
+          }
+        } else {
+          console.error('Other error:', error)
+          ElMessage({
+            message: error,
+            type: 'error',
+            showClose: true,
+          })
+        }
+      })
+      .finally(() => {
+        uploadLoading.value = false
+      })
+  } else {
+    ElMessage.success(t('training.upload_success'))
+    uploadLoading.value = false
+  }
+}
+
+const onError = () => {
+  uploadLoading.value = false
+  uploadRef.value!.clearFiles()
+}
 
 const exportExcel = () => {
   ElMessageBox.confirm(t('professional.all_236_terms', { msg: pageInfo.total }), {
@@ -357,7 +445,7 @@ const changeStatus = (id: any, val: any) => {
   <div v-loading="searchLoading" class="professional">
     <div class="tool-left">
       <span class="page-title">{{ $t('professional.professional_terminology') }}</span>
-      <div>
+      <div class="tool-row">
         <el-input
           v-model="keywords"
           style="width: 240px; margin-right: 12px"
@@ -377,12 +465,26 @@ const changeStatus = (id: any, val: any) => {
           </template>
           {{ $t('professional.export_all') }}
         </el-button>
-        <el-button v-if="false" secondary @click="uploadExcel()">
-          <template #icon>
-            <ccmUpload></ccmUpload>
-          </template>
-          {{ $t('user.batch_import') }}
-        </el-button>
+        <el-upload
+          ref="uploadRef"
+          :multiple="false"
+          accept=".xlsx,.xls"
+          :action="getUploadURL"
+          :before-upload="beforeUpload"
+          :headers="headers"
+          :on-success="onSuccess"
+          :on-error="onError"
+          :show-file-list="false"
+          :limit="1"
+          :on-exceed="handleExceed"
+        >
+          <el-button secondary>
+            <template #icon>
+              <ccmUpload></ccmUpload>
+            </template>
+            {{ $t('user.batch_import') }}
+          </el-button>
+        </el-upload>
         <el-button type="primary" @click="editHandler(null)">
           <template #icon>
             <icon_add_outlined></icon_add_outlined>
@@ -707,6 +809,12 @@ const changeStatus = (id: any, val: any) => {
       font-size: 20px;
       line-height: 28px;
     }
+    .tool-row {
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      gap: 8px;
+    }
   }
 
   .pagination-container {

frontend/src/views/system/training/index.vue

@@ -90,8 +90,6 @@ const cancelDelete = () => {
   isIndeterminate.value = false
 }
 
-const upload = () => {}
-
 const uploadRef = ref<UploadInstance>()
 const uploadLoading = ref(false)
 
@@ -488,7 +486,7 @@ const onRowFormClose = () => {
           :limit="1"
           :on-exceed="handleExceed"
         >
-          <el-button secondary @click="upload()">
+          <el-button secondary>
             <template #icon>
               <ccmUpload></ccmUpload>
             </template>