wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整上传数据页列表工具栏布局

Browse Source
This commit is contained in:
wkc
2026-03-25 14:26:58 +08:00
parent ad4e115787
commit e521169a7c
4 changed files with 91 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/reports/implementation/2026-03-25-project-upload-page-light-redesign-frontend-record.md
View File

@@ -2,13 +2,16 @@
## 本次改动
- 移除上传数据页中的上传流水卡片
- 将上传流水提升为右上角唯一主按钮
- 统一头部、锁定提示和文件记录区视觉
- 移除上传数据页标题卡片，将操作入口收束到文件上传列表右上角
- 右上角按钮顺序调整为上传流水、拉取本行信息、征信导入、查看报告
- 查看报告保留重要按钮样式，其余头部按钮改为默认样式
- 文件上传列表表头移除自定义颜色，统一锁定提示和文件记录区视觉
## 影响文件
- `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
- `ruoyi-ui/tests/unit/upload-data-header-import-button.test.js`
- `ruoyi-ui/tests/unit/upload-data-disabled-cards.test.js`
- `ruoyi-ui/tests/unit/upload-data-file-list-table.test.js`
## 验证
- `node ruoyi-ui/tests/unit/upload-data-header-import-button.test.js`

108
ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue
View File

@@ -2,27 +2,23 @@
<div class="upload-data-container">
<!-- 主内容区 -->
<div class="main-content">
<!-- 页面头部 -->
<div class="content-header">
<h2 class="content-title">{{ currentMenuTitle }}</h2>
<div class="header-actions">
<div v-if="isProjectTagging || isProjectArchived" class="tagging-lock-tip">
{{ isProjectArchived ? "项目已归档，暂不可上传或拉取数据。" : "项目正在进行银行流水打标，暂不可上传或拉取数据。" }}
</div>
<!-- 文件上传记录列表 -->
<div class="file-list-section">
<div class="list-toolbar">
<el-button icon="el-icon-refresh" @click="handleManualRefresh">刷新</el-button>
<div class="toolbar-actions">
<el-button
size="small"
type="primary"
icon="el-icon-upload2"
:disabled="isProjectTagging || isProjectArchived"
@click="handleOpenBatchUploadDialog"
>
上传流水
</el-button>
<el-button
size="small"
icon="el-icon-view"
:disabled="isReportDisabled"
@click="handleViewReport"
>
查看报告
</el-button>
<el-button
size="small"
icon="el-icon-download"
@@ -39,19 +35,18 @@
>
征信导入
</el-button>
<el-button
size="small"
type="primary"
icon="el-icon-view"
:disabled="isReportDisabled"
@click="handleViewReport"
>
查看报告
</el-button>
</div>
</div>
<div v-if="isProjectTagging || isProjectArchived" class="tagging-lock-tip">
{{ isProjectArchived ? "项目已归档，暂不可上传或拉取数据。" : "项目正在进行银行流水打标，暂不可上传或拉取数据。" }}
</div>
<!-- 文件上传记录列表 -->
<div class="file-list-section">
<div class="list-toolbar">
<el-button icon="el-icon-refresh" @click="handleManualRefresh">刷新</el-button>
</div>
<el-table :data="fileUploadList" v-loading="listLoading">
<el-table-column prop="fileName" label="文件名" min-width="200"></el-table-column>
<el-table-column prop="fileSize" label="文件大小" width="120">
@@ -1022,38 +1017,6 @@ export default {
// 主内容区
.main-content {
.content-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
padding: 20px 24px;
border: 1px solid #ebeef5;
border-radius: 12px;
background: linear-gradient(135deg, #fffaf5 0%, #ffffff 58%, #fff4ec 100%);
box-shadow: 0 10px 24px rgba(140, 76, 38, 0.08);
.content-title {
margin: 0;
font-size: 20px;
font-weight: 600;
color: #303133;
line-height: 32px;
}
.header-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 12px;
.el-button {
min-width: 104px;
}
}
}
.tagging-lock-tip {
margin-bottom: 16px;
padding: 10px 14px;
@@ -1075,11 +1038,22 @@ export default {
.list-toolbar {
display: flex;
justify-content: flex-end;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f2f5;
.toolbar-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 12px;
.el-button {
min-width: 104px;
}
}
}
::v-deep .el-table {
@@ -1089,8 +1063,6 @@ export default {
}
::v-deep .el-table th {
background: #faf6f2;
color: #5f4b3a;
font-weight: 600;
}
}
@@ -1275,8 +1247,8 @@ export default {
// 响应式
@media (max-width: 1200px) {
.main-content .content-header {
padding: 18px 20px;
.file-list-section .list-toolbar .toolbar-actions {
gap: 10px;
}
}
@@ -1289,21 +1261,15 @@ export default {
margin-bottom: 16px;
}
.content-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
.header-actions {
width: 100%;
justify-content: flex-start;
}
}
.file-list-section .list-toolbar {
flex-direction: column;
align-items: flex-start;
gap: 12px;
.toolbar-actions {
width: 100%;
justify-content: flex-start;
}
}
.pull-bank-file-panel {

12
ruoyi-ui/tests/unit/upload-data-file-list-table.test.js
View File

@@ -22,4 +22,16 @@ assert(
"上传数据文件列表表格不应再启用斑马纹"
);
const tableHeaderStyleMatch = source.match(
/::v-deep \.el-table th\s*\{([^}]*)\}/
);
assert(tableHeaderStyleMatch, "未找到文件上传列表表头样式");
assert(
/font-weight:\s*600;/.test(tableHeaderStyleMatch[1]) &&
!/background:/.test(tableHeaderStyleMatch[1]) &&
!/color:/.test(tableHeaderStyleMatch[1]),
"文件上传列表表头应移除自定义颜色，仅保留基础字重"
);
console.log("upload-data-file-list-table test passed");

24
ruoyi-ui/tests/unit/upload-data-header-import-button.test.js
View File

@@ -9,17 +9,33 @@ const componentPath = path.resolve(
const source = fs.readFileSync(componentPath, "utf8");
assert(
/<div class="header-actions">[\s\S]*?@click="handleOpenBatchUploadDialog"[\s\S]*?>\s*上传流水\s*<\/el-button>[\s\S]*?@click="handleViewReport"[\s\S]*?>\s*查看报告\s*<\/el-button>[\s\S]*?@click="handleFetchBankInfo"[\s\S]*?>\s*拉取本行信息\s*<\/el-button>[\s\S]*?@click="handleGoCreditInfoPage"[\s\S]*?>\s*征信导入\s*<\/el-button>/.test(
/<div class="list-toolbar">[\s\S]*?<div class="toolbar-actions">[\s\S]*?@click="handleOpenBatchUploadDialog"[\s\S]*?>\s*上传流水\s*<\/el-button>[\s\S]*?@click="handleFetchBankInfo"[\s\S]*?>\s*拉取本行信息\s*<\/el-button>[\s\S]*?@click="handleGoCreditInfoPage"[\s\S]*?>\s*征信导入\s*<\/el-button>[\s\S]*?@click="handleViewReport"[\s\S]*?>\s*查看报告\s*<\/el-button>/.test(
source
),
"页面右上角按钮顺序应为上传流水、查看报告、拉取本行信息、征信导入"
"文件上传列表右上角按钮顺序应为上传流水、拉取本行信息、征信导入、查看报告"
);
assert(
/<el-button[\s\S]*?type="primary"[\s\S]*?@click="handleOpenBatchUploadDialog"[\s\S]*?>\s*上传流水\s*<\/el-button>/.test(
/<el-button[\s\S]*?type="primary"[\s\S]*?@click="handleViewReport"[\s\S]*?>\s*查看报告\s*<\/el-button>/.test(
source
),
"上传流水按钮应为头部唯一主按钮"
"查看报告按钮应为头部唯一重要按钮"
);
assert(
/<el-button[\s\S]*?@click="handleOpenBatchUploadDialog"[\s\S]*?>\s*上传流水\s*<\/el-button>/.test(
source
) &&
!/<el-button[\s\S]*?type="primary"[\s\S]*?@click="handleOpenBatchUploadDialog"[\s\S]*?>\s*上传流水\s*<\/el-button>/.test(
source
),
"上传流水按钮应为默认样式"
);
assert(
!/class="content-header"/.test(source) &&
!/\.content-header\s*\{/.test(source),
"页面标题卡片和相关样式应已移除"
);
assert(