fix(business-crud-page): 统一发货模板弹窗 label 宽度并调整字段顺序

- 在通用详情描述和运费信息描述表中添加 label-width="140px",统一 label 列宽
- 调整收发货信息字段顺序,将联系人和联系方式置于地址之前
- 解决 span 行固定布局下 label 列宽不一致的问题
- 保证表格首行的两列 label 宽度固定,提升视觉一致性
This commit is contained in:
2026-08-24 20:19:08 +08:00
parent 8883186344
commit 21c4168867
2 changed files with 5 additions and 3 deletions
+3 -1
View File
@@ -10,7 +10,9 @@
## 发货模板查看弹窗 label 宽度统一 ## 发货模板查看弹窗 label 宽度统一
- 问题:详情弹窗各 section 的 el-descriptions 按内容自动列宽,导致「收发货信息」板块含 6 字标签(发货联系方式/收货联系方式)时 label 列比其他板块(4 字标签)更宽,视觉不一致。原 CSS `.el-descriptions__label{width:140px}` 在含 span 行的 fixed 布局下未能可靠等宽。 - 问题:详情弹窗各 section 的 el-descriptions 按内容自动列宽,导致「收发货信息」板块含 6 字标签(发货联系方式/收货联系方式)时 label 列比其他板块(4 字标签)更宽,视觉不一致。原 CSS `.el-descriptions__label{width:140px}` 在含 span 行的 fixed 布局下未能可靠等宽。
- 改动:`src/views/business/components/business-crud-page.vue` 在通用详情描述(line ~3109)与运费信息两张描述表(road / 非 road)上加 `label-width="140px"`Element Plus 原生机制,覆盖 auto 列宽与 span 行差异),使所有详情 label 列统一 140px。 - 改动:
- `src/views/business/components/business-crud-page.vue` 在通用详情描述(line ~3109)与运费信息两张描述表(road / 非 road)上加 `label-width="140px"`
- `src/option/business/shipping-template.js`:将「收发货信息」字段顺序调整为联系人/联系方式在前、地址整行在后(非 span 行置于首行,让 `table-layout: fixed` 能在首行正确建立两列 label 宽度)。
- 验证:`npm run build` 通过。 - 验证:`npm run build` 通过。
## 全站业务状态标签文字化(调度状态/审批状态) ## 全站业务状态标签文字化(调度状态/审批状态)
+2 -2
View File
@@ -40,12 +40,12 @@ export const config = {
{ {
title: '收发货信息', title: '收发货信息',
fields: [ fields: [
['departureAddress', '发货地址', 2],
['departureContact', '发货联系人'], ['departureContact', '发货联系人'],
['departurePhone', '发货联系方式'], ['departurePhone', '发货联系方式'],
['arrivalAddress', '货地址', 2], ['departureAddress', '货地址', 2],
['arrivalContact', '收货联系人'], ['arrivalContact', '收货联系人'],
['arrivalPhone', '收货联系方式'], ['arrivalPhone', '收货联系方式'],
['arrivalAddress', '收货地址', 2],
], ],
}, },
], ],