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

<!-- 实习情况 -->
<template>
	<v-card class="card-box pa-3">
		<div class="d-flex justify-space-between align-center">
			<div class="d-flex align-center statistics">
				<div v-for="(val, index) in statistics" :key="index" class="statistics-card pa-5">
					<div class="color-666">{{ val.label }}</div>
					<div class="">
						<span class="value font-weight-bold color-primary">{{ val.value }}</span>
						<span class="color-999 font-size-14">人</span>
					</div>
				</div>
			</div>
		</div>

		<CtTable
			class="mt-5"
      :items="tableData"
      :headers="headers"
      :loading="loading"
      :elevation="0"
      :is-tools="false"
      :showPage="true"
      :total="total"
      :page-info="query"
      itemKey="id"
      @pageHandleChange="handleChangePage"
    >
			<template #enterpriseName="{ item }">
				<div class="d-flex align-center">
					<v-avatar size="40" :image="item.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></v-avatar>
					<span class="ml-3 color-primary cursor-pointer" @click="handleEnterprise(item.id)">{{ formatName(item.anotherName || item.name) }}</span>
				</div>
			</template>
			<template #internshipNumber="{ item }">
				<span class="color-primary cursor-pointer" @click="handleDetail(item, '实习中')">{{ item.internshipNumber || 0 }}人</span>
			</template>
			<template #waitInternshipNumber="{ item }">
				<span class="color-primary cursor-pointer" @click="handleDetail(item, '等待实习')">{{ item.waitInternshipNumber || 0 }}人</span>
			</template>
			<template #internshipSuccessNumber="{ item }">
				<span class="color-primary cursor-pointer" @click="handleDetail(item, '结束实习')">{{ item.internshipSuccessNumber || 0 }}人</span>
			</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>
	</v-card>

	<CtDialog :visible="drill.show" :widthType="1" titleClass="text-h6" :footer="false" :title="drill.title" @close="handleClose">
    <CtTable
      :items="drill.list"
      :headers="drill.headers"
      :loading="false"
      :elevation="0"
      :isTools="false"
      :showPage="true"
      :total="drill.total"
      :page-info="drill.query"
      itemKey="id"
      @pageHandleChange="handleChangeDrillPage"
    >
			<template #studentName="{ item }">
				<div class="d-flex align-center">
					<v-avatar size="40" :image="getUserAvatar(item.headImg, item.teacherSex)"></v-avatar>
					<span class="ml-3 color-primary cursor-pointer" @click="handleToStudentDetail(item.studentId)">{{ item.studentName || item.phone }}</span>
				</div>
			</template>
    </CtTable>
  </CtDialog>

	<v-navigation-drawer v-model="showDetail" absolute location="right" rounded temporary width="700" class="pa-5">
		111
	</v-navigation-drawer>
</template>

<script setup>
defineOptions({name: 'studentList-internship-situation'})
import { ref, onMounted } from 'vue'
import { getUserAvatar } from '@/utils/avatar'
import { getStudentPage } from '@/api/recruit/enterprise/student'
import { dealDictObjData } from '@/utils/position'
import { formatName } from '@/utils/getText'
import Snackbar from '@/plugins/snackbar'
import { studentPracticeStatistics } from '@/api/school'

const statistics = ref([
	{ label: '等待实习', value: 0, key: 'waitInternshipNumber' },
	{ label: '实习中', value: 1, key: 'internshipNumber' },
	{ label: '实习结束', value: 0, key: 'internshipSuccessNumber' }
])

const loading = ref(false)
const total = ref(0)
const query = ref({
	pageNo: 1,
	pageSize: 10,
	startTime: null
})
const tableData = ref([
	{
    "id": 1,
    "name": "门墩儿信息科技有限公司",
    "anotherName": "门墩儿",
    "industryId": "1829087620475494402",
    "industryName": '互联网',
    "scale": "0",
    "scaleName": '0-20人',
    "logoUrl": "https://minio.menduner.com/dev/1e6893918ef378ca280360078dfe74ade10b27101c89865261824b46de7d34a6.png",
    internshipNumber: 2,
    internshipSuccessNumber: 0,
    waitInternshipNumber: 0
  }
])
const schoolInfo = ref(localStorage.getItem('schoolInfo') ? JSON.parse(localStorage.getItem('schoolInfo')) : {})

const headers = [
	{ title: '实习企业', key: 'enterpriseName', sortable: false },
	{ title: '所在行业', key: 'industryName', sortable: false },
	{ title: '企业规模', key: 'scaleName', sortable: false },
	{ title: '实习中', key: 'internshipNumber', sortable: false },
	{ title: '实习结束', key: 'internshipSuccessNumber', sortable: false },
	{ title: '等待实习', key: 'waitInternshipNumber', sortable: false },
]

// 学生列表
const getList = async () => {
	loading.value = true
	try {
		const result = await getStudentPage(query.value)
		tableData.value = result?.list.map(e => {
			e.enterprise = dealDictObjData({}, e.enterprise)
			e.job = dealDictObjData({}, e.job)
			return e
		})
		total.value = result?.total || 0
	} finally {
		loading.value = false
	}
}

// 数值统计
const getStatistics = async () => {
	try {
		const data = await studentPracticeStatistics({ schoolId: schoolInfo.value?.school?.schoolId })
		console.log(data, 'data')
		// statistics.value.forEach(e => {
		// 	const obj = data.find(val => val.key === e.value)
		// 	e.count = obj ? obj.value : 0
		// })
	} catch {}
}

onMounted(async () => {
	// const { data } = await getDict('student_practice_status')
	// statistics.value = data
	// getStatistics()
	// getList()
})

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

// 跳转企业详情
const handleEnterprise = (id) => {
  if (!id) return
  window.open(`/recruit/personal/company/details/${id}?key=briefIntroduction`)
}

// 实习学生
const drill = ref({
  total: 0,
  query: {
    size: 10,
    current: 1
  },
	title: '学生列表',
  show: false,
  list: [{
		studentName: '张三',
		enterpriseName: '北京字节跳动科技有限公司',
		phone: '12345678901',
		schoolDepartmentName: '计算机科学与技术',
		majorName: '计算机科学与技术',
		schoolClassName: '2019级',
		studentNo: '2019111111',
		studentId: 1,
		teacherSex: '1',
		headImg: '',
		phone: '12345678901',
		studentPracticeStatus: '实习中'
	}],
  headers: [
    { title: '状态', key: 'studentPracticeStatus', sortable: false },
    { title: '学生姓名', key: 'studentName', sortable: false },
		{ title: '实习企业', key: 'enterpriseName', sortable: false },
    { title: '联系电话', key: 'phone', sortable: false },
    { title: '所属院系', key: 'schoolDepartmentName', sortable: false },
    { title: '所属专业', key: 'majorName', sortable: false },
    { title: '所在班级', key: 'schoolClassName', sortable: false },
    { title: '学号', key: 'studentNo', sortable: false },
  ]
})
// 学生列表
const handleDetail = (item, label) => {
	drill.value.title = `${item.anotherName} - 状态[${label}] - 学生列表`
	drill.value.query.current = 1
  drill.value.show = true
}
const handleChangeDrillPage = (page) => {}
const handleClose = () => {
  drill.value.show = false
  // drill.value.list = []
}

const showDetail = ref(false)
const handleToStudentDetail = (id) => {
	showDetail.value = true
}
</script>

<style scoped lang="scss">
.statistics {
	width: 70%;
	&-card {
		width: 33.33%;
		margin-right: 12px;
		background-color: #f7f8fa;
		border-radius: 10px;
		&:nth-child(3) {
			margin-right: 0;
		}
		.value {
			font-size: 44px;
		}
	}
}
</style>