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显示状态
This commit is contained in:
2026-09-02 17:37:00 +08:00
parent b83e3c358d
commit 685a37b2df
2 changed files with 198 additions and 28 deletions
+126
View File
@@ -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. `<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,与代码无关)。