volunteer-secondary/src/pages-sub/information/components/QuotaAndScore.vue

118 lines
4.2 KiB
Vue

<script lang="ts" setup>
const props = defineProps({
schoolDetail: {
type: Object,
default: () => ({
childdto: {
historicalScores: [],
busQuotas: []
},
})
}
})
const scoreColumns = [
{
title: '年份',
prop: 'year',
width: '33%',
align: "center"
},
{
title: '招生计划',
prop: 'planTotal',
width: '33%',
align: "center"
},
{
title: '录取分数',
prop: 'score',
width: '33%',
align: "center"
},
] as const
const partialColumns = [
{
title: '院校名称',
prop: 'name',
width: '54%',
align: "left"
},
{
title: '计划数',
prop: 'planTotal',
width: '23%',
align: "center"
},
{
title: '录取分数',
prop: 'score',
width: '23%',
align: "center"
},
] as const
const partialData = props.schoolDetail.childdto.busQuotas || []
const scoreData = props.schoolDetail.childdto.historicalScores || []
</script>
<template>
<view class="bg-[#f8f8f8]">
<view class="bg-white flex flex-col px-[30rpx] py-[20rpx]">
<view class="text-[#000] font-500 text-[30rpx] mb-[10rpx]">历届分数</view>
<sar-table bordered>
<sar-table-row>
<sar-table-cell v-for="item in scoreColumns" :key="item.prop" bold :width="item.width">
<view
:class="`${item.align === 'center' ? '' : 'pl-[20rpx]'} py-[13rpx] text-[#333] text-[24rpx] font-500 bg-[#F3F4F8]`"
:style="{ 'text-align': item.align }">{{ item.title }}</view>
</sar-table-cell>
</sar-table-row>
<sar-table-row v-for="record in scoreData" :key="record.id">
<sar-table-cell v-for="item in scoreColumns" :key="item.prop" :width="item.width">
<view
:class="`${item.align === 'center' ? '' : 'pl-[20rpx]'} text-[24rpx] text-[#333] py-[13rpx]`"
:style="{ 'text-align': item.align }">{{ record[item.prop] }}</view>
</sar-table-cell>
</sar-table-row>
<sar-table-row v-if="scoreData.length === 0">
<sar-table-cell :colspan="scoreColumns.length">
<view class="text-center text-[24rpx] text-[#999] py-[20rpx]">暂无数据</view>
</sar-table-cell>
</sar-table-row>
</sar-table>
</view>
<view class="mt-[20rpx] bg-white flex flex-col px-[30rpx] py-[20rpx]">
<view class="text-[#000] font-500 text-[30rpx] mb-[10rpx]">指标生</view>
<sar-table bordered>
<sar-table-row>
<sar-table-cell v-for="item in partialColumns" :key="item.prop" bold :width="item.width">
<view
:class="`${item.align === 'center' ? '' : 'pl-[20rpx]'} py-[13rpx] text-[#333] text-[24rpx] font-500 bg-[#F3F4F8]`"
:style="{ 'text-align': item.align }">{{ item.title }}</view>
</sar-table-cell>
</sar-table-row>
<sar-table-row v-for="record in partialData" :key="record.id">
<sar-table-cell v-for="item in partialColumns" :key="item.prop" :width="item.width">
<view
:class="`${item.align === 'center' ? '' : 'pl-[20rpx]'} text-[24rpx] text-[#333] py-[13rpx]`"
:style="{ 'text-align': item.align }">{{ record[item.prop] }}</view>
</sar-table-cell>
</sar-table-row>
<sar-table-row v-if="partialData.length === 0">
<sar-table-cell :colspan="scoreColumns.length">
<view class="text-center text-[24rpx] text-[#999] py-[20rpx]"></view>
</sar-table-cell>
</sar-table-row>
</sar-table>
</view>
</view>
</template>