添加公海客户详情页内容

src/router/index.ts

@@ -36,6 +36,11 @@ const routes: Array<RouteRecordRaw> = [
         name: 'highSeasCustomer',   //公海客户
         component: () => import('../views/highSeasCustomer/index.vue')
       },
+      {
+        path: 'highSeasCustomerDetail',
+        name: 'highSeasCustomerDetail',   //公海客户详情
+        component: () => import('../views/highSeasCustomer/highSeasCustomerDetail/index.vue')
+      },
       {
         path: 'myCustomer',
         name: 'myCustomer',   //我的客户

src/views/highSeasCustomer/highSeasCustomerDetail/components/FollowFormDialog/formDialog.ts

@@ -0,0 +1,109 @@
+import { ref } from "vue";
+
+export const formItemList = ref([
+  {
+    key: 'school',
+    label: '跟进学校',
+    type: 'input',
+    disabled: true,
+    rules:[{required:true,trigger:'blur',message:'请填写信息'}],
+    style: { }
+  },
+  {
+    key: 'product',
+    label: '跟进产品',
+    type: 'select',
+    placeholder: '请选择跟进产品',
+    selectList: [], 
+    rules:[{required:true,trigger:'blur',message:'请填写信息'}],
+    style: { }
+  },
+  {
+    key: 'status',
+    label: '跟进状态',
+    type: 'radio',
+    selectList: [
+      { label: '线索建立', value: 'lead_established' },
+      { label: '方案演示', value: 'proposal_demo' },
+      { label: '试用测试', value: 'trial_test' },
+      { label: '赢单', value: 'won' },
+      { label: '输单', value: 'lost' }
+    ],
+    rules:[{required:true,trigger:'blur',message:'请填写信息'}],
+    style: {  }
+  },
+  {
+    key: 'contact',
+    label: '联系人',
+    type: 'select',
+    placeholder: '请选择跟进的联系人',
+    selectList: [
+      {
+        label:"张三",
+        value:'zhangsan'
+      },
+      {
+        label:"李四",
+        value:'lisi'
+      },
+    ], 
+    rules:[{required:true,trigger:'blur',message:'请填写信息'}],
+    style: {  }
+  },
+  {
+    key: 'position',
+    label: '职务',
+    type: 'select',
+    placeholder: '请选择职务',
+    disabled: true,
+    hidden:true,
+    selectList: [
+      {
+        label:'校长',
+        value:"schoolMaster"
+      },
+      {
+        label:'教师',
+        value:"teacher"
+      },
+    ], 
+    rules:[{required:true,trigger:'blur',message:'请填写信息'}],
+    style: { width: '100%' }
+  },
+  {
+    key: 'content',
+    label: '跟进内容',
+    type: 'textarea',
+    placeholder: '请输入跟进内容',
+    rows: 4,
+    rules:[{required:true,trigger:'blur',message:'请填写信息'}],
+    style: { }
+  },
+  {
+    key: 'appointmentType',
+    label: '预约待办',
+    type: 'radio',
+    selectList: [
+      { label: '预约', value: 'appointment' },
+      { label: '待办', value: 'todo' }
+    ],
+    style: { }
+  },
+  {
+    key: 'appointmentTime',
+    label: '预约时间',
+    type: 'dateTimePickerNoRange',
+    rules:[{required:true,trigger:'blur',message:'请填写信息'}],
+    hidden:true,
+    style: {  }
+
+  },
+  {
+    key: 'todoTime',
+    label: '待办时间',
+    type: 'dateTimePickerNoRange',
+    rules:[{required:true,trigger:'blur',message:'请填写信息'}],
+    hidden:true,
+    style: { }
+  }
+]);

src/views/highSeasCustomer/highSeasCustomerDetail/components/FollowFormDialog/index.vue

@@ -0,0 +1,108 @@
+<template>
+     <FormDialog width="640px" :title="title" 
+        :visible="editFormDialogVisible" 
+        :submitLoading="editFormDialogSubmitLoading"
+        :defaultFormData="formData"
+        :formItemList="finalFormItemList"
+        :formDisabled="formDisabled"
+        @close="CloseFormDialog"
+        @confirm="HandleConfirmFormDialog"
+        @formItemChange="HandleFormItemChange">
+    </FormDialog>
+
+</template>
+
+
+<script setup lang="ts">
+import {  computed, onMounted, ref,watch } from 'vue';
+
+import FormDialog from '@/baseComponents/FormDialog.vue';
+import {formItemList} from './formDialog'
+
+const props = defineProps({
+    defaultFormData:{
+        type:Object,
+        required:true
+    },
+    title:{
+        type:String,
+        default:'写跟进'
+    },
+    formDisabled:{
+        type:Boolean,
+        default:false
+    }
+})
+
+const formData = ref({})
+
+const editFormDialogVisible = defineModel('visible')
+const editFormDialogSubmitLoading = ref(false)
+
+const finalFormItemList = ref(JSON.parse(JSON.stringify(formItemList.value)))
+
+const CloseFormDialog = ()=>{
+    editFormDialogVisible.value = false
+}
+const HandleConfirmFormDialog = ()=>{
+    CloseFormDialog()
+}
+
+const HandleFormItemChange =(params)=>{
+    const { key,val,formData } = params
+
+    switch(key){
+        case 'contact':
+            if(val){
+                finalFormItemList.value = finalFormItemList.value.map(item=>{
+                    if(item.key == 'position'){
+                        item.hidden = false
+                    }
+                    return item
+                })
+            }else{
+                finalFormItemList.value = finalFormItemList.value.map(item=>{
+                    if(item.key == 'position'){
+                        item.hidden = true
+                    }
+                    return item
+                })
+            }
+            break
+        case 'appointmentType':
+            if(val == 'appointment'){
+                finalFormItemList.value = finalFormItemList.value.map(item=>{
+                    if(item.key == 'appointmentTime'){
+                        item.hidden = false
+                    }else if(item.key == 'todoTime'){
+                        item.hidden = true
+                    }{}
+                    return item
+                })
+            }else if(val == 'todo'){
+                finalFormItemList.value = finalFormItemList.value.map(item=>{
+                    if(item.key == 'appointmentTime'){
+                        item.hidden = true
+                    }else if(item.key == 'todoTime'){
+                        item.hidden = false
+                    }{}
+                    return item
+                })
+            }
+            break
+    }
+}
+
+watch(()=>props.defaultFormData,(newVal)=>{
+    formData.value = {...newVal}
+},{immediate:true})
+
+onMounted(()=>{
+    console.log('页面加载了--',formItemList.value)
+})
+</script>
+
+
+
+<style lang="scss" scoped>
+</style>

src/views/highSeasCustomer/highSeasCustomerDetail/contactDetail/formSearchGroup.ts

@@ -0,0 +1,11 @@
+import { ref } from 'vue';
+
+
+export const formSearchList = ref([
+    {
+        key:'queryStr',
+        type:'input',
+        placeholder:'请输入关键字搜索',
+        defaultValue:'',
+    },
+])

src/views/highSeasCustomer/highSeasCustomerDetail/contactDetail/index.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="end_item">
+        <SearchBlock :searchList="blockSearchList" class="search_block">
+            <template #position>
+                <FormSearchGroup  :searchList="formSearchList" />
+            </template>
+        </SearchBlock>
+        <Table :currentPage="currentPage" 
+            :pageSize="pageSize" :totalNum="totalNum" 
+            :tableColumns="tableColumns" 
+            :tableData="tableData">
+            <template #num="{currentIndex}">
+                {{ (currentPage - 1) * pageSize + currentIndex }}
+            </template>
+            <template #operation="{row}">
+                <div class="table_row_option">
+                    <span class="option_button_editor" @click="OpenFollowlFormDialog(row)">写跟进</span>
+                    <span class="option_button_editor" @click="OpenCactPeopleFormDialog(row)">编辑</span>
+                    <span class="el_button_delete">删除</span>
+                </div>
+            </template>
+        </Table>
+    </div>
+
+
+    <!-- 修改联系人弹窗 -->
+    <ConcactPeopleFormDialog 
+        title="修改联系人"
+        v-model:visible="concactPeopleVisible" 
+        :defaultFormData="defaultConcactPeopleFormData">
+    </ConcactPeopleFormDialog>
+
+
+    <!-- 写跟进弹窗 -->
+    <FollowFormDialog 
+        v-if="followVisible"
+        v-model:visible="followVisible"
+        :defaultFormData="followDefaultFormData">
+    </FollowFormDialog>
+
+</template>
+
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import SearchBlock from '@/baseComponents/SearchBlock.vue';
+import {blockSearchList} from'./searchBlock'
+import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
+import {formSearchList} from './formSearchGroup'
+import Table from '@/baseComponents/Table.vue';
+import {tableColumns} from './table'
+
+
+import ConcactPeopleFormDialog from '@/components/ConcactPeopleFormDialog/index.vue'
+import FollowFormDialog from '../components/FollowFormDialog/index.vue'
+
+
+const currentPage = ref(1)
+const pageSize = ref(20)
+const totalNum = ref(0)
+
+
+const tableData = ref([
+  {
+    id: '1',
+    name: '严谨',
+    position:'principal',
+    positionName: '校长',
+    mobilePhone: '172****9908',
+    officePhone: '17287889908',
+    remark: '备注文案',
+    lastFollowUpTime: '26-08-19 19:00',
+    creator: '李四',
+    createTime: '26-08-19 17:00'
+  },
+  {
+    id: '2',
+    name: '王诗雅',
+    position:'principal',
+    positionName: '校长',
+    mobilePhone: '172****9908',
+    officePhone: '-', // 图片中显示为横杠
+    remark: '备注文案',
+    lastFollowUpTime: '26-08-19 19:00',
+    creator: '李四',
+    createTime: '26-08-19 17:00'
+  },
+  {
+    id: '3',
+    name: '赵子涵',
+    position:'principal',
+    positionName: '教学校长',
+    mobilePhone: '172****9908',
+    officePhone: '172****9908', // 图片中该号码也进行了脱敏处理
+    remark: '备注文案',
+    lastFollowUpTime: '26-08-19 19:00',
+    creator: '李四',
+    createTime: '26-08-19 17:00'
+  }
+]);
+
+
+/** 修改联系人弹窗 有关数据及操作 */
+const concactPeopleVisible = ref(false)
+const defaultConcactPeopleFormData = ref({})
+const OpenCactPeopleFormDialog = (row)=>{
+    concactPeopleVisible.value = true
+    defaultConcactPeopleFormData.value = row
+}
+
+
+/** 写跟进 弹窗有关数据 及操作 */
+const followVisible = ref(false)
+const followDefaultFormData = ref({})
+const OpenFollowlFormDialog = (row)=>{
+    followVisible.value = true
+    followDefaultFormData.value = {
+        // school:customerBaseMsg.value.schoolName,
+    }
+}
+</script>
+
+
+<style lang="scss" scoped>
+ .end_item{
+        :deep(.search_block){
+            margin-bottom: 16px;
+            .content_left{
+                align-items: center;
+            }
+        }
+    }
+
+</style>

src/views/highSeasCustomer/highSeasCustomerDetail/contactDetail/searchBlock.ts

@@ -0,0 +1,17 @@
+import { ref } from 'vue';
+
+export const blockSearchList = ref([
+    {
+        label: '职务',
+        key: 'position',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '校长', value: 'schoolMaster' },
+            { label: '教学校长', value: 'principalOfTheSchool' },
+            { label: '教务主任', value: 'deanOfStudies' },
+            { label: '信息主任', value: 'informationDirector' },
+        ],
+        defaultValue: 'all'
+    }
+])

src/views/highSeasCustomer/highSeasCustomerDetail/contactDetail/table.ts

@@ -0,0 +1,85 @@
+import { ref } from 'vue';
+
+export const tableColumns = ref([
+  {
+    name: 'num',
+    label: '序号',
+    width: '60',
+    align: 'center',
+    custom: true,
+    hidden: false
+  },
+  {
+    name: 'name',
+    label: '姓名',
+    width: '100',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'positionName',
+    label: '职务',
+    width: '120',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'mobilePhone',
+    label: '手机号',
+    width: '140',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'officePhone',
+    label: '办公电话',
+    width: '140',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'remark',
+    label: '备注',
+    width: '150', 
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'lastFollowUpTime',
+    label: '上次跟进时间',
+    width: '180',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'creator',
+    label: '创建人',
+    width: '100',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'createTime',
+    label: '创建时间',
+    width: '180',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'operation',
+    label: '操作',
+    width: '150',
+    fixed: 'right', 
+    align: 'center',
+    custom: true, 
+    hidden: false
+  }
+]);

src/views/highSeasCustomer/highSeasCustomerDetail/customerStatusOverview/index.vue

@@ -0,0 +1,731 @@
+<template>
+    <div class="message_overview">
+        <!-- 左侧：产品概览与最新状态 -->
+        <div class="left_panel hide_scrollbar">
+            <div class="product_summary">
+                <div class="summary_title">跟进产品总数 {{ followUpProductSummary.total }}</div>
+                <div class="summary_tags">
+                    <span v-for="(item,index) in followUpProductSummary.differentStatusNum" :key="index"> {{item.name}} {{item.num}}</span>
+                </div>
+            </div>
+            
+            <div class="product_list">
+
+                <template v-for="(item,index) in productsStatus" :key="item.id" >
+                    <div class="list_item">
+                        <div class="item_title">{{item.name}}</div>
+                        <div class="item_info">跟进状态：{{item.followupStatus}}</div>
+                        <div class="item_info">联系人：{{item.concactPeople}}</div>
+                        <div class="item_info">上次跟进时间：{{item.lastFollowupTime}}</div>
+                        <div class="item_info">跟进次数：{{item.followupTimes}}</div>
+                    </div>
+                    <div v-if="index !== (productsStatus?.length - 1)" class="page_solid_line" />
+                </template>
+                
+            </div>
+        </div>
+
+        <!-- 中间：搜索与 我的跟进 -->
+        <div class="center_panel">
+            <div class="page_content hide_scrollbar"> 
+                <SearchBlock :searchList="ongoingFollowSearchList"></SearchBlock>
+                <FollowCard v-if="finalRenderData?.length > 0" style="margin-top: 16px;" :cardList="finalRenderData">
+                    <template #operation="{row}">
+                        <div style="" class="table_row_option">
+                            <span class="button_delete">取消预约</span>
+                            <span class="option_button_editor" @click="OpenFollowlFormDialog(row)">详情</span>
+                        </div>
+                    </template>
+                </FollowCard>
+                <div v-else class="no_data_bg">
+                    <span>暂无数据</span>
+                </div>
+            </div>
+
+            <Pagination  :currentPage="currentPage" 
+                :pageSize="pageSize" :totalNum="totalNum"  
+                @paginationChange="handlePaginationChange" />
+        </div>
+
+        <!-- 右侧：待办与统计 -->
+        <div class="right_panel">
+            <div class="pending_appointments">
+                <div class="panel_header">预约待办 (6项)</div>
+                <ul class="task_list hide_scrollbar">
+                    <template v-if="pendingAppointmentList?.length > 0">
+                        <li  v-for="cardItm in pendingAppointmentList" :key="cardItm.id" class="todo_card">
+                            <div class="card_top">
+                                <span class="time">{{cardItm.createTime}}</span>
+                                <span class="title one_line_ellipsis">{{cardItm.productName}}</span>
+                                <div class="table_row_option">
+                                    <span class="button_editor"@click="OpenFollowlFormDialog(cardItm)">详情</span>
+                                </div>
+                            </div>
+                            <div class="card_tags">
+                                <span class="task_type">{{cardItm.taskType}}</span>
+                                <span class="follow_status">{{cardItm.followStatus}}</span>
+                            </div>
+                            <div class="card_info">
+                                <span>跟进人：{{ cardItm.followPeople }}</span>
+                                <span>联系人：{{ cardItm.concactPeople }}</span>
+                                <span>职务：{{ cardItm.position }}</span>
+                            </div>
+                            <div :title="cardItm.followContent" class="card_content two_line_ellipsis">
+                                跟进内容：{{cardItm.followContent}}
+                            </div>
+                        </li>
+                    </template>
+                    <template v-else>
+                        <li class="no_data">
+                            <div class="no_data_bg">
+                                <span>暂无数据</span>
+                            </div>
+                        </li>
+                    </template>
+                </ul>
+            </div>
+
+            <!-- 之前归属人的跟进记录 -->
+            <!-- 历史跟进的状态是否展示 要判断是否给当前用户开放历史跟进权限——待完善 -->
+            <div class="history_statistics">
+                <div class="stat_header">
+                    <span>历史跟进</span>
+                    <el-button class="button_border" @click="OpenHistoryFollowDialog">历史跟进</el-button>
+                </div>
+                <div class="stat_numbers">
+                    <div class="num_item">
+                        <div class="num">{{historyFollowData.hsitoryProductNum}}</div>
+                        <div class="label">历史产品</div>
+                    </div>
+                    <div class="vertical_solid"></div>
+                    <div class="num_item">
+                        <div class="num">{{historyFollowData.historyPeopleNum}}</div>
+                        <div class="label">历史人员</div>
+                    </div>
+                    <div class="vertical_solid"></div>
+
+                    <div class="num_item">
+                        <div class="num">{{historyFollowData.followTimes}}</div>
+                        <div class="label">跟进次数</div>
+                    </div>
+                    <div class="vertical_solid"></div>
+
+                    <div class="num_item">
+                        <div class="num">{{historyFollowData.winnerCaseTimes}}</div>
+                        <div class="label">赢单次数</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 查看跟进详情 -->
+    <FollowFormDialog 
+        title="查看详情"
+        :formDisabled="true"
+        v-model:visible="followVisible" 
+        :defaultFormData="followDefaultFormData">
+    </FollowFormDialog>
+
+    <!-- 查看历史跟进 -->
+    <PreviewDialog 
+        v-if="historyFollowVisible"
+        :title="'历史跟进'"
+        :previewVisible="historyFollowVisible"
+        :customFooter="true"
+        @close="CloseHistoryFollowDialog">
+        <SearchBlock :searchList="historyFollowSearchList"></SearchBlock>
+        <FollowCard style="margin-top: 16px;" :cardList="finalRenderCard">
+            <template #operation>
+                <i></i>
+            </template>
+        </FollowCard>
+        <Pagination :currentPage="historyCurrentPage" 
+            :pageSize="historyPageSize" :totalNum="historyTotalNum">
+        </Pagination>
+        <template #close>
+            <el-button @click="CloseHistoryFollowDialog" class="button_background" >关闭</el-button>
+        </template>
+        <template #confirm><i></i></template>
+     </PreviewDialog>
+
+</template>
+
+<script setup lang="ts">
+import { ref,computed } from 'vue';
+import SearchBlock from '@/baseComponents/SearchBlock.vue';
+import { ongoingFollowSearchList,historyFollowSearchList } from './searchBlock';
+import FollowCard from '@/components/FollowCard.vue';
+
+import Pagination from '@/baseComponents/Pagination.vue';
+import FollowFormDialog from '../components/FollowFormDialog/index.vue'
+
+import PreviewDialog from '@/baseComponents/PreviewDialog.vue';
+
+// 跟进产品总览
+const followUpProductSummary = ref({
+    total:6,
+    differentStatusNum:[
+        {
+            name:'线索建立',
+            num:2
+        },
+        {
+            name:'方案演示',
+            num:1
+        },
+        {
+            name:'试用测试',
+            num:1
+        },
+        {
+            name:'赢单',
+            num:1
+        },
+    ]
+})
+
+interface ProductStatusItm {
+    id:string,
+    name:string,
+    followupStatus:string,
+    concactPeople:string,
+    lastFollowupTime:string,
+    followupTimes:string
+}
+const productsStatus = ref<ProductStatusItm[]>([
+  {
+    id:'1',
+    name: '大数据精准教学',
+    followupStatus: '试用测试',
+    concactPeople: '张三（校长）',
+    lastFollowupTime: '26-08-12 8:00',
+    followupTimes: '6次',
+  },
+  {
+    id:'2',
+    name: '智能判分系统',
+    followupStatus: '试用测试',
+    concactPeople: '张三（校长）',
+    lastFollowupTime: '26-08-12 8:00',
+    followupTimes: '6次',
+  },
+  {
+    id:'3',
+    name: '材料采集系统',
+    followupStatus: '试用测试',
+    concactPeople: '张三（校长）',
+    lastFollowupTime: '26-08-12 8:00',
+    followupTimes: '6次',
+  },
+]);
+
+
+// 进行中的跟进记录 
+const ongoingFollowRecord = ref([
+    {
+        id:'1',
+        followUpTime: '26-02-19 19:00',
+        schoolName: '北京师达学校',
+        followUpProduct: '大数据精准教学',
+        followUpStatus: '赢单',
+        audditStatus:'审核中',
+        followUpUser: '张三',
+        contactPerson: '严谨',
+        jobTitle: '校长',
+        followUpContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文'
+    },
+    {
+        id:'2',
+        followUpTime: '26-02-19 19:00',
+        schoolName: '北京师达学校',
+        followUpProduct: '大数据精准教学',
+        followUpStatus: '方案演示',
+        taskType:'预约',
+        followUpUser: '张三',
+        contactPerson: '严谨',
+        jobTitle: '校长',
+        followUpContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京\n文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号'
+    },
+     {
+        id:'3',
+        followUpTime: '26-02-19 19:00',
+        schoolName: '北京师达学校',
+        followUpProduct: '大数据精准教学',
+        followUpStatus: '试用测试',
+        taskType:'待办',
+        followUpUser: '张三',
+        contactPerson: '严谨',
+        jobTitle: '校长',
+        followUpContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京\n文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号'
+    }
+])
+const finalRenderData = computed(()=>{
+    return   ongoingFollowRecord.value.map(item=>{
+
+        let headerTags = []
+        if(item.followUpStatus){
+            headerTags.push(item.followUpStatus)
+        }
+        if(item.audditStatus){
+            headerTags.push(item.audditStatus)
+        }
+        return {
+            headerTitleList:[
+                item.followUpTime,
+                item.schoolName,
+                item.followUpProduct
+            ],
+            headerTags,
+            middleDesc:[
+                `跟进人：${item.followUpUser}`,
+                `联系人：${item.contactPerson}`,
+                `职务：${item.jobTitle}`
+            ],
+            taskType:item.taskType,
+            bottomDesc:`跟进内容：${item.followUpContent}`
+        }
+    })
+})
+const currentPage = ref(1)
+const pageSize = ref(20)
+const totalNum = ref(0)
+const handlePaginationChange = (params)=>{
+    const {type,val} = params
+    if(type == 'currentPage'){
+        currentPage.value = val
+    }else if(type == 'pageSize'){
+        pageSize.value = val
+    }
+}
+
+// 预约待办项
+interface pendingAppointmentItm {
+    id:string,
+    createTime:string,
+    productName:string,
+    taskType:string,
+    followStatus:string,
+    followPeople:string,
+    concactPeople:string,
+    position:string,
+    followContent:string,
+}
+const pendingAppointmentList = ref<pendingAppointmentItm[]>([
+  {
+    id:'1',
+    createTime: '26-02-19 16:00',
+    productName: '大数据精准教学...',
+    taskType: '预约',
+    followStatus: '方案演示',
+    followPeople: '张三',
+    concactPeople: '严谨',
+    position: '校长',
+    followContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进xxxx...',
+  },
+  {
+    id:'2',
+    createTime: '26-02-19 16:00',
+    productName: '大数据精准教学',
+    taskType: '待办',
+    followStatus: '试用测试',
+    followPeople: '张三',
+    concactPeople: '严谨',
+    position: '校长',
+    followContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进xxxxx...',
+  },
+  {
+    id:'3',
+    createTime: '26-02-19 16:00',
+    productName: '大数据精准教学',
+    taskType: '待办',
+    followStatus: '试用测试',
+    followPeople: '张三',
+    concactPeople: '严谨',
+    position: '校长',
+    followContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进...',
+  },
+])
+
+
+// 历史跟进 数据总览
+const historyFollowData = ref({
+    hsitoryProductNum:10,
+    historyPeopleNum:2,
+    followTimes:8,
+    winnerCaseTimes:8,
+})
+
+
+/** 跟进弹窗详情（查看）有关数据及操作  */
+const followVisible = ref(false)
+const followDefaultFormData = ref({})
+const OpenFollowlFormDialog = (row)=>{
+    followVisible.value = true
+    followDefaultFormData.value = {
+        // school:customerBaseMsg.value.schoolName,
+    }
+}
+
+
+/** 查看历史跟进 弹窗有关数据  */
+const historyFollowVisible = ref(false)
+const OpenHistoryFollowDialog = (row)=>{
+    historyFollowVisible.value = true
+}
+const CloseHistoryFollowDialog = ()=>{
+    historyFollowVisible.value = false
+}
+// 历史跟进记录 列表信息
+const historyFollowRecord = ref([
+  {
+    id:'1',
+    date: '26-02-19 19:00',
+    product: '大数据精准教学',
+    status: '试用测试',
+    tracker: '张三',
+    contactPerson: '严谨',
+    position: '校长',
+    content: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号',
+    scheduleType: '', // 预约 / 待办
+    scheduleTime: ''
+  },
+  {
+    id:'2',
+    date: '26-02-19 16:00',
+    product: '智能判分系统',
+    status: '方案演示',
+    tracker: '张三',
+    contactPerson: '严谨',
+    position: '校长',
+    content: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号',
+    scheduleType: '预约',
+    scheduleTime: '26-02-09 12:00'
+  },
+  {
+    id:'3',
+    date: '26-02-18 19:00',
+    product: '大数据精准教学',
+    status: '试用测试',
+    tracker: '张三',
+    contactPerson: '严谨',
+    position: '校长',
+    content: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号',
+    scheduleType: '待办',
+    scheduleTime: '26-02-09 12:00'
+  }
+]);
+
+const finalRenderCard = historyFollowRecord.value.map(item=>{
+
+    let middleDesc = [
+        `跟进人：${item.tracker}`,
+        `联系人：${item.contactPerson}`,
+        `职务：${item.position}`
+    ]
+
+    if(item.scheduleType =='预约'){
+        middleDesc.push(`预约时间：${item.scheduleTime}`)
+    }else if(item.scheduleTime == '待办'){
+        middleDesc.push(`待办时间：${item.scheduleTime}`)
+
+    }
+    return {
+        id:item.id,
+        headerTitleList:[item.date,item.product],
+        headerTags:[item.status],
+        taskType:item.scheduleType,
+        middleDesc,
+        bottomDesc:`跟进内容：${item.content}`,
+    }
+})
+
+// 分页参数
+const historyCurrentPage = ref(1)
+const historyPageSize = ref(10)
+const historyTotalNum = ref(0)
+
+</script>
+
+<style lang="scss" scoped>
+.message_overview {
+    overflow: auto;
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+    background-color: #fff;
+    font-size: 14px;
+    color: #333;
+
+    > * {
+        height: 100%;
+        overflow: auto;
+    }
+
+    // 左侧栏样式
+    .left_panel {
+        width: 200px; // 稍微加宽以容纳内容
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+
+        .product_summary {
+            padding:12px;
+            background: #F8FAFE;
+            border-radius: 10px;
+            border: 1px solid #EBEEF5;
+            color: #333333;
+
+            .summary_title {
+                font-weight: 600;
+                font-size: 16px;
+                margin-bottom: 12px;
+                line-height: 22px;
+            }
+
+            .summary_tags {
+                display: grid;
+                grid-template-columns: repeat(2,1fr);
+                gap:16px;
+                font-size: 14px;
+                line-height: 20px;
+            }
+        }
+
+        .product_list {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+
+            padding:12px;
+            background: #F8FAFE;
+            border-radius: 10px;
+            border: 1px solid #EBEEF5;
+
+            .list_item {
+                display: flex;
+                flex-direction: column;
+                gap:4px;
+                .item_title {
+                    line-height: 20px;
+                    font-weight: 600;
+                    font-size: 14px;
+                    color: #333333;
+                    margin-bottom: 4px;
+                }
+
+                .item_info {
+                    line-height: 17px;
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #666666;
+                }
+            }
+        }
+    }
+
+    // 中间栏样式
+    .center_panel {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .page_content{
+            flex: 1 1;
+            overflow: auto;
+            padding-bottom: 10px;
+            display: flex;
+            flex-direction: column;
+
+            .no_data_bg{
+                flex: 1 1;
+                background-position: 50% 20px;
+                background-size: 200px auto;
+                min-height: 150px;
+                span{
+                    margin-top: 120px;
+                }
+            }
+        }
+        :deep(.follow_card){
+            .table_row_option{
+                display: none;
+            }
+            .audit_card{
+                   &:hover{
+                    border:solid #2E64FA 1px;
+                    background-color: rgba(46, 100, 250,0.04);
+                    .table_row_option{
+                        display: flex;
+                    }
+                }
+            }
+        }
+     
+    }
+
+    // 右侧栏样式
+    .right_panel {
+        width: 320px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: 16px;
+
+        .pending_appointments {
+            flex:1 1;
+            overflow: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            color: #333333;
+
+            .panel_header {
+                font-size: 16px;
+                line-height: 22px;
+                font-weight: 600;
+            }
+            .task_list{
+                flex:1 1;
+                display: flex;
+                flex-direction: column;
+                gap: 16px;
+                overflow: auto;
+
+                .todo_card {
+                    display: flex;
+                    flex-direction: column;
+                    gap:8px;
+
+                    border-radius: 8px;
+                    border: 1px solid #EBEEF5;
+                    padding: 12px;
+
+                    .card_top {
+                        display: flex;
+                        justify-content: flex-start;
+                        align-items: center;
+                        gap:8px;
+                        font-weight: 600;
+                        line-height: 20px;
+                        .title{
+                            flex: 1; 
+                        }
+                        .table_row_option {
+                            display: none;
+                            width: auto;
+                            flex-shrink: 0 !important;
+                            font-weight: 400;
+                        }
+                    }
+
+                    .card_tags {
+                        display: flex;
+                        gap:10px;
+                        font-size: 12px;
+                        line-height: 17px;
+
+                        >span{
+                            border-radius:4px;
+                            padding:4px 8px;
+                        }
+
+                        .task_type{
+                            color:white;
+                            background: #2E64FA;
+                        }
+                        .follow_status{
+                            background: rgba(46,100,250,0.1);
+                            color:#2E64FA;
+                        }
+                    }
+
+                    .card_info{
+                        display: flex;
+                        align-items: center;
+                        gap:11px;
+                        font-size: 12px;
+                        line-height: 17px;
+                    }
+                    .card_content{
+                        font-size: 12px;
+                        color: #999999;
+                        line-height: 17px;
+                    }
+
+                    
+                    &:hover{
+                        border:solid #2E64FA 1px;
+                        .card_top{
+                            .table_row_option {
+                                display: flex;
+                            }
+                        }
+                    }
+
+                }
+                
+                .no_data{
+                    overflow: hidden;
+                    .no_data_bg{
+                        background-size: 200px auto;
+                        background-position: 50% 10px;
+                        span{
+                            margin-top: 110px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .history_statistics{
+            padding:16px 14px 12px 16px;
+            background: #F8FAFE;
+            border-radius: 10px;
+            border: 1px solid #EBEEF5;
+        
+            .stat_header{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                line-height: 22px;
+                font-weight: 600;
+                font-size: 16px;
+                margin-bottom: 10px;
+                .button_border{
+                    background-color: #f8fafe;
+                }
+            }
+
+            .stat_numbers{
+                display: flex;
+                gap:10px;
+                align-items: center;
+
+                .num_item{
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    color: #666666;
+
+                    .num{
+                        font-weight: 600;
+                        font-size: 16px;
+                        line-height: 24px;
+                    }
+                    .label{
+                        font-size: 14px;
+                        line-height: 20px;
+                    }
+                }
+
+                .vertical_solid{
+                    width: 1px;
+                    height: 32px;
+                    background-color: #EBEEF5;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/highSeasCustomer/highSeasCustomerDetail/customerStatusOverview/searchBlock.ts

@@ -0,0 +1,113 @@
+import { ref } from "vue"
+
+// 进行中的跟进 有关筛选条件
+export const ongoingFollowSearchList = ref([
+  {
+    label: '时间',
+    key: 'time',
+    type: 'single', // 对应图片中顶部的一行独立选项
+    defaultValue: 'all',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '今天', value: 'today' },
+      { label: '昨天', value: 'yesterday' },
+      { label: '近3天', value: 'last_3_days' },
+      { label: '近1周', value: 'last_1_week' },
+      { label: '近1月', value: 'last_1_month' },
+      { label: '自定义', value: 'custom' }
+    ]
+  },
+  {
+    label: '产品',
+    key: 'product',
+    type: 'single', // 对应图片中第二行选项
+    defaultValue: 'all',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '大数据教学诊断', value: 'big_data_teaching' },
+      { label: '智能判分', value: 'smart_grading' },
+      { label: '材料采集', value: 'material_collection' },
+      { label: '校内通知', value: 'school_notification' },
+      { label: '校本研修', value: 'school_research' },
+      { label: '协同备课', value: 'collaborative_lesson_prep' }
+    ]
+  },
+  {
+    label: '状态',
+    key: 'status',
+    type: 'single', // 对应图片中第三行选项
+    defaultValue: 'all',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '线索建立', value: 'lead_establishment' },
+      { label: '需求调研', value: 'requirement_survey' },
+      { label: '方案演示', value: 'solution_demo' },
+      { label: '试用测试', value: 'trial_test' },
+      { label: '项目搁置', value: 'project_shelved' },
+      { label: '输单', value: 'lost_order' },
+      { label: '赢单', value: 'won_order' }
+    ]
+  },
+  {
+    label: '职务',
+    key: 'job_title',
+    type: 'single', // 对应图片中第四行选项
+    defaultValue: 'all',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '校长', value: 'principal' },
+      { label: '副校长', value: 'vice_principal' },
+      { label: '信息主任', value: 'it_director' }
+    ]
+  }
+])
+
+
+// 历史跟进 有关筛选条件
+export const historyFollowSearchList = ref([
+  {
+    label: '产品',
+    key: 'product',
+    type: 'single',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '大数据教学诊断', value: 'bigDataTeachingDiagnosis' },
+      { label: '智能判分', value: 'intelligentGrading' },
+      { label: '材料采集', value: 'materialCollection' },
+      { label: '校内通知', value: 'inSchoolNotification' },
+      { label: '校本研修', value: 'schoolBasedResearch' },
+      { label: '协同备课', value: 'collaborativeLessonPreparation' }
+    ],
+    defaultValue: 'all'
+  },
+  {
+    label: '人员',
+    key: 'personnel',
+    type: 'single',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '员工1', value: 'employee1' },
+      { label: '员工2', value: 'employee2' },
+      { label: '员工3', value: 'employee3' },
+      { label: '员工4', value: 'employee4' },
+      { label: '员工5', value: 'employee5' }
+    ],
+    defaultValue: 'all'
+  },
+  {
+    label: '状态',
+    key: 'status',
+    type: 'single',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '线索建立', value: 'leadEstablishment' },
+      { label: '需求调研', value: 'requirementResearch' },
+      { label: '方案演示', value: 'proposalDemo' },
+      { label: '试用测试', value: 'trialTest' },
+      { label: '项目搁置', value: 'projectOnHold' },
+      { label: '输单', value: 'loss' },
+      { label: '赢单', value: 'win' }
+    ],
+    defaultValue: 'all'
+  }
+])

src/views/highSeasCustomer/highSeasCustomerDetail/index.vue

@@ -0,0 +1,302 @@
+<template>
+    <div class="main_container">
+        <TopBackNav>
+            <template #topRight>
+                <div class="header_content">
+                    <span>{{ customerBaseMsg.schoolName }}</span>
+                    <el-tag type="success" effect="light" size="small" :disable-transitions="true" class="status_tag">
+                        {{ customerBaseMsg.customerType }}
+                    </el-tag>
+                </div>
+                <div class="desc">
+                    <span>学段：{{ customerBaseMsg.educationStage }}</span>
+                    <span>省份：{{ customerBaseMsg.province }}</span>
+                    <span>地区：{{ customerBaseMsg.district }}</span>
+                    <span>地址：{{ customerBaseMsg.address }}</span>
+                    <span>归属人：{{ customerBaseMsg.owner }}</span>
+                    <span>认领时间：{{ customerBaseMsg.claimTime }}</span>
+                    <span>上次跟进时间：{{ customerBaseMsg.lastFollowUpTime }}</span>
+                </div>
+                <div class="action">
+                    <el-button class="button_background" @click=""><img :src="peopleAuthenticationIcon" alt=""> 认领</el-button>
+                    <el-button class="button_border" @click="OpenConcactPeoplelFormDialog"><img :src="addIcon" alt=""> 新增联系人</el-button>
+                    <el-button class="button_refresh" @click="OpenSchoolFormDialog"><img :src="editIcon" alt="" > 编辑</el-button>
+                    <el-button class="button_refresh" @click="OpenOperationRecordDialog"><img :src="logIcon" alt=""> 操作记录</el-button>
+                    <el-button class="delete_button_border_no_bg" @click=""><el-icon class="img"><Delete /></el-icon>删除</el-button>
+                </div>
+            </template>
+        </TopBackNav>
+        <div class="page_item bottom_detail end_item">
+            <TabSearch :defaultTabKey="defaultShowTab" 
+                tabType="line" :tabList="tabList" 
+                @tabChange="HandleTabChange"
+                />
+            <div class="page_solid_line" />
+            <div class="page_jg_20" style="flex-shrink: 0 !important;"></div>
+
+            <!-- 联系人详情 -->
+            <ContactDetail v-if="defaultShowTab === 'contactDetails'"/>
+            <CustomerStatusOverview v-if="defaultShowTab === 'messageOverview'"/>
+        </div>
+
+
+        <!-- 操作记录 弹窗 -->
+        <PreviewDialog 
+            v-if="operationRecordDialogVisible"
+            class="operation_dialog"
+            title="操作记录"
+            :previewVisible="operationRecordDialogVisible"
+            :customFooter="true"
+            @close="CloseOperationRecordDialog">
+            <SearchBlock :searchList="operationRecordSearchList"></SearchBlock>
+            <FollowCard :card-list="finalOperationLogRenderData">
+                <template #operation><i></i></template>
+            </FollowCard>
+            <Pagination :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum"></Pagination>
+            <template #close>
+                <el-button @click="CloseOperationRecordDialog" class="button_background" >关闭</el-button>
+            </template>
+            <template #confirm><i></i></template>
+        </PreviewDialog>
+
+        <!-- 编辑学校弹窗 -->
+        <SchoolFormDialog 
+            v-if="schoolVisible"
+            v-model:visible="schoolVisible"  
+            :defaultFormData="schoolDefaultFormData">
+        </SchoolFormDialog>
+
+        <!-- 新增联系人弹窗 -->
+        <ConcactPeopleFormDialog 
+            v-if="concactPeopleVisible"
+            v-model:visible="concactPeopleVisible" 
+            title="新增联系人"
+            :default-form-data="concactPeopleDefaultFormData">
+        </ConcactPeopleFormDialog>
+
+
+    </div>
+
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import TopBackNav from '@/baseComponents/TopBackNav.vue';
+import addIcon from '@/assets/icon/add.svg';
+import peopleAuthenticationIcon from '@/assets/icon/people_authentication.png'
+import editIcon from '@/assets/icon/edit.svg'
+import logIcon from '@/assets/icon/log.png'
+import TabSearch from '@/baseComponents/TabSearch.vue';
+import {tabList} from './tabSearch'
+import ContactDetail from './contactDetail/index.vue'
+import CustomerStatusOverview from './customerStatusOverview/index.vue'
+import PreviewDialog from '@/baseComponents/PreviewDialog.vue';
+import SearchBlock from '@/baseComponents/SearchBlock.vue';
+
+import {operationRecordSearchList} from './searchBlock'
+import FollowCard from '@/components/FollowCard.vue';
+import Pagination from '@/baseComponents/Pagination.vue';
+
+import SchoolFormDialog from '@/components/SchoolFormDialog/index.vue'
+
+import ConcactPeopleFormDialog from '@/components/ConcactPeopleFormDialog/index.vue'
+
+
+const customerBaseMsg = ref({
+  schoolName: '北京市第一零九中学',
+  customerType: '首单客户',
+  educationStage: '九年一贯',
+  province: '北京',
+  district: '东城区',
+  address: '北京市东城区葱店西街56号',
+  owner: '张三',
+  claimTime: '2024-09-20',
+  lastFollowUpTime: '2025-03-12'
+});
+
+// 默认列表的tab切换
+const defaultShowTab = ref('messageOverview')
+const HandleTabChange = (val)=>{
+    defaultShowTab.value = val
+}
+
+
+/**  操作记录相关内容及操作 */
+const operationRecordDialogVisible = ref(false)
+const OpenOperationRecordDialog=()=>{
+    console.log('打开操作记录弹窗')
+    operationRecordDialogVisible.value = true
+}
+const CloseOperationRecordDialog=()=>{
+    operationRecordDialogVisible.value = false
+}
+
+
+
+/**  操作记录有关数据  */
+const operationLogList = ref([
+    {
+        id:1,
+        operationTime: '26-02-19 19:00',
+        operatorName: '张安顺',
+        schoolName: '北京师达学校',
+        operationType: '编辑学校信息',
+        operationContent: '学校名称【北京109中学】学段【初中】调整为学校名称【北京一零九中学】学段【九年一贯】。'
+    },
+    {
+        id:2,
+        operationTime: '26-02-19 19:00',
+        operatorName: '张安顺',
+        schoolName: '北京师达学校',
+        operationType: '删除联系人',
+        operationContent: '删除 姓名【张三】职务【校长】手机电话【17820681226】办公电话【17820681226】备注【文案文案】。'
+    },
+    {
+        id:3,
+        operationTime: '26-02-19 19:00',
+        operatorName: '张安顺',
+        schoolName: '北京师达学校',
+        operationType: '新增联系人',
+        operationContent: '新增 姓名【张三】职务【校长】手机电话【17820681226】办公电话【17820681226】备注【文案文案】。'
+    },
+    {
+        id:4,
+        operationTime: '26-02-19 19:00',
+        operatorName: '张安顺',
+        schoolName: '北京师达学校',
+        operationType: '编辑联系人',
+        operationContent: '联系人姓名【张三】职务【校长】手机电话【17820681226】备注【文案文案】调整为 联系人姓名【李四】职务【校长】手机电话【17820681226】备注【文案文案】。'
+    },
+    {
+        id:5,
+        operationTime: '26-02-19 19:00',
+        operatorName: '张安顺',
+        schoolName: '北京师达学校',
+        operationType: '转至公海',
+        operationContent: '将客户转至公海。'
+    }
+]);
+
+const finalOperationLogRenderData = computed(()=>{
+    return operationLogList.value.map(item=>{
+        return {
+            headerTitleList:[
+                item.operationTime,
+                item.operatorName,
+                item.schoolName,
+                item.operationType
+            ],
+            headerTags:[],
+            middleDesc:[],
+            bottomDesc:`操作内容：${item.operationContent}`
+        }
+    })
+})
+//  分页参数 有关数据 *
+const currentPage = ref(1)
+const pageSize = ref(20)
+const totalNum = ref(0)
+
+
+/**  编辑学校 有关数据 及操作 */
+const schoolVisible = ref(false)
+const schoolDefaultFormData = ref({})
+const OpenSchoolFormDialog = ()=>{
+    schoolVisible.value = true
+    schoolDefaultFormData.value = {
+        id: 1,
+        customerType: '首单客户',
+        schoolName: '流星花园学校',
+        schoolStage: 'middle',
+        province:'beijing',
+        provinceName: '北京市',
+        city:'dongcheng',
+        cityName: '东城区',
+        detailAddress:'通州北苑',
+        groupName: '小组',
+        owner: '张三',
+        claimTime: '2026-03-11',
+        lastFollowUpTime: '2026-03-11',
+        provinceArea:{
+            province:'beijing',
+            district:'dongcheng',
+        }
+    }
+}
+
+
+/** 新增联系人有关数据  及操作 */
+const concactPeopleVisible = ref(false)
+const concactPeopleDefaultFormData = ref({})
+const OpenConcactPeoplelFormDialog = ()=>{
+    concactPeopleVisible.value = true
+    concactPeopleDefaultFormData.value = {}
+}
+
+
+
+
+</script>
+
+
+
+<style lang="scss" scoped>
+.main_container{
+    gap:16px;
+
+    :deep(.top_right){
+        flex: 1 1;
+        .header_content{
+            display: flex;
+            align-items: center;
+            gap:10px;
+            font-weight: 600;
+            font-size: 20px;
+            color: #333333;
+            line-height: 28px;
+            .status_tag{
+                height: 25px;
+                border-radius: 4px ;
+                padding:0 8px;
+                font-weight: 400;
+                font-size: 12px;
+                color: #2E64FA;
+                background: rgba(46,100,250,0.1);
+            }
+        }
+        .desc{
+            display: flex;
+            gap:5px 16px;
+            flex-wrap: wrap;
+            font-size: 12px;
+            color: #999999;
+            margin-top: 8px;
+            margin-bottom: 16px;
+        }
+
+        .action{
+            display: flex;
+            gap:16px;
+            .el-button{
+                margin:0;
+                .img,
+                img{
+                    font-size: 16px;
+                    width: 16px;
+                    height: 16px;
+                    margin-right: 4px;
+                }
+            }
+        }
+    }
+    .bottom_detail{
+        overflow: auto;
+    }
+}
+
+.operation_dialog{
+    .follow_card{
+        margin-top: 16px;
+    }
+}
+</style>

src/views/highSeasCustomer/highSeasCustomerDetail/searchBlock.ts

@@ -0,0 +1,35 @@
+import { ref } from "vue";
+
+
+export const operationRecordSearchList = ref([
+    {
+        label: '时间',
+        key: 'time',
+        type: 'single',
+        options:[
+            { label: '全部', value: 'all' },
+            { label: '今天', value: 'today' },
+            { label: '昨天', value: 'yesterday' },
+            { label: '近3天', value: 'last3Days' },
+            { label: '近1周', value: 'last1Week' },
+            { label: '近1月', value: 'last1Month' },
+            { label: '自定义', value: 'custom' }
+        ],
+        defaultValue: 'all'
+    },
+    {
+        label: '人员',
+        key: 'personnel',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '马丁', value: 'martin' },
+            { label: '王诗雅', value: 'wangshiya' },
+            { label: '王梓木', value: 'wangzimu' },
+            { label: '殷思源', value: 'yinsiyuan' },
+            { label: '付文杰', value: 'fuwenjie' },
+            { label: '李润曦', value: 'lirunxi' },
+        ],
+        defaultValue: 'all'
+    },
+])

src/views/highSeasCustomer/highSeasCustomerDetail/tabSearch.ts

@@ -0,0 +1,13 @@
+import { ref } from 'vue';
+
+
+export const  tabList = ref([
+    {
+        label:'信息概览',
+        key:'messageOverview',
+    },
+    {
+        label:'联系人详情',
+        key:'contactDetails',
+    },
+])

src/views/highSeasCustomer/index.vue

@@ -18,7 +18,7 @@
                     <div class="table_row_option">
                         <span class="button_editor">认领</span>
                         <span class="button_editor" @click="OpenSchoolFormDialog(row)">编辑</span>
-                        <span class="button_editor">详情</span>
+                        <span class="button_editor" @click="GoToDetail(row)">详情</span>
                         <span class="el_button_delete">删除</span>
                     </div>
                 </template>
@@ -54,6 +54,9 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+
 import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
 import {formSearchList} from './formSearchGroup';
 import SearchBlock from '@/baseComponents/SearchBlock.vue';
@@ -66,6 +69,7 @@ import FormDialog from '@/baseComponents/FormDialog.vue';
 
 import {batchImportFormItemList} from './formDialog'
 
+const router = useRouter()
 
 // 表格数据
 const tableData = ref([
@@ -128,23 +132,24 @@ const OpenSchoolFormDialog = (row?:any)=>{
 }
 
 // 批量导入弹窗有关数据
-
 const batchImportVisible = ref(false)
 const batchImportSubmitLoading = ref(false)
-
 const OpenBatchImportDialog = ()=>{
     batchImportVisible.value = true   
 }
-
 const CloseBatchImportDialog = ()=>{
     batchImportVisible.value = false
 }
-
 const HandleBatchImportComfirm = ()=>{
     CloseBatchImportDialog()
 }
 
 
+/** 跳转详情 */
+const GoToDetail = (row)=>{
+    router.push(`highSeasCustomerDetail?id=${row.id}`)
+}
+
 </script>