From 63256a9d21081a8f7dc0250cba0dcc10dfb24794 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Fri, 21 Aug 2026 01:21:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(business-crud-page):=20=E5=90=88=E5=90=8C?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E8=A1=A8=E5=8D=95=E9=A1=B5=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E5=A4=9A=E5=88=86=E7=BB=84=E5=8D=A1=E7=89=87=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

参考 business/project-apply 表单页的白底分组卡片样式，让合同管理新增/编辑
表单页（/business/contract-manage/form）的 7 个业务分组（基本信息 / 合同文件 /
计费信息 / 结算单规则 / 付款比例设置 / 其它附件 / 变更记录）独立成白底卡片、卡间
留 12px 间距露出灰底，标题统一加 4px 主色蓝条，与项目管理风格一致。

实现：
- buildContractFormGroupOption：按 order 降序遍历 option.column，遇到
  basicInfoTitle/contractFileTitle/billingInfoTitle/settlementRuleTitle/
  paymentRatioTitle/attachmentTitle/changeRecordTitle 7 个分区分隔列就切片
  分组；第一组做 column，后 6 组做 group（label: '' / arrow: false，避免
  avue-group 渲染空标题/箭头）
- pageFormOption：isContractFormPage 时调用上述方法
- CSS：合同表单页 dialog 灰底 #f5f6fa、avue-form 透明化、avue-form__group
  与 avue-group 统一白底 + 6px 圆角 + 轻阴影 + 12px margin-bottom
---
 .../components/business-crud-page.vue         | 88 ++++++++++++++++++-
 1 file changed, 86 insertions(+), 2 deletions(-)

diff --git a/src/views/business/components/business-crud-page.vue b/src/views/business/components/business-crud-page.vue
index f4b9daf..302157d 100644
--- a/src/views/business/components/business-crud-page.vue
+++ b/src/views/business/components/business-crud-page.vue
@@ -6207,13 +6207,17 @@ export default {
       const isTransportPlanCreate =
         this.config.enableTransportPlanCreateActions === true &&
         this.$route.query.mode === 'add';
-      return {
+      const base = {
         ...this.option,
         boxType: this.$route.query.mode === 'edit' ? 'edit' : 'add',
         menuBtn: true,
         submitBtn: !isTransportPlanCreate,
         emptyBtn: false,
       };
+      if (this.isContractFormPage) {
+        return this.buildContractFormGroupOption(base);
+      }
+      return base;
     },
     isWaybillDetailLayout() {
       return this.config.permission === 'waybill_manage';
@@ -6854,6 +6858,41 @@ export default {
       if (mode === 'edit') this.form = { id };
       this.beforeOpen(() => {}, mode);
     },
+    buildContractFormGroupOption(option) {
+      const sectionTitleProps = [
+        'basicInfoTitle',
+        'contractFileTitle',
+        'billingInfoTitle',
+        'settlementRuleTitle',
+        'paymentRatioTitle',
+        'attachmentTitle',
+        'changeRecordTitle',
+      ];
+      const columns = [...(option.column || [])].sort(
+        (a, b) => (b.order || 0) - (a.order || 0)
+      );
+      const groups = [];
+      let current = [];
+      columns.forEach(col => {
+        if (sectionTitleProps.includes(col.prop)) {
+          if (current.length) groups.push(current);
+          current = [col];
+        } else {
+          current.push(col);
+        }
+      });
+      if (current.length) groups.push(current);
+      if (groups.length <= 1) return option;
+      return {
+        ...option,
+        column: groups[0],
+        group: groups.slice(1).map(group => ({
+          label: '',
+          arrow: false,
+          column: group,
+        })),
+      };
+    },
     openContractFormPage(mode, row = {}) {
       if (this.isStandaloneBusinessPage) {
         this.$router.push({
@@ -15812,7 +15851,7 @@ export default {
   width: 100% !important;
   min-height: 100%;
   box-sizing: border-box;
-  padding: 20px 24px 96px;
+  //padding: 20px 24px 96px;
   background: #f5f6fa;
   margin: 0 !important;
   border-radius: 0;
@@ -15973,6 +16012,51 @@ export default {
   width: auto;
 }
 
+// 合同管理独立表单页：标题分块使用白底卡片，间距 12px，与 section-card 风格一致
+:global(.contract-manage-form-dialog) {
+  padding: 20px 24px 96px;
+  background: #f5f6fa;
+  box-sizing: border-box;
+}
+
+:global(.business-crud-page--contract-form .avue-form) {
+  background: transparent;
+  padding: 0;
+}
+
+:global(.business-crud-page--contract-form .avue-form > .el-form > .avue-form__group),
+:global(.business-crud-page--contract-form .avue-group) {
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  margin-bottom: 12px;
+  padding: 14px 16px 4px;
+  overflow: hidden;
+}
+
+:global(.business-crud-page--contract-form .avue-form > .el-form > .avue-form__group:last-child),
+:global(.business-crud-page--contract-form .avue-group:last-child) {
+  margin-bottom: 0;
+}
+
+:global(.business-crud-page--contract-form .avue-group .el-collapse) {
+  border-top: none;
+  border-bottom: none;
+}
+
+:global(.business-crud-page--contract-form .avue-group .el-collapse-item__header) {
+  display: none;
+}
+
+:global(.business-crud-page--contract-form .avue-group .el-collapse-item__wrap) {
+  border-bottom: none;
+  will-change: auto;
+}
+
+:global(.business-crud-page--contract-form .avue-group .el-collapse-item__content) {
+  padding-bottom: 0;
+}
+
 :global(.avue--collapse .el-overlay:has(.contract-manage-form-dialog)) {
   left: 60px !important;
 }