我的客户-信息概览-预约/待办的取消/关闭接口调用和页面渲染

src/api/appointmentAndTodo.ts

@@ -0,0 +1,13 @@
+// src/api/login.ts
+import request from '../utils/request.js'
+let adminPrefix = import.meta.env.VITE_API_ADMIN_PRE
+
+
+
+// 关闭待办提醒接口
+export const closeToDoTaskApi = (id:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/todo/closeTodo/${id}`,
+        method: 'get',
+    })
+}

src/baseComponents/FormDialog.vue

@@ -197,6 +197,7 @@
                   v-model="formData[item.key] "
                   class="ml-2"
                   style="--el-switch-on-color: #2e64fa; --el-switch-off-color: #E2E2E3"
+                  :disabled="item.disabled"
                 />
                 <span style="color:#999999;font-size: 14px;">{{ item.tips }}</span>
               </div>

src/views/myCustomer/myCustomerDetail/components/FollowFormDialog/formDialog.ts

@@ -75,6 +75,7 @@ export const formItemList = ref([
     label: '预约时间',
     type: 'dateTimePickerNoRange',
     rules:[{required:true,trigger:'blur',message:'请填写信息'}],
+    disabledDate:()=>false,
     hidden:true,
     style: {  }
 
@@ -84,6 +85,7 @@ export const formItemList = ref([
     label: '待办时间',
     type: 'dateTimePickerNoRange',
     rules:[{required:true,trigger:'blur',message:'请填写信息'}],
+    disabledDate:()=>false,
     hidden:true,
     style: { }
   }

src/views/myCustomer/myCustomerDetail/components/FollowFormDialog/index.vue

@@ -46,7 +46,10 @@ const route = useRoute()
 
 /**表单有关数据及操作 */
 const finalFormItemList = ref(JSON.parse(JSON.stringify(formItemList.value)))
-const editFormDialogSubmitLoading = ref(false)
+
+// const editFormDialogSubmitLoading = ref(false)
+const editFormDialogSubmitLoading = defineModel('submitLoading',{default: false })
+
 const CloseFormDialog = ()=>{
     editFormDialogVisible.value = false
     editFormDialogSubmitLoading.value = false
@@ -54,30 +57,33 @@ const CloseFormDialog = ()=>{
 
 // 新增确认
 const HandleConfirmFormDialog = async (params)=>{
-    editFormDialogSubmitLoading.value = true
-
     const {formData} = params
-    let orderDatetime = formData.appointmentType == 0 ? 
-                        formData.appointmentTime :
-                        (formData.appointmentType == 1 ? 
-                            formData.todoTime : "") 
-    let finalParams = {
-        customerId: route.query.id,
-        productId: JSON.parse(formData.product).value,
-        followId: JSON.parse(formData.status).value,
-        followName: JSON.parse(formData.status).label,
-        customerPersonId: JSON.parse(formData.contact).id,
-        positionId: JSON.parse(formData.position).value, 
-        followContent: formData.content,
-        orderType: formData.appointmentType,
-        orderDatetime:unioformDateTransform(orderDatetime)
-    }
-    let res = await addFollowUpInfoApi(finalParams)
-    if(res?.code == 200){
-        CloseFormDialog()
-        emit('confirm')
+    if(!props.previewForm){
+        editFormDialogSubmitLoading.value = true
+        let orderDatetime = formData.appointmentType == 0 ? 
+                            formData.appointmentTime :
+                            (formData.appointmentType == 1 ? 
+                                formData.todoTime : "") 
+        let finalParams = {
+            customerId: route.query.id,
+            productId: JSON.parse(formData.product).value,
+            followId: JSON.parse(formData.status).value,
+            followName: JSON.parse(formData.status).label,
+            customerPersonId: JSON.parse(formData.contact).id,
+            positionId: JSON.parse(formData.position).value, 
+            followContent: formData.content,
+            orderType: formData.appointmentType,
+            orderDatetime:unioformDateTransform(orderDatetime)
+        }
+        let res = await addFollowUpInfoApi(finalParams)
+        if(res?.code == 200){
+            CloseFormDialog()
+            emit('confirm')
+        }else{
+            editFormDialogSubmitLoading.value = false
+        }
     }else{
-        editFormDialogSubmitLoading.value = false
+        emit('confirm',params)
     }
 }
 
@@ -156,23 +162,34 @@ watch([()=>props?.defaultFormData?.appointmentType,
        ()=>props.previewForm
 ],([newTypeVal,newPreviewFormVal])=>{
     let appointmentTypeFlag = null
+
     if(newPreviewFormVal){
-        appointmentTypeFlag = newTypeVal ? props.defaultFormData.extraAppointmentType : null
+        appointmentTypeFlag = (newTypeVal ? props.defaultFormData.extraAppointmentType : null)
     }else{
         appointmentTypeFlag = newTypeVal
     }
-    // 0 预约  1 待办
+    // appointmentTypeFlag 0 预约  1 待办
     finalFormItemList.value = finalFormItemList.value.map(item=>{
-        if(item.key == 'appointmentTime'){
-            item.hidden = [0].includes(appointmentTypeFlag) ? false : true
-        }else if(item.key == 'todoTime'){
-            item.hidden = [1].includes(appointmentTypeFlag) ? false : true
+        switch(item.key){
+            case 'appointmentType':
+                // 查看详情的时候，待办项 开关关闭后，不允许在打开
+                item.disabled = newPreviewFormVal ? (newTypeVal ?  false : true) : false
+                // 查看详情的时候， 属于待办项 才会展示待办开关
+                item.hidden =  newPreviewFormVal ? ([1].includes(props.defaultFormData.extraAppointmentType) ? false :  true) : false  
+                break;
+            case 'appointmentTime':
+                item.hidden = [0].includes(appointmentTypeFlag) ? false : true
+                break
+            case 'todoTime':
+                item.hidden = [1].includes(appointmentTypeFlag) ? false : true
+                break
         }
         return item
     })
 },{deep:true,immediate:true})
 
 
+// 根据表单的查看模式展示不同的 表单项
 watch(()=>props.previewForm,async (newVal)=>{
     if(newVal){
         finalFormItemList.value = finalFormItemList.value.map(item=>{
@@ -213,7 +230,19 @@ watch(()=>props.previewForm,async (newVal)=>{
 },{immediate:true})
 
 onMounted(async ()=>{
-    
+    const disabledData = (date)=>{
+    // 如果传入的日期时间戳小于当前时间戳，则禁用（返回 true）
+    return date.getTime() < Date.now();
+    }
+    finalFormItemList.value = finalFormItemList.value.map(item=>{
+        switch(item.key){
+            case 'appointmentTime':
+            case 'todoTime':
+                item.disabledDate = disabledData
+                break
+        }
+        return item
+    })
 })
 </script>
 

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

@@ -44,7 +44,8 @@
                 <FollowCard v-if="finalRenderData?.length > 0" style="margin-top: 16px;" :cardList="finalRenderData">
                     <template #operation="{row}">
                         <div style="" class="table_row_option">
-                            <span class="button_delete" @click="OpenCancelAppointmentDialog(row)">取消预约</span>
+                            <!-- 没有取消的待办，显示取消按钮 -->
+                            <span v-if="row.orderType === 0 && [0,1].includes(row.orderStatus)"  class="button_delete" @click="OpenCancelAppointmentDialog(row)">取消预约</span>
                             <span class="option_button_editor" @click="OpenFollowlFormDialog(row,'currentFollowRecord')">详情</span>
                         </div>
                     </template>
@@ -142,7 +143,11 @@
         title="查看详情"
         :previewForm="true"
         v-model:visible="followVisible" 
-        :defaultFormData="followDefaultFormData">
+        v-model:submitLoading="followDetailLoading"
+        :defaultFormData="followDefaultFormData"
+        @confirm="HandleFollowDetailConfirm"
+        @close="CloseFollowlFormDialog"
+    >
     </FollowFormDialog>
 
     <!-- 查看历史跟进 -->
@@ -198,6 +203,7 @@
 <script setup lang="ts">
 import { ref,computed, onMounted,watch } from 'vue';
 import {useRoute} from 'vue-router'
+import { ElMessage } from 'element-plus'
 
 import SearchBlock from '@/baseComponents/SearchBlock.vue';
 import { ongoingFollowSearchList,historyFollowSearchList } from './searchBlock';
@@ -209,6 +215,8 @@ import FormDialog from '@/baseComponents/FormDialog.vue';
 import { cancelAppointmentFormItemList } from './formDialog';
 
 import {getOverviewDetailApi,cancelAppointmentApi,getHistoryFollowListApi} from '@/api/myCustomer'
+import {closeToDoTaskApi} from '@/api/appointmentAndTodo'
+
 import {
     getTodayRange,
     getYesterdayRange,
@@ -218,6 +226,9 @@ import {
     formatTime
 } from '@/utils/timeRangeGet'
 
+
+
+
 interface ProductFollowRecord {
   productId: string;  // 产品ID
   productName: string; // 产品名称
@@ -358,7 +369,8 @@ const GetOverviewDetail = async ()=>{
                     `联系人：${item.customerPersonName}`,
                     `职务：${item.positionName}`
                 ],
-                taskType:[0,1].includes(item.orderType) ? (item.orderType === 0 ? '预约' : '待办') : '',
+                // orderStatus 预约/待办状态，0-待开始，1-已结束，2-已取消(预约) null-已关闭(待办)
+                taskType:[0,1].includes(item.orderType) && [0,1].includes(item.orderStatus) ? (item.orderType === 0 ? '预约' : '待办') : '',
                 bottomDesc:`跟进内容：${item.followContent}`,
                 ...item,
             }
@@ -459,25 +471,63 @@ const historyFollowData = ref({
  */
 const followVisible = ref(false)
 const followDefaultFormData = ref({})
+const currentFollowRow = ref({})  //当前查看的跟进数据
+const followDetailLoading = ref(false)
 const OpenFollowlFormDialog = (row,type)=>{
+    currentFollowRow.value = row
     console.log('当前行信息',row)
     followVisible.value = true
     followDefaultFormData.value = {
+        id:row.id,
         school:row.customerName,
         product:row.productName,
         status:row.followName,
         contact:row.customerPersonName,
         position:row.positionName,
         content:row.followContent,
-        appointmentType:[0,1].includes(row.orderType),
         appointmentTime:row.orderDatetime,
         todoTime:row.orderDatetime,
-        extraAppointmentType:row.orderType,  //查看时候的附加值
+        appointmentType:[0,1].includes(row.orderType) && [0,1].includes(row.orderStatus),  // extraAppointmentType 有值(为待办1)的前提下，—— 当前值为false 表示 待办已手动关闭
+        extraAppointmentType:row.orderType,  //查看时候—— 附加的项
+    }
+}
+
+const CloseFollowlFormDialog = ()=>{
+    followVisible.value = false
+    followDefaultFormData.value = {}
+    followDetailLoading.value = false
+}
+
+const HandleFollowDetailConfirm = async (params)=>{
+    const {formData} = params
+    if([1].includes(currentFollowRow.value.orderType)){
+        // 待办
+        //  orderStatus 0 待开始 1 已结束  null 已关闭  —— 已结束的待办是否可以关闭 待确认
+        if([0,1].includes(currentFollowRow.value.orderStatus)){
+            followDetailLoading.value = true
+            // 关闭待办
+            let res = undefined
+            try{
+                res = await closeToDoTaskApi(formData.id)
+            }catch{}
+            if(res?.code == 200){
+                ElMessage.success('关闭成功')
+                CloseFollowlFormDialog()
+                // 刷新预约待办数据
+                await GetOverviewDetail()
+            }else{
+                followDetailLoading.value = false
+            }
+        }else{
+            CloseFollowlFormDialog()
+        }
+    }else{
+        CloseFollowlFormDialog()
     }
 }
 
 /**
- * 5. 取消预约有关操作 —— 待完善
+ * 5. 取消预约有关操作
  */
 const cancelVisible = ref(false)
 const cancelDefaultFormData = ref({})
@@ -491,7 +541,7 @@ const CloseCancelAppointmentDialog = ()=>{
     cancelDefaultFormData.value = {}
     cancelLoading.value = false
 }
-// 取消预约确认 —— 待完善
+// 取消预约确认
 const HandleCancelAppointmentConfirm = async (params)=>{
     cancelLoading.value = true
     const {formData} = params
@@ -510,7 +560,6 @@ const HandleCancelAppointmentConfirm = async (params)=>{
 }
 
 
-
 /** 6. 查看历史跟进 弹窗有关数据  */
 const historyFollowVisible = ref(false)
 const OpenHistoryFollowDialog = async (row)=>{