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

<template>
  <div class="w-full h-full">
    <van-tabs v-model:active="tabActive">
      <van-tab title="商机阶段" name="商机阶段">
        <BusinessOpportunityStage :info="infoData" @chnage="refreshData()" />
      </van-tab>
      <van-tab title="商机信息" name="商机信息">
        <BusinessInfo :info="infoData" />
      </van-tab>
      <van-tab title="相关产品" name="相关产品">
        <RelatedProducts :infoList="relatedProductsList" />
      </van-tab>
      <van-tab title="相关任务" name="相关任务">
        <RelatedTasks :infoList="relatedTasksList" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, onActivated, watch } from 'vue';
import { useLifecycle } from '@hooks/useCommon.js';
import { GET_BUSINESS_OPPORTUNITY_DETAILS } from "@hooks/useApi"
import requests from "@common/requests";
import RelatedProducts from '../product/relatedProducts.vue';
import BusinessInfo from './businessInfo.vue';
import RelatedTasks from '../tasks/relatedTasks.vue';
import BusinessOpportunityStage from './businessOpportunityStage.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 relatedProductsList = ref([]);
const relatedTasksList = ref([]);
const infoData = ref(props.info);
const timeout = ref(null);

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

function refreshData() {
  processingData(infoData.value.id)
}

function getBusinessOpportunityDetails(id) {
  requests.post(GET_BUSINESS_OPPORTUNITY_DETAILS, { id }).then(({ data }) => {
    infoData.value = data
    relatedProductsList.value = data.businessItemProducts || []
    relatedTasksList.value = data.taskList || []
  }).finally(() => {
    setTimeout(() => {
      clearToast()
    }, 200)
  })
}

function processingData(id) {
  clearTimeout(timeout.value);
  toastLoading('加载中...', 0)
  timeout.value = setTimeout(() => {
    getBusinessOpportunityDetails(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>