b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(payment): 调整到期快捷筛选至账单台账页面独立展示

Browse Source 
- 将快捷筛选标签及相关逻辑从搜索子组件提升至账单台账页面
- 标签置于搜索卡片下方、表格上方独立一行，满足用户需求
- 删除子组件中相关标签DOM及快捷筛选功能代码
- 统一选中态样式，采用 Element Plus 默认蓝底深字风格

fix(transportCapacity): 统一船舶管理弹窗表单控件宽度

- 删除异常的宽度强制规则，避免控件宽度不一致
- 采用固定宽度250px加最大宽度100%方案，实现多控件视觉宽度一致
- 清理无用label-width属性，解决label撑开布局异常问题
- 优化表单项label对齐与必填星号样式，确保多行label视觉协调

refactor(transportCapacity): 优化船舶证书分组布局及标签简化

- 证书有效期自标签统一更改为“有效期自”
- 证书上传区域由集中底部移至对应证书分组末尾，保持信息关联
- 清理无用样式，保留必需上传项间距样式，提升界面整洁度

fix(business): 修复项目申请表单级联选择器宽度问题

- 业务部门和承办部门el-cascader控件未设置宽度，导致收缩
- 补充级联选择器宽度规则，保证与其他控件宽度统一
- 支持热更新，无需重启开发环境
This commit is contained in:
赵忠林
2026-09-02 14:36:42 +08:00
parent 87ec01c8dd
commit a8986690bb
5 changed files with 200 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/transportCapacity/ship.vue
+132 -106
View File
@@ -161,11 +161,7 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="安放龙骨日期/建造完工日期"
prop="keelLayingDate"
label-width="88px"
>
<el-form-item label="安放龙骨日期/建造完工日期" prop="keelLayingDate">
<div class="date-range-inline">
<el-date-picker
v-model="shipForm.keelLayingDate"
@@ -316,6 +312,21 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="18">
<el-col :span="8">
<image-upload-field
label="船舶所有权证书"
prop="ownershipCertImage"
:value="shipForm.ownershipCertImage"
:readonly="readonly"
:headers="uploadHeaders"
large
class-prefix="ship"
class="ship-upload-item"
@success="url => handleShipCertificateUploadSuccess('ownershipCertImage', url)"
/>
</el-col>
</el-row>
</div>
<div class="cert-block">
@@ -357,13 +368,28 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="18">
<el-col :span="8">
<image-upload-field
label="内河船舶安全与环保证书"
prop="safetyCertImage"
:value="shipForm.safetyCertImage"
:readonly="readonly"
:headers="uploadHeaders"
large
class-prefix="ship"
class="ship-upload-item"
@success="url => handleShipCertificateUploadSuccess('safetyCertImage', url)"
/>
</el-col>
</el-row>
</div>
<div class="cert-block">
<div class="cert-block__title">船舶国籍证书</div>
<el-row :gutter="18">
<el-col :span="16">
<el-form-item label="证书有效期自" prop="nationalityCertStartDate">
<el-form-item label="有效期自" prop="nationalityCertStartDate">
<div class="date-range-inline">
<el-date-picker
v-model="shipForm.nationalityCertStartDate"
@@ -381,13 +407,28 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="18">
<el-col :span="8">
<image-upload-field
label="船舶国籍证书"
prop="nationalityCertImage"
:value="shipForm.nationalityCertImage"
:readonly="readonly"
:headers="uploadHeaders"
large
class-prefix="ship"
class="ship-upload-item"
@success="url => handleShipCertificateUploadSuccess('nationalityCertImage', url)"
/>
</el-col>
</el-row>
</div>
<div class="cert-block">
<div class="cert-block__title">内河船舶最低安全配员证书</div>
<el-row :gutter="18">
<el-col :span="16">
<el-form-item label="证书有效期自" prop="safeManningCertStartDate">
<el-form-item label="有效期自" prop="safeManningCertStartDate">
<div class="date-range-inline">
<el-date-picker
v-model="shipForm.safeManningCertStartDate"
@@ -405,6 +446,21 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="18">
<el-col :span="8">
<image-upload-field
label="内河船舶最低安全配员证书"
prop="safeManningCertImage"
:value="shipForm.safeManningCertImage"
:readonly="readonly"
:headers="uploadHeaders"
large
class-prefix="ship"
class="ship-upload-item"
@success="url => handleShipCertificateUploadSuccess('safeManningCertImage', url)"
/>
</el-col>
</el-row>
</div>
<div class="cert-block">
@@ -435,6 +491,21 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="18">
<el-col :span="8">
<image-upload-field
label="光船租赁登记证书"
prop="leaseContractImage"
:value="shipForm.leaseContractImage"
:readonly="readonly"
:headers="uploadHeaders"
large
class-prefix="ship"
class="ship-upload-item"
@success="url => handleShipCertificateUploadSuccess('leaseContractImage', url)"
/>
</el-col>
</el-row>
</div>
<div class="cert-block">
@@ -471,85 +542,22 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="18">
<el-col :span="8">
<image-upload-field
label="船舶营业运输证"
prop="businessTransportCertImage"
:value="shipForm.businessTransportCertImage"
:readonly="readonly"
:headers="uploadHeaders"
large
class-prefix="ship"
class="ship-upload-item"
@success="url => handleShipCertificateUploadSuccess('businessTransportCertImage', url)"
/>
</el-col>
</el-row>
</div>
<el-row class="cert-upload-grid" :gutter="18">
<el-col :span="8">
<image-upload-field
label="船舶所有权证书"
prop="ownershipCertImage"
:value="shipForm.ownershipCertImage"
:readonly="readonly"
:headers="uploadHeaders"
large
class-prefix="ship"
@success="url => handleShipCertificateUploadSuccess('ownershipCertImage', url)"
/>
</el-col>
<el-col :span="8">
<image-upload-field
label="内河船舶安全与环保证书"
prop="safetyCertImage"
:value="shipForm.safetyCertImage"
:readonly="readonly"
:headers="uploadHeaders"
large
class-prefix="ship"
@success="url => handleShipCertificateUploadSuccess('safetyCertImage', url)"
/>
</el-col>
<el-col :span="8">
<image-upload-field
label="船舶国籍证书"
prop="nationalityCertImage"
:value="shipForm.nationalityCertImage"
:readonly="readonly"
:headers="uploadHeaders"
large
class-prefix="ship"
@success="url => handleShipCertificateUploadSuccess('nationalityCertImage', url)"
/>
</el-col>
<el-col :span="8">
<image-upload-field
label="内河船舶最低安全配员证书"
prop="safeManningCertImage"
:value="shipForm.safeManningCertImage"
:readonly="readonly"
:headers="uploadHeaders"
large
class-prefix="ship"
@success="url => handleShipCertificateUploadSuccess('safeManningCertImage', url)"
/>
</el-col>
<el-col :span="8">
<div class="cert-upload-spacer"></div>
</el-col>
<el-col :span="8">
<image-upload-field
label="光船租赁登记证书"
prop="leaseContractImage"
:value="shipForm.leaseContractImage"
:readonly="readonly"
:headers="uploadHeaders"
large
class-prefix="ship"
@success="url => handleShipCertificateUploadSuccess('leaseContractImage', url)"
/>
</el-col>
<el-col :span="8">
<image-upload-field
label="船舶营业运输证"
prop="businessTransportCertImage"
:value="shipForm.businessTransportCertImage"
:readonly="readonly"
:headers="uploadHeaders"
large
class-prefix="ship"
@success="url => handleShipCertificateUploadSuccess('businessTransportCertImage', url)"
/>
</el-col>
</el-row>
</section-card>
</el-form>
<template #footer>
@@ -1215,21 +1223,47 @@ export default {
}
.ship-form {
:deep(.el-date-editor.el-input),
:deep(.el-date-editor.el-input__wrapper),
:deep(.el-select),
:deep(.el-select__wrapper),
:deep(.el-cascader),
:deep(.el-input),
:deep(.el-input__wrapper),
:deep(.el-input-number) {
width: 100%;
// 对齐 vehicle/customer-archive 的 .archive-form 风格：
// label 固定 calc(6em + 24px) 容纳 6 汉字 + 长 label 自动折行；
// 控件统一 250px + max-width: 100%，保证 cascader / input / select / date-picker 等混排时宽度一致。
// 修复前：第一行 span=6+6+12 布局下 el-cascader (默认 inline-block) 与 el-input 实际宽度差很大，
// 加上 label-width="100" 在长 label 上被撑开，导致 3 个控件视觉宽度比不一致。
:deep(.el-form-item__label) {
flex: 0 0 calc(6em + 24px) !important;
width: calc(6em + 24px) !important;
height: auto;
white-space: normal !important;
word-break: break-all;
overflow-wrap: anywhere;
line-height: 18px;
}
// label 固定宽度：可容纳 6 个汉字，超出自动换行
:deep(.el-form-item__label) {
white-space: normal;
line-height: 20px;
// label 与控件垂直居中（避免长 label 折行时视觉错位）
:deep(.el-form-item) {
align-items: center;
}
// 必填星号 * 与首行文字垂直居中（多行 label 时 :before 与文字行盒高度不一致的修复）
:deep(.el-form-item.is-required .el-form-item__label) {
align-items: flex-start;
}
:deep(.el-form-item.is-required .el-form-item__label::before) {
display: inline-block;
height: 18px;
line-height: 18px;
margin-right: 4px;
}
// 所有控件统一 250px（col 宽不足时由 max-width: 100% 兜底收缩）
:deep(.el-form-item__content > .el-input),
:deep(.el-form-item__content > .el-input-number),
:deep(.el-form-item__content > .el-select),
:deep(.el-form-item__content > .el-cascader),
:deep(.el-form-item__content > .el-date-editor) {
width: 250px;
max-width: 100%;
}
}
@@ -1276,14 +1310,6 @@ export default {
line-height: 20px;
}
.cert-upload-grid {
padding-top: 8px;
}
.cert-upload-spacer {
height: 1px;
}
.ship-upload-item {
margin-bottom: 14px;
}