clientManageSystem/src/views/myCustomer/myCustomerDetail/index.vue

<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="OpenFollowlFormDialog"><img :src="peopleEditIcon" 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="OpenTransferPublicDialog"><img :src="poepleMoveIcon" alt=""> 转至公海</el-button>
                    <el-button class="button_refresh" @click="OpenTransferFormDialog"><img :src="exchangeIcon" alt="" > 转让</el-button>
                    <el-button class="button_refresh" @click="OpenOperationRecordDialog"><img :src="logIcon" alt=""> 操作记录</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>


            <!-- 转让 弹窗 -->
        <FormDialog 
            v-if="transferFormDialogVisible"    
            title="转让" :visible="transferFormDialogVisible" 
            :submit-loading="transferFormDialogSubmitLoading" 
            :default-form-data="transferDefaultFormData" 
            :formItemList="formItemList"
            @close="CloseTransferFormDialog"
            @confirm="HandleTransferFormDialogConfirm">
        </FormDialog>

        <!-- 操作记录 弹窗 -->
        <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>

        <!-- 写跟进弹窗 -->
        <FollowFormDialog 
            v-if="followVisible"
            v-model:visible="followVisible"
            :defaultFormData="followDefaultFormData">
        </FollowFormDialog>


        <!-- 转至公海 提示弹窗 -->
        <Dialog :visible="transferPublicVisible" 
            :submitLoading="transferPublicSubmitLoading"
            @close="CloseTransferPublicDialog"
            @confirm="HandleTransferPublicConfirm">
            请确认是否将【{{customerBaseMsg.schoolName}}】转至公海
        </Dialog>

    </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 peopleEditIcon from '@/assets/icon/people_edit.png'
import poepleMoveIcon from '@/assets/icon/people_move.png'
import editIcon from '@/assets/icon/edit.svg'
import exchangeIcon from '@/assets/icon/exchange.png'
import logIcon from '@/assets/icon/log.png'
import TabSearch from '@/baseComponents/TabSearch.vue';
import {tabList} from './tabSearch'
import FormDialog from '@/baseComponents/FormDialog.vue';
import {formItemList} from './formDialog'
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'

import FollowFormDialog from './components/FollowFormDialog/index.vue'
import Dialog from '@/baseComponents/Dialog.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 transferFormDialogVisible = ref(false)
const transferFormDialogSubmitLoading = ref(false)
const transferDefaultFormData = ref({
    schoolName: '北京市第一零九中学',
    currentOwner: '张三',
    newOwner:'',
})
const OpenTransferFormDialog=()=>{
    console.log('打开转让弹窗')
    transferFormDialogVisible.value = true
    GetOwnerList()
}
const CloseTransferFormDialog=()=>{
    transferFormDialogVisible.value = false
}
const HandleTransferFormDialogConfirm = ()=>{
    CloseTransferFormDialog()
}
// 获取归属人列表
const GetOwnerList = ()=>{
    formItemList.value = formItemList.value.map(item=>{
        if(item.key == 'newOwner'){
            let list = [
                {
                    label:'李四',
                    value:'1'
                },
                {
                    label:'王五',
                    value:'2'
                },
                {
                    label:'赵六',
                    value:'3'
                },
            ]
            item.selectList = [...list]
        }
        return item
    })
}


/**  操作记录相关内容及操作 */
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 = {}
}


/** 写跟进 弹窗有关数据 及操作 */
const followVisible = ref(false)
const followDefaultFormData = ref({})
const OpenFollowlFormDialog = ()=>{
    followVisible.value = true
    followDefaultFormData.value = {
        school:customerBaseMsg.value.schoolName,
    }
    console.log('跟进弹窗的内容---',followDefaultFormData.value)
}


/** 转至公海 弹窗有关数据 及操作  */
const transferPublicVisible = ref(false)
const transferPublicSubmitLoading = ref(false)
const CloseTransferPublicDialog = ()=>{
    transferPublicVisible.value = false
}
const OpenTransferPublicDialog = ()=>{
    transferPublicVisible.value = true
}
const HandleTransferPublicConfirm = ()=>{
    CloseTransferPublicDialog()
}


</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{
                    width: 16px;
                    height: 16px;
                    margin-right: 4px;
                }
            }
        }
    }
    .bottom_detail{
        overflow: auto;
    }
}

.operation_dialog{
    .follow_card{
        margin-top: 16px;
    }
}
</style>