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

<template>
    <div class="main_container">
        <TopBackNav>
            <template #topRight>
                <div class="header_content">
                    <span>{{ customerBaseMsg.name }}</span>
                </div>
                <div class="desc">
                    <span>学段：{{ customerBaseMsg.stageName }}</span>
                    <span>省份：{{ customerBaseMsg.provinceName }}</span>
                    <span>地区：{{ customerBaseMsg.cityName }}</span>
                    <span>地址：{{ customerBaseMsg.address }}</span>
                    <span>进入公海时间：{{ customerBaseMsg.resetDatetime }}</span>
                    <span>闲置天数：{{ customerBaseMsg.unUsedDayCount }}</span>
                </div>
                <div class="action">
                    <el-button class="button_background" @click="ClaimCustomer"><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="OpenDeleteDialog"><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 :reloadFlag="reloadFlag" 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-model:visible="schoolVisible"  
            :defaultFormData="schoolDefaultFormData"
            v-model:submitLoading="schoolSubmitLoading"
            @confirm="HandleSchoolDialogConfirm">
        </SchoolFormDialog>

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

        <!-- 删除客户弹窗 -->
        <DeleteCustomerDialog 
            :currentDeleteRow="customerBaseMsg"
            v-model:dialogVisible="deleteDialogVisible"
            @confirm="HandleDeleteConfirm">
        </DeleteCustomerDialog>
    </div>

</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

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'
import { ElMessage } from 'element-plus';

import DeleteCustomerDialog from '../components/DeleteCustomerDialog.vue';

import {
    addContactPeopleApi,
    claimHighSeasCustomerApi,
    updateHighSeasCustomerApi,
    getOperationLogApi,
} from '@/api/highSeasCustomer'

interface CustomerBaseMsg {
    name:string,  //学校名称
    stageName:string,  //学段
    stageId:string,
    provinceName:string, //省份
    provinceId:string,
    cityName:string,  // 地区
    cityId:string,
    address:string,  //地址
    resetDatetime:string,  //进入公海时间
    unUsedDayCount:string,  //闲置天数
}

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

const customerBaseMsg = ref<CustomerBaseMsg>({}); //客户基础信息

/**
 * 1. 信息展示切换
 */
const defaultShowTab = ref('messageOverview')
const HandleTabChange = (val)=>{
    defaultShowTab.value = val
}


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

const OpenConcactPeoplelFormDialog = ()=>{
    concactPeopleVisible.value = true
}
const CloseConcactPeoplelFormDialog = ()=>{
    concactPeopleSubmitLoading.value = false
    concactPeopleVisible.value = false
    concactPeopleDefaultFormData.value = {}
}
const HandleAddPeoplelConfirm = async (params:any)=>{
    concactPeopleSubmitLoading.value = true
    const {formData,formRef} = params
    let transferParams = {
        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 = undefined
    try{
        res = await addContactPeopleApi(transferParams)
    }catch{}
    if(res?.code == 200){
        ElMessage.success(res?.msg)
        CloseConcactPeoplelFormDialog()
        reloadFlag.value += 1
    }
}



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

const schoolDefaultFormData = ref({})
const CloseSchoolFormDialog = ()=>{
    schoolVisible.value = false
    schoolSubmitLoading.value = false
    schoolDefaultFormData.value = {}
}
// 打开弹窗
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 HandleSchoolDialogConfirm = async (params)=>{
    schoolSubmitLoading.value = true
    const {formData,formRef} = params
    let transferParams = {
        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 updateHighSeasCustomerApi(transferParams) 
    }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
    }
}



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

    await GetOperationList()
}
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 GetOperationList = async ()=>{
    let params = {
        customerId: route.params.id,
        "operUserId": '',
        // "groupId": 0,
        // "startDate": "",
        // "endDate": "",
        pageNum: currentPage.value,
        pageSize: pageSize.value
    }
    let res = await getOperationLogApi(params)
    if(res?.code == 200){
       const {data:operationData, dateData, groupData, memberData} =  res?.data
       totalNum.value = operationData.total

       finalOperationLogRenderData = operationData.records.map(item=>{
        return {
            headerTitleList:[
                item.operDatetime,
                item.operName,
                item.operationType
            ],
            headerTags:[],
            middleDesc:[],
            bottomDesc:`操作内容：${item.operationContent}`
        }
       })


    }

}


/**
 * 5. 认领 有关操作
 */
const ClaimCustomer = async ()=>{
    let res = await claimHighSeasCustomerApi(route.query.id)
    if(res?.code == 200){
        ElMessage.success(res?.msg)
        router.go(-1)
    }
}

/**
 * 6. 删除弹窗 有关操作
 */
const deleteDialogVisible = ref(false)
const OpenDeleteDialog = ()=>{
    deleteDialogVisible.value = true
}
// 删除后执行的操作
const HandleDeleteConfirm = ()=>{
    router.go(-1)
}

onMounted(async ()=>{
    // 获取学校的基础信息
    customerBaseMsg.value = JSON.parse(sessionStorage.getItem('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;
        }
        .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>