gxwebsoft
3bb0fddcca
- 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，优化界面布局
34 lines
3.4 KiB
Markdown
34 lines
3.4 KiB
Markdown
# 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 文件通过；页面刷新即可见效果。
|