Просмотр исходного кода

添加修改企业时,可上传在职证明和公司证明

corn 6 месяцев назад
Родитель
Сommit
a5cbbaa3cc
1 измененных файлов с 138 добавлено и 25 удалено
  1. 138 25
      src/views/autonym/autonym.vue

+ 138 - 25
src/views/autonym/autonym.vue

@@ -177,30 +177,6 @@
 					<!-- 无数据时空白 -->
 				</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">
-						<div v-for="(item,index) in scope.row.companyCertificate.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: 200px; height: 200px" :src="item" alt="">
-							</el-popover>
-						</div>
-					</div>
-				</template>
-			</el-table-column> -->
 			<!-- <el-table-column prop="companyDutyParagraph" label="企业税号" width="160">
 			</el-table-column> -->
 			<el-table-column prop="companyPeople" label="企业规模">
@@ -358,6 +334,68 @@
 				</div>
 
 			</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 companyVerification" :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="clearzz(index)"></i>
+					</span>
+				</div>
+				
+				<!-- 上传按钮 - 只有当图片数量小于4时才显示 -->
+				<div class="imgs" v-if="companyVerification.length < 4">
+					<el-upload 
+					:action="$http.adornUrl('alioss/upload')"
+					list-type="picture-card" 
+					:show-file-list="false" 
+					:on-success="handleUploadSuccesszz"
+					:on-progress="onprogresszz"
+					:before-upload="beforeUploadzz"  
+					>
+					<el-progress v-if="percentagezz>0 && percentagezz<100" type="circle" :percentage="percentagezz">
+					</el-progress>
+					<i v-else class="el-icon-plus"></i>
+					</el-upload>
+				</div>
+				</div>
+			</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;">
+					<!-- 已上传的PDF文件展示 -->
+					<div class="pdf-item" v-if="employmentVerification" style="margin-right: 20px; display: flex; align-items: center;">
+						<!-- PDF文件图标/预览区域 -->
+						<div class="pdf-preview" style="width: 100px; height: 100px; border: 1px solid #e6e6e6; display: flex; align-items: center; justify-content: center; flex-direction: column;">
+							<i class="el-icon-file-text" style="font-size: 30px; color: #409EFF;"></i>
+							<span style="font-size: 12px; margin-top: 5px; color: #666;">在职证明.pdf</span>
+						</div>
+						<!-- 删除按钮 -->
+						<span class="dels" style="margin-left: 10px; cursor: pointer; color: #F56C6C;">
+							<i class="el-icon-delete" @click="clearin()"></i>
+						</span>
+					</div>
+					
+					<!-- 上传按钮 - 只有当没有上传PDF时才显示 -->
+					<div class="upload-btn" v-if="!employmentVerification">
+						<el-upload 
+							:action="$http.adornUrl('alioss/upload')"
+							list-type="picture-card" 
+							:show-file-list="false" 
+							:on-success="handleUploadSuccessin"
+							:on-progress="onprogressin"
+							:before-upload="beforeUploadin"
+							accept=".pdf" 
+						>
+							<el-progress v-if="percentagein>0 && percentagein<100" type="circle" :percentage="percentagein">
+							</el-progress>
+							<i v-else class="el-icon-plus"></i>
+						</el-upload>
+					</div>
+				</div>
+			</div>
 			<!-- <div style="margin-bottom: 10px;display:flex;">
 				<span style="width: 200px;display: inline-block;text-align: right;">企业证书:</span>
 				<div class="imgs" v-for="(item,index) in companyCertificate" :key="index">
@@ -637,6 +675,8 @@
 				companyPeople:'',
 				companyLogo: '',
 				companyCertification: [],
+				companyVerification: [],
+				employmentVerification: '',
 				companyCertificate: [],
 				companyDutyParagraph: '',
 				companyAddress: '',
@@ -649,6 +689,7 @@
 				percentage: 0, //进度条
 				percentage1: 0,
 				percentageQ: 0,
+				percentagezz: 0,
 				userIds: {},
 				nickName2: '',
 				phone1: '',
@@ -1065,10 +1106,13 @@
 					if(row.companyCertification){
 						this.companyCertification = row.companyCertification.split(',')
 					}
+					if(row.companyVerification){
+						this.companyVerification = row.companyVerification.split(',')
+					}
 					if(row.companyCertificate){
 						this.companyCertificate = row.companyCertificate.split(',')
 					}
-
+					this.employmentVerification = row.employmentVerification
 					this.companyDutyParagraph = row.companyDutyParagraph
 					this.companyAddress = row.companyAddress
 					this.companyRegisteredFund = row.companyRegisteredFund
@@ -1092,6 +1136,8 @@
 					this.companyPeople = ''
 					this.companyLogo = ''
 					this.companyCertification = []
+					this.companyVerification = []
+					this.employmentVerification = ''
 					this.companyCertificate = []
 					this.companyDutyParagraph = ''
 					this.companyAddress = ''
@@ -1205,6 +1251,69 @@
 				console.log('详情图上传进度', parseInt(event.percent))
 				this.percentageQ = parseInt(event.percent)
 			},
+			// 删除
+			clearzz(index) {
+				this.companyVerification.splice(index, 1);
+			},
+			//上传成功
+			handleUploadSuccesszz(file, fileList) {
+				this.companyVerification.push(file.data)
+				console.log('this.detailsImg', this.companyVerification)
+				this.percentagezz = 0;
+			},
+			onprogresszz(event, file, fileList) {
+				console.log('详情图上传进度', parseInt(event.percent))
+				this.percentagezz = parseInt(event.percent)
+			},
+			// 上传前校验
+			beforeUploadzz() {
+				// 判断当前图片数量是否达到4张
+				if (this.companyVerification.length >= 4) {
+					// 提示用户最多只能上传4张
+					this.$message.warning('最多只能上传4张公司证明图片');
+					// 返回false阻止上传
+					return false;
+				}
+				// 重置上传进度
+				this.percentagezz = 0;
+				return true;
+			},
+			 // 文件上传前校验
+			beforeUploadin(file) {
+				// 校验文件类型是否为PDF
+				const isPDF = file.type === 'application/pdf';
+				if (!isPDF) {
+					this.$message.error('只能上传PDF格式的文件!');
+					return false;
+				}
+				// 可根据需要添加文件大小限制
+				const isLt20M = file.size / 1024 / 1024 < 20;
+				if (!isLt20M) {
+					this.$message.error('文件大小不能超过20MB!');
+					return false;
+				}
+				return true;
+			},
+			// 上传进度回调
+			onprogressin(event, file, fileList) {
+				this.percentagein = Math.floor(event.percent);
+			},
+			// 上传成功回调
+			handleUploadSuccessin(response, file, fileList) {
+				this.percentagein = 0;
+				// 假设接口返回的文件链接在response.data.url中
+				if (response && response.data && response.data.url) {
+					this.employmentVerification = response.data.url;
+					this.$message.success('PDF上传成功');
+				} else {
+					this.$message.error('PDF上传失败,请重试');
+				}
+			},
+			// 删除PDF文件
+			clearzz() {
+				this.employmentVerification = null;
+				this.$message.success('已删除上传的PDF文件');
+			},
 			// 确定添加
 			addmissionNoticeTo() {
 					// let photost = this.detailsImg.toString();
@@ -1335,6 +1444,8 @@
 						data: that.$http.adornData({
 							// params: that.$http.adornParams({
 							'companyCertification': that.companyCertification.toString(),
+							'companyVerification': that.companyVerification.toString(),
+							'employmentVerification': that.employmentVerification.toString(),
 							'companyCertificate': that.companyCertificate.toString(),
 							// 'phone': that.companyPhone,
 							'companyAllName': that.companyAllName,
@@ -1389,6 +1500,8 @@
 				this.companyPeople = ''
 				this.companyLogo = ''
 				this.companyCertification = []
+				this.companyVerification = []
+				this.employmentVerification = ''
 				this.companyCertificate = []
 				this.companyDutyParagraph = ''
 				this.companyAddress = ''