mirror of
https://gitee.com/elegant_wings/dbd-meeting-html.git
synced 2025-06-21 22:59:37 +08:00
361 lines
11 KiB
Vue
361 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 维修进度 -->
|
||
<a-card :bordered="false" title="维修进度">
|
||
<a-steps :current="mdl.status" progressDot>
|
||
<a-step>
|
||
<template v-slot:title>
|
||
<span>待分配</span>
|
||
</template>
|
||
<template v-slot:description v-if="mdl.status >= 1">
|
||
<div class="antd-pro-pages-profile-advanced-style-stepDescription">
|
||
{{ mdl.createBy }}
|
||
<div>{{ mdl.createTime }}</div>
|
||
</div>
|
||
</template>
|
||
</a-step>
|
||
<a-step>
|
||
<template v-slot:title>
|
||
<span>待处理</span>
|
||
</template>
|
||
<template v-slot:description v-if="mdl.status >= 5">
|
||
<div class="antd-pro-pages-profile-advanced-style-stepDescription">
|
||
{{ mdl.updateBy }}
|
||
<div>{{ mdl.updateTime }}</div>
|
||
</div>
|
||
</template>
|
||
</a-step>
|
||
<a-step>
|
||
<template v-slot:title>
|
||
<span>处理中</span>
|
||
</template>
|
||
<template v-slot:description v-if="mdl.status >= 7">
|
||
<div class="antd-pro-pages-profile-advanced-style-stepDescription">
|
||
{{ mdl.updateBy }}
|
||
<div>{{ mdl.updateTime }}</div>
|
||
</div>
|
||
</template>
|
||
</a-step>
|
||
<a-step>
|
||
<template v-slot:title>
|
||
<span>已完成</span>
|
||
</template>
|
||
<template v-slot:description v-if="mdl.status >= 9">
|
||
<div class="antd-pro-pages-profile-advanced-style-stepDescription">
|
||
{{ mdl.updateBy }}
|
||
<div>{{ mdl.updateTime }}</div>
|
||
</div>
|
||
</template>
|
||
</a-step>
|
||
<a-step>
|
||
<template v-slot:title>
|
||
<span>已废弃</span>
|
||
</template>
|
||
<template v-slot:description v-if="mdl.status == 11">
|
||
<div class="antd-pro-pages-profile-advanced-style-stepDescription">
|
||
{{ mdl.updateBy }}
|
||
<div>{{ mdl.updateTime }}</div>
|
||
</div>
|
||
</template>
|
||
</a-step>
|
||
<a-step>
|
||
<template v-slot:title>
|
||
<span>已评价</span>
|
||
</template>
|
||
<template v-slot:description v-if="mdl.status == 13">
|
||
<div class="antd-pro-pages-profile-advanced-style-stepDescription">
|
||
{{ mdl.updateBy }}
|
||
<div>{{ mdl.updateTime }}</div>
|
||
</div>
|
||
</template>
|
||
</a-step>
|
||
</a-steps>
|
||
</a-card>
|
||
<!-- 维修信息 -->
|
||
<a-card style="margin-top: 10px" :bordered="false" title="报修信息">
|
||
<a-descriptions>
|
||
<a-descriptions-item label="维修单号">{{ mdl.sn }}</a-descriptions-item>
|
||
<a-descriptions-item label="工单名称">{{ mdl.repairName }}</a-descriptions-item>
|
||
<a-descriptions-item label="设备类型">{{ mdl.typeName }}</a-descriptions-item>
|
||
<a-descriptions-item label="设备名称">{{ mdl.deviceName }}</a-descriptions-item>
|
||
<a-descriptions-item label="发起人">{{ mdl.name }}</a-descriptions-item>
|
||
<a-descriptions-item label="电话">{{ mdl.phone }}</a-descriptions-item>
|
||
<a-descriptions-item label="故障等级">{{ mdl.repairLevel }}</a-descriptions-item>
|
||
<a-descriptions-item label="故障类型">{{ mdl.failureTypeName }}</a-descriptions-item>
|
||
<a-descriptions-item label="故障等级">{{ mdl.repairLevel }}</a-descriptions-item>
|
||
<a-descriptions-item label="故障地点">{{ mdl.repairLevel }}</a-descriptions-item>
|
||
<a-descriptions-item label="门牌号">{{ mdl.repairLevel }}</a-descriptions-item>
|
||
<a-descriptions-item label="派单员">{{ mdl.repairLevel }}</a-descriptions-item>
|
||
<a-descriptions-item label="维修人">{{ mdl.repairUserId }}</a-descriptions-item>
|
||
<a-descriptions-item label="故障时间">{{ mdl.repairTime }}</a-descriptions-item>
|
||
<a-descriptions-item label="报修时间">{{ mdl.createTime }}</a-descriptions-item>
|
||
<a-descriptions-item label="状态">{{ mdl.statusName }}</a-descriptions-item>
|
||
<a-descriptions-item label="完成时间">{{ mdl.endDate }}</a-descriptions-item>
|
||
</a-descriptions>
|
||
</a-card>
|
||
<a-card style="margin-top: 10px" :bordered="false" title="维修信息">
|
||
<div style="display: flex;">
|
||
<span style="margin:40px">
|
||
报修图片
|
||
</span>
|
||
<div style="margin-bottom: 50px; margin-left: 30px" class="clearfix">
|
||
<div class="fileList">
|
||
<video class="file video" :src="item.url" v-for="item in files.voice"
|
||
controls/>
|
||
<img class="file image" :src="item.url" v-for="item in files.repair"
|
||
v-if="item.fileType== 'image'" />
|
||
<video class="file video" :src="item.url" v-for="item in files.repair"
|
||
v-if="item.fileType== 'video'" controls/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<a-descriptions layout="vertical" bordered>
|
||
<a-descriptions-item label="解决方案">
|
||
{{ mdl.solution }}
|
||
</a-descriptions-item>
|
||
</a-descriptions>
|
||
<a-descriptions layout="vertical" bordered>
|
||
<a-descriptions-item label="故障原因">
|
||
{{ mdl.cause }}
|
||
</a-descriptions-item>
|
||
</a-descriptions>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
<a-card style="margin-top: 10px" :bordered="false" title="评价">
|
||
<a-descriptions>
|
||
<a-descriptions-item label="维修速度">
|
||
<a-rate v-model="mdl.evalService" disabled />
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="服务评价">
|
||
<a-rate v-model="mdl.evalService" disabled />
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="效果评价">
|
||
<a-rate v-model="mdl.evalService" disabled />
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="意见建议">
|
||
{{ mdl.remark }}
|
||
</a-descriptions-item>
|
||
</a-descriptions>
|
||
</a-card>
|
||
|
||
<!-- 操作 -->
|
||
<a-card style="margin-top: 10px" :bordered="false" title="维修日志">
|
||
<a-table rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="false">
|
||
<span slot="type" slot-scope="text">
|
||
{{ text | typeFilter }}
|
||
</span>
|
||
</a-table>
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getRepair } from '@/api/admin/repair'
|
||
|
||
export default {
|
||
name: 'BaseForm',
|
||
data () {
|
||
return {
|
||
labelCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 6 }
|
||
},
|
||
wrapperCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 16 }
|
||
},
|
||
// 表头
|
||
columns: [
|
||
{
|
||
title: '操作类型',
|
||
dataIndex: 'to',
|
||
scopedSlots: { customRender: 'type' }
|
||
},
|
||
{
|
||
title: '操作人',
|
||
dataIndex: 'sendUserName'
|
||
},
|
||
{
|
||
title: '操作详情',
|
||
dataIndex: 'content'
|
||
},
|
||
{
|
||
title: '操作时间',
|
||
dataIndex: 'createTime'
|
||
}
|
||
],
|
||
dataSource: [],
|
||
mdl: {
|
||
customerVO: { name: '' },
|
||
parkVO: { name: '' },
|
||
// 工人信息
|
||
userVO: { userName: '', mobile: '' },
|
||
// 工单评价
|
||
repairScore: 0,
|
||
// 工人评价
|
||
workerScore: 0
|
||
},
|
||
// form
|
||
form: this.$form.createForm(this),
|
||
files: {}
|
||
}
|
||
},
|
||
filters: {
|
||
typeFilter (type) {
|
||
const typeMap = {
|
||
'1': '待分配',
|
||
'3': '重新派单',
|
||
'5': '已派单',
|
||
'7': '处理中',
|
||
'9': '已完成,待评价',
|
||
'11': '已关闭',
|
||
'13': '已评价'
|
||
}
|
||
return typeMap[type]
|
||
}
|
||
},
|
||
created () {
|
||
this.handleInit()
|
||
},
|
||
methods: {
|
||
typeFilterRQ (type) {
|
||
const typeMap = {
|
||
'1': '待分配',
|
||
'3': '重新派单',
|
||
'5': '已派单',
|
||
'7': '处理中',
|
||
'9': '已完成,待评价',
|
||
'11': '已关闭',
|
||
'13': '已评价'
|
||
}
|
||
return typeMap[type]
|
||
},
|
||
handleInit () {
|
||
const { repairId } = this.$route.query
|
||
if (repairId) {
|
||
const data = {
|
||
'id': repairId
|
||
}
|
||
getRepair(data).then(record => {
|
||
this.mdl = Object.assign(record.repair)
|
||
this.mdl.statusName = this.typeFilterRQ(this.mdl.status)
|
||
// 维修记录
|
||
if (record.log.length > 0) {
|
||
this.dataSource = record.log
|
||
}
|
||
record.files.repair = record.files.repair.map((item) => {
|
||
item.url = process.env.VUE_APP_MODEL_BASE_URL + item.url
|
||
item.fileType = this.checkMediaType(item.url)
|
||
return item
|
||
})
|
||
record.files.voice = record.files.voice.map((item) => {
|
||
item.url = process.env.VUE_APP_MODEL_BASE_URL + item.url
|
||
return item
|
||
})
|
||
this.files = record.files
|
||
console.log(this.files.voice)
|
||
})
|
||
}
|
||
},
|
||
checkMediaType (url) {
|
||
// 创建URL对象
|
||
let link = new URL(url)
|
||
|
||
// 获取路径部分（去除参数）
|
||
let path = link.pathname
|
||
|
||
// 获取路径的最后一个点之后的内容作为文件扩展名
|
||
let extension = path.split('.').pop().toLowerCase()
|
||
|
||
// 声明支持的图片和视频文件扩展名
|
||
let imageExtensions = ['jpg', 'jpeg', 'gif', 'png']
|
||
let videoExtensions = ['mp4', 'wmv', 'avi', 'mov']
|
||
|
||
// 判断文件扩展名是否在图片扩展名数组中
|
||
if (imageExtensions.includes(extension)) {
|
||
return 'image'
|
||
}
|
||
|
||
// 判断文件扩展名是否在视频扩展名数组中
|
||
if (videoExtensions.includes(extension)) {
|
||
return 'video'
|
||
}
|
||
|
||
// 扩展名不在图片或视频数组中，返回null表示无法确定媒体类型
|
||
return null
|
||
},
|
||
|
||
handleCancel () {
|
||
this.previewVisible = false
|
||
},
|
||
async handlePreview (file) {
|
||
console.log(this.fileList)
|
||
this.previewImage = file.url || file.preview
|
||
},
|
||
handleChange ({ fileList }) {
|
||
this.fileList = fileList
|
||
},
|
||
// handler
|
||
handleSubmit (e) {
|
||
e.preventDefault()
|
||
this.form.validateFields((err, values) => {
|
||
if (!err) {
|
||
// eslint-disable-next-line no-console
|
||
console.log('Received values of form: ', values)
|
||
}
|
||
})
|
||
},
|
||
rollback () {
|
||
this.$router.push('/repair/repairList')
|
||
}
|
||
}
|
||
}
|
||
|
||
function getBase64 (file) {
|
||
return new Promise((resolve, reject) => {
|
||
const reader = new FileReader()
|
||
reader.readAsDataURL(file)
|
||
reader.onload = () => resolve(reader.result)
|
||
reader.onerror = error => reject(error)
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped >
|
||
/* you can make up upload button and sample style by using stylesheets */
|
||
.ant-upload-select-picture-card i {
|
||
font-size: 32px;
|
||
color: #999;
|
||
}
|
||
|
||
.ant-upload-select-picture-card .ant-upload-text {
|
||
margin-top: 8px;
|
||
color: #666;
|
||
}
|
||
|
||
.fileList{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-content: flex-start;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.fileList .file{
|
||
margin-right: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.fileList .image{
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
|
||
.fileList .video{
|
||
width: 160px;
|
||
height: 100px;
|
||
}
|
||
</style>
|