b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
268462497991ce1d1df06e9062b8e5aaf7a8f0b1
tms-erp-web/.workbuddy/memory/2026-09-02.md
T
gxwebsoft 685a37b2df style(customer-archive): 统一评分详情表弹窗label宽度并对齐控件宽度 
- 将评分详情表弹窗中el-form的label-width由"88"改为"88px"以严格固定宽度
- 强制score-detail-form中label样式flex、width、min-width均为88px，保留word-break实现长文本换行
- 调整单字段输入框、选择框、日期控件宽度由固定150px改为100%，确保各控件等宽撑满内容区域
- 保留临时额度申请使用期限双日期选择器flex布局，不受单字段宽度规则影响
- 客商档案页面“详细地址”输入框加入tooltip，仅文本溢出时显示完整地址，提升用户体验
- 通过ref、watch以及methods检测输入长度溢出以动态控制tooltip显示状态
2026-09-02 17:37:00 +08:00

188 lines
22 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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-tags` CSS、`counts` prop、`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`）；脚本加 `shortcutOptions` computed（用 `counts`）+ `handleShortcutChange` method；新增 `<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 均无此规则。
- 修复：
1. 删除 `.el-input__wrapper{width:150px!important}` 异常规则。
2. 增强 `.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`）。
- 验证：用户刷新浏览器看新布局。
## transportCapacity/ship 组合控件宽度对齐 250px 体系
- 问题：基础船舶信息里「安放龙骨日期/建造完工日期」的起止两个 date-picker、「航区」的 select 都是 `flex:1` 撑满所在 span=12 整列（约 498px），明显比单字段 250px 宽，视觉不协调。
- 修复（`src/views/transportCapacity/ship.vue` 末尾 scoped 样式）：
- `.date-range-inline :deep(.el-date-editor)` 由 `flex:1; min-width:0` 增加 `max-width: 250px` → 两个 date-picker 在窗够宽时各对齐 250px、彼此等宽，窄窗时 flex:1 收缩不溢出。
- `.navigation-area-field :deep(.el-select)` 由 `flex:1; min-width:0` 增加 `max-width: 250px` → 航区 select 对齐 250px 单字段。
- 说明：`flex:1` 保底防溢出，`max-width:250px` 把组合控件拉回与单字段一致的 250px 体系（受所在列宽限制，安放龙骨 span=12 在常规窗宽下两个 date-picker 约 226px 等宽，更宽窗自动到 250px）。
## 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。
## 登录页隐藏租户栏
- 需求：登录页 `000000` 租户输入框隐藏。
- 根因：`src/page/login/userlogin.vue` 第 10 行 `el-form-item` 由 `tenantMode` 控制显示，初始值 `this.website.tenantMode`，`getTenant()` 请求 `/api/system/tenant/info` 成功时会把 `tenantMode=false` 自动隐藏并回填 `loginForm.tenantId`。截图里仍显示租户栏，说明该接口未正常返回（域名解析/后端/跨域），沿用了初始 `tenantMode`。
- 修复：
1. 删除 `userlogin.vue` 模板第 10-21 行整段租户 `el-form-item`（`v-if="tenantMode" prop="tenantId"`），不留 `v-if` 兜底，直接移除 DOM。
2. 同步删除 `loginRules.tenantId` 校验规则。
- 保留：`loginForm.tenantId: '000000'` 默认值、`getTenant()` 方法。提交登录时仍带 `tenantId` 字段，后端行为不变；接口正常时仍会用返回的 tenantId 覆盖默认值。
- 后续若要重新启用：恢复 `el-form-item` 即可（或改 `data()` 中 `tenantMode: this.website.tenantMode` 走配置开关）。
## 客商档案评分详情表控件/label 宽度对齐
- 问题：评分详情表弹窗内输入框、选择框、日期框宽度不一致；label 要求固定 88px 且超长换行。
- 修复（`src/views/vehicle/customer-archive.vue`）：
- 模板 `label-width="88"` 改为 `label-width="88px"`。
- `.score-detail-form` 样式：
- `el-form-item__label` 强制 `flex: 0 0 88px !important; width: 88px !important; min-width: 88px !important`，保留 `white-space: normal !important; word-break: break-all; line-height: 1.4` 实现超长换行。
- `el-form-item__content > .el-input / .el-select / .el-date-editor` 由固定 `width: 150px` 改为 `width: 100%`，单字段撑满等宽；`.score-detail-form__range` 内双日期框保持 `flex: 1; min-width: 0` 均分。
- 参考：客商档案 `.archive-form` 的 label 换行与控件等宽处理思路。
## 评分详情表弹窗输入框/选择框宽度对齐 + label 88px 换行
- 问题：`src/views/vehicle/customer-archive.vue` 中「评分详情表」弹窗表单的输入框、选择框、日期框视觉宽度不一致；label 区域未严格固定 88px。
- 修复：
1. `el-form` 的 `label-width="88"` 改为 `label-width="88px"`。
2. `.score-detail-form` 中 `.el-form-item__label` 强制 `flex:0 0 88px; width:88px; min-width:88px` 并保留 `white-space: normal` 换行。
3. 将单字段控件（`.el-form-item__content > .el-input/.el-select/.el-date-editor`）宽度由固定 `150px` 改为 `100%`，使其在固定 label 后自动等宽填满 content 区域。
- 保留：「临时额度申请使用期限」组合控件继续用 `.score-detail-form__range` 双 date-picker flex 均分布局。
## customer-archive 评分详情表：label 固定 88px 换行 + 控件宽度统一
- 问题：评分详情表弹窗内输入框与选择框宽度不一致，且 label 区域未按 88px 固定换行。
- 修复（`src/views/vehicle/customer-archive.vue`）：
1. `score-detail-form` 的 `label-width="88"` 改为 `label-width="88px"`。
2. `.score-detail-form :deep(.el-form-item__label)` 强制 `flex: 0 0 88px !important; width: 88px !important; min-width: 88px !important;`，并保留 `white-space: normal !important; word-break: break-all; line-height: 1.4;` 实现长 label 自动换行。
3. 单字段控件（`.el-form-item__content > .el-input / .el-select / .el-date-editor`）统一 `width: 100%`，使输入框与选择框在相同栅格列内等宽。
- 说明：「临时额度申请使用期限」双日期组合仍由 `.score-detail-form__range` 控制 `flex:1` 均分，不受单字段 100% 影响。
## 评分详情表 label 宽度与控件宽度对齐
- 需求：评分详情弹窗内输入框与选择框宽度一致；label 宽度固定 88px，超长自动换行。
- 修改 `src/views/vehicle/customer-archive.vue`：
1. `<el-form>` 的 `label-width="88"` 改为 `label-width="88px"`。
2. `.score-detail-form` 的 label 样式强制 `flex: 0 0 88px !important; width: 88px !important; min-width: 88px !important;`，并保留 `white-space: normal !important; word-break: break-all; line-height: 1.4;` 实现换行。
3. 单字段控件（`.el-form-item__content > .el-input/.el-select/.el-date-editor`）由固定 `width: 150px` 改为 `width: 100%`，使输入框、下拉框、日期框均撑满同一 content 区，视觉宽度一致。
- 说明：「临时额度申请使用期限」两个 date-picker 仍由 `.score-detail-form__range` 的 `flex: 1; min-width: 0;` 控制，不受本次单字段 100% 影响。
## 客商档案「评分详情表」弹窗表单控件宽度对齐
- 问题：`src/views/vehicle/customer-archive.vue` 的「评分详情表」弹窗中，评定日期的 date-picker、拟申请额度等 input、评分量化表 select 等控件宽度不一致；label 需固定 88px 且长 label 换行。
- 修复：
1. `<el-form>` `label-width="88"` 改为 `label-width="88px"`。
2. `.score-detail-form` 样式：`.el-form-item__label` 强制 `flex:0 0 88px` + `width:88px` + `white-space:normal`，确保长 label 换行且宽度恒定。
3. 控件由固定 `width:150px` 改为 `.el-form-item__content > .el-input/.el-select/.el-date-editor { width:100% }`，单字段 input/select/date-picker 在 span=6 下等宽撑满 content 区。
- 备注：「临时额度申请使用期限」组合区保持 `.score-detail-form__range` 的 `flex:1` 双 date-picker 布局，不受单字段 100% 影响。
## customer-archive 评分详情表控件宽度与 label 换行对齐
- 问题：评分详情弹窗内 input、select、date-picker 宽度不一致；长 label（如「拟申请总资金使用额度（万元）」）未按 88px 换行。
- 修改 `src/views/vehicle/customer-archive.vue`：
1. `<el-form label-width="88">` → `label-width="88px"`，与全站风格一致。
2. `.score-detail-form` 样式：
- `el-form-item__label` 强制 `flex: 0 0 88px !important; width: 88px !important; min-width: 88px !important;`，并保留 `white-space: normal` + `word-break: break-all` + `line-height: 1.4` 实现超长 label 换行。
- 单字段控件（`.el-form-item__content > .el-input/.el-select/.el-date-editor`）由固定 `width: 150px` 改为 `width: 100%`，使其在 88px label 下等宽撑满 content 区。
- 说明：双日期范围字段（临时额度申请使用期限）仍由 `.score-detail-form__range` 用 `flex:1; min-width:0` 均分，不受单字段 100% 规则影响。
## 评分详情表弹窗 label/控件宽度对齐
- 文件：`src/views/vehicle/customer-archive.vue`。
- 问题：评分详情表弹窗内 input 与 select/date-picker 宽度不一致；label 宽度未严格固定 88px、长 label 未换行。
- 修复：
1. `el-form` 的 `label-width="88"` 改为 `label-width="88px"`。
2. `.score-detail-form` 样式里 label 强制 `flex: 0 0 88px !important; width: 88px !important; min-width: 88px !important;`，并保留 `white-space: normal`、`word-break: break-all` 换行。
3. 单字段控件（`.el-form-item__content > .el-input/.el-select/.el-date-editor`）统一 `width: 100%`，取代原先未生效/不齐的 `width: 150px`。
- 备注：「临时额度申请使用期限」两个 date-picker 仍由 `.score-detail-form__range` 的 `flex:1` 均分，不受 100% 宽度影响。
## 客商档案「评分详情表」弹窗控件宽度对齐与 label 换行
- 问题：评分详情表弹窗中 input、select、date-picker 宽度不一致；长 label 未换行。
- 修复 `src/views/vehicle/customer-archive.vue`：
1. `el-form` 的 `label-width="88"` 改为 `label-width="88px"`。
2. `.score-detail-form` 样式：label 强制 `flex:0 0 88px`、`width:88px`、`white-space:normal`，超出换行。
3. 单字段控件（`.el-form-item__content > .el-input/.el-select/.el-date-editor`）统一 `width:100%`，撑满 content 区，与选择框等宽。
- 保留 `.score-detail-form__range` 内双 date-picker `flex:1; min-width:0` 的「起—止」布局。
## 评分详情表弹窗 label 与输入控件宽度对齐
- 文件：`src/views/vehicle/customer-archive.vue`
- 问题：评分详情表弹窗内输入框、下拉框、日期框宽度不一致；长 label 未换行。
- 修改：
1. `<el-form label-width="88">` 改为 `label-width="88px"`。
2. `.score-detail-form` label 样式强制 `width: 88px !important; flex: 0 0 88px !important; min-width: 88px !important;`，并保留 `white-space: normal` / `word-break: break-all` 换行。
3. 单字段控件（`.el-form-item__content > .el-input / .el-select / .el-date-editor`）统一 `width: 100%`，填满 label 剩余区域，保证 input/select/date-picker 视觉等宽。
- 说明：组合日期区间（`.score-detail-form__range`）保持两个 date-picker `flex:1` 均分，不受单字段 100% 影响。
## customer-archive 评分详情表 label/控件宽度对齐
- 问题：评分详情弹窗表单的输入框与选择框宽度不一致；label 宽度要求 88px 且超长换行。
- 修复：`src/views/vehicle/customer-archive.vue`
- `label-width="88"` → `label-width="88px"`。
- `.score-detail-form` 样式：`.el-form-item__label` 强制 `flex: 0 0 88px !important; width: 88px !important; min-width: 88px !important;`，并保留 `white-space: normal !important` 等换行样式。
- 控件由固定 `width: 150px` 改为 `.el-form-item__content > .el-input/.el-select/.el-date-editor { width: 100%; }`，使输入框、下拉框、日期框在各自列内等宽撑满。
## 评分详情表弹窗：label 固定 88px 换行 + 输入/选择框宽度一致
- 问题：`src/views/vehicle/customer-archive.vue` 评分详情弹窗内输入框与选择框宽度不一致，label 长文本未换行。
- 修复：
1. `label-width="88"` → `label-width="88px"`。
2. `.score-detail-form` 样式：`.el-form-item__label` 强制 `flex: 0 0 88px !important; width: 88px !important; min-width: 88px !important; white-space: normal !important;` 确保 88px 固定宽度并自动换行。
3. 单字段控件 `.el-form-item__content > .el-input / .el-select / .el-date-editor` 由固定 `150px` 改为 `width: 100%`，使输入框与选择框在各自栅格列内等宽撑满。
- 备注：「临时额度申请使用期限」双日期组合仍走 `.score-detail-form__range` 的 `flex:1; min-width:0`，不受单字段 100% 影响。
## 客商档案评分详情表控件宽度统一 + label 88px 换行
- 问题：`src/views/vehicle/customer-archive.vue` 评分详情弹窗内输入框与选择框宽度不一致；label 区域未严格固定 88px，长 label 换行效果不稳定。
- 修复：
1. 模板 `el-form` 的 `label-width="88"` 明确为 `label-width="88px"`。
2. scoped 样式 `.score-detail-form`：
- `.el-form-item__label` 强制 `flex: 0 0 88px !important; width: 88px !important; min-width: 88px !important;`，并保留 `white-space: normal !important` / `word-break: break-all` 让超长 label 自动换行。
- 控件统一由固定 `width: 150px` 改为 `.el-form-item__content > .el-input/.el-select/.el-date-editor { width: 100%; }`，使输入框、下拉框、日期框在各自栅格列内等宽撑满。
- 说明：「临时额度申请使用期限」双日期组合区仍由 `.score-detail-form__range` 控制 flex:1 均分，不受单控件 100% 规则影响。
## customer-archive 评分详情表控件宽度统一 + label 换行
- 需求：评分详情弹窗内输入框与选择框宽度不一致；label 宽度需固定 88px 且超长换行。
- 修改（`src/views/vehicle/customer-archive.vue`）：
1. 模板 `score-detail-form` 的 `label-width="88"` → `label-width="88px"`。
2. scoped 样式 `.score-detail-form`：`.el-form-item__label` 固定 `flex: 0 0 88px !important; width: 88px !important; min-width: 88px !important;`，并保留 `white-space: normal !important; word-break: break-all; line-height: 1.4;` 实现换行。
3. 控件宽度由固定 `150px` 改为 `.el-form-item__content > .el-input/.el-select/.el-date-editor { width: 100%; }`，使输入框、下拉框、日期框在同一 content 区域内等宽撑满。
- 说明：双日期字段（临时额度期限）仍走 `.score-detail-form__range` 的 `flex:1` 布局，保持两个日期框均分并对齐。
## 评分详情表输入框/选择框宽度对齐 + label 固定 88px 换行
- 文件：`src/views/vehicle/customer-archive.vue`
- 问题：评分详情弹窗内输入框、选择框、日期框宽度不一致；长 label 需要固定 88px 并允许换行。
- 修改：
1. `label-width="88"` → `label-width="88px"`。
2. `.score-detail-form :deep(.el-form-item__label)` 强制 `flex:0 0 88px !important; width:88px !important; min-width:88px !important`，保留 `white-space:normal !important; word-break:break-all; line-height:1.4`。
3. 控件宽度由固定 150px 改为 `.el-form-item__content > .el-input/.el-select/.el-date-editor { width:100%; }`，使输入框、选择框、日期框在固定 label 后自动等宽填满 content 区。
- 保留 `.score-detail-form__range` 内双 date-editor `flex:1; min-width:0` 的收缩行为。
## vehicle/customer-archive 两处「详细地址」hover 溢出提示完整地址
- 需求：编辑客商档案页，详细地址字段（窄栏 + 长文本易截断）鼠标移上去显示完整地址；仅文本溢出才显示。
- 实现：两处 `el-input` 用 `<el-tooltip>` 包裹，`content` 绑定字段值，`placement="top"`，`:disabled="!xxxOverflow"`（溢出才显示），`style="display:block; width:100%"`（el-tooltip 根 span 默认 inline，必须 block 才能撑满栅格列）。
- 主表单（line 317，`archiveForm.registeredDetailAddress`）：`ref="registeredDetailInput"` + `@input` 实时重算。
- 发票弹窗（line 1008，`invoiceForm.registeredDetailAddress`）：`ref="invoiceDetailInput"`，readonly 地图回填，靠 `watch` + `openInvoice` 打开后 `nextTick` 重算（弹窗按需挂载，预填数据打开后 watch 已不触发）。
- 新增：`data` 加 `registeredDetailOverflow/invoiceDetailOverflow` 标记；`watch` 监听两字段值变化→`checkOverflow`；`methods.checkOverflow(refName,flag)` 读 `inst.$el.querySelector('input')` 的 `scrollWidth > clientWidth` 判定溢出；`openInvoice` 打开后双 nextTick 重算发票框溢出。
- 验证：`vite build --outDir /tmp/tms-check-build` 零报错（常规 build 仅因安全删除保护拦截清空 dist，与代码无关）。
Reference in New Issue View Git Blame Copy Permalink