新增征信维护上传交互

ruoyi-ui/src/views/ccdiCreditInfo/index.vue

@@ -44,7 +44,7 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-upload2" size="mini">批量上传征信HTML</el-button>
+        <el-button type="primary" plain icon="el-icon-upload2" size="mini" @click="openUploadDialog">批量上传征信HTML</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
     </el-row>
@@ -74,11 +74,63 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+
+    <el-dialog title="批量上传征信HTML" :visible.sync="uploadDialogVisible" width="720px" append-to-body>
+      <el-upload
+        ref="upload"
+        action=""
+        :auto-upload="false"
+        :file-list="uploadFileList"
+        :before-upload="beforeUpload"
+        :on-change="handleFileChange"
+        :on-remove="handleFileRemove"
+        multiple
+      >
+        <el-button type="primary" size="small">选择文件</el-button>
+        <div slot="tip" class="el-upload__tip">仅支持 .html / .htm 文件，可一次选择多个文件</div>
+      </el-upload>
+
+      <div class="upload-result" v-if="uploadResult.totalCount || failureList.length">
+        <div class="section-title">上传结果</div>
+        <el-row :gutter="16" class="upload-summary">
+          <el-col :span="8">
+            <div class="summary-item">
+              <span class="summary-label">总文件数</span>
+              <span class="summary-value">{{ uploadResult.totalCount }}</span>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="summary-item">
+              <span class="summary-label">成功数</span>
+              <span class="summary-value">{{ uploadResult.successCount }}</span>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="summary-item">
+              <span class="summary-label">失败数</span>
+              <span class="summary-value">{{ uploadResult.failureCount }}</span>
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-table v-if="failureList.length" :data="failureList" size="mini">
+          <el-table-column label="失败文件名" prop="fileName" min-width="180" />
+          <el-table-column label="身份证号" prop="personId" min-width="180" />
+          <el-table-column label="姓名" prop="personName" min-width="120" />
+          <el-table-column label="原因" prop="reason" min-width="220" show-overflow-tooltip />
+        </el-table>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="uploadDialogVisible = false">取 消</el-button>
+        <el-button type="primary" :loading="uploadSubmitting" @click="handleUploadSubmit">上 传</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listCreditInfo } from "@/api/ccdiCreditInfo";
+import { listCreditInfo, uploadCreditHtml } from "@/api/ccdiCreditInfo";
 
 export default {
   name: "CcdiCreditInfo",
@@ -88,6 +140,15 @@ export default {
       showSearch: true,
       total: 0,
       creditInfoList: [],
+      uploadDialogVisible: false,
+      uploadSubmitting: false,
+      uploadFileList: [],
+      uploadResult: {
+        totalCount: 0,
+        successCount: 0,
+        failureCount: 0,
+      },
+      failureList: [],
       queryParams: {
         pageNum: 1,
         pageSize: 10,
@@ -131,6 +192,57 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
+    openUploadDialog() {
+      this.uploadDialogVisible = true;
+    },
+    beforeUpload(file) {
+      const fileName = file.name.toLowerCase();
+      const passed = fileName.endsWith(".html") || fileName.endsWith(".htm");
+      if (!passed) {
+        this.$modal.msgError("仅支持上传 .html 或 .htm 文件");
+      }
+      return passed;
+    },
+    handleFileChange(file, fileList) {
+      const currentFile = file.raw || file;
+      if (!this.beforeUpload(currentFile)) {
+        this.uploadFileList = fileList.filter((item) => {
+          const name = (item.name || "").toLowerCase();
+          return name.endsWith(".html") || name.endsWith(".htm");
+        });
+        return;
+      }
+      this.uploadFileList = fileList;
+    },
+    handleFileRemove(file, fileList) {
+      this.uploadFileList = fileList;
+    },
+    handleUploadSubmit() {
+      if (!this.uploadFileList.length) {
+        this.$modal.msgError("请先选择征信 HTML 文件");
+        return;
+      }
+      const formData = new FormData();
+      this.uploadFileList.forEach((file) => {
+        formData.append("files", file.raw || file);
+      });
+      this.uploadSubmitting = true;
+      return uploadCreditHtml(formData)
+        .then((response) => {
+          const data = response.data || {};
+          this.uploadResult = {
+            totalCount: data.totalCount || 0,
+            successCount: data.successCount || 0,
+            failureCount: data.failureCount || 0,
+          };
+          this.failureList = data.failures || [];
+          this.$modal.msgSuccess(response.msg || "上传成功");
+          this.getList();
+        })
+        .finally(() => {
+          this.uploadSubmitting = false;
+        });
+    },
   },
 };
 </script>
@@ -142,4 +254,37 @@ export default {
   font-weight: 600;
   color: #303133;
 }
+
+.upload-result {
+  margin-top: 20px;
+}
+
+.section-title {
+  margin-bottom: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.upload-summary {
+  margin-bottom: 16px;
+}
+
+.summary-item {
+  padding: 12px 16px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+.summary-label {
+  display: block;
+  margin-bottom: 4px;
+  color: #909399;
+}
+
+.summary-value {
+  font-size: 20px;
+  font-weight: 600;
+  color: #303133;
+}
 </style>

ruoyi-ui/tests/unit/credit-info-upload-ui.test.js

@@ -0,0 +1,27 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const componentPath = path.resolve(
+  __dirname,
+  "../../src/views/ccdiCreditInfo/index.vue"
+);
+const source = fs.readFileSync(componentPath, "utf8");
+
+[
+  "uploadDialogVisible",
+  "uploadFileList",
+  "批量上传征信HTML",
+  "仅支持 .html / .htm 文件",
+  "上传结果",
+  "failureList",
+  "successCount",
+  "failureCount",
+  "handleUploadSubmit",
+  "beforeUpload",
+  "uploadCreditHtml",
+].forEach((token) => {
+  assert(source.includes(token), `征信上传交互缺少关键结构: ${token}`);
+});
+
+console.log("credit-info-upload-ui test passed");