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,优化界面布局
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
# 2026-08-14 工作记录
|
||||
|
||||
## temporary-credit-limit 弹窗 label 固定 6 汉字宽度并换行
|
||||
|
||||
- 需求:用户反馈 `/business/temporary-credit-limit` 新增弹窗中 label「已使用项目资金使用额度(万元)」过宽(227px),希望超过 6 个汉字就换行。
|
||||
- 宽度来源:
|
||||
- `src/option/business/common.js` 的 `createCrudOption` 中 `labelWidth: '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.js`:option 增加 `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.js` 中 `searchIndex: 4`,默认只展示前 4 个搜索条件,而 `expireStatus` 的 `searchOrder: 0`(Avue 越大越靠前)排在第 6 位,因此被折叠到第二行。
|
||||
- 改动:
|
||||
- `src/option/transportCapacity/transport-ship.js`:`searchIndex: 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 → 6`;ship 已是 `6`),使 `columnLen ≤ searchIndex`,Avue 不再显示「展开」按钮。
|
||||
- 原理:Avue `header-search3.js` 中 `#search-menu` 插槽内容渲染进 `menu-form`,位于默认搜索/重置按钮之后、展开按钮之前;`order: -1` 将标签推到按钮左侧。
|
||||
- 验证:`node --check` 两个 option 文件通过;页面刷新即可见效果。
|
||||
Reference in New Issue
Block a user