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:
@@ -173,3 +173,20 @@
|
||||
- 改动(`src/views/business/components/master-order-dispatch.vue` 模板,21-45 行):起/经、终节点各自的 strong(名称)+ 两个 small(地址、联系人)共 6 个文本元素分别用 `<el-tooltip placement="top" :show-after="120">` 包裹,`:content` 与原文本一致;保持原有 `text-overflow:ellipsis` 截断视觉不变。
|
||||
- `:show-after="120"` 让鼠标停留 120ms 才弹,避免快速划过连续触发多个 tooltip;`placement="top"` 配合节点垂直居中位置弹出,体验稳定。
|
||||
- 风险:仅模板增加 6 个 el-tooltip 实例,无 JS/style 改动;与之前段头 `el-tooltip`(segment-checkbox-label)用法一致。
|
||||
|
||||
## shipping-template(发货模板)表单页:模板信息+基本信息 4 列 + label 统一宽度
|
||||
- 需求:`/business/shipping-template/form` 的「模板信息」「基本信息」两组改 4 列;左侧 label 宽度一致右对齐;全站统一(6 汉字宽、超出换行)。
|
||||
- 改动 3 处:
|
||||
1. `business-crud-page.vue` `buildFormGroupOption` 新增 `isShippingTemplatePage` 分支:对 groups[0](模板信息)、groups[1](基本信息)的非标题、非 span24 列设 `span:6`(该页分组:templateInfoTitle/basicInfoTitle/shippingInfoTitle/goodsInfoTitle/attachmentTitle 均已在 sectionTitleProps,发货信息及之后组保持原样)。
|
||||
2. `src/option/business/shipping-template.js`:option 顶层加 `labelWidth: 100`(覆盖 createCrudOption 的 'auto',全表单 label 一致 100px;右对齐已由 labelPosition:'right' 保证)。
|
||||
3. `src/styles/element-ui.scss` `.shipping-template-dialog .el-form-item__label { white-space: normal; line-height: 20px }`(长 label 换行,独立表单页容器也是 div.shipping-template-dialog,class 命中)。
|
||||
- 模式沉淀:contract(isContractConfig 首组)/ shipping-template(前两组)都走 buildFormGroupOption 统一处理;普通 el-col 循环页直接改 span;CSS grid 页改 repeat 数 + label 规则。4 列=span 6,6 汉字=100px。
|
||||
|
||||
## transport-plan / waybill-manage 表单页:整表单 4 列 + label 统一(全站统一)
|
||||
- `business-crud-page.vue` `buildFormGroupOption` 重构:抽取 `setFourColumns(group)` helper(非标题、非 span24 列设 span:6);contract→首组、shipping-template→前两组、transport_plan/waybill_manage→**所有分组**统一 4 列(这两页很多字段无显式 span 会落到 Avue 默认 12=2 列,是之前不 4 列的原因)。
|
||||
- `waybill-manage.js` option 加 `labelWidth:100`(transport-plan.js 上轮已加);element-ui.scss 追加 `.waybill-manage-dialog .el-form-item__label` 换行规则(transport-plan-dialog 上轮已加)。
|
||||
- 经验:Avue 表单「没 4 列」先查是否有字段漏设 span(默认 12);统一 4 列优先走 buildFormGroupOption 的页面级分支,避免逐个字段改。
|
||||
|
||||
## ⚠️ option.labelWidth 必须放在 createCrudOption 展开之后
|
||||
- 第一次给 transport-plan.js、waybill-manage.js 加 `labelWidth: 100` 时写在 `...createCrudOption(...)` **之前**,被 createCrudOption 自带 `labelWidth: 'auto'` 覆盖,label 仍是 auto(按内容参差,看着像"150 不统一")。shipping-template 当时写在 createCrudOption 之后才生效。
|
||||
- 教训:业务 option 文件顶层 `export const option = { labelWidth: 100, ...createCrudOption([...]) }` 写法**无效**,必须 `export const option = { ...createCrudOption([...]), labelWidth: 100, dialogWidth, ... }` 后写覆盖前写。
|
||||
|
||||
@@ -275,6 +275,8 @@ export const option = {
|
||||
),
|
||||
dialogWidth: '92%',
|
||||
dialogTop: '4vh',
|
||||
// label 宽度一致(容纳 6 汉字,超出换行由全局样式控制),右对齐由 labelPosition: 'right' 保证
|
||||
labelWidth: 100,
|
||||
// 自定义弹窗 class,用于让新增/编辑弹窗体占满视口高度、视觉居中(参照 vehicle/customer-archive)
|
||||
dialogCustomClass: 'shipping-template-dialog',
|
||||
};
|
||||
|
||||
@@ -605,6 +605,8 @@ export const option = {
|
||||
},
|
||||
])
|
||||
),
|
||||
// label 固定宽度(容纳 6 汉字),覆盖 createCrudOption 默认 labelWidth:'auto'
|
||||
labelWidth: 100,
|
||||
dialogWidth: '96%',
|
||||
dialogTop: '4vh',
|
||||
dialogCustomClass: 'transport-plan-dialog',
|
||||
|
||||
@@ -999,6 +999,8 @@ export const option = {
|
||||
},
|
||||
])
|
||||
),
|
||||
// label 固定宽度(容纳 6 汉字),覆盖 createCrudOption 默认 labelWidth:'auto'
|
||||
labelWidth: 100,
|
||||
dialogWidth: '96%',
|
||||
dialogTop: '4vh',
|
||||
menuWidth: 280,
|
||||
|
||||
@@ -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 贴底始终可见
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user