From f0ee1e6ea3e1464d8d03020c7070a8bd4b0b79e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Tue, 11 Aug 2026 17:00:07 +0800 Subject: [PATCH] =?UTF-8?q?style(archive):=20=E4=BC=98=E5=8C=96=E5=B7=A5?= =?UTF-8?q?=E5=95=86=E4=BF=A1=E6=81=AF=E5=B8=83=E5=B1=80=E5=8F=8A=E8=90=A5?= =?UTF-8?q?=E4=B8=9A=E6=9C=9F=E9=99=90=E6=8E=A7=E4=BB=B6=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 联系信息分组由三等分布局改为四列布局，末列空置占位 - 工商信息内表单项标签与控件显式垂直居中对齐 - 营业期限字段的日期选择器宽度由250px缩减至150px，更紧凑 - 勾选框禁止换行，保证日期选择器与复选框同行显示 - 移除多余模板内联flex样式，修正CSS选择器笔误 - 固定期限营业期限增加中文校验提示，长期类型跳过校验 - 详细地址输入框设为flex:1，宽度撑满剩余空间，与右侧对齐 - 省市区级联选择器宽度保持250px，详细地址独立占满剩余宽度 --- .workbuddy/memory/2026-08-11.md | 36 ++++++++++++++++++++++++ src/views/vehicle/customer-archive.vue | 39 +++++++++++++++----------- 2 files changed, 58 insertions(+), 17 deletions(-) diff --git a/.workbuddy/memory/2026-08-11.md b/.workbuddy/memory/2026-08-11.md index 80c1934..86f6c14 100644 --- a/.workbuddy/memory/2026-08-11.md +++ b/.workbuddy/memory/2026-08-11.md @@ -57,3 +57,39 @@ Element Plus 把 label 锁死成 32px 高 + 32px 行高，**只够放一行**。 1. **联系信息分组**：原三个字段 `:span="8"`（各 1/3，铺满整行）。改为 4 列布局——三个字段 `:span="6"` + 末尾补一个空 `` 占位（第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 内容区右边缘。 diff --git a/src/views/vehicle/customer-archive.vue b/src/views/vehicle/customer-archive.vue index 4e8bd9e..562402b 100644 --- a/src/views/vehicle/customer-archive.vue +++ b/src/views/vehicle/customer-archive.vue @@ -240,8 +240,9 @@ label="营业期限" prop="businessEndDate" :required="archiveForm.businessTermType === '固定期限'" + :rules="businessEndDateRules" > -
+
- +
{ - if (this.archiveForm.businessTermType === '固定期限' && !value) { - callback(new Error('请选择营业期限截止日')); - } else { - callback(); - } - }; const validateRegisteredAddress = (rule, value, callback) => { const regionName = (this.archiveForm.registeredRegionName || '').trim(); const detailAddress = String(value || '').trim(); @@ -1446,7 +1440,6 @@ export default { registeredCapital: [{ validator: validateNonNegative, trigger: 'blur' }], maxCreditLimit: [{ validator: validateNonNegative, trigger: 'blur' }], applyCreditLimit: [{ validator: validateNonNegative, trigger: 'blur' }], - businessEndDate: [{ validator: validateBusinessEndDate, trigger: 'change' }], registeredDetailAddress: [ { validator: validateRegisteredAddress, trigger: ['change', 'blur'] }, ], @@ -1687,6 +1680,11 @@ export default { if (this.readonly) return '查看客商档案'; return this.archiveForm.id ? '编辑客商档案' : '新增客商档案'; }, + businessEndDateRules() { + return this.archiveForm.businessTermType === '固定期限' + ? [{ required: true, message: '请选择营业期限截止日', trigger: 'change' }] + : []; + }, contactDialogTitle() { return this.contactIndex > -1 ? '编辑联系人' : '新增联系人'; }, @@ -3725,37 +3723,44 @@ export default { } -business-term-field, +.business-term-field, .archive-form__address { display: flex; align-items: center; gap: 10px; - width: 100%; + width: 97%; } .business-term-field { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: nowrap; + :deep(.el-date-editor) { - flex: 0 0 250px; - width: 250px; + flex: 0 0 150px; + width: 150px; min-width: 0; } :deep(.el-checkbox) { flex: 0 0 auto; margin-right: 0; + white-space: nowrap; } } .archive-form__address { - :deep(.el-input), :deep(.el-cascader) { flex: 0 0 250px; width: 250px; min-width: 0; } - :deep(.el-cascader) { - flex-basis: 250px; + :deep(.el-input) { + flex: 1; + width: 100%; + min-width: 0; } }