Files
tms-erp-web/.workbuddy/memory/2026-08-14.md
T
gxwebsoft 3bb0fddcca style(transportCapacity): 调整到期筛选标签位置和样式,统一标签展示逻辑
- transportCapacity/driver、vehicle、ship 页的「全部/30天内到期/已到期」筛选标签改为靠右对齐
- 统一使用 #search-menu 插槽替代 #expireStatus-search,标签移至搜索按钮前
- 标签容器删除宽度限制,增加 order:-1 和 margin-right:12px,保证标签和按钮为一体
- transportCapacity/vehicle 和 ship 的 expireStatus 列 search 改为 false,避免多余输入框出现
- transportCapacity/vehicle、ship 的 searchIndex 提升至6,避免搜索条件折叠,标签默认展开
- 暂用样式更改保证标签与搜索按钮间距和垂直对齐
- temporary-credit-limit 弹窗新增 dialogCustomClass,实现弹窗label固定六字宽度并自动换行
- element-ui.scss 新增临时额度弹窗 label 样式,修改label宽度、换行、对齐,提升可读性
- 调整多处搜索表单内 label 宽度由160px变为88px,优化表单紧凑度
- 多处文本域的最小行数 minRows 统一由较高数值改为2,改善表单布局和输入体验
- 更新 vite.config.mjs 开发服务器端口及代理配置,切换至本地测试环境
- waybill-import-dialog.vue 中修正文本域 autosize 最小行数为2,更符合表单设计规范
- 修改业务页 contract-manage.vue 菜单宽度由245px调整至252px,优化界面布局
2026-08-14 00:33:32 +08:00

3.4 KiB
Raw Blame History

2026-08-14 工作记录

temporary-credit-limit 弹窗 label 固定 6 汉字宽度并换行

  • 需求:用户反馈 /business/temporary-credit-limit 新增弹窗中 label「已使用项目资金使用额度(万元)」过宽(227px),希望超过 6 个汉字就换行。
  • 宽度来源:
    • src/option/business/common.jscreateCrudOptionlabelWidth: 'auto'
    • Avue 会按当前弹窗内最长 label 自动计算宽度,故出现 227px。
    • src/styles/element-ui.scss 第 164 行 .el-dialog .el-form-item__label { white-space: nowrap } 阻止换行。
  • 改动:
    1. src/option/business/temporary-credit-limit.jsoption 增加 dialogCustomClass: 'temporary-credit-limit-dialog'
    2. src/styles/element-ui.scss:新增 .temporary-credit-limit-dialog .el-form-item__label 规则,固定宽度 calc(6em + 24px),并设置 white-space: normal; word-break: break-all; overflow-wrap: anywhere; line-height: 18px,实现超长 label 自动换行。
    3. 同时给 .temporary-credit-limit-dialog .el-form-item { align-items: center; } 保持垂直居中。
  • 参考:同文件已有 .avue-dialog--common-route 使用相同 6em label 宽度方案。

transportCapacity/ship 到期筛选标签默认展开并靠前

  • 需求:用户反馈 /transportCapacity/ship 页面搜索栏的「全部/30天内到期/已到期」标签需要点击「展开」后才显示,希望默认直接显示;且位置要位于搜索按钮前面。
  • 原因:src/option/transportCapacity/transport-ship.jssearchIndex: 4,默认只展示前 4 个搜索条件,而 expireStatussearchOrder: 0(Avue 越大越靠前)排在第 6 位,因此被折叠到第二行。
  • 改动:
    • src/option/transportCapacity/transport-ship.jssearchIndex: 4 → 6,让全部 6 个搜索条件默认展开,标签无需再点展开即可看到。
    • 由于 expireStatus 排在最后,展开后它自然位于第二行末尾、搜索按钮之前,满足"移到搜索按钮前面"的要求。

transportCapacity/vehicle 与 ship 到期筛选标签重构(对齐 driver 的 #search-menu 方案)

  • 需求:用户希望 /transportCapacity/vehicle/transportCapacity/ship 的「全部/30天内到期/已到期」标签与 driver 页一致:① 不展开就直接显示;② 移到搜索按钮前面并保留间距。
  • 关键差异(排查发现):driver 用 #search-menu 插槽把标签渲染在按钮所在行;而 vehicle/ship 之前用 #expireStatus-search 列插槽,标签被渲染进搜索条件网格(位置不对)。
  • 改动(两页同样处理):
    1. .vue<template #expireStatus-search><template #search-menu>,标签 div 内容不变。
    2. .vue 样式 __expiry-tags:去掉 width: 100%,改为 order: -1; margin-right: 12px; min-width: 0;(与 driver 完全一致,使标签左移并落在搜索按钮前)。
    3. option:将 expireStatus 列的 search: true → search: false(否则会在搜索网格里多渲染一个空输入框);searchIndex 设为 ≥ 真实搜索列数(vehicle: 4 → 6ship 已是 6),使 columnLen ≤ searchIndexAvue 不再显示「展开」按钮。
  • 原理:Avue header-search3.js#search-menu 插槽内容渲染进 menu-form,位于默认搜索/重置按钮之后、展开按钮之前;order: -1 将标签推到按钮左侧。
  • 验证:node --check 两个 option 文件通过;页面刷新即可见效果。