volunteer-4/src/pages-sub/home/college/components/EnrollmentPlan.vue

134 lines
3.7 KiB
Vue

<template>
<view class="flex flex-col pt-[32rpx] px-[32rpx] bg-[#fff]">
<view class="flex flex-wrap justify-between items-center">
<text class="font-semibold text-[#303030] text-[32rpx] w-full text-center mb-[20rpx]">
招生计划({{ provinceName }})
</text>
<view
@click="handleShow(1)"
class="px-[24rpx] py-[8rpx] bg-[#f8f8f8] rounded-[8rpx] flex justify-between items-center text-[24rpx]"
>
{{ year }}
<wd-icon name="arrow-down" size="16rpx" custom-class="ml-[80rpx]"></wd-icon>
</view>
<view
@click="handleShow(2)"
class="px-[24rpx] py-[8rpx] bg-[#f8f8f8] rounded-[8rpx] flex justify-between items-center text-[24rpx]"
>
{{ batche }}
<wd-icon name="arrow-down" size="16rpx" custom-class="ml-[80rpx]"></wd-icon>
</view>
</view>
<scroll-view class="mt-[38rpx] flex-1 pb-safe">
<WXXTable :columns="columns" :tableData="tableData"></WXXTable>
</scroll-view>
<wd-action-sheet v-model="show" title="">
<view class="px-[32rpx]">
<CustomPickerView :list="pickList" v-model="pickValue" />
</view>
<view class="flex items-center justify-between px-[32rpx]">
<view class="cancel-btn" @click="show = false">取消</view>
<view class="submit-btn" @click="handleConfirm"></view>
</view>
</wd-action-sheet>
</view>
</template>
<script lang="ts" setup>
import WXXTable from '@/pages-sub/home/components/Table.vue'
import { getPlanProList } from '@/service/index/api'
import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
import { useUserStore } from '@/store'
const props = defineProps({
id: {
type: Number,
default: 0,
},
})
const userStore = useUserStore()
const batchList = []
const batche = ref(batchList[0])
const batches = ref(batchList)
const provinceName = userStore.userInfo.estimatedAchievement.provinceName
const year = ref('')
const yearList = ref([])
const pickList = ref([])
const pickValue = ref('')
let pickType = 1
const tableData = ref([])
const columns = [
{ name: '院校名称', key: 'universityName', width: '25%' },
{ name: '招生专业', key: 'major', width: '37%' },
{ name: '计划数', key: 'plancount', width: '13%' },
{ name: '学制', key: 'academic', width: '10%' },
{ name: '学费', key: 'fee', width: '15%' },
]
let isFirst = true
watch(
() => props.id,
(newVal) => {
getPlanProListData(newVal)
},
)
const show = ref(false)
const handleShow = (type: number) => {
show.value = true
pickType = type
if (type === 1) {
pickList.value = yearList.value
pickValue.value = year.value
} else if (type === 2) {
pickList.value = batches.value
}
}
const getPlanProListData = async (newVal) => {
getPlanProList({
years: year.value === '全部年份' ? '' : year.value,
_uid: newVal,
batchName: batche.value === '全部分类' ? '' : batche.value,
locationCode: userStore.userInfo.estimatedAchievement.provinceCode,
}).then((resp) => {
const _res = resp.result as {
batches: { batchName: string }[]
yearsDtos: string[]
plans: any[]
}
yearList.value = ['全部年份', ..._res.yearsDtos]
batches.value = ['全部分类', ..._res.batches.map((item) => item.batchName)]
tableData.value = _res.plans
if (isFirst) {
year.value = yearList.value[0]
batche.value = batches.value[0]
}
isFirst = false
})
}
const handleConfirm = () => {
if (pickType === 1) {
year.value = pickValue.value
} else if (pickType === 2) {
batche.value = pickValue.value
}
show.value = false
getPlanProListData(props.id)
}
</script>
<style lang="scss" scoped>
@import '@/pages-sub/home/styles/picker-view-btn.scss';
</style>