dz-app/pages/career/query-segment/query-segment.vue

<template>
    <z-paging ref="paging" v-model="list" :auto="false" :default-page-size="20"
              @on-refresh="handleRefresh" @query="handleQuery">
        <template #top>
            <mx-nav-bar title="一分一段"/>
            <uv-gap height="15"/>
            <uv-form ref="form" :model="queryParams" :rules="rules" error-type="toast">
                <view class="px-30 bg-white fx-row items-center gap-30">
                    <uv-tags icon="lock" shape="circle" plain plain-fill :text="currentUser.examMajorName"/>
                    <mx-condition/>
                </view>
            </uv-form>
        </template>
        <view class="px-30 py-10 bg-white">
            <uv-search v-model="score" placeholder="输入分数查等效分" @search="handleScoreSearch(false)"
                       @custom="handleScoreSearch(false)"/>
            <view class="mt-30 grid grid-cols-7 items-center">
                <view class="col-span-2 fx-col fx-cen-cen gap-10">
                    <text class="text-2xs text-tips">分数</text>
                    <text class="text-sm text-main font-bold">{{ match.score || '-' }}</text>
                </view>
                <view class="col-span-2 fx-col fx-cen-cen gap-10">
                    <text class="text-2xs text-tips">同分人数</text>
                    <text class="text-sm text-main font-bold">{{ match.num || '-' }}</text>
                </view>
                <view class="col-span-3 fx-col fx-cen-cen gap-10">
                    <text class="text-2xs text-tips">位次区间</text>
                    <text class="text-sm text-main font-bold">{{ match.highestRank + '~' + match.lowestRank }}</text>
                </view>
            </view>
        </view>
        <template v-if="eqList.length">
            <view class="px-30 bg-white py-10 text-main font-bold">历年等效分</view>
            <segment-score-table :cols="eqTable.cols" :rows="eqTable.rows" class="p-30 bg-white"/>
            <view class="px-30 bg-white">
                <uv-text prefix-icon="error-circle" type="info" size="12"
                         :icon-style="{color: 'var(--error-color)', marginRight: '3px', fontSize: '14px'}"
                         text="因高考人数及招生计划每年都存在一定的增减，分数和位次也会有相应浮动，我们根据历年省控线变化幅度等比计算出历年等效位次和等效分。"/>
            </view>
        </template>
        <view class="py-20 bg-white">
            <uv-gap height="15" class="!bg-bg"/>
        </view>
        <uv-sticky :custom-nav-height="-1">
            <view class="bg-white px-30 py-10 text-main font-bold">一分一段表</view>
        </uv-sticky>
        <segment-score-table :cols="segCols" :rows="list" class="p-30 bg-white"/>
    </z-paging>
</template>

<script setup>
import {ref, watch, computed} from 'vue'
import {useUserStore} from "@/hooks/useUserStore";
import {useProvideSearchModel} from "@/components/mx-condition/useSearchModelInjection";
import {useConditionSegmentLocation} from "@/components/mx-condition/modules/useConditionSegmentLocation";
import {useConditionSegmentYear} from "@/components/mx-condition/modules/useConditionSegmentYear";
import {useConditionSegmentMode} from "@/components/mx-condition/modules/useConditionSegmentMode";
import {useProvideVoluntaryData} from "@/hooks/useVoluntaryDataInjection";
import {useCacheStore} from "@/hooks/useCacheStore";
import {cacheActions} from "@/hooks/defineCacheActions";
import SegmentScoreTable from "@/pages/career/query-segment/components/segment-score-table.vue";

const paging = ref(null)
const form = ref(null)
const list = ref([])
const eqList = ref([])
const {currentUser, isCultural} = useUserStore()
const {provinceName: location, examMajor: mode} = currentUser.value
const queryParams = ref({location, year: '', mode})
const score = ref(currentUser.value.score)
const defaultMatch = {
    highestRank: '',
    lowestRank: '',
    num: 0,
    numTotal: 0,
    score: 0
}
const match = ref(defaultMatch)

const segCols = [
    {label: '分数', prop: 'score'},
    {label: '位次区间', prop: 'rank'},
    {label: '同分人数', prop: 'num'},
]

const eqTable = computed(() => {
    const cols = [], rows = []
    if (!eqList.value.length) return {cols, rows}
    cols.push({label: '类型/年份', prop: 'type'})
    const eqSeat = {type: '等效位'}
    const eqScore = {type: '等效分'}
    eqList.value.forEach(r => {
        cols.push({label: r.year, prop: r.year})
        eqSeat[r.year] = r.seat || '-'
        eqScore[r.year] = r.score || '-'
    })
    rows.push(eqSeat)
    rows.push(eqScore)
    return {cols, rows}
})

const {dispatchCache, removeCache} = useCacheStore()
const {onSearch, rules} = useProvideSearchModel([
    // useConditionSegmentLocation(),
    // useConditionSegmentYear(),
    // useConditionSegmentMode()
    // 目前只需要响应年份
    useConditionSegmentYear()
], queryParams, form)
const {voluntaryData, validate: validateScore} = useProvideVoluntaryData(() => queryParams.value.year)

onSearch(() => {
    handleScoreSearch()
    paging.value.reload()
})
watch(voluntaryData, () => handleScoreSearch())

const handleRefresh = () => {
    removeCache(cacheActions.getSectionList)
    removeCache(cacheActions.getEquivalentScore)

    handleScoreSearch()
}

const handleQuery = (pageNum, pageSize) => {
    const payload = {...queryParams.value, pageNum, pageSize}
    dispatchCache(cacheActions.getSectionList, payload)
        .then(res => {
            res.rows.forEach(r => r.rank = r.highestRank + '~' + r.lowestRank)
            paging.value.completeByTotal(res.rows, res.total)
        })
        .catch(e => paging.value.complete(false))
}

const handleScoreSearch = async (silence = true) => {
    await validateScore(score.value, silence)
    const payload = {...queryParams.value, score: score.value}
    const res = await dispatchCache(cacheActions.getEquivalentScore, payload)
    match.value = res.match || defaultMatch
    eqList.value = res.scores || []
}
</script>

<style lang="scss">

</style>