添加预约登记的查看详情弹窗和取消预约弹窗

src/baseComponents/FormDialog.vue

@@ -477,6 +477,7 @@
             </template>
 
             <a v-else-if="item.type=='url'"  @click="HandlePreviewFile(formData[item.key])" >{{ formData[item.key]?.name }}</a>
+            <span v-else-if="item.type == 'text'">{{ formData[item.key] }}</span>
           </template>
 
           <template v-else>
@@ -571,7 +572,7 @@ const handleRemove = ()=>{
   console.log('移除')
 }
 type  ItemType = 
-  |'input'|'password'|'textarea'|'number'|'radio'
+  |'input'|'password'|'textarea'|'number'|'radio' | 'text'
   |'select'|'multipleSelect' | 'singleSelectSearch' | 'multipleSelectSearch' | 'unionSelect' |'checkbox'|'datePicker' | 'checkboxButton'
   |'dateTimePicker'| 'dateTimePickerNoRange' |'datePickerNoRange' |'url'|'file' | 'switch' | 'imgFile' | 'noDragFile' | 'fileShowList' | String
 

src/components/FollowCard.vue

@@ -20,7 +20,7 @@
                         </el-tag>
                     </template>
                     <span v-if="item.taskType" class="task_type">{{item.taskType}}</span>
-                    
+                    <span v-if="item.productType" class="product_type">{{item.productType}}</span>
                 </div>
                 <!-- 右侧操作信息 -->
                 <div class="header_right">
@@ -50,6 +50,7 @@ interface AuditItm {
     headerTitleList:Array<string>,
     headerTags:Array<string>,
     taskType:string,
+    productType:string,
     middleDesc:Array<string>,
     bottomDesc:string,
 }
@@ -111,6 +112,15 @@ const props = defineProps({
                     background: #2E64FA;
                     border-radius: 4px;
                 }
+                .product_type{
+                    padding:3px 8px;
+                    line-height: 18px;
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #2E64FA;
+                    border-radius:4px;
+                    border: 1px solid #2E64FA;
+                }
             }
             .header_right{
                 display: flex;

src/views/appointmentAndTodo/formDialog.ts

@@ -0,0 +1,78 @@
+import { ref } from 'vue';
+
+// 预约详情表单项列表
+export const appointmentFormItemList = ref([
+    {
+        key: 'school',
+        label: '跟进学校',
+        type: 'text',
+        style: { }
+    },
+    {
+        key: 'product',
+        label: '跟进产品',
+        type: 'text',
+        style: { }
+    },
+    {
+        key: 'status',
+        label: '跟进状态',
+        type: 'text',
+        style: {  }
+    },
+    {
+        key: 'contact',
+        label: '联系人',
+        type: 'text',
+        style: {  }
+    },
+    {
+        key: 'position',
+        label: '职务',
+        type: 'text',
+        style: { width: '100%' }
+    },
+    {
+        key: 'content',
+        label: '跟进内容',
+        type: 'text',
+        className:'top_label',
+        style: { }
+    },
+    {
+        key: 'appointmentType',
+        label: '预约待办',
+        type: 'text',
+        style: { }
+    },
+    {
+        key: 'appointmentTime',
+        label: '预约时间',
+        type: 'text',
+        style: {  }
+
+    },
+    {
+        key: 'todoTime',
+        label: '待办时间',
+        type: 'text',
+        style: { }
+    },
+    {
+        key: 'cancelReason',
+        label: '取消原因',
+        type: 'text',
+        style: { }
+    },
+]);
+
+// 取消预约表单项列表
+export const cancelAppointmentFormItemList = ref([
+    {
+        key: 'cancelReason',
+        label: '取消原因',
+        type: 'textarea',
+        rows:5,
+        style: { width: '100%' }
+    }
+])

src/views/appointmentAndTodo/index.vue

@@ -50,10 +50,10 @@
                 :isLast="index == (appointmentList.length - 1)">
                 <template #navContent>
                     <FollowCard :cardList="[{...(item.desc)}]">
-                        <template #operation>
+                        <template #operation="{row}">
                             <div class="table_row_option">
-                                <span class="button_delete">取消预约</span>
-                                <span class="option_button_editor">查看详情</span>
+                                <span class="button_delete" @click="OpenCancelAppointmentDialog(row,item)">取消预约</span>
+                                <span class="option_button_editor" @click="OpenAppointmentDialog(row,item)">查看详情</span>
                             </div>
                         </template>
 
@@ -61,6 +61,31 @@
                 </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>
     </div>
 </template>
 
@@ -80,6 +105,8 @@ 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'
 
 const defaultTabType = ref('appointment')
 
@@ -113,6 +140,7 @@ const appointmentList = ref([
             headerTitleList:['北京市区第一中学'],
             headerTags:[],
             taskType:'',
+            productType:'大数据诊断平台',
             middleDesc:['跟进人员：张三','角色：校长','联系人：王德态'],
             bottomDesc:'跟进内容：9:50会议室，所有管理层一起参会，准备PPT9:50会议室，所有管理层一起参会，准备PPT9:50会议室，所有管理层一起参会，准备PPT',
         }
@@ -126,6 +154,54 @@ 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>
 
@@ -147,6 +223,7 @@ const selectedCalendarTime =ref()
         background: #FFFFFF;
         border-radius: 10px 10px 10px 10px;
         .calendar_desc{
+            margin-top: 24px;
             padding:16px;
             background: #F8FAFE;
             border-radius: 10px;
@@ -222,4 +299,15 @@ const selectedCalendarTime =ref()
         }
     }
 }
+
+.cancel_appointment_dialog{
+    .desc{
+        line-height: 22px;
+        font-weight: 600;
+        font-size: 16px;
+        color: #333333;
+        margin-bottom: 16px;
+    }
+}
+
 </style>