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

<template>
  <div class="h-full threadDetail">
    <div class="layout p-3">
      <div class="bg-white w-1/2 shadow-md rounded-md">
        <Information :data="information" @refreshData="refreshData"></Information>
      </div>
      <div class="bg-white w-1/2 ml-3 shadow-md rounded-md">
        <Attachment :data="attachment" :information="information" @refreshData="refreshData"></Attachment>
      </div>
    </div>
    <div class="layout pl-3 pr-3 pb-3">
      <div class="bg-white w-2/3 shadow-md rounded-md">
        <RelatedTasks :data="relatedTasks" :information="information" @refreshData="refreshData"></RelatedTasks>
      </div>
      <div class="bg-white w-1/3 ml-3 shadow-md rounded-md">
        <OperationRecord :data="operationRecord" :information="information" @refreshData="refreshData"></OperationRecord>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import Information from './components/information.vue'
import Attachment from './components/attachment.vue'
import RelatedTasks from './components/relatedTasks.vue';
import OperationRecord from './components/operationRecord.vue';
import { ref, reactive, onMounted, inject } from "vue";
import { post, get } from "@/utils/request";
import { useRouter, useRoute } from "vue-router";
import { GETDETAIL } from "../constant"

const route = useRoute()

const globalPopup = inject<GlobalPopup>('globalPopup')
const addressParameters: any = ref(0) // 地址上的参数
const information = ref({}) // 基本信息
const attachment = ref([]) // 附件
const relatedTasks = ref([]) // 相关任务
const operationRecord = ref([]) // 操作记录

function getDetail() {
  const id = addressParameters.value
  post(GETDETAIL, { id }).then((res) => {
    const { clueLogList, files, taskList } = res.data
    information.value = res.data
    attachment.value = files || []
    relatedTasks.value = taskList || []
    operationRecord.value = clueLogList || []
  })
}

function refreshData() {
  getDetail()
}

onMounted(() => {
  const { id } = route.query
  addressParameters.value = id
  getDetail()

})
</script>
  
<style lang="scss" scoped>
.threadDetail {
  display: flex;
  flex-direction: column;

  .layout {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-between;
  }
}
</style>