|
@@ -1,197 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="resume-box">
|
|
|
- <div class="resume-header">
|
|
|
- <div class="resume-title">实习证书</div>
|
|
|
- </div>
|
|
|
- <CtTable
|
|
|
- class="mt-3"
|
|
|
- :items="list"
|
|
|
- :headers="headers"
|
|
|
- :loading="loading"
|
|
|
- :elevation="0"
|
|
|
- :isTools="false"
|
|
|
- :showPage="true"
|
|
|
- :showSelect="false"
|
|
|
- itemKey="id"
|
|
|
- :total="total"
|
|
|
- :page-info="query"
|
|
|
- @pageHandleChange="handleChangePage"
|
|
|
- >
|
|
|
- <template #comment="{ item }">
|
|
|
- <p v-ellipse-tooltip style="max-width: 300px;">{{ item.comment }}</p>
|
|
|
- </template>
|
|
|
- <template #actions="{ item }">
|
|
|
- <v-btn color="primary" @click.stop="handlePreview(item)" variant="text">预览</v-btn>
|
|
|
- <!-- 有附件的则需要提供下载按钮 -->
|
|
|
- <v-btn color="primary" @click.stop="handleDownload(item)" variant="text">下载</v-btn>
|
|
|
- </template>
|
|
|
- </CtTable>
|
|
|
-
|
|
|
- <!-- 生成实习证书 -->
|
|
|
- <div class="position-absolute position-relative" style="left: -9999px; bottom: 0;" ref="share">
|
|
|
- <img src="https://minio.citupro.com/dev/static/bgc.jpg" width="500" height="700" cover />
|
|
|
- <div class="cer-introduce">
|
|
|
- 兹有
|
|
|
- <span class="cer-text">{{ itemData?.schoolName }}</span>
|
|
|
- <span class="cer-text">{{ itemData?.majorName }}</span>
|
|
|
- 专业<span class="cer-text">{{ itemData?.studentName }}</span>
|
|
|
- 同学于<span class="cer-text">{{ itemData?.startTime ? timesTampChange(itemData?.startTime, 'Y-M-D') : '' }}</span>
|
|
|
- 至<span class="cer-text">{{ itemData?.endTime ? timesTampChange(itemData?.endTime, 'Y-M-D') : '' }}</span>
|
|
|
- 在<span class="cer-text">{{ itemData?.enterpriseName ? formatName(itemData?.enterpriseName) : '' }}</span>
|
|
|
- <span class="cer-text">{{ itemData?.deptName }}</span>岗位实习。
|
|
|
- </div>
|
|
|
- <div class="cer-comment">{{ itemData?.comment }}</div>
|
|
|
- <div class="cer-prove">特此证明。</div>
|
|
|
- <div class="cer-end">
|
|
|
- <div>{{ itemData?.createTime ? timesTampChange(itemData?.createTime, 'Y-M-D') : '' }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <Loading :visible="showLoading"></Loading>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-defineOptions({ name: 'PersonalCenterStudentInternshipCertificate' })
|
|
|
-import { ref } from 'vue'
|
|
|
-import { getBlob, saveAs } from '@/utils'
|
|
|
-import { timesTampChange } from '@/utils/date'
|
|
|
-import { getCertificatePage } from '@/api/recruit/personal/student'
|
|
|
-import Snackbar from '@/plugins/snackbar'
|
|
|
-import html2canvas from 'html2canvas'
|
|
|
-import { DPR } from '@/utils'
|
|
|
-import { usePersonCenterStore } from '@/store/personCenter'
|
|
|
-import { formatName } from '@/utils/getText'
|
|
|
-
|
|
|
-const share = ref(null)
|
|
|
-const loading = ref(false)
|
|
|
-const showLoading = ref(false)
|
|
|
-const list = ref([
|
|
|
- {
|
|
|
- enterpriseName: '门墩儿科技有限公司',
|
|
|
- createTime: 1668476800000,
|
|
|
- schoolName: '学校1',
|
|
|
- majorName: '专业1',
|
|
|
- startTime: 1668476800000,
|
|
|
- endTime: 1668476800000,
|
|
|
- deptName: '部门1',
|
|
|
- studentName: '张三',
|
|
|
- comment: '备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1备注1',
|
|
|
- url: 'https://menduner.citupro.com:3443/dev/person/1893630489546350594/attachment/7cde29dc69c1403649be55d4c2bfd3d8304c088dc79ab25afe9c4bf55d3b382f.docx'
|
|
|
- },
|
|
|
- {
|
|
|
- enterpriseName: '北京金融街资本运营集团有限公司西单美爵酒店分公司',
|
|
|
- createTime: 1668476800000,
|
|
|
- schoolName: '学校1',
|
|
|
- majorName: '专业1',
|
|
|
- startTime: 1668476800000,
|
|
|
- endTime: 1668476800000,
|
|
|
- deptName: '部门1',
|
|
|
- studentName: '张三',
|
|
|
- comment: '备注1',
|
|
|
- url: 'https://menduner.citupro.com:3443/dev/person/1893630489546350594/attachment/7cde29dc69c1403649be55d4c2bfd3d8304c088dc79ab25afe9c4bf55d3b382f.docx'
|
|
|
- }
|
|
|
-])
|
|
|
-const total = ref(2)
|
|
|
-const query = ref({
|
|
|
- pageNo: 1,
|
|
|
- pageSize: 10
|
|
|
-})
|
|
|
-const itemData = ref()
|
|
|
-const headers = [
|
|
|
- { title: '发放企业', key: 'enterpriseName', sortable: false },
|
|
|
- { title: '实习点评', key: 'comment', sortable: false },
|
|
|
- { title: '创建时间', key: 'createTime', sortable: false, value: item => timesTampChange(item.createTime, 'Y-M-D h:m') },
|
|
|
- { title: '操作', key: 'actions', sortable: false }
|
|
|
-]
|
|
|
-
|
|
|
-const getList = async () => {
|
|
|
- loading.value = true
|
|
|
- try {
|
|
|
- const result = await getCertificatePage(query.value)
|
|
|
- console.log(result, '实习证书')
|
|
|
- } finally {
|
|
|
- loading.value = false
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const handleChangePage = (val) => {
|
|
|
- query.value.pageNo = val
|
|
|
- getList()
|
|
|
-}
|
|
|
-
|
|
|
-// 生成实习证书图片
|
|
|
-const personCenterStore = usePersonCenterStore()
|
|
|
-const generateAndDownloadImage = async () => {
|
|
|
- try {
|
|
|
- const canvas = await html2canvas(share.value, { scale: DPR(), useCORS: true })
|
|
|
- const image = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '')
|
|
|
-
|
|
|
- const fileName = `实习证书 - ${formatName(itemData.value?.enterpriseName)}`
|
|
|
- personCenterStore.setPreviewData([`data:image/png;base64,${image}`], 0, fileName)
|
|
|
- showLoading.value = false
|
|
|
- } catch (error) {
|
|
|
- console.error('图片生成失败', error)
|
|
|
- Snackbar.warning('加载失败,请稍后重试')
|
|
|
- showLoading.value = false
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const handlePreview = (item) => {
|
|
|
- itemData.value = item
|
|
|
- if (!share.value) return
|
|
|
- showLoading.value = true
|
|
|
- setTimeout(() => {
|
|
|
- generateAndDownloadImage()
|
|
|
- }, 1000)
|
|
|
-}
|
|
|
-
|
|
|
-// 下载附件
|
|
|
-const handleDownload = (k) => {
|
|
|
- getBlob(k.url).then(blob => {
|
|
|
- saveAs(blob, k.title)
|
|
|
- })
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-.cer-text{
|
|
|
- text-decoration: underline;
|
|
|
- margin: 0 3px;
|
|
|
- font-weight: 700;
|
|
|
-}
|
|
|
-.cer-introduce{
|
|
|
- width: 70%;
|
|
|
- position: absolute;
|
|
|
- top: 51%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
- text-indent: 2em;
|
|
|
-}
|
|
|
-.cer-comment{
|
|
|
- width: 70%;
|
|
|
- position: absolute;
|
|
|
- top: 68%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
- text-indent: 2em;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 3;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
-}
|
|
|
-.cer-prove{
|
|
|
- width: 70%;
|
|
|
- position: absolute;
|
|
|
- top: 82%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
- text-indent: 2em;
|
|
|
-}
|
|
|
-.cer-end{
|
|
|
- position: absolute;
|
|
|
- top: 87%;
|
|
|
- right: 16%;
|
|
|
-}
|
|
|
-</style>
|