cykj/hzdyjs
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

重要提交，可能会影响到其他模块及工作流。*****

Browse Source
This commit is contained in:
wuzhen committed 2025-08-07 18:37:28 +08:00
1 parent bab7b53074
commit e06d8fca2c
78 files changed
+3545 -3471
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/components/ImageUpload/index-bak.vue
-2
View File
@@ -312,8 +312,6 @@ const performUpload = async (options: any) => {
// 上传成功回调
const handleUploadSuccess = (res: any, file: any) => {
// 确保res存在且有正确的结构
if (res && res.code === 200) {
// 避免重复添加，检查是否已经存在
web/src/components/PosterPreview/index.vue
+87 -102
View File
@@ -1,11 +1,7 @@
<template>
<div class="poster-preview">
<!-- 海报画布容器 -->
<div
ref="posterRef"
class="poster-canvas"
:style="canvasStyle"
>
<div ref="posterRef" class="poster-canvas" :style="canvasStyle">
<!-- 企业信息叠加 -->
<div class="info-overlay">
<!-- 顶部企业标题 -->
@@ -15,7 +11,7 @@
</div>
<!-- 中间内容区域 - 根据海报类型显示不同内容 -->
<!-- 企业海报：展示企业文化和优势 -->
<div v-if="posterData.posterType === '1'" class="position-info">
<div class="position-title">加入我们 · 共创辉煌</div>
@@ -26,7 +22,7 @@
<br />
<br />
<br />
<div class="detail-item" v-if="enterpriseDetail.mainBusiness">
<span class="icon">🏢</span>
<span>{{ enterpriseDetail.mainBusiness }}</span>
@@ -44,16 +40,16 @@
<!-- 岗位海报：展示具体岗位信息 -->
<div v-else-if="posterData.posterType === '2'" class="position-info">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="position-title">
{{ posterData.positionName || positionDetail?.positionName || '招聘岗位' }}
</div>
@@ -89,7 +85,6 @@
<!-- 底部联系信息 - 根据海报类型显示不同内容 -->
<div class="company-footer">
<div v-if="enterpriseDetail" class="company-info">
<!-- 企业海报：重点显示联系方式 -->
<template v-if="posterData.posterType === '1'">
<div class="info-row" v-if="enterpriseDetail.contactPhone">
@@ -125,7 +120,6 @@
<span class="value">{{ enterpriseDetail.email }}</span>
</div>
</template>
</div>
</div>
</div>
@@ -133,56 +127,52 @@
<!-- 操作按钮 -->
<div class="action-buttons">
<el-button type="primary" icon="Download" @click="exportToPDF" :loading="exporting">
导出PDF
</el-button>
<el-button icon="Picture" @click="exportToImage" :loading="exporting">
导出图片
</el-button>
<el-button type="primary" icon="Download" @click="exportToPDF" :loading="exporting"> 导出PDF </el-button>
<el-button icon="Picture" @click="exportToImage" :loading="exporting"> 导出图片 </el-button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import { ElMessage } from 'element-plus'
import { ref, computed } from 'vue';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import { ElMessage } from 'element-plus';
// 定义接口
interface PosterData {
posterPath: string
enterpriseName: string
positionName?: string
posterType: string
posterPath: string;
enterpriseName: string;
positionName?: string;
posterType: string;
}
interface EnterpriseDetail {
mainBusiness?: string
enterpriseScale?: string
contactPhone?: string
email?: string
address?: string
mainBusiness?: string;
enterpriseScale?: string;
contactPhone?: string;
email?: string;
address?: string;
}
interface PositionDetail {
positionName?: string
workAddress?: string
salary?: string
workTime?: string
requiredSkills?: string
positionName?: string;
workAddress?: string;
salary?: string;
workTime?: string;
requiredSkills?: string;
}
// Props定义
const props = defineProps<{
posterData: PosterData
enterpriseDetail?: EnterpriseDetail
positionDetail?: PositionDetail
}>()
posterData: PosterData;
enterpriseDetail?: EnterpriseDetail;
positionDetail?: PositionDetail;
}>();
// 响应式数据
const posterRef = ref<HTMLElement>()
const exporting = ref(false)
const posterRef = ref<HTMLElement>();
const exporting = ref(false);
// 计算样式
const canvasStyle = computed(() => ({
@@ -190,7 +180,7 @@ const canvasStyle = computed(() => ({
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat'
}))
}));
// 企业规模字典
const scaleDict = {
@@ -199,79 +189,79 @@ const scaleDict = {
'3': '200-500人',
'4': '500-1000人',
'5': '1000人以上'
}
};
// 获取规模标签
const getScaleLabel = (value: string) => {
return scaleDict[value as keyof typeof scaleDict] || value
}
return scaleDict[value as keyof typeof scaleDict] || value;
};
// 导出为PDF
const exportToPDF = async () => {
if (!posterRef.value) return
if (!posterRef.value) return;
try {
exporting.value = true
exporting.value = true;
const canvas = await html2canvas(posterRef.value, {
backgroundColor: null,
scale: 2,
useCORS: true,
allowTaint: true,
foreignObjectRendering: false
})
const imgData = canvas.toDataURL('image/png')
});
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: 'a4'
})
const imgWidth = 190
const imgHeight = (canvas.height * imgWidth) / canvas.width
pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight)
const fileName = `${props.posterData.enterpriseName}_招聘海报_${new Date().getTime()}.pdf`
pdf.save(fileName)
ElMessage.success('PDF导出成功')
});
const imgWidth = 190;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight);
const fileName = `${props.posterData.enterpriseName}_招聘海报_${new Date().getTime()}.pdf`;
pdf.save(fileName);
ElMessage.success('PDF导出成功');
} catch (error) {
console.error('PDF导出失败:', error)
ElMessage.error('PDF导出失败，请重试')
console.error('PDF导出失败:', error);
ElMessage.error('PDF导出失败，请重试');
} finally {
exporting.value = false
exporting.value = false;
}
}
};
// 导出为图片
const exportToImage = async () => {
if (!posterRef.value) return
if (!posterRef.value) return;
try {
exporting.value = true
exporting.value = true;
const canvas = await html2canvas(posterRef.value, {
backgroundColor: null,
scale: 2,
useCORS: true,
allowTaint: true
})
const link = document.createElement('a')
link.download = `${props.posterData.enterpriseName}_招聘海报_${new Date().getTime()}.png`
link.href = canvas.toDataURL('image/png')
link.click()
ElMessage.success('图片导出成功')
});
const link = document.createElement('a');
link.download = `${props.posterData.enterpriseName}_招聘海报_${new Date().getTime()}.png`;
link.href = canvas.toDataURL('image/png');
link.click();
ElMessage.success('图片导出成功');
} catch (error) {
console.error('图片导出失败:', error)
ElMessage.error('图片导出失败，请重试')
console.error('图片导出失败:', error);
ElMessage.error('图片导出失败，请重试');
} finally {
exporting.value = false
exporting.value = false;
}
}
};
</script>
<style scoped lang="scss">
@@ -304,12 +294,7 @@ const exportToImage = async () => {
padding: 40px;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.1) 50%,
rgba(0, 0, 0, 0.4) 100%
);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.4) 100%);
}
.company-header {
@@ -440,22 +425,22 @@ const exportToImage = async () => {
max-width: 450px;
max-height: 600px;
}
.info-overlay {
padding: 20px;
}
.company-name {
font-size: 32px;
}
.position-title {
font-size: 24px;
}
.detail-item {
font-size: 14px;
padding: 8px 15px;
}
}
</style>
</style>