eas_webadmin/src/views/archives/students/index.vue

<template>
  <div class="wh-full bg-white">
    <div class="search-box">
      <n-gradient-text
        :gradient="{
          from: '#1890ff',
          to: '#bc3c1a'
        }"
      >
        <h1>请搜索学员后查看学员档案</h1>
      </n-gradient-text>
      <n-select
        v-model:value="studentNumber"
        size="large"
        filterable
        placeholder="搜索学员"
        :options="options"
        :loading="loading"
        clearable
        remote
        @update:value="goToList"
        @search="handleSearch"
      />
    </div>
    <div class="list-archives">
      <ArchivesList :student-number="studentNumber" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { SelectOption } from 'naive-ui';
import { getStudentByKeyword } from './api';
import ArchivesList from './component/index.vue';

const options = ref<SelectOption[]>([]);

const loading = ref(false);
const studentNumber = ref<string>('');

function handleSearch(query: string) {
  if (!query.length) {
    options.value = [];
    return;
  }
  loading.value = true;
  getStudentByKeyword(query).then(result => {
    const optionData = result.data?.map(res => {
      return {
        label: res.studentName,
        value: res.studentNumber
      };
    });
    options.value = optionData as SelectOption[];
    loading.value = false;
  });
}
function goToList(value: string) {
  studentNumber.value = value;
}
</script>
<style scoped>
.search-box {
  width: 26%;
  margin: 0 auto;
}
.list-archives {
  height: calc(100% - 94px);
}
h1 {
  font-size: 36px;
}
</style>