gaokaobaoming/src/pages/university.vue
2021-10-23 03:20:32 +08:00

250 lines
8.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<div class="select">
<div style="width: 100%">
院校省份
<a-radio-group v-model:value="shengfen">
<a-radio-button
:value="index"
v-for="item,index in shengfenlist"
:key="item.area_id"
>{{ item.area_name }}</a-radio-button>
</a-radio-group>
<br />城市:
<a-radio-group v-model:value="chengshi">
<a-radio-button
:value="index"
v-for="item,index in chengshilist"
:key="item.area_id"
>{{ item.area_name }}</a-radio-button>
</a-radio-group>
<br />已选择:
<a-button
v-for="item,index in xaunzelist"
:key="index"
@click="removexuanzhong(index)"
>{{ item }}</a-button>
<br />
</div>
<div style="width: 100%">
学历层次:
<a-button
@click="shaixuan.benke == 1 ? shaixuan.benke = 0 : shaixuan.benke = 1"
:type="shaixuan.benke == 1 ? 'primary' : 'link'"
>本科</a-button>
<a-button
@click="shaixuan.zhuanke == 1 ? shaixuan.zhuanke = 0 : shaixuan.zhuanke = 1"
:type="shaixuan.zhuanke == 1 ? 'primary' : 'link'"
>专科</a-button>
<br />学院层次:
<a-button
@click="shaixuan.is985 == 1 ? shaixuan.is985 = 0 : shaixuan.is985 = 1"
:type="shaixuan.is985 == 1 ? 'primary' : 'link'"
>985</a-button>
<a-button
@click="shaixuan.is211 == 1 ? shaixuan.is211 = 0 : shaixuan.is211 = 1"
:type="shaixuan.is211 == 1 ? 'primary' : 'link'"
>211</a-button>
<a-button
@click="shaixuan.yiliuxveke == 1 ? shaixuan.yiliuxveke = 0 : shaixuan.yiliuxveke = 1"
:type="shaixuan.yiliuxveke == 1 ? 'primary' : 'link'"
>一流学科建设</a-button>
<a-button
@click="shaixuan.yiliudaxve == 1 ? shaixuan.yiliudaxve = 0 : shaixuan.yiliudaxve = 1"
:type="shaixuan.yiliudaxve == 1 ? 'primary' : 'link'"
>一流大学建设</a-button>
<a-button
@click="shaixuan.gongban == 1 ? shaixuan.gongban = 0 : shaixuan.gongban = 1"
:type="shaixuan.gongban == 1 ? 'primary' : 'link'"
>公办</a-button>
<a-button
@click="shaixuan.minban == 1 ? shaixuan.minban = 0 : shaixuan.minban = 1"
:type="shaixuan.minban == 1 ? 'primary' : 'link'"
>民办</a-button>
<br />已选择:
<a-button
v-if="shaixuan.benke == 1"
@click="shaixuan.benke == 1 ? shaixuan.benke = 0 : shaixuan.benke = 1"
:type="shaixuan.benke == 1 ? 'primary' : 'link'"
>本科</a-button>
<a-button
v-if="shaixuan.zhuanke == 1"
@click="shaixuan.zhuanke == 1 ? shaixuan.zhuanke = 0 : shaixuan.zhuanke = 1"
:type="shaixuan.zhuanke == 1 ? 'primary' : 'link'"
>专科</a-button>
<a-button
v-if="shaixuan.is985 == 1"
@click="shaixuan.is985 == 1 ? shaixuan.is985 = 0 : shaixuan.is985 = 1"
:type="shaixuan.is985 == 1 ? 'primary' : 'link'"
>985</a-button>
<a-button
v-if="shaixuan.is211 == 1"
@click="shaixuan.is211 == 1 ? shaixuan.is211 = 0 : shaixuan.is211 = 1"
:type="shaixuan.is211 == 1 ? 'primary' : 'link'"
>211</a-button>
<a-button
v-if="shaixuan.yiliuxveke == 1"
@click="shaixuan.yiliuxveke == 1 ? shaixuan.yiliuxveke = 0 : shaixuan.yiliuxveke = 1"
:type="shaixuan.yiliuxveke == 1 ? 'primary' : 'link'"
>一流学科建设</a-button>
<a-button
v-if="shaixuan.yiliudaxve == 1"
@click="shaixuan.yiliudaxve == 1 ? shaixuan.yiliudaxve = 0 : shaixuan.yiliudaxve = 1"
:type="shaixuan.yiliudaxve == 1 ? 'primary' : 'link'"
>一流大学建设</a-button>
<a-button
v-if="shaixuan.gongban == 1"
@click="shaixuan.gongban == 1 ? shaixuan.gongban = 0 : shaixuan.gongban = 1"
:type="shaixuan.gongban == 1 ? 'primary' : 'link'"
>公办</a-button>
<a-button
v-if="shaixuan.minban == 1"
@click="shaixuan.minban == 1 ? shaixuan.minban = 0 : shaixuan.minban = 1"
:type="shaixuan.minban == 1 ? 'primary' : 'link'"
>民办</a-button>
<br />
</div>
</div>
<div class="table">
<a-table :columns="columns" :data-source="data">
<template v-slot:name="text">{{ text.record.university_name }}</template>
<template v-slot:province="text">{{ text.record.area.area_name }}</template>
<template v-slot:university_level="text">{{ text.record.university_level == 0 ? "专科": "本科" }}</template>
<template v-slot:is985="text">{{ text.record.is985 == 0 ? "X": "√" }}</template>
<template v-slot:is211="text">{{ text.record.is211 == 0 ? "X": "√" }}</template>
<template v-slot:is_first_class_university="text">{{ text.record.is_first_class_university == 0 ? "X": "√" }}</template>
<template v-slot:is_first_class_subject="text">{{ text.record.is_first_class_subject == 0 ? "X": "√" }}</template>
<template v-slot:university_attribute="text">{{ text.record.university_attribute == 0 ? "民办": "公办" }}</template>
</a-table>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue"
import { allProvince, getAllCityVByArea_parent, getAllProvince, getUniversityByCondition, getUniversityByConditionres } from "../api/schoolquery"
const columns = [
{
dataIndex: 'area_names',
title: "院校名称",
key: 'area_names',
slots: { customRender: 'name' },
},
{
title: '院校所在地',
dataIndex: 'province',
key: 'province',
slots: { customRender: 'province' },
},
{
title: '学历层次',
dataIndex: 'university_level',
key: 'university_level',
slots: { customRender: 'university_level' },
},
{
title: '985',
key: 'is985',
dataIndex: 'is985',
slots: { customRender: 'is985' },
},
{
title: '211',
key: 'is211',
slots: { customRender: 'is211' },
},
{
title: '一流大学',
key: 'is_first_class_university',
slots: { customRender: 'is_first_class_university' },
},
{
title: '一流学科',
key: 'is_first_class_subject',
slots: { customRender: 'is_first_class_subject' }
},
{
title: '办学类型',
key: 'university_attribute',
slots: { customRender: 'university_attribute' },
},
];
const data = ref<getUniversityByConditionres>()
const shengfen = ref(0)
const chengshi = ref<number>(-1)
function getlist() {
getUniversityByCondition({
area_names: xaunzelist.value,
...shaixuan.value
}).then((res) => {
data.value = res.data
})
}
const shaixuan = ref({
gongban: 0,
minban: 0,
benke: 0,
zhuanke: 0,
is985: 0,
is211: 0,
yiliuxveke: 0,
yiliudaxve: 0
})
watch(shaixuan.value, getlist)
const xaunzelist = ref<string[]>([])
watch(xaunzelist.value,getlist)
getlist()
function removexuanzhong(index: number) {
xaunzelist.value.splice(index, 1)
}
function addxuanze() {
if (chengshi.value == -1 || xaunzelist.value.includes(`${shengfenlist.value[shengfen.value].area_name}/${chengshilist.value[chengshi.value].area_name}`)) {
return
}
xaunzelist.value.push(`${shengfenlist.value[shengfen.value].area_name}/${chengshilist.value[chengshi.value].area_name}`)
}
watch(shengfen, getchengshi)
const shengfenlist = ref<allProvince[]>([])
getAllProvince().then((res) => {
shengfenlist.value = res.data
shengfen.value = 0
getchengshi()
})
watch(chengshi, addxuanze)
const chengshilist = ref<allProvince[]>([])
function getchengshi() {
getAllCityVByArea_parent({ area_parent: shengfenlist.value[shengfen.value].area_id }).then((res) => {
chengshilist.value = res.data
chengshi.value = -1
})
}
</script>
<style lang="scss" scoped>
.select {
display: flex;
align-items: center;
justify-content: space-around;
}
.table {
margin-top: 60px;
}
</style>