fix(business-crud-page): 统一多表单页标签宽度及四列布局调整

- 优化 business-crud-page.vue 中 buildFormGroupOption,抽取 setFourColumns 函数实现合同、发货模板、运输计划和运单管理表单统一四列展示
- 调整发货模板表单中的“模板信息”和“基本信息”两组列的 span 为 6,标签统一宽度为 100 像素,实现右对齐及超出换行
- 在 shipping-template.js、transport-plan.js、waybill-manage.js 中 labelWidth 设置为 100,覆盖 createCrudOption 默认的自动宽度,保证标签宽度一致
- 在 element-ui.scss 中新增发货模板、运输计划及运单管理弹窗标签换行样式,提升长标签显示效果
- 修正首次设置 labelWidth 为 100 写法错误,必须放在 createCrudOption 展开之后以覆盖默认值
This commit is contained in:
2026-08-21 16:29:44 +08:00
parent bcdd412d95
commit 5cf688bf06
6 changed files with 54 additions and 4 deletions
@@ -694,7 +694,6 @@
<el-form
:model="form"
label-position="right"
label-width="150"
class="business-crud-page__task-form business-crud-page__task-form--full"
>
<div class="business-crud-page__task-row">
@@ -6980,13 +6979,23 @@ export default {
});
if (current.length) groups.push(current);
if (groups.length <= 1) return option;
// 合同「基本信息」分区改为 4 列显示(分区标题列与已设整行的字段保持原样)
if (this.isContractConfig && groups[0].length) {
groups[0].forEach(col => {
// 分组内非标题、非整行字段统一为 4 列(span 6)
const setFourColumns = group => {
group.forEach(col => {
if (sectionTitleProps.includes(col.prop)) return;
if (col.span === 24) return;
col.span = 6;
});
};
// 合同「基本信息」分区改为 4 列显示(分区标题列与已设整行的字段保持原样)
if (this.isContractConfig && groups[0].length) setFourColumns(groups[0]);
// 发货模板「模板信息」「基本信息」前两组改为 4 列显示
if (this.isShippingTemplatePage && groups.length >= 2) {
[groups[0], groups[1]].forEach(setFourColumns);
}
// 运输计划 / 运单管理:整表单统一 4 列
if ((this.isTransportPlanPage || this.isWaybillDetailLayout) && groups.length) {
groups.forEach(setFourColumns);
}
return {
...option,