<template>
|
<view class="container">
|
<view class="basic-box">
|
<!-- <view class="title-box">
|
<view class="line"></view>
|
<view class="text">基本信息</view>
|
</view> -->
|
<caption-row title="基本信息" />
|
<view class="basic-data">
|
<lineItem :dataInfo="basicData"></lineItem>
|
</view>
|
</view>
|
<view class="pic-box" v-if="imgUrls.length">
|
<!-- <view class="title-box">
|
<view class="line"></view>
|
<view class="text">事件照片</view>
|
</view> -->
|
<caption-row title="事件照片" />
|
<view class="pic-data">
|
<view class="mr-20 " v-for="(i,k) in imgUrls" :key="k">
|
<u-image class="img" :src="i" width="80" height="80" @click="previewImg(i)"></u-image>
|
</view>
|
</view>
|
</view>
|
<view class="audit-box">
|
<!-- <view class="title-box">
|
<view class="line"></view>
|
<view class="text">审核信息</view>
|
</view> -->
|
<caption-row title="审核信息" />
|
<view class="stauts mt-20" v-if="confirmFlag == 3 && !defaultData.taskRepairStepList">
|
已处理
|
</view>
|
<view class="step">
|
<view class="step-list " v-for="i in defaultData.taskRepairStepList"
|
v-if="defaultData.taskRepairStepList.length">
|
|
<view class="flex j-c-s-b a-i-c mb-10">
|
<text class="f-30 fw">{{i.peopleType ==1?"转办":"已处理"}}</text>
|
<text class="f-26 c-99">{{i.createTime}} </text>
|
</view>
|
<view class="f-28">{{i.content}}</view>
|
</view>
|
</view>
|
|
<view class="audit-form" v-if="defaultData.confirmFlag == 1">
|
<u-form labelWidth="70" :model="form" class="form" ref="form">
|
<!-- <u-form-item label="事件状态" @click="showPicker" class="form-item">
|
<u--input v-model="form.confirmFlag" disabled disabledColor="#ffffff" placeholder="请选择审核状态"
|
border="none" :placeholder="defaultPlaceholder" inputAlign="right" color="#333"></u--input>
|
<u-icon slot="right" name="arrow-right" v-show="from == 'list'"></u-icon>
|
</u-form-item> -->
|
<u-form-item label="处理情况" class="form-item"
|
v-if="from == 'list' || (from == 'record' && form.confirmNotion)">
|
<u--input v-model="form.confirmNotion" :border="from == 'list'?'surround':'none'"
|
inputAlign="right" color="#333" :disabled="from == 'record'?true:false"></u--input>
|
</u-form-item>
|
</u-form>
|
</view>
|
</view>
|
|
<view class="upload bgc-ff" v-if="(confirmFlag == 1) || (confirmFlag == 3 && form.imageList.length)">
|
<view class="f-28">图片</view>
|
<view class="mt-20">
|
<u-upload :fileList="form.imageList" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
:maxCount="confirmFlag == 3 && form.imageList.length?form.imageList.length:uploadConfig.maxCount"
|
:capture="uploadConfig.capture" :deletable="confirmFlag == 3 && form.imageList.length?false:true"
|
@afterRead="afterReadImg($event,'imageList')" @delete="deletePics($event,'imageList')">
|
<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 class="upload bgc-ff" v-if="(confirmFlag == 1 ) || (confirmFlag == 3 && form.videoList.length)">
|
<view class="f-28">视频</view>
|
<view class="mt-20">
|
<u-upload :fileList="form.videoList" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptVideo" :multiple="uploadConfig.multiple"
|
:maxCount="confirmFlag == 3 && form.videoList.length?form.videoList.length:uploadConfig.maxCount"
|
:capture="uploadConfig.capture" :deletable="confirmFlag == 3 && form.videoList.length?false:true"
|
@afterRead="afterReadImg($event,'videoList')" @delete="deletePics($event,'videoList')">
|
<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 class="bottom" v-if="from == 'list'">
|
<u-button type="primary" @click="submit">提交处理</u-button>
|
</view> -->
|
|
<!-- <footer-btn @click="submit" v-if="from == 'list'"></footer-btn> -->
|
|
<view class="footer flex a-i-c j-c-s-b" v-if="from == 'list' && confirmFlag == 1">
|
<button class="footer-btn" @click="submit(0)">处置</button>
|
<button class="footer-btn" @click="submit(2)">共享</button>
|
<button class="footer-btn" @click="submit(1)">转办</button>
|
</view>
|
<u-picker :defaultIndex="[defaultColums]" :closeOnClickOverlay="true" @close="isPickerShow = false"
|
:show="isPickerShow" ref="uPicker" :columns="columns" keyName="name" @cancel="isPickerShow = false"
|
@confirm="handleConfirm"></u-picker>
|
|
<u-picker :defaultIndex="peopleIndex" :closeOnClickOverlay="true" @close="isShowPeoplePicker = false"
|
:show="isShowPeoplePicker" ref="pPicker" :columns="peopleList" keyName="name"
|
@cancel="isShowPeoplePicker = false" @confirm="handlePeopleConfirm" @change="changePeople"></u-picker>
|
|
<u-popup :show="show" mode="bottom" @close="close" :round="10" :closeable="true">
|
<view class="popup-title">
|
共享
|
</view>
|
<view style="margin-top: 20rpx 0rpx;" class="popup-content">
|
<u-radio-group v-model="radiovalue1" @change="groupChange" iconPlacement="right" placement="column">
|
<view v-for="(item, index) in radiolist1" style="padding:10rpx 0;">
|
<u-radio :customStyle="{marginBottom: '8px'}" :key="index" :label="item.name" :name="item.id"
|
@change="radioChange">
|
</u-radio>
|
</view>
|
|
</u-radio-group>
|
|
<view class="popup-btn flex a-i-c j-c-s-b">
|
<button class="popup-btn-item" @click="pushCircle">确认</button>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import lineItem from '../components/lineItem.vue'
|
import captionRow from '@/components/caption/caption.vue'
|
import {
|
checkReportForRepairsData,
|
reportSave,
|
getDetail
|
} from '@/api/task/taskReportForRepairs.js'
|
import {
|
getPeopleType
|
} from '@/api/user.js'
|
import {
|
handlePublish
|
} from '@/api/circle/circle.js'
|
import {
|
minioBaseUrl
|
} from "@/common/setting.js"
|
import uploadMixin from "@/mixin/uploadMixin";
|
export default {
|
mixins: [uploadMixin],
|
components: {
|
captionRow,
|
lineItem
|
},
|
data() {
|
return {
|
basicData: [{
|
label: '事发地',
|
name: 'address',
|
value: '未完善'
|
},
|
{
|
label: '姓名',
|
name: 'realName',
|
value: '未完善'
|
},
|
{
|
label: '手机号码',
|
name: 'phone',
|
value: '未完善'
|
},
|
{
|
label: '事件类型',
|
name: 'type',
|
value: '未完善'
|
},
|
{
|
label: '事件描述',
|
name: 'remark',
|
value: '未完善'
|
},
|
{
|
label: '提交时间',
|
name: 'createTime',
|
value: '未完善'
|
}
|
],
|
typeList: [{
|
name: "公共维修",
|
type: 1
|
},
|
{
|
name: "居家维修",
|
type: 2
|
},
|
{
|
name: "矛盾纠纷",
|
type: 3
|
},
|
{
|
name: "投诉举报",
|
type: 4
|
},
|
{
|
name: "企业商户上报",
|
type: 5
|
},
|
{
|
name: "统战上报",
|
type: 6
|
}
|
],
|
form: {
|
confirmFlag: '',
|
confirmNotion: '',
|
imageList: [],
|
videoList: []
|
},
|
defaultPlaceholder: "",
|
defaultColums: 0,
|
imgUrls: [],
|
currentId: '',
|
defaultData: {
|
taskRepairStepList: []
|
},
|
isPickerShow: false,
|
columns: [
|
[{
|
name: "待处理",
|
status: 1
|
},
|
{
|
name: "处理中",
|
status: 2
|
},
|
{
|
name: "已处理",
|
status: 3
|
},
|
]
|
],
|
from: "list",
|
peopleList: [
|
[{
|
name: "网格员",
|
type: 0
|
},
|
{
|
name: "物业人员",
|
type: 2
|
}
|
],
|
[]
|
],
|
// 基本案列数据
|
radiolist1: [{
|
name: '邻里圈',
|
disabled: false,
|
id: 0
|
},
|
{
|
name: '协同圈',
|
disabled: false,
|
id: 1
|
}
|
],
|
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
|
radiovalue1: 1,
|
peopleIndex: [0, 0],
|
isShowPeoplePicker: false,
|
transferUserId: "",
|
content: "",
|
confirmFlag: "",
|
show: false,
|
|
}
|
},
|
onLoad(option) {
|
// const { id } = option
|
// this.currentId = id
|
|
if (option.from) {
|
this.from = option.from;
|
}
|
|
let data = JSON.parse(option.data)
|
this.defaultData = data;
|
this.confirmFlag = data.confirmFlag;
|
|
if (data.confirmFlag == 3 && data.taskRepairStepList.length) {
|
let {
|
imageList,
|
videoList
|
} = data.taskRepairStepList[data.taskRepairStepList.length - 1];
|
this.form.imageList = this.$setImageUrl(imageList, 2)
|
this.form.videoList = this.$setImageUrl(videoList, 2)
|
}
|
|
|
this.getPeopleList(0)
|
},
|
onShow() {
|
this.setDefaultValue()
|
},
|
methods: {
|
pushCircle() {
|
handlePublish({
|
houseCode: this.defaultData.addressCode,
|
eventId: this.defaultData.id,
|
evenType: 1,
|
circleType: this.radiovalue1,
|
communityCode: uni.getStorageSync("curHouseCode"),
|
circleText: this.defaultData.remark,
|
circleImages: this.defaultData.imageUrls
|
}).then(res => {
|
this.$showTips("操作成功", "success")
|
this.close()
|
// this.$set(this.peopleList, 1, res.data);
|
})
|
},
|
close() {
|
this.show = false
|
},
|
groupChange(n) {
|
console.log('groupChange', n);
|
},
|
radioChange(n) {
|
console.log('radioChange', n);
|
},
|
getPeopleList(type) {
|
getPeopleType({
|
houseCode: this.defaultData.addressCode,
|
type
|
}).then(res => {
|
console.log(res);
|
this.$set(this.peopleList, 1, res.data);
|
})
|
},
|
|
showPicker() {
|
if (this.from == "list") {
|
this.isPickerShow = true;
|
}
|
},
|
|
setImgUrl(url) {
|
return `${minioBaseUrl}${url}`
|
},
|
|
async checkReportForRepairs() {
|
const {
|
confirmFlag,
|
confirmNotion
|
} = this.form
|
|
if (!confirmNotion) {
|
uni.showToast({
|
title: "请输入处理情况",
|
icon: "none"
|
})
|
return;
|
}
|
|
const res = await checkReportForRepairsData({
|
// id: this.currentId,
|
id: this.defaultData.id,
|
// confirmFlag: this.findObjValue(confirmFlag, this.columns[0], 'name').status,
|
confirmFlag: 3,
|
confirmNotion
|
})
|
|
if (res.code !== 200) {
|
uni.showToast({
|
title: "提交处理失败",
|
icon: "error"
|
})
|
return
|
}
|
|
uni.showToast({
|
title: "处理事件成功",
|
icon: "success",
|
duration: 1500,
|
complete() {
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1500)
|
}
|
})
|
},
|
|
setDefaultValue() {
|
console.log(this.defaultData);
|
this.basicData.forEach(item => {
|
item.value = this.defaultData[item.name] || '未完善'
|
if (item.name === 'type') {
|
item.value = this.findObjValue(item.value, this.typeList, 'type').name || '未完善'
|
}
|
})
|
this.imgUrls = this.$setImageUrl(this.defaultData.imageUrls);
|
//if(this.defaultData.imageUrls){
|
// let list = this.defaultData.imageUrls.split(",")
|
// let arr = []
|
// for(let i of list){
|
// arr.push(`${minioBaseUrl}${i}`);
|
// }
|
//}
|
|
let columns = this.columns[0]
|
this.defaultColums = columns.findIndex(item => item.status == this.defaultData.confirmFlag)
|
this.defaultPlaceholder = columns[this.defaultColums].name
|
},
|
|
submit(type) {
|
if (type == 1) {
|
this.isShowPeoplePicker = true;
|
} else if (type == 2) {
|
this.show = true
|
} else {
|
if (!this.form.confirmNotion) {
|
uni.showToast({
|
title: "请输入处理情况",
|
icon: "none"
|
})
|
return;
|
}
|
|
let data = {
|
confirmFlag: 3,
|
content: this.form.confirmNotion,
|
imageList: this.getFileName(this.form.imageList),
|
mobile: this.defaultData.mobile,
|
peopleType: 0,
|
repairId: this.defaultData.id,
|
videoList: this.getFileName(this.form.videoList)
|
}
|
this.submitRequest(data)
|
}
|
// this.checkReportForRepairs()
|
},
|
|
getFileName(urls) {
|
if (urls.length) {
|
let arr = [];
|
for (let i of urls) {
|
arr.push(i.name);
|
}
|
return arr.join(",");
|
} else {
|
return ""
|
}
|
},
|
|
|
submitRequest(data) {
|
reportSave(data).then(res => {
|
if (res.code == 200) {
|
uni.showToast({
|
title: "操作成功"
|
})
|
uni.navigateBack()
|
}
|
})
|
},
|
|
handleConfirm(e) {
|
this.form.confirmFlag = e.value[0].name
|
this.isPickerShow = false
|
},
|
findObjValue(value, obj, word) {
|
const res = obj.find(item => {
|
return item[word] == value
|
})
|
return res
|
},
|
|
previewImg(url) {
|
uni.previewImage({
|
urls: this.imgUrls,
|
current: url
|
})
|
},
|
|
|
changePeople(e) {
|
console.log(e);
|
const {
|
columnIndex,
|
value,
|
values, // values为当前变化列的数组内容
|
index,
|
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
picker = this.$refs.pPicker
|
} = e
|
if (columnIndex === 0) {
|
// picker为选择器this实例，变化第二列对应的选项
|
// picker.setColumnValues(1, this.columnData[index])
|
this.getPeopleList(value[0].type)
|
}
|
},
|
|
handlePeopleConfirm(e) {
|
console.log(e)
|
let {
|
value,
|
indexs
|
} = e;
|
this.transferUserId = value[1].id
|
this.peopleIndex = indexs;
|
// this.content = `事件已移交至${value[0].distictName}${value[1].distictName}`
|
let data = {
|
addressCode: this.defaultData.addressCode,
|
confirmFlag: 1,
|
content: `事件已移交至${value[0].name}${value[1].name}`,
|
peopleType: 1,
|
repairId: this.defaultData.id,
|
transferUserId: value[1].id
|
}
|
console.log(data);
|
this.submitRequest(data)
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
page {
|
background-color: #f6f6f6;
|
}
|
|
.container {
|
padding: 0 20rpx 150rpx;
|
|
.basic-box,
|
.pic-box,
|
.audit-box,
|
.bottom {
|
background-color: #fff;
|
padding: 20rpx;
|
}
|
|
.pic-box {
|
|
// margin-top: 20rpx;
|
.pic-data {
|
padding: 0 20rpx;
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 20rpx;
|
}
|
}
|
|
.audit-box {
|
// margin-top: 20rpx;
|
|
.audit-form {
|
padding: 0 20rpx;
|
|
.form {
|
font-size: 30rpx;
|
|
.form-item {
|
padding: 0 20rpx;
|
|
&:first-child {
|
border-bottom: 1rpx solid #f6f6ff;
|
}
|
}
|
}
|
}
|
}
|
|
.bottom {
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
width: calc(100% - 40rpx);
|
border-top: 1rpx solid #f6f6f6;
|
}
|
|
.title-box {
|
display: flex;
|
align-items: center;
|
font-size: 30rpx;
|
|
.line {
|
width: 6rpx;
|
height: 30rpx;
|
margin-right: 10rpx;
|
background-color: #017BFC;
|
}
|
|
.text {
|
font-weight: 700;
|
}
|
}
|
}
|
|
/deep/ .u-form-item__body__left__content__label,
|
/deep/ .uni-input-placeholder {
|
font-size: 30rpx;
|
}
|
|
.footer {
|
width: 100%;
|
padding: 20rpx 30rpx;
|
box-sizing: border-box;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
background-color: #fff;
|
z-index: 10;
|
padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
|
z-index: 999;
|
background-color: #fff;
|
box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
|
|
.footer-btn {
|
width: 150rpx;
|
height: 78rpx;
|
border-radius: 8rpx;
|
font-size: 32rpx;
|
color: #fff;
|
border: none;
|
background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);
|
}
|
|
.footer-btn:after {
|
border: none;
|
}
|
|
}
|
|
|
.upload {
|
margin: 0 30rpx;
|
padding: 30rpx;
|
|
.upload-item {
|
width: 140rpx;
|
height: 140rpx;
|
border: 1px solid #EEEEEE;
|
}
|
}
|
|
.step {
|
margin-top: 20rpx;
|
padding: 0 20rpx;
|
}
|
|
.step-list {
|
padding: 15rpx 0;
|
}
|
|
.popup-title {
|
padding: 20rpx 0;
|
text-align: center;
|
|
}
|
|
.popup-content {
|
padding: 20rpx;
|
}
|
|
.popup-btn {
|
padding: 20rpx;
|
|
|
.popup-btn-item {
|
width: 100%;
|
height: 78rpx;
|
line-height: 78rpx;
|
border-radius: 36rpx;
|
color: #fff;
|
background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);
|
font-size: 28rpx;
|
}
|
|
.popup-btn-item:after {
|
border: none;
|
}
|
}
|
</style>
|
