gxwebsoft
f0ee1e6ea3
- 联系信息分组由三等分布局改为四列布局，末列空置占位 - 工商信息内表单项标签与控件显式垂直居中对齐 - 营业期限字段的日期选择器宽度由250px缩减至150px，更紧凑 - 勾选框禁止换行，保证日期选择器与复选框同行显示 - 移除多余模板内联flex样式，修正CSS选择器笔误 - 固定期限营业期限增加中文校验提示，长期类型跳过校验 - 详细地址输入框设为flex:1，宽度撑满剩余空间，与右侧对齐 - 省市区级联选择器宽度保持250px，详细地址独立占满剩余宽度
96 lines
7.2 KiB
Markdown
96 lines
7.2 KiB
Markdown
# 2026-08-11 工作日志
|
||
|
||
## 客商档案编辑弹窗布局改造（customer-archive.vue）
|
||
客户需求：参考截图，编辑弹窗表单改为 4 列布局、label 固定 6 汉字宽、超长换行、列间有间距。
|
||
|
||
改动（仅 `src/views/vehicle/customer-archive.vue` 一个文件）：
|
||
- `el-form` 的 `label-width` 由 `auto` → `96px`（≈6 汉字 + 12px padding）。
|
||
- `el-form` 的 `gutter` 由 `18` → `24`（4 个 section-card 分组全部统一）。
|
||
- 联系信息分组 `el-col :span="8"`（3列）→ `:span="6"`（4列），与工商/财务分组对齐。
|
||
- `<style scoped>` 中 `.archive-form` 新增 label 规则：固定 `width:96px` + `padding-right:12px` + `white-space:normal` + `text-align:right` + `overflow:visible`，使长 label（如"统一社会信用代码"）自动折行。
|
||
|
||
注意：`.score-detail-form` 已有独立 `.el-form-item__label` 规则，与本次改动无关，未触碰。
|
||
|
||
## .archive-form label 换行稳定性加固
|
||
用户反馈长 label 仍挤压 input，要求 input 宽度固定、label 超长换行（参考截图效果）。
|
||
- 强化 `.archive-form :deep(.el-form-item__label)`：`width: 96px !important` + `flex-shrink: 0` + `word-break/overflow-wrap: break-word`，移除无效的 `overflow:visible/text-overflow/display:inline-block`。
|
||
- `.el-form-item` 移除 `overflow:hidden`（避免裁剪多行 label）。
|
||
- `.el-form-item__content` 移除 `overflow:hidden`，保留 `flex:1; min-width:0`，确保 input 稳定占满剩余宽度且不被压缩。
|
||
- 核心机制：label 固定宽 + flex-shrink:0 ⇄ content flex:1，二者互斥分配宽度，input 宽度恒定。
|
||
|
||
## ★ Element Plus 2.14 label 换行真正根因（之前没修对）
|
||
看了 `node_modules/element-plus/theme-chalk/el-form-item.css` 才确认：
|
||
```
|
||
.el-form-item__label{...height:32px;line-height:32px;display:inline-flex}
|
||
.el-form-item--default .el-form-item__label{height:32px;line-height:32px}
|
||
```
|
||
Element Plus 把 label 锁死成 32px 高 + 32px 行高，**只够放一行**。光设 `white-space:normal; word-break:break-word` 没用，第二行会被 32px 高度裁掉（且 inline-flex 内容溢出可见，但父 form-item 高度还是被撑不开、看起来被吃掉了）。
|
||
|
||
**正确修复**（`customer-archive.vue` `.archive-form`，可推广到所有 el-form 弹窗）：
|
||
```scss
|
||
:deep(.el-form-item__label) {
|
||
width: 96px !important;
|
||
height: auto !important; // ★ 关键
|
||
line-height: 1.5 !important; // ★ 关键
|
||
padding-right: 12px;
|
||
white-space: normal;
|
||
text-align: right;
|
||
word-break: break-word;
|
||
overflow-wrap: break-word;
|
||
flex: 0 0 96px; // 显式三段式最稳
|
||
}
|
||
:deep(.el-form-item) { align-items: flex-start; } // 多行 label 时控件顶部对齐
|
||
```
|
||
这套改完，96px 固定的 label 才能真正「最大资金使用额度(万元)」「申请总资金使用额度(万元)」这种 11 字段自动折两行，右对齐、input 宽度不变。
|
||
|
||
## 弹窗表单项间距 16px → 8px（element-ui.scss 全局）
|
||
用户要求把弹窗内表单项上下间距从 16px 收紧到 8px，但担心压缩后红色校验错误文字被下一个 item 遮挡。
|
||
- 根因：Element Plus `.el-form-item__error` 默认 `position:absolute` 脱离文档流，16px 刚好够放下错误文字；压到 8px 后错误区超出占位被遮挡。
|
||
- 修复（只改 `src/styles/element-ui.scss` 全局样式，影响所有 `.el-dialog` 表单）：
|
||
- 两处 `.el-dialog .el-form-item { margin-bottom:16px }`（约 171 行、271 行）→ `8px`。
|
||
- 新增 `.el-dialog .el-form-item__error { position:relative; margin-top:2px; line-height:1.2 }`，让错误文字正常占高度、不再被遮挡。
|
||
- 副作用：有校验错误时该 item 高度会被错误文字撑开，同一行相邻列可能轻微错位，属可接受的常规表单体验。无错误时保持 8px 紧凑。
|
||
- 备注：`customer-archive.vue` 内 `.receipt-form`/`.invoice-form` 子表单各自 scoped 写死 16px（发票/收票子表，非主表单），本次未动；若需统一收紧再说。
|
||
|
||
## 客商档案弹窗布局微调（截图标注）
|
||
用户新截图两处标注，均在 `customer-archive.vue`：
|
||
1. **联系信息分组**：原三个字段 `:span="8"`（各 1/3，铺满整行）。改为 4 列布局——三个字段 `:span="6"` + 末尾补一个空 `<el-col :span="6"></el-col>` 占位（第4列留空，不铺满）。
|
||
2. **工商信息「上下居中对齐」**：在 `.archive-form` scoped 样式内新增 `:deep(.el-form-item){ align-items:center }`，显式锁定每个 form-item 的 label 与控件垂直居中对齐（之前无 flex-start 覆盖，默认本就 center，现在显式声明更稳妥）。
|
||
- 潜在提醒：工商信息内长 label「统一社会信用代码」仍按之前需求折两行，会让同一 el-row 内该列 form-item 比相邻单行 label 列高约 2px，输入控件垂直方向略有错位。若用户要的是「同行所有输入框严格水平对齐」，需让长 label 单行不折行（nowrap）或把长 label 字段单独成行——待用户确认。
|
||
|
||
## 营业期限日期选择器宽度与同行对齐
|
||
用户截图标注：工商信息「营业期限」日期选择器太宽，且勾选组件被挤到下一排。
|
||
|
||
改动（`src/views/vehicle/customer-archive.vue`）：
|
||
- `.business-term-field` 补充/修正 flex 布局：`display:flex; align-items:center; gap:8px; flex-wrap:nowrap;`。
|
||
- 日期选择器宽度由 `250px` 缩到 `150px`（`:deep(.el-date-editor)` 的 `flex-basis` + `width`）。
|
||
- 勾选组件加 `white-space:nowrap`，防止文字换行导致整体折行。
|
||
- 移除模板里冗余的 `style="display: flex;"`；修复 CSS 选择器笔误 `business-term-field,` → `.business-term-field,`。
|
||
|
||
效果：日期输入框与「无固定期限」复选框固定在同一排，日期框更紧凑。
|
||
|
||
## 营业期限校验提示改为中文
|
||
用户截图反馈：「营业期限」空值校验提示为英文 `businessEndDate is required`。
|
||
|
||
根因：`el-form-item` 的 `:required` 属性会在内部追加一条默认英文 required 规则，优先于自定义 validator，导致提示英文。
|
||
|
||
改动（`src/views/vehicle/customer-archive.vue`）：
|
||
- `el-form-item` 保留 `:required="archiveForm.businessTermType === '固定期限'"`（用于红色星号）。
|
||
- 新增 item 级动态规则 `:rules="businessEndDateRules"`，computed 返回：
|
||
- 固定期限 → `[{ required: true, message: '请选择营业期限截止日', trigger: 'change' }]`
|
||
- 长期 → `[]`
|
||
- 移除 data 中 form-level 的 `businessEndDate` 规则及不再使用的 `validateBusinessEndDate` 函数。
|
||
|
||
效果：固定期限且未选日期时，提示统一为中文「请选择营业期限截止日」；长期时自动跳过该校验。
|
||
|
||
## 地址「详细地址」输入框宽度撑满
|
||
用户截图反馈：工商信息「地址」里「请输入详细地址」输入框太短，希望宽度 100% 并与右侧对齐。
|
||
|
||
改动（`src/views/vehicle/customer-archive.vue`）：
|
||
- `.archive-form__address` 样式拆分：
|
||
- `el-cascader` 保持固定 `250px`。
|
||
- `el-input` 改为 `flex:1; width:100%; min-width:0`，自动占满剩余空间并对齐右侧。
|
||
- 移除 `el-input` 上冗余的 `style="width: 100%"`。
|
||
|
||
效果：省市区级联选择器保持 250px，详细地址输入框自动延伸至该 form-item 内容区右边缘。
|