dz-app/pages/ie/entry-single-result/components/college-grouped-major.vue

<template>
    <uv-cell v-for="[root, groups] in groupedMajors" :title="root.name"
             :value="`${groups.length}个专业`" is-link title-style="font-size:14px" class="-mx-20"
             @click="showGroups=groups,showRoot=root,$refs.popup.open()"/>
    <uv-popup ref="popup" mode="center" :safe-area-inset-bottom="false" close-on-click-overlay closeable round="12">
        <view style="width: 90vw">
            <view class="fx-row fx-cen-cen text-main text-lg h-[50px]">{{ showRoot.name }}</view>
            <view class="px-30 pb-30 fx-row flex-wrap gap-10">
                <college-major-tag v-for="m in showGroups" :major="m"/>
            </view>
        </view>
    </uv-popup>
</template>

<script>
import CollegeMajorTag from "@/pages/college-library/components/college-major-tag.vue";
import InjectAISingleDataMixin from "@/pages/ie/entry-single-result/components/InjectAISingleDataMixin";
import {findTreeNode} from "@/utils/tree-helper";
import {groupByObjectKey} from "@/utils";

export default {
    name: "college-grouped-major",
    components: {CollegeMajorTag},
    mixins: [InjectAISingleDataMixin],
    data() {
        return {
            show: false,
            showGroups: [],
            showRoot: {}
        }
    },
    computed: {
        groupedMajors() {
            if (!this.detail.professions?.length) return {}
            if (!this.majorTree.length) return {}
            return groupByObjectKey(this.detail.professions,
                p => findTreeNode(this.majorTree, m => m.code == p.code).root)
        }
    }
}
</script>

<style scoped>

</style>