调整上传数据页头部按钮与导入卡片布局

This commit is contained in:
wkc
2026-03-23 19:58:03 +08:00
parent 29be8a88a8
commit 27aab7f9bc
4 changed files with 204 additions and 199 deletions

View File

@@ -9,10 +9,11 @@
<el-button
size="small"
type="primary"
icon="el-icon-document"
@click="handleGenerateReport"
icon="el-icon-view"
:disabled="isReportDisabled"
@click="handleViewReport"
>
生成报告
查看报告
</el-button>
<el-button
size="small"
@@ -22,6 +23,14 @@
>
拉取本行信息
</el-button>
<el-button
size="small"
icon="el-icon-upload2"
:disabled="isProjectTagging"
@click="handleOpenCreditUpload"
>
征信导入
</el-button>
</div>
</div>
@@ -158,11 +167,10 @@
</div> -->
</div>
<!-- 上传弹窗 -->
<el-dialog
v-if="showUploadDialog"
:title="uploadDialogTitle"
:visible.sync="showUploadDialog"
v-if="showCreditUploadDialog"
title="征信导入"
:visible.sync="showCreditUploadDialog"
:close-on-click-modal="false"
width="500px"
>
@@ -172,53 +180,25 @@
action="#"
:disabled="isProjectTagging"
:auto-upload="false"
:on-change="handleFileChange"
:file-list="fileList"
:on-change="handleCreditFileChange"
:file-list="creditFileList"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">
支持 {{ uploadFileTypes }} 格式文件
支持 HTML 格式文件
</div>
</el-upload>
<span slot="footer">
<el-button @click="showUploadDialog = false">取消</el-button>
<el-button @click="showCreditUploadDialog = false">取消</el-button>
<el-button
type="primary"
:disabled="isProjectTagging"
@click="handleConfirmUpload"
:loading="uploading"
>确定</el-button
>
</span>
</el-dialog>
<!-- 名单选择弹窗 -->
<el-dialog
:title="'名单库选择'"
:visible.sync="showNameListDialog"
width="600px"
>
<el-form :model="nameListForm" label-width="100px">
<el-form-item label="名单类型">
<el-select v-model="nameListForm.type" placeholder="请选择名单类型">
<el-option label="黑名单" value="blacklist"></el-option>
<el-option label="灰名单" value="graylist"></el-option>
<el-option label="白名单" value="whitelist"></el-option>
</el-select>
</el-form-item>
<el-form-item label="名单来源">
<el-select v-model="nameListForm.source" placeholder="请选择名单来源">
<el-option label="中台管理系统" value="platform"></el-option>
<el-option label="本地上传" value="local"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer">
<el-button @click="showNameListDialog = false">取消</el-button>
<el-button type="primary" @click="handleConfirmNameList"
>确定</el-button
:loading="creditUploading"
@click="handleConfirmCreditUpload"
>
确定
</el-button>
</span>
</el-dialog>
@@ -375,11 +355,9 @@
<script>
import {
getImportStatus,
getNameListOptions,
getUploadStatus,
pullBankInfo,
parseIdCardFile,
updateNameListSelection,
uploadFile,
batchUploadFiles,
getFileUploadList,
@@ -419,13 +397,9 @@ export default {
currentMenuTitle: "上传数据",
// 圆环周长
circumference: 2 * Math.PI * 14,
// 上传弹窗
showUploadDialog: false,
uploadDialogTitle: "",
uploadFileType: "",
uploadFileTypes: "",
fileList: [],
uploading: false,
showCreditUploadDialog: false,
creditFileList: [],
creditUploading: false,
pullBankInfoDialogVisible: false,
pullBankInfoLoading: false,
parsingIdCardFile: false,
@@ -434,16 +408,8 @@ export default {
idCardText: "",
dateRange: [],
},
// 名单选择弹窗
showNameListDialog: false,
nameListForm: {
type: "",
source: "platform",
},
// 上传状态列表
uploadStatusList: [],
// 名单库选项列表
nameListOptions: [],
// 侧边栏菜单项
menuItems: [
{ key: "upload", label: "上传数据", route: "upload" },
@@ -463,24 +429,6 @@ export default {
uploaded: false,
disabled: false,
},
{
key: "credit",
title: "征信导入",
desc: "支持 HTML 格式征信数据解析",
icon: "el-icon-s-data",
btnText: "上传征信",
uploaded: false,
disabled: true,
},
{
key: "namelist",
title: "名单库选择",
desc: "选择中台管理系统的名单",
icon: "el-icon-s-order",
btnText: "选择名单",
uploaded: false,
disabled: true,
},
],
// 质量指标
metrics: [
@@ -542,6 +490,9 @@ export default {
isProjectTagging() {
return String(this.projectInfo.projectStatus) === "3";
},
isReportDisabled() {
return ["0", "3"].includes(String(this.projectInfo.projectStatus));
},
},
watch: {
"projectInfo.projectStatus"() {
@@ -580,15 +531,8 @@ export default {
try {
this.loading = true;
// 并行加载上传状态和名单库选项
const [uploadStatusRes, nameListRes] = await Promise.all([
getUploadStatus(this.projectId),
getNameListOptions(),
]);
const uploadStatusRes = await getUploadStatus(this.projectId);
this.uploadStatusList = uploadStatusRes.data || [];
this.nameListOptions = nameListRes.data || [];
// 更新上传卡片状态
this.updateUploadCards();
@@ -669,76 +613,75 @@ export default {
this.activeMenu = "upload";
this.currentMenuTitle = "上传数据";
},
handleViewReport() {
if (this.isReportDisabled) {
return;
}
this.$emit("menu-change", { key: "overview", route: "overview" });
},
handleOpenCreditUpload() {
if (this.isProjectTagging) {
return;
}
this.creditFileList = [];
this.showCreditUploadDialog = true;
},
/** 上传卡片点击 */
handleUploadClick(key) {
const card = this.uploadCards.find((c) => c.key === key);
if (!card || card.disabled) return;
if (key === "transaction") {
// 流水导入 - 打开批量上传弹窗
this.batchUploadDialogVisible = true;
this.selectedFiles = [];
} else if (key === "credit") {
// 征信导入 - 保持现有逻辑
this.uploadFileType = key;
this.uploadDialogTitle = `上传${card.title}`;
this.uploadFileTypes = card.desc.replace(/.*支持|上传/g, "").trim();
this.showUploadDialog = true;
} else if (key === "namelist") {
// 名单库选择 - 保持现有逻辑
this.showNameListDialog = true;
}
},
/** 文件选择变化 */
handleFileChange(file, fileList) {
this.fileList = fileList.slice(-1); // 只保留最后一个文件
handleCreditFileChange(file, fileList) {
this.creditFileList = fileList.slice(-1);
},
/** 确认上传 */
async handleConfirmUpload() {
async handleConfirmCreditUpload() {
if (this.isProjectTagging) {
this.$message.warning("项目正在进行银行流水打标,暂不可上传或拉取数据");
return;
}
if (this.fileList.length === 0) {
if (this.creditFileList.length === 0) {
this.$message.warning("请选择要上传的文件");
return;
}
this.uploading = true;
this.creditUploading = true;
try {
// 调用上传API
const res = await uploadFile(
this.projectId,
this.uploadFileType.toUpperCase(),
this.fileList[0].raw
"CREDIT",
this.creditFileList[0].raw
);
this.uploading = false;
this.showUploadDialog = false;
this.showCreditUploadDialog = false;
this.$message.success("征信文件上传成功,正在处理中...");
this.$emit("data-uploaded", { type: "credit" });
this.$message.success("文件上传成功,正在处理中...");
this.$emit("data-uploaded", { type: this.uploadFileType });
// 刷新上传状态
await this.loadUploadStatus();
// 开始轮询任务状态
this.startPolling(res.data);
this.pollCreditImportStatus(res && res.data);
} catch (error) {
this.uploading = false;
this.$message.error("上传失败:" + (error.msg || "未知错误"));
this.$message.error("征信上传失败:" + (error.msg || "未知错误"));
} finally {
this.fileList = [];
this.creditUploading = false;
this.creditFileList = [];
}
},
async pollCreditImportStatus(taskId) {
if (!taskId) {
return;
}
/** 轮询任务状态 */
startPolling(taskId) {
const maxAttempts = 20; // 最多轮询20次约10分钟
const maxAttempts = 20;
let attempts = 0;
const poll = async () => {
if (attempts >= maxAttempts) {
this.$message.warning("文件处理超时,请稍后查看");
this.$message.warning("征信导入处理超时,请稍后查看");
return;
}
@@ -747,39 +690,36 @@ export default {
const status = res.data;
if (!status) {
attempts++;
setTimeout(poll, 30000); // 30秒后再次查询
attempts += 1;
setTimeout(poll, 30000);
return;
}
if (status.uploadStatus === "SUCCESS") {
// 处理完成,刷新状态
await this.loadUploadStatus();
this.$message.success("文件处理完成");
this.$message.success("征信导入处理完成");
return;
} else if (status.uploadStatus === "FAILED") {
// 处理失败
}
if (status.uploadStatus === "FAILED") {
await this.loadUploadStatus();
this.$message.error(
"文件处理失败:" + (status.errorMessage || "未知错误")
"征信导入处理失败:" + (status.errorMessage || "未知错误")
);
return;
}
// 继续处理中
attempts++;
attempts += 1;
setTimeout(poll, 30000);
} catch (error) {
console.error("轮询任务状态失败:", error);
attempts++;
console.error("轮询征信导入状态失败:", error);
attempts += 1;
setTimeout(poll, 30000);
}
};
poll();
},
/** 加载上传状态 */
async loadUploadStatus() {
try {
const res = await getUploadStatus(this.projectId);
@@ -789,63 +729,6 @@ export default {
console.error("加载上传状态失败:", error);
}
},
/** 确认选择名单 */
async handleConfirmNameList() {
if (!this.nameListForm.type || !this.nameListForm.source) {
this.$message.warning("请完善名单选择信息");
return;
}
try {
// 调用更新名单API
await updateNameListSelection(this.projectId, {
nameLists: [
{
type: this.nameListForm.type,
source: this.nameListForm.source,
},
],
});
const card = this.uploadCards.find((c) => c.key === "namelist");
if (card) {
card.uploaded = true;
card.btnText = "已选择名单";
}
this.showNameListDialog = false;
this.$message.success("名单选择成功");
this.$emit("name-selected", this.nameListForm);
} catch (error) {
this.$message.error("名单选择失败:" + (error.msg || "未知错误"));
}
},
/** 生成报告 */
async handleGenerateReport() {
this.$confirm("确认生成报告吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(async () => {
try {
const loading = this.$loading({
lock: true,
text: "正在生成报告...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
// await generateReport(this.projectId);
loading.close();
this.$message.success("报告生成成功");
this.$emit("generate-report");
} catch (error) {
this.$message.error("生成报告失败:" + (error.msg || "未知错误"));
}
})
.catch(() => {});
},
openPullBankInfoDialog() {
this.pullBankInfoDialogVisible = true;
},
@@ -1491,11 +1374,12 @@ export default {
margin-bottom: 16px;
.upload-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
display: flex;
justify-content: center;
.upload-card {
width: 420px;
max-width: 100%;
border: 1px solid #ebeef5;
border-radius: 4px;
padding: 20px 16px;