Commit c52db27e authored by xinzhedeai's avatar xinzhedeai

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

parent 992592c0
......@@ -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) {
......
......@@ -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"
......
......@@ -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()
}
})
},
......
......@@ -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>
......
......@@ -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()
}
})
......
......@@ -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)
}
},
......
......@@ -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="">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment