146 lines
4.0 KiB
Vue
146 lines
4.0 KiB
Vue
<template>
|
||
<div class="outside">
|
||
<div class="title">学生查询</div>
|
||
<div class="queryContent">
|
||
<a-form :model="search" layout="inline" ref="formRef" class="form" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
||
<a-form-item label="姓名" name="name">
|
||
<a-input v-model:value="search.name" placeholder="请输入学生姓名" />
|
||
</a-form-item>
|
||
<a-form-item label="学号" name="code">
|
||
<a-input-number :controls="false" v-model:value="search.code" placeholder="请输入学生学号" />
|
||
</a-form-item>
|
||
<a-form-item>
|
||
<a-button type="primary" @click="handleSearch">查询</a-button>
|
||
</a-form-item>
|
||
<a-form-item>
|
||
<a-button @click="handleClear">重置</a-button>
|
||
</a-form-item>
|
||
</a-form>
|
||
</div>
|
||
<div class="infoContent" v-if="isShow">
|
||
<a-row>
|
||
<a-col :span="6">
|
||
<span>学生姓名：{{ tableData[tableData.length - 1]?.name }}</span>
|
||
</a-col>
|
||
<a-col :span="6">
|
||
<span>学生学号：{{ tableData[tableData.length - 1]?.code }}</span>
|
||
</a-col>
|
||
<a-col :span="6">
|
||
<span>所在学院：{{ tableData[tableData.length - 1]?.college }}</span>
|
||
</a-col>
|
||
<a-col :span="6">
|
||
<span>所属专业：{{ tableData[tableData.length - 1]?.majorname }}</span>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<div class="tableContent" v-if="isShow">
|
||
<a-table :dataSource="tableData" :columns="tableLabel" bordered :pagination="false" :loading="loading" size="middle" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { defHttp } from '/@/utils/http/axios';
|
||
import { reactive, ref } from 'vue';
|
||
import type { UnwrapRef } from 'vue';
|
||
import { message } from 'ant-design-vue';
|
||
import type { Rule } from 'ant-design-vue/es/form';
|
||
interface FormState {
|
||
name: string;
|
||
code: string;
|
||
}
|
||
|
||
const search: UnwrapRef<FormState> = reactive({
|
||
name: '',
|
||
code: '',
|
||
});
|
||
const isShow = ref(false);
|
||
const loading = ref(false);
|
||
const tableData: any = ref([]);
|
||
const tableLabel = ref([
|
||
{
|
||
title: '考试批次',
|
||
dataIndex: 'batch',
|
||
align: 'center',
|
||
key: 'batch',
|
||
},
|
||
{
|
||
title: '总分',
|
||
dataIndex: 'result',
|
||
align: 'center',
|
||
key: 'result',
|
||
},
|
||
{
|
||
title: '听力',
|
||
align: 'center',
|
||
dataIndex: 'listen',
|
||
key: 'listen',
|
||
},
|
||
{
|
||
title: '阅读',
|
||
dataIndex: 'reading',
|
||
align: 'center',
|
||
key: 'reading',
|
||
},
|
||
{
|
||
title: '写作',
|
||
dataIndex: 'writing',
|
||
align: 'center',
|
||
key: 'writing',
|
||
},
|
||
]);
|
||
const rules: Record<string, Rule[]> = {
|
||
name: [{ required: true, message: '请输入学生姓名', trigger: 'change' }],
|
||
code: [{ required: true, message: '请输入学生学号', trigger: 'change' }],
|
||
};
|
||
const url = ref({
|
||
getData: '/cet_4/getDataByStudent',
|
||
});
|
||
const formRef = ref();
|
||
const handleSearch = () => {
|
||
formRef.value.validate().then(async () => {
|
||
loading.value = true;
|
||
tableData.value = await defHttp.post({
|
||
url: url.value.getData,
|
||
params: search,
|
||
});
|
||
tableData.value = tableData.value.results;
|
||
console.log(tableData.value);
|
||
loading.value = false;
|
||
if (tableData.value.length > 0) {
|
||
isShow.value = true;
|
||
} else {
|
||
isShow.value = false;
|
||
message.warn('未查询到相关信息');
|
||
}
|
||
});
|
||
};
|
||
const handleClear = () => {
|
||
search.name = '';
|
||
search.code = '';
|
||
isShow.value = false;
|
||
tableData.value = [];
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.outside {
|
||
// 白色
|
||
background-color: #fff;
|
||
height: 100%;
|
||
.title {
|
||
font-size: 20px;
|
||
color: #333;
|
||
padding: 20px 20px 0 20px;
|
||
}
|
||
.form {
|
||
padding-top: 20px;
|
||
}
|
||
.tableContent {
|
||
padding: 20px;
|
||
}
|
||
.infoContent {
|
||
padding: 20px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
}
|
||
</style>
|