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

<template>
    <div v-if="hasHistoryPermission" class="message_overview">
        <!-- 左侧：产品概览与最新状态 -->
        <div class="left_panel hide_scrollbar">
            <div v-if="productDataList?.length > 0" class="product_list">
                <template v-for="(item,index) in productDataList" :key="item.productId" >
                    <div class="list_item">
                        <div class="item_title">{{item.productName}}</div>
                        <div class="item_info">跟进次数：{{item.count}}</div>
                    </div>
                    <div v-if="index !== (productDataList?.length - 1)" class="page_solid_line" />
                </template>
            </div>
            <div v-else class="no_data_bg">
                <span>暂无数据</span>
            </div>
        </div>

        <!-- 中间：搜索与 我的跟进 -->
        <div class="center_panel">
            <div class="page_content hide_scrollbar  " ref="scrollDom"> 
                <div v-if="scrollMsg.isScrollTop" :style="{height:scrollMsg.headerHeight || '132px',flexShrink:'0'}"></div>

                <div class="search_page" ref="headerDom">
                    <DetailSelectSearch v-if="scrollMsg.isScrollTop" @searchChange="HandleSearchChange"></DetailSelectSearch>
                    <DetailBlockSearch v-else @searchChange="HandleSearchChange"></DetailBlockSearch>
                </div>
                <!-- style="margin-top: 16px;"  -->
                <FollowCard v-if="historyFollowRecord?.length > 0" :cardList="historyFollowRecord">
                    <template #operation="{row}">
                        <i></i>
                    </template>
                </FollowCard>
                <div v-else class="no_data_bg">
                    <span>暂无数据</span>
                </div>
            </div>

            <Pagination :showPageSize="true"  :currentPage="currentPage" 
                :pageSize="pageSize" :totalNum="totalNum"  
                @paginationChange="handlePaginationChange" >
                <template #paginationDesc>
                    {{ `共 ${totalNum} 条数据` }}
                </template>
            </Pagination>   
        </div>

        <!-- 右侧：跟进记录统计 -->
        <div class="right_panel">
            <!-- 之前归属人的跟进记录 -->
            <!-- 历史跟进的状态是否展示 要判断是否给当前用户开放历史跟进权限 -->
            <div class="history_statistics">
                <div class="stat_header">
                    <span>跟进记录</span>
                </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>
            </div>
        </div>
    </div>
    <div v-else  class="message_overview no_data_bg"> 
        <span>暂无权限 </span>
    </div>
</template>

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

import DetailSelectSearch from '@/components/HighSeasCustomerHeaderSearch/DetailSelectSearch/index.vue'
import DetailBlockSearch from '@/components/HighSeasCustomerHeaderSearch/DetailBlockSearch/index.vue'
import {historyFollowSearchList} from '@/components/HighSeasCustomerHeaderSearch/DetailBlockSearch/searchBlock'
import {historyFollowSearchSelectList} from '@/components/HighSeasCustomerHeaderSearch/DetailSelectSearch/formSearchGroup'
import {historyFollowSearchParams} from '@/components/HighSeasCustomerHeaderSearch/commonVar'


import FollowCard from '@/components/FollowCard.vue';
import Pagination from '@/baseComponents/Pagination.vue';

import {
    getHighSeasCustomerDetailApi,
} from '@/api/highSeasCustomer'
import {winnerCaseStatusMsg} from '@/components/dict'
import { useHeaderFixed } from '@/baseComponents/useHeaderFixed'

interface ProductStatusItm {
    productId:string,
    productName:string,
    count:string
}

const route = useRoute()

const scrollDom = ref()
const headerDom = ref()
const scrollMsg  = useHeaderFixed(scrollDom,headerDom,132)  //搜索栏是否需要在滚动的时候固定到顶部


/** 1. 页面展示有关变量 */
// 左侧列表的跟进产品统计
const productDataList = ref<ProductStatusItm[]>([]);
// 历史跟进记录 
const historyFollowRecord = ref([])
// 历史跟进 数据总览
const historyFollowData = ref({
    hsitoryProductNum:0,
    historyPeopleNum:0,
    followTimes:0,
})

/**
 * 2. 列表分页参数及相关操作 
 */
const currentPage = ref(1)
const pageSize = ref(20)
const totalNum = ref(0)

const hasHistoryPermission = ref(true)  //是否有查看历史跟进记录的权限
const handlePaginationChange = async (params)=>{
    const {type,val} = params
    if(type == 'currentPage'){
        currentPage.value = val
    }else if(type == 'pageSize'){
        pageSize.value = val
    }
    await GetHighSeasCustomerDetail()
}

// 获取信息概览页面的有关数据
const GetHighSeasCustomerDetail = async ()=>{
    let params = {
        customerId: route.query.id,    
        productId: historyFollowSearchParams.value.product == 'all' ? '' : historyFollowSearchParams.value.product,      
        followUpStatus: historyFollowSearchParams.value.followStatus == 'all' ? '' : historyFollowSearchParams.value.followStatus,
        followUpUser: historyFollowSearchParams.value.member == 'all' ? '' : historyFollowSearchParams.value.member,   
        pageNum:currentPage.value,
        pageSize:pageSize.value
    }

    let res = await getHighSeasCustomerDetailApi(params)
    if(res?.code == 200){
        const {followOverViewData,productOverviewData,
                selectData,dataPageList,historyFollowStatus
        } = res?.data || {}

        hasHistoryPermission.value = historyFollowStatus === 0 ? false : true 
        // 右侧 跟进记录
        historyFollowData.value = {
            hsitoryProductNum:followOverViewData.historyProductCount,
            historyPeopleNum:followOverViewData.historyPersonCount,
            followTimes:followOverViewData.historyFollowCount,
        }
        // 左侧 产品列表
        productDataList.value = productOverviewData?.map(item=>{
            return {
                productId:item.productId,
                productName:item.productName,
                count:item.count,
            }
        }) || []

        // 中间 筛选项列表
        const {memberData, productData, followData} = selectData || {}
        let memberOptions = memberData?.map(item=>{
            return {
                label:item.username,
                value:item.id,
            }
        }) || []
        let productOptions = productData?.map(item=>{
            return {
                label:item.name,
                value:item.id,
            }
        }) || []
        let followOptions = followData?.map(item=>{
            return {
                label:item.name,
                value:item.id,
            }
        }) || []
        historyFollowSearchList.value = historyFollowSearchList.value.map(item=>{
            switch(item.key){
                case 'member':
                    item.options = [
                        {
                            label:'全部',
                            value:'all'
                        },
                        ...memberOptions
                    ]
                    break
                case 'product':
                    item.options = [
                        {
                            label:'全部',
                            value:'all'
                        },
                        ...productOptions
                    ]
                    break
                case 'followStatus':
                    item.options = [
                        {
                            label:'全部',
                            value:'all'
                        },
                        ...followOptions
                    ]
                    break
            }
            item.defaultValue = historyFollowSearchParams.value[item.key]
            return item
        })
        historyFollowSearchSelectList.value = historyFollowSearchSelectList.value.map(item=>{
            switch(item.key){
                case 'member':
                    item.options = [
                        {
                            label:'全部人员',
                            value:'all'
                        },
                        ...memberOptions
                    ]
                    break
                case 'product':
                    item.options = [
                        {
                            label:'全部产品',
                            value:'all'
                        },
                        ...productOptions
                    ]
                    break
                case 'followStatus':
                    item.options = [
                        {
                            label:'全部状态',
                            value:'all'
                        },
                        ...followOptions
                    ]
                    break
            }
            item.defaultValue = historyFollowSearchParams.value[item.key]
            return item
        })

        // 中间历史跟进信息
        totalNum.value = dataPageList.total
        historyFollowRecord.value = dataPageList.records?.map(item=>{
            let headerTags = []
            if(item.followName){
                headerTags.push(item.followName)
            }

            let statusTag = []
            //  auditStatus 审核状态：0-待审核，1-已通过，2-已驳回   successStatus 是否是赢单 0否 1是
            if([0,1,2].includes(item.auditStatus) && item.successStatus === 1){
                statusTag.push(winnerCaseStatusMsg(item.auditStatus))
            }
            return {
                headerTitleList:[
                    item.claimDatetime,
                    item.customerName,
                    item.productName
                ],
                headerTags,
                statusTag,
                middleDesc:[
                    `跟进人：${item.claimUserName}`,
                    `联系人：${item.customerPersonName}`,
                    `职务：${item.positionName}`
                ],
                // orderStatus 预约/待办状态，0-待开始，1-已结束，2-已取消(预约) null-已关闭(待办)
                taskType:[0,1].includes(item.orderType) && [0,1].includes(item.orderStatus) ? (item.orderType === 0 ? '预约' : '待办') : '',
                bottomDesc:`跟进内容：${item.followContent}`,
                ...item,
            }
        }) || []
    }
}

// 筛选项变更触发的查询
const HandleSearchChange = async (params,key)=>{
    historyFollowSearchParams.value = {
        ...historyFollowSearchParams.value,
        ...params,
    }
    await GetHighSeasCustomerDetail()
}




onMounted(async ()=>{
    await GetHighSeasCustomerDetail()
})

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

    &.no_data_bg{
        span{
            margin-top: 0px;
            padding-top:290px;
        }
    }

    > * {
        height: 100%;
        overflow: auto;
    }

    // 左侧栏样式
    .left_panel {
        width: 200px; // 稍微加宽以容纳内容
        display: flex;
        flex-direction: column;
        gap: 16px;


        .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;
                }
            }
        }
        .no_data_bg{
            border: 1px solid #EBEEF5;
            height: 150px;
            background-position: 50% 10px;
            background-size: 200px auto;
            min-height: 150px;
            span{
                margin-top: 110px;
            }
        }
    }

    // 中间栏样式
    .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){
            .audit_card{
                   &:hover{
                    border:solid #2E64FA 1px;
                    background-color: rgba(46, 100, 250,0.04);
                }
            }
        }
     
    }

    // 右侧栏样式
    .right_panel {
        width: 320px;
        .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;
            }

            .stat_numbers{
                display: flex;
                justify-content: space-between;
                gap:10px;
                align-items: center;

                .num_item{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap:4px;
                    color: #666666;
                    padding:0 12px;

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