<route lang="json5" type="page">
|
{
|
layout: 'default',
|
needLogin: true,
|
style: {
|
navigationBarTitleText: '报修详情',
|
navigationStyle: 'custom'
|
},
|
}
|
</route>
|
<template>
|
<view class="bg-base container" safeAreaInsetTopBottom>
|
<wd-navbar
|
title="报修详情"
|
left-arrow
|
@click-left="goBack"
|
custom-style="background: #4D80F0;"
|
safeAreaInsetTop
|
></wd-navbar>
|
|
<view class="content">
|
<!-- 状态展示 -->
|
<view class="status-card">
|
<view class="status-header">
|
<text class="status-code">{{ repairReq.code }}</text>
|
<view class="status-tag">
|
<wd-button size="small" v-if="repairReq.status === '0'" type="info">待接单</wd-button>
|
<wd-button size="small" v-else-if="repairReq.status === '1'" type="warning">已接单</wd-button>
|
<wd-button size="small" v-else-if="repairReq.status === '2'" type="primary">维修中</wd-button>
|
<wd-button size="small" v-else-if="repairReq.status === '3'" type="success">已完成</wd-button>
|
</view>
|
</view>
|
</view>
|
|
<!-- 设备信息 -->
|
<wd-cell-group
|
v-if="repairReq.reqType === '1'"
|
custom-class="mt-2"
|
title="设备信息"
|
use-slot
|
border
|
>
|
<wd-cell title="设备名称" title-width="200rpx">
|
<text>{{ repairReq.equName }}</text>
|
</wd-cell>
|
<wd-cell title="资产编号" title-width="200rpx">
|
<text>{{ repairReq.assetNo }}</text>
|
</wd-cell>
|
</wd-cell-group>
|
|
<!-- 工具信息 -->
|
<wd-cell-group
|
v-if="repairReq.reqType === '2'"
|
custom-class="mt-2"
|
title="工具信息"
|
use-slot
|
border
|
>
|
<wd-cell title="工具名称" title-width="200rpx">
|
<text>{{ repairReq.fixtureName }}</text>
|
</wd-cell>
|
</wd-cell-group>
|
|
<!-- 报修信息 -->
|
<wd-cell-group custom-class="mt-2" title="报修信息" use-slot border>
|
<wd-cell title="报修类型" title-width="200rpx">
|
<text v-if="repairReq.reqType === '1'">设备类型</text>
|
<text v-else-if="repairReq.reqType === '2'">工具类型</text>
|
<text v-else-if="repairReq.reqType === '3'">其他类型</text>
|
</wd-cell>
|
<wd-cell title="发生时间" title-width="200rpx">
|
<text>{{ repairReq.occTime }}</text>
|
</wd-cell>
|
<wd-cell title="报修时间" title-width="200rpx">
|
<text>{{ repairReq.reqTime }}</text>
|
</wd-cell>
|
<wd-cell title="报修人" title-width="200rpx">
|
<text>{{ repairReq.reqUserName }}</text>
|
</wd-cell>
|
<wd-cell title="紧急程度" title-width="200rpx">
|
<wd-tag type="danger" v-if="repairReq.urgencyLevel === '1'">紧急</wd-tag>
|
<wd-tag type="warning" v-else-if="repairReq.urgencyLevel === '2'">一般</wd-tag>
|
<wd-tag type="success" v-else-if="repairReq.urgencyLevel === '3'">普通</wd-tag>
|
</wd-cell>
|
</wd-cell-group>
|
|
<!-- 故障描述 -->
|
<wd-cell-group custom-class="mt-2" title="故障描述" use-slot border>
|
<view class="description-box">
|
<text>{{ repairReq.reqDesc }}</text>
|
</view>
|
</wd-cell-group>
|
|
<!-- 故障图片 -->
|
<wd-cell-group v-if="repairReq.faultPicture" custom-class="mt-2" title="故障图片" use-slot border>
|
<view class="image-box">
|
<image
|
class="fault-image"
|
:src="repairReq.faultPicture"
|
mode="aspectFit"
|
@click="previewImage"
|
/>
|
</view>
|
</wd-cell-group>
|
</view>
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, onMounted } from 'vue'
|
import { useToast } from 'wot-design-uni'
|
import { getRepairReqList } from '@/service/repair'
|
import type { RepairReqVO } from '@/service/repair.d'
|
|
const toast = useToast()
|
|
// 报修请求数据
|
const repairReq = reactive<RepairReqVO>({
|
id: '',
|
code: '',
|
status: '',
|
occTime: '',
|
reqTime: '',
|
reqDept: 0,
|
reqUser: 0,
|
reqDesc: '',
|
urgencyLevel: '',
|
faultPicture: '',
|
reqType: '',
|
equId: '',
|
repairId: '',
|
repairDept: 0,
|
repairUser: 0,
|
faultType: '',
|
remark: '',
|
reqUserName: '',
|
equName: '',
|
assetNo: '',
|
fixtureName: ''
|
})
|
|
// 获取报修请求详情
|
function getRepairReqDetail(id: string | number) {
|
getRepairReqList({ id })
|
.then((res: any) => {
|
if (res && res.rows && res.rows.length > 0) {
|
Object.assign(repairReq, res.rows[0])
|
} else {
|
toast.error('获取报修详情失败')
|
}
|
})
|
.catch((err) => {
|
console.error('获取报修详情失败', err)
|
toast.error('获取报修详情失败')
|
})
|
}
|
|
// 预览图片
|
function previewImage() {
|
if (repairReq.faultPicture) {
|
uni.previewImage({
|
urls: [repairReq.faultPicture],
|
current: repairReq.faultPicture
|
})
|
}
|
}
|
|
// 返回上一页
|
function goBack() {
|
uni.navigateBack()
|
}
|
|
// 页面加载时获取报修详情
|
onLoad((options) => {
|
if (options && options.id) {
|
getRepairReqDetail(options.id)
|
} else {
|
toast.error('参数错误')
|
setTimeout(() => {
|
goBack()
|
}, 1500)
|
}
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
min-height: 100vh;
|
background-color: #f5f5f5;
|
}
|
|
.content {
|
padding: 20rpx;
|
}
|
|
.status-card {
|
background-color: #ffffff;
|
border-radius: 12rpx;
|
padding: 24rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
}
|
|
.status-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.status-code {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333333;
|
}
|
|
.description-box {
|
padding: 24rpx;
|
background-color: #f9f9f9;
|
border-radius: 8rpx;
|
margin: 16rpx;
|
color: #666666;
|
line-height: 1.6;
|
}
|
|
.image-box {
|
padding: 24rpx;
|
display: flex;
|
justify-content: center;
|
}
|
|
.fault-image {
|
width: 80%;
|
height: 400rpx;
|
border-radius: 8rpx;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
}
|
|
:deep(.wd-cell-group__title) {
|
font-size: 28rpx;
|
font-weight: bold;
|
color: #4D80F0;
|
}
|
|
:deep(.wd-cell__title) {
|
color: #666666;
|
}
|
|
:deep(.wd-cell__value) {
|
color: #333333;
|
font-weight: 500;
|
}
|
</style>
|
