ieplus-app/src/pagesOther/pages/university/index/components/plus/college-conditions-picker.vue

<template>
    <view>
        <ie-dropdown :configs="configs" v-model="form" :absolute="absolute" @change="handleChange"/>
    </view>
</template>

<script setup lang="ts">

import type {Dropdown} from "@/types";
import {UNIVERSITY_FILTER} from "@/types/injectionSymbols";
import type {UniversityQueryDto, UniversityFilter} from "@/types/university";
import {useUserStore} from "@/store/userStore";

const props = defineProps<{
    options: UniversityFilter;
    absolute?: boolean;
}>()
const filter = inject(UNIVERSITY_FILTER) || ref({} as UniversityQueryDto)
const userStore = useUserStore()

const emit = defineEmits<{
    (e: 'change', value: UniversityQueryDto): void;
}>();
const options = computed(() => {
    return userStore.isHN ? [
        {
            label: '院校层次',
            prop: 'features',
            optionKey: 'features',
            keyName: 'label',
            keyValue: 'value',
        },
        {
            label: '院校类型',
            prop: 'type',
            optionKey: 'types',
            keyName: 'label',
            keyValue: 'value',
        },
        {
            label: '办学类型',
            prop: 'natureTypeCN',
            optionKey: 'natureTypes',
            keyName: 'label',
            keyValue: 'value',
        },
        {
            label: '院校梯队',
            prop: 'tier',
            optionKey: 'tiers',
            keyName: 'label',
            keyValue: 'value',
        },
    ] : [
        {
            label: '院校层次',
            prop: 'features',
            optionKey: 'features',
            keyName: 'label',
            keyValue: 'value',
        },
        {
            label: '院校类型',
            prop: 'type',
            optionKey: 'types',
            keyName: 'label',
            keyValue: 'value',
        },
        {
            label: '办学类型',
            prop: 'natureTypeCN',
            optionKey: 'natureTypes',
            keyName: 'label',
            keyValue: 'value',
        },
        {
            label: '院校省份',
            prop: 'location',
            optionKey: 'locations',
            keyName: 'label',
            keyValue: 'value',
        }
    ]
})
const form = ref<Record<string, any>>({});
const configs = computed<Dropdown.DropdownItem[]>(() => {
    return options.value.map(item => {
        const list = props.options[item.optionKey as keyof UniversityFilter] || [];
        if (Array.isArray(list)) {
            return {
                label: item.label,
                prop: item.prop,
                keyName: item.keyName,
                keyValue: item.keyValue,
                options: list.map(item => {
                    return {
                        label: item,
                        value: item,
                    }
                }),
                value: []
            }
        } else {
            return {
                label: item.label,
                prop: item.prop,
                keyName: item.keyName,
                keyValue: item.keyValue,
                options: Object.entries(list).map(([key, value]) => {
                    return {
                        label: value,
                        value: key,
                    }
                }),
                value: []
            }
        }
    });
});
const handleChange = (value: any) => {
    filter.value = {
        ...filter.value,
        ...value,
    }
    emit('change', filter.value);
}
</script>

<style scoped></style>