<template>
<view class="f-padding">
<u-navbar
:title="title"
title-color="#fff"
:border-bottom="false"
:custom-back="customBack"
back-icon-color="#CCE8FF"
:background="{background: 'linear-gradient(99deg, #7A4398 0%, #5A5DB9 100%)' }"></u-navbar>
<u-form :model="form" ref="uForm">
<!-- <u-form-item label="路段/停车场：" prop="roadName" required :label-width="labelWidth">
<u-input v-model="form.roadName" type="select" :border="true" placeholder="请选择" @click="selectShow = true" />
<u-select v-model="selectShow" :list="roadList" value-name="roadNo" label-name="roadName" @confirm="selectConfirm"></u-select>
</u-form-item> -->
<view class="block-til">异常信息</view>
<view class="block">
<u-form-item label="问题描述" prop="exceprionDes" required :label-width="labelWidth">
<u-input type="textarea" :border="true" maxlength="200" v-model="form.exceprionDes" />
</u-form-item>
<u-form-item label="图片说明" :label-width="labelWidth" :border-bottom="false">
<u-upload ref="uploadRef" :action="action" :file-list="fileList" max-count="3"></u-upload>
</u-form-item>
</view>
<view class="block-til">处理登记</view>
<view class="block">
<u-form-item label="处理状态" :label-width="labelWidth" prop="isProcess" :required="true">
<view class="select-view" @click="oneSelectOpen('isProcess')">
{{form.isProcess|filterIsProcess}}
</view>
<u-icon @click="oneSelectOpen('isProcess')" color="#42494F" name="arrow-right"></u-icon>
</u-form-item>
<view v-if="form.isProcess&&form.isProcess!=0" class="">
<u-form-item label="处理员" prop="processBy" required :label-width="labelWidth">
<u-input type="text" :border="true" maxlength="200" v-model="form.processBy" />
</u-form-item>
<u-form-item label="处理设备" :label-width="labelWidth" prop="processDevice" :required="false">
<view class="select-view" @click="oneSelectOpen('processDeviceList')">
{{filterProcessDevice(form.processDevice)||'请选择'}}
</view>
<u-icon @click="oneSelectOpen('processDeviceList')" color="#42494F" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="损坏类型" :label-width="labelWidth" prop="damageType" :required="false">
<view class="select-view" @click="oneSelectOpen('damageTypeList')">
{{filterDamageType(form.damageType)||'请选择'}}
</view>
<u-icon @click="oneSelectOpen('damageTypeList')" color="#42494F" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="处理方式" :label-width="labelWidth" prop="processType" :required="false">
<view class="select-view" @click="oneSelectOpen('processTypeList')">
{{filterProcessType(form.processType)||'请选择'}}
</view>
<u-input @click="oneSelectOpen('processTypeList')" placeholder="请选择" v-model="form.processType"
disabled />
<u-icon @click="oneSelectOpen('processTypeList')" color="#42494F" name="arrow-right"></u-icon>
</u-form-item>
</view>
</view>
</u-form>
<u-button type="primary" @click="submit" style="margin-top: 24rpx;">提交</u-button>
<!-- 单列下拉选择 -->
<u-select v-model="selectShow" :list="selectData" @confirm="selectConfirm"></u-select>
</view>
</template>
<script>
export default{
data(){
return{
title:'问题上报',
labelWidth:190,
action:this.config.upFileUrl,
fileList:[],
selectShow:false,
selectList:[],
roadList:[],
selectTag: '',
selectShow: false,
selectData: [],
listMap: {
isProcess: [{
value: '0',
label: '未处理'
}, {
value: '1',
label: '已处理'
}, {
value: '2',
label: '部分处理'
}],
processDeviceList:[],
damageTypeList:[],
processTypeList:[],
},
form:{
roadName:'',
roadNo:'',
exceprionDes:'',
imgList:[]
},
rules:{
roadName: [
{
required: true,
message: '请选择路段',
trigger: ['change','blur'],
}
],
processBy: [
{
required: true,
message: '请输入处理员',
trigger: ['change','blur'],
}
],
exceprionDes: [
{
required: true,
message: '请输入内容',
trigger: ['change','blur'],
}
],
}
}
},
onLoad(page){
this.form.deviceId = page.deviceId;
this.form.deviceType = page.deviceType;
this.form.roadNo = page.roadNo;
this.form.roadName = page.roadName;
this.reportId = page.reportId;
// console.log('this.reportId',this.reportId);
if(this.reportId){
this.getReportDetails();
}
},
onShow(){
this.getProcessDevice();
this.getDamageType();
this.getProcessType();
},
onReady() {
this.$refs.uForm.setRules(this.rules);
},
computed:{
filterProcessDevice(value){
return function(value){
let v = '';
for (let i = 0; i < this.listMap.processDeviceList.length; i++){
let item = this.listMap.processDeviceList[i];
if (value == item.value) {
v = item.label;
break;
}
}
return v
}
},
filterDamageType(value){
return function(value){
let v = '';
for (let i = 0; i < this.listMap.damageTypeList.length; i++){
let item = this.listMap.damageTypeList[i];
if (value == item.value) {
v = item.label;
break;
}
}
return v
}
},
filterProcessType(value){
return function(value){
let v = '';
for (let i = 0; i < this.listMap.processTypeList.length; i++){
let item = this.listMap.processTypeList[i];
if (value == item.value) {
v = item.label;
break;
}
}
return v
}
},
},
methods:{
customBack(){
uni.navigateBack()
},
getReportDetails(){
this.$u.api.excptionById({id:this.reportId}).then(res=>{
if(res.code==200){
// this.reportDetails = res.data;
// this.fileList = res.data.imgList;
let imgList = res.data.imgList;
if(imgList&&imgList.length>0){
this.fileList=imgList.map(img=>{
return {url:img}
})
}
this.form = {
...res.data,
imgList:[],
}
console.log('this.formthis.form',this.form);
}else{
uni.showToast({
icon:'none',
title:res.msg
})
}
console.log('res',res);
}).catch(err=>{
console.log('err',err);
})
},
getProcessDevice(){
console.log('this.form.deviceType',this.form.deviceType);
if(this.form.deviceType==1){
this.getProcessDeviceGeo();
}else if(this.form.deviceType==2){
this.getProcessDeviceLock();
}else if(this.form.deviceType==3){
this.getProcessDeviceRoom();
}
},
getProcessDeviceGeo(){
this.$u.api.processDeviceGeo().then(res=>{
if(res.code==200){
this.listMap.processDeviceList = res.data.data.map(item=>{
return {value:item.dictValue,label:item.dictLabel}
});
// console.log('this.listMap.processDeviceList',this.listMap.processDeviceList);
}else{
uni.showToast({
icon:'none',
title:res.msg
})
}
console.log('res',res);
}).catch(err=>{
console.log('err',err);
})
},
getProcessDeviceLock(){
this.$u.api.processDeviceLock().then(res=>{
if(res.code==200){
this.listMap.processDeviceList = res.data.data.map(item=>{
return {value:item.dictValue,label:item.dictLabel}
});
// console.log('this.listMap.processDeviceList',this.listMap.processDeviceList);
}else{
uni.showToast({
icon:'none',
title:res.msg
})
}
console.log('res',res);
}).catch(err=>{
console.log('err',err);
})
},
getProcessDeviceRoom(){
this.$u.api.processDeviceRoom().then(res=>{
if(res.code==200){
this.listMap.processDeviceList = res.data.data.map(item=>{
return {value:item.dictValue,label:item.dictLabel}
});
// console.log('this.listMap.processDeviceList',this.listMap.processDeviceList);
}else{
uni.showToast({
icon:'none',
title:res.msg
})
}
console.log('res',res);
}).catch(err=>{
console.log('err',err);
})
},
getDamageType(){
this.$u.api.damageType().then(res=>{
if(res.code==200){
this.listMap.damageTypeList = res.data.data.map(item=>{
return {value:item.dictValue,label:item.dictLabel}
});
// console.log('getDeviceStatis',res);
}else{
uni.showToast({
icon:'none',
title:res.msg
})
}
console.log('res',res);
}).catch(err=>{
console.log('err',err);
})
},
getProcessType(){
this.$u.api.processType().then(res=>{
if(res.code==200){
this.listMap.processTypeList = res.data.data.map(item=>{
return {value:item.dictValue,label:item.dictLabel}
});
// console.log('getDeviceStatis',res);
}else{
uni.showToast({
icon:'none',
title:res.msg
})
}
console.log('res',res);
}).catch(err=>{
console.log('err',err);
})
},
// selectConfirm(e){
// // console.log('e',e);
// this.form.roadNo = e[0].value;
// this.form.roadName = e[0].label;
// // console.log('this.form',this.form);
// },
// 单列下拉选择框打开事件
oneSelectOpen(key) {
this.selectTag = key;
this.selectData = this.listMap[key];
this.selectShow = true
},
selectConfirm(e) {
// console.log('selectConfirm',e);
// console.log('selectTag', this.selectTag);
switch (this.selectTag) {
case 'isProcess': //处理状态
// console.log('处理状态',e);
this.form.isProcess = e[0].value;
break;
case 'processDeviceList': //处理设备
this.form.processDevice = e[0].value;
this.form.damageType = '';
this.form.processType = '';
// this.getDamageType();
break;
case 'damageTypeList': //损坏类型
this.form.damageType = e[0].value;
this.form.processType = '';
// this.getProcessType();
break;
case 'processTypeList': //处理方式
this.form.processType = e[0].value;
break;
default:
// console.log('3', e);
}
},
submit(){
// console.log('this.form',this.form);
let that = this;
this.$refs.uForm.validate(valid => {
if (valid) {
console.log('验证通过');
// delete this.dealForm.selectedUserList;
let files = [];
// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
files = this.$refs.uploadRef.lists.filter(val => {
return val.progress == 100;
})
console.log('files',files);
// 如果您不需要进行太多的处理，直接如下即可
// files = this.$refs.uUpload.lists;
files.forEach(function(item){
console.log('item',item);
if(item?.response?.data){that.form.imgList.push(item.response.data.url)}
else if(item.url){that.form.imgList.push(item.url)}
});
if(this.reportId){
this.editReport();
}else{
this.addReport();
}
} else {
console.log('验证失败');
}
});
},
addReport(){
let that = this;
this.$u.api.deviceexcptionprocess(this.form).then(res=>{
console.log('res',res);
// this.form = {};
uni.showToast({
icon:'none',
title:res.msg,
duration:1500,
});
if(res.code==200){
setTimeout(()=>{
that.customBack()
},1500)
}
}).catch(err=>{
uni.showToast({
icon:'none',
title:err.msg
})
console.log('err',err);
})
},
editReport(){
let that = this;
this.$u.api.editDeviceexcptionprocess(this.form).then(res=>{
console.log('res',res);
// this.form = {};
uni.showToast({
icon:'none',
title:res.msg,
duration:1500,
});
if(res.code==200){
setTimeout(()=>{
that.customBack()
},1500)
}
}).catch(err=>{
uni.showToast({
icon:'none',
title:err.msg
})
console.log('err',err);
})
}
}
}
</script>
<style>
page{background-color: #F3F3F3;}
</style>
<style lang="scss" scoped>
@import '@/pages/report/report.scss';
.select-view{
box-sizing: border-box;
padding-right: 24rpx;
width: 100%;
text-align: right;
}
</style>