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,70 +1,97 @@
 <template>
-  <el-dialog
+  <div>
-    v-model="visible"
+    <el-dialog
-    :align-center="true"
+      v-model="visible"
-    title="导入数据"
+      :align-center="true"
-    width="600px"
+      title="导入数据"
-    @close="handleClose"
+      width="600px"
-  >
+      @close="handleClose"
-    <el-scrollbar max-height="60vh">
+    >
-      <el-form
+      <el-scrollbar max-height="60vh">
-        ref="importFormRef"
+        <el-form
-        label-width="auto"
+          ref="importFormRef"
-        style="padding-right: var(--el-dialog-padding-primary)"
+          label-width="auto"
-        :model="importFormData"
+          style="padding-right: var(--el-dialog-padding-primary)"
-        :rules="importFormRules"
+          :model="importFormData"
-      >
+          :rules="importFormRules"
-        <el-form-item label="文件名" prop="files">
-          <el-upload
-            ref="uploadRef"
-            v-model:file-list="importFormData.files"
-            class="w-full"
-            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
-            :drag="true"
-            :limit="1"
-            :auto-upload="false"
-            :on-exceed="handleFileExceed"
-          >
-            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-            <div class="el-upload__text">
-              将文件拖到此处，或
-              <em>点击上传</em>
-            </div>
-            <template #tip>
-              <div class="el-upload__tip">
-                格式为*.xlsx / *.xls，文件不超过一个
-                <el-link
-                  type="primary"
-                  icon="download"
-                  :underline="false"
-                  @click="handleDownloadTemplate"
-                >
-                  下载模板
-                </el-link>
-              </div>
-            </template>
-          </el-upload>
-        </el-form-item>
-      </el-form>
-    </el-scrollbar>
-    <template #footer>
-      <div style="padding-right: var(--el-dialog-padding-primary)">
-        <el-button
-          type="primary"
-          :disabled="importFormData.files.length === 0"
-          @click="handleUpload"
         >
-          确 定
+          <el-form-item label="文件名" prop="files">
-        </el-button>
+            <el-upload
-        <el-button @click="handleClose">取 消</el-button>
+              ref="uploadRef"
-      </div>
+              v-model:file-list="importFormData.files"
-    </template>
+              class="w-full"
-  </el-dialog>
+              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+              :drag="true"
+              :limit="1"
+              :auto-upload="false"
+              :on-exceed="handleFileExceed"
+            >
+              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+              <div class="el-upload__text">
+                将文件拖到此处，或
+                <em>点击上传</em>
+              </div>
+              <template #tip>
+                <div class="el-upload__tip">
+                  格式为*.xlsx / *.xls，文件不超过一个
+                  <el-link
+                    type="primary"
+                    icon="download"
+                    :underline="false"
+                    @click="handleDownloadTemplate"
+                  >
+                    下载模板
+                  </el-link>
+                </div>
+              </template>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+      </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"
+            @click="handleUpload"
+          >
+            确 定
+          </el-button>
+          <el-button @click="handleClose">取 消</el-button>
+        </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) {
-    emit("import-success");
+      ElMessage.success("导入成功，导入数据：" + result.validCount + "条");
-    handleClose();
+      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;