style(business): 优化合同管理、综合台账及应付明细弹窗样式调整
- 统一 business-crud-page 系列独立表单页标题显示,新增 contract-manage 支持 - 综合台账弹窗 vehicle-ledger/ship-ledger 中 el-table 移入各 tab-pane,调整蓝标内容为全局 section-card 组件 - 临时额度查看弹窗改为两列自定义详情显示,支持草稿态详情按钮显示 - 修复合同管理详情弹窗 label 对齐问题,增强 el-descriptions 表格宽度与标签样式 - contract-manage.vue 全局样式改为 scoped,消除全站弹窗样式污染 - 应付明细调整弹窗控件宽度撑满单元格,统一所有表头居中显示 - 移除 receivable-payable-detail 表格中部分列 align:right,避免内容截断 - 新增相应组件样式支持 :deep 选择器实现样式穿透,保证兼容性和维护性
This commit is contained in:
@@ -58,3 +58,35 @@
|
||||
- **loading-manage/form**:该路由直接映射到 `loading-manage.vue`(非 business-crud-page)。新增 computed `formPageTitle()`(`query.name || '新增/编辑配载管理'`),并在独立表单页的 `<component>` 内、body 之前加 `<div v-if="isStandaloneFormPage" class="archive-page-form__title">{{ formPageTitle }}</div>`。
|
||||
- **master-order?mode=editor**:`master-order.vue` 渲染 `master-order-editor.vue`。将 `<master-order-editor>` 包进 `<template v-else-if="mode==='editor'">`,前置 `<div class="archive-page-form__title">{{ masterEditorTitle }}</div>`;新增 computed `masterEditorTitle`(`routeId ? '编辑总单' : '新增总单'`)。
|
||||
- 验证:4 个 SFC + element-ui.scss 经 Vite 2889 编译均 HTTP 200、无 transform/syntax 错误。
|
||||
|
||||
## 综合台账弹窗 & 临时额度查看弹窗 布局调整
|
||||
- vehicle-ledger / ship-ledger(/transportCapacity 车辆·船舶综合台账弹窗):把 `<el-table>`+分页从 `el-tabs` 外移入每个 `<el-tab-pane>` 内(切换 tab 表格跟着切换);ship-ledger 同步把三个蓝标内容块(船舶基本信息/船舶证书信息/证书附件)由 `<section>`+`.dialog-section-title` 改为全局 `<section-card :title>`,卡片间距 12px。两文件均加 `:deep(.el-tabs__content){padding:0}` 去 border-card 默认内边距。
|
||||
- 临时额度查看弹窗改两列(/business/temporary-credit-limit):
|
||||
- 原"查看"调 Avue 内置 `rowView`(列数复用 column.span,呈 3 列)。改用 business-crud-page 内置自定义详情弹窗。
|
||||
- `src/option/business/temporary-credit-limit.js` config 加 `detailButton:true`、`detailButtonIgnoreDraftStatus:true`、`detailSections:[申请信息(申请单号/备注 span:2 整行,其余两列)、额度信息]`。
|
||||
- `business-crud-page.vue` 的 `showDetailButton` 加 `if(this.config.detailButtonIgnoreDraftStatus) return true`(仅放开草稿态也走自定义详情,不动其他页面)。
|
||||
|
||||
## contract-manage/form 独立表单页也加 archive-page-form__title
|
||||
- 需求:`/business/contract-manage/form?mode=add&name=新运费合同管理` 也要同样顶部页面标题。
|
||||
- 改动:`business-crud-page.vue` 的 `formPageTitle()` 条件再并入 `isContractConfig`(`config.permission==='contract_manage'`,contract-manage 已用 `contract-form-page` prop 走 `PageAvueForm`)。标题取 `query.name`(「新运费合同管理」)或回退「新增/编辑合同管理」。
|
||||
- 验证:Vite 2889 编译通过(HTTP 200,无错误),HMR 生效。至此 business-crud-page 系列(shipping-template / transport-plan / waybill-manage / contract-manage)独立表单页均已带统一标题。
|
||||
- 渲染走 `detailSections` 分支(`section-card` + `el-descriptions(:column=2)`),值经 `formatDetailValue` 转字典 label。
|
||||
- 验证:`temporary-credit-limit.js` 经 `node --check` 语法通过;business-crud-page.vue 仅 template 表达式改动。待用户在 2889 刷新核对两列效果。
|
||||
|
||||
## 合同管理详情弹窗 label 对齐修复
|
||||
- 需求:`/business/contract-manage` 详情弹窗里两列 `el-descriptions` 的 label(尤其右边列 label)对齐不一致,长 label(如"是否需要加盖法人章")换行后行高/垂直位置错乱。
|
||||
- 根因:`business-crud-page.vue` 的 `&__detail-content .section-card` 中对 `.el-descriptions__label` 只写了 `width: 140px` 与 `text-align: right`,缺 `min/max-width`、`vertical-align`、`line-height`、`box-sizing`;对 `.el-descriptions__content` 也缺垂直对齐,导致跨列/跨行 label 视觉上不齐。另外 `contract-manage.vue` 底部的 `<style>`(未加 `scoped`)把 `.el-dialog .el-form-item__label` 与 `.el-col` 全局覆盖,会污染全站弹窗。
|
||||
- 改动:
|
||||
1. `src/views/business/components/business-crud-page.vue`(15440 行附近):
|
||||
- label 与 content 统一加 `box-sizing:border-box`、`vertical-align:middle`、`line-height:1.4`、一致 padding;label 加 `min-width:140px; max-width:140px` 防止被内容撑开或压缩,content 保持 `min-height:42px`。
|
||||
- **新增 `:deep(.el-descriptions__table) { width:100%; table-layout:fixed }`**:强制表格按固定列宽渲染,label 占 140px 后,左右两个 content 列均分剩余宽度,解决用户截图里"合同期限"卡片左右内容区宽度不一致的问题。
|
||||
2. `src/views/business/contract-manage.vue`:把底部无 scoped 的全局样式改为 `<style scoped>`,并把选择器限定到 `.contract-manage-dialog`;删除污染性更强的 `.el-col { margin-bottom:0 !important }` 全局覆盖。
|
||||
- 验证:Vite 2889 编译通过(HTTP 200),HMR 生效。待用户在 2889 刷新核对详情弹窗两列 label 是否左右/上下对齐、左右内容区宽度是否均等。
|
||||
|
||||
## 应付明细调整弹窗:控件撑满单元格 + 表头居中
|
||||
- 需求:`/settlement/payable-detail`(即 `receivable-payable-detail.vue`)"调整费用"弹窗中,里程 / 杂项 / 装卸费等列的 `el-input-number` 默认宽度 180px,超出窄列后被截断(见截图);同时要求所有表头居中。
|
||||
- 改动(单文件 `src/views/settlement/receivable-payable-detail.vue`):
|
||||
1. 给调整弹窗 `<el-table>` 加 `class="settlement-detail-page__adjust-table"`。
|
||||
2. 页面级表格样式 `.settlement-detail-page__table, .settlement-detail-page :deep(.el-table)` 的 `th.el-table__cell` 增加 `text-align: center !important;`,统一所有表头居中(覆盖金额列 `align: right` 导致的表头右偏)。
|
||||
3. 新增 `.settlement-detail-page__adjust-table` 样式块:`.el-input-number`、`.el-input`、`.el-select` 全部 `width: 100% !important;`,使控件撑满单元格不被截断;`el-input-number` 内部输入保持右对齐。
|
||||
- 验证:Vite 2889 编译通过(HTTP 200),HMR 生效。待用户在 2889 刷新核对调整弹窗输入框是否完整显示、表头是否全部居中。
|
||||
|
||||
Reference in New Issue
Block a user