dz-app/pages/ie/entry-single/entry-single.vue

<template>
    <view class="page-content">
        <large-header v-bind="singleTitleBinding" :scroll-top="scrollTop"/>
        <pretty-card style="margin-top: -50px"/>
        <view class="mx-20 bg-white mx-card px-40 py-30">
            <ai-form ref="form" :model="model" :rules="rules" :render-rules="renderRules"
                     :render-rule-loading="renderRuleLoading">
                <template #prefix>
                    <ai-form-item prop="universityCode">
                        <ai-form-college v-model="model.universityCode"/>
                    </ai-form-item>
                    <ai-form-item prop="majorCode">
                        <ai-form-college-major v-model="model.majorCode" v-model:enroll-code="model.majorEnrollCode"
                                               :university-code="model.universityCode"/>
                    </ai-form-item>
                </template>
                <template #suffix>
                    <uv-form-item>
                        <uv-text size="12" color="var(--primary-light-color)"
                                 text="*成绩填写的准确性关系到院校录取概率及准确性，请认准填写"/>
                    </uv-form-item>
                    <uv-form-item>
                        <uv-button :text="next" v-bind="gradientBtnBinding" @click="handleNext"/>
                    </uv-form-item>
                </template>
            </ai-form>
        </view>
        <uv-gap height="20"/>
    </view>
</template>

<script>
import {ref, watch} from 'vue';
import MxConst from "@/common/MxConst";
import LargeHeader from "@/pages/ie/components/large-header.vue";
import PrettyCard from "@/pages/ie/components/card/pretty-card.vue";
import AiForm from "@/pages/ie/components/ai-form/ai-form.vue";
import AiFormItem from "@/pages/ie/components/ai-form/ai-form-item.vue";
import AiFormCollege from "@/pages/ie/components/ai-form/items/ai-form-college.vue";
import AiFormCollegeMajor from "@/pages/ie/components/ai-form/items/ai-form-college-major.vue";
import AIFormCommonStyle from "@/pages/ie/components/AIFormCommonStyle";
import {useAIRenderRules} from "@/pages/ie/hooks/useAIRenderRules";
import {useProvideMajorTreeService} from "@/pages/ie/hooks/useMajorTreeInjection";
import {useProvidePageScroll} from "@/hooks/usePageScrollInjection";
import {useTransfer} from "@/hooks/useTransfer";

export default {
    components: {AiFormCollegeMajor, AiFormCollege, AiFormItem, AiForm, PrettyCard, LargeHeader},
    mixins: [AIFormCommonStyle],
    setup() {
        const next = ref('确认提交')
        const nextPath = ref('/pages/ie/entry-single-result/entry-single-result')

        useProvideMajorTreeService()
        const scrollTop = useProvidePageScroll()
        const form = ref(null)
        const model = ref({
            universityCode: '',
            majorCode: '',
            majorEnrollCode: ''
        })
        const rules = ref({
            universityCode: [{required: true, message: '请选择学校'}],
            majorCode: [{required: true, message: '请选择专业'}]
        })
        const paramFactory = () => {
            const renderType = MxConst.enum.ai.renderType.def
            const {universityCode, majorCode, majorEnrollCode} = model.value
            return {renderType, universityCode, majorCodes: [majorCode], majorEnrollCodes: [majorEnrollCode]}
        }
        const {
            renderRules,
            renderRuleLoading,
            reloadRenderRules,
            validateRenderRule
        } = useAIRenderRules(paramFactory)
        const {transferTo} = useTransfer()

        watch(() => model.value.majorEnrollCode, val => {
            renderRules.value = []
            if (val) reloadRenderRules()
        })
        watch(() => model.value.universityCode, _ => scrollTop.value = 0)

        const handleNext = async () => {
            await form.value.validate()
            await validateRenderRule()
            transferTo(nextPath.value, model.value)
        }

        return {
            scrollTop,
            next,
            nextPath,
            form,
            model,
            rules,
            renderRules,
            renderRuleLoading,
            handleNext
        }
    }
}
</script>

<style scoped>
</style>