<template>
|
<view class="container">
|
<view class="basic">
|
<!-- <box-title title="基本信息" class="box-title"></box-title> -->
|
<view class="info mt-20 bgc-ff">
|
<lineItem :dataInfo="basicData"></lineItem>
|
|
<view class="licence" v-if="locationImageUrls.length">
|
<!-- <box-title title="位置图片" class="box-title"></box-title> -->
|
<view class="f-30 mb-20">位置图片</view>
|
<view class="flex-wrap">
|
<view v-for="(i,k) in locationImageUrls" :key="k" class="mr-20 mt-20"
|
@click="previewImg(i,locationImageUrls)">
|
<u-image :src="i" width="80" height="80"></u-image>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
<!-- <view class="licence" v-if="locationImageUrls.length">
|
<box-title title="位置图片" class="box-title"></box-title>
|
<view class="flex-wrap">
|
<view v-for="(i,k) in locationImageUrls" :key="k" class="ml-20 mt-20"
|
@click="previewImg(i,locationImageUrls)">
|
<u-image :src="i" width="80" height="80"></u-image>
|
</view>
|
</view>
|
</view> -->
|
|
|
<view class="item mt-20 bgc-ff">
|
<u-form labelPosition="left" :model="info" ref="form" labelWidth="100" :labelStyle="{fontSize:'28rpx'}">
|
<u-form-item label="审核结果" prop="confirmFlag" borderBottom>
|
<u-input v-model="confirmFlag" disabled disabledColor="#ffffff" border="none" placeholder="请输入"
|
placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
|
</u-form-item>
|
<u-form-item label="备注" borderBottom v-if="info.confirmNotion">
|
<u--input type="textarea" v-model="info.confirmNotion" :disabled="true" disabledColor="#ffffff"
|
placeholderClass="f-28 c-99" border="none" inputAlign="right"></u--input>
|
|
</u-form-item>
|
<u-form-item label="审核人员" prop="checkUserName" borderBottom>
|
<u-input v-model="info.confirmUserName" :disabled="isDisabled" disabledColor="#ffffff" border="none"
|
placeholder="请输入审核人员姓名" placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
</u-form-item>
|
<u-form-item label="电话号码" prop="confirmUserTelephone" borderBottom>
|
<u-input v-model="info.confirmUserTelephone" :disabled="isDisabled" disabledColor="#ffffff"
|
border="none" placeholder="请输入审核人员电话号码" placeholderClass="f-28 c-99"
|
inputAlign="right"></u-input>
|
</u-form-item>
|
</u-form>
|
</view>
|
|
<view v-if="status == 2" class="section bgc-ff mt-20 mb-20">
|
<u-subsection :list="tabList" :current="tabIndex" button-color="#017BFC" @change="changeTab"></u-subsection>
|
<u-form labelPosition="left" :model="goOutInfo" ref="form" labelWidth="100"
|
:labelStyle="{fontSize:'28rpx'}">
|
<view class="" v-if="tabIndex == 0">
|
<u-form-item label="当前时间" prop="checkUserName" borderBottom @click="showPickerDate">
|
<u-input v-model="goOutInfo.startTime" disabled disabledColor="#ffffff" border="none"
|
placeholder="请获取当前时间" placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="报备位置" prop="checkUserName" borderBottom @click="getLocation('startLocation')">
|
<u-input v-model="goOutInfo.startLocation" disabled disabledColor="#ffffff" border="none"
|
placeholder="请获取当前位置" placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
</view>
|
<view class="" v-if="tabIndex == 1">
|
<u-form-item label="到达时间" prop="reachTime" borderBottom @click="showPickerDate">
|
<u-input v-model="goOutInfo.reachTime" disabled disabledColor="#ffffff" border="none"
|
placeholder="请获取当前时间" placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="到达位置" prop="reachLocation" borderBottom @click="getLocation('reachLocation')">
|
<u-input v-model="goOutInfo.reachLocation" disabled disabledColor="#ffffff" border="none"
|
placeholder="请获取当前位置" placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
</view>
|
<view class="" v-if="tabIndex == 2">
|
<u-form-item label="返回时间" prop="returnTime" borderBottom @click="showPickerDate">
|
<u-input v-model="goOutInfo.returnTime" disabled disabledColor="#ffffff" border="none"
|
placeholder="请获取返回时间" placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="返回位置" prop="returnLocation" borderBottom @click="getLocation('returnLocation')">
|
<u-input v-model="goOutInfo.returnLocation" disabled disabledColor="#ffffff" border="none"
|
placeholder="请获取返回位置" placeholderClass="f-28 c-99" inputAlign="right"></u-input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
</view>
|
</u-form>
|
<view class="upload bgc-ff">
|
<view class="f-30 mb-20">位置图片</view>
|
<view class="mt-20" v-if="tabIndex == 0">
|
<u-upload :fileList="startImageUrls" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
:maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture"
|
@afterRead="afterReadImgs($event,'startImageUrls')"
|
@delete="deletePics($event,'startImageUrls')">
|
<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 class="mt-20" v-if="tabIndex == 1">
|
<u-upload :fileList="reachImageUrls" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
:maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture"
|
@afterRead="afterReadImgs($event,'reachImageUrls')"
|
@delete="deletePics($event,'reachImageUrls')">
|
<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 class="mt-20" v-if="tabIndex == 2">
|
<u-upload :fileList="returnImageUrls" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
:maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture"
|
@afterRead="afterReadImgs($event,'returnImageUrls')"
|
@delete="deletePics($event,'returnImageUrls')">
|
<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>
|
|
|
<!-- <view class="bottom-btn" v-if="roleType == 1 && status == 1">
|
<u-button type="primary" @click="submit">提交审核</u-button>
|
</view>
|
<view class="bottom-btn" v-if="roleType == 2 && status == 2">
|
<u-button type="primary" @click="submit">提交</u-button>
|
</view> -->
|
|
<!-- <footer-btn v-if="roleType == 1 && status == 1" text="提交审核" @click="submit" /> -->
|
|
<audit-action @handle="submit" v-if="roleType == 1 && status == 1"></audit-action>
|
<footer-btn v-if="roleType == 2 && status == 2" text="提交" @click="submit" />
|
<footer-btn v-if="roleType == 2 && status == 3" text="重新编辑" @click="navToEdit" />
|
|
|
<u-datetime-picker ref="datetimePicker" :show="showSelectDate" v-model="goOutDate[tabIndex]" mode="datetime"
|
:formatter="formatter" @confirm="confirmDate" @cancel="cancelPickerDate"></u-datetime-picker>
|
<u-picker :closeOnClickOverlay="true" @close="isPickerShow = false" :show="isPickerShow" ref="uPicker"
|
:columns="columns" keyName="name" @cancel="isPickerShow = false" @confirm="handleConfirm"></u-picker>
|
</view>
|
</template>
|
|
<script>
|
import boxTitle from "@/subPackage/workbench/components/boxTitle/index.vue"
|
import lineItem from '../components/lineItem.vue'
|
import uploadMixin from "@/mixin/uploadMixin";
|
import {
|
getBailReportingDetail,
|
setBailReporting
|
} from '@/api/reporting/reporting'
|
import auditAction from '../components/actionBtn.vue'
|
export default {
|
components: {
|
boxTitle,
|
lineItem,
|
auditAction
|
},
|
mixins: [uploadMixin],
|
data() {
|
return {
|
basicData: [{
|
label: '姓名',
|
name: "checkUserName",
|
value: '未完善'
|
},
|
{
|
label: '手机',
|
name: 'checkTelephone',
|
value: '未完善'
|
},
|
{
|
label: '申请事由',
|
name: 'applyName',
|
value: '未完善'
|
},
|
{
|
label: '申请时间',
|
name: 'applyTime',
|
value: '未完善'
|
},
|
{
|
label: '申请位置',
|
name: 'location',
|
value: '未完善'
|
}
|
],
|
confirmFlag: "待审核",
|
isPickerShow: false,
|
columns: [
|
[{
|
name: "待审核",
|
status: 1
|
},
|
{
|
name: "审核通过",
|
status: 2
|
},
|
{
|
name: "审核不通过",
|
status: 3
|
},
|
]
|
],
|
currentId: '',
|
currentData: {},
|
taskId: "",
|
locationImageUrls: [],
|
selectStatus: "",
|
remark: "",
|
isDisabled: false,
|
info: {
|
confirmFlag: 1,
|
confirmUserName: "",
|
confirmUserTelephone: ""
|
},
|
goOutInfo: {
|
startTime: "",
|
startLocation: "",
|
reachTime: "",
|
reachLocation: "",
|
returnTime: "",
|
returnLocation: ""
|
},
|
startImageUrls: [], //出发位置图片,
|
reachImageUrls: [], //到达位置图片
|
returnImageUrls: [], //返回位置图片
|
roleInfo: {},
|
roleType: "", //1系统管理员/网格员 2居民
|
tabList: [{
|
name: '出发时'
|
},
|
{
|
name: '到达时'
|
},
|
{
|
name: '返程时'
|
}
|
],
|
tabIndex: 0,
|
goOutDate: [new Date(), new Date(), new Date()],
|
showSelectDate: false,
|
status: 1, //当前状态 1待审核 2审核通过 3审核不通过
|
id: ""
|
|
}
|
},
|
onLoad(option) {
|
this.taskId = option.id;
|
this.getDetailInfo(option.id);
|
let roleInfo = uni.getStorageSync("activeRole");
|
this.roleInfo = roleInfo;
|
if (roleInfo.roleAlias == "inhabitant") {
|
this.isDisabled = true;
|
this.roleType = 2;
|
} else {
|
this.roleType = 1;
|
}
|
// this.goOutDate.forEach(item=>{
|
// item = new Date()
|
// })
|
},
|
|
methods: {
|
|
changeTab(index) {
|
this.tabIndex = index;
|
},
|
|
showPickerDate() {
|
if (this.roleType == 1 && this.status != 1) return;
|
this.showSelectDate = true;
|
},
|
cancelPickerDate() {
|
this.showSelectDate = false;
|
},
|
showPicker() {
|
if (this.roleType == 1) {
|
this.isPickerShow = true
|
};
|
},
|
|
showConfirmFlag(status) {
|
if (status == 1) {
|
this.confirmFlag = "待审核"
|
} else if (status == 2) {
|
this.confirmFlag = "审核通过"
|
} else {
|
this.confirmFlag = "审核不通过"
|
}
|
},
|
|
confirmDate(e) {
|
this.showSelectDate = false;
|
this.goOutDate[this.tabIndex] = e.value;
|
if (this.tabIndex == 0) {
|
this.goOutInfo.startTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
|
|
} else if (this.tabIndex == 1) {
|
this.goOutInfo.reachTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
|
} else {
|
this.goOutInfo.returnTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
|
}
|
},
|
|
getLocation(key) {
|
console.log(key)
|
if (this.roleType == 2 && this.status != 2) return;
|
uni.chooseLocation({
|
success: (res) => {
|
console.log(res);
|
this.$set(this.goOutInfo, key, res.address)
|
},
|
complete: (err) => {
|
console.log(err)
|
}
|
})
|
},
|
|
async afterReadImgs(event, key) {
|
this.showLoading()
|
let lists = [].concat(event.file)
|
let fileListLen = this[key].length
|
lists.map((item) => {
|
this[key].push({
|
...item,
|
status: 'uploading',
|
message: '上传中'
|
})
|
})
|
for (let i = 0; i < lists.length; i++) {
|
const result = await this.uploadFilePromise(lists[i].url)
|
this[key].splice(fileListLen, 1, Object.assign({}, {
|
url: result.data.link,
|
name: result.data.name
|
}))
|
fileListLen++
|
}
|
this.loadingClose()
|
},
|
|
getDetailInfo(id) {
|
getBailReportingDetail({
|
taskId: id
|
}).then(res => {
|
console.log(res);
|
let data = res.data;
|
this.status = data.confirmFlag
|
this.id = data.id;
|
this.showConfirmFlag(data.confirmFlag)
|
if (data.confirmFlag != 1) {
|
this.info.confirmFlag = data.confirmFlag;
|
this.info.confirmUserName = data.confirmUserName;
|
this.info.confirmUserTelephone = data.confirmUserTelephone;
|
for (let i in this.goOutInfo) {
|
this.goOutInfo[i] = data[i];
|
}
|
this.startImageUrls = this.$setImageUrl(data.startImageUrls, 2);
|
this.reachImageUrls = this.$setImageUrl(data.reachImageUrls, 2);
|
this.returnImageUrls = this.$setImageUrl(data.returnImageUrls, 2);
|
}
|
this.basicData.forEach(item => {
|
item.value = data[item.name]
|
})
|
this.locationImageUrls = this.$setImageUrl(data.locationImageUrls);
|
})
|
},
|
|
previewImg(current, urls) {
|
uni.previewImage({
|
current,
|
urls
|
})
|
},
|
|
handleConfirm(e) {
|
this.confirmFlag = e.value[0].name;
|
this.info.confirmFlag = e.value[0].status;
|
this.isPickerShow = false
|
},
|
|
checkImages() {
|
if (this.startImageUrls.length) {
|
this.$set(this.goOutInfo, "startImageUrls", this.setGoOutImages(this.startImageUrls))
|
}
|
if (this.reachImageUrls.length) {
|
this.$set(this.goOutInfo, "reachImageUrls", this.setGoOutImages(this.reachImageUrls))
|
}
|
if (this.returnImageUrls.length) {
|
this.$set(this.goOutInfo, "returnImageUrls", this.setGoOutImages(this.returnImageUrls))
|
}
|
},
|
|
setGoOutImages(key) {
|
let urls = [];
|
for (let i of key) {
|
urls.push(i.name);
|
}
|
return urls.join(",")
|
},
|
|
submit(val) {
|
if (this.roleType == 1) {
|
if (!this.info.confirmUserName) {
|
uni.showToast({
|
title: "请输入审核人员姓名",
|
icon: "none"
|
})
|
return
|
}
|
if (!this.info.confirmUserTelephone) {
|
uni.showToast({
|
title: "请输入审核人员手机号",
|
icon: "none"
|
})
|
return;
|
}
|
this.info.status = val.type;
|
this.info.confirmNotion = val.remark;
|
this.info.confirmFlag = 2;
|
this.submitRequest(this.info);
|
} else {
|
this.checkImages()
|
setTimeout(() => {
|
this.submitRequest(this.goOutInfo);
|
}, 300)
|
}
|
},
|
|
submitRequest(data) {
|
data.taskId = this.taskId;
|
data.id = this.id;
|
setBailReporting(data).then(res => {
|
if (res.code !== 200) {
|
uni.showToast({
|
title: '更新失败',
|
icon: 'error'
|
})
|
} else {
|
uni.showToast({
|
title: '提交成功!',
|
icon: 'success'
|
})
|
this.getDetailInfo(this.taskId)
|
}
|
// uni.navigateBack()
|
})
|
},
|
|
navToEdit() {
|
uni.navigateTo({
|
url: `/subPackage/label/bail?id=${this.taskId}`
|
})
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #f5f5f5;
|
}
|
|
.container {
|
padding: 0 20rpx 130rpx;
|
|
.box-title {
|
margin-bottom: 15rpx;
|
}
|
|
.info {
|
.title {
|
font-size: 30rpx;
|
padding-left: 10rpx;
|
}
|
|
.images-box {
|
padding: 20rpx;
|
min-height: 100rpx;
|
background-color: #fff;
|
}
|
}
|
|
.form {
|
background-color: #fff;
|
|
.form-item {
|
padding: 0 20rpx;
|
|
&:first-child {
|
border-bottom: 1rpx solid #f6f6ff;
|
}
|
}
|
}
|
|
.bottom-btn {
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
padding: 20rpx;
|
width: calc(100% - 40rpx);
|
background-color: #fff;
|
z-index: 9999;
|
}
|
}
|
|
/deep/ .u-form-item__body__left__content__label,
|
/deep/ .uni-input-placeholder {
|
font-size: 30rpx;
|
color: #000;
|
}
|
|
.upload {
|
// margin: 0 30rpx;
|
padding: 20rpx 0 0;
|
|
|
}
|
|
.upload-item {
|
width: 140rpx;
|
height: 140rpx;
|
border: 1px solid #EEEEEE;
|
}
|
|
.section {
|
padding: 20rpx;
|
|
}
|
|
.item,
|
.licence {
|
padding: 0 20rpx;
|
}
|
|
/deep/ .line-item-container .text .r {
|
color: #000 !important;
|
}
|
</style>
|
