CET-vue-3.0/src/views/cet/cet-student-query.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>