Pārlūkot izejas kodu

公司管理添加在职证明,公司证明字段

corn 6 mēneši atpakaļ
vecāks
revīzija
a045cc561c
1 mainītis faili ar 160 papildinājumiem un 17 dzēšanām
  1. 160 17
      src/views/autonym/autonym.vue

+ 160 - 17
src/views/autonym/autonym.vue

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