<template>
|
<view class="wrap">
|
<u-collapse :value="itemIndex" ref="collapse">
|
<u-collapse-item :title="item.title" :name="index" v-for="(item,index) in questionList">
|
<u-form :model="info" ref="form">
|
<block v-for="(i,k) in item.children">
|
<view class="f-30 c-33">
|
{{i.title}}
|
</view>
|
<u-form-item labelWidth="90" label="隐患" prop="gateStatus">
|
<view class="btn-group flex">
|
<view class="value-item" :class="i.state == 0?'active bgc-main c-ff':''"
|
@click="changeStatus(0,i,index,k)">
|
存在
|
</view>
|
<view class="value-item" :class="i.state == 1?'active bgc-main c-ff':''"
|
@click="changeStatus(1,i,index,k)">
|
不存在
|
</view>
|
</view>
|
</u-form-item>
|
<view class="" v-if="i.state == 0">
|
<u-form-item labelWidth="100" label="隐患照片" prop="gateStatus">
|
<u-upload :fileList="i.urls" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
:maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture"
|
@afterRead="afterReadImgs($event,i,index,k)" @delete="deleteImages($event,index,k)">
|
<view class="upload-item upload-icon flex_base">
|
<u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon>
|
</view>
|
</u-upload>
|
</u-form-item>
|
<u-form-item labelWidth="100" label="隐患描述" prop="gateStatus">
|
<u-textarea v-model="i.remark" placeholder="请输入隐患描述"
|
placeholderClass="c-99 f-26"></u-textarea>
|
</u-form-item>
|
</view>
|
</block>
|
</u-form>
|
</u-collapse-item>
|
</u-collapse>
|
|
<view class="content">
|
<view class="upload ">
|
<view class="f-28 mb-20">其它隐患问题</view>
|
<u-textarea v-model="info.remark" placeholder="请输入内容" placeholderClass="c-99 f-26"></u-textarea>
|
<view class="mt-20">
|
<view class="f-28 mb-20">图片</view>
|
<u-upload :fileList="form.images" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
:maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture" @afterRead="afterReadImg"
|
@delete="deletePic">
|
<view class="upload-item upload-icon flex_base">
|
<u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon>
|
</view>
|
</u-upload>
|
</view>
|
</view>
|
</view>
|
|
<footer-btn @click="sumitInfo"></footer-btn>
|
|
</view>
|
</template>
|
|
<script>
|
import uploadMixin from "@/mixin/uploadMixin";
|
import {
|
addPlaceCheckTwo,
|
getPlaceCheckItem,
|
getPlaceCheckReformDetail
|
} from "@/api/place/place.js"
|
export default {
|
mixins: [uploadMixin],
|
data() {
|
return {
|
form: {
|
images: []
|
},
|
info: {
|
houseCode: "",
|
remark: "",
|
imageUrls: "",
|
signaturePath: "",
|
},
|
|
desc: "",
|
title: "",
|
curSelectSite: {},
|
showSignature: false,
|
signatureUrl: "",
|
signatureSettings: { //签名设置
|
width: '700', //签名区域的宽
|
height: '800', //签名区域的高
|
lineWidth: 3, //签名时线宽
|
textColor: '#007AFF' //签名文字颜色
|
},
|
statusOption: [{
|
text: "存在",
|
value: 0
|
},
|
{
|
text: "不存在",
|
value: 1
|
},
|
],
|
|
questionList: [],
|
itemIndex: [],
|
patrolRecordVOList: [],
|
count: 0,
|
statusList: [{
|
name: "是",
|
id: 1
|
},
|
{
|
name: "否",
|
id: 2
|
}
|
],
|
|
}
|
},
|
async onLoad(option) {
|
await this.getItem();
|
this.getDetail(option.id);
|
|
},
|
|
methods: {
|
|
|
getDetail(id) {
|
getPlaceCheckReformDetail({
|
taskId: id
|
}).then(res => {
|
if (res.code == 200) {
|
for (let i in this.info) {
|
this.info[i] = res.data[i];
|
}
|
}
|
})
|
},
|
|
|
getItem() {
|
getPlaceCheckItem({
|
childType: 1,
|
type: 1
|
}).then(res => {
|
let data = res.data;
|
this.questionList = res.data;
|
let arr = []
|
let obj = {
|
itemId: "",
|
state: "",
|
imagesUrl: "",
|
remark: ""
|
}
|
let count = 0;
|
for (let i = 0, ii = data.length; i < ii; i++) {
|
arr.push(i);
|
for (let k = 0, kk = data[i].children.length; k < kk; k++) {
|
// this.info.patrolRecordVOList.push(obj);
|
count += 1;
|
}
|
}
|
this.count = count;
|
this.itemIndex = arr;
|
})
|
},
|
|
changeStatus(value, item, fIndex, cIndex) {
|
let children = this.questionList[fIndex];
|
children.children[cIndex].state = value;
|
this.$set(this.questionList, fIndex, children)
|
if (value == 0 && !item.urls) {
|
children.children[cIndex].urls = [];
|
this.$set(this.questionList, fIndex, children)
|
}
|
this.$nextTick(() => {
|
this.$refs.collapse.init();
|
})
|
this.getSelected()
|
},
|
|
getSelected() {
|
let arr = []
|
for (let i = 0, ii = this.questionList.length; i < ii; i++) {
|
for (let k = 0, kk = this.questionList[i].children.length; k < kk; k++) {
|
if (this.questionList[i].children[k].state != null) {
|
arr.push({
|
itemId: this.questionList[i].children[k].id,
|
state: this.questionList[i].children[k].state,
|
imageUrls: this.setImages(this.questionList[i].children[k].urls),
|
remark: this.questionList[i].children[k].remark || ""
|
})
|
}
|
}
|
}
|
return arr;
|
},
|
|
setImages(key) {
|
if (!key) {
|
return ""
|
} else {
|
let urls = [];
|
for (let i of key) {
|
urls.push(i.name);
|
}
|
return urls.join(",")
|
}
|
},
|
|
async afterReadImgs(event, item, fIndex, cIndex) {
|
this.showLoading()
|
let children = this.questionList[fIndex];
|
let lists = [].concat(event.file)
|
let fileListLen = item.urls.length;
|
lists.map((item) => {
|
children.children[cIndex].urls.push({
|
...item,
|
status: 'uploading',
|
message: '上传中'
|
})
|
this.$set(this.questionList, fIndex, children)
|
})
|
for (let i = 0; i < lists.length; i++) {
|
const result = await this.uploadFilePromise(lists[i].url)
|
children.children[cIndex].urls.splice(fileListLen, 1, Object.assign({}, {
|
url: result.data.link,
|
name: result.data.name
|
}))
|
this.$set(this.questionList, fIndex, children)
|
fileListLen++
|
}
|
this.loadingClose()
|
this.getSelected()
|
},
|
|
deleteImages(event, fIndex, cIndex) {
|
let children = this.questionList[fIndex];
|
children.children[cIndex].urls.splice(event.index, 1);
|
this.$set(this.questionList, fIndex, children);
|
this.getSelected()
|
},
|
|
signatureChange(e) {
|
// this.signatureUrl = e;
|
this.uploadSignImg(e)
|
},
|
|
showSignPopup() {
|
// if (this.getSelected().length < this.count) {
|
// this.$showTips("还有内容还未完善");
|
// return;
|
// }
|
|
let data = this.getSelected();
|
for (let i of data) {
|
if (i.state == 1) {
|
if (i.imageUrls || i.remark) {
|
i.imageUrls = "";
|
i.remark = "";
|
}
|
} else {
|
if (!i.imageUrls && !i.remark) {
|
this.$showTips("请上传隐患照片或填写隐患描述");
|
return;
|
}
|
}
|
}
|
this.showSignature = true;
|
},
|
|
uploadSignImg(url) {
|
uni.uploadFile({
|
url: this.uploadConfig.url,
|
filePath: url,
|
name: 'file',
|
header: this.uploadConfig.header,
|
success: (res) => {
|
console.log(res);
|
let data = JSON.parse(res.data);
|
if (res.statusCode == 200 && data.code == 200) {
|
// this.handleSubmit(data.data.name);
|
this.showSignature = false;
|
this.signatureUrl = data.data.link;
|
this.info.signaturePath = data.data.name;
|
// this.sumitInfo()
|
}
|
}
|
})
|
},
|
|
sumitInfo() {
|
uni.showLoading({
|
title: "加载中..."
|
})
|
if (this.form.images.length > 0) {
|
let urls = []
|
this.form.images.forEach(e => {
|
urls.push(e.name)
|
})
|
this.info.imageUrls = urls.join(",")
|
}
|
|
this.info.patrolRecordVOList = this.getSelected()
|
|
addPlaceCheckTwo(this.info).then(res => {
|
uni.hideLoading();
|
uni.showToast({
|
icon: 'success',
|
title: '提交成功',
|
success() {
|
setTimeout(() => {
|
uni.navigateBack();
|
}, 1000)
|
}
|
})
|
})
|
},
|
|
previewImg() {
|
uni.previewImage({
|
urls: [this.signatureUrl],
|
current: this.signatureUrl
|
})
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.wrap {
|
padding: 20rpx;
|
}
|
|
.top {
|
display: flex;
|
justify-content: flex-end;
|
padding: 20rpx;
|
}
|
|
.top-btn {
|
padding: 16rpx 22rpx;
|
border-radius: 6rpx;
|
text-align: center;
|
}
|
|
.content {
|
margin: 20rpx 0;
|
padding: 0 30rpx 150rpx;
|
}
|
|
.site-box {
|
padding: 30rpx;
|
margin: 20rpx 30rpx;
|
border-radius: 4rpx;
|
|
.c-aa {
|
color: #aaa;
|
}
|
|
.address {
|
width: 60%;
|
margin-left: 25rpx;
|
}
|
}
|
|
.upload-item {
|
width: 140rpx;
|
height: 140rpx;
|
border: 1px solid #EEEEEE;
|
}
|
|
.upload {
|
// margin: 0 30rpx;
|
padding: 30rpx 0;
|
}
|
|
.submit-btn {
|
width: 690rpx;
|
height: 78rpx;
|
line-height: 78rpx;
|
background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
font-size: 32rpx;
|
color: #fff;
|
margin-top: 50rpx;
|
}
|
|
.list-btn {
|
width: 690rpx;
|
height: 78rpx;
|
line-height: 78rpx;
|
background: linear-gradient(163deg, #c7d7dc 0%, #c3cdd8 100%);
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
font-size: 32rpx;
|
color: #fff;
|
margin-top: 50rpx;
|
}
|
|
.address-row {
|
flex: 1;
|
justify-content: flex-end;
|
align-items: center;
|
}
|
|
.address-content {
|
width: calc(100% - 116rpx - 20rpx);
|
margin-right: 20rpx;
|
text-align: right;
|
}
|
|
.location-btn {
|
width: 116rpx;
|
height: 46rpx;
|
line-height: 46rpx;
|
border-radius: 4rpx;
|
border: 1px solid currentColor;
|
padding: 0;
|
background-color: #fff;
|
text-align: center;
|
}
|
|
|
.signture-popup {
|
padding-bottom: 20rpx;
|
}
|
|
.sign {
|
padding: 30rpx;
|
// margin: 0 30rpx;
|
}
|
|
.value-item {
|
flex: 1;
|
// background-color: #ffffff;
|
// width: 120rpx;
|
border: 2rpx solid #f5f5f5;
|
height: 70rpx;
|
line-height: 70rpx;
|
box-sizing: border-box;
|
text-align: center;
|
}
|
|
.active {
|
border: 2rpx solid currentColor;
|
}
|
|
.btn-group {
|
flex: 1;
|
}
|
|
/deep/ .u-cell__title-text {
|
font-weight: bold;
|
font-size: 30rpx;
|
}
|
|
/deep/ .u-form-item__body__left__content {
|
font-size: 26rpx;
|
}
|
</style>
|
