style(archive): 优化工商信息布局及营业期限控件样式
- 联系信息分组由三等分布局改为四列布局,末列空置占位 - 工商信息内表单项标签与控件显式垂直居中对齐 - 营业期限字段的日期选择器宽度由250px缩减至150px,更紧凑 - 勾选框禁止换行,保证日期选择器与复选框同行显示 - 移除多余模板内联flex样式,修正CSS选择器笔误 - 固定期限营业期限增加中文校验提示,长期类型跳过校验 - 详细地址输入框设为flex:1,宽度撑满剩余空间,与右侧对齐 - 省市区级联选择器宽度保持250px,详细地址独立占满剩余宽度
This commit is contained in:
@@ -57,3 +57,39 @@ Element Plus 把 label 锁死成 32px 高 + 32px 行高,**只够放一行**。
|
|||||||
1. **联系信息分组**:原三个字段 `:span="8"`(各 1/3,铺满整行)。改为 4 列布局——三个字段 `:span="6"` + 末尾补一个空 `<el-col :span="6"></el-col>` 占位(第4列留空,不铺满)。
|
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,现在显式声明更稳妥)。
|
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 字段单独成行——待用户确认。
|
- 潜在提醒:工商信息内长 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 内容区右边缘。
|
||||||
|
|||||||
@@ -240,8 +240,9 @@
|
|||||||
label="营业期限"
|
label="营业期限"
|
||||||
prop="businessEndDate"
|
prop="businessEndDate"
|
||||||
:required="archiveForm.businessTermType === '固定期限'"
|
:required="archiveForm.businessTermType === '固定期限'"
|
||||||
|
:rules="businessEndDateRules"
|
||||||
>
|
>
|
||||||
<div class="business-term-field" style="display: flex;">
|
<div class="business-term-field">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
v-model="archiveForm.businessEndDate"
|
v-model="archiveForm.businessEndDate"
|
||||||
type="date"
|
type="date"
|
||||||
@@ -273,7 +274,7 @@
|
|||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="24">
|
<el-col :span="12">
|
||||||
<el-form-item label="地址" prop="registeredDetailAddress" required>
|
<el-form-item label="地址" prop="registeredDetailAddress" required>
|
||||||
<div class="archive-form__address">
|
<div class="archive-form__address">
|
||||||
<el-cascader
|
<el-cascader
|
||||||
@@ -1291,13 +1292,6 @@ export default {
|
|||||||
callback();
|
callback();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const validateBusinessEndDate = (rule, value, callback) => {
|
|
||||||
if (this.archiveForm.businessTermType === '固定期限' && !value) {
|
|
||||||
callback(new Error('请选择营业期限截止日'));
|
|
||||||
} else {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const validateRegisteredAddress = (rule, value, callback) => {
|
const validateRegisteredAddress = (rule, value, callback) => {
|
||||||
const regionName = (this.archiveForm.registeredRegionName || '').trim();
|
const regionName = (this.archiveForm.registeredRegionName || '').trim();
|
||||||
const detailAddress = String(value || '').trim();
|
const detailAddress = String(value || '').trim();
|
||||||
@@ -1446,7 +1440,6 @@ export default {
|
|||||||
registeredCapital: [{ validator: validateNonNegative, trigger: 'blur' }],
|
registeredCapital: [{ validator: validateNonNegative, trigger: 'blur' }],
|
||||||
maxCreditLimit: [{ validator: validateNonNegative, trigger: 'blur' }],
|
maxCreditLimit: [{ validator: validateNonNegative, trigger: 'blur' }],
|
||||||
applyCreditLimit: [{ validator: validateNonNegative, trigger: 'blur' }],
|
applyCreditLimit: [{ validator: validateNonNegative, trigger: 'blur' }],
|
||||||
businessEndDate: [{ validator: validateBusinessEndDate, trigger: 'change' }],
|
|
||||||
registeredDetailAddress: [
|
registeredDetailAddress: [
|
||||||
{ validator: validateRegisteredAddress, trigger: ['change', 'blur'] },
|
{ validator: validateRegisteredAddress, trigger: ['change', 'blur'] },
|
||||||
],
|
],
|
||||||
@@ -1687,6 +1680,11 @@ export default {
|
|||||||
if (this.readonly) return '查看客商档案';
|
if (this.readonly) return '查看客商档案';
|
||||||
return this.archiveForm.id ? '编辑客商档案' : '新增客商档案';
|
return this.archiveForm.id ? '编辑客商档案' : '新增客商档案';
|
||||||
},
|
},
|
||||||
|
businessEndDateRules() {
|
||||||
|
return this.archiveForm.businessTermType === '固定期限'
|
||||||
|
? [{ required: true, message: '请选择营业期限截止日', trigger: 'change' }]
|
||||||
|
: [];
|
||||||
|
},
|
||||||
contactDialogTitle() {
|
contactDialogTitle() {
|
||||||
return this.contactIndex > -1 ? '编辑联系人' : '新增联系人';
|
return this.contactIndex > -1 ? '编辑联系人' : '新增联系人';
|
||||||
},
|
},
|
||||||
@@ -3725,37 +3723,44 @@ export default {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
business-term-field,
|
.business-term-field,
|
||||||
.archive-form__address {
|
.archive-form__address {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
width: 100%;
|
width: 97%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.business-term-field {
|
.business-term-field {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
:deep(.el-date-editor) {
|
:deep(.el-date-editor) {
|
||||||
flex: 0 0 250px;
|
flex: 0 0 150px;
|
||||||
width: 250px;
|
width: 150px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-checkbox) {
|
:deep(.el-checkbox) {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.archive-form__address {
|
.archive-form__address {
|
||||||
:deep(.el-input),
|
|
||||||
:deep(.el-cascader) {
|
:deep(.el-cascader) {
|
||||||
flex: 0 0 250px;
|
flex: 0 0 250px;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-cascader) {
|
:deep(.el-input) {
|
||||||
flex-basis: 250px;
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user