|  | @@ -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>
 |