clientManageSystem/src/views/appointmentAndTodo/index.vue

<template>
    <div class="main_container">

        <!-- 日历——预约总览 -->
        <div v-if="defaultTabType == 'appointment'"  class="calendar" >
            <Calendar v-model:selectedCalendarTime="selectedCalendarTime" 
                :dateStatus="dateStatus">
            </Calendar>

             <div class="calendar_desc"> 
                <div class="calendar_desc_title">
                    <span class="date_desc">{{dayjs(selectedCalendarTime || undefined).month() + 1}}月预约</span>
                    <span class="total_count">共{{currentMonthAppointment.totalCount}}条</span>
                </div>
                <div class="calendar_desc_content">
                    <div class="active">
                        <span class="num">{{ currentMonthAppointment.waitStart }}</span>
                        <span>待开始</span>
                    </div>
                    <div class="split_line"></div>
                    <div class="completed">
                        <span class="num">{{ currentMonthAppointment.end }}</span>
                        <span>已结束</span>
                    </div>
                    <div class="split_line"></div>
                    <div class="cancelled">
                        <span class="num">{{ currentMonthAppointment.cancel }}</span>
                        <span>已取消</span>
                    </div>
                </div>
             </div>
        </div>

        <div class="detail_content">
            <div class="page_item appointment_todo" :style="defaultTabType === 'appointment' ? {flex:'1 1'} : {}">
                <div class="page_search">
                    <div class="search_content">
                        <div class="content_left">
                            <TabSearch  tabType="box" 
                                :tabList="tabSearchList" 
                                :defaultTabKey="defaultTabType"
                                @tabChange="HandleTypeChange">
                            </TabSearch>
                            <!-- 预约登记筛选条件 -->
                            <FormSearchGroup v-if="defaultTabType === 'appointment'" 
                                :searchList="formSearchList" 
                                @searchChange="HandleSearchChange">
                            </FormSearchGroup>
                        </div>

                        <!-- 待办登记展示信息 -->
                        <div  v-if="defaultTabType === 'todo'" class="content_right" style="flex:1 1">
                            <!-- 日历导航 头-->
                            <CalendarDateSelectHeader 
                                v-model:currentYear="currentYear"
                                v-model:currentMonth="currentMonth"
                            ></CalendarDateSelectHeader>
                        </div>
                    </div>
                </div>
                <!-- 预约登记 -->
                <AppointmentRegister  
                    v-if="defaultTabType === 'appointment'" 
                    :appointmentList="appointmentList"
                    :followerList="followerList"
                    :orderStatusList="orderStatusList"
                    @searchChange="HandleSearchChange">
                </AppointmentRegister>
            </div>

            <!-- 待办登记 -->
            <div v-if="defaultTabType === 'todo'" class="page_item"  style="padding:10px">
                <TodoRegister 
                    v-model:currentYear="currentYear"
                    v-model:currentMonth="currentMonth"
                ></TodoRegister>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import dayjs from 'dayjs';


import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
import TabSearch from '@/baseComponents/TabSearch.vue';
import {tabSearchList} from './tabSearch'
import {formSearchList} from './formSearchGroup'
import Calendar from '@/baseComponents/Calendar.vue'
import AppointmentRegister from './appointmentRegister/index.vue'

import TodoRegister from './toDoRegister/index.vue'
import CalendarDateSelectHeader from '@/baseComponents/CalendarTodoList/CalendarDateSelectHeader.vue';

import {formatTime} from '@/utils/timeRangeGet'
import schoolIcon from '@/assets/clientManage/school.png'

import { getAppointmentListApi} from '@/api/appointmentAndTodo'

const defaultTabType = ref('appointment')

const HandleTypeChange = (val)=>{
    defaultTabType.value = val
}

// 当前选中的日历信息
const selectedCalendarTime =ref(dayjs())

const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth() + 1 )

/**
 * 处理日期的选择
 */

 const currentMonthAppointment = ref({
    totalCount:0,
    waitStart:0,
    end:0,
    cancel:0,

 })
 const dateStatus = ref([])  // 当月的日程状态
 const appointmentList = ref([])
 const followerList = ref([])
 const orderStatusList = ref([])

const searchParams = ref({
    follower:'all',
    appointmentStatus:'all',
    queryStr:'',

})
const HandleSearchChange = async (params,key)=>{
    searchParams.value = {
        ...searchParams.value,
        ...params
    }
    await GetAppointmentList()
    
}
// 查询预约登记信息
const GetAppointmentList = async ()=>{
    let params = {
        datetime: formatTime(selectedCalendarTime.value).split(' ')[0],
        userId: searchParams.value.follower == 'all' ? '' : searchParams.value.follower,
        orderStatus: searchParams.value.appointmentStatus == 'all' ? '' : searchParams.value.appointmentStatus,
        queryStr: searchParams.value.queryStr
    }
    let res = await getAppointmentListApi(params)
    if(res?.code == 200){
        const {selectData,dataList,dateList,status0Count, status1Count, status2Count, totalCount } = res?.data
        currentMonthAppointment.value = {
            totalCount:totalCount,
            waitStart:status0Count,
            end:status1Count,
            cancel:status2Count
        }

        dateStatus.value = dateList.map(item=>{
            return {
                day:item.day,
                hasToDo:item.status === 1 ? true : false  
            }
        })

        appointmentList.value = dataList?.map(item=>{
            return {
                desc:{
                    id:item.id,
                    headerTitleList:[item.customerName],
                    headerTags:[],
                    taskType:'',
                    productType:item.productName,
                    middleDesc:[`跟进人员：${item.claimUserName}`,
                                `角色：${item.positionName}`,
                                `联系人：${item.customerPersonName}`,
                                `地址：${item.address}`,
                            ],
                    bottomDesc:`跟进内容：${item.followContent}`,
                },
                ...item,
                navIcon:schoolIcon,
                timeDesc:appointmentStatusToName(item.orderStatus),
                // id:item.id,
                // navTime: item.orderDatetime,
                // navTitle:item.customerName,
                // cancelReason:item.cancelRemark, 
            }
        })

        const {memberData,orderStatusData}  = selectData || {}
        followerList.value = memberData?.map(item=>{
            return {
                label:item.username,
                value:item.id
            }
        })
        orderStatusList.value = orderStatusData?.map(item=>{
            return {
                label:item.name,
                value:item.status
            }
        })
    }
}

const appointmentStatusToName = (status)=>{
    switch(status){
        case 0:
            return '待开始'
        case 1:
            return '已结束'
        case 2:
            return '已取消'
    }
}

watch(()=>selectedCalendarTime.value, async(newVal)=>{
    await GetAppointmentList()
})

onMounted(async ()=>{
    await GetAppointmentList()
})
</script>


<style lang="scss" scoped>
.main_container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap:20px;
    > div{
        overflow:auto;
    }

    .calendar{
        padding:16px;
        width: 320px;
        flex-shrink: 0;
        background: #FFFFFF;
        border-radius: 10px 10px 10px 10px;
        .calendar_desc{
            margin-top: 24px;
            padding:16px;
            background: #F8FAFE;
            border-radius: 10px;
            border: 1px solid #EBEEF5;
            .calendar_desc_title{
                display: flex;
                justify-content: space-between;
                line-height: 22px;
                font-size: 16px;
                color: #333333;
                .date_desc{
                    font-weight: 600;
                }
            }
            .calendar_desc_content{
                display: flex;
                gap:28px;
                justify-content: space-between;
                align-items: center;
                margin-top: 18px;
                line-height: 20px;
                font-size: 14px;
                > div{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap:4px;
                    .num{
                        font-weight: 600;
                    }
                }
                .split_line{
                    width: 1px;
                    height: 32px;
                    background-color: #EBEEF5;
                }

                .active{
                    color:#2E64FA;
                }
                .completed{
                    color:#999999;

                }
                .cancelled{
                    color:#F56C6C
                }
            }
        }
    }

    .detail_content{
        flex:1 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
        gap:10px;
        .appointment_todo{
            flex-shrink: 0;
            overflow: auto;
            padding:16px;
            display: flex;
            flex-direction: column;
            gap:16px;
        }
    }
}

</style>