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
+18
View File
@@ -510,6 +510,24 @@
background: #fff;
}
// 发货模板 label 固定宽度(option labelWidth:100 容纳 6 汉字),超出自动换行
.shipping-template-dialog .el-form-item__label {
white-space: normal;
line-height: 20px;
}
// 运输计划 label 固定宽度(option labelWidth:100 容纳 6 汉字),超出自动换行
.transport-plan-dialog .el-form-item__label {
white-space: normal;
line-height: 20px;
}
// 运单管理 label 固定宽度(option labelWidth:100 容纳 6 汉字),超出自动换行
.waybill-manage-dialog .el-form-item__label {
white-space: normal;
line-height: 20px;
}
// 运输计划新增/编辑弹窗:参照 vehicle/customer-archive,弹窗体接近全屏(上下各留 20px 边距);
// 同时覆盖 Avue 库内置 .avue-dialog 的 max-height: calc(100% - 200px) 上限,
// 改由 flex 控制,底部操作栏(avue 内置 footer,渲染在 body 内部)sticky 贴底始终可见