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

<template>
  <div class="w-full h-full">
    <van-tabs v-model:active="tabActive">
      <van-tab title="线索信息">
        <ThreadInfo :info="infoData" />
      </van-tab>
      <van-tab title="相关任务" name="相关任务">
        <RelatedTasks :infoList="relatedTasksList" :key="componentKey" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useLifecycle } from '@hooks/useCommon.js';
import { GET_CLUE_DETAILS } from "@hooks/useApi"
import requests from "@common/requests";
import ThreadInfo from './threadInfo.vue';
import RelatedTasks from '../tasks/relatedTasks.vue';

const props = defineProps({
  info: {
    type: Object,
    required: true,
    default: () => ({})
  }
})
const tabActive = ref('线索信息');
const componentKey = ref(1);
const relatedTasksList = ref([]);
const infoData = ref(props.info);
const timeout = ref(null);

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

function getDetails(id) {
  requests.post(GET_CLUE_DETAILS, { id }).then(({ data }) => {
    infoData.value = data || {}
    relatedTasksList.value = data.taskList || []
  }).finally(() => {
    setTimeout(() => {
      componentKey.value++
    }, 10)
  })
}

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