<template>
|
<GlobalWindow width="820px" title="工单详情" :visible.sync="visible" :confirm-working="isWorking" @close="close"
|
@confirm="confirm">
|
<div class="main">
|
<div class="title">
|
<span>工单详情</span>
|
<div>
|
<div class="status primaryColor" v-if="info.dealStatus == 0 || info.dealStatus == null">待指派</div>
|
<div class="status" v-if="info.dealStatus == 1">已指派</div>
|
<div class="status gray" v-if="info.dealStatus == 2">已处理</div>
|
</div>
|
</div>
|
<div class="list">
|
<div class="item">
|
<div class="la">位置类型</div>
|
<div class="val">{{ info.areaType == 0 ? '室内维修' : '公共维修' }}</div>
|
</div>
|
<div class="item">
|
<div class="la">对应位置</div>
|
<div class="val">{{ info.buildingName }} / {{ info.roomNum || info.floorName }}</div>
|
</div>
|
<div class="item">
|
<div class="la">工单类别</div>
|
<div class="val">{{ info.categoryName }}</div>
|
</div>
|
<div class="item">
|
<div class="la">上报人</div>
|
<div class="val">{{ info.creatorName }}</div>
|
</div>
|
<div class="item">
|
<div class="la">上报人电话</div>
|
<div class="val">{{ info.creatorPhone }}</div>
|
</div>
|
<div class="item">
|
<div class="la">上报时间</div>
|
<div class="val">{{ info.createDate }}</div>
|
</div>
|
<div class="item max">
|
<div class="la">上门时间</div>
|
<div class="val">{{ info.getDate }}</div>
|
</div>
|
<div class="item max">
|
<div class="la">问题描述</div>
|
<div class="val">{{ info.content }}</div>
|
</div>
|
<div class="item max">
|
<div class="la">问题图片</div>
|
<div class="value" v-if="info.fileList == null || !info.fileList.length">无</div>
|
<div class="value" v-if="info.fileList != null && info.fileList.length">
|
<div v-for="item in info.fileList" :key="item.id" style="display: inline;margin-right: 20px">
|
<video v-if="item.fileurlFull && item.fileurlFull.endsWith('.mp4')" ref="videoRef" controls preload="auto"
|
style="width: 80px;height: 80px;object-fit: contain;" :src="item.fileurlFull" />
|
<el-image v-else-if="item.fileurlFull" style="width:80px; height: 80px" :src="item.fileurlFull"
|
:preview-src-list="[item.fileurlFull]">
|
</el-image>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="title">工单处理</div>
|
<el-form :model="param" ref="form" :rules="rules">
|
<template v-if="info.dealStatus == 0 || info.dealStatus == null">
|
<el-form-item label="处理方式" prop="dealType">
|
<div>
|
<el-radio v-model="param.dealType" :label="0">指派</el-radio>
|
<el-radio v-model="param.dealType" :label="1">直接回复</el-radio>
|
</div>
|
</el-form-item>
|
<el-form-item v-if="param.dealType == 0" label="指派给" prop="dealUserId">
|
<el-select v-model="param.dealUserId" clearable filterable class="w400">
|
<el-option v-for="item in staffList" :label="item.realname" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="param.dealType == 1" label="回复内容" prop="dealInfo">
|
<el-input type="textarea" class="w400" :rows="4" v-model="param.dealInfo" placeholder="请填写说明"></el-input>
|
</el-form-item>
|
</template>
|
<template v-if="info.dealStatus == 1 && info.dealUserId === userInfo.id">
|
<el-form-item label="处理时间" prop="getDate">
|
<el-date-picker type="datetime" class="w400" v-model="param.getDate" format="yyyy-MM-dd HH:mm"
|
value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择"></el-date-picker>
|
</el-form-item>
|
<el-form-item label="回复内容" prop="dealInfo">
|
<el-input type="textarea" class="w400" :rows="4" v-model="param.dealInfo" placeholder="请填写说明"></el-input>
|
</el-form-item>
|
<el-form-item label="现场图片">
|
<div class="file_list">
|
<el-upload class="avatar-uploader" :data="uploadData" multiple :limit="6" :auto-upload="true" :action="uploadImgUrl"
|
:show-file-list="false" :on-success="uploadAvatarSuccess" :on-error="uploadError"
|
:before-upload="beforeUpload">
|
<div class="upload_wrap">
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
<div>图片/视频</div>
|
</div>
|
</el-upload>
|
<div v-for="(item, i) in dealFileList" :key="i" class="item">
|
<i @click="handleDelImg(i)" class="el-icon-error close"></i>
|
<el-image :src="item.fileurlFull" :preview-src-list="[item.fileurlFull]" v-if="item.type == 0"
|
class="img"></el-image>
|
<video :src="item.fileurlFull" controls v-if="item.type == 1" class="img"></video>
|
</div>
|
</div>
|
</el-form-item>
|
</template>
|
<template v-if="info.dealStatus == 2">
|
<div class="list">
|
<div class="item item2">
|
<div class="la">处理时间：</div>
|
<div class="val">{{ info.getDate }}</div>
|
</div>
|
<div class="item item2">
|
<div class="la">处理备注：</div>
|
<div class="val">{{ info.dealInfo }}</div>
|
</div>
|
<div class="item item2">
|
<div class="la">现场照片：</div>
|
<div class="value" v-if="info.dealFileList == null || !info.dealFileList.length">无</div>
|
<div class="value" v-if="info.dealFileList != null && info.dealFileList.length">
|
<div v-for="item in info.dealFileList" :key="item.id" style="display: inline;margin-right: 20px">
|
<video v-if="item.fileurlFull && item.fileurlFull.endsWith('.mp4')" ref="videoRef" controls
|
preload="auto" style="width: 80px;height: 80px;object-fit: contain;" :src="item.fileurlFull" />
|
<el-image v-else-if="item.fileurlFull" style="width:80px; height: 80px" :src="item.fileurlFull"
|
:preview-src-list="[item.fileurlFull]">
|
</el-image>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
</el-form>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import BaseOpera from '@/components/base/BaseOpera'
|
import { detailById, dispatchOrder, dealOrder } from '@/api/workorder/ywWorkorder'
|
import { getUserList } from '@/api/system/user'
|
import { Message, Loading } from 'element-ui'
|
export default {
|
components: {
|
GlobalWindow
|
},
|
extends: BaseOpera,
|
data() {
|
return {
|
id: '',
|
visible: false,
|
param: {
|
dealType: 0
|
},
|
info: {},
|
rules: {
|
dealType: [{ required: true, message: '请选择' }],
|
dealUserId: [{ required: true, message: '请选择' }],
|
},
|
staffList: [],
|
|
uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadBatch',
|
dealFileList: [],
|
uploadData: {
|
folder: 'HIDDEN_DANGER_FILE'
|
},
|
}
|
},
|
computed: {
|
userInfo() {
|
return this.$store.state.userInfo
|
}
|
},
|
created() {
|
this.getStaff()
|
},
|
methods: {
|
confirm() {
|
this.$refs['form'].validate((valid) => {
|
if (valid) {
|
const { param, id, dealFileList, info } = this
|
let fn = null
|
if(info.dealStatus == 0 || info.dealStatus == null){
|
fn = param.dealType == 0 ? dispatchOrder : dealOrder
|
}else{
|
fn = dealOrder
|
}
|
fn({
|
id,
|
...param,
|
dealFileList
|
}).then(res => {
|
Message.success('提交成功')
|
this.visible = false
|
this.$emit('success')
|
})
|
}
|
})
|
},
|
getDetail() {
|
const { id } = this
|
detailById(id).then(res => {
|
this.info = res
|
})
|
},
|
getStaff() {
|
getUserList({}).then(res => {
|
this.staffList = res
|
})
|
},
|
beforeUpload(file) {
|
if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'image/jpeg', 'image/jpg', 'image/png', 'image/gif'].indexOf(file.type) == -1) {
|
this.$message.error('请上传正确的视频/图片格式')
|
return false
|
}
|
if (this.dealFileList.length > 8) return Message.warning('现场图片不能超过9张')
|
this.loadingInstance = Loading.service({
|
lock: true,
|
text: 'Loading',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
})
|
},
|
uploadError() {
|
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
|
if (this.loadingInstance) {
|
this.loadingInstance.close()
|
}
|
})
|
},
|
uploadAvatarSuccess(file) {
|
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
|
if (this.loadingInstance) {
|
this.loadingInstance.close()
|
}
|
})
|
console.log('file', file)
|
const item = file.data[0]
|
if (['.mp4', '.avi', '.flv', '.wmv'].some(char => item.imgaddr.includes(char))) {
|
this.dealFileList.push({
|
type: 1,
|
fileurl: item.imgaddr,
|
fileurlFull: item.url
|
})
|
} else {
|
this.dealFileList.push({
|
type: 0,
|
fileurl: item.imgaddr,
|
fileurlFull: item.url
|
})
|
}
|
console.log('file', this.dealFileList)
|
// this.$set(this.param, 'faceImg', file.imgurl)
|
// this.$set(this.param, 'faceImgUrl', file.imgurlfull)
|
},
|
handleDelImg(i) {
|
this.dealFileList.splice(i, 1)
|
},
|
close() {
|
this.visible = false
|
this.$emit('close')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/style/variables.scss';
|
|
.main {
|
padding-top: 20px;
|
|
.title {
|
font-weight: 500;
|
font-size: 18px;
|
color: $primary-color;
|
margin-bottom: 10px;
|
display: flex;
|
align-items: center;
|
|
.status {
|
padding: 0 6px;
|
height: 22px;
|
line-height: 22px;
|
border-radius: 2px;
|
border: 1px solid #00BA92;
|
color: #00BA92;
|
font-weight: 400;
|
font-size: 12px;
|
margin-left: 10px;
|
}
|
|
.primaryColor {
|
border: 1px solid $primary-color;
|
}
|
|
.gray {
|
color: gray;
|
border: 1px solid gray;
|
}
|
}
|
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
/* background: #F7F7F7; */
|
border-radius: 2px;
|
padding: 15px 20px;
|
margin-bottom: 16px;
|
|
.item {
|
width: 33.3%;
|
margin-bottom: 12px;
|
|
.la {
|
color: #7f7f7f;
|
margin-top: 2px;
|
}
|
}
|
|
.item2 {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
}
|
|
.max {
|
width: 100%;
|
}
|
}
|
}
|
|
.file_list {
|
display: flex;
|
flex-wrap: wrap;
|
|
.avatar-uploader {
|
width: 92px;
|
height: 92px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 1px dashed #d9d9d9;
|
}
|
|
.item {
|
width: 92px;
|
max-height: 92px;
|
margin-left: 10px;
|
position: relative;
|
border: 1px dashed #d9d9d9;
|
border-radius: 4px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.close {
|
font-size: 20px;
|
position: absolute;
|
right: -10px;
|
top: -10px;
|
z-index: 111;
|
color: red;
|
cursor: pointer;
|
}
|
|
.img {
|
width: 92px;
|
max-height: 92px;
|
}
|
}
|
}
|
</style>
|
