✨ 结算单用印类型、合同甲乙丙列表与项目调整材料

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/mk/public-biz-view.vue

@@ -2,16 +2,40 @@
   <div ref="page" class="mk-public-biz-view">
     <basic-container>
       <div class="mk-public-biz-view__title">{{ pageTitle }}</div>
-      <el-descriptions v-if="detail" :column="2" border>
-        <el-descriptions-item
-          v-for="item in visibleFields"
-          :key="item.prop"
-          :label="item.label"
-          :span="item.span || 1"
+      <template v-if="detail">
+        <el-descriptions :column="2" border>
+          <el-descriptions-item
+            v-for="item in visibleFields"
+            :key="item.prop"
+            :label="item.label"
+            :span="item.span || 1"
+          >
+            {{ fieldDisplayValue(item.prop, detail[item.prop]) }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <section
+          v-for="party in partySections"
+          :key="party.role"
+          class="mk-public-biz-view__party"
         >
-          {{ displayValue(detail[item.prop]) }}
-        </el-descriptions-item>
-      </el-descriptions>
+          <div class="mk-public-biz-view__party-title">{{ party.label }}</div>
+          <el-table :data="party.rows" border empty-text="暂无数据">
+            <el-table-column type="index" label="序号" width="70" align="center" />
+            <el-table-column prop="customerName" label="客商名称" min-width="180" align="center">
+              <template #default="{ row }">{{ row.customerName || '-' }}</template>
+            </el-table-column>
+            <el-table-column prop="creditCode" label="统一信用代码" min-width="160" align="center">
+              <template #default="{ row }">{{ row.creditCode || '-' }}</template>
+            </el-table-column>
+            <el-table-column prop="contactName" label="联系人" min-width="140" align="center">
+              <template #default="{ row }">{{ row.contactName || '-' }}</template>
+            </el-table-column>
+            <el-table-column prop="contactPhone" label="联系电话" min-width="140" align="center">
+              <template #default="{ row }">{{ row.contactPhone || '-' }}</template>
+            </el-table-column>
+          </el-table>
+        </section>
+      </template>
       <el-empty v-else description="暂无数据" />
     </basic-container>
   </div>
@@ -19,6 +43,36 @@
 
 <script>
 import { getMkPublicDetail, postMkPublicProcessMessage } from '@/api/mk-process';
+import { formatSealTypes } from '@/utils/settlement-seal';
+
+const createPartyRow = (row = {}) => ({
+  customerId: row.customerId || '',
+  customerName: row.customerName || '',
+  creditCode: row.creditCode || row.unifiedCreditCode || '',
+  contactId: row.contactId || '',
+  contactName: row.contactName || '',
+  contactPhone: row.contactPhone || '',
+});
+
+const parsePartyRows = (partyJson, fallbackName) => {
+  const rows = (() => {
+    if (Array.isArray(partyJson)) return partyJson;
+    if (!partyJson) return [];
+    try {
+      const data = JSON.parse(partyJson);
+      return Array.isArray(data) ? data : [];
+    } catch (error) {
+      return [];
+    }
+  })().map(item => createPartyRow(item));
+  if (rows.length) return rows;
+  if (!fallbackName) return [];
+  return String(fallbackName)
+    .split(/[、,]/)
+    .map(name => name.trim())
+    .filter(Boolean)
+    .map(name => createPartyRow({ customerName: name }));
+};
 
 const FIELD_MAP = {
   'project-apply': [
@@ -38,8 +92,6 @@ const FIELD_MAP = {
     { label: '审核状态', prop: 'approvalStatusName' },
     { label: '当前节点', prop: 'currentNode' },
     { label: '当前处理人', prop: 'currentProcessor' },
-    { label: '甲方', prop: 'partyA' },
-    { label: '乙方', prop: 'partyB' },
     { label: '项目名称', prop: 'projectName', span: 2 },
   ],
   'pre-settlement': [
@@ -47,6 +99,7 @@ const FIELD_MAP = {
     { label: '合同名称', prop: 'contractName' },
     { label: '项目名称', prop: 'projectName' },
     { label: '结算金额', prop: 'settlementAmount' },
+    { label: '用印类型', prop: 'sealTypes' },
     { label: '审核状态', prop: 'approvalStatusName' },
     { label: '当前节点', prop: 'currentNode' },
     { label: '当前处理人', prop: 'currentProcessor' },
@@ -58,6 +111,7 @@ const FIELD_MAP = {
     { label: '项目名称', prop: 'projectName' },
     { label: '合同名称', prop: 'contractName' },
     { label: '结算金额', prop: 'settlementAmount' },
+    { label: '用印类型', prop: 'sealTypes' },
     { label: '审核状态', prop: 'approvalStatusName' },
     { label: '当前节点', prop: 'currentNode' },
     { label: '当前处理人', prop: 'currentProcessor' },
@@ -99,6 +153,26 @@ export default {
     visibleFields() {
       return FIELD_MAP[this.bizType] || [];
     },
+    partySections() {
+      if (!this.detail || this.bizType !== 'contract-manage') return [];
+      return [
+        {
+          role: 'A',
+          label: '甲方',
+          rows: parsePartyRows(this.detail.partyAJson, this.detail.partyA),
+        },
+        {
+          role: 'B',
+          label: '乙方',
+          rows: parsePartyRows(this.detail.partyBJson, this.detail.partyB),
+        },
+        {
+          role: 'C',
+          label: '丙方',
+          rows: parsePartyRows(this.detail.partyCJson, this.detail.partyC),
+        },
+      ];
+    },
   },
   created() {
     this.handleIframeHeight = () => this.sendIframeHeight();
@@ -192,6 +266,7 @@ export default {
         id: this.getFormId() || detail.id,
         subject: this.pageTitle,
         formInstanceId: this.getFormId(),
+        sealTypes: formatSealTypes(detail.sealTypes) || detail.sealTypes || '',
       };
     },
     getFormId() {
@@ -205,6 +280,12 @@ export default {
         ''
       );
     },
+    fieldDisplayValue(prop, value) {
+      if (prop === 'sealTypes') {
+        return formatSealTypes(value) || '-';
+      }
+      return this.displayValue(value);
+    },
     displayValue(value) {
       if (value === null || value === undefined || value === '') return '-';
       if (Array.isArray(value)) return value.join('、') || '-';
@@ -255,5 +336,33 @@ html.mk-iframe-page #app.mk-iframe-page {
       background: #409eff;
     }
   }
+
+  &__party {
+    margin-top: 16px;
+    padding: 14px 16px 16px;
+    background: #fff;
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  }
+
+  &__party-title {
+    position: relative;
+    padding-left: 12px;
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 22px;
+    color: #303133;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 2px;
+      width: 4px;
+      height: 18px;
+      background: #409eff;
+    }
+  }
 }
 </style>