fix(transport-plan): 修复详情页列对齐并调整新增弹窗卡片间距

- 调整发货地址、到货地址及备注字段span设置,实现基本信息区多列平整布局
- 优化标签列固定宽度及内容换行样式,保证表格展示整齐不溢出
- transport-plan新增弹窗各分组白卡间距从12px增至16px,提升视觉分隔效果
- 验证构建成功,确保样式修改不影响整体功能表现
This commit is contained in:
2026-08-07 15:37:37 +08:00
parent d5528541ce
commit 8e2ad08bf2
2 changed files with 16 additions and 1 deletions

View File

@@ -112,6 +112,16 @@
- 覆盖范围:全站所有表格可见文本列(含 Avue 与手写 el-table`type="selection"` 选择列由 Element Plus 自动豁免;操作列通过 CSS 豁免不被影响。 - 覆盖范围:全站所有表格可见文本列(含 Avue 与手写 el-table`type="selection"` 选择列由 Element Plus 自动豁免;操作列通过 CSS 豁免不被影响。
- 验证:`npm run build` 成功exit code 0构建日志中 CSS `*` 告警来自第三方库压缩,与本次无关(历史既有)。 - 验证:`npm run build` 成功exit code 0构建日志中 CSS `*` 告警来自第三方库压缩,与本次无关(历史既有)。
## 修复运输计划 /business/transport-plan 详情页字段列对齐
- 现象:用户截图反馈「基本信息 / 收发货信息 / 其它信息」详情表格不平整,左侧一列 label 与右侧 value 错位、中间空 cell。
- 根因:`src/views/business/components/business-crud-page.vue``detailBox``<el-descriptions :column="2" border>` 渲染 `config.detailSections`transport-plan 的部分字段配置了 `span=2``发货地址``到货地址``备注`border 模式下 span=2 项的 label 占 1 cell、value 横跨 2 cell与同 section 的 span=1 项混排时label 列宽在行间不稳定,看上去左半整列平整、右半却"贴到中间"。
- 改动:`src/option/business/transport-plan.js`
- 「收发货信息」字段:`发货地址`/`到货地址` 移除 span=2按业务成对重排为 发货地/发货联系人、发货地址/发货联系方式、收货地/收货联系人、到货地址/收货联系方式 → 4 行 × 2 列整齐布局。
- 「其它信息」字段:`备注` 移除 span=2保持 备注/更新人、更新时间/创建时间 → 2 行 × 2 列。
- 「基本信息」9 个字段本来全部 span=1无需调整。
- 现有样式(`&__detail-content .section-card``:deep(.el-descriptions__label) { width:140px; ... }`)保证 label 列固定 140px 右对齐;`:deep(.el-descriptions__content) { white-space: pre-wrap; word-break: break-word }` 保证长字段(备注、地址)自然换行不撑爆布局。
- 验证:`npm run build` 成功exit code 0
## 修复 /system/dept 操作栏错位(链接竖排) ## 修复 /system/dept 操作栏错位(链接竖排)
- 现象:用户截图反馈机构管理页操作列「查看 / 编辑 / 删除 / 新增子项」竖排且偏右错位。 - 现象:用户截图反馈机构管理页操作列「查看 / 编辑 / 删除 / 新增子项」竖排且偏右错位。
- 根因Avue 自带默认样式 `.avue-crud .avue-crud__menu{display:block}`(特异性 0,2,0与项目全局覆盖样式选择器完全相同项目原规则虽带 `!important`,但在 dev 模式 CSS 注入时序或浏览器缓存旧 element-ui.scss 时,`.avue-crud__menu` 退化成 block导致内部按钮/链接竖排。 - 根因Avue 自带默认样式 `.avue-crud .avue-crud__menu{display:block}`(特异性 0,2,0与项目全局覆盖样式选择器完全相同项目原规则虽带 `!important`,但在 dev 模式 CSS 注入时序或浏览器缓存旧 element-ui.scss 时,`.avue-crud__menu` 退化成 block导致内部按钮/链接竖排。
@@ -171,3 +181,8 @@
- **src/views 手写 el-table6 个)**system/dept.vue、business/loading-manage.vue、business/components/waybill-import-dialog.vue、business/project-apply.vue、vehicle/customer-archive.vue、business/components/business-crud-page.vue。 - **src/views 手写 el-table6 个)**system/dept.vue、business/loading-manage.vue、business/components/waybill-import-dialog.vue、business/project-apply.vue、vehicle/customer-archive.vue、business/components/business-crud-page.vue。
- 注意:弹窗内子表(如合同变更记录、项目附件/变更、客商档案评分/材料/变更记录等时间列也一并加了排序util/form.vue、util/table.vue 为示例页同样处理。 - 注意:弹窗内子表(如合同变更记录、项目附件/变更、客商档案评分/材料/变更记录等时间列也一并加了排序util/form.vue、util/table.vue 为示例页同样处理。
- 验证:`npm run build` 成功exit code 0构建日志中的 CSS `*` 告警为历史既有,与本次无关。 - 验证:`npm run build` 成功exit code 0构建日志中的 CSS `*` 告警为历史既有,与本次无关。
## transport-plan 新增弹窗卡片间距加大
- 需求:用户截图反馈 /business/transport-plan 新增弹窗中各分组白卡(基本信息/收发货信息/货物信息/附件)之间上下间距不够,要求像 project-apply 弹窗一样有明显间距。
- 改动:`src/views/business/components/business-crud-page.vue`
- `:deep(.avue-form__group:has(.dialog-section-title))``margin-bottom``12px` 增至 `16px`,与 project-apply.vue 的 `__grid` 卡片间距一致。

View File

@@ -9907,7 +9907,7 @@ export default {
border-radius: 6px; border-radius: 6px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
padding: 16px; padding: 16px;
margin-bottom: 12px; margin-bottom: 16px;
.avue-form__group--title { .avue-form__group--title {
padding: 0 !important; padding: 0 !important;