feat: 基本信息联调，回款信息联调

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

src/views/create-order/components/order-detail-submodule/AuditRecords.vue

@@ -6,20 +6,11 @@
           审核记录<span style="font-size: 14px;line-height: 22px;">（共<span class="num-active"> 0 </span>条）</span>
         </template>
         <div class="audit-records-card-content">
-          <el-table
-            class="audit-records-card-content-table"
-            border
-            :data="tableData"
-            style="width: 1108px">
-            <el-table-column
-              v-for="item in columns"
-              :key="item.key"
-              :prop="item.key"
-              :label="item.label"
-              :width="item.width"
-            >
-            </el-table-column>
-          </el-table>
+          <AuditRecordsColumns
+            :table-data="tableData"
+            width="1108px"
+          >
+          </AuditRecordsColumns>
         </div>
       </InfoCard>
     </div>
@@ -28,10 +19,12 @@
 
 <script>
 import InfoCard from '../../ui/InfoCard.vue';
+import AuditRecordsColumns from './AuditRecordsColumns.vue';
 export default {
   name: 'AuditRecords',
   components: {
-    InfoCard
+    InfoCard,
+    AuditRecordsColumns
   },
   props: {
     orderDetail: {
@@ -43,88 +36,6 @@ export default {
   },
   data() {
     return {
-      columns: [
-        {
-          label: '操作人',
-          align: 'center',
-          width: '90',
-          key: 'operator'
-        },
-        {
-          label: '操作时间',
-          align: 'center',
-          width: '170',
-          key: 'create_time'
-        },
-        {
-          label: '操作类型',
-          key: 'type',
-          width: '100',
-          align: 'center',
-          render: (h, {row}) => {
-            let val = '-'
-            switch (row.operator_type) {
-              case 1:
-                val = '新增'
-                break
-              case 2:
-                val = '一审'
-                break
-              case 3:
-                val = '二审'
-                break
-              case 4:
-                val = '编辑'
-                break
-              case 5:
-                val = '三审'
-                break
-            }
-            
-            return h('span', val)
-          }
-        },
-        {
-          label: '审核状态',
-          width: '100',
-          align: 'center',
-          key: 'status',
-          render: (h, {row}) => {
-            let val = '-'
-            switch (row.audit_status) {
-              case 0:
-                val = '待提交'
-                break
-              case 1:
-                val = '待一审'
-                break
-              case 2:
-                val = '待二审'
-                break
-                case 4:
-                val = '待三审'
-                break
-              case 3:
-                val = '已通过'
-                break
-              case -2:
-                val = '已退回'
-                break
-              case -3:
-                val = '已退回'
-                break
-              case -4:
-                val = '已退回'
-                break
-            }
-            return h('span', val)
-          }
-        },
-        {
-          label: '审核备注',
-          key: 'back_reason'
-        }
-      ],
       tableData: [
         // {
         //   operator: '王小虎',
@@ -145,23 +56,6 @@ export default {
 .audit-records-container {
   .audit-records-card-content-table {
     border-radius: 4px;
-    ::v-deep {
-      .cell {
-        text-align: center;
-        font-size: 14px;
-        font-weight: 400;
-        color: $gray_10;
-      }
-      .has-gutter {
-        th {
-          background: #F9FAFB;
-          .cell {
-            padding: 0;
-            color: #686868;
-          }
-        }
-      }
-    }
   }
   .num-active {
     color: $color_main;

src/views/create-order/components/order-detail-submodule/AuditRecordsColumns.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="audit-records-columns">
+    <TableCard
+      class="audit-records-card-content-table"
+      :table-data="tableData"
+      :width="width"
+      :columns="columns"
+    ></TableCard>
+  </div>
+</template>
+
+<script>
+import TableCard from '../../ui/TableCard.vue';
+export default {
+  name: 'AuditRecords',
+  components: {
+    TableCard
+  },
+  props: {
+    tableData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    width: {
+      type: String,
+      default: '1108px' 
+    },
+    columns: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            label: '操作人',
+            align: 'center',
+            width: '90',
+            key: 'operator'
+          },
+          {
+            label: '操作时间',
+            align: 'center',
+            width: '170',
+            key: 'create_time'
+          },
+          {
+            label: '操作类型',
+            key: 'type',
+            width: '100',
+            align: 'center',
+            render: (h, {row}) => {
+              let val = '-'
+              switch (row.operator_type) {
+                case 1:
+                  val = '新增'
+                  break
+                case 2:
+                  val = '一审'
+                  break
+                case 3:
+                  val = '二审'
+                  break
+                case 4:
+                  val = '编辑'
+                  break
+                case 5:
+                  val = '三审'
+                  break
+              }
+              
+              return h('span', val)
+            }
+          },
+          {
+            label: '审核状态',
+            width: '100',
+            align: 'center',
+            key: 'status',
+            render: (h, {row}) => {
+              let val = '-'
+              switch (row.audit_status) {
+                case 0:
+                  val = '待提交'
+                  break
+                case 1:
+                  val = '待一审'
+                  break
+                case 2:
+                  val = '待二审'
+                  break
+                  case 4:
+                  val = '待三审'
+                  break
+                case 3:
+                  val = '已通过'
+                  break
+                case -2:
+                  val = '已退回'
+                  break
+                case -3:
+                  val = '已退回'
+                  break
+                case -4:
+                  val = '已退回'
+                  break
+              }
+              return h('span', val)
+            }
+          },
+          {
+            label: '审核备注',
+            key: 'back_reason'
+          }
+        ]
+      } 
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.audit-records-container {
+  .audit-records-card-content-table {
+    border-radius: 4px;
+  }
+  .num-active {
+    color: $color_main;
+  }
+}
+</style>

src/views/create-order/components/order-detail-submodule/OrderDetailCard.vue

@@ -203,6 +203,8 @@ export default {
       const totalOriginalPrice = (this.productData.reduce((acc, cur) => acc + Number(cur.original_price), 0)).toFixed(2)
       this.orderData.final_price_total = '￥' + totalFinalPrice
       this.orderData.original_price_total = '￥' + totalOriginalPrice
+      // 设置净合同金额合计
+      this.orderData.pure_amount = '￥' + (this.orderData.pure_amount / 100).toFixed(2)
       // 计算折扣率总和
       this.orderData.rate_total = (div(totalFinalPrice, totalOriginalPrice) * 100).toFixed(2) + '%'
       this.productData = this.orderDetail?.productData || []

src/views/create-order/components/order-detail-submodule/PaymentInfo.vue

@@ -18,7 +18,13 @@
         回款交易详情<span style="font-size: 14px;line-height: 22px;">（共<span class="num-active"> 0 </span>条）</span>
       </template>
       <div class="payment-info-content">
-        <el-table
+        <TableCard
+          class="payment-info-content-table"
+          :table-data="paymentDetailList"
+          :columns="paymentDetailColumns"
+          width="1108px"
+        ></TableCard>
+        <!-- <el-table
             class="payment-info-content-table"
             border
             :data="paymentDetailList"
@@ -73,12 +79,25 @@
               label="操作人"
               width="90">
             </el-table-column>
-          </el-table>
+          </el-table> -->
       </div>
     </InfoCard>
     <InfoCard title="用户自助下单对公转账">
       <div class="payment-info-content">
-        <el-table
+        <TableCard
+          class="payment-info-content-table"
+          :table-data="transerList"
+          :columns="transerColumns"
+          width="1108px"
+        >
+          <template v-slot:payVoucher="{ row }">
+            <span class="column-cell">{{ row.row.payVoucher }}</span>
+          </template>
+          <template v-slot:action="{ row }">
+            <span class="column-cell">{{ row.row.action }}</span>
+          </template>
+        </TableCard>
+        <!-- <el-table
         class="payment-info-content-table"
         border
         :data="transerList"
@@ -115,7 +134,7 @@
             <span class="column-cell">{{ scope.row.action }}</span>
           </template>
           </el-table-column>
-        </el-table>
+        </el-table> -->
       </div>
     </InfoCard>
   </div>
@@ -123,10 +142,12 @@
 
 <script>
 import InfoCard from '../../ui/InfoCard.vue';
+import TableCard from '../../ui/TableCard.vue';
 export default {
   name: 'PaymentInfo',
   components: {
-    InfoCard
+    InfoCard,
+    TableCard
   },
   props: {
     orderDetail: {
@@ -138,6 +159,58 @@ export default {
   },
   data() {
     return {
+      paymentDetailColumns: [
+        {
+          label: '回款时间',
+          prop: 'paytime',
+          width: '112'
+        },
+        {
+          label: '回款金额',
+          prop: 'paymoney',
+          width: '112'
+        },
+        {
+          label: '支付方式',
+          prop: 'paytype',
+          width: '90'
+        },
+        {
+          label: '手续费',
+          prop: 'commission',
+          width: '90'
+        },
+        {
+          label: '回款银行',
+          prop: 'bank',
+          width: '150'
+        },
+        {
+          label: '支付单号/银行流水号',
+          prop: 'orderNumber',
+          width: '150'
+        },
+        {
+          label: '支付户名',
+          prop: 'payAccountName',
+          width: '90'
+        },
+        {
+          label: '流水金额',
+          prop: 'flowamount',
+          width: '112'
+        },
+        {
+          label: '操作时间',
+          prop: 'actionTime',
+          width: '112'
+        },
+        {
+          label: '操作人',
+          prop: 'operator',
+          width: '90'
+        }
+      ],
       paymentDetailList: [
         {
           paytime: '2023-12-31 13:21:32',
@@ -152,6 +225,32 @@ export default {
           operator: '张三'
         }
       ],
+      transerColumns: [
+        {
+          label: '提交时间',
+          prop: 'submitTime',
+        },
+        {
+          label: '支付凭证',
+          prop: 'payVoucher',
+        },
+        {
+          label: '审核状态',
+          prop: 'processStatus',
+        },
+        {
+          label: '审核时间',
+          prop: 'processTime',
+        },
+        {
+          label: '操作人',
+          prop: 'operator',
+        },
+        {
+          label: '操作',
+          prop: 'action'
+        }
+      ],
       transerList: [
         {
           submitTime: '2023-12-31 13:21:32',
@@ -161,10 +260,13 @@ export default {
           operator: '张三',
           action: '审核',
         }
-
-      ]
+      ],
+      returnRes: {}
     }
-  }
+  },
+  mounted() {
+    this.returnRes = this.orderDetail?.returnRes || {};
+  },
 }
 </script>
 

src/views/create-order/ui/TableCard.vue

@@ -5,32 +5,100 @@
       border
       :data="tableData"
       :style="{ width: width }"
-      >
+      :cell-class-name="getCellClass"
+      :cell-style="getCellStyles"
+      @row-click="handleRowClick"
+    >
+      <!-- 动态生成列 -->
       <el-table-column
         v-for="(item, index) in columns"
         :key="index"
         :prop="item.prop"
         :label="item.label"
-        :width="item.width">
+        :width="item.width"
+      >
+        <template slot-scope="scope">
+          <!-- 插槽优先：支持具名插槽 + 默认插槽 -->
+          <slot :name="item.prop" :row="scope">
+            {{ scope.row[item.prop] }}
+          </slot>
+        </template>
       </el-table-column>
     </el-table>
+    <!-- 可选分页器 -->
+    <div v-if="showPagination" class="table-pagination">
+      <el-pagination
+        layout="prev, pager, next"
+        :total="total"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        @current-change="handlePageChange"
+      />
+    </div>
   </div>
 </template>
 <script>
 export default {
   name: 'TableCard',
   props: {
-    tableData: { // 表格数据
+    tableData: {
       type: Array,
       default: () => []
     },
-    columns: { // 表格列
+    columns: {
       type: Array,
       default: () => []
     },
-    width: { // 表格宽度
+    width: {
       type: String,
       default: '100%'
+    },
+    // 分页配置
+    showPagination: {
+      type: Boolean,
+      default: false
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    // 单元格类名
+    cellClass: {
+      type: [String, Function],
+      default: ''
+    },
+    // 单元格样式
+    cellStyle: {
+      type: [Object, Function],
+      default: null
+    }
+  },
+  methods: {
+    getCellClass({ row, column, rowIndex, columnIndex }) {
+      if (typeof this.cellClass === 'function') {
+        return this.cellClass({ row, column, rowIndex, columnIndex });
+      }
+      return this.cellClass;
+    },
+    getCellStyles({ row, column, rowIndex, columnIndex }) {
+      if (typeof this.cellStyle === 'function') {
+        return this.cellStyle({ row, column, rowIndex, columnIndex });
+      }
+      return this.cellStyle;
+    },
+    handleRowClick(row, event, column) {
+      this.$emit('row-click', row, event, column);
+    },
+    handlePageChange(page) {
+      this.$emit('page-change', page);
     }
   }
 }