|
|
@@ -116,6 +116,79 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
+ <el-table-column prop="employmentVerification" label="在职证明" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- 字段为空时显示空 -->
|
|
|
+ <div v-if="!scope.row.employmentVerification">
|
|
|
+ <span style="color: #999;">无</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 字段有值时展示单个PDF下载按钮 -->
|
|
|
+ <div v-else>
|
|
|
+ <!-- PDF下载按钮 -->
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-download"
|
|
|
+ @click="handlePdfDownload(scope.row.employmentVerification)"
|
|
|
+ style="color: #409EFF; padding: 0;"
|
|
|
+ >
|
|
|
+ 下载在职证明
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="companyVerification" label="公司证明" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- 仅在有图片数据时展示容器 -->
|
|
|
+ <div v-if="scope.row.companyVerification" style="display:flex;flex-wrap: wrap;gap: 4px;align-items: center;">
|
|
|
+ <!-- 第一步:先处理图片链接数组,去重+过滤空值,再限制最多4张 -->
|
|
|
+ <div
|
|
|
+ v-for="(item,index) in formatImageList(scope.row.companyVerification)"
|
|
|
+ :key="index"
|
|
|
+ style="cursor: pointer;"
|
|
|
+ >
|
|
|
+ <el-popover placement="top-start" title="" trigger="hover">
|
|
|
+ <!-- 缩略图:添加加载失败的占位处理 -->
|
|
|
+ <img
|
|
|
+ style="width: 50px; height: 50px;object-fit: cover;border-radius: 2px;"
|
|
|
+ :src="item"
|
|
|
+ alt="公司证明图片"
|
|
|
+ slot="reference"
|
|
|
+ @error="(e) => handleImageError(e)"
|
|
|
+ >
|
|
|
+ <!-- 弹窗大图:同样添加失败处理 -->
|
|
|
+ <img
|
|
|
+ style="max-width: 400px; max-height: 400px;object-fit: contain;"
|
|
|
+ :src="item"
|
|
|
+ alt="公司证明图片"
|
|
|
+ @error="(e) => handleImageError(e)"
|
|
|
+ >
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 超过4张时显示剩余数量提示 -->
|
|
|
+ <div
|
|
|
+ v-if="scope.row.companyVerification.split(',').filter(img => img).length > 4"
|
|
|
+ style="color: #909399;font-size: 12px;margin-left: 4px;"
|
|
|
+ >
|
|
|
+ +{{ scope.row.companyVerification.split(',').filter(img => img).length - 4 }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 无数据时空白 -->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column prop="companyVerification" label="公司证明" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="display:flex;flex-wrap: wrap;" v-if="scope.row.companyVerification">
|
|
|
+ <div v-for="(item,index) in scope.row.companyVerification.split(',')" :key="index">
|
|
|
+ <el-popover placement="top-start" title="" trigger="hover">
|
|
|
+ <img style="width: 50px; height: 50px" :src="item" alt="" slot="reference">
|
|
|
+ <img style="width: 400px; height: auto" :src="item" alt="">
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column> -->
|
|
|
<!-- <el-table-column prop="companyCertificate" label="企业证书" width="150">
|
|
|
<template slot-scope="scope">
|
|
|
<div style="display:flex;flex-wrap: wrap;" v-if="scope.row.companyCertificate">
|
|
|
@@ -266,23 +339,23 @@
|
|
|
</div>
|
|
|
<div style="margin-bottom: 10px;display:flex;align-items: center;">
|
|
|
<span style="width: 200px;display: inline-block;text-align: right;">营业执照:</span>
|
|
|
- <div style="display: flex;flex-wrap: wrap;">
|
|
|
- <div class="imgs" v-for="(item,index) in companyCertification" :key="index" style="margin-right: 20px;">
|
|
|
- <img width="100%" class="images" height="100%" :src="item" alt="" @click="lookBtn(item)"style="margin-right: 10px;" >
|
|
|
- <span class="dels">
|
|
|
- <i class="el-icon-delete" @click="clear(index)"></i>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="imgs">
|
|
|
- <el-upload :action="$http.adornUrl('alioss/upload')"
|
|
|
- list-type="picture-card" :show-file-list="false" :on-success="handleUploadSuccess"
|
|
|
- :on-progress="onprogress1">
|
|
|
- <el-progress v-if="percentage1>0 && percentage1<100" type="circle" :percentage="percentage1">
|
|
|
- </el-progress>
|
|
|
- <i v-else class="el-icon-plus"></i>
|
|
|
- </el-upload>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div style="display: flex;flex-wrap: wrap;">
|
|
|
+ <div class="imgs" v-for="(item,index) in companyCertification" :key="index" style="margin-right: 20px;">
|
|
|
+ <img width="100%" class="images" height="100%" :src="item" alt="" @click="lookBtn(item)"style="margin-right: 10px;" >
|
|
|
+ <span class="dels">
|
|
|
+ <i class="el-icon-delete" @click="clear(index)"></i>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="imgs">
|
|
|
+ <el-upload :action="$http.adornUrl('alioss/upload')"
|
|
|
+ list-type="picture-card" :show-file-list="false" :on-success="handleUploadSuccess"
|
|
|
+ :on-progress="onprogress1">
|
|
|
+ <el-progress v-if="percentage1>0 && percentage1<100" type="circle" :percentage="percentage1">
|
|
|
+ </el-progress>
|
|
|
+ <i v-else class="el-icon-plus"></i>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
</div>
|
|
|
<!-- <div style="margin-bottom: 10px;display:flex;">
|
|
|
@@ -605,6 +678,76 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 格式化图片列表:分割、过滤空值、限制最多4张
|
|
|
+ formatImageList(imgStr) {
|
|
|
+ if (!imgStr) return [];
|
|
|
+ // 分割成数组 → 过滤空字符串 → 截取前4个
|
|
|
+ return imgStr.split(',').filter(img => img.trim()).slice(0, 4);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理图片加载失败
|
|
|
+ handleImageError(e) {
|
|
|
+ // 可选:替换为自定义的占位图
|
|
|
+ // e.target.src = '/path/to/your/error-placeholder.png';
|
|
|
+ // 仅保留默认的加载失败样式,不替换图片
|
|
|
+ e.target.alt = "图片加载失败";
|
|
|
+ },
|
|
|
+ // 处理单个PDF文件的下载逻辑
|
|
|
+ async handlePdfDownload(pdfUrl) {
|
|
|
+ // 空值防御(双重保险)
|
|
|
+ if (!pdfUrl) {
|
|
|
+ this.$message.warning('暂无PDF文件可下载');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 发起GET请求获取PDF文件(处理跨域)
|
|
|
+ const response = await fetch(pdfUrl, {
|
|
|
+ method: 'GET',
|
|
|
+ mode: 'cors', // 跨域配置
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/pdf',
|
|
|
+ 'Access-Control-Allow-Origin': '*'
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 检查请求是否成功(状态码200-299为成功)
|
|
|
+ if (!response.ok) {
|
|
|
+ throw new Error(`服务器返回错误:${response.status}`);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 转换为Blob对象(二进制文件)
|
|
|
+ const blob = await response.blob();
|
|
|
+
|
|
|
+ // 验证文件类型是否为PDF
|
|
|
+ if (blob.type !== 'application/pdf' && !pdfUrl.endsWith('.pdf')) {
|
|
|
+ throw new Error('文件格式不是PDF,请确认文件链接');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建下载链接并触发下载
|
|
|
+ const downloadLink = window.URL.createObjectURL(blob);
|
|
|
+ const aTag = document.createElement('a');
|
|
|
+ aTag.href = downloadLink;
|
|
|
+ // 提取文件名(无则用默认名)
|
|
|
+ aTag.download = pdfUrl.split('/').pop() || `在职证明_${new Date().getTime()}.pdf`;
|
|
|
+
|
|
|
+ // 触发下载
|
|
|
+ document.body.appendChild(aTag);
|
|
|
+ aTag.click();
|
|
|
+
|
|
|
+ // 清理临时资源(避免内存泄漏)
|
|
|
+ document.body.removeChild(aTag);
|
|
|
+ window.URL.revokeObjectURL(downloadLink);
|
|
|
+
|
|
|
+ // 下载成功提示
|
|
|
+ this.$message.success('在职证明PDF下载成功!');
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ // 下载失败提示(明确错误原因)
|
|
|
+ this.$message.error(`下载失败:${error.message || '未知错误'}`);
|
|
|
+ console.error('PDF下载异常:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
//处理默认选中当前日期
|
|
|
getNowTime() {
|
|
|
var now = new Date()
|