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:
2026-08-21 12:42:02 +08:00
parent 037031b76c
commit 6989486d8a
7 changed files with 125 additions and 22 deletions
+32
View File
@@ -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`、一致 paddinglabel 加 `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 刷新核对调整弹窗输入框是否完整显示、表头是否全部居中。
+2 -1
View File
@@ -28,7 +28,7 @@
### 独立表单页标题 `archive-page-form__title`(全局统一,参考 customer-archive
- 样式已**全局化**到 `src/styles/element-ui.scss`5b 段):18px/600/#303133 + margin-bottom:20px + `::before` 4px 主色竖条 + 8px 间距。原 `customer-archive.vue`scoped)与 `business-crud-page.vue``:global`)两处本地重复定义已删除,改由全局规则统一驱动(全站任意页面用此 class 即得统一标题)。
- **business-crud-page 系列**shipping-template / transport-plan / waybill-manage 独立表单页):`PageAvueForm`render `h('div',{class:dialogCustomClass},[titleDiv, avue-form])`)声明 `props.formPageTitle`,模板 `:form-page-title="isStandaloneFormPage ? formPageTitle : undefined"`computed `formPageTitle()``isStandaloneFormPage && (isShippingTemplatePage || isTransportPlanPage || isWaybillDetailLayout)` 时返回 `this.$route.query.name || '新增'/'编辑'+config.title``isWaybillDetailLayout` = `config.permission==='waybill_manage'`)。
- **business-crud-page 系列**shipping-template / transport-plan / waybill-manage / contract-manage 独立表单页):`PageAvueForm`render `h('div',{class:dialogCustomClass},[titleDiv, avue-form])`)声明 `props.formPageTitle`,模板 `:form-page-title="isStandaloneFormPage ? formPageTitle : undefined"`computed `formPageTitle()``isStandaloneFormPage && (isShippingTemplatePage || isTransportPlanPage || isWaybillDetailLayout || isContractConfig)` 时返回 `this.$route.query.name || '新增'/'编辑'+config.title``isWaybillDetailLayout` = `config.permission==='waybill_manage'``isContractConfig` = `config.permission==='contract_manage'`)。
- **loading-manage/form**:路由直接映射 `loading-manage.vue`(非 business-crud-page)。新增 computed `formPageTitle()``query.name || '新增/编辑配载管理'`),并在 `<component :is="isStandaloneFormPage?'div':'el-dialog'">` 内、body 前加 `<div v-if="isStandaloneFormPage" class="archive-page-form__title">`
- **master-order?mode=editor**`master-order.vue``<master-order-editor>` 包进 `<template v-else-if="mode==='editor'">`,前置 `<div class="archive-page-form__title">{{ masterEditorTitle }}</div>`computed `masterEditorTitle` = `routeId ? '编辑总单' : '新增总单'`)。
- 扩展原则:新增独立表单页要带此标题,要么并入 business-crud-page 的 `formPageTitle` 条件(business-crud-page 系列),要么在对应页面模板手写 `<div class="archive-page-form__title">`loading-manage / master-order 模式)。
@@ -47,3 +47,4 @@
- option 由 prop `crudOption``cloneOption` 克隆(保留所有顶层属性)。给各页 option 顶层加 `dialogCustomClass:'xxx-dialog'` + element-ui.scss `.xxx-dialog.el-dialog{height/max-height:calc(100vh - 40px)!important}` 可只影响该页。
- avue-crud 弹窗带 `avue-crud__dialog` class,受全局 `.avue-crud__dialog .avue-dialog__footer{margin-top:-30px!important}` 影响,自定义 footer 须加 `margin-top:0!important` 抵消。
- 独立表单页(contract-manage / shipping-template / waybill / transport-plan)走 `PageAvueForm`,不包 el-dialog,底部按钮随内容滚动不浮动。`pageFormOption`6205 行)负责装配。contract 用 `buildContractFormGroupOption`6861 行)按 order 分 7 组白卡。
- **查看详情弹窗(detailBox)自定义机制**:列表"查看/详情"按钮默认调 Avue 内置 `rowView`(列数复用 column.span,常呈 3 列)。要改成自定义两列白卡详情,在页面 `config``detailButton:true` + `detailSections:[{title, fields:[[prop,label,span],...]}]`,组件渲染 `section-card` + `el-descriptions(:column=2)`field 默认占 1 列,span:2 整行)。数据经 `api.getDetail(row.id)` 拉取,值用 `formatDetailValue` 经 column.dicData 转字典显示 label。开关:`showDetailButton` 默认仅非草稿态显示"详情"(草稿态仍走 rowView 3 列);加 `config.detailButtonIgnoreDraftStatus:true` 可让所有状态(含草稿)都走自定义两列详情。statusProp='approvalStatus' 的页面草稿值须为 'draft'。
@@ -45,6 +45,35 @@ export const config = {
editStatus: ['draft', 'withdrawn', 'rejected', '草稿', '已撤回'],
ignoreReadonlyEditStatus: ['draft', 'withdrawn', '草稿', '已撤回'],
ignoreReadonlyDeleteStatus: ['draft', '草稿'],
detailButton: true,
detailButtonIgnoreDraftStatus: true,
detailSections: [
{
title: '申请信息',
fields: [
['applicationNo', '申请单号', 2],
['projectName', '项目', 1],
['projectCode', '项目编号', 1],
['undertakeDeptName', '承办部门', 1],
['applyDeptName', '申请部门', 1],
['applicantName', '申请人', 1],
['approvalStatus', '审批状态', 1],
['currentNode', '当前节点', 1],
['currentProcessor', '当前处理人', 1],
['validUntil', '申请有效期至', 1],
['remark', '备注', 2],
],
},
{
title: '额度信息',
fields: [
['projectFundLimit', '项目资金使用额度(万元)', 1],
['usedFundLimit', '已使用项目资金使用额度(万元)', 1],
['remainingFundLimit', '剩余项目资金使用额度(万元)', 1],
['applyLimit', '申请临时额度(万元)', 1],
],
},
],
operations: [
{
action: 'submitApproval',
@@ -42,11 +42,11 @@ export const tableColumns = [
{ label: '运输类型', prop: 'transportType', minWidth: 120 },
{ label: '货物名称', prop: 'cargoName', minWidth: 130 },
{ label: '货物类型', prop: 'cargoType', minWidth: 120 },
{ label: '运输总量', prop: 'transportQuantity', minWidth: 120, align: 'right' },
{ label: '里程(KM', prop: 'mileage', minWidth: 120, align: 'right' },
{ label: '运输总量', prop: 'transportQuantity', minWidth: 120 },
{ label: '里程(KM', prop: 'mileage', minWidth: 120 },
{ label: '批次号', prop: 'batchNo', minWidth: 120 },
{ label: '运输单价', prop: 'unitPriceText', minWidth: 120, align: 'right' },
{ label: '费用合计', prop: 'totalAmountText', minWidth: 130, align: 'right' },
{ label: '运输单价', prop: 'unitPriceText', minWidth: 120 },
{ label: '费用合计', prop: 'totalAmountText', minWidth: 130 },
{ label: '状态', prop: 'settlementStatusName', minWidth: 120 },
{ label: '创建人', prop: 'createUserName', minWidth: 120 },
{ label: '创建时间', prop: 'createTime', minWidth: 170 },
@@ -61,15 +61,16 @@ export const feeDetailBaseColumns = [
{ label: '运费计费类型', prop: 'billingType', minWidth: 130 },
{ label: '运输量', prop: 'transportQuantityText', minWidth: 120 },
{ label: '运费计算单位', prop: 'priceUnit', minWidth: 130 },
{ label: '运输单价', prop: 'unitPrice', minWidth: 120, align: 'right' },
{ label: '里程(KM', prop: 'mileage', minWidth: 120, align: 'right' },
{ label: '运输费', prop: 'freightAmount', minWidth: 120, align: 'right' },
{ label: '运输单价', prop: 'unitPrice', minWidth: 120 },
{ label: '里程(KM', prop: 'mileage', minWidth: 120 },
{ label: '运输费', prop: 'freightAmount', minWidth: 180 }
];
export const feeDetailTailColumns = [
{ label: '原总金额', prop: 'originalAmountText', minWidth: 120, align: 'right' },
{ label: '调整金额', prop: 'adjustAmountText', minWidth: 120, align: 'right' },
{ label: '调整后总金额', prop: 'afterAmountText', minWidth: 140, align: 'right' },
{ label: '原总金额', prop: 'originalAmountText', minWidth: 120 },
{ label: '调整金额', prop: 'adjustAmountText', minWidth: 120 },
{ label: '调整后总金额', prop: 'afterAmountText', minWidth: 140 },
{ label: '备注', prop: 'remark', minWidth: 160 },
{ label: '最后录入人', prop: 'updateUserName', minWidth: 120 },
{ label: '最后录入时间', prop: 'updateTime', minWidth: 170 },
@@ -116,10 +117,10 @@ export const generateWaybillColumns = [
{ label: '发货联系人', prop: 'departureContact', minWidth: 130 },
{ label: '到货地址', prop: 'arrivalAddress', minWidth: 220 },
{ label: '收货联系人', prop: 'arrivalContact', minWidth: 130 },
{ label: '单价', prop: 'unitPrice', minWidth: 110, align: 'right' },
{ label: '运费', prop: 'freight', minWidth: 110, align: 'right' },
{ label: '其他费用合计', prop: 'otherFeeTotal', minWidth: 140, align: 'right' },
{ label: '运费合计', prop: 'freightTotal', minWidth: 120, align: 'right' },
{ label: '单价', prop: 'unitPrice', minWidth: 110 },
{ label: '运费', prop: 'freight', minWidth: 110 },
{ label: '其他费用合计', prop: 'otherFeeTotal', minWidth: 140 },
{ label: '运费合计', prop: 'freightTotal', minWidth: 120 },
{ label: '客户合同', prop: 'contractName', minWidth: 160 },
{ label: '发货计划', prop: 'planName', minWidth: 140 },
{ label: '运输批次', prop: 'batchNo', minWidth: 140 },
@@ -6267,7 +6267,10 @@ export default {
formPageTitle() {
if (
this.isStandaloneFormPage &&
(this.isShippingTemplatePage || this.isTransportPlanPage || this.isWaybillDetailLayout)
(this.isShippingTemplatePage ||
this.isTransportPlanPage ||
this.isWaybillDetailLayout ||
this.isContractConfig)
) {
return (
this.$route.query.name ||
@@ -7350,6 +7353,7 @@ export default {
showDetailButton(row) {
if (!this.config.detailButton || !this.hasPermission(`${this.config.permission}_view`))
return false;
if (this.config.detailButtonIgnoreDraftStatus) return true;
const status = this.statusValue(row);
return status !== 'draft';
},
@@ -15437,17 +15441,31 @@ export default {
gap: 12px;
.section-card {
:deep(.el-descriptions__table) {
width: 100%;
table-layout: fixed;
}
:deep(.el-descriptions__label) {
width: 140px;
min-width: 140px;
max-width: 140px;
box-sizing: border-box;
padding: 8px 12px;
color: #606266;
font-weight: 600;
text-align: right;
vertical-align: middle;
line-height: 1.4;
}
:deep(.el-descriptions__content) {
min-height: 42px;
padding: 8px 12px;
white-space: pre-wrap;
word-break: break-word;
vertical-align: middle;
line-height: 1.4;
}
}
}
+4 -4
View File
@@ -25,10 +25,10 @@ export default {
};
</script>
<style>
/* 合同管理弹窗:长 label(如"是否需要加盖法人章")在标签列内自动换行 */
.el-dialog .el-form-item__label {
<style scoped>
/* 合同管理弹窗:长 label(如"是否需要加盖法人章")在标签列内自动换行,且不影响全站弹窗 */
.contract-manage-dialog .el-form-item__label {
white-space: normal;
line-height: 1.2;
line-height: 1.4;
}
</style>
@@ -166,8 +166,13 @@
<div class="settlement-detail-page__adjust-toolbar">
<el-button type="primary" plain @click="addManualAdjustRow">新增费用项</el-button>
</div>
<el-table v-loading="adjustDialog.loading" :data="adjustRows" border>
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table
v-loading="adjustDialog.loading"
:data="adjustRows"
border
class="settlement-detail-page__adjust-table"
>
<el-table-column type="index" label="序号" width="64" align="center" header-align="center" />
<el-table-column label="手工费用项目" min-width="180" align="center">
<template #default="{ row }">
<el-input
@@ -1319,6 +1324,7 @@ export default {
:deep(th.el-table__cell) {
background: #f5f7fa;
text-align: center !important;
}
:deep(.el-table__row:nth-child(even) td.el-table__cell) {
@@ -1362,6 +1368,22 @@ export default {
margin-bottom: 8px;
}
.settlement-detail-page__adjust-table {
:deep(th.el-table__cell) {
text-align: center !important;
}
:deep(.el-input-number),
:deep(.el-input),
:deep(.el-select) {
width: 100% !important;
}
:deep(.el-input-number .el-input__inner) {
text-align: right;
}
}
.settlement-detail-page__generate-search {
margin-bottom: 16px;
padding: 12px 12px 4px;