|
@@ -0,0 +1,176 @@
|
|
|
+<template>
|
|
|
+ <v-card class="card-box pa-3">
|
|
|
+ <div class="d-flex">
|
|
|
+ <!-- 统计 -->
|
|
|
+ <div class="d-flex align-center statistics">
|
|
|
+ <div v-for="val in statistics" :key="val.key" 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 class="d-flex align-center ml-7">
|
|
|
+ <span class="color-666">自定义日期</span>
|
|
|
+ <div class="ml-5">
|
|
|
+ <date-picker
|
|
|
+ v-model="date"
|
|
|
+ :item="{
|
|
|
+ mode: 'daterange',
|
|
|
+ clearable: true,
|
|
|
+ placeholder: '请选择要查看的时间范围',
|
|
|
+ format: 'YYYY/MM/DD',
|
|
|
+ width: 250
|
|
|
+ }"
|
|
|
+ @change="handleChangeDate"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="d-flex mt-5">
|
|
|
+ <v-treeview :items="items" color="primary" style="width: 25%; border-right: 1px solid #eee;" class="pr-5"></v-treeview>
|
|
|
+ <CtTable
|
|
|
+ class="ml-5"
|
|
|
+ :items="tableData"
|
|
|
+ :headers="headers"
|
|
|
+ :loading="loading"
|
|
|
+ :elevation="0"
|
|
|
+ :is-tools="false"
|
|
|
+ :showPage="true"
|
|
|
+ :total="total"
|
|
|
+ :page-info="query"
|
|
|
+ itemKey="id"
|
|
|
+ @pageHandleChange="handleChangePage"
|
|
|
+ style="flex: 1;"
|
|
|
+ >
|
|
|
+ <template #studentName="{ item }">
|
|
|
+ <div class="d-flex align-center">
|
|
|
+ <v-avatar size="40" :image="getUserAvatar(item.studentHeadImg, item.sex)"></v-avatar>
|
|
|
+ <span class="ml-3">{{ item?.studentName }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #actions="{ item }">
|
|
|
+ <v-btn color="primary" variant="text" @click="handleUploadLetter(item)">上传推荐信</v-btn>
|
|
|
+ <v-btn color="#00897B" variant="text" @click="handleIssueCertificate(item)">颁发实习证书</v-btn>
|
|
|
+ </template>
|
|
|
+ </CtTable>
|
|
|
+ </div>
|
|
|
+ </v-card>
|
|
|
+
|
|
|
+ <!-- 上传推荐信 -->
|
|
|
+ <CtDialog :visible="showLitterDialog" :widthType="2" titleClass="text-h6" title="上传推荐信" @close="showLitterDialog = false;" @submit="handleSubmitLetter">
|
|
|
+ <UploadRecommendationLetterForm ref="RecommendationLetterRef" />
|
|
|
+ </CtDialog>
|
|
|
+
|
|
|
+ <!-- 颁发实习证书 -->
|
|
|
+ <CtDialog :visible="showCertificateDialog" :widthType="2" titleClass="text-h6" title="颁发实习证书" @close="showCertificateDialog = false;" @submit="handleSubmitCertificate">
|
|
|
+ <IssueCertificateForm ref="IssueCertificateFormRef" />
|
|
|
+ </CtDialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+defineOptions({ name: 'enterpriseStudentInternshipSituation' })
|
|
|
+import { ref } from 'vue'
|
|
|
+import { getUserAvatar } from '@/utils/avatar'
|
|
|
+import DatePicker from '@/components/FormUI/datePicker'
|
|
|
+import UploadRecommendationLetterForm from './RecommendationLetterForm'
|
|
|
+import IssueCertificateForm from './CertificateForm'
|
|
|
+
|
|
|
+const date = ref(null)
|
|
|
+const statistics = ref([
|
|
|
+ { label: '实习中', value: 2, key: 'studentPracticeApplyCount' },
|
|
|
+ { label: '实习结束', value: 6, key: 'studentPracticeSuccessCount' },
|
|
|
+ { label: '等待实习', value: 10, key: 'studentPracticeWaitCount' }
|
|
|
+])
|
|
|
+
|
|
|
+const items = ref([
|
|
|
+ { id: 1, title: '运营部' },
|
|
|
+ { id: 2, title: '开发部' },
|
|
|
+ { id: 3, title: '行政部' },
|
|
|
+ { id: 4, title: '市场部' }
|
|
|
+])
|
|
|
+const loading = ref(false)
|
|
|
+const total = ref(0)
|
|
|
+const query = ref({
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10
|
|
|
+})
|
|
|
+const tableData = ref([
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ studentHeadImg: 'https://minio.menduner.com/dev/4cd324c459e055c34f8467089bd8c3013e2a95dee6f3883cbdacf100b9a50d52.jpeg',
|
|
|
+ studentName: '张三',
|
|
|
+ sex: '1',
|
|
|
+ schoolDepartmentName: '计算机学院',
|
|
|
+ majorName: '计算机科学与技术'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ studentHeadImg: 'https://minio.menduner.com/dev/4cd324c459e055c34f8467089bd8c3013e2a95dee6f3883cbdacf100b9a50d52.jpeg',
|
|
|
+ studentName: '张三',
|
|
|
+ sex: '2',
|
|
|
+ schoolDepartmentName: '计算机学院',
|
|
|
+ majorName: '计算机科学与技术'
|
|
|
+ }
|
|
|
+])
|
|
|
+const headers = [
|
|
|
+ { title: '学生姓名', key: 'studentName', sortable: false },
|
|
|
+ { title: '所属院系', key: 'schoolDepartmentName', sortable: false },
|
|
|
+ { title: '所属专业', key: 'majorName', sortable: false },
|
|
|
+ { title: '操作', key: 'actions', sortable: false }
|
|
|
+]
|
|
|
+
|
|
|
+const handleChangePage = (val) => {
|
|
|
+ query.value.pageNo = val
|
|
|
+}
|
|
|
+
|
|
|
+// 时间范围选择
|
|
|
+const handleChangeDate = (time) => {
|
|
|
+ console.log(time, 'range')
|
|
|
+}
|
|
|
+
|
|
|
+// 上传推荐信
|
|
|
+const showLitterDialog = ref(false)
|
|
|
+const RecommendationLetterRef = ref(null)
|
|
|
+const handleUploadLetter = () => {
|
|
|
+ showLitterDialog.value = true
|
|
|
+}
|
|
|
+const handleSubmitLetter = async () => {
|
|
|
+ const { valid } = await RecommendationLetterRef.value.CtFormRef.formRef.validate()
|
|
|
+ if (!valid) return
|
|
|
+ const query = RecommendationLetterRef.value.getQuery()
|
|
|
+ console.log(query, '推荐信-form')
|
|
|
+}
|
|
|
+
|
|
|
+// 颁发实习证书
|
|
|
+const showCertificateDialog = ref(false)
|
|
|
+const IssueCertificateFormRef = ref(null)
|
|
|
+const handleIssueCertificate = () => {
|
|
|
+ showCertificateDialog.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const handleSubmitCertificate = async () => {
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.statistics {
|
|
|
+ width: 50%;
|
|
|
+ &-card {
|
|
|
+ width: 33.33%;
|
|
|
+ margin-right: 12px;
|
|
|
+ background-color: #f7f8fa;
|
|
|
+ border-radius: 10px;
|
|
|
+ &:nth-child(3) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ font-size: 44px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|