|
|
@@ -1,33 +1,39 @@
|
|
|
<template>
|
|
|
<div class="main_container">
|
|
|
- <div class="calendar" >
|
|
|
- <Calendar v-model:selectedCalendarTime="selectedCalendarTime"></Calendar>
|
|
|
+
|
|
|
+ <!-- 日历——预约总览 -->
|
|
|
+ <div v-if="defaultTabType == 'appointment'" class="calendar" >
|
|
|
+ <Calendar v-model:selectedCalendarTime="selectedCalendarTime"
|
|
|
+ :dateStatus="dateStatus">
|
|
|
+ </Calendar>
|
|
|
+
|
|
|
+ <!-- {{ selectedCalendarTime }} -->
|
|
|
<div class="calendar_desc">
|
|
|
<div class="calendar_desc_title">
|
|
|
- <span class="date_desc">7月预约</span>
|
|
|
- <span class="total_count">共20条</span>
|
|
|
+ <span class="date_desc">{{dayjs().month() + 1}}月预约</span>
|
|
|
+ <span class="total_count">共{{currentMonthAppointment.totalCount}}条</span>
|
|
|
</div>
|
|
|
<div class="calendar_desc_content">
|
|
|
<div class="active">
|
|
|
- <span class="num">10</span>
|
|
|
+ <span class="num">{{ currentMonthAppointment.waitStart }}</span>
|
|
|
<span>待开始</span>
|
|
|
</div>
|
|
|
<div class="split_line"></div>
|
|
|
<div class="completed">
|
|
|
- <span class="num">10</span>
|
|
|
+ <span class="num">{{ currentMonthAppointment.end }}</span>
|
|
|
<span>已结束</span>
|
|
|
</div>
|
|
|
<div class="split_line"></div>
|
|
|
<div class="cancelled">
|
|
|
- <span class="num">10</span>
|
|
|
+ <span class="num">{{ currentMonthAppointment.cancel }}</span>
|
|
|
<span>已取消</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="detail_content" style="flex:1 1">
|
|
|
- <div class="page_item appointment_todo">
|
|
|
+ <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">
|
|
|
@@ -36,13 +42,17 @@
|
|
|
:defaultTabKey="defaultTabType"
|
|
|
@tabChange="HandleTypeChange">
|
|
|
</TabSearch>
|
|
|
- <FormSearchGroup v-if="defaultTabType === 'appointment'" :searchList="formSearchList" @searchChange=""></FormSearchGroup>
|
|
|
-
|
|
|
+ <!-- 预约登记筛选条件 -->
|
|
|
+ <FormSearchGroup v-if="defaultTabType === 'appointment'"
|
|
|
+ :searchList="formSearchList"
|
|
|
+ @searchChange="HandleSearchChange">
|
|
|
+ </FormSearchGroup>
|
|
|
</div>
|
|
|
- <div class="content_right" style="flex:1 1">
|
|
|
+
|
|
|
+ <!-- 待办登记展示信息 -->
|
|
|
+ <div v-if="defaultTabType === 'todo'" class="content_right" style="flex:1 1">
|
|
|
<!-- 日历导航 头-->
|
|
|
<CalendarDateSelectHeader
|
|
|
- v-if="defaultTabType === 'todo'"
|
|
|
v-model:currentYear="currentYear"
|
|
|
v-model:currentMonth="currentMonth"
|
|
|
></CalendarDateSelectHeader>
|
|
|
@@ -50,11 +60,18 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 预约登记 -->
|
|
|
- <AppointmentRegister style="margin-top: 16px" v-if="defaultTabType === 'appointment'"></AppointmentRegister>
|
|
|
+ <AppointmentRegister
|
|
|
+ v-if="defaultTabType === 'appointment'"
|
|
|
+ :appointmentList="appointmentList"
|
|
|
+ :followerList="followerList"
|
|
|
+ :orderStatusList="orderStatusList"
|
|
|
+ @searchChange="HandleSearchChange">
|
|
|
+ </AppointmentRegister>
|
|
|
</div>
|
|
|
|
|
|
<!-- 待办登记 -->
|
|
|
- <div class="page_item" style="padding:10px" v-if="defaultTabType === 'todo'">
|
|
|
+ <div v-if="defaultTabType === 'todo'"
|
|
|
+ class="page_item" style="padding:10px">
|
|
|
<TodoRegister
|
|
|
v-model:currentYear="currentYear"
|
|
|
v-model:currentMonth="currentMonth"
|
|
|
@@ -66,7 +83,10 @@
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, onMounted } from 'vue';
|
|
|
+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'
|
|
|
@@ -77,6 +97,10 @@ import AppointmentRegister from './appointmentRegister/index.vue'
|
|
|
import TodoRegister from './toDoRegister/index.vue'
|
|
|
import CalendarDateSelectHeader from '@/components/CalendarTodoList/CalendarDateSelectHeader.vue';
|
|
|
|
|
|
+import {formatTime} from '@/utils/timeRangeGet'
|
|
|
+import schoolIcon from '@/assets/clientManage/school.png'
|
|
|
+
|
|
|
+
|
|
|
import {
|
|
|
getToDoTaskApi,
|
|
|
updateToDoTaskApi,
|
|
|
@@ -94,7 +118,7 @@ const HandleTypeChange = (val)=>{
|
|
|
}
|
|
|
|
|
|
// 当前选中的日历信息
|
|
|
-const selectedCalendarTime =ref()
|
|
|
+const selectedCalendarTime =ref(null)
|
|
|
|
|
|
const currentYear = ref(new Date().getFullYear())
|
|
|
const currentMonth = ref(new Date().getMonth() + 1 )
|
|
|
@@ -102,20 +126,115 @@ 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": "",
|
|
|
- "userId": '',
|
|
|
- "orderStatus": '',
|
|
|
- "queryStr": ""
|
|
|
+ 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()
|
|
|
})
|
|
|
@@ -196,9 +315,14 @@ onMounted(async ()=>{
|
|
|
flex:1 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ overflow: auto;
|
|
|
gap:10px;
|
|
|
.appointment_todo{
|
|
|
+ overflow: auto;
|
|
|
padding:16px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap:16px;
|
|
|
}
|
|
|
}
|
|
|
}
|
lm