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

<template>
    <div class="h-full flex p-3 flex-col businessDetail">
        <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="value" placeholder="请选择" style="width: 150px">
                    <el-option v-for="item in options" :key="item.id" :label="item.productName" :value="item.id" />
                </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" />
                </div>
                <div class="bg-white ml-2 shadow-md rounded-md flex-1">
                    <Attachment :data="attachment" :information="information" />
                </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" />
                </div>
                <div class="bg-white ml-2 shadow-md rounded-md flex-1">
                    <OperationRecord :data="operationRecord" />
                </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="relatedBusiness" />
                </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 Information from '../component/information.vue'
import Attachment from '../component/attachment.vue'
import RelatedTasks from '../component/relatedTasks.vue'
import OperationRecord from '../component/operationRecord.vue'
import RelatedBusiness from '../component/relatedBusiness.vue'

const information = ref({}) // 基本信息
const attachment = ref([]) // 附件
const relatedTasks = ref([]) // 相关任务
const operationRecord = ref([]) // 操作记录
const relatedBusiness = ref([]) // 相关商机

const pageLoading = ref(false)

const value = ref('')
const options: any = ref([])

onMounted(() => {
    
})
</script>
    
<style lang="scss" scoped></style>