fix: 详情页联调

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

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

@@ -8,10 +8,10 @@
         购买主体: {{ orderInfo.buy_subject == '1' ? '个人' : '企业' }}
       </div>
       <div class="order-desc-card-info-item">
-        联系人: {{ orderInfo.user_nickname || '-' }}
+        联系人: {{ orderInfo.personName || '-' }}
       </div>
       <div class="order-desc-card-info-item">
-        联系人手机号: {{ orderInfo.user_phone || '-' }}
+        联系人手机号: {{ orderInfo.personPhone || '-' }}
       </div>
     </div>
     <div class="order-desc-card-company">

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

@@ -10,7 +10,13 @@
     <InfoCard title="产品信息">
       <div class="order-detail-card-content">
         <div class="order-detail-card-item" v-for="(item, index) in productInfoTotalItems" :key="index">
-          {{ item.label }}：{{ getFilteredValue(orderData[item.key], item.filter ) || '-' }}
+          <div v-if="item.key === 'pure_amount'">
+            {{ item.label }}：￥{{ formatNumber(orderData[item.key]) || '-' }}
+          </div>
+          <div v-else-if="item.key === 'commission'">
+            {{ item.label }}：￥{{ formatNumber(orderData[item.key]) || '-' }}
+          </div>
+          <div v-else>{{ item.label }}：{{ getFilteredValue(orderData[item.key], item.filter ) || '-' }}</div>
         </div>
       </div>
       <div class="order-detail-product-list">
@@ -32,7 +38,24 @@
                   >
                   <div v-if="item.key === 'linkedOrder'" class="linkedOrder">
                     {{ item.label }}：
-                    <TableCard :span-method="objectSpanMethod" :table-data="product[item.key]" :columns="linkOrderColumns"></TableCard>
+                    <TableCard v-if="product[item.key].length" :table-data="product[item.key]" :columns="linkOrderColumns">
+                      <template v-slot:orderArr="{ row }">
+                        <el-table
+                          :data="row.orderArr"
+                          border
+                          style="width: 100%">
+                          <el-table-column 
+                            v-for="(smallItem, i) in orderColumns"
+                            :key="i"
+                            :prop="smallItem.prop"
+                            :label="smallItem.label"
+                            :width="smallItem.width"
+                            >
+                          </el-table-column>
+                        </el-table>
+                      </template>
+                    </TableCard>
+                    <span v-else>-</span>
                   </div>
                   <div v-else-if="item.key === 'final_price' || item.key === 'original_price'">
                     {{ item.label }}：￥{{ getFilteredValue(product[item.key], item.filter) || '-' }}
@@ -82,11 +105,12 @@ export default {
   },
   data() {
     return {
+      orderDetailInfo: {},
       basicInfoItems: [
         { label: '创建人', key: 'create_person' },
         { label: '创建时间', key: 'create_time' },
         { label: '最近更新人', key: 'last_update_person' },
-        { label: '最近更新时间', key: 'last_update_time' },
+        { label: '最近更新时间', key: 'autoUpdate' },
         { label: '订单审核状态', key: 'audit_status', filter: 'orderCoursed' },
         { label: '订单状态', key: 'order_status', filter: 'orderStatus' }
       ],
@@ -105,19 +129,18 @@ export default {
         { label: '0元订单类型', key: 'zero_type'}
       ],
       productInfoItems: [
-        { label: '活动产品', key: 'activity_code', span: 1 },
+        { label: '活动产品', key: 'activity_code', span: 1, condition: (product) => product.activity_code },
         { label: '付费类型', key: 'service_type', filter: 'orderServiceType', span: 3},
-        { label: '升级内容', key: 'supServicelds', span: 3, condition: (product) => product.product_type === '大会员' },
+        { label: '升级内容', key: 'supServicelds', span: 3, condition: (product) => product.supServicelds },
         { label: '产品规格', key: 'productName', span: 3},
-        { label: '服务列表', key: 'bigServiceNames', span: 1},
+        { label: '服务列表', key: 'bigServiceNames', span: 1, condition: (product) => product.productName.includes('自定义') &&  product.product_code === 'dyh001'},
         { label: '有效周期', key: 'validity_period', span: 1},
         { label: '合同金额', key: 'final_price', span: 3},
         { label: '标准售价', key: 'original_price', span: 3},
         { label: '折扣率', key: 'rate', span: 3},
         { label: '子账号数量', key: 'subAccountCount', span: 1, condition: (product) => product.product_type === 'VIP订阅' && product.buyAccountCount && product.giftAccountCount },
         { label: '主账号数量', key: 'mainAccountCount', span: 1, condition: (product) => product.product_type === 'VIP订阅' },
-        { label: '关联订单', key: 'linkedOrder', span: 1, condition: (product) => product.linkedOrder && product.linkedOrder.length > 0},
-
+        { label: '关联订单', key: 'linkedOrder', span: 1},
         { label: '开通权益手机号', key: 'phone', span: 3},
         { label: '服务开始时间', key: 'service_starttime', span: 3},
         { label: '服务结束时间', key: 'service_endtime', span: 3}
@@ -146,80 +169,82 @@ export default {
           width: 80
         },
         {
-          prop: 'order_code',
-          label: '订单编号',
-          width: 154
-        },
-        {
-          prop: 'service_type',
-          label: '付费类型',
-          width: 80
-        },
-        {
-          prop: 'create_time',
-          label: '创建时间',
-          width: 102
-        },
+          prop: 'orderArr',
+          label: '订单详情',
+          width: 336
+        }
+      ],
+      orderColumns: [
+        { prop:'order_code', label: '订单编号', width: 154 },
+        { prop:'service_type', label: '付费类型', width: 80 },
+        { prop:'create_time', label: '创建时间', width: 102 } 
       ],
       linkOrderList: [
-        {
-          name: 'VIP会员',
-          empowerCount: 1,
-          serviceEndTime: '2023-05-01 00:00:00',
-          buySubject: '个人',
-          order_code: '2023050',
-          service_type: '包年包月',
-          create_time: '2023-05-01 00:00:00'
-        },
-        {
-          name: 'VIP会员',
-          empowerCount: 1,
-          serviceEndTime: '2023-05-01 00:00:00',
-          buySubject: '个人',
-          order_code: '2023050',
-          service_type: '包年包月',
-          create_time: '2023-05-01 00:00:00'
-        },
-        {
-          name: 'VIP会员2',
-          empowerCount: 1,
-          serviceEndTime: '2023-05-01 00:00:00',
-          buySubject: '个人',
-          order_code: '2023050',
-          service_type: '包年包月',
-          create_time: '2023-05-01 00:00:00'
-        },{
-          name: 'VIP会员3',
-          empowerCount: 1,
-          serviceEndTime: '2023-05-01 00:00:00',
-          buySubject: '个人',
-          order_code: '2023050',
-          service_type: '包年包月',
-          create_time: '2023-05-01 00:00:00'
-        }
+      //   {
+      //     name: 'VIP会员1',
+      //     empowerCount: 1,
+      //     serviceEndTime: '2023-05-01 00:00:00',
+      //     buySubject: '个人',
+      //     orderArr: [
+      //       {
+      //         order_code: '2023050',
+      //         service_type: '包年包月',
+      //         create_time: '2023-05-01 00:00:00'
+      //       },
+      //       {
+      //         order_code: '2023051',
+      //         service_type: '包年包月',
+      //         create_time: '2023-05-01 00:00:00'
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     name: 'VIP会员2',
+      //     empowerCount: 1,
+      //     serviceEndTime: '2023-05-01 00:00:00',
+      //     buySubject: '个人',
+      //     orderArr: [
+      //       {
+      //         order_code: '2023052',
+      //         service_type: '包年包月',
+      //         create_time: '2023-05-01 00:00:00'
+      //       }
+      //     ]
+      //   }
       ],
-
+      spanMap: {}, // 存储每个 product.linkedOrder 中每个 orderArr 的起始 index 和 length
+      spanMapBuilt: false // 标记 spanMap 是否已经构建
     }
   },
-  mounted() {
+  async mounted() {
+    this.orderDetailInfo =  await this.orderDetail || {}
     this.init()
   },
   computed: {},
   methods: {
     init() {
-      this.orderData = this.orderDetail?.orderData || {}
-      if(this.orderDetail?.productData && this.orderDetail.productData.length > 0) {
-        this.productData = this.orderDetail.productData.map(product => { 
+      this.orderData = this.orderDetailInfo?.orderData || {}
+      if(this.orderDetailInfo?.productData && this.orderDetailInfo.productData.length > 0) {
+        this.productData = this.orderDetailInfo.productData.map(product => { 
           try {
-            const parsedFilter = JSON.parse(product.filter || '{}')
+            let parsedFilter = {}
+            if(typeof product.filter === 'string' && product.filter !== '') {
+              parsedFilter = JSON.parse(product?.filter || '{}')
+            }
             // 计算折扣率
-            const rate = (div(product.final_price, product.original_price) * 100).toFixed(2) + '%'
+            let rate = 0
+            if(product.original_price) {
+              rate = (div(product.final_price, product.original_price) * 100).toFixed(2) + '%'
+            } else {
+              rate = '无法计算'
+            }
             // 设置有效周期
             product.validity_period = this.calculateValidityPeriod(
               parsedFilter.buy_cycle,
               parsedFilter.buy_type,
               parsedFilter.give_cycle,
-              parsedFilter.give_type
+              parsedFilter.give_type,
+              product
             );
             // 设置子账号数量
             if (product.product_type === 'VIP订阅') {
@@ -230,7 +255,7 @@ export default {
             // 设置合同金额和标准售价
             product.final_price = (product.final_price / 100).toFixed(2)
             product.original_price = (product.original_price / 100).toFixed(2)
-            // product.linkedOrder = this.linkOrderList
+            product.linkedOrder = this.linkOrderList
             return Object.assign(product, { filter: parsedFilter,  rate});
           } catch (error) {
             console.error('JSON 解析失败:', error);
@@ -243,13 +268,10 @@ 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.commission = '￥' + (this.orderData.commission / 100).toFixed(2)
       // 计算折扣率总和
       this.orderData.rate_total = (div(totalFinalPrice, totalOriginalPrice) * 100).toFixed(2) + '%'
-      this.productData = this.orderDetail?.productData || []
+      this.productData = this.orderDetailInfo?.productData || []
+      this.buildSpanMap()
     },
     shouldRenderItem(item, product) {
       if (item.condition && typeof item.condition === 'function') {
@@ -261,7 +283,7 @@ export default {
       }
       return true;
     },
-    calculateValidityPeriod(buyCycle, buyType, giveCycle, giveType) {
+    calculateValidityPeriod(buyCycle, buyType, giveCycle, giveType, product) {
       let totalMonths = 0;
       let buyText = '';
       let giveText = '';
@@ -305,8 +327,8 @@ export default {
       totalMonths = buyResult.months + giveResult.months;
       buyText = buyResult.text;
       giveText = giveResult.text;
-
-      return `付费${buyText}，赠送${giveText}，合计<span>${totalMonths.toFixed(0)}</span>个月（全额回款当日开通）`;
+      const returned_open = product.returned_open === '1' ? '（全额回款当日开通）' : '';
+      return `付费${buyText}，赠送${giveText}，合计<span>${totalMonths.toFixed(0)}</span>个月${returned_open}`;
     },
     getValidityPeriodHtml(product, item) {
       const label = item.label;
@@ -315,14 +337,20 @@ export default {
     },
     // 替代过滤器的通用方法
     getFilteredValue(value, filterName) {
-      if (!filterName || !value) return value || '-';
+      if (!filterName) return value || '-';
       return this[filterName](value);
     },
     setProductTitle(product, index) {
-      const tactics = product.tactics === '2' ? '赠送' : '【购买】';
+      const tactics = product.tactics === '2' ? '【赠送】' : '【售卖】';
       return `${index + 1}.${tactics}${product.product_type}`;
     },
+    formatNumber(num, x = 2) {
+      num = Number(num) || 0
+      return (num / 100).toFixed(x)
+    },
     orderCoursed(val) {
+      console.log(val, 'val')
+
         if (val == 0) {
             return '待提交'
         } else if (val == 1) {
@@ -342,7 +370,9 @@ export default {
       return matchedOption ? matchedOption.label : val; // 如果未找到匹配项，返回原始值
     },
     orderStatus(val) {
-        if (val == 0) {
+        console.log(val, 'val111')
+
+        if (!val || val == 0) {
             return '未完成'
         } else if (val == 1) {
             return '已完成'
@@ -356,20 +386,54 @@ export default {
             return '已退款'
         }
     },
+    buildSpanMap() {
+      const { productData } = this;
+      const spanMap = {};
+      let currentIndex = 0;
+
+      productData.forEach((product) => {
+        const linkedOrder = product.linkedOrder || [];
+        linkedOrder.forEach((item) => {
+          const orderArr = item.orderArr || [];
+          const len = orderArr.length;
+
+          if (len > 0) {
+            spanMap[currentIndex] = len; // 当前主行对应子行数
+          }
+
+          currentIndex += len;
+        });
+      });
+
+      this.spanMap = spanMap;
+    },
     objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-      if (columnIndex === 0) {
-        if (rowIndex % 2 === 0) {
-          return {
-            rowspan: 2,
-            colspan: 1
-          };
-        } else {
-          return {
-            rowspan: 0,
-            colspan: 0
-          };
-        }
+      if (columnIndex >= 4) return { rowspan: 1, colspan: 1 };
+
+      // 构建或获取已缓存的 spanMap
+      if (!this.spanMapBuilt) {
+        this.buildSpanMap();
+        this.spanMapBuilt = true;
       }
+
+      const spanInfo = this.spanMap[rowIndex];
+
+      if (spanInfo && spanInfo > 0) {
+        return {
+          rowspan: spanInfo,
+          colspan: 1
+        };
+      } else if (spanInfo === 0) {
+        return {
+          rowspan: 0,
+          colspan: 0
+        };
+      }
+
+      return {
+        rowspan: 1,
+        colspan: 1
+      };
     }
   }
 }

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

@@ -66,32 +66,32 @@ export default {
         {
           label: '回款时间',
           prop: 'paytime',
-          width: '112'
-        },
-        {
-          label: '回款金额',
-          prop: 'paymoney',
-          width: '112'
+          width: '150'
         },
+        // {
+        //   label: '回款金额',
+        //   prop: 'paymoney',
+        //   width: '112'
+        // },
         {
           label: '支付方式',
           prop: 'paytype',
-          width: '90'
-        },
-        {
-          label: '手续费',
-          prop: 'commission',
-          width: '90'
+          width: '112'
         },
+        // {
+        //   label: '手续费',
+        //   prop: 'commission',
+        //   width: '90'
+        // },
         {
           label: '回款银行',
           prop: 'bank',
-          width: '150'
+          width: '210'
         },
         {
           label: '支付单号/银行流水号',
           prop: 'orderNumber',
-          width: '150'
+          width: '210'
         },
         {
           label: '支付户名',
@@ -106,7 +106,7 @@ export default {
         {
           label: '操作时间',
           prop: 'actionTime',
-          width: '112'
+          width: '134'
         },
         {
           label: '操作人',
@@ -117,9 +117,9 @@ export default {
       paymentDetailList: [
         {
           paytime: '2023-12-31 13:21:32',
-          paymoney: '¥2,000.00',
+          // paymoney: '¥2,000.00',
           paytype: '微信支付',
-          commission: '¥100.00',
+          // commission: '¥100.00',
           bank: '广发银行北京顺义支行',
           orderNumber: '094640260820',
           payAccountName: '张三',

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

@@ -21,7 +21,11 @@
           ]"
           :width="'1108px'"
           :cellClass="'payment-plan-content-table'"
-        ></TableCard>
+        >
+          <template v-slot:money="{row}">
+            <span>￥{{ formatNumber(row.row.money) }}</span>
+          </template>
+        </TableCard>
       </div>
     </InfoCard>
   </div>
@@ -29,7 +33,6 @@
 <script>
 import InfoCard from '../../ui/InfoCard.vue'
 import TableCard from '../../ui/TableCard.vue'
-import { roundToTwoDecimals } from '@/utils/number/index.js'
 export default {
   name: 'PaymentPlan',
   components: {
@@ -58,17 +61,18 @@ export default {
     this.returnMoneyPlant = this.orderDetail?.returnMoneyPlant || {}
     const list = this.orderDetail?.returnMoneyPlant?.list || []
     if (list.length) {
-      list.forEach(item => {
-        item.money = '￥' + this.formatNumber(item.money || 0)
-      });
-      this.paymentPlanList = list[0].plantList || []
+      let plantList = list[0].plantList
+      if(plantList) {
+        plantList = JSON.parse(plantList)
+        this.paymentPlanList = plantList || []
+      }
     } else {
       this.paymentPlanList = [] 
     }
   },
   methods: {
     formatNumber(num, x = 2) {
-      return roundToTwoDecimals(num, x)
+      return (num / 100).toFixed(x)
     }
   }
 }

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

@@ -2,43 +2,41 @@
   <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
-            v-for="(item, index) in newPerformmaceBelongsColumns"
-            :key="index"
-            :prop="item.prop"
-            :label="item.label">
-          </el-table-column>
-        </el-table>
+        <TableCard
+          :table-data="newPerformmaceBelongsList"
+          :columns="newPerformmaceBelongsColumns"
+          width="1108px"
+        >
+          <template v-slot:money="{ row }">
+            <span>￥{{ formatNumber(row.row.money) }}</span>
+          </template>
+        </TableCard>
       </div>
     </InfoCard>
     <InfoCard title="业绩变更记录" :is-show-length="true" :length="performanceChangeList.length || 0">
       <div class="performmace-belongs-content">
-        <el-table
-        class="performmace-info-content-table"
-        border
-        :data="performanceChangeList"
-        style="width: 1108px">
-          <el-table-column
-            v-for="(item, index) in performanceChangeColumns"
-            :key="index"
-            :prop="item.prop"
-            :label="item.label"
-          />
-        </el-table>
+        <TableCard
+          :table-data="performanceChangeList"
+          :columns="performanceChangeColumns"
+          width="1108px"
+        >
+          <template v-slot:change_value="{ row }">
+            <span>￥{{ formatNumber(row.row.change_value) }}</span>
+          </template>
+        </TableCard>
       </div>
     </InfoCard>
   </div>
 </template>
 <script>
 import InfoCard from '../../ui/InfoCard.vue';
+import TableCard from '../../ui/TableCard.vue';
 export default {
   name: 'PerformmaceBelongs',
-  components: { InfoCard },
+  components: {
+    InfoCard,
+    TableCard
+  },
   props: {
     orderDetail: {
       type: Object,
@@ -107,7 +105,7 @@ export default {
           operator: '姓名',
           createtime: '2021-05-28 15:30:00',
           name: '姓名',
-          change_value: '¥5,000.00',
+          change_value: 5000.00,
           saler_dept: '销售一部/电销部',
           statistics_time: '2021-05-28 15:30:00',
           distribution_channel: '电话',
@@ -120,6 +118,11 @@ export default {
     console.log(this.orderDetail)
     this.newPerformmaceBelongsList = this.orderDetail?.saleDataRes?.saleFinal?.list || []
     this.performanceChangeList = this.orderDetail?.saleDataRes?.saleRecord || []
+  },
+  methods: {
+    formatNumber(num, x = 2) {
+      return (num / 100).toFixed(x)
+    }
   }
 }
 </script>

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

@@ -18,8 +18,10 @@
         </div>
       </div>
       <div class="order-detail-content">
-        <component :order-detail="orderDetail" v-if="currentShowComponentName && orderApiStatus" :is="currentShowComponentName"></component>
-        <div v-else>未配置动态组件</div>
+        <KeepAlive>
+          <component :order-detail="orderDetail" v-if="currentShowComponentName && orderApiStatus" :is="currentShowComponentName"></component>
+          <div v-else>未配置动态组件</div>
+        </KeepAlive>
       </div>
     </div>
   </div>