538 lines
12 KiB
Vue
538 lines
12 KiB
Vue
|
<template>
|
|||
|
|
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="step_num">
|
|||
|
|
<view class="step step1">签到</view>
|
|||
|
|
<view class="step step2">巡检设备</view>
|
|||
|
|
<view class="step step3">巡检总结</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="photo_container">
|
|||
|
|
<view class="pzqd" style="padding-bottom: 20upx;">巡检完成时间</view>
|
|||
|
|
<view @click="onShowDatePicker()">
|
|||
|
|
<view class="date_time">{{value!=''?value:"请选择时间"}}</view>
|
|||
|
|
<img src="../../static/img/dateIcon.png" class="dateIcon" />
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="photo_container">
|
|||
|
|
<view class="pzqd required">巡检总结</view>
|
|||
|
|
<textarea class="result_out" maxlength=1000 v-model="content" @input="changeContent()"></textarea>
|
|||
|
|
</view>
|
|||
|
|
<view class="photo_container">
|
|||
|
|
<view class="pzqd">现场照片</view>
|
|||
|
|
<view class="photo_out">
|
|||
|
|
<view class="imgwrap" v-for="(items,index) in imgsrc_list_local" :key="index">
|
|||
|
|
<view class="myimgBox" @click="reUpload(index)">
|
|||
|
|
<view class="img">
|
|||
|
|
<img class="uploadimg" :src="items" />
|
|||
|
|
<view class="cxsc">重新上传</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<img src="../../static/img/delete.png" class="deleteimg" @click="deleteImg(index)" />
|
|||
|
|
</view>
|
|||
|
|
<view class="imgwrap" @click="chooseImg()">
|
|||
|
|
<view class="myimgBox">
|
|||
|
|
<view class="img upload_btn">
|
|||
|
|
<img src="../../static/img/uploadimg.png" />
|
|||
|
|
<view class="sctp">上传图片</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bottom_btn">
|
|||
|
|
<view class="previous" @click="toPrevious()">上一步</view>
|
|||
|
|
<view class="next" @click="submit()">完成</view>
|
|||
|
|
</view>
|
|||
|
|
<mx-datepicker type="datetime" :value="value" :show="showPicker" @confirm="onSelected" @cancel="onSelected"></mx-datepicker>
|
|||
|
|
<view class="goHome" @click='goMain()'>
|
|||
|
|
<img src="../../static/img/gohome.png">
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
mapState,
|
|||
|
|
mapMutations
|
|||
|
|
} from 'vuex'
|
|||
|
|
import {
|
|||
|
|
config
|
|||
|
|
} from '../../request/js/config.js'
|
|||
|
|
import mxDatepicker from '@/components/mx-datepicker/mx-datepicker.vue'
|
|||
|
|
export default {
|
|||
|
|
computed: {
|
|||
|
|
...mapState(['patrolSignInImage', 'patrolDetails', 'patrolStep3'])
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
mxDatepicker
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
showPicker: false,
|
|||
|
|
value: '',
|
|||
|
|
imgsrc_list: [],
|
|||
|
|
imgsrc_list_local: [],
|
|||
|
|
id: '',
|
|||
|
|
content: '', //巡检总结
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.id = option.id;
|
|||
|
|
if (this.id == undefined) {
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: 'eqPatrol'
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (this.patrolStep3.content != undefined && this.patrolStep3.content != null) {
|
|||
|
|
this.content = this.patrolStep3.content;
|
|||
|
|
this.imgsrc_list = this.patrolStep3.taglocationappearanceImage;
|
|||
|
|
this.imgsrc_list_local = this.patrolStep3.taglocationappearanceImage_local;
|
|||
|
|
} else {
|
|||
|
|
this.setpatrolStep3({
|
|||
|
|
content: '',
|
|||
|
|
taglocationappearanceImage: [],
|
|||
|
|
taglocationappearanceImage_local: []
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
...mapMutations(['setpatrolStep3']),
|
|||
|
|
onShowDatePicker() { //显示
|
|||
|
|
this.showPicker = true;
|
|||
|
|
},
|
|||
|
|
onSelected(e) { //选择
|
|||
|
|
this.showPicker = false;
|
|||
|
|
if (e) {
|
|||
|
|
this.value = e.value;
|
|||
|
|
//选择的值
|
|||
|
|
// console.log('value => ' + e.value);
|
|||
|
|
//原始的Date对象
|
|||
|
|
// console.log('date => ' + e.date);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//上传
|
|||
|
|
chooseImg() {
|
|||
|
|
this.uploadImg();
|
|||
|
|
},
|
|||
|
|
//重新上传
|
|||
|
|
reUpload(index) {
|
|||
|
|
this.uploadImg(index);
|
|||
|
|
},
|
|||
|
|
uploadImg(indexnum) {
|
|||
|
|
var _this = this;
|
|||
|
|
//#ifdef APP-PLUS
|
|||
|
|
var count_ = 9;
|
|||
|
|
//#endif
|
|||
|
|
//#ifndef APP-PLUS
|
|||
|
|
var count_ = 1;
|
|||
|
|
//#endif
|
|||
|
|
if (indexnum != undefined) {
|
|||
|
|
count_ = 1;
|
|||
|
|
}
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count: count_,
|
|||
|
|
success: (chooseImageRes) => {
|
|||
|
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
|||
|
|
//#ifdef APP-PLUS
|
|||
|
|
let imgs = chooseImageRes.tempFilePaths.map((value, index) => {
|
|||
|
|
return {
|
|||
|
|
name: "file" + (index + 1), //注意这一行，uni的hello的示例中，这里为key名+index，这样是无法和使用一个固定key名接多个文件的php接口对接上的改为数组下标形式的字符串就解决这个问题了。其效果等同于在html页面上多个同name文件域同时提交表单。
|
|||
|
|
uri: value
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
uni.uploadFile({
|
|||
|
|
url: config.baseURL + '/apis/file/uploadMulti', //接口地址
|
|||
|
|
files: imgs,
|
|||
|
|
fileType: "image",
|
|||
|
|
name: 'files',
|
|||
|
|
success: (uploadFileRes) => {
|
|||
|
|
// console.log(JSON.stringify(uploadFileRes))
|
|||
|
|
var arr = [];
|
|||
|
|
for (var i = 0; i < JSON.parse(uploadFileRes.data).result.length; i++) {
|
|||
|
|
arr.push(JSON.parse(uploadFileRes.data).result[i].filePath);
|
|||
|
|
}
|
|||
|
|
if (indexnum != undefined) { //是重新上传
|
|||
|
|
_this.imgsrc_list[indexnum] = arr[0]
|
|||
|
|
_this.imgsrc_list_local[indexnum] = chooseImageRes.tempFilePaths[0]
|
|||
|
|
} else {
|
|||
|
|
_this.imgsrc_list = _this.imgsrc_list.concat(arr);
|
|||
|
|
_this.imgsrc_list_local = _this.imgsrc_list_local.concat(chooseImageRes.tempFilePaths);
|
|||
|
|
}
|
|||
|
|
_this.setpatrolStep3({
|
|||
|
|
content: _this.content,
|
|||
|
|
taglocationappearanceImage: _this.imgsrc_list,
|
|||
|
|
taglocationappearanceImage_local: _this.imgsrc_list_local
|
|||
|
|
})
|
|||
|
|
_this.$forceUpdate();
|
|||
|
|
},
|
|||
|
|
fail:function(){
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '上传图片失败',
|
|||
|
|
duration: 2000,
|
|||
|
|
icon:"none"
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//#endif
|
|||
|
|
//#ifndef APP-PLUS
|
|||
|
|
uni.uploadFile({
|
|||
|
|
url: config.baseURL + '/apis/file/upload', //接口地址
|
|||
|
|
filePath: tempFilePaths[0],
|
|||
|
|
fileType: "image",
|
|||
|
|
name: 'file',
|
|||
|
|
success: (uploadFileRes) => {
|
|||
|
|
var arr = [];
|
|||
|
|
if (indexnum != undefined) { //是重新上传
|
|||
|
|
_this.imgsrc_list[indexnum] = JSON.parse(uploadFileRes.data).filePath;
|
|||
|
|
_this.imgsrc_list_local[indexnum] = chooseImageRes.tempFilePaths[0];
|
|||
|
|
} else {
|
|||
|
|
_this.imgsrc_list.push(JSON.parse(uploadFileRes.data).filePath)
|
|||
|
|
// _this.imgsrc_list.push("aa.png")
|
|||
|
|
_this.imgsrc_list_local.push(chooseImageRes.tempFilePaths)
|
|||
|
|
}
|
|||
|
|
_this.setpatrolStep3({
|
|||
|
|
content: _this.content,
|
|||
|
|
taglocationappearanceImage: _this.imgsrc_list,
|
|||
|
|
taglocationappearanceImage_local: _this.imgsrc_list_local
|
|||
|
|
})
|
|||
|
|
_this.$forceUpdate();
|
|||
|
|
},
|
|||
|
|
fail:function(){
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '上传图片失败',
|
|||
|
|
duration: 2000,
|
|||
|
|
icon:"none"
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//#endif
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//删除图片
|
|||
|
|
deleteImg(index) {
|
|||
|
|
this.imgsrc_list.splice(index, 1);
|
|||
|
|
this.imgsrc_list_local.splice(index, 1);
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
},
|
|||
|
|
changeContent() {
|
|||
|
|
this.$nextTick(function() {
|
|||
|
|
this.setpatrolStep3({
|
|||
|
|
content: this.content,
|
|||
|
|
taglocationappearanceImage: this.imgsrc_list,
|
|||
|
|
taglocationappearanceImage_local: this.imgsrc_list_local
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
toPrevious() {
|
|||
|
|
uni.navigateBack({})
|
|||
|
|
},
|
|||
|
|
submit() {
|
|||
|
|
if (this.content.trim() == '') {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请填写巡检总结',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (this.id == undefined) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '页面已失效，请返回首页重新巡检',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
var json_ = {
|
|||
|
|
id: this.id,
|
|||
|
|
content: this.content,
|
|||
|
|
signInImage:this.patrolSignInImage,
|
|||
|
|
taglocationappearanceImage:this.imgsrc_list,
|
|||
|
|
detailArray:encodeURIComponent(JSON.stringify(this.patrolDetails.patrolDetails))
|
|||
|
|
}
|
|||
|
|
var _this = this;
|
|||
|
|
this.$http.request({
|
|||
|
|
url: '/apis/patrolRecord/handleRecord',
|
|||
|
|
params: json_,
|
|||
|
|
}).then(res => {
|
|||
|
|
// console.log(res)
|
|||
|
|
if (res.data.code == 0) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '提交成功',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 1000
|
|||
|
|
});
|
|||
|
|
setTimeout(function(){
|
|||
|
|
//这里写死会有问题，我跳转不一定就是 跳转4步，
|
|||
|
|
//这里暂时修改为跳转到详情界面。
|
|||
|
|
// _this.$eventHub.$emit('changestate',{id:_this.id,state:"待验收"});
|
|||
|
|
// uni.navigateBack({
|
|||
|
|
// delta: 4
|
|||
|
|
// });
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "patrolDetail?id="+_this.id
|
|||
|
|
});
|
|||
|
|
},1000)
|
|||
|
|
|
|||
|
|
}else{
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.data.msg|| '提交失败，请稍后重试',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}).catch(err => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '提交失败，请稍后重试',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
page {
|
|||
|
|
background-color: #f5f7f5;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style scoped>
|
|||
|
|
.content {
|
|||
|
|
position: relative;
|
|||
|
|
min-height: 100%;
|
|||
|
|
overflow: auto;
|
|||
|
|
padding-bottom: 140upx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step_num {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 80upx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding-right: 48upx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step {
|
|||
|
|
position: relative;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
line-height: 80upx;
|
|||
|
|
padding-left: 30upx;
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step:before {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0px;
|
|||
|
|
content: '1';
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
width: 28upx;
|
|||
|
|
height: 28upx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
line-height: 28upx;
|
|||
|
|
border-radius: 200upx;
|
|||
|
|
font-size: 20upx;
|
|||
|
|
text-align: center;
|
|||
|
|
top: 26upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step:after {
|
|||
|
|
position: absolute;
|
|||
|
|
content: '';
|
|||
|
|
width: 60upx;
|
|||
|
|
height: 2upx;
|
|||
|
|
background-color: #000;
|
|||
|
|
top: 40upx;
|
|||
|
|
left: 88upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step2 {
|
|||
|
|
margin-left: 64upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step2:before {
|
|||
|
|
content: '2';
|
|||
|
|
border: 2upx solid #828282;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step2:after,
|
|||
|
|
.step3:after {
|
|||
|
|
left: 144upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step3 {
|
|||
|
|
margin-left: 64upx;
|
|||
|
|
}
|
|||
|
|
.step3:after{
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
.step3:before {
|
|||
|
|
content: '3';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.photo_container {
|
|||
|
|
position: relative;
|
|||
|
|
margin-top: 20upx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.photo_container .required:before {
|
|||
|
|
position: absolute;
|
|||
|
|
content: '*';
|
|||
|
|
color: red;
|
|||
|
|
left: 30upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pzqd {
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #999999;
|
|||
|
|
padding-left: 30upx;
|
|||
|
|
padding-top: 20upx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.photo_container .required {
|
|||
|
|
padding-left: 50upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.result_out {
|
|||
|
|
position: relative;
|
|||
|
|
height: 160upx;
|
|||
|
|
display: block;
|
|||
|
|
width: 90%;
|
|||
|
|
margin: auto;
|
|||
|
|
padding-bottom: 20upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.img-wrap {
|
|||
|
|
position: relative;
|
|||
|
|
background-color: #fff;
|
|||
|
|
float: left;
|
|||
|
|
width: 27%;
|
|||
|
|
margin: 3%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.img-box {
|
|||
|
|
width: 100%;
|
|||
|
|
padding-bottom: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin: 0;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.img-box .img {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
/* background-color: red; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload_btn {
|
|||
|
|
border: 2upx solid #dadada;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload_btn img {
|
|||
|
|
display: block;
|
|||
|
|
width: 32%;
|
|||
|
|
height: 30%;
|
|||
|
|
margin: 0 auto 10upx auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sctp {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 30upx;
|
|||
|
|
color: #ababab;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uploadimg {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cxsc {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 60upx;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 60upx;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.deleteimg {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 36upx;
|
|||
|
|
height: 36upx;
|
|||
|
|
right: -18upx;
|
|||
|
|
top: -18upx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 36upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom_btn {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 5%;
|
|||
|
|
bottom: 15px;
|
|||
|
|
width: 90%;
|
|||
|
|
height: 82upx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.next,
|
|||
|
|
.previous {
|
|||
|
|
width: 48%;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
border: 1px solid #3382FF;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #3382FF;
|
|||
|
|
line-height: 82upx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.next {
|
|||
|
|
border: none;
|
|||
|
|
background-color: #3382FF;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.date_time {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 80upx;
|
|||
|
|
height: 90upx;
|
|||
|
|
line-height: 90upx;
|
|||
|
|
top: 0upx;
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dateIcon {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 30upx;
|
|||
|
|
top: 25upx;
|
|||
|
|
width: 40upx;
|
|||
|
|
height: 40upx;
|
|||
|
|
}
|
|||
|
|
</style>
|