<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
width="100%"
|
@confirm="confirm">
|
<div class="wt">
|
<div class="wt_head">
|
<div class="wt_head_title">
|
<div class="title">问题详情</div>
|
<el-tag style="margin-left: 10px;" v-if="info.dealStatus === 0">待处理</el-tag>
|
<el-tag style="margin-left: 10px;" v-if="info.dealStatus === 1">已转工单</el-tag>
|
<el-tag style="margin-left: 10px;" v-if="info.dealStatus === 2">已关闭</el-tag>
|
</div>
|
</div>
|
<div class="wt_content">
|
<div class="wt_content_row" style="width: 25%;">
|
位置：{{info.position || '-'}}
|
</div>
|
<div class="wt_content_row" style="width: 25%;">
|
上报人：{{info.name || '-'}}
|
</div>
|
<div class="wt_content_row" style="width: 50%;">
|
上报人电话：{{info.phone || '-'}}
|
</div>
|
<div class="wt_content_row" style="width: 100%; margin-top: 15px;">
|
上报时间：{{info.submitDate || '-'}}
|
</div>
|
<div class="wt_content_row" style="width: 100%; margin-top: 15px;">
|
问题描述：{{info.content || '-'}}
|
</div>
|
<div class="wt_content_row" style="width: 100%; margin-top: 15px; margin-bottom: 20px;">
|
<div class="wt_content_row_label">问题图片：</div>
|
<div class="wt_content_row_list" v-if="info.fileList && info.fileList.length >= 0">
|
<div class="wt_content_row_list_img" v-for="(item, index) in info.fileList" :key="index">
|
<el-image
|
style="width: 100px; height: 100px"
|
:src="item.fileurlFull"
|
:preview-src-list="info.fileList.map(item => item.fileurlFull)">
|
</el-image>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
|
<el-form-item label="处理方式" prop="dealStatus">
|
<el-radio-group v-model="form.dealStatus">
|
<el-radio :label="1">转工单</el-radio>
|
<el-radio :label="2">关闭问题</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<template v-if="form.dealStatus === 1">
|
<div style="width: 100%; display: flex; align-items: center;">
|
<el-form-item label="位置类型" prop="workOrderAreaType">
|
<el-select v-model="form.workOrderAreaType" @change="changeType" placeholder="请选择位置类型">
|
<el-option label="室内维修" :value="0"></el-option>
|
<el-option label="公共区域" :value="1"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="报修区域" prop="rooms">
|
<el-cascader
|
v-model="form.rooms"
|
:disabled="![0,1].includes(form.workOrderAreaType)"
|
ref="cascader"
|
@change="getHouseVal"
|
placeholder="请选择报修区域"
|
:options="form.workOrderAreaType === 0 ? houseList : houseList1"
|
:props="{
|
label: 'name',
|
value: 'id',
|
children: 'projectDataVOList'
|
}" />
|
</el-form-item>
|
</div>
|
<div style="width: 100%; display: flex; align-items: center;">
|
<el-form-item label="工单分类" prop="workOrderCateId">
|
<el-cascader v-model="form.workOrderCateId" @change="changeSel" placeholder="请选择分类" clearable :options="cateList"
|
:props="{
|
label: 'name',
|
value: 'id',
|
children: 'childCategoryList'
|
}"></el-cascader>
|
</el-form-item>
|
<el-form-item label="上门时间" prop="workOrderGetDate" v-if="form.workOrderAreaType === 0">
|
<el-date-picker
|
v-model="form.workOrderGetDate"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择上门时间">
|
</el-date-picker>
|
</el-form-item>
|
</div>
|
<el-form-item label="描述" prop="dealInfo">
|
<el-input
|
type="textarea"
|
:rows="5"
|
placeholder="请输入描述"
|
v-model="form.dealInfo">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="问题图片" prop="resource">
|
<el-upload
|
:action="base"
|
:file-list="form.workOrderFileList"
|
accept=".png,.jpg,.jpeg,.PNG,.JPG"
|
:on-success="getFile"
|
:data="{ folder: 'YW_PROBLEM' }"
|
list-type="picture-card">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</el-form-item>
|
</template>
|
<el-form-item label="关闭说明" prop="dealInfo" v-if="form.dealStatus === 2">
|
<el-input
|
type="textarea"
|
:rows="5"
|
maxlength="300"
|
placeholder="请输入关闭问题"
|
v-model="form.dealInfo">
|
</el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { fetchList as getCateList } from '@/api/business/category.js'
|
import { tree } from '@/api/project/ywProject'
|
import { editProblem } from '@/api/ywProblem'
|
export default {
|
name: "handleProblem",
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data() {
|
return {
|
info: {},
|
cateList: [],
|
base: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadBatch',
|
form: {
|
dealStatus: 1,
|
workOrderAreaType: '',
|
workOrderCateId: '',
|
workOrderGetDate: '',
|
dealInfo: '',
|
workOrderFileList: [],
|
rooms: [],
|
|
workOrderProjectId: '',
|
workOrderBuildId: '',
|
workOrderFloorId: '',
|
workOrderRoomId: ''
|
},
|
houseList: [],
|
houseList1: [],
|
rules: {
|
dealStatus: [
|
{ required: true, message: '请选择', trigger: 'blur' }
|
],
|
workOrderAreaType: [
|
{ required: true, message: '请选择', trigger: 'blur' }
|
],
|
workOrderCateId: [
|
{ required: true, message: '请选择', trigger: 'blur' }
|
],
|
dealInfo: [
|
{ required: true, message: '请输入', trigger: 'blur' }
|
],
|
rooms: [
|
{ required: true, message: '请选择', trigger: 'blur' }
|
]
|
}
|
}
|
},
|
methods: {
|
open (title, target) {
|
this.title = title
|
this.info = target
|
this.getCate()
|
this.getHouseTree()
|
this.visible = true
|
},
|
getHouseVal(e) {
|
if (this.form.workOrderAreaType === 0) {
|
this.form.workOrderProjectId = e[0]
|
this.form.workOrderBuildId = e[1]
|
this.form.workOrderFloorId = e[2]
|
this.form.workOrderRoomId = e[3]
|
} else {
|
this.form.workOrderProjectId = e[0]
|
this.form.workOrderBuildId = e[1]
|
this.form.workOrderFloorId = e[2]
|
}
|
},
|
changeType(e) {
|
this.form.rooms = []
|
this.form.workOrderProjectId = ''
|
this.form.workOrderBuildId = ''
|
this.form.workOrderFloorId = ''
|
this.form.workOrderRoomId = ''
|
},
|
getHouseTree() {
|
tree({}).then(res => {
|
let arr1 = JSON.parse(JSON.stringify(res))
|
let arr2 = JSON.parse(JSON.stringify(res))
|
this.addParamToArray(arr1)
|
this.addParamToArray1(arr2)
|
this.houseList = arr1
|
this.houseList1 = arr2
|
})
|
},
|
addParamToArray(arr) {
|
for (let i = 0; i < arr.length; i++) {
|
const currentItem = arr[i].projectDataVOList
|
if (currentItem && currentItem.length >= 0) {
|
currentItem.forEach(item => {
|
if (item.lv === 3) {
|
delete item.projectDataVOList
|
}
|
})
|
}
|
if (currentItem && currentItem.length > 0) {
|
this.addParamToArray(currentItem)
|
}
|
}
|
},
|
addParamToArray1(arr) {
|
for (let i = 0; i < arr.length; i++) {
|
const currentItem = arr[i].projectDataVOList
|
if (currentItem && currentItem.length >= 0) {
|
currentItem.forEach(item => {
|
if (item.lv === 2) {
|
delete item.projectDataVOList
|
}
|
})
|
}
|
if (currentItem && currentItem.length > 0) {
|
this.addParamToArray1(currentItem)
|
}
|
}
|
},
|
getFile(e) {
|
console.log(e)
|
this.form.workOrderFileList.push({ ...e })
|
},
|
changeSel(e) {
|
if (e && e.length == 2) {
|
this.$set(this.form, 'workOrderCateId', e[1])
|
} else {
|
this.$set(this.form, 'workOrderCateId', '')
|
}
|
},
|
getCate() {
|
getCateList({
|
model: { type: 3 },
|
capacity: 1000,
|
page: 1,
|
}).then(res => {
|
this.cateList = res.records || []
|
})
|
},
|
confirm() {
|
this.$refs.form.validate((valid) => {
|
if (!valid) {
|
return
|
}
|
this.isWorking = true
|
editProblem({
|
...this.form,
|
id: this.info.id
|
})
|
.then(() => {
|
this.visible = false
|
this.$tip.apiSuccess('操作成功')
|
this.$emit('success')
|
})
|
.finally(() => {
|
this.isWorking = false
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/style/variables.scss';
|
.wt {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.wt_content {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
|
.wt_content_row {
|
font-size: 14px;
|
color: rgb(51, 51, 51);
|
display: flex;
|
align-items: self-start;
|
|
.wt_content_row_label {
|
flex-shrink: 0;
|
font-size: 14px;
|
color: rgb(51, 51, 51);
|
}
|
|
.wt_content_row_list {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
|
.wt_content_row_list_img {
|
width: 106px;
|
height: 93px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow-x: hidden;
|
margin-right: 15px;
|
|
&:last-child {
|
margin: 0 !important;
|
}
|
|
img {
|
width: 100%;
|
}
|
}
|
}
|
}
|
}
|
|
.wt_head {
|
width: 100%;
|
padding: 20px 0;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.wt_head_title {
|
display: flex;
|
align-items: center;
|
font-size: 16px;
|
color: black;
|
margin-right: 10px;
|
|
.title {
|
font-weight: 500;
|
font-size: 18px;
|
color: $primary-color;
|
display: flex;
|
align-items: center;
|
}
|
}
|
}
|
}
|
</style>
|
