You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

369 lines
10 KiB

<template>
<view class="" id="page">
<view class="Width100 Box BorderBox">
<top-title :is-show-left="true" :title="'治理结果'" class="custom_bg">
</top-title>
</view>
<view class="navBar-top">
</view>
<view class="form-content">
<view>
<uni-forms border v-for="(itemData,indexData) in hiddenDangerList" :key="indexData"
style="margin-bottom: 12px;">
<view class="formBox">
<view class="label-box">
<view class="border"></view> 问题{{formatIndex(indexData)}}
</view>
<view style="margin-bottom:20rpx; display: flex; align-items: baseline">
<uni-forms-item label="问题类型" label-position="top" label-width="80px" />
<view class="value" style="font-size:28rpx">
{{ itemData.dangerProblem}}
</view>
</view>
<view style="margin-bottom: 30rpx;">
<view class="investigation-item" style="width: 100%; padding: 0">
<view class="detail-item">
<uni-forms-item label="问题描述" label-position="top" label-width="200px" />
<u-textarea placeholder="- -" :disabled="true" border="none"
v-model="itemData.hdDesc" style="margin-top: -20rpx;" />
</view>
</view>
<view class="investigation-item" style="width: 100%; padding: 0">
<view class="detail-item">
<uni-forms-item label="隐患图片" label-position="top" label-width="200px" />
<u-upload :fileList="itemData.hdPic" :disabled="true" style="margin-top: -20rpx;"
name="1" :maxCount="10"></u-upload>
</view>
</view>
<view class="investigation-item" style="width: 100%; padding: 0">
<view class="detail-item">
<uni-forms-item label="补充信息" label-position="top" label-width="200px" />
<u-textarea :disabled="true" placeholder="- -" border="none"
v-model="itemData.hdInfo" style="margin-top: -20rpx;" />
</view>
</view>
<view class="investigation-item" style="width: 100%; padding: 0">
<view class="detail-item detail-item-flex" style="align-items: baseline;">
<uni-forms-item label="治理措施" label-position="top" label-width="100px" required />
<upload-file @fileSuccess="fileSuccess.call(this,$event, indexData)"
@fileDelete="fileDelete.call(this, $event, indexData)"
:fileList="itemData.zlMeasure" />
</view>
</view>
<view class="investigation-item " style="width: 100%; padding: 0">
<view class="detail-item">
<uni-forms-item label="治理后照片" label-position="top" label-width="100px" required />
<u-upload :fileList="itemData.zlPic" style="margin-top: -20rpx;" name="1"
:maxCount="9" @afterRead="afterRead.call(this, $event,indexData)"
@delete="deletePic.call(this, $event,indexData)"></u-upload>
</view>
</view>
<view class="investigation-item" style="width: 100%; padding: 0">
<view class="detail-item detail-item-flex" @click="handleOpenDate(indexData)">
<uni-forms-item label="治理时间" label-position="top" label-width="100px" required />
<view class="value" :class="itemData.zlTime ? 'value-date' : 'value-placeholder'">
{{itemData.zlTime || '请选择入治理时间'}}
</view>
</view>
</view>
<view class="investigation-item" style="width: 100%; padding: 0">
<view class="detail-item detail-item-flex">
<uni-forms-item label="治理单位" label-position="top" label-width="100px" required />
<input class="BorderNone Height100 formInput"
style="font-size: 14px; text-align: right;" placeholder-style="fontSize: 14px"
v-model="itemData.zlUnit" placeholder="请输入治理单位" />
</view>
</view>
</view>
</view>
</uni-forms>
</view>
</view>
<three class="footer-buttons" :type="'view'" first-text="取消" next-text="确认" :second-primary="true"
@first="handleBack" @last="handleSubmit" />
<u-datetime-picker :show="dateShow" :value="dateTime" :maxDate="maxDate" @cancel="dateShow = false"
@confirm="handleConfirm" mode="datetime" :defaultIndex="[1, 2, 1, 1, 1]"></u-datetime-picker>
</view>
</template>
<script>
import TopTitle from "../../components/top-title";
import Three from "../../components/bottom-button/three.vue";
import uploadFile from "../../components/upload-file.vue";
const indexList = ['一', '二', '三', '四', '五', '六', '七', '八', '九']
export default {
components: {
TopTitle,
Three,
uploadFile
},
data() {
return {
hiddenDangerList: [],
businessId: '',
dateShow: false,
dateTime: this.formatTime(),
curIndex: 0,
maxDate: null
}
},
onLoad(e) {
this.businessId = e.id
this.initPage()
},
methods: {
handleConfirm(value) {
this.$set(this.hiddenDangerList[this.curIndex], 'zlTime', this.formatTime(value.value))
this.dateShow = false
},
handleOpenDate(index) {
this.curIndex = index
this.dateTime = this.hiddenDangerList[index].zlTime || this.formatTime()
this.$nextTick(() => {
this.maxDate = this.getCurTimeForX()
this.dateShow = true
})
},
getCurTimeForX() {
return (new Date()).getTime()
},
formatTime(time) {
console.log(time)
return this.$moment(time).format('YYYY-MM-DD HH:mm')
},
fileSuccess(result, index) {
console.log(result, index)
this.hiddenDangerList[index].zlMeasure.push({
id: this.uuid(),
fileName: result.fileName,
filePath: result.result
})
},
fileDelete(fileIndex, index) {
this.hiddenDangerList[index].zlMeasure.splice(
fileIndex,
1,
);
},
initPage() {
this.$.showLoading()
this.$request
.globalRequest(
"/hiddenDanger/highDanger/getUserHiddenDangerList", {
// nuserid: this.$.getData("token"),
pcType: 2,
businessId: this.businessId
},
"GET"
)
.then((res) => {
if (res.code === 200) {
this.hiddenDangerList = res.result.map(item => ({
...item,
hdPic: item.hdPic ? item.hdPic.split(',').map(item => ({
url: item
})) : [],
zlPic: [],
zlMeasure: []
}))
}
}).finally(() => {
this.$.hideLoading()
})
},
formatIndex(index) {
return indexList[index]
},
//获取随机id
uuid(len, binary) {
len = !len ? 36 : len;
binary = !binary ? 16 : binary;
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx"
.replace(/[xy]/g, function(c) {
var r = (Math.random() * binary) | 0,
v = c == "x" ? r : (r & 0x3) | 0x8;
return v.toString(binary);
})
.substring(0, len);
},
deletePic(event, index) {
this.hiddenDangerList[index].zlPic.splice(event.index, 1);
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: this.$.baseUrl + "/hiddenDanger/ftp/uploadFileToFtp", // 仅为示例,非真实的接口地址
filePath: url,
name: "file",
success: (res) => {
resolve(res.data);
},
});
});
},
async afterRead(event, index) {
console.log(event, index)
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
const id = this.uuid();
this.hiddenDangerList[index].zlPic.push({
id,
...event.file,
status: "uploading",
message: "上传中",
});
const result = await this.uploadFilePromise(event.file.url);
const resultInfo = JSON.parse(result);
const fileIndex = this.hiddenDangerList[index].zlPic.findIndex((v) => v.id === id);
if (resultInfo.code == 200) {
this.hiddenDangerList[index].zlPic.splice(
fileIndex,
1,
Object.assign(event.file, {
status: "success",
message: "",
result: resultInfo,
url: resultInfo.result,
})
);
console.log(this.hiddenDangerList[index].zlPic)
} else {
this.$.toast("上传失败");
this.hiddenDangerList[index].zlPic.splice(
fileIndex,
1,
);
}
},
handleBack() {
this.$.back(1)
},
getFormatData() {
return this.hiddenDangerList.map(item => ({
zlMeasure: item.zlMeasure.map(item => item.filePath).join(','),
zlPic: item.zlPic.map(item => item.url).join(','),
zlUnit: item.zlUnit,
zlTime: item.zlTime,
hdTerm: item.hdTerm
}))
},
validDate(data) {
if (!data.length) return false
return data.reduce((result, item) => {
if (!result) return false
const {
zlMeasure,
zlPic,
zlUnit,
zlTime
} = item
if (zlMeasure && zlPic && zlUnit && zlTime) {
return true
}
return false
}, true)
},
handleSubmit() {
const formData = this.getFormatData()
console.log({
businessId: this.businessId,
nuserid: this.$.getData('token'),
describe: formData
})
if (this.validDate(formData)) {
this.$.showLoading()
this.$request.globalRequest('/hiddenDanger/government/saveGovernment', {
businessId: this.businessId,
nuserid: this.$.getData('token'),
describe: formData
}, 'post').then(res => {
if (res.code === 200) {
console.log('提交成功', res)
this.$.toast('提交成功')
setTimeout(() => {
this.handleBack()
}, 500)
}
}).finally(() => {
this.$.hideLoading()
})
} else {
this.$.toast('请填写完整的表单必填项*')
}
}
}
}
</script>
<style lang="scss" scoped>
page {
background: #F6F8FA;
font-size: 14px;
}
.navBar-top {
height: calc(var(--status-bar-height) + 88rpx);
}
.form-content {
padding-bottom: 120rpx;
}
.formBox {
margin: 30rpx 20rpx;
border: 1px solid #e6e6e6;
background: #ffffff;
padding: 0 20rpx 20rpx;
box-sizing: border-box;
/deep/ .uni-forms-item--border .uni-forms-item__content {
justify-content: flex-end;
text-align: right;
}
.photo {
width: 100%;
image {
width: 100%;
}
}
}
.label-box {
display: flex;
align-items: center;
height: 110rpx;
font-size: 30rpx;
font-weight: 600;
.border {
background-color: #2663BF;
height: 35rpx;
width: 6rpx;
margin-right: 14rpx;
}
}
.detail-item-flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.uni-forms-item--border {
border: none;
}
.investigation-item {
border-top: 1px solid #eee;
}
.value-placeholder {
color: #B4BAC9
}
</style>