dz-app/pages/login/components/register-fields/school-info-fields.vue

<template>
    <mx-form-item v-if="!disabled" prop="schoolId" label="所在学校">
        <mx-picker v-model="model.schoolId" :data="schoolOptions" label-prop="label" value-prop="value"
                   tree-prop="children" placeholder="请选择学校"/>
    </mx-form-item>
    <mx-form-item v-if="model.schoolId<0" v-model="model.customSchoolName" prop="customSchoolName" label="学校名称"/>
    <mx-form-item v-else-if="model.schoolId&&disabled" v-model="model.schoolName" label="学校" disabled/>
    <mx-form-item v-model="model.customClassName" prop="customClassName" label="班级名称"/>
</template>

<script setup>
import {ref, watch, watchEffect} from 'vue'
import {useInjectFormData} from "@/pages/login/components/hooks/useFormDataInjection";
import {createPropDefine} from "@/utils";
import {getAreaSchoolTree} from "@/api/login";

const props = defineProps({
    // 只是控制学校，班级因为是自定义的，是可以直接修改的
    disabled: createPropDefine(false, Boolean)
})

const [model] = useInjectFormData()
const schoolOptions = ref([])

watch(() => model.value.provinceName, () => {
    if (props.disabled) return
    // 省份变更时，清空原值
    model.value.schoolId = ''
    model.value.customSchoolName = ''
})

watchEffect(async () => {
    if (props.disabled) return
    // 在绑卡场景下才能解析出username，password，此时卡的优先级就提高了
    // 如果在bindPhone场景下，相当于没有传入username, password，后台使用当前用户的权限信息
    const {provinceName, username, password} = model.value
    if (!provinceName) return

    const res = await getAreaSchoolTree({provinceName, username, password})
    schoolOptions.value = res.data
})
</script>

<style scoped>

</style>