menduner/src/views/recruit/teacher/studentList/index.vue

<!-- 学生列表 -->
<template>
  <v-card class="px-3">
    <!-- 筛选条件 -->
    <div class="d-flex justify-space-between mt-8 mb-10">
      <div class="d-flex align-center">
        <!-- <span class="mx-3 color-666 font-size-14">院系</span> -->
        <Autocomplete class="mr-3" v-model="query.schoolDepartmentName" :item="yuanXi"></Autocomplete>
        <v-btn color="primary" class="half-button ml-3" @click="handleSearch()">查 询</v-btn>
        <v-btn class="half-button ml-3" prepend-icon="mdi-refresh" variant="outlined" color="primary" @click="handleSearch(true)">刷 新</v-btn>
      </div>
      <v-btn :loading="exportLoading" prepend-icon="mdi-export-variant" color="primary" variant="tonal" class="ml-3" @click="null">导出</v-btn>
    </div>
    
    <!-- 列表 -->
    <div class="mt-5" style="min-height: 500px;">
      <CtTable
        :items="tableData"
        :headers="headers"
        :loading="loading"
        :elevation="0"
        :is-tools="false"
        :showPage="true"
        :total="total"
        :page-info="query"
        itemKey="id"
        @pageHandleChange="handleChangePage"
      >
        <template #studentName="{ item }">
          <div class="d-flex align-center cursor-pointer" @click="studentDetails(item.id)">
            <v-avatar size="40" :image="getUserAvatar(item?.person?.avatar, item?.person?.sex)"></v-avatar>
            <span class="ml-3">{{ item?.person?.name }}</span>
          </div>
        </template>
        <template #actions="{ item }">
          <v-btn v-if="!item?.recommendationLetter" color="primary" variant="text" @click="handleUploadLetter(item.id)">上传推荐信</v-btn>
          <v-btn v-if="!item?.evaluate" color="#00897B" variant="text" @click="handleIssueCertificate(item.id)">颁发实习证书</v-btn>
        </template>
      </CtTable>
      <!-- <Loading :visible="loading"></Loading> -->
    </div>
  </v-card >
</template>

<script setup>
defineOptions({name: 'studentList-index'})
import { ref } from 'vue'
import Snackbar from '@/plugins/snackbar'
import { formatName } from '@/utils/getText'
import { getUserAvatar } from '@/utils/avatar'
import { schoolOrganization, studentList } from '@/api/school'
import { useRouter } from 'vue-router'; const router = useRouter()

const loading = ref(false)
const query = ref({
  pageSize: 20,
  pageNo: 1,
  schoolDepartmentName: null,
})

const headers = [
  { title: '学生姓名', key: 'studentName', sortable: false },
  { title: '学生学号', key: 'test', sortable: false },
  { title: '所属专业', key: 'test', sortable: false },
  { title: '录用企业', key: 'test', sortable: false, value: item => formatName(item.test) },
  { title: '录用部门', key: 'test', sortable: false, value: item => formatName(item.test) },
  { title: '录用岗位', key: 'test', sortable: false, value: item => formatName(item.test) },
  { title: '操作', key: 'actions', sortable: false }
]

const tableData = ref([])
tableData.value = [{ test: 'ces', person: { name: '123' }, id: '1'}]
const total = ref(0)
// 列表
const getData = async (isRefresh = false) => {
  query.value.schoolDepartmentName = '中文系'
  const { data, total: number } = await studentList(query.value)

  tableData.value = data?.records?.length && data.records.map(item=>{
    const { enterpeiseName, enterpriseRecruitJobName, jobDept } = item
    return { ...item.student, enterpeiseName, enterpriseRecruitJobName, jobDept }
  })

  total.value = number
  if (isRefresh) Snackbar.success('刷新成功')
}

const handleChangePage = (val) => {
	query.value.pageNo = val
	getData()
}

const handleSearch = (refresh = false) => {
  query.value.pageNo = 1
  getData(refresh)
}

const schoolInfo = ref(localStorage.getItem('schoolInfo') ? JSON.parse(localStorage.getItem('schoolInfo')) : {})

const yuanXi = ref({ width: 300, items: [], clearable: false, hideDetails: true, label: '请选择院系' })

// 列表
const getYuanXiItem = async () => {
  const schoolId = schoolInfo.value?.school?.schoolId || null
  if (!schoolId) return Snackbar.warning('获取学校信息失败！')
  
  const { data } = await schoolOrganization({ schoolId })
  yuanXi.value.items = data?.length && data.map(item=> {
    return item?.title ? { label: item.title, value: item.title } : null
  }).filter(Boolean)

  if (yuanXi.value.items?.length) {
    query.value.schoolDepartmentName = yuanXi.value.items[0].value
    getData()
  }
}
getYuanXiItem()

const studentDetails = (id) => {
  if (id) router.push(`/recruit/teacher/studentList/detail/${id}`)
}

const exportLoading = ref(false)
</script>
<style lang="scss" scoped>
.title {
  color: var(--color-333);
  font-weight: 600;
  font-size: 16px;
}
.left {
  min-width: 200px;
}
</style>