<template> <div class="mod-config"> <el-descriptions title="工单详情" direction="vertical" :column="column" size="mini" border> <template slot="extra"> <el-button type="primary" size="small" @click="doOperate">审批</el-button> </template> <el-descriptions-item label="工单ID"> <el-tag size="small">{{ ticketsData.ticketsId }}</el-tag> </el-descriptions-item> <el-descriptions-item label="小车类型"> {{ ticketsData.carName }} </el-descriptions-item> <el-descriptions-item label="异常类型"> {{ ticketsData.errorType }} </el-descriptions-item> <el-descriptions-item label="合同编号">{{ ticketsData.contractNumber }}</el-descriptions-item> <el-descriptions-item label="客户">{{ ticketsData.clientName }}</el-descriptions-item> <el-descriptions-item label="故障描述">{{ ticketsData.description }}</el-descriptions-item> <el-descriptions-item label="部门对接人">{{ ticketsData.deptPeople }}</el-descriptions-item> <el-descriptions-item label="客户联系电话">{{ ticketsData.deptPhone }}</el-descriptions-item> <el-descriptions-item label="创建者">{{ ticketsData.createUserId }}</el-descriptions-item> <el-descriptions-item label="创建时间">{{ ticketsData.createTime }}</el-descriptions-item> <el-descriptions-item label="是否验收">{{ ['否', '是'][Number(ticketsData.isCheck)] }}</el-descriptions-item> <el-descriptions-item label="工单状态">{{ statusOpt | findByValue(ticketsData.status) }}</el-descriptions-item> <el-descriptions-item label="工单关闭时间">{{ ticketsData.updateTime }}</el-descriptions-item> </el-descriptions> </div> </template> <script> export default { data () { return { column: 0, ticketsData: {}, statusOpt: [{value: '0', label: '未开始'}, {value: '1', label: '已指派'}, {value: '2', label: '处理中'}, {value: '3', label: '已完成'}] } }, created () { if (this.isMobile() || window.innerWidth < 768) { this.column = 2 } else { this.column = 4 } this.getDataList() }, methods: { isMobile() { const userAgentInfo = navigator.userAgent; const mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod" ]; let isMobile = false; for (let i = 0; i < mobileAgents.length; i++) { if (userAgentInfo.indexOf(mobileAgents[i]) > -1) { isMobile = true; break; } } return isMobile; }, // 获取数据列表 getDataList () { this.$http({ url: this.$http.adornUrl(`/tickets/tickets/info/${this.$route.query.id}`), method: 'get', params: this.$http.adornParams({}) }).then(({data}) => { if (data && data.code === 0) { this.ticketsData = data.tickets } }) }, // 每页数 sizeChangeHandle (val) { this.pageSize = val this.pageIndex = 1 this.getDataList() }, // 当前页 currentChangeHandle (val) { this.pageIndex = val this.getDataList() }, doOperate () { this.$confirm(`确定进行审批操作?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$http({ url: this.$http.adornUrl('/flw/instance/completeFlow'), method: 'post', data: this.$http.adornData({ticketsId: this.ticketsData.ticketsId, processInstance: this.ticketsData.processInstance}) }).then(({data}) => { if (data && data.code === 0) { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.$router.push('/tickets-tickets') } }) } else { this.$message.error(data.msg) } }) }).catch(() => {}) } } } </script> <style scoped> .mod-config { padding: 30px 30px; } .el-pagination { margin-top: 15px; text-align: right; } </style>