提取预约登记公共组件

src/baseComponents/TimeNavLine.vue

@@ -2,12 +2,13 @@
     <div class="time_nav_line">
         <div class="time_point">
             <span class="time">{{navTime}}</span>
-            <span class="time_desc">{{timeDesc}}</span>
+            <span :class="['time_desc',timeDescClass]">{{timeDesc}}</span>
         </div>
         <div class="nav_line">
+            <div  :class="['line','start',{ 'first': isFirst}]"></div>
             <div class="point" v-if="!navIcon"></div>
             <img class="custom_icon" :src="navIcon" v-else alt="">
-            <div v-if="!isLast" class="line"></div>
+            <div v-if="!isLast" class="line end"></div>
         </div>
         <div class="nav_content">
             <slot name="navContent">
@@ -29,6 +30,10 @@ const props = defineProps({
         type:String,
         default:'时间说明'
     },
+    timeDescClass:{
+        type:String,
+        default:''
+    },
     navContent:{
         type:String,
         default:'导航内容'
@@ -36,6 +41,12 @@ const props = defineProps({
     isLast:{
         type:Boolean,
         default:false,
+        retuired:true
+    },
+    isFirst:{
+        type:Boolean,
+        default:false,
+        required:true
     }
 })
 
@@ -48,6 +59,7 @@ const props = defineProps({
     align-items:flex-start;
     gap:10px;
     .time_point{
+        padding-top: 12px;
         display: flex;
         flex-direction: column;
         .time{
@@ -87,8 +99,17 @@ const props = defineProps({
             flex-shrink: 0 !important;
         }
         .line{
-            flex:1 1;
-            border-left:dashed #efefef 2px;
+            &.start{
+                height: 12px;
+                border-right:dashed #efefef 2px;
+                &.first{
+                    border-right:none;
+                }
+            }
+            &.end{
+                flex:1 1;
+                border-right:dashed #efefef 2px;
+            }
         }
     }
     .nav_content{

src/components/FollowCard.vue

@@ -38,6 +38,7 @@
             <div class="card_content">
                 {{ item.bottomDesc }}
             </div>
+            <slot name="additional" :row="item"></slot>
         </li>
       
     </ul>

src/views/appointmentAndTodo/appointmentRegister/index.vue

@@ -0,0 +1,251 @@
+<template>
+    <div>
+        <SearchBlock :searchList="blockSearchList"></SearchBlock>
+            <div class="page_jg_20"></div>
+
+            <TimeNavLine v-for="(item,index) in appointmentList" 
+                :key="item.id" 
+                :navIcon="item.navIcon" 
+                :navTime="item.navTime" 
+                :timeDesc="item.timeDesc"
+                :timeDescClass="appointmentStatusToClass(item.timeDesc)"
+                :isFirst="index === 0"
+                :isLast="index == (appointmentList.length - 1)">
+                <template #navContent>
+                    <FollowCard :cardList="[{...(item.desc)}]">
+                        <template #operation="{row}">
+                            <div class="table_row_option">
+                                <span class="button_delete" @click="OpenCancelAppointmentDialog(row,item)">取消预约</span>
+                                <span class="option_button_editor" @click="OpenAppointmentDialog(row,item)">查看详情</span>
+                            </div>
+                        </template>
+
+                        <template #additional="{row}">
+                            <div class="cancel_reason" v-if="item.timeDesc === '已取消'">
+                                <span>取消原因：{{ item.cancelReason }}  </span>
+                            </div>
+                        </template>
+
+                    </FollowCard>
+                </template>
+            </TimeNavLine>
+    </div>
+      
+    <!-- 查看预约详情弹窗 -->
+        <FormDialog :defaultFormData="appointmentDefaultFormData" 
+            title="查看详情" :submitLoading="false" 
+            :formItemList="appointmentFormItemList" 
+            :visible="appointmentDialogVisible"
+            @close="CloseAppointmentDialog"
+            @confirm="CloseAppointmentDialog">
+    </FormDialog>
+
+    <!-- 取消预约弹窗 -->
+    <FormDialog 
+        class="cancel_appointment_dialog"
+        :defaultFormData="cancelAppointmentDefaultFormData"
+        title="取消预约" :submitLoading="false"
+        :formItemList="cancelAppointmentFormItemList"
+        :visible="cancelAppointmentDialogVisible"
+        @close="CloseCancelAppointmentDialog"
+        @confirm="HandleCancelAppointmentConfirm">
+        <template #form_pre>
+            <div class="desc">
+                {{ cancelAppointmentDefaultFormData.appointmentTime}} {{ cancelAppointmentDefaultFormData.school}}
+            </div>
+        </template>
+    </FormDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import SearchBlock from '@/baseComponents/SearchBlock.vue';
+import TimeNavLine from '@/baseComponents/TimeNavLine.vue';
+import FollowCard from '@/components/FollowCard.vue';
+import schoolIcon from '@/assets/clientManage/school.png'
+import FormDialog from '@/baseComponents/FormDialog.vue';
+import {appointmentFormItemList,cancelAppointmentFormItemList} from './formDialog'
+
+
+import {blockSearchList} from './searchBlock'
+
+
+const appointmentStatusToClass =  (status)=>{
+    switch(status){
+        case '待开始':
+            return 'active'
+        case '已结束':
+            return 'completed'
+        case '已取消':
+            return 'cancelled'
+    }
+}
+
+const appointmentList = ref([
+    {
+        id:1,
+        navTime: '14:00',
+        navIcon:schoolIcon,
+        timeDesc: '待开始',
+        navTitle:'北京市第一中学',
+        cancelReason:'',
+
+
+        desc:{
+            id:1,
+            headerTitleList:['北京市区第一中学'],
+            headerTags:[],
+            taskType:'',
+            middleDesc:['跟进人员：张三','角色：校长','联系人：王德态'],
+            bottomDesc:'跟进内容：9:50会议室，所有管理层一起参会，准备PPT9:50会议室，所有管理层一起参会，准备PPT9:50会议室，所有管理层一起参会，准备PPT',
+        }
+        
+    },
+    {
+        id:2,
+        navTime: '14:00',
+        navIcon:schoolIcon,
+        timeDesc: '已取消',
+        navTitle:'北京市第一中学',
+        cancelReason:'时间冲突',
+        desc:{
+            id:1,
+            headerTitleList:['北京市区第一中学'],
+            headerTags:[],
+            taskType:'',
+            productType:'大数据诊断平台',
+            middleDesc:['跟进人员：张三','角色：校长','联系人：王德态'],
+            bottomDesc:'跟进内容：9:50会议室，所有管理层一起参会，准备PPT9:50会议室，所有管理层一起参会，准备PPT9:50会议室，所有管理层一起参会，准备PPT',
+        }
+    },
+    {
+        id:2,
+        navTime: '14:00',
+        navIcon:schoolIcon,
+        timeDesc: '已结束',
+        navTitle:'北京市第一中学',
+        cancelReason:'时间冲突',
+        desc:{
+            id:1,
+            headerTitleList:['北京市区第一中学'],
+            headerTags:[],
+            taskType:'',
+            productType:'大数据诊断平台',
+            middleDesc:['跟进人员：张三','角色：校长','联系人：王德态'],
+            bottomDesc:'跟进内容：9:50会议室，所有管理层一起参会，准备PPT9:50会议室，所有管理层一起参会，准备PPT9:50会议室，所有管理层一起参会，准备PPT',
+        }
+    },
+])
+
+
+
+
+
+/**
+ * 查看预约详情弹窗
+*/
+const appointmentDialogVisible = ref(false)
+const appointmentDefaultFormData = ref({})
+// 打开弹窗
+const OpenAppointmentDialog = (row,navItm)=>{
+    console.log('row',row)
+    appointmentDefaultFormData.value = {
+        school:row.headerTitleList[0],
+        product:row.productType,
+        status:navItm.timeDesc,
+        contact:row.middleDesc[2].split('：')[1],
+        position:row.middleDesc[1].split('：')[1],
+        content:row.bottomDesc.split('：')[1],
+        appointmentType:'预约',
+        appointmentTime:navItm.navTime,
+        cancelReason:''
+    }
+    appointmentDialogVisible.value = true
+}
+// 关闭弹窗
+const CloseAppointmentDialog = ()=>{
+    appointmentDialogVisible.value = false
+}
+
+
+/**
+ * 取消预约弹窗
+ */
+const cancelAppointmentDialogVisible = ref(false)
+const cancelAppointmentDefaultFormData = ref({})
+const OpenCancelAppointmentDialog = (row,navItm)=>{
+    cancelAppointmentDialogVisible.value = true
+    cancelAppointmentDefaultFormData.value = {
+        school:row.headerTitleList[0],
+        appointmentTime:navItm.navTime,
+        cancelReason:''
+    }
+}
+const CloseCancelAppointmentDialog = ()=>{
+    cancelAppointmentDialogVisible.value = false
+}
+const HandleCancelAppointmentConfirm = (params)=>{
+    const {formData,formRef} = params
+    console.log('取消预约',formData.cancelReason)
+    CloseCancelAppointmentDialog()
+}
+
+</script>
+
+
+
+<style lang="scss" scoped>
+
+
+.time_nav_line{
+    :deep(.follow_card){
+        .audit_card{
+            border-color: transparent;
+            .table_row_option{
+                display: none;
+            }
+        }
+        .cancel_reason{
+            line-height: 20px;
+            font-weight: 400;
+            font-size: 14px;
+            color: #F56C6C;
+        }
+    }
+    :hover{
+        :deep(.follow_card){
+            .audit_card{
+                background-color: #F8FAFE;
+                border: 1px solid #EBEEF5;
+                .table_row_option{
+                    display: flex;
+                }
+            }
+        }
+    }
+
+    :deep(.time_point){
+        .cancelled{
+            color:#F56C6C;
+        }
+        .active{
+            color:#2E64FA;
+        }
+        .completed{
+            color:#999999;
+        }
+    }
+}
+
+.cancel_appointment_dialog{
+    .desc{
+        line-height: 22px;
+        font-weight: 600;
+        font-size: 16px;
+        color: #333333;
+        margin-bottom: 16px;
+    }
+}
+
+</style>

src/views/appointmentAndTodo/index.vue

@@ -35,57 +35,22 @@
                             :defaultTabKey="defaultTabType"
                             @tabChange="HandleTypeChange">
                         </TabSearch>
-                        <FormSearchGroup :searchList="formSearchList" @searchChange=""></FormSearchGroup>
+                        <FormSearchGroup v-if="defaultTabType === 'appointment'" :searchList="formSearchList" @searchChange=""></FormSearchGroup>
+                        
+                        <!-- 日历导航 -->
+                        <div v-if="defaultTabType === 'todo'">
+                        
+                            日历导航
+                        
+                        </div>
+
                     </div>
                 </div>
             </div>
-            <SearchBlock :searchList="blockSearchList"></SearchBlock>
-            <div class="page_jg_20"></div>
-
-            <TimeNavLine v-for="(item,index) in appointmentList" 
-                :key="item.id" 
-                :navIcon="item.navIcon" 
-                :navTime="item.navTime" 
-                :timeDesc="item.timeDesc"
-                :isLast="index == (appointmentList.length - 1)">
-                <template #navContent>
-                    <FollowCard :cardList="[{...(item.desc)}]">
-                        <template #operation="{row}">
-                            <div class="table_row_option">
-                                <span class="button_delete" @click="OpenCancelAppointmentDialog(row,item)">取消预约</span>
-                                <span class="option_button_editor" @click="OpenAppointmentDialog(row,item)">查看详情</span>
-                            </div>
-                        </template>
+            <AppointmentRegister v-if="defaultTabType === 'appointment'"></AppointmentRegister>
 
-                    </FollowCard>
-                </template>
-            </TimeNavLine>
+            <TodoRegister v-if="defaultTabType === 'todo'"></TodoRegister>
         </div>
-        
-        <!-- 查看预约详情弹窗 -->
-         <FormDialog :defaultFormData="appointmentDefaultFormData" 
-             title="查看详情" :submitLoading="false" 
-             :formItemList="appointmentFormItemList" 
-             :visible="appointmentDialogVisible"
-             @close="CloseAppointmentDialog"
-             @confirm="CloseAppointmentDialog">
-        </FormDialog>
-
-        <!-- 取消预约弹窗 -->
-        <FormDialog 
-            class="cancel_appointment_dialog"
-            :defaultFormData="cancelAppointmentDefaultFormData"
-            title="取消预约" :submitLoading="false"
-            :formItemList="cancelAppointmentFormItemList"
-            :visible="cancelAppointmentDialogVisible"
-            @close="CloseCancelAppointmentDialog"
-            @confirm="HandleCancelAppointmentConfirm">
-            <template #form_pre>
-                <div class="desc">
-                    {{ cancelAppointmentDefaultFormData.appointmentTime}} {{ cancelAppointmentDefaultFormData.school}}
-                </div>
-            </template>
-        </FormDialog>
     </div>
 </template>
 
@@ -93,59 +58,17 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
-import SearchBlock from '@/baseComponents/SearchBlock.vue';
 import TabSearch from '@/baseComponents/TabSearch.vue';
-
 import {tabSearchList} from './tabSearch'
 import {formSearchList} from './formSearchGroup'
-  
-import {blockSearchList} from './searchBlock'
-import TimeNavLine from '@/baseComponents/TimeNavLine.vue';
-import schoolIcon from '@/assets/clientManage/school.png'
-import FollowCard from '@/components/FollowCard.vue';
-
 import Calendar from '@/baseComponents/Calendar.vue'
-import FormDialog from '@/baseComponents/FormDialog.vue';
-import {appointmentFormItemList,cancelAppointmentFormItemList} from './formDialog'
+import AppointmentRegister from './appointmentRegister/index.vue'
 
-const defaultTabType = ref('appointment')
+import TodoRegister from './toDoRegister/index.vue'
 
 
-const appointmentList = ref([
-    {
-        id:1,
-        navTime: '14:00',
-        navIcon:schoolIcon,
-        timeDesc: '待开始',
-        navTitle:'北京市第一中学',
+const defaultTabType = ref('appointment')
 
-        desc:{
-            id:1,
-            headerTitleList:['北京市区第一中学'],
-            headerTags:[],
-            taskType:'',
-            middleDesc:['跟进人员：张三','角色：校长','联系人：王德态'],
-            bottomDesc:'跟进内容：9:50会议室，所有管理层一起参会，准备PPT9:50会议室，所有管理层一起参会，准备PPT9:50会议室，所有管理层一起参会，准备PPT',
-        }
-        
-    },
-    {
-        id:2,
-        navTime: '14:00',
-        navIcon:schoolIcon,
-        timeDesc: '待开始',
-        navTitle:'北京市第一中学',
-        desc:{
-            id:1,
-            headerTitleList:['北京市区第一中学'],
-            headerTags:[],
-            taskType:'',
-            productType:'大数据诊断平台',
-            middleDesc:['跟进人员：张三','角色：校长','联系人：王德态'],
-            bottomDesc:'跟进内容：9:50会议室，所有管理层一起参会，准备PPT9:50会议室，所有管理层一起参会，准备PPT9:50会议室，所有管理层一起参会，准备PPT',
-        }
-    },
-])
 
 const HandleTypeChange = (val)=>{
     defaultTabType.value = val
@@ -154,55 +77,6 @@ const HandleTypeChange = (val)=>{
 // 当前选中的日历信息
 const selectedCalendarTime =ref()
 
-/**
- * 查看预约详情弹窗
-*/
-const appointmentDialogVisible = ref(false)
-const appointmentDefaultFormData = ref({})
-// 打开弹窗
-const OpenAppointmentDialog = (row,navItm)=>{
-    console.log('row',row)
-    appointmentDefaultFormData.value = {
-        school:row.headerTitleList[0],
-        product:row.productType,
-        status:navItm.timeDesc,
-        contact:row.middleDesc[2].split('：')[1],
-        position:row.middleDesc[1].split('：')[1],
-        content:row.bottomDesc.split('：')[1],
-        appointmentType:'预约',
-        appointmentTime:navItm.navTime,
-        cancelReason:''
-    }
-    appointmentDialogVisible.value = true
-}
-// 关闭弹窗
-const CloseAppointmentDialog = ()=>{
-    appointmentDialogVisible.value = false
-}
-
-
-/**
- * 取消预约弹窗
- */
-const cancelAppointmentDialogVisible = ref(false)
-const cancelAppointmentDefaultFormData = ref({})
-const OpenCancelAppointmentDialog = (row,navItm)=>{
-    cancelAppointmentDialogVisible.value = true
-    cancelAppointmentDefaultFormData.value = {
-        school:row.headerTitleList[0],
-        appointmentTime:navItm.navTime,
-        cancelReason:''
-    }
-}
-const CloseCancelAppointmentDialog = ()=>{
-    cancelAppointmentDialogVisible.value = false
-}
-const HandleCancelAppointmentConfirm = (params)=>{
-    const {formData,formRef} = params
-    console.log('取消预约',formData.cancelReason)
-    CloseCancelAppointmentDialog()
-}
-
 </script>
 
 
@@ -275,39 +149,5 @@ const HandleCancelAppointmentConfirm = (params)=>{
             }
         }
     }
-    
 }
-
-.time_nav_line{
-    :deep(.follow_card){
-        .audit_card{
-            border-color: transparent;
-            .table_row_option{
-                display: none;
-            }
-        }
-    }
-    :hover{
-        :deep(.follow_card){
-            .audit_card{
-                background-color: #F8FAFE;
-                border: 1px solid #EBEEF5;
-                .table_row_option{
-                    display: flex;
-                }
-            }
-        }
-    }
-}
-
-.cancel_appointment_dialog{
-    .desc{
-        line-height: 22px;
-        font-weight: 600;
-        font-size: 16px;
-        color: #333333;
-        margin-bottom: 16px;
-    }
-}
-
 </style>