refactor: ♻️ 导入增加错误提示信息

导入增加错误提示信息

src/api/system/user.ts

@@ -126,7 +126,7 @@ const UserAPI = {
   import(deptId: number, file: File) {
     const formData = new FormData();
     formData.append("file", file);
-    return request({
+    return request<any, ExcelResult>({
       url: `${USER_BASE_URL}/import`,
       method: "post",
       params: { deptId: deptId },

src/types/global.d.ts

@@ -89,5 +89,18 @@ declare global {
     /** 子列表  */
     children?: OptionType[];
   }
+  /**
+   * 导入结果
+   */
+  interface ExcelResult {
+    /** 状态码 */
+    code: string;
+    /** 无效数据条数 */
+    invalidCount: number;
+    /** 有效数据条数 */
+    validCount: number;
+    /** 错误信息 */
+    messageList: Array<string>;
+  }
 }
 export {};

src/views/system/user/components/UserImport.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <el-dialog
       v-model="visible"
       :align-center="true"
@@ -49,6 +50,9 @@
       </el-scrollbar>
       <template #footer>
         <div style="padding-right: var(--el-dialog-padding-primary)">
+          <el-button v-if="resultData.length > 0" type="primary" @click="handleShowResult">
+            错误信息
+          </el-button>
           <el-button
             type="primary"
             :disabled="importFormData.files.length === 0"
@@ -60,11 +64,34 @@
         </div>
       </template>
     </el-dialog>
+
+    <el-dialog v-model="resultVisible" title="导入结果" width="600px">
+      <el-alert
+        :title="`导入结果：${invalidCount}条无效数据，${validCount}条有效数据`"
+        type="warning"
+        :closable="false"
+      />
+      <el-table :data="resultData" style="width: 100%; max-height: 400px">
+        <el-table-column prop="index" align="center" width="100" type="index" label="序号" />
+        <el-table-column prop="message" label="错误信息" width="400">
+          <template #default="scope">
+            {{ scope.row }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleCloseResult">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { ElMessage, type UploadUserFile } from "element-plus";
 import UserAPI from "@/api/system/user";
+import { ResultEnum } from "@/enums/ResultEnum";
 
 const emit = defineEmits(["import-success"]);
 const visible = defineModel("modelValue", {
@@ -73,6 +100,11 @@ const visible = defineModel("modelValue", {
   default: false,
 });
 
+const resultVisible = ref(false);
+const resultData = ref<string[]>([]);
+const invalidCount = ref(0);
+const validCount = ref(0);
+
 const importFormRef = ref(null);
 const uploadRef = ref(null);
 
@@ -82,6 +114,15 @@ const importFormData = reactive<{
   files: [],
 });
 
+watch(visible, (newValue) => {
+  if (newValue) {
+    resultData.value = [];
+    resultVisible.value = false;
+    invalidCount.value = 0;
+    validCount.value = 0;
+  }
+});
+
 const importFormRules = {
   files: [{ required: true, message: "文件不能为空", trigger: "blur" }],
 };
@@ -122,15 +163,33 @@ const handleUpload = async () => {
   }
 
   try {
-    await UserAPI.import(1, importFormData.files[0].raw as File);
+    const result = await UserAPI.import(1, importFormData.files[0].raw as File);
-    ElMessage.success("上传成功");
+    if (result.code === ResultEnum.SUCCESS && result.invalidCount === 0) {
+      ElMessage.success("导入成功，导入数据：" + result.validCount + "条");
       emit("import-success");
       handleClose();
+    } else {
+      ElMessage.error("上传失败");
+      resultVisible.value = true;
+      resultData.value = result.messageList;
+      invalidCount.value = result.invalidCount;
+      validCount.value = result.validCount;
+    }
   } catch (error) {
     ElMessage.error("上传失败");
   }
 };
 
+// 显示错误信息
+const handleShowResult = () => {
+  resultVisible.value = true;
+};
+
+// 关闭错误信息弹窗
+const handleCloseResult = () => {
+  resultVisible.value = false;
+};
+
 // 关闭弹窗
 const handleClose = () => {
   importFormData.files.length = 0;