parent
5af91a028a
commit
af61d53211
1 changed files with 199 additions and 210 deletions
@ -1,231 +1,220 @@ |
||||
<template> |
||||
<ifrm ref="ifrm"> |
||||
<!-- 安全巡检--> |
||||
<uni-forms ref="form" err-show-type="toast"> |
||||
<uni-forms-item><input type="text" v-model="patrolRegisterValue" @confirm="patrolRegisterConfirm" |
||||
class="uni-input-border" placeholder="巡检点编码" /></uni-forms-item> |
||||
</uni-forms> |
||||
<view> |
||||
<!-- 安全巡检--> |
||||
<uni-forms ref="form" err-show-type="toast"> |
||||
<uni-forms-item> |
||||
<input type="text" v-model="insNum" @confirm="insConfirm" class="uni-input-border" placeholder="巡检点编码" /> |
||||
</uni-forms-item> |
||||
</uni-forms> |
||||
<uni-table border stripe emptyText="暂无更多数据" class="table"> |
||||
<uni-tr> |
||||
<uni-th align="center">巡检点编码</uni-th> |
||||
<uni-th align="center">巡检点位置</uni-th> |
||||
</uni-tr> |
||||
<uni-tr v-for="(item, index) in insList" :key="index"> |
||||
<uni-td align="center">{{ item.insNum }}</uni-td> |
||||
<uni-td align="center">{{ item.insSite }}</uni-td> |
||||
</uni-tr> |
||||
</uni-table> |
||||
|
||||
<uni-table border stripe emptyText="暂无更多数据" class="table"> |
||||
<uni-tr> |
||||
<uni-th align="center">巡检点编码</uni-th> |
||||
<uni-th align="center">巡检点位置</uni-th> |
||||
</uni-tr> |
||||
<uni-tr v-for="(item, index) in patrolRegisterList" :key="index"> |
||||
<uni-td align="center">{{ item.patrolRegister }}</uni-td> |
||||
<uni-td align="center">{{ item.insSpot }}</uni-td> |
||||
</uni-tr> |
||||
</uni-table> |
||||
<view style="font-size: 36rpx; margin: 20rpx 0">巡检备注：</view> |
||||
<uni-forms ref="form" err-show-type="toast"> |
||||
<uni-forms-item> |
||||
<uni-easyinput type="textarea" autoHeight v-model="memo" placeholder="请输入内容" /> |
||||
</uni-forms-item> |
||||
</uni-forms> |
||||
|
||||
<view style="font-size: 36rpx;">巡检备注：</view> |
||||
<uni-forms ref="form" err-show-type="toast"> |
||||
<uni-forms-item><uni-easyinput type="textarea" autoHeight v-model="parMemo" |
||||
placeholder="请输入内容"></uni-easyinput></uni-forms-item> |
||||
</uni-forms> |
||||
<view class="photoTitleSize">{{uploader.length}}/9</view> |
||||
<view class="showImage"> |
||||
<view v-for="(item, i) in uploader" :key="i" class="showImage-for"> |
||||
<view class="view-image"> |
||||
<image :src="item.imageUrl" @tap="previewImage(i)" /> |
||||
</view> |
||||
<view class="view-icon"> |
||||
<uni-icons type='trash' size="14" color='gray' @click="removeScene(item, i)"></uni-icons> |
||||
</view> |
||||
</view> |
||||
<view class="view-center" v-if="uploader.length < 9"> |
||||
<image src="../../static/images/photo.png" @click="chooseImage()"></image> |
||||
</view> |
||||
<view class="photoTitleSize">{{ uploader.length }}/9</view> |
||||
<view class="showImage"> |
||||
<view v-for="(item, i) in uploader" :key="i" class="showImage-for"> |
||||
<view class="view-image"> |
||||
<image :src="item.imageUrl" @tap="previewImage(i)" mode="widthFix" /> |
||||
</view> |
||||
<view class="buttonBox"><button class="button" type="primary" :disabled="!(patrolRegisterList.length > 0)" |
||||
@click="submitClick">提交</button></view> |
||||
</ifrm> |
||||
<view class="view-icon"> |
||||
<uni-icons type="trash" size="14" color="gray" @click="removeScene(item, i)"></uni-icons> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="view-center" v-if="uploader.length < 9"> |
||||
<image src="../../static/images/photo.png" @click="chooseImage"></image> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="buttonBox"> |
||||
<button class="button" type="primary" :disabled="!(insList.length > 0)" @click="submitClick"> |
||||
提交 |
||||
</button> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import ifrm from '@/pages/index/ifrm'; |
||||
import scan from '../../mixin/scan.js'; |
||||
export default { |
||||
mixins: [scan], |
||||
components: { |
||||
ifrm |
||||
}, |
||||
data() { |
||||
return { |
||||
patrolRegisterValue: '', |
||||
patrolRegisterList: [], |
||||
uploader: [], |
||||
parMemo: '' |
||||
}; |
||||
}, |
||||
methods: { |
||||
getBarCode(code) { |
||||
this.getData(code); |
||||
}, |
||||
patrolRegisterConfirm(e) { |
||||
this.getBarCode(e.target.value); |
||||
}, |
||||
getData(code) { |
||||
if (!code) return; |
||||
this.patrolRegisterValue = code; |
||||
this.$ajax.request({ |
||||
url: 'pdaLoad/getInspectionByEcCode/' + code, |
||||
method: 'GET', |
||||
success: data => { |
||||
console.log(data); |
||||
this.patrolRegisterValue = ''; |
||||
this.patrolRegisterList = data; |
||||
uni.showToast({ |
||||
title: '数据获取成功' |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
submitClick() { |
||||
let piList = []; |
||||
this.patrolRegisterList.forEach(item => { |
||||
piList.push({ |
||||
piId: item.piId |
||||
}); |
||||
|
||||
}); |
||||
this.$ajax.request({ |
||||
url: 'pdaSave/saveByInspection', |
||||
method: 'POST', |
||||
data: { |
||||
piList, |
||||
parMemo: this.parMemo |
||||
}, |
||||
success: data => { |
||||
uni.showToast({ |
||||
title: '巡检成功' |
||||
}); |
||||
this.patrolRegisterValue = ''; |
||||
this.patrolRegisterList = []; |
||||
this.uploader = [] |
||||
} |
||||
import scan from "../../mixin/scan.js"; |
||||
import { |
||||
options |
||||
} from '@/http/config.js'; |
||||
export default { |
||||
mixins: [scan], |
||||
data() { |
||||
return { |
||||
insNum: "", |
||||
insList: [], |
||||
uploader: [], // 存放 { imageUrl, upId } |
||||
memo: "", |
||||
uploadCount: 0, // 上传计数 |
||||
}; |
||||
}, |
||||
methods: { |
||||
getBarCode(code) { |
||||
this.getData(code); |
||||
}, |
||||
insConfirm(e) { |
||||
this.getBarCode(e.target.value); |
||||
}, |
||||
getData(code) { |
||||
if (!code) return; |
||||
this.insNum = code; |
||||
this.$u.api.getInspectionByCode(code).then((res) => { |
||||
this.insNum = ""; |
||||
this.insList = res.data; |
||||
uni.showToast({ title: "数据获取成功" }); |
||||
}); |
||||
}, |
||||
submitClick() { |
||||
this.$u.api |
||||
.saveInspection({ |
||||
code: this.insList.map((item) => item.insNum).join(","), |
||||
memo: this.memo, |
||||
// 取出所有上传成功的文件 |
||||
path: this.uploader.map((item) => item.imageUrl), |
||||
}) |
||||
.then((data) => { |
||||
uni.showToast({ title: "巡检成功" }); |
||||
// 清空表单 |
||||
this.insList = []; |
||||
this.memo = ""; |
||||
this.uploader = []; |
||||
}); |
||||
}, |
||||
chooseImage: async function () { |
||||
if (this.insList.length == 0) { |
||||
return uni.showToast({ |
||||
title: '请先查询巡检点', |
||||
icon: 'none' |
||||
}); |
||||
} |
||||
uni.chooseImage({ |
||||
count: 9, |
||||
// sizeType: ['compressed'], |
||||
// sourceType: ['album', 'camera'], |
||||
success: (res) => { |
||||
uni.showLoading({ |
||||
title: '上传中，请稍候' |
||||
}); |
||||
res.tempFilePaths.forEach(filePath => { |
||||
uni.uploadFile({ |
||||
url: options.baseURL + '/blade-resource/oss/endpoint/put-file-attach', |
||||
filePath: filePath, |
||||
name: 'file', |
||||
header: { |
||||
'token': 'bearer ' + uni.getStorageSync('accessToken'), |
||||
'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken'), |
||||
'Blade-Requested-With': 'BladeHttpRequest' |
||||
}, |
||||
success: (uploadRes) => { |
||||
uni.hideLoading(); |
||||
uni.showToast({ title: '上传成功' }); |
||||
this.uploader.push({ |
||||
upId: JSON.parse(uploadRes.data).data.attachId, |
||||
imageUrl: JSON.parse(uploadRes.data).data.link |
||||
}); |
||||
}, |
||||
chooseImage: async function() { |
||||
if (this.patrolRegisterList.length == 0) { |
||||
return uni.showToast({ |
||||
title: '请先查询巡检点', |
||||
icon: 'none' |
||||
}); |
||||
} |
||||
uni.chooseImage({ |
||||
// sourceType: ['album','camera'], //album 从相册选图，camera 使用相机，默认二者都有 |
||||
// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 |
||||
count: 9, |
||||
success: (res) => { |
||||
uni.showLoading({ |
||||
title: '上传中，请稍候' |
||||
}); |
||||
var tempFilePaths = res.tempFilePaths; |
||||
for (var i = 0; i < tempFilePaths.length; i++) { |
||||
const file = res.tempFiles[i]; |
||||
this.$uploadUtil.upload(file, { |
||||
theId: this.patrolRegisterList[0].piId, |
||||
theTag: 'SafePatrolInspection', |
||||
subTag: 'appDoc' |
||||
}, tempFilePaths[i]).then((upId) => { |
||||
uni.hideLoading(); |
||||
//展示图片 |
||||
this.uploader.push({ |
||||
upId: upId, |
||||
imageUrl: file.path |
||||
}); |
||||
}) |
||||
|
||||
} |
||||
}, |
||||
complete() { |
||||
uni.hideLoading(); |
||||
} |
||||
}) |
||||
}, |
||||
previewImage: function(index) { |
||||
var imags = []; |
||||
this.uploader.forEach(item => { |
||||
imags.push(item.imageUrl); |
||||
}) |
||||
uni.previewImage({ |
||||
current: index, |
||||
urls: imags |
||||
}) |
||||
}, |
||||
|
||||
removeScene(item, i) { |
||||
//删除现场图片 |
||||
this.uploader.splice(i, 1); |
||||
// //删除附件记录 |
||||
this.$uploadUtil.asyncDelete(item.upId).then((data) => { |
||||
uni.showToast({ |
||||
title: '删除成功', |
||||
icon: 'none' |
||||
}); |
||||
}) |
||||
// this.upIdList.splice(this.upIdList.findIndex((upId) => (upId === item.upId)), 1); |
||||
}, |
||||
}, |
||||
fail: (err) => { |
||||
console.error('❌ 上传失败', err); |
||||
uni.showToast({ title: '上传失败', icon: 'none' }); |
||||
} |
||||
}); |
||||
}); |
||||
}, |
||||
}); |
||||
}, |
||||
// 预览图片 |
||||
previewImage(index) { |
||||
const urls = this.uploader.map((item) => item.imageUrl); |
||||
uni.previewImage({ current: index, urls }); |
||||
}, |
||||
|
||||
onNavigationBarButtonTap(btn) { |
||||
this.$refs.ifrm.topMenuClick(btn); |
||||
}, |
||||
onShow() {} |
||||
}; |
||||
// 删除图片 |
||||
removeScene(item, index) { |
||||
// 先删本地列表 |
||||
this.uploader.splice(index, 1); |
||||
uni.showToast({ title: "删除成功", icon: "none" }); |
||||
}, |
||||
}, |
||||
|
||||
onNavigationBarButtonTap(btn) { |
||||
this.$refs.ifrm.topMenuClick(btn); |
||||
}, |
||||
onShow() { }, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
.photoTitleSize { |
||||
color: #a1a1a1; |
||||
text-align: right; |
||||
margin-right: 30rpx; |
||||
margin-top: -30rpx; |
||||
} |
||||
.photoTitleSize { |
||||
color: #a1a1a1; |
||||
text-align: right; |
||||
margin-right: 30rpx; |
||||
margin-top: 20rpx; |
||||
} |
||||
|
||||
.showImage { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: flex-start; |
||||
flex-wrap: wrap; |
||||
margin-left: -20rpx; |
||||
.showImage { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: flex-start; |
||||
flex-wrap: wrap; |
||||
margin-left: -20rpx; |
||||
|
||||
.showImage-for { |
||||
.showImage-for { |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 200rpx; |
||||
margin-left: 30rpx; |
||||
height: 260rpx; |
||||
|
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 200rpx; |
||||
margin-left: 30rpx; |
||||
height: 260rpx; |
||||
|
||||
.view-icon { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
margin-top: -10rpx; |
||||
} |
||||
.view-icon { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
margin-top: -10rpx; |
||||
} |
||||
|
||||
image { |
||||
border-width: 2rpx; |
||||
border-color: rgb(229, 229, 229); |
||||
border-style: solid; |
||||
border-radius: 20rpx; |
||||
width: 190rpx; |
||||
height: 190rpx; |
||||
} |
||||
} |
||||
image { |
||||
border-width: 2rpx; |
||||
border-color: rgb(229, 229, 229); |
||||
border-style: solid; |
||||
border-radius: 20rpx; |
||||
width: 190rpx; |
||||
height: 190rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.view-center { |
||||
margin: 0rpx 25rpx; |
||||
.view-center { |
||||
margin: 0rpx 25rpx; |
||||
|
||||
image { |
||||
border-width: 2rpx; |
||||
border-color: rgb(229, 229, 229); |
||||
border-style: solid; |
||||
border-radius: 20rpx; |
||||
width: 190rpx; |
||||
height: 190rpx; |
||||
} |
||||
} |
||||
image { |
||||
border-width: 2rpx; |
||||
border-color: rgb(229, 229, 229); |
||||
border-style: solid; |
||||
border-radius: 20rpx; |
||||
width: 190rpx; |
||||
height: 190rpx; |
||||
} |
||||
} |
||||
|
||||
.buttonBox { |
||||
margin-top: 30rpx; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue