新增征信维护上传交互
This commit is contained in:
@@ -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>
|
||||
|
||||
27
ruoyi-ui/tests/unit/credit-info-upload-ui.test.js
Normal file
27
ruoyi-ui/tests/unit/credit-info-upload-ui.test.js
Normal file
@@ -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");
|
||||
Reference in New Issue
Block a user