manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/pageComponents/order/detail.vue

<template>
  <div class="w-full h-full">
    <van-tabs v-model:active="tabActive" :swipe-threshold="3">
      <van-tab title="销售订单信息" name="销售订单信息">
        <OrderInfo :info="infoData" />
      </van-tab>
      <van-tab title="相关任务" name="相关任务">
        <RelatedTasks :infoList="relatedTasksList"  />
      </van-tab>
      <van-tab title="相关产品" name="相关产品">
        <RelatedProducts :infoList="relatedProductsList" />
      </van-tab>
      <van-tab title="回款" name="回款">
        <PaymentCollection :info="infoData" @changePaymentCollection="changePaymentCollection" />
      </van-tab> 
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, onActivated, watch } from 'vue';
import { useLifecycle } from '@hooks/useCommon.js';
import { GET_ORDER_RELATED_TASKS, OBTAIN_ORDER_RELATED_PRODUCTS, SALES_ORDER_DETAILS } from "@hooks/useApi"
import requests from "@common/requests";
import OrderInfo from './orderInfo.vue';
import RelatedTasks from '../tasks/relatedTasks.vue';
import RelatedProducts from '../product/relatedProducts.vue';
import PaymentCollection from './paymentCollection.vue';
import useShowToast from '@hooks/useToast'

const { toastSuccess, toastLoading, toastFail, toastText, clearToast } = useShowToast()
const props = defineProps({
  info: {
    type: Object,
    required: true,
    default: () => ({})
  }
})
const tabActive = ref('销售订单信息');
const relatedTasksList = ref([]);
const relatedProductsList = ref([]);
const infoData = ref(props.info);
const timeout = ref(null);

watch(() => props.info, (newValue) => {
  tabActive.value = '销售订单信息';
  processingData(newValue.id)
})

function getDetailedData(id) {
  requests.post(SALES_ORDER_DETAILS, { id }).then(({ data }) => {
    infoData.value = data || []
  })
  requests.post(GET_ORDER_RELATED_TASKS, { id }).then(({ data }) => {
    relatedTasksList.value = data || []
  })
  requests.post(OBTAIN_ORDER_RELATED_PRODUCTS, { id }).then(({ data }) => {
    const list = (data || []).map((item) => {
      const { id, productName, productCode, unit, unitName, typeName, type, price, inventory, orderProductDetail } = item
      return {
        id, productId: id, productName, productCode, unit, unitName, typeName, type, price, inventory,
        productType: typeName,
        quantity: +orderProductDetail?.num,
        discount: +orderProductDetail?.discount,
        sellingPrice: +orderProductDetail?.sealPrice,
        totalPrice: +orderProductDetail?.totalPrice
      }
    })
    relatedProductsList.value = list
  }).finally(() => {
    setTimeout(() => {
      clearToast()
    }, 200)
  })
}

function changePaymentCollection(id) {
  getDetailedData(id)
}

function processingData(id) {
  clearTimeout(timeout.value);
  toastLoading('加载中...', 0)
  timeout.value = setTimeout(() => {
    getDetailedData(id)
  }, 100);
}

useLifecycle({
  init: () => {
    tabActive.value = '销售订单信息';
    processingData(props.info.id)
  },
  load: () => {
    tabActive.value = '销售订单信息';
    processingData(props.info.id)
  },
  unload: () => {
    clearTimeout(timeout.value)
  }
});
</script>

<style lang='scss' scoped>
/* 样式代码 */
</style>