调整上传数据页头部按钮与导入卡片布局
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user