clientManageSystem/src/components/FollowFormDialog/index.vue

<template>
     <FormDialog width="640px" :title="title" 
        :visible="editFormDialogVisible" 
        :submitLoading="editFormDialogSubmitLoading"
        :defaultFormData="defaultFormData"
        :formDisabled="formDisabled"
        :formItemList="finalFormItemList"
        @close="CloseFormDialog"
        @confirm="HandleConfirmFormDialog"
        @formItemChange="HandleFormItemChange">
    </FormDialog>

</template>


<script setup lang="ts">
import { onMounted, ref,watch} from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';

import FormDialog from '@/baseComponents/FormDialog.vue';
import {formItemList} from './formDialog'

import {addFollowUpInfoApi} from '@/api/myCustomer'
import {getPrivateContactListApi} from '@/api/myCustomer'
import {unioformDateTransform} from '@/utils/dateTransform'

interface FollowUpInfo{
    id:string,
    school:string,
    product:string,
    status:string,
    contact:string,
    position:string,
    content:string,
    appointmentTime:string,
    todoTime:string,
    appointmentType:Boolean | number,  // 预约待办的判断标识 或者 查看为待办的前提下——当前值为false 表示 待办已手动关闭 
    extraAppointmentType:number,  //(预约待办的附加判断标识)  //表单为查看(预览)模式时使用，0：预约，1：待办
}
const props = defineProps({
    defaultFormData:{
        type:Object as () => FollowUpInfo,
        required:true
    },  // extraAppointmentType(预约待办的判断标识)  //表单为查看(预览)模式时使用，
    title:{
        type:String,
        default:'写跟进'
    },
    previewForm:{
        type:Boolean,
        default:false
    }, //是否是查看(预览)表单
    formDisabled:{
        type:Boolean,
        default:false
    }, //表单是否禁选
    itemDisabled:{
        type:Boolean,
        default:false
    }, //表单元素是否禁选
    customerId:{
        type:String,
    } //客户id,不在详情页获取id的时候使用
})
const emit = defineEmits(['confirm'])
const editFormDialogVisible = defineModel('visible')

const store = useStore()
const route = useRoute()

/**表单有关数据及操作 */
const finalFormItemList = ref(JSON.parse(JSON.stringify(formItemList.value)))

// const editFormDialogSubmitLoading = ref(false)
const editFormDialogSubmitLoading = defineModel('submitLoading',{default: false })

const CloseFormDialog = ()=>{
    editFormDialogVisible.value = false
    editFormDialogSubmitLoading.value = false
}

// 新增确认
const HandleConfirmFormDialog = async (params)=>{
    if(props.itemDisabled){
        CloseFormDialog()
        emit('confirm')
        return 
    }
    const {formData} = params
    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{
        emit('confirm',params)
    }
}

// 表单项变更操作
const HandleFormItemChange =(params)=>{
    const { key,val,formData } = params
    switch(key){
        case 'contact':
            if(val){
                let aimPosition  = JSON.stringify({
                    label:JSON.parse(val).positionName,
                    value:JSON.parse(val).positionId
                })
                formData.position = store.state.positionList.find(item=>{
                    return item.value = aimPosition
                })?.value
            }else{
                formData.position = null
            }
            break
    }
}

/**联系人信息获取 */
const contactPeopleList = ref([])
// 获取联系人列表
const GetContactList = async ()=>{
    let params = {
        customerId: route.query.id || props.customerId,
        userId:'',
        queryStr: "",
        positionId:''
    }
    let res = await getPrivateContactListApi(params)
    if(res?.code == 200){
        contactPeopleList.value = res.data.map(item=>{
            return {
                label:item.name,
                value:JSON.stringify({
                    id:item.id,
                    positionId:item.positionId,
                    positionName:item.positionName
                }),
            }
        }) || []
        finalFormItemList.value = finalFormItemList.value.map(item=>{
            if(item.key == 'contact'){
                item.selectList = contactPeopleList.value
            }
            return item
        })
    }
}

// 监听表单的职务信息是否展示
watch(()=>props?.defaultFormData?.contact,(newVal)=>{
    if(newVal){
        finalFormItemList.value = finalFormItemList.value.map(item=>{
            if(item.key == 'position'){
                item.hidden = false
            }
            return item
        })
    }else{
        finalFormItemList.value = finalFormItemList.value.map(item=>{
            if(item.key == 'position'){
                item.hidden = true
            }
            return item
        })
    }
},{deep:true,immediate:true})

// 监听预约待办时间是否展示
watch([()=>props?.defaultFormData?.appointmentType,
       ()=>props.previewForm
],([newTypeVal,newPreviewFormVal])=>{
    let appointmentTypeFlag = null

    if(newPreviewFormVal){
        appointmentTypeFlag = (newTypeVal ? props.defaultFormData.extraAppointmentType : null)
    }else{
        appointmentTypeFlag = newTypeVal
    }
    // appointmentTypeFlag 0 预约  1 待办
    finalFormItemList.value = finalFormItemList.value.map(item=>{
        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=>{
            switch(item.key){
                case 'school':
                case 'product':
                case 'status':
                case 'contact':
                case 'position':
                case 'content':
                case 'appointmentTime':
                case 'todoTime':
                    item.type = 'text'
                    break
                case 'appointmentType':
                    item.type ='switch'
                    break
            }
            item.rules = []
            return item
        })
    }else{
        await store.dispatch('updateProductList')
        await store.dispatch('updateFollowUpStatus')
        await store.dispatch('updatePositionList')
        await GetContactList()
        finalFormItemList.value = finalFormItemList.value.map(item=>{
            if(item.key == 'product'){
                item.selectList = store.state.productList
            }else if(item.key == 'status'){
                item.selectList = store.state.followUpStatus
            }else if(item.key == 'position'){
                item.selectList = store.state.positionList
            }
            return item
        })
    }
},{immediate:true})


watch(()=>props.itemDisabled,(newVal)=>{
    if(newVal){
        finalFormItemList.value = finalFormItemList.value.map(item=>{
            item.disabled = true
            return item
        })
    }
},{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>



<style lang="scss" scoped>
</style>