提取取消预约弹窗公共组件

src/components/CancelAppointmentDialog/index.vue

@@ -0,0 +1,84 @@
+<template>
+    <FormDialog    
+        width="640px"
+        class="cancel_appointment_dialog"
+        title="取消预约"
+        :visible="cancelVisible" 
+        :formItemList="cancelAppointmentFormItemList" 
+        :submitLoading="cancelLoading"
+        :defaultFormData="defaultFormData"
+        @close="CloseCancelAppointmentDialog"
+        @confirm="HandleCancelAppointmentConfirm">
+
+        <template #form_pre>
+            <span class="desc">
+                    {{ defaultFormData.appointmentTime}} &nbsp;
+                    {{ defaultFormData.customerName }}
+            </span>
+        </template>
+    </FormDialog>
+
+</template>
+
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import FormDialog from '@/baseComponents/FormDialog.vue';
+import { cancelAppointmentFormItemList } from './formDialog';
+import {cancelAppointmentApi} from '@/api/myCustomer'
+interface DefaultFormData {
+    id:string,
+    appointmentTime:string
+    customerName:string
+    cancelReason:string
+}
+
+const props = defineProps({
+    defaultFormData:{
+        type:Object as ()=> DefaultFormData,
+        required:true,
+        default:()=>({})
+    }
+})
+const emit = defineEmits(['confirm'])
+
+const cancelVisible = defineModel('visible')
+const cancelLoading = ref(false)
+
+const CloseCancelAppointmentDialog = ()=>{
+    cancelVisible.value = false
+    cancelLoading.value = false
+}
+// 取消预约确认
+const HandleCancelAppointmentConfirm = async (params)=>{
+    cancelLoading.value = true
+    const {formData} = params
+    let finalParams = {
+        id: formData.id,
+        cancelRemark: formData.cancelRemark
+    }
+    let res = await cancelAppointmentApi(finalParams)
+    if(res?.code == 200){
+        CloseCancelAppointmentDialog()
+        emit('confirm')
+    }else{
+        cancelLoading.value = false
+    }
+}
+
+
+</script>
+
+
+<style lang="scss" scoped>
+.cancel_appointment_dialog{
+    .desc{
+        line-height: 22px;
+        font-weight: 600;
+        font-size: 16px;
+        color: #333333;
+        margin-bottom: 16px;
+    }
+}
+</style>

src/views/appointmentAndTodo/appointmentRegister/formDialog.ts

@@ -59,14 +59,3 @@ export const appointmentFormItemList = ref([
         style: { }
     },
 ]);
-
-// 取消预约表单项列表
-export const cancelAppointmentFormItemList = ref([
-    {
-        key: 'cancelReason',
-        label: '取消原因',
-        type: 'textarea',
-        rows:5,
-        style: { width: '100%' }
-    }
-])

src/views/appointmentAndTodo/appointmentRegister/index.vue

@@ -45,21 +45,11 @@
         </FormDialog>
 
         <!-- 取消预约弹窗 -->
-        <FormDialog 
-            class="cancel_appointment_dialog"
+        <CancelAppointmentDialog 
+            v-model:visible="cancelAppointmentDialogVisible" 
             :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>
-
+        </CancelAppointmentDialog>
     </div>
 </template>
 
@@ -70,8 +60,9 @@ import SearchBlock from '@/baseComponents/SearchBlock.vue';
 import TimeNavLine from '@/baseComponents/TimeNavLine.vue';
 import FollowCard from '@/components/FollowCard.vue';
 import FormDialog from '@/baseComponents/FormDialog.vue';
-import {appointmentFormItemList,cancelAppointmentFormItemList} from './formDialog'
+import {appointmentFormItemList} from './formDialog'
 
+import CancelAppointmentDialog from '@/components/CancelAppointmentDialog/index.vue'
 
 import {blockSearchList} from './searchBlock'
 
@@ -87,7 +78,6 @@ const props = defineProps({
         type:Array
     },
 })
-
 const emit = defineEmits(['searchChange'])
 
 
@@ -102,7 +92,7 @@ const appointmentStatusToClass =  (status)=>{
     }
 }
 
-// 筛选项触发的变化
+// 1. 筛选项触发的变化
 const HandleSearchChange = (params,key)=>{
     blockSearchList.value = blockSearchList.value.map(item=>{
         switch(item.key){
@@ -116,7 +106,7 @@ const HandleSearchChange = (params,key)=>{
 }
 
 /**
- * 查看预约详情弹窗
+ * 2. 查看预约详情弹窗
 */
 const appointmentDialogVisible = ref(false)
 const appointmentDefaultFormData = ref({})
@@ -143,25 +133,22 @@ const CloseAppointmentDialog = ()=>{
 
 
 /**
- * 取消预约弹窗
+ *  3. 取消预约弹窗
  */
 const cancelAppointmentDialogVisible = ref(false)
 const cancelAppointmentDefaultFormData = ref({})
 const OpenCancelAppointmentDialog = (row,navItm)=>{
     cancelAppointmentDialogVisible.value = true
     cancelAppointmentDefaultFormData.value = {
-        school:row.headerTitleList[0],
+        id:row.id,
+        customerName:row.headerTitleList[0],
         appointmentTime:navItm.orderDatetime,
         cancelReason:''
     }
 }
-const CloseCancelAppointmentDialog = ()=>{
-    cancelAppointmentDialogVisible.value = false
-}
-const HandleCancelAppointmentConfirm = (params)=>{
-    const {formData,formRef} = params
-    console.log('取消预约',formData.cancelReason)
-    CloseCancelAppointmentDialog()
+const HandleCancelAppointmentConfirm = ()=>{
+    cancelAppointmentDefaultFormData.value = {}
+    emit('searchChange',{})
 }
 
 watch(()=>props.followerList,(newVal)=>{
@@ -247,14 +234,5 @@ watch(()=>props.orderStatusList,(newVal)=>{
     }
 }
 
-.cancel_appointment_dialog{
-    .desc{
-        line-height: 22px;
-        font-weight: 600;
-        font-size: 16px;
-        color: #333333;
-        margin-bottom: 16px;
-    }
-}
 
 </style>

src/views/myCustomer/myCustomerDetail/customerStatusOverview/index.vue

@@ -178,30 +178,16 @@
      </PreviewDialog>
 
     <!-- 取消预约弹窗 -->
-    <FormDialog    
-        width="640px"
-        title="取消预约"
-        :visible="cancelVisible" 
-        :formItemList="cancelAppointmentFormItemList" 
-        :submitLoading="cancelLoading"
+    <CancelAppointmentDialog 
+        v-model:visible="cancelVisible" 
         :defaultFormData="cancelDefaultFormData"
-        @close="CloseCancelAppointmentDialog"
         @confirm="HandleCancelAppointmentConfirm">
-
-        <template #form_pre>
-            <span style="margin-bottom: 16px;color:#333333">
-                {{ cancelDefaultFormData.claimDatetime}} &nbsp;
-                {{ cancelDefaultFormData.customerName }}
-            </span>
-        </template>
-    </FormDialog>
-
-
+    </CancelAppointmentDialog>
 
 </template>
 
 <script setup lang="ts">
-import { ref,computed, onMounted,watch } from 'vue';
+import { ref, onMounted,watch } from 'vue';
 import {useRoute} from 'vue-router'
 import { ElMessage } from 'element-plus'
 
@@ -211,10 +197,9 @@ import FollowCard from '@/components/FollowCard.vue';
 import Pagination from '@/baseComponents/Pagination.vue';
 import FollowFormDialog from '../components/FollowFormDialog/index.vue'
 import PreviewDialog from '@/baseComponents/PreviewDialog.vue';
-import FormDialog from '@/baseComponents/FormDialog.vue';
-import { cancelAppointmentFormItemList } from './formDialog';
+import CancelAppointmentDialog from '@/components/CancelAppointmentDialog/index.vue'
 
-import {getOverviewDetailApi,cancelAppointmentApi,getHistoryFollowListApi} from '@/api/myCustomer'
+import {getOverviewDetailApi,getHistoryFollowListApi} from '@/api/myCustomer'
 import {closeToDoTaskApi} from '@/api/appointmentAndTodo'
 
 import {
@@ -531,32 +516,19 @@ const HandleFollowDetailConfirm = async (params)=>{
  */
 const cancelVisible = ref(false)
 const cancelDefaultFormData = ref({})
-const cancelLoading = ref(false)
 const OpenCancelAppointmentDialog = async (row)=>{
     cancelVisible.value = true
-    cancelDefaultFormData.value = row
-}
-const CloseCancelAppointmentDialog = ()=>{
-    cancelVisible.value = false
-    cancelDefaultFormData.value = {}
-    cancelLoading.value = false
+    cancelDefaultFormData.value = {
+        id:row.id,
+        customerName:row.customerName,
+        appointmentTime:row.claimDatetime,
+        cancelReason:''
+    } 
 }
 // 取消预约确认
-const HandleCancelAppointmentConfirm = async (params)=>{
-    cancelLoading.value = true
-    const {formData} = params
-    let finalParams = {
-       id: formData.id,
-        cancelRemark: formData.cancelRemark
-    }
-    let res = await cancelAppointmentApi(finalParams)
-    if(res?.code == 200){
-        CloseCancelAppointmentDialog()
-        // 刷新预约待办数据
-        await GetOverviewDetail()
-    }else{
-        cancelLoading.value = false
-    }
+const HandleCancelAppointmentConfirm = async ()=>{
+    await GetOverviewDetail()
+    cancelDefaultFormData.value = {}
 }