From 685a37b2dfbde4cbbb2886c8fd455f3d333d40d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Wed, 2 Sep 2026 17:37:00 +0800 Subject: [PATCH] =?UTF-8?q?style(customer-archive):=20=E7=BB=9F=E4=B8=80?= =?UTF-8?q?=E8=AF=84=E5=88=86=E8=AF=A6=E6=83=85=E8=A1=A8=E5=BC=B9=E7=AA=97?= =?UTF-8?q?label=E5=AE=BD=E5=BA=A6=E5=B9=B6=E5=AF=B9=E9=BD=90=E6=8E=A7?= =?UTF-8?q?=E4=BB=B6=E5=AE=BD=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将评分详情表弹窗中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显示状态 --- .workbuddy/memory/2026-09-02.md | 126 +++++++++++++++++++++++++ src/views/vehicle/customer-archive.vue | 100 ++++++++++++++------ 2 files changed, 198 insertions(+), 28 deletions(-) diff --git a/.workbuddy/memory/2026-09-02.md b/.workbuddy/memory/2026-09-02.md index 33e7b2b..0d667ba 100644 --- a/.workbuddy/memory/2026-09-02.md +++ b/.workbuddy/memory/2026-09-02.md @@ -59,3 +59,129 @@ 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. `` 的 `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. `` `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. `` → `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. `` 改为 `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` 用 `` 包裹，`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，与代码无关）。 diff --git a/src/views/vehicle/customer-archive.vue b/src/views/vehicle/customer-archive.vue index c2f34f4..b580c2d 100644 --- a/src/views/vehicle/customer-archive.vue +++ b/src/views/vehicle/customer-archive.vue @@ -315,11 +315,20 @@ - + + + @@ -1006,14 +1015,22 @@ /> - + + + @@ -1088,7 +1105,6 @@ append-to-body v-model="scoreBox" width="92%" - top="3vh" class="score-detail-dialog" @closed="resetScoreDialog" > @@ -1097,7 +1113,7 @@ ref="scoreForm" :model="currentScore" label-position="right" - label-width="88" + label-width="88px" :disabled="readonly" class="score-detail-form" > @@ -1112,12 +1128,14 @@ - + + > + + @@ -1126,8 +1144,10 @@ - - + + + + @@ -1136,15 +1156,17 @@ - + + > + + - +
- + this.checkOverflow('registeredDetailInput', 'registeredDetailOverflow')); + }, + 'invoiceForm.registeredDetailAddress'() { + this.$nextTick(() => this.checkOverflow('invoiceDetailInput', 'invoiceDetailOverflow')); + }, + }, methods: { hasPermission(code) { return this.isAdmin || this.validData(this.permission[code], false); }, + // 检测输入框文本是否溢出，仅溢出时才允许 tooltip 显示完整地址 + checkOverflow(refName, flag) { + const inst = this.$refs[refName]; + const el = inst && inst.$el && inst.$el.querySelector('input'); + this[flag] = !!(el && el.scrollWidth > el.clientWidth); + }, emptyArchive() { return { accessType: 'temporary', @@ -3242,6 +3280,9 @@ export default { this.invoiceIndex = index; this.invoiceForm = row ? this.normalizeInvoice(row) : this.emptyInvoice(); this.invoiceBox = true; + this.$nextTick(() => { + this.$nextTick(() => this.checkOverflow('invoiceDetailInput', 'invoiceDetailOverflow')); + }); }, resetInvoice() { this.invoiceIndex = -1; @@ -4883,17 +4924,20 @@ export default { } :deep(.el-form-item__label) { + flex: 0 0 108px !important; + width: 108px !important; + min-width: 108px !important; color: #70757a; font-size: 15px; - white-space: normal; + white-space: normal !important; word-break: break-all; line-height: 1.4; } - :deep(.el-input), - :deep(.el-select), - :deep(.el-date-editor) { - width: 150px; + :deep(.el-form-item__content > .el-input), + :deep(.el-form-item__content > .el-select), + :deep(.el-form-item__content > .el-date-editor) { + width: 100%; } }