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

<template>
  <div class="h-full flex p-3 flex-col thredDetail">
    <div class="w-full bg-white p-2 mb-2 shadow-md rounded-md flex items-center">
      <div class="icon mr-4">
        <el-link :underline="false" @click="backPath()">
          <el-icon class="el-icon--right"><icon-view /></el-icon> 返回线索列表
        </el-link>
      </div>
      <div class="mr-8">
        <el-select v-model="values" placeholder="请选择" style="width: 250px" @change="getDetail()">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
    <div class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden scroll-bar" v-loading="loadings">
      <div class="h-full threadDetail">
        <div class="layout">
          <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 pt-3">
          <div class="bg-white w-2/3 shadow-md rounded-md">
            <DetailCompinents :data="relatedTasks" :information="information" :formTaskType="3"
              :disabledList="['taskType', 'clueId']" :filed="'clueId'" @refreshData="refreshData"></DetailCompinents>
          </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>
    </div>
  </div>

</template>

<script lang="ts" setup>
import Information from './components/information.vue'
import Attachment from './components/attachment.vue'
import DetailCompinents from '@/components/detailcompinents/relatedTasks.vue'
import OperationRecord from './components/operationRecord.vue';
import { ref, reactive, onMounted, inject } from "vue";
import { Edit, ArrowLeft as IconView } from '@element-plus/icons-vue'
import { post, get } from "@/utils/request";
import { useRouter, useRoute } from "vue-router";
import { GETDETAIL, GETTALLCLUE } from "../constant"
import { backPath } from '@/utils/tools'

const route = useRoute()

const globalPopup = inject<GlobalPopup>('globalPopup')
const values = ref<any>('')
const options = ref<optionType[]>([])
const information = ref({}) // 基本信息
const attachment = ref([]) // 附件
const relatedTasks = ref([]) // 相关任务
const operationRecord = ref([]) // 操作记录
const loadings = ref(false)

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

function getAllClue() {
  post(GETTALLCLUE, { }).then(({ data }) => {
    options.value = (data ?? []).map((item: { clueName: string; id: number }) => ({
      label: item.clueName,
      value: item.id
    }));
  })
}

function refreshData() {
  getDetail()
}

onMounted(() => {
  const { id } = route.query
  values.value = id ? +id : ''
  getDetail()
  getAllClue()
})
</script>

<style lang="scss" scoped>
.thredDetail {
  .icon {
    .el-link {
      color: #0052CC;
    }
  }
}

.threadDetail {
  display: flex;
  flex-direction: column;

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