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

<template>
    <view class="page-content">
        <large-header v-bind="calculateTitleBinding" :scroll-top="scrollTop"/>
        <view class="-mt-60 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-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 AIFormCommonStyle from "@/pages/ie/components/AIFormCommonStyle";
import {useProvidePageScroll} from "@/hooks/usePageScrollInjection";
import {useProvideMajorTreeService} from "@/pages/ie/hooks/useMajorTreeInjection";
import {useAIRenderRules} from "@/pages/ie/hooks/useAIRenderRules";
import {useTransfer} from "@/hooks/useTransfer";
import LargeHeader from "@/pages/ie/components/large-header.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";

export default {
    components: {AiFormCollegeMajor, AiFormCollege, AiForm, AiFormItem, LargeHeader},
    mixins: [AIFormCommonStyle],
    data() {
        return {};
    },
    setup() {
        const next = ref('开始计算')
        const nextPath = ref('/pages/ie/entry-calculate-result/entry-calculate-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.calculate
            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 lang="scss" scoped>
.page-content {
    background-image: url("~@/static/ie/entry/bg-calculate-full.png");
    background-repeat: no-repeat;
    background-size: contain;
}
</style>