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-12 10:46:40 +08:00
parent 3d61f7d252
commit 4e696eff1e
4 changed files with 332 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -210,7 +210,11 @@
:close-on-click-modal="false"
width="640px"
>
<el-form :model="pullBankInfoForm" label-width="100px">
<el-form
class="pull-bank-info-form"
:model="pullBankInfoForm"
label-width="100px"
>
<el-form-item label="证件号码">
<el-input
v-model="pullBankInfoForm.idCardText"
@@ -218,35 +222,57 @@
:rows="5"
placeholder="支持逗号、中文逗号、换行分隔"
/>
<div class="pull-bank-field-tip">
支持逗号、中文逗号、换行分隔，文件解析结果会自动合并并去重
</div>
</el-form-item>
<el-form-item label="身份证文件">
<el-upload
action="#"
:auto-upload="false"
:limit="1"
:file-list="idCardFileList"
accept=".xls,.xlsx"
:on-change="handleIdCardFileChange"
:on-remove="handleIdCardFileRemove"
>
<el-button size="small" type="primary">选择文件</el-button>
<div slot="tip" class="el-upload__tip">
支持 .xls、.xlsx 文件
<div class="pull-bank-file-panel">
<div class="pull-bank-file-actions">
<el-upload
class="pull-bank-file-upload"
action="#"
:auto-upload="false"
:limit="1"
:show-file-list="false"
:file-list="idCardFileList"
accept=".xls,.xlsx"
:on-change="handleIdCardFileChange"
:on-remove="handleIdCardFileRemove"
>
<el-button slot="trigger" size="small" type="primary" plain>
选择文件
</el-button>
</el-upload>
<div class="pull-bank-file-tip">
支持 .xls、.xlsx 文件，解析后自动补充证件号码
</div>
</div>
<div v-if="idCardFileList.length > 0" class="selected-id-card-file">
<div class="selected-id-card-file__info">
<i class="el-icon-document"></i>
<span class="selected-id-card-file__name">
{{ idCardFileList[0].name }}
</span>
</div>
<el-button type="text" @click="handleIdCardFileRemove">
移除
</el-button>
</div>
<div v-if="parsingIdCardFile" class="parse-tip">
正在解析身份证文件...
</div>
</el-upload>
<div v-if="parsingIdCardFile" class="parse-tip">
正在解析身份证文件...
</div>
</el-form-item>
<el-form-item label="时间跨度">
<el-date-picker
class="pull-bank-range-picker"
v-model="pullBankInfoForm.dateRange"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 100%"
/>
</el-form-item>
</el-form>
@@ -1442,17 +1468,20 @@ export default {
// 上传弹窗样式
::v-deep .el-dialog__wrapper {
.upload-area {
.upload-area,
.batch-upload-area {
width: 100%;
}
.el-upload {
.upload-area .el-upload,
.batch-upload-area .el-upload {
width: 100%;
}
.el-upload-dragger {
width: 100%;
height: 200px;
}
.upload-area .el-upload-dragger,
.batch-upload-area .el-upload-dragger {
width: 100%;
height: 200px;
}
.el-upload__tip {
@@ -1462,6 +1491,76 @@ export default {
}
}
.pull-bank-info-form {
.pull-bank-field-tip {
margin-top: 8px;
font-size: 12px;
color: #909399;
line-height: 1.5;
}
}
.pull-bank-file-panel {
padding: 16px;
border: 1px solid #e4e7ed;
border-radius: 8px;
background: #fafcff;
.pull-bank-file-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.pull-bank-file-tip {
font-size: 12px;
color: #606266;
line-height: 1.5;
}
}
.pull-bank-file-upload {
display: inline-flex;
flex: 0 0 auto;
}
.selected-id-card-file {
margin-top: 12px;
padding: 10px 12px;
border-radius: 6px;
background: #ffffff;
border: 1px solid #ebeef5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
.selected-id-card-file__info {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
color: #303133;
}
.selected-id-card-file__name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.el-button {
flex-shrink: 0;
padding: 0;
}
}
.pull-bank-range-picker {
width: 100%;
}
// 批量上传弹窗样式
.batch-upload-area {
width: 100%;
@@ -1586,5 +1685,23 @@ export default {
align-items: flex-start;
gap: 12px;
}
.pull-bank-file-panel {
padding: 12px;
.pull-bank-file-actions {
align-items: stretch;
gap: 10px;
}
}
.pull-bank-file-upload {
width: 100%;
}
.selected-id-card-file {
align-items: flex-start;
flex-direction: column;
}
}
</style>

39
ruoyi-ui/tests/unit/upload-data-pull-bank-info-dialog-layout.test.js Normal file
View File

@@ -0,0 +1,39 @@
const assert = require("assert");
const fs = require("fs");
const path = require("path");
const componentPath = path.resolve(
__dirname,
"../../src/views/ccdiProject/components/detail/UploadData.vue"
);
const source = fs.readFileSync(componentPath, "utf8");
const dialogIndex = source.indexOf('title="拉取本行信息"');
assert.notStrictEqual(dialogIndex, -1, "未找到拉取本行信息弹窗");
const dialogEndIndex = source.indexOf("</el-dialog>", dialogIndex);
assert.notStrictEqual(dialogEndIndex, -1, "未找到拉取本行信息弹窗结束标签");
const dialogSource = source.slice(dialogIndex, dialogEndIndex);
assert(
/class="pull-bank-info-form"/.test(dialogSource),
"拉取本行信息弹窗应使用独立表单容器，便于控制排版"
);
assert(
/class="pull-bank-file-panel"/.test(dialogSource),
"拉取本行信息弹窗应提供独立的文件导入面板"
);
assert(
/class="pull-bank-file-upload"/.test(dialogSource),
"文件选择区域应有独立样式钩子，避免点击范围铺满整行"
);
assert(
/class="selected-id-card-file"/.test(dialogSource),
"选择文件后应显示已选文件摘要区域"
);
console.log("upload-data-pull-bank-info-dialog-layout test passed");