clientManageSystem/src/components/SchoolFormDialog/index.vue

<template>
     <FormDialog width="640px" 
        :title="props.schoolTitle" 
        :visible="editFormDialogVisible" 
        :submitLoading="editFormDialogSubmitLoading"
        :defaultFormData="schoolFormData"
        :formItemList="filterFormItemList"
        @formItemChange="HandleFormItemChange"
        @close="CloseFormDialog"
        @confirm="HandleConfirmFormDialog">
    </FormDialog>
</template>



<script setup lang="ts">
import {  ref,watch } from 'vue';

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

// 动态变更的表单下拉配置
interface DynamicFormItmOpt {
    key:string;
    selectList?:Array<{
        label:string,
        value:string
    }>,
    unionSelectList?:Array<DynamicFormItmOpt>
}

const props = defineProps({
    defaultFormData:{
        type:Object,
        required:true
    },
    schoolTitle:{
        type:String,
        default:'编辑学校'
    },
    dynamicFormItmOpt:{
        type:Array<DynamicFormItmOpt>,
        default:()=>[]
    }
})

const emit = defineEmits(['confirm'])

const schoolFormData = ref({})


const editFormDialogVisible = defineModel('visible')
const editFormDialogSubmitLoading = defineModel('editFormDialogSubmitLoading')


const filterFormItemList = ref(JSON.parse(JSON.stringify(formItemList.value)))
const CloseFormDialog = ()=>{
    editFormDialogVisible.value = false
}
const HandleConfirmFormDialog = (params)=>{
    emit('confirm',params)
}
// 处理表单项变更
const HandleFormItemChange = (params)=>{
    const {key,val,formData,subKey} = params
    if(key == 'provinceArea' && subKey == 'province'){
        // 变更地区下拉
        filterFormItemList.value = filterFormItemList.value.map(item=>{
            if(item.key == 'provinceArea'){
                let provinceSubSelectList = item.unionSelectList.find(unionItm=>unionItm.key == 'province')
                                                ?.selectList.find(opt=>opt.value==val)?.subData || []
                item.unionSelectList.map(unionItm=>{
                    if(unionItm.key == 'district'){
                        unionItm.selectList = provinceSubSelectList
                    }
                })
            }
            return item
        })
        // 同时要清空地区选择
        schoolFormData.value.provinceArea.district = null
    }
}



// 动态变更表单默认值
watch(()=>props.defaultFormData,(newVal)=>{
    schoolFormData.value = newVal
},{deep:true})

// 动态变更表单下拉
watch(()=>props.dynamicFormItmOpt,(newVal)=>{
    filterFormItemList.value = filterFormItemList.value.map(item=>{
        let result = newVal.find(dynamicItm=>{
            return item.key == dynamicItm.key
        })
        if(result){
            if(result.unionSelectList){
                let dynamicUnionSelectList = result.unionSelectList
                let finalUnionSelectList = item.unionSelectList.map(unionItm=>{
                    let matchDynamic = dynamicUnionSelectList.find(dynItm=>dynItm.key == unionItm.key)
                    if(matchDynamic){
                        unionItm.selectList = matchDynamic.selectList
                    }
                    return unionItm
                })
                item.unionSelectList = finalUnionSelectList
            }else{
                item.selectList = result.selectList
            }
        }
        return item
    })
},{deep:true})
</script>



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