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

<template>
  <div class="w-full h-full">
    <van-tabs v-model:active="tabActive" swipe-threshold="3">
      <van-tab title="客户信息" name="客户信息">
        <CustomerInfo :info="infoData" />
      </van-tab>
      <van-tab title="相关任务" name="相关任务">
        <RelatedTasks :infoList="relatedTasksList" />
      </van-tab>
      <van-tab title="相关联系人" name="相关联系人">
        <RelatedContacts :infoList="relatedContactsList" />
      </van-tab>
      <van-tab title="相关商机" name="相关商机">
        <RelatedBusinessOpportunities :infoList="relatedBusinessOpportunitiesList" />
      </van-tab>
      <van-tab title="相关销售订单" name="相关销售订单">
        <RelatedSalesOrders :infoList="relatedSalesOrdersList" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, onActivated, watch } from 'vue';
import { useLifecycle } from '@hooks/useCommon.js';
import { OBTAIN_CUSTOMER_DETAILS } from "@hooks/useApi"
import requests from "@common/requests";
import CustomerInfo from './customerInfo.vue';
import RelatedTasks from '../tasks/relatedTasks.vue';
import RelatedContacts from '../contacts/relatedContacts.vue';
import RelatedBusinessOpportunities from '../business/relatedBusinessOpportunities.vue';
import RelatedSalesOrders from '../order/relatedSalesOrders.vue';

const props = defineProps({
  info: {
    type: Object,
    required: true,
    default: () => ({})
  }
})
const tabActive = ref('客户信息');
const relatedTasksList = ref([]);
const relatedContactsList = ref([]);
const relatedBusinessOpportunitiesList = ref([]);
const relatedSalesOrdersList = ref([]);
const infoData = ref(props.info)
const timeout = ref(null);

watch(() => props.info, (newValue) => {
  tabActive.value = '客户信息';
  processingData(newValue.id)
})

function getDetailedData(id) {
  requests.post(OBTAIN_CUSTOMER_DETAILS, { id }).then(({ data }) => {
    infoData.value = data || {}
    relatedTasksList.value = data.tasks || []
    relatedContactsList.value = data.contacts || []
    relatedBusinessOpportunitiesList.value = data.businessOpportunitys || []
    relatedSalesOrdersList.value = data.salesOrders || []
  })
}

function processingData(id) {
  clearTimeout(timeout.value);
  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>