feat: 发票信息、退款信息，协议信息联调

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

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

@@ -12,29 +12,12 @@
             :data="tableData"
             style="width: 1108px">
             <el-table-column
-              prop="name"
-              label="操作人"
-              width="120">
-            </el-table-column>
-            <el-table-column
-              prop="date"
-              label="操作时间"
-              width="172">
-            </el-table-column>
-            <el-table-column
-              prop="type"
-              label="操作类型"
-              width="100">
-            </el-table-column>
-            <el-table-column
-              prop="status"
-              label="审核状态"
-              width="100">
-            </el-table-column>
-            <el-table-column
-              prop="desc"
-              label="审核备注"
-              width="616">
+              v-for="item in columns"
+              :key="item.key"
+              :prop="item.key"
+              :label="item.label"
+              :width="item.width"
+            >
             </el-table-column>
           </el-table>
         </div>
@@ -60,10 +43,92 @@ 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: 'desc'
+        }
+      ],
       tableData: [
         {
-          date: '2016-05-02',
-          name: '王小虎',
+          operator: '王小虎',
+          create_time: '2016-05-02',
           type: '一审',
           status: '已通过',
           desc: '审核备注'
@@ -81,6 +146,7 @@ export default {
       .cell {
         text-align: center;
         font-size: 14px;
+        font-weight: 400;
         color: $gray_10;
       }
       .has-gutter {

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

@@ -3,16 +3,16 @@
     <InfoCard title="协议签订信息">
       <div class="contract-info-card">
         <div class="contract-info-card-item">
-          协议签订状态：{{orderDetail?.contractStatus || '签协议'}}
+          协议签订状态：{{contractRes?.contract_status === 1 ? '签协议' : '不签协议'}}
         </div>
         <div class="contract-info-card-item">
-          签约主体：北京剑鱼信息技术有限公司
+          签约主体：{{ contractRes?.customer_name || '-' }}
         </div>
         <div class="contract-info-card-item">
-          协议签订时间：2024-12-03
+          协议签订时间：{{ contractRes?.contract_time || '-' }}
         </div>
         <div class="contract-info-card-item">
-          协议编号：XXXXXXXXXXXXX
+          协议编号：{{ contractRes?.contract_code || '-'  }}
         </div>
       </div>
     </InfoCard>
@@ -20,21 +20,21 @@
       <template #title>
         <div class="contract-info-card-title">
           <span>协议归档信息</span>
-          <button class="edit-btn">编辑</button>
+          <button v-if="contractRes?.contract_archive_status === 1" class="edit-btn">编辑</button>
         </div>
       </template>
       <div class="contract-info-card">
         <div class="contract-info-card-item">
-          协议签订状态：{{orderDetail?.contractStatus || '签协议'}}
+          协议归档状态：{{contractRes?.contract_archive_status === 1 ? '已归档' : '未归档' }}
         </div>
-        <div class="contract-info-card-item">
-          签约主体：北京剑鱼信息技术有限公司
+        <div class="contract-info-card-item" v-if="contractRes?.contract_archive_status === 1">
+          归档时间：{{ contractRes?.contract_archive_time || '-'  }}
         </div>
-        <div class="contract-info-card-item">
-          协议签订时间：2024-12-03
+        <div class="contract-info-card-item" v-if="contractRes?.contract_archive_status === 1">
+          归档份数：{{ contractRes?.contract_archive_num || '-'  }}
         </div>
-        <div class="contract-info-card-item">
-          协议编号：XXXXXXXXXXXXX
+        <div class="contract-info-card-item" v-if="contractRes?.contract_archive_status === 1">
+          归档协议：{{ contractRes?.contract_file_url || '-'  }}
         </div>
       </div>
     </InfoCard>
@@ -47,29 +47,29 @@
       </template>
       <div class="contract-info-card card-noflex">
         <div class="contract-info-card-item">
-          电子协议备注：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+          电子协议备注：{{ contractRes?.remark || '-'  }}
         </div>
         <div class="arow">
           <div class="contract-info-card-item">
-            电子协议类型：有电子章
+            电子协议类型：{{ contractRes?.seal_type === 1 ? '有电子章' : '无电子章'}}
           </div>
           <div class="contract-info-card-item">
-            协议甲方类型：个人
+            协议甲方类型：{{ contractRes?.partyA_type === 1? '企业' : '个人' }}
           </div>
         </div>
         <div class="contract-info-card-item">
-          协议甲方：个人
+          协议甲方：{{ contractRes?.partyA_name || '-' }}
         </div>
         <div class="arow">
           <div class="contract-info-card-item">
-            协议甲方联系人：XXXXXXX
+            协议甲方联系人：{{ contractRes?.partyA_person || '-'}}
           </div>
           <div class="contract-info-card-item">
-            协议乙方联系人：XXXXXXX
+            协议乙方联系人：{{ contractRes?.partyB_person || '-'}}
           </div>
         </div>
         <div class="contract-info-card-item">
-          协议甲方地址：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+          协议甲方地址：{{ contractRes?.partyA_address || '-' }}
         </div>
       </div>
     </InfoCard>
@@ -93,7 +93,7 @@ export default {
   },
   data() {
     return {
-
+      contractRes: this.orderDetail?.contractRes || {}
     }
   },
 }

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

@@ -0,0 +1,155 @@
+<template>
+  <div class="invoice-info">
+    <info-card title="开票概览">
+      <div class="invoice-info-content">
+        <div class="invoice-info-item">
+          开票状态：部分开票
+        </div>
+        <div class="invoice-info-item">
+          已开票金额：¥1,000.00
+        </div>
+        <div class="invoice-info-item">
+          未开票金额：¥5,000.00
+        </div>
+      </div>
+    </info-card>
+    <info-card>
+      <template #title>
+        开票详情<span style="font-size: 14px;line-height: 22px;">（共<span class="num-active"> 0 </span>条）</span>
+      </template>
+      <div class="invoice-info-detail">
+        <el-table
+        class="invoice-info-content-table"
+        border
+        :data="invoiceList"
+        style="width: 1108px">
+          <el-table-column
+            prop="invoiceID"
+            label="发票ID"
+            width="160"
+            align="center"
+          />
+          <el-table-column
+            prop="invoiceCode"
+            label="发票编号"
+            width="160"
+            align="center"
+          />
+          <el-table-column
+            prop="associationOrderMoney"
+            label="关联订单开票金额"
+            width="160"
+            align="center"
+          />
+          <el-table-column
+            prop="invoiceStatus"
+            label="发票状态"
+            width="120"
+            align="center"
+          />
+          <el-table-column
+            prop="invoiceQrCode"
+            width="188"
+            align="center"
+          >
+            <template slot="header" slot-scope="scope">
+              <div class="column-label-cell">
+                <div class="column-label-cell-title">开票二维码</div>
+                <div class="column-label-cell-tip">支持客户换开或查看发票</div>
+              </div>
+            </template>
+            <template slot="default" slot-scope="scope">
+              <span class="column-cell">{{ scope.row.invoiceQrCode }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="actionTime"
+            label="操作时间"
+          />
+          <el-table-column
+            prop="operator"
+            label="操作人"
+            width="160"
+            align="center"
+          />
+        </el-table>
+      </div>
+    </info-card>
+  </div>
+</template>
+<script>
+import InfoCard from '../../ui/InfoCard.vue';
+export default {
+  name: 'InvoiceInfo',
+  components: {
+    InfoCard
+  },
+  props: {
+    orderDetail: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      invoiceList: [{
+        invoiceID: '20231231',
+        invoiceCode: '20231231',
+        associationOrderMoney: '¥1,000.00',
+        invoiceStatus: '已申请',
+        invoiceQrCode: '查看',
+        actionTime: '2023-12-31 13:21:32',
+        operator: '张三'
+      }]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.invoice-info {
+  .invoice-info-content {
+    display: flex;
+    align-items: center;
+    .invoice-info-item {
+      min-width: 255px;
+      margin-right: 32px;
+      font-size: 14px;
+      line-height: 22px;
+      color: $gray_10;
+    }
+  }
+  // margin-top: 20px;
+  .invoice-info-content-table {
+    border-radius: 4px;
+    ::v-deep {
+      .cell {
+        text-align: center;
+        font-size: 14px;
+        color: $gray_10;
+      }
+      .has-gutter {
+        th {
+          background: #F9FAFB;
+          .cell {
+            padding: 0;
+            color: #686868;
+            font-weight: 400;
+            .column-label-cell-tip {
+              color: #2ABED1;
+            }
+          }
+        }
+      }
+      .column-cell {
+        color: $color_main;
+        cursor: pointer;
+      }
+    }
+  }
+  .num-active {
+    color: $color_main;
+  }
+}
+</style>

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

@@ -12,6 +12,14 @@
 export default {
   name: 'OrderActions',
   components: {},
+  props: { 
+    orders: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
   data() {
     return {
       actionList: [
@@ -57,14 +65,40 @@ export default {
         //     this.archiveProtocol() 
         //   } 
         // }
-      ]
-
+      ],
+      orDetails: {},
+      book: {}
     }
   },
   computed: {},
+  mounted() {
+    this.orDetails = this.orders?.res
+    this.book = this.orders?.filterData
+  },
   methods: {
     editOrder() {
-      console.log('editOrder') 
+        // const source = this.book?.source
+        // const product_type = this.orDetails?.product_type
+        // if (this.orDetails?.payType) {
+        //     if (this.orders.res.payType === '微信') {
+        //         this.orders.res.payTypes = 'wx'
+        //     } else if (this.orders.res.payType === '支付宝') {
+        //         this.orders.res.payTypes = 'ali'
+        //     } else {
+        //         this.orders.res.payTypes = 'transferAccounts'
+        //     }
+        // } else {
+        //     this.orders.res?.payTypes = 'transferAccounts'
+        // }
+        // if (source == 'qmx') { //线下
+        //     if (product_type && product_type.indexOf('大会员') != -1) {
+        //         // this.$refs.bigOrderEdit.show(this.orders)
+        //     } else {
+        //         // this.$refs.otherOrderEdit.show(this.orders)
+        //     }
+        // } else { //线上
+        //     // this.$refs.onlineOrderEdit.show(this.orders)
+        // }
     },
     cancelOrder() {
       console.log('cancelOrder') 

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

@@ -5,7 +5,7 @@
         订单编号: {{ orderInfo.order_code }}
       </div>
       <div class="order-desc-card-info-item">
-        购买主体: 个人
+        购买主体: {{ orderInfo.buy_subject == '1' ? '个人' : '企业' }}
       </div>
       <div class="order-desc-card-info-item">
         联系人: 张三

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

@@ -88,10 +88,13 @@
             label="提交时间">
           </el-table-column>
           <el-table-column
-            cell-class-name="payvoucher-column-cell"
             prop="payVoucher"
             label="支付凭证"
-          />
+          >
+          <template #default="scope">
+            <span class="column-cell">{{ scope.row.payVoucher }}</span>
+          </template>
+          </el-table-column>
           <el-table-column
             prop="processStatus"
             label="审核状态"
@@ -107,7 +110,11 @@
           <el-table-column
             prop="action"
             label="操作"
-          />
+          >
+          <template #default="scope">
+            <span class="column-cell">{{ scope.row.action }}</span>
+          </template>
+          </el-table-column>
         </el-table>
       </div>
     </InfoCard>
@@ -189,6 +196,7 @@ export default {
         text-align: center;
         font-size: 14px;
         color: $gray_10;
+        font-weight: 400;
       }
       .has-gutter {
         th {
@@ -199,6 +207,10 @@ export default {
           }
         }
       }
+      .column-cell {
+        color: $color_main;
+        cursor: pointer;
+      }
     }
   }
   .num-active {

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

@@ -0,0 +1,92 @@
+<template>
+  <div class="payment-plan">
+    <InfoCard>
+      <template #title>
+        <span>回款计划</span>
+        <span style="font-size: 14px;line-height: 22px;">
+          （共<span class="num-active"> 0 </span>条
+          <span>预计回款</span>
+          <span class="num-active"> ￥58000 </span>
+          <span> 实际回款</span>
+          <span class="num-active"> ￥580 </span>）
+        </span>
+      </template>
+      <div class="payment-plan-content">
+        <el-table
+          class="payment-plan-content-table"
+          border
+          :data="paymentPlanList"
+          style="width: 1108px">
+          <el-table-column
+            prop="number"
+            label="序号"
+            width="280">
+          </el-table-column>
+          <el-table-column
+            prop="expectedReturnTime"
+            label="预计回款时间"
+          />
+          <el-table-column
+            prop="expectedReturnAmount"
+            label="预计回款金额"
+          />
+        </el-table>
+      </div>
+    </InfoCard>
+  </div>
+</template>
+<script>
+import InfoCard from '../../ui/InfoCard.vue'
+export default {
+  name: 'PaymentPlan',
+  components: {
+    InfoCard
+  },
+  props: {
+    orderDetail: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      paymentPlanList: [
+        {
+          number: '1',
+          expectedReturnTime: '2020-01-01',
+          expectedReturnAmount: '￥58000'
+        }
+      ] 
+    } 
+  }
+}
+</script>
+<style scoped lang="scss">
+.payment-plan {
+  .payment-plan-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;
+  }
+}
+</style>

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

@@ -0,0 +1,141 @@
+<template>
+  <div class="performmace-belongs">
+    <InfoCard title="最新业绩归属">
+      <div class="performmace-belongs-content">
+        <el-table
+          class="performmace-info-content-table"
+          border
+          :data="newPerformmaceBelongsList"
+          style="width: 1108px">
+          <el-table-column
+            prop="salesMan"
+            label="销售人员">
+          </el-table-column>
+          <el-table-column
+            prop="performanceBelongDept"
+            label="业绩归属部门"
+          />
+          <el-table-column
+            prop="salesPerformance"
+            label="销售业绩"
+          />
+          <el-table-column
+            prop="salesChannel"
+            label="销售渠道"
+          />
+        </el-table>
+      </div>
+    </InfoCard>
+    <InfoCard>
+      <template #title>
+        业绩变更记录<span style="font-size: 14px;line-height: 22px;">（共<span class="num-active"> 0 </span>条）</span>
+        </template>
+      <div class="performmace-belongs-content">
+        <el-table
+        class="performmace-info-content-table"
+        border
+        :data="performanceChangeList"
+        style="width: 1108px">
+          <el-table-column
+            prop="operator"
+            label="操作人"
+          />
+          <el-table-column
+            prop="actionTime"
+            label="操作时间">
+          </el-table-column>
+          <el-table-column
+            prop="salesMan"
+            label="销售人员"
+          />
+          <el-table-column
+            prop="salesPerformanceChange"
+            label="销售业绩变动"
+          />
+          <el-table-column
+            prop="performanceBelongDept"
+            label="业绩归属部门"
+          />
+          <el-table-column
+            prop="performanceStatisticsTime"
+            label="业绩统计时间"
+          />
+          <el-table-column
+            prop="salesChannel"
+            label="销售渠道"
+          />
+          <el-table-column
+            prop="performanceChangeReason"
+            label="变更原因"
+          />
+        </el-table>
+      </div>
+    </InfoCard>
+  </div>
+</template>
+<script>
+import InfoCard from '../../ui/InfoCard.vue';
+export default {
+  name: 'PerformmaceBelongs',
+  components: { InfoCard },
+  props: {
+    orderDetail: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    }, 
+  },
+  data() {
+    return {
+      newPerformmaceBelongsList: [
+        {
+          salesMan: '姓名',
+          performanceBelongDept: '销售一部/电销部',
+          salesPerformance: '¥5,000.00',
+          salesChannel: '电话',
+        }
+      ],
+      performanceChangeList: [
+        {
+          operator: '姓名',
+          actionTime: '2021-05-28 15:30:00',
+          salesMan: '姓名',
+          salesPerformanceChange: '¥5,000.00',
+          performanceBelongDept: '销售一部/电销部',
+          performanceStatisticsTime: '2021-05-28 15:30:00',
+          salesChannel: '电话',
+          performanceChangeReason: '备注'
+        }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.performmace-belongs {
+  .performmace-info-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;
+  }
+}
+</style>

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

@@ -0,0 +1,61 @@
+<template>
+  <div class="refund-info">
+    <InfoCard title="退款概览">
+      <div class="refund-info-content">
+        <div class="refund-info-item">
+          退款状态：部分退款
+        </div>
+        <div class="refund-info-item">
+          退款时间：2024-12-24 14:19:38
+        </div>
+        <div class="refund-info-item">
+          退款金额：¥1,949.70
+        </div>
+        <div class="refund-info-item">
+          退款原因：产品购买错误
+        </div>
+        <div class="refund-info-item">
+          退款备注：----
+        </div>
+      </div>
+    </InfoCard>
+  </div>
+</template>
+<script>
+import InfoCard from '../../ui/InfoCard.vue';
+export default {
+  name: 'RefundInfo',
+  components: {
+    InfoCard 
+  },
+  props: {
+    orderDetail: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  }, 
+}
+</script>
+<style lang="scss" scoped>
+.refund-info {
+  .refund-info-content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    .refund-info-item {
+      min-width: 255px;
+      margin-right: 32px;
+      margin-bottom: 10px;
+      font-size: 14px;
+      line-height: 22px;
+      color: $gray_10;
+    }
+  }
+}
+</style>

src/views/create-order/order-detail.vue

@@ -11,7 +11,7 @@
           </el-tab-pane>
         </el-tabs>
         <div class="order-action-container">
-          <OrderActions />
+          <OrderActions :orders="orderDetail" />
         </div>
         <div class="order-desc-container">
           <OrderDescInfo :orderInfo="orderDetail?.orderData" />
@@ -32,6 +32,10 @@ import OrderDescInfo from './components/order-detail-submodule/OrderDescInfo.vue
 import OrderAuditRecords from './components/order-detail-submodule/AuditRecords.vue'
 import ContractInfo from './components/order-detail-submodule/ContractInfo.vue'
 import PaymentInfo from './components/order-detail-submodule/PaymentInfo.vue'
+import InvoiceInfo from './components/order-detail-submodule/InvoiceInfo.vue'
+import RefundInfo from './components/order-detail-submodule/RefundInfo.vue'
+import PerformanceBelongs from './components/order-detail-submodule/PerformanceBelongs.vue'
+import PaymentPlan from './components/order-detail-submodule/PaymentPlan.vue'
 import { ajaxGetOrderDetail } from '@/api/modules/index'
 
 export default {
@@ -42,7 +46,11 @@ export default {
     OrderDetailCard,
     OrderAuditRecords,
     ContractInfo,
-    PaymentInfo
+    PaymentInfo,
+    InvoiceInfo,
+    RefundInfo,
+    PerformanceBelongs,
+    PaymentPlan
   },
   data() {
     return {
@@ -66,10 +74,12 @@ export default {
           {
             label: '业绩归属信息',
             name: 'performanceBelongs',
+            componentName: 'PerformanceBelongs'
           },
           {
             label: '回款计划',
             name: 'paymentPlan',
+            componentName: 'PaymentPlan'
           },
           {
             label: '回款信息',
@@ -79,10 +89,12 @@ export default {
           {
             label: '发票信息',
             name: 'invoiceInfo',
+            componentName: 'InvoiceInfo'
           },
           {
             label: '退款信息',
             name: 'refundInfo',
+            componentName: 'RefundInfo'
           },
           {
             label: '红冲记录',