a8986690bb
- 将快捷筛选标签及相关逻辑从搜索子组件提升至账单台账页面 - 标签置于搜索卡片下方、表格上方独立一行,满足用户需求 - 删除子组件中相关标签DOM及快捷筛选功能代码 - 统一选中态样式,采用 Element Plus 默认蓝底深字风格 fix(transportCapacity): 统一船舶管理弹窗表单控件宽度 - 删除异常的宽度强制规则,避免控件宽度不一致 - 采用固定宽度250px加最大宽度100%方案,实现多控件视觉宽度一致 - 清理无用label-width属性,解决label撑开布局异常问题 - 优化表单项label对齐与必填星号样式,确保多行label视觉协调 refactor(transportCapacity): 优化船舶证书分组布局及标签简化 - 证书有效期自标签统一更改为“有效期自” - 证书上传区域由集中底部移至对应证书分组末尾,保持信息关联 - 清理无用样式,保留必需上传项间距样式,提升界面整洁度 fix(business): 修复项目申请表单级联选择器宽度问题 - 业务部门和承办部门el-cascader控件未设置宽度,导致收缩 - 补充级联选择器宽度规则,保证与其他控件宽度统一 - 支持热更新,无需重启开发环境
6.6 KiB
6.6 KiB
2026-09-02 工作日志
合同/运力页「到期快捷筛选」标签统一改为独立一行
- 需求:把 avue-crud 搜索栏
#search-menu里的<el-check-tag>到期快捷筛选组,移出搜索栏、单独成一行(搜索卡下方、表格上方),不加卡片包裹。 - 实现:改用 avue-crud 的
#header插槽承载该组;CSS 由order:-1; margin-right:12px; min-width:0(搜索按钮行内联)改为margin-bottom:12px(独立行)。 - 涉及文件(4 处,均已改):
src/views/business/contract-manage.vue(首改,用.contract-manage-page__expiry-search)src/views/transportCapacity/vehicle.vue(.transport-vehicle-page__expiry-tags)src/views/transportCapacity/driver.vue(.driver-page__expiry-tags)src/views/transportCapacity/ship.vue(.transport-ship-page__expiry-tags)
- 各页变量名保留原样(contract-manage 用 contractExpiryScope/changeExpiryScope/contractExpiryStats;运力页用 query.expireStatus/handleExpireChange/expiryStat)。
- 已补改并修正:
payment/bill-ledger页。用户要求"放在卡片下面"(搜索白卡之外、表格之上独立一行),非卡片内分行。最终方案:把到期快捷筛选整组(标签 DOM +shortcutOptions计算属性 +handleShortcutChange)从子组件bill-ledger-search.vue提升到页面bill-ledger.vue,置于<bill-ledger-search>与<bill-ledger-table>之间(卡片下、表格上)。bill-ledger-search.vue:删除标签 DOM、.bill-ledger-search__actions/.bill-ledger-search__actions-tagsCSS、countsprop、shortcutOptions/handleShortcutChange;按钮行.bill-ledger-search__actions-buttons恢复单行右对齐(margin-bottom:8px)。bill-ledger.vue:模板插入<div class="bill-ledger-page__expiry-tags">(绑定query.expiryShortcut,@change 调handleShortcutChange→handleSearch);脚本加shortcutOptionscomputed(用counts)+handleShortcutChangemethod;新增<style scoped>写入.bill-ledger-page__expiry-tags(flex 行、margin:8px 0)。emptyQuery()已含expiryShortcut:'all',无回归。- 选中态样式统一:去掉
.bill-ledger-page__expiry-tags :deep(.el-check-tag.is-checked)的background-color:#409eff+color:#fff蓝底白字覆盖,改用 Element Plus 默认浅蓝底深蓝字,与合同页一致。
transportCapacity/ship 新增弹窗 input 宽度统一
- 问题:新增/修改弹窗内输入控件宽度不一致(文本框明显窄于下拉框、日期框)。
- 根因:
src/views/transportCapacity/ship.vue末尾 scoped 样式中独有.el-input__wrapper{width:150px !important},把文本框包裹层强制压成 150px,而el-select(用.el-select__wrapper)、日期/数字框不受影响 → 文本框与下拉框宽度不齐。同模块的 driver.vue / vehicle.vue 均无此规则。 - 修复:
- 删除
.el-input__wrapper{width:150px!important}异常规则。 - 增强
.ship-form内输入控件的 100% 宽度覆盖,补齐.el-select__wrapper/.el-cascader/.el-input__wrapper,使文本框/下拉/日期/数字框均 100% 填满所在栅格列。
- 删除
- 说明:弹窗仍保留不同栅格列宽(span6/8/12/16)的密集布局,同行字段已等宽;若需跨行全部 input 绝对像素等宽(统一栅格列宽),需进一步重排。
- 二次排查(用户反馈仍不一致):把
.ship-form内控件 100% 覆盖从通用:deep(.el-input)改为更具体的:deep(.el-form-item__content > .el-input)并加!important,同步覆盖.el-input__wrapper/.el-select__wrapper,确保不会被 Element Plus 变量或更具体选择器压回默认/较窄宽度。请用户刷新浏览器验证。 - 三次修复(用户反馈第一行 span=6+6+12 三个字段宽度仍不齐):放弃「width: 100% 撑满 col」方案,改用「对齐 vehicle/customer-archive 的
.archive-form风格」——label 固定calc(6em + 24px)+ 控件统一250px + max-width: 100%。根因:el-cascader默认display: inline-block,即使 width: 100% 也不易撑满 col-content(与 input 视觉差 ~150px vs ~280px);span=6+6+12 下两列 form-item__content 实际不等宽(label-width=100 被长 label 撑开)。新方案固定 250px 后三字段视觉一致,参照客商档案。 - 同时清理模板中冗余
label-width="88px"(会被新 CSS 强制覆盖失效)。
transportCapacity/ship 证书信息分组:附件下放到对应分组末尾 + label 缩短
- 需求:1. 「船舶国籍证书」「内河船舶最低安全配员证书」分组里 label 「证书有效期自」偏长,改短为「有效期自」(与下面统一)。2. 底部集中的
.cert-upload-grid上传区调整到各证书分组末尾,让附件与字段同组。 - 修改:
src/views/transportCapacity/ship.vue模板 line 392/431:2 处label="证书有效期自"→label="有效期自"。- 模板结构重组:删除底部
<el-row class="cert-upload-grid">...</el-row>(原 line 472-548),把 6 个<image-upload-field>分别插入对应cert-block末尾(每个用class="ship-upload-item",独立<el-row :gutter="18"><el-col :span="8">):- 船舶所有权证书分组 →
ownershipCertImage - 内河船舶安全与环保证书分组 →
safetyCertImage - 船舶国籍证书分组 →
nationalityCertImage - 内河船舶最低安全配员证书分组 →
safeManningCertImage - 光船租赁登记证明书分组 →
leaseContractImage(label="光船租赁登记证书") - 船舶营业运输证书分组 →
businessTransportCertImage(label="船舶营业运输证")
- 船舶所有权证书分组 →
- 样式清理:删除无用的
.cert-upload-grid { padding-top:8px }/.cert-upload-spacer { height:1px };保留.cert-block/.cert-block__title/.ship-upload-item(margin-bottom:14px)。
- 验证:用户刷新浏览器看新布局。
business/project-apply.vue 表单「业务部门/承办部门」级联选择器宽度统一
- 问题:项目新增/编辑表单(含独立表单页
/business/project-apply/form)中,业务部门、承办部门两个el-cascader的按钮宽度与同行的 select/input 不一致。 - 根因:scoped 样式里强制 100% 宽度的控件列表(
el-input/el-select/el-tree-select/el-date-editor)漏了el-cascader,导致级联选择器按内容宽度收缩,未填满栅格列。 - 修复:
src/views/business/project-apply.vue末尾 scoped 样式.project-apply-form的 100% 宽度规则补上:deep(.el-cascader)。Vite HMR 已自动生效,无需重启 dev。