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

<template>
    <div class="main_container">
        <TopBackNav>
            <template #topRight>
                <div class="header_content">
                    <span>{{ customerBaseMsg.name }}</span>
                    <el-tag type="success" effect="light" size="small" :disable-transitions="true" class="status_tag">
                        {{ customerBaseMsg.typeName }}
                    </el-tag>
                </div>
                <div class="desc">
                    <span>学段：{{ customerBaseMsg.stageName }}</span>
                    <span>省份：{{ customerBaseMsg.provinceName }}</span>
                    <span>地区：{{ customerBaseMsg.cityName }}</span>
                    <span>地址：{{ customerBaseMsg.address }}</span>
                    <span>归属人：{{ customerBaseMsg.claimUserName }}</span>
                    <span>认领时间：{{ customerBaseMsg.claimDatetime }}</span>
                    <span>上次跟进时间：{{ customerBaseMsg.lastFollowDatetime }}</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 :contactReloadFlag="contactReloadFlag" v-if="defaultShowTab === 'contactDetails'"/>
            <CustomerStatusOverview :followReloadFlag="followReloadFlag" v-if="defaultShowTab === 'messageOverview'"/>
        </div>


            <!-- 转让 弹窗 -->
        <FormDialog 
            v-if="transferFormDialogVisible"    
            title="转让" :visible="transferFormDialogVisible" 
            :submitLoading="transferFormDialogSubmitLoading" 
            :defaultFormData="transferDefaultFormData" 
            :formItemList="formItemList"
            @close="CloseTransferFormDialog"
            @confirm="HandleTransferFormDialogConfirm">
        </FormDialog>

        <!-- 操作记录 弹窗 -->
         <CustomerOperationDialog 
            v-if="operationRecordDialogVisible"
            v-model:dialogVisible="operationRecordDialogVisible">
         </CustomerOperationDialog>

       

        <!-- 编辑学校弹窗 -->
        <SchoolFormDialog 
            v-model:visible="schoolVisible"  
            v-model:submitLoading="schoolSubmitLoading"
            :defaultFormData="schoolDefaultFormData"
            @confirm="HandleSchoolFormDialogConfirm">
        </SchoolFormDialog>

        <!-- 新增联系人弹窗 -->
        <ConcactPeopleFormDialog 
            v-if="concactPeopleVisible"
            v-model:visible="concactPeopleVisible" 
            title="新增联系人"
            :defaultFormData="concactPeopleDefaultFormData"
            v-model:submitLoading="concactPeopleSubmitLoading"
            @confirm="HandleConcactPeopleDialogConfirm">
        </ConcactPeopleFormDialog>

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


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

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
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 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';

import CustomerOperationDialog from '@/components/CustomerOperationDialog/index.vue'

import {
    updatePrivateCustomerApi,
    sendBackHighSeasCustomerApi,
    transferCustomerApi,
    getTransferPeopleListApi,
    addPrivateContactApi,

} from '@/api/myCustomer'


interface CustomerBaseMsg {
    name:string,  //学校名称
    typeName:string,
    stageName:string,  //学段
    stageId:string,
    provinceName:string, //省份
    provinceId:string,
    cityName:string,  // 地区
    cityId:string,
    address:string,  //地址
    claimUserName:string,  //归属人
    claimDatetime:string,  //认领时间
    lastFollowDatetime:string, //上次跟进时间
}


const route = useRoute()
const router = useRouter()

const customerBaseMsg = ref<CustomerBaseMsg>({});

// 默认列表的tab切换
const defaultShowTab = ref('messageOverview')
const HandleTabChange = (val)=>{
    defaultShowTab.value = val
}



/** 1. 转至公海 弹窗有关数据 及操作  */
const transferPublicVisible = ref(false)
const transferPublicSubmitLoading = ref(false)
const CloseTransferPublicDialog = ()=>{
    transferPublicSubmitLoading.value = false
    transferPublicVisible.value = false
}
const OpenTransferPublicDialog = ()=>{
    transferPublicVisible.value = true
}
const HandleTransferPublicConfirm = async ()=>{
    transferPublicSubmitLoading.value = true
    let res = undefined
    try{
       res = await sendBackHighSeasCustomerApi(route.query.id)
    }catch{}
    if(res?.code == 200){
        CloseTransferPublicDialog()
        router.go(-1)
    }else{
        transferPublicSubmitLoading.value = false
    }
}



/**2. 转让弹窗相关内容及操作  */
const transferFormDialogVisible = ref(false)
const transferFormDialogSubmitLoading = ref(false)
const transferDefaultFormData = ref({})

const OpenTransferFormDialog = async()=>{
    console.log('打开转让弹窗')
    transferFormDialogVisible.value = true
    transferDefaultFormData.value = {
       schoolName: customerBaseMsg.value.name,
        currentOwner: customerBaseMsg.value.claimUserName,
        newOwner:'',
    }
    await GetOwnerList()
}
const CloseTransferFormDialog=()=>{
    transferFormDialogSubmitLoading.value = false
    transferFormDialogVisible.value = false
}
// 转让确认
const HandleTransferFormDialogConfirm = async (params)=>{
    transferFormDialogSubmitLoading.value = true
    const {formData,formRef} = params
    let finalParams = {
        customerId: route.query.id,
        userId: JSON.parse(formData.newOwner || '{}')?.userId,
        userName: JSON.parse(formData.newOwner || '{}')?.userName,
        groupId: JSON.parse(formData.newOwner || '{}')?.groupId,
    }

    let res = await transferCustomerApi(finalParams)
    if(res?.code == 200){
        CloseTransferFormDialog()
        router.go(-1)
    }else{
        transferFormDialogSubmitLoading.value = false
    }
}
// 获取归属人列表
const GetOwnerList = async ()=>{
    let res = await getTransferPeopleListApi(route.query.id)
    if(res?.code == 200){
        let userList =  res?.data?.map(item=>{
            return {
                label:item.userName,
                value:JSON.stringify({
                    userId:item.userId,
                    userName:item.userName,
                    groupId:item.groupId
                })
            }
        }) || []
        formItemList.value = formItemList.value.map(item=>{
            if(item.key == 'newOwner'){
                item.selectList = userList
            }
            return item
        })
    }
}


/** 3. 新增联系人有关数据  及操作 */
const concactPeopleVisible = ref(false)
const concactPeopleSubmitLoading = ref(false)
const concactPeopleDefaultFormData = ref({})
const contactReloadFlag = ref(0)  //重新加载联系人数据标识

const OpenConcactPeoplelFormDialog = ()=>{
    concactPeopleVisible.value = true
}
const CloseConcactPeoplelFormDialog = ()=>{
    concactPeopleVisible.value = false
    concactPeopleSubmitLoading.value = false
    concactPeopleDefaultFormData.value = {}
}
// 新增确认
const HandleConcactPeopleDialogConfirm = async (params)=>{
    concactPeopleSubmitLoading.value = true
    const {formData,formRef} = params
    let finalParams = {
        customerId: route.query.id,
        name: formData.name,
        positionId:JSON.parse(formData.position || '{}')?.value,
        positionName: JSON.parse(formData.position || '{}')?.label,
        phoneNo: formData.phoneNo,
        officePhoneNo: formData.officePhoneNo,
        remark: formData.remark,
    }
    let res = await addPrivateContactApi(finalParams)
    if(res?.code == 200){
        CloseConcactPeoplelFormDialog()
        // 重新查询联系人信息 
        contactReloadFlag.value += 1
    }else{
        concactPeopleSubmitLoading.value = false
    }
}


/** 4. 写跟进 弹窗有关数据 及操作*/
const followVisible = ref(false)
const followDefaultFormData = ref({})
const followReloadFlag = ref(0)  //重新加载跟进信息标识

const OpenFollowlFormDialog = ()=>{
    followVisible.value = true
    followDefaultFormData.value = {
        school:customerBaseMsg.value.name,
    }
}

// 跟进弹窗关闭后的后续操作
const HandleFollowDialogConfirm = ()=>{
    followDefaultFormData.value = {}
    followReloadFlag.value += 1
}

/** 5. 操作记录相关内容及操作*/
const operationRecordDialogVisible = ref(false)
// 打开操作记录弹窗
const OpenOperationRecordDialog=()=>{
    operationRecordDialogVisible.value = true
}


/** 6.编辑学校 有关数据 及操作 */
const schoolVisible = ref(false)
const schoolSubmitLoading = ref(false)
const schoolDefaultFormData = ref({})

const OpenSchoolFormDialog = ()=>{
    schoolVisible.value = true
    schoolDefaultFormData.value = {
        ...customerBaseMsg.value,
        schoolStage:JSON.stringify({
            label:customerBaseMsg.value?.stageName,
            value:customerBaseMsg.value?.stageId,
        }),
        provinceArea:{
            province:JSON.stringify({
                label:customerBaseMsg.value?.provinceName,
                value:customerBaseMsg.value?.provinceId,
            }),
            district:JSON.stringify({
                label:customerBaseMsg.value?.cityName,
                value:customerBaseMsg.value?.cityId,
            }),
        }
    }
}

const CloseSchoolFormDialog = ()=>{
    schoolVisible.value = false
    schoolSubmitLoading.value = false
    schoolDefaultFormData.value = {}
}

// 修改确认
const HandleSchoolFormDialogConfirm = async (params)=>{
    schoolSubmitLoading.value = true
    const {formData,formRef} = params
    let finalParams = {
        id: formData.id,
        name: formData.name,
        stageId: JSON.parse(formData.schoolStage || '{}')?.value,
        stageName: JSON.parse(formData.schoolStage || '{}')?.label,
        provinceId: JSON.parse(formData.provinceArea.province || '{}')?.value,
        provinceName: JSON.parse(formData.provinceArea.province || '{}')?.label,
        cityId: JSON.parse(formData.provinceArea.district || '{}')?.value,
        cityName: JSON.parse(formData.provinceArea.district || '{}')?.label,
        address: formData.address,
    }
    let res = undefined
    try{
        res = await updatePrivateCustomerApi(finalParams)
    }catch{}
    if(res?.code == 200){
        customerBaseMsg.value = {
            ...customerBaseMsg.value,
            name:formData.name,
            stageId: JSON.parse(formData.schoolStage || '{}')?.value,
            stageName: JSON.parse(formData.schoolStage || '{}')?.label,
            provinceId: JSON.parse(formData.provinceArea.province || '{}')?.value,
            provinceName: JSON.parse(formData.provinceArea.province || '{}')?.label,
            cityId: JSON.parse(formData.provinceArea.district || '{}')?.value,
            cityName: JSON.parse(formData.provinceArea.district || '{}')?.label,
            address: formData.address,
        }
        sessionStorage.setItem('customerMsg',JSON.stringify(customerBaseMsg.value))
        CloseSchoolFormDialog()
    }else{
        schoolSubmitLoading.value = false
    }
}

onMounted(async ()=>{
    // 获取学校的基础信息
    customerBaseMsg.value = JSON.parse(sessionStorage.getItem('customerMsg') || '{}')    
})
onUnmounted(()=>{
   sessionStorage.removeItem('customerMsg') 
})

</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>