refactor(order): 优化订单详情展示逻辑

- 完善关联订单展示功能，新增 RelatedOrderTable 组件
- 优化订单下载逻辑，增加 onlyQuery 参数
- 调整订单状态判断条件
- 重构 buildBigServiceNames 方法，支持补充服务展示
- 优化表格数据处理和展示

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

src/utils/str/index.js

@@ -26,5 +26,6 @@ export function currencyFormat(val) {
 
 // 手机中间四位打码
 export function maskPhone(tel = '') {
+  if (!tel) return ''; 
   return tel.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
 }

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

@@ -229,8 +229,8 @@ export default {
   created () {
     const { id } = this.$route.params
     this.orderCode = id
-    this.doDownload()
-
+    // 传参：只验证是否可以下载电子协议
+    this.doDownload(1)
   },
   watch: {
     editdialogVisible(n) {
@@ -262,7 +262,7 @@ export default {
         return this.orderDetail?.orderData
       },
       orderAuditStatus () {
-        return this.orderDetailInfo?.audit_status < 0 && this.orderDetailInfo?.order_status !== -2
+        return this.orderDetailInfo?.audit_status <= 0 && this.orderDetailInfo?.order_status !== -2
       },
       newActionList () {
         const actions = {
@@ -534,8 +534,14 @@ export default {
         nameList.push(`.${suffix}`)
         return nameList.join('')
     },
-    async doDownload () { 
-      const { error_code, error_msg, data} = await ajaxGetContractPdf({ orderCode: this.orderCode })
+    async doDownload (onlyQuery) { 
+      const params = {
+        orderCode: this.orderCode,
+      }
+      if(onlyQuery) {
+        params.onlyQuery = onlyQuery
+      }
+      const { error_code, error_msg, data} = await ajaxGetContractPdf(params)
       if(error_code !== 0 && error_msg === '未知订单') {
         this.orderDownloadDisabled = true
       }
@@ -568,7 +574,8 @@ export default {
         }
         case '下载电子协议': {
           this.$emit('loading', true)
-          const { error_code: code, error_msg: msg, data} = this.downLoadInfo
+          await this.doDownload()
+          const { error_code: code, error_msg: msg, data} = this.downLoadInfo || {}
           if (code === 0) {
             const fileUrl = data
             const filename = this.getEContractFilename(fileUrl)

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

@@ -23,8 +23,8 @@
                 >
                 <div v-if="item.key === 'linkedOrder'" class="linkedOrder">
                   {{ item.label }}：
-                  <TableCard :span-method="objectSpanMethod" v-if="product[item.key].length" :table-data="product[item.key]" :columns="linkOrderColumns">
-                  </TableCard>
+                  <RelatedOrderTable v-if="product[item.key].length" :table-data="associationTableData">
+                  </RelatedOrderTable>
                   <span v-else>-</span>
                 </div>
                 <div v-else-if="item.key === 'subAccountCount'">
@@ -96,6 +96,10 @@ import newDetailModel from '@/views/order/components/new-detailModel.vue';
 import ServiceList from '../product-info-submodule/ServiceList.vue';
 import { showActivityCardRateModule } from "@/views/create-order/hooks/utils"
 import ContractMoneyTotalDesc from '@/views/create-order/components/contractMoneyTotalDesc.vue'
+import RelatedOrderTable from '../product-info-submodule/RelatedOrderTable.vue';
+import { dateFormatter } from '@/utils/globalFun'
+import { maskPhone } from '@/utils/str/index'
+import { findPaymentType } from '@/views/create-order/hooks/format'
 import { buySubjectOptions, paymentTypeOptions } from '@/views/create-order/data/options.js'
 import { mapState } from 'vuex';
 export default {
@@ -105,6 +109,7 @@ export default {
     TableCard,
     newDetailModel,
     ServiceList,
+    RelatedOrderTable,
     ContractMoneyTotalDesc
   },
   props: {
@@ -115,7 +120,6 @@ export default {
   },
   data() {
     return {
-      orderDetailInfo: {},
       productInfoItems: [
         { label: '活动产品', key: 'activityName', span: 1, condition: (product) => product.activityName },
         { label: '付费类型', key: 'service_type', filter: 'orderServiceType', span: 3},
@@ -194,23 +198,58 @@ export default {
   watch: {
     orderDetail: {
       handler(newVal) {
-        this.orderDetailInfo = newVal || {};
-        this.init();
+        this.beforeInit(newVal);
       },
       deep: true,
-      immediate: true
+      immediate: true,
     }
   },
   computed: {
     ...mapState({
       orderDetail: state => state.order.orderDetail,
-    })
+    }),
+    // 对options展开
+    associationTableData() {
+      const arr = []
+      this.productData.forEach(item => {
+        if (Array.isArray(item.linkedOrder) && item.linkedOrder.length > 0) {
+          item.linkedOrder.forEach(t => {
+            arr.push({
+              ...item,
+              linkedId: item.linkedId,
+              _linkedId: `${item.linkedId}-${t.order_code}`,
+              linkedOrderSplit: t,
+            })
+          })
+        } else {
+          // 关联订单只有1个的情况
+          arr.push({
+            ...item,
+            _linkedId: item.linkedId + '',
+          })
+        }
+      })
+      return arr.map(t => {
+        return {
+          ...t,
+          ...this.sortTableText(t),
+        }
+      })
+    },
+  },
+  mounted() {
+    this.beforeInit();
   },
   methods: {
+    beforeInit() {
+      this.$nextTick(() => {
+        this.init();
+      })
+    },
     async init() {
-      this.orderData = this.orderDetailInfo?.orderData || {};
-      let productData = this.orderDetailInfo?.productData || [];
-      const { _productArr } = this.orderDetailInfo || {}
+      this.orderData = this.orderDetail?.orderData || {};
+      let productData = this.orderDetail?.productData || [];
+      const { _productArr } = this.orderDetail || {}
 
       if (productData.length > 0) {
         // 使用 Promise.all 来并行处理每个 product 的异步操作
@@ -219,9 +258,9 @@ export default {
             try {
               const parsedFilter = this.parseProductFilter(product);
               const serviceIds = parsedFilter.serviceIds || [];
-
+              const supServiceIds = parsedFilter.supServiceIds || [];
               // 等待异步方法完成
-              const bigServiceNames = product.product_type === '大会员' ? await this.buildBigServiceNames(serviceIds) : '';
+              const bigServiceNames = product.product_type === '大会员' ? await this.buildBigServiceNames(serviceIds, supServiceIds) : '';
               const rate = this.calculateDiscountRate(product);
               const validityPeriod = this.calculateValidityPeriod(
                 parsedFilter,
@@ -265,6 +304,22 @@ export default {
       this.setTotalAmounts(productData);
       this.productData = productData;
     },
+    sortTableText(service) {
+      console.log('service', service)
+      const order = service.linkedOrderSplit || {}
+      return {
+        productTypeText: service.name || '-',
+        empowerCountText: service.empowerCount ? `${service.empowerCount}个` : '-',
+        serviceEndTimeText: service.serviceEndTime ? dateFormatter(service.serviceEndTime, 'yyyy-MM-dd') : '-',
+        buySubjectText: service.buySubject === 1 ? '个人' : '企业',
+        phone: service.phone,
+        short_phone: maskPhone(service.phone),
+        order_code: order.order_code || '-',
+        service_type: order.service_type || '-',
+        service_type_text: findPaymentType(order.service_type)?.label || '-',
+        create_time: order.create_time || '-',
+      }
+    },
     // 权限开通
     openPermissionActivation() {
       this.$refs.newDetailModel.permissionActivationShow = true;
@@ -277,7 +332,7 @@ export default {
     },
     // 设置红冲标识显示字段
     setRedPunchDisplay(product) { 
-      const { isUpCommission, isUpEnt, isUpCash } = this.orderDetailInfo?.redPunchData || {};
+      const { isUpCommission, isUpEnt, isUpCash } = this.orderDetail?.redPunchData || {};
       const RETURN_BOOL = {
         '合同金额': isUpCash,
         '销售费用': isUpCommission,
@@ -286,27 +341,52 @@ export default {
       }
       return RETURN_BOOL[product] || false;
     },
-    buildBigServiceNames(serviceIds) {
+    buildBigServiceNames(serviceIds, supServiceIds) {
       return new Promise((resolve) => {
         if (!serviceIds || serviceIds.length === 0) {
           resolve('');
           return;
         }
-
+        
         // 避免修改原始数组，创建新的整型数组
         const numericServiceIds = serviceIds.map(id => parseInt(id));
-
+        let sameValues = [], differentValues = [];
         this.$nextTick(() => {
           try {
+            
             const serviceListRef = this.$refs.serviceListRef;
             if (!serviceListRef || typeof serviceListRef.calcAlreadyBuyServiceNamesArr !== 'function') {
               resolve('');
               return;
             }
-
-            const res = serviceListRef.calcAlreadyBuyServiceNamesArr(numericServiceIds);
-            const serviceData = Array.isArray(res) ? res.join('、') : '';
-            resolve(serviceData);
+            if(supServiceIds && supServiceIds.length > 0) {
+              // 比较supServiceIds和serviceIds相同的值，并返回相同的值组成的数组，不同的值也返回一个数组
+              
+              // 已购服务
+              // 不同的值组成的数组
+              differentValues = serviceIds.filter(value => !supServiceIds.includes(value));
+              const differentValuesArr = differentValues.map(id => parseInt(id));
+              const baseServiceIdsArr = serviceListRef.calcAlreadyBuyServiceNamesArr(differentValuesArr);
+              console.log('differentValuesArr', differentValuesArr, baseServiceIdsArr)
+              const baseServiceData = Array.isArray(baseServiceIdsArr)? baseServiceIdsArr.join('、') : ''
+              // 补充服务
+              // 相同的值组成的数组
+              sameValues = supServiceIds.filter(value => serviceIds.includes(value));
+              const supServiceIdsArr = sameValues.map(id => parseInt(id));
+              const resSupServiceIdsArr = serviceListRef.calcAlreadyBuyServiceNamesArr(supServiceIdsArr);
+              console.log('supServiceIdsArr', supServiceIdsArr, resSupServiceIdsArr)
+              const resSupServiceData = Array.isArray(resSupServiceIdsArr)? resSupServiceIdsArr.join('、') : '';
+              
+              // 如果有补充服务，就拼接，如果没有补充服务，就不拼接，直接返回原已购服务名连接字符串
+              const supplement = resSupServiceData ? `【补充服务】：${resSupServiceData}` : ''
+              // 最终服务字符串：补充服务名称;原已购服务名称
+              const serviceStr = `${supplement};【原已购服务】：${baseServiceData}`
+              resolve(serviceStr);
+            } else {
+              const res = serviceListRef.calcAlreadyBuyServiceNamesArr(numericServiceIds);
+              const serviceData = Array.isArray(res) ? res.join('、') : '';
+              resolve(serviceData);
+            }
           } catch (error) {
             console.error('Error calculating service names:', error);
             resolve('');
@@ -468,7 +548,6 @@ export default {
 
     // 替代过滤器的通用方法
     getFilteredValue(value, filterName) {
-      console.log('getFilteredValue', value, filterName)
       // 判断value是否是数字，或者是字符串数字
       if (typeof value === 'number' || /^\d+$/.test(value)) {
         if(!value) return '0.00'
@@ -495,6 +574,7 @@ export default {
       return matchedOption ? matchedOption.label : val; // 如果未找到匹配项，返回原始值
     },
     objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      console.log('objectSpanMethod===', row, column, rowIndex, columnIndex);
       if (columnIndex <= 3) {
         if (rowIndex % 2 === 0) {
           return {

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

@@ -650,7 +650,6 @@ export default {
 
     // 替代过滤器的通用方法
     getFilteredValue(value, filterName) {
-      console.log('getFilteredValue', value, filterName)
       // 判断value是否是数字，或者是字符串数字
       if (typeof value === 'number' || /^\d+$/.test(value)) {
         if(!value) return '0.00'