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

<template>
    <div class="h-full flex p-3 flex-col businessDetail" v-loading="pageLoading">
        <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: 300px" @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="pageLoading">
            <div class="w-full h-auto flex justify-between">
                <div class="bg-white shadow-md rounded-md" style="width: 46%;">
                    <Information :data="information" @refreshData="getDetail" />
                </div>
                <div class="bg-white ml-2 shadow-md rounded-md flex-1">
                    <Attachment :data="information" @refreshData="getDetail" />
                </div>
            </div>

            <div class="w-full h-auto flex justify-between mt-2">
                <div class="bg-white shadow-md rounded-md" style="width: 65%;">
                    <!-- <RelatedTasks :data="relatedTasks" :information="information" /> -->
                    <Detailcompinents :data="relatedTasks" :information="information" :formTaskType="0" :filed="'contactsId'" :disabledList="['contactsId']" @refreshData="getDetail" />
                </div>
                <div class="bg-white ml-2 shadow-md rounded-md flex-1">
                    <OperationRecord :data="information" />
                </div>
            </div>

            <div class="w-full h-auto flex justify-between mt-2">
                <div class="bg-white shadow-md rounded-md w-full">
                    <RelatedBusiness :data="information" @refreshData="getDetail" />
                </div>
            </div>
        </div>
    </div>
</template>
    
<script lang="ts" setup>
import { ref, reactive, onMounted, inject } from "vue";
import { Edit, ArrowLeft as IconView } from '@element-plus/icons-vue'
import { backPath } from '../../../utils/tools'
import { useRoute } from "vue-router";
import { post } from "@/utils/request";
import { URL_GETALL, URL_GETDETAIL } from "../api";

import Information from '../component/information.vue'
import Attachment from '../component/attachment.vue'
import RelatedTasks from '../component/relatedTasks.vue'
import OperationRecord from '../component/operationRecord.vue'
import Detailcompinents from '@/components/detailcompinents/relatedTasks.vue'
import RelatedBusiness from '../component/relatedBusiness.vue'

const route = useRoute()
const globalPopup = inject<GlobalPopup>('globalPopup')
const information = ref({}) // 基本信息
const relatedTasks = ref([]) // 相关任务
const rowId = ref(+(route.query.id || ''))
const values = ref<number | string>('')
const options = ref<optionType[]>([])
const pageLoading = ref(false)

function getDetail() {
    pageLoading.value = true
    post(URL_GETDETAIL, { id: rowId.value }).then((res) => {
        res.data.sexValue = res.data.sex === 1 ? '男' : '女'
        information.value = res.data
        relatedTasks.value = res.data.taskList
    }).finally(() => {
        pageLoading.value = false
    })
}

function getAllContacts() {
    post(URL_GETALL, {}).then(({ data }) => {
        options.value = (data || []).map((item: any) => ({ value: item.id, label: item.name }))
    }).catch((err) => {
        globalPopup?.showError(err.msg)
    })
}

onMounted(() => {
    values.value = rowId.value || ''
    getAllContacts()
    getDetail()
})
</script>
    
<style lang="scss" scoped></style>