应急演练模块开发 图片上传处理

sdk/jssdk2/index.js

@@ -14,6 +14,11 @@ window.onload = function() {
 }
 
 function getUserInfo() {
+	vant.Toast.loading({
+		message: '授权中...',
+		forbidClick: true,
+		loadingType: 'spinner',
+	});
   lightAppJssdk.user.getUserInfoWithEncryptedParamByAppId({
     appId: "whsdsjzxsfrzdjqwsczptsr", //"gqyjglptxiefn", // 接入方在成功创建应用后自动生成
     success: function(data) {

src/dw-list-detail.html

@@ -87,16 +87,16 @@
 					  v-show="showImage"
 					  width="100"
 					  height="100"
-					   :src="previewUrl+'/' + form.filePathList[0]"
+					   :src="previewUrl+'/' + filePathList[0]"
 					/>
 				  </div>
-				  <span v-show="showPdf" @click="previewFile">{{ form.filePathList[0] }}</span>
-				  <span v-show="!disabled" style="font-weight: bold; cursor: pointer;" @click="form.filePathList=[];fileList=[]"> 删除</span>
+				  <span v-show="showPdf" @click="previewFile">{{ filePathList[0] }}</span>
+				  <span v-show="!disabled" style="font-weight: bold; cursor: pointer;" @click="filePathList=[];fileList=[]"> 删除</span>
 				  </van-cell>
 				</van-cell-group>
 					  <!--  						:before-read="beforeRead"					  :max-size="1*1024*1024"-->
-				<van-cell-group :class="{'disable-van-cell': disabled}" v-show="pageType !== 'detail' && !form.filePathList.length">
-				  <van-cell>文件:<span style="color: red;">(限制大小2.5M以内)</span>
+				<van-cell-group :class="{'disable-van-cell': disabled}" v-show="pageType !== 'detail' && !filePathList.length">
+				  <van-cell>文件:<span style="color: red;">(限制大小2.5M以内,格式png/jpg/jpeg/pdf)</span>
 				  <div style="width: 2.5rem;">
 				  	<van-uploader v-model="fileList" 
 						accept=".jpg,.jpeg,.png,.pdf"

src/dw-list-detail.js

@@ -22,9 +22,8 @@ window.addEventListener("load", function() {
 					perTel: '',
 					remark: '',
 					uploadDate: "",
-					filePathList: [] // 'dangerjob/e40eda16-7a86-4a2a-976b-892e17eeed49.pdf'
-
 				},
+				filePathList: [], // 'dangerjob/e40eda16-7a86-4a2a-976b-892e17eeed49.pdf'
 				// 企业id
 				companyId: localStorage.getItem('companyId'),
 				disabled: false,
@@ -67,21 +66,21 @@ window.addEventListener("load", function() {
 		},
 		computed:{
 			showImage(){
-				return this.form.filePathList[0] && (this.form.filePathList[0].indexOf('.png')>-1 || this.form.filePathList[0].indexOf('.jpg')>-1 || this.form.filePathList[0].indexOf('.jpeg')>-1)
+				return this.filePathList[0] && (this.filePathList[0].indexOf('.png')>-1 || this.filePathList[0].indexOf('.jpg')>-1 || this.filePathList[0].indexOf('.jpeg')>-1)
 			},
 			showPdf(){
-				return this.form.filePathList[0] && (this.form.filePathList[0].indexOf('.pdf')>-1)
+				return this.filePathList[0] && (this.filePathList[0].indexOf('.pdf')>-1)
 			},
 			showWrapper(){
-				return this.form.filePathList[0]
+				return this.filePathList[0]
 			}
 		},
 		methods: {
 			previewFile(){
 				// var src = 'dangerjob/e40eda16-7a86-4a2a-976b-892e17eeed49.pdf'
 				// location.href = './pdfViewer.html?pdfSrc='+ src
-				console.log(this.previewUrl + '/' + this.form.filePathList[0])
-				location.href = this.previewUrl + '/' + this.form.filePathList[0]
+				console.log(this.previewUrl + '/' + this.filePathList[0])
+				location.href = this.previewUrl + '/' + this.filePathList[0]
 			},
 			
 			beforeUpload(file) {
@@ -123,7 +122,9 @@ window.addEventListener("load", function() {
 						console.log('接口回调数据', JSON.parse(res))
 						var result = JSON.parse(res)
 						if(result.body && result.body.indexOf('dangerjob') > -1){
-							this.form.filePathList = [result.body]
+							this.filePathList = [result.body]
+						}else{
+							this.filePathList = []
 						}
 						vant.Toast.clear()
 					}
@@ -159,7 +160,7 @@ window.addEventListener("load", function() {
 						var result = JSON.parse(res)
 						// this.noticeContent = result.noticeContent
 							this.form = result.content[0]
-							this.form.filePathList = result.content[0].filePathList || []
+							this.filePathList = result.content[0].filePathList || []
 							if(this.form.workTime && this.form.workTime.length){
 								this.form.startTime = this.form.workTime[0]
 								this.form.endTime = this.form.workTime[1]
@@ -188,6 +189,7 @@ window.addEventListener("load", function() {
 				}
 				// this.form.companyId = this.companyId
 				this.form.workTime = [this.form.startTime, this.form.endTime]
+				this.form.filePathList = this.filePathList
 				vant.Toast.loading({
 					message: '正在处理...',
 					forbidClick: true,
@@ -205,9 +207,7 @@ window.addEventListener("load", function() {
 						vant.Toast({
 							message: '操作成功',
 						})
-						if (!this.form.id) { // 添加时则
-							location.reload()
-						}
+						history.back()
 					}
 				})
 			},

src/emergency-detail.html

@@ -54,31 +54,29 @@
 					<van-cell-group>
 						<van-field v-model="form.processDescription" :disabled="disabled" label="过程描述" placeholder="" />
 					</van-cell-group>
-					<van-cell-group :class="{'disable-van-cell': true}" v-show="form.filePathList[0]">
+					<van-cell-group :class="{'disable-van-cell': true}" v-show="showWrapper">
 					  <van-cell>文件预览：
 					  <div style="width: 6.5rem;">
 						<van-image
-						  v-show="(form.filePathList[0])"
 						  width="100"
 						  height="100"
-						   :src="previewUrl+'/' + form.filePathList[0]"
+						   :src="previewUrl+'/' + filePathList[0]"
 						/>
 					  </div>
-					  <span v-show="form.filePathList[0] && !disabled" style="font-weight: bold; cursor: pointer;" @click="form.filePathList=[];fileList=[]"> 删除</span>
+					  <span v-show="!disabled" style="font-weight: bold; cursor: pointer;" @click="filePathList=[];fileList=[]"> 删除</span>
 					  </van-cell>
 					</van-cell-group>
-					
-					<van-cell-group v-show="!form.filePathList[0]" :class="{'disable-van-cell': disabled}">
-					  <van-cell>文件：
+					<van-cell-group :class="{'disable-van-cell': disabled}" v-show="!disabled">
+					  <van-cell>文件:<span style="color: red;">(限制大小2.5M以内,格式png/jpg/jpeg)</span>
 					  <div style="width: 2.5rem;">
 					  	<van-uploader v-model="fileList" 
 							accept=".jpg,.jpeg,.png"
 							:preview-image="false"
 						  :before-upload="beforeUpload"
 						  :after-read="afterRead"
-						  
-							:max-count="1" :deletable="!disabled" :preview-full-image="false">
-							<van-button v-show="!form.filePathList.length" size="mini" icon="plus" type="primary">上传文件</van-button>
+							:before-read="beforeRead"
+							:max-count="1" :preview-full-image="false">
+							<van-button  size="mini" icon="plus" type="primary">上传文件</van-button>
 					  	</van-uploader>
 					  </div></van-cell>
 					</van-cell-group>

src/emergency-detail.js

@@ -7,6 +7,7 @@ window.addEventListener("load", function() {
 		el: '#app',
 		data() {
 			return {
+				previewUrl: BASE_URL,
 				form: {
 					id: "",
 					planName: "",
@@ -15,24 +16,34 @@ window.addEventListener("load", function() {
 					// 隐患描述
 					publishDeptName: "",
 					publishDesc: "",
-					filePathList: [],
 					completionDate: "",
 					issueDescription: "",
 					processDescription: "",
 				},
+				filePathList: [],
 				// 整改日期模态框
 				completionDate: '',
 				showPopup4completionDate: false,
 				// companyId: localStorage.getItem('companyId'),
-				previewUrl: BASE_URL,
-				disabled: false,
+				// disabled: false,
 				fileList: [],
 			}
 		},
 		mounted() {
 			this.detail()
 		},
-
+		computed:{
+			showImage(){
+				return this.filePathList[0]
+			},
+			showWrapper(){
+				return this.filePathList[0]
+			},
+			disabled(){
+				return this.form.completionStatus === 1
+			}
+			
+		},
 		methods: {
 			submit() {
 				if (!this.form.completionDate) {
@@ -53,63 +64,84 @@ window.addEventListener("load", function() {
 					})
 					return;
 				}
-				var reqParam = {
-					// companyId: localStorage.getItem('companyId'),
-					drillPhotoList: this.form.filePathList,
-					planId: gemhoUtil.getParameter('planId'),
-					// planName: this.form.planName,
-					processDescription: this.form.processDescription,
-					issueDescription: this.form.issueDescription,
-					completionDate: this.form.completionDate
-				}
-				var url = "/api/enterpriseDrills"
-			
-				http.post(url, reqParam).then((res) => {
-					console.log('添加结果', res)
-					vant.Toast({
-						message: '操作成功',
-					})
-					history.back()
+				
+				vant.Toast.loading({
+					message: '正在处理...',
+					forbidClick: true,
+					loadingType: 'spinner',
+				});
+				http2.post({
+					serviceId: API_KEY_MAP["emergency-add"]['id'],
+					interfacePublicKey: API_KEY_MAP["emergency-add"]["publicKey"],
+					interfacePrivateKey: API_KEY_MAP["emergency-add"]["privateKey"],
+					reqParams: {
+						drillPhotoList: this.filePathList,
+						id: gemhoUtil.getParameter('planId'),
+						processDescription: this.form.processDescription,
+						issueDescription: this.form.issueDescription,
+						completionDate: this.form.completionDate
+					},
+				}, (res) => {
+						
+					if(res){
+						console.log('添加结果', res)
+						vant.Toast({
+							message: '操作成功',
+						})
+						if (!this.form.id) { // 添加时则
+							location.reload()
+						}
+					}
 				})
 			},
-			// previewFile(){ // 预览图片和下载pdf文件（应急演练主要是图片展示）
-			// 	// var src = 'emergencydrill/e40eda16-7a86-4a2a-976b-892e17eeed49.pdf'
-			// 	// location.href = './pdfViewer.html?pdfSrc='+ src
-			// 	console.log(this.previewUrl + '/' + this.form.filePathList[0])
-			// 	location.href = this.previewUrl + '/' + this.form.filePathList[0]
-			// },
 			beforeUpload(file) {
 				console.log('beforeUpload',file)
 				// 在文件上传之前的处理逻辑，例如校验文件大小、文件类型等
 				return true; // 返回 true 继续上传，返回 false 中止上传
 			},
+			beforeRead(file) {
+			  if (file.size > (2.5*1024*1024)) {
+				vant.Dialog.alert({
+					title: '信息提示',
+					message: '文件大小不可超过2.5M'
+				})
+				return false;
+			  }
+			  return true;
+			},
 			afterRead(file) {
 				// 获取文件流，调用网关中台接口，获取文件全路径url
 				console.log('afterRead',file)
-				// 文件读取完成后的处理逻辑
-				const formData = new FormData();
-				formData.append('file', file.file); // 通过FormData构建要上传的文件数据
-				formData.append('modelName', 'emergencydrill');
 			
-				// 发送HTTP POST请求
-				fetch(this.previewUrl + '/api/common/upload', {
-						method: 'POST',
-						body: formData
-					})
-					.then(response => {
-						if (response.ok) {
-							return response.json();
+				vant.Toast.loading({
+					message: '正在处理...',
+					forbidClick: true,
+					loadingType: 'spinner',
+				});
+				http2.post({
+					serviceId: API_KEY_MAP["upload"]['id'],
+					interfacePublicKey: API_KEY_MAP["upload"]["publicKey"],
+					interfacePrivateKey: API_KEY_MAP["upload"]["privateKey"],
+					reqParams: {
+						modelName: 'emergencydrill',
+					},
+					fileList: [{
+						fileName: 'file',
+						file: file.file
+					}]
+				}, (res) => {
+					// gemhoUtil.setCookie('uploading', 'N')
+					if(res){
+						console.log('接口回调数据', JSON.parse(res))
+						var result = JSON.parse(res)
+						if(result.body && result.body.indexOf('emergencydrill') > -1){
+							this.filePathList = [result.body]
+						}else{
+							this.filePathList = []
 						}
-						throw new Error('Network response was not ok.');
-					})
-					.then(data => {
-						console.log(data); // 处理后端返回的数据
-						// 可根据后端返回的数据做进一步处理，如显示上传成功信息等
-						this.form.filePathList = data.body ? [data.body] : []
-					})
-					.catch(error => {
-						console.error('There has been a problem with your fetch operation:', error);
-					});
+						vant.Toast.clear()
+					}
+				})
 			},
 			showPopup(popupType) {
 				if (!this.disabled) {
@@ -122,19 +154,6 @@ window.addEventListener("load", function() {
 				this.showPopup4completionDate = false
 			
 			},
-			//  // 整改后照片
-			// transferUrl(hdRectificationPic) {
-			//   console.log(hdRectificationPic);
-			//   if (hdRectificationPic) {
-			// 	return (
-			// 	  BASE_URL +
-			// 	  "/hd_rectification_pic_to_verify" +
-			// 	  hdRectificationPic.split("hd_rectification_pic_to_verify")[1]
-			// 	);
-			//   } else {
-			// 	return null;
-			//   }
-			// },
 			detail(){
 				vant.Toast.loading({
 					message: '加载中...',
@@ -165,7 +184,7 @@ window.addEventListener("load", function() {
 						}else{
 							this.disabled = false
 						}
-						this.form.filePathList = this.form.drillPhotoList || [];
+						this.filePathList = this.form.drillPhotoList || [];
 						vant.Toast.clear()
 					}
 				})

src/emergency.js

@@ -20,56 +20,60 @@ window.addEventListener("load", function() {
 			this.getList()
 		},
 		methods: {
-			detail(item){
-				gemhoUtil.navigatePage('./emergency-detail.html?planId='+item.id)
+			detail(item) {
+				gemhoUtil.navigatePage('./emergency-detail.html?planId=' + item.id)
 			},
-			resetSearchForm(){
+			resetSearchForm() {
 				this.page = 0
 				this.size = 20
 				this.total = 0
 				this.list = []
 				this.finished = false;
 			},
-			onClear(){
+			onClear() {
 				this.resetSearchForm()
 				this.getList()
 			},
-			onSearch(val){
+			onSearch(val) {
 				this.resetSearchForm()
 				console.log('search', val)
 				this.getList()
 			},
-			getList(){
+			getList() {
 				// if(this.loading){
 				// 	return
 				// }
 				// this.loading = true
 				setTimeout(() => {
-				http2.post({
-					serviceId: API_KEY_MAP["emergency"]['id'],
-					interfacePublicKey: API_KEY_MAP["emergency"]["publicKey"],
-					interfacePrivateKey: API_KEY_MAP["emergency"]["privateKey"],
-					reqParams: {
-						page: this.page++,// 每次请求增加下一页
-						size: this.size,
-						planName: this.planName,
-					}
-				}, (res) => {
-						
-					if(res){
-						console.log('接口回调数据', JSON.parse(res))
-						
-						var result = JSON.parse(res).body
-						this.loading = false; // 加载状态结束
-						this.list.push(...result.content);
-						this.total = result.totalElements
-						
-						if(this.page*this.size >= this.total){
-							 this.finished = true; // 下滑不在刷新数据
+					http2.post({
+						serviceId: API_KEY_MAP["emergency"]['id'],
+						interfacePublicKey: API_KEY_MAP["emergency"][
+							"publicKey"
+						],
+						interfacePrivateKey: API_KEY_MAP["emergency"][
+							"privateKey"
+						],
+						reqParams: {
+							page: this.page++, // 每次请求增加下一页
+							size: this.size,
+							planName: this.planName,
 						}
-					}
-					this.loading = false
-				})
+					}, (res) => {
+
+						if (res) {
+							console.log('接口回调数据', JSON.parse(res))
+
+							var result = JSON.parse(res).body
+							this.loading = false; // 加载状态结束
+							this.list.push(...result.content);
+							this.total = result.totalElements
+
+							if (this.page * this.size >= this.total) {
+								this.finished = true; // 下滑不在刷新数据
+							}
+						}
+						this.loading = false
+					})
 				}, 0)
 			}
 		},

src/notice-list.html

@@ -18,7 +18,7 @@
 	<body>
 		<div id="app">
 			<div class="content" v-cloak>
-				<van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="getList" :immediate-check="false">
+				<van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="getList"c>
 					<van-cell v-for="(item, index) in list" :key="item">
 						<div class="list-item-wrapper" @click="detail(index)">
 							<p class="">