286 lines
6.8 KiB
Vue
286 lines
6.8 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<view class="top-line" />
|
||
<!-- 工单状态进度 -->
|
||
<view class="repair-detail-progress-box">
|
||
<view class="repair-detail-progress">
|
||
<view v-for="(step, idx) in progressSteps" :key="idx" class="repair-detail-step">
|
||
<view
|
||
:class="['repair-detail-dot', detailStep >= idx ? 'active' : '', (detailStep === idx && detailStatus !== '已结束') ? 'current' : '']">
|
||
</view>
|
||
<view v-if="idx < progressSteps.length - 1"
|
||
:class="['repair-detail-line', detailStep > idx ? 'active' : '']"></view>
|
||
</view>
|
||
</view>
|
||
<view class="repair-detail-progress-labels">
|
||
<view v-for="(step, idx) in progressSteps" :key="idx" class="repair-detail-label">{{ step }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 工单详情 -->
|
||
<view class="detail-list">
|
||
<view class="detail-value"><text class="detail-key">工单编号：</text>{{ detail.orderNo }}</view>
|
||
<view class="detail-value"><text class="detail-key">工单名称：</text>{{ detail.orderName }}</view>
|
||
<view class="detail-value"><text class="detail-key">工单类型：</text>{{ detail.typeName }}</view>
|
||
<view class="detail-value"><text class="detail-key">处理地点：</text>{{ detail.location }}</view>
|
||
<view class="detail-value"><text class="detail-key">创建时间：</text>{{ detail.createTime }}</view>
|
||
<view class="detail-value"><text class="detail-key">发起单位/人：</text>{{ detail.initiatorPeople }}</view>
|
||
<view class="detail-value remark"><text>备注：</text>{{ detail.remark }}</view>
|
||
<view class="detail-value"><text class="detail-key">工单图片：</text></view>
|
||
<view class="image-list" v-if="detail.orderImgUrl">
|
||
<u-image v-for="(imgUrl, index) in detail.orderImgUrl.split(',')" :key="index" :src="imgUrl"
|
||
width="200rpx" height="200rpx" border-radius="10rpx"
|
||
@click="previewImage(detail.orderImgUrl.split(','), index)"
|
||
style="margin-right: 20rpx; margin-bottom: 20rpx;"></u-image>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<!-- 底部操作按钮 -->
|
||
<view v-if="(!this.isManager&&this.detailStep == 2) || this.detailStep == 0" class="btn-group">
|
||
<button class="btn ghost"
|
||
@click="transfer">{{this.isManager ? '指派':this.detailStep == 0 ? '拒绝':'转派'}}</button>
|
||
<button v-if="!this.isManager" class="btn primary"
|
||
@click="complete">{{this.detailStep == 0 ? '接单':'完成'}}</button>
|
||
</view>
|
||
|
||
<SelectUser :visible.sync="showSelect" :list="users" :multiple="false" @confirm="onConfirm" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import SelectUser from '@/components/SelectUser.vue'
|
||
export default {
|
||
components: {
|
||
SelectUser
|
||
},
|
||
data() {
|
||
return {
|
||
detailStep: 0,
|
||
detailStatus: '',
|
||
progressSteps: ['创建工单', '已接单', '处理中', '已结束'],
|
||
currentStatus: 2, // 0: 待分配，1: 已接单，2: 处理中，3: 已完成
|
||
detail: {},
|
||
isManager: false,
|
||
showSelect: false,
|
||
users: [{
|
||
id: '1',
|
||
name: '秦玉兰',
|
||
department: '物业修维部'
|
||
},
|
||
{
|
||
id: '2',
|
||
name: '秦桂花',
|
||
department: '物业修维部'
|
||
},
|
||
{
|
||
id: '3',
|
||
name: '李小明',
|
||
department: '物业修维部'
|
||
}
|
||
]
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.isManager = this.vuex_user.roles[0].roleId == 1
|
||
if (options.item) {
|
||
const item = JSON.parse(decodeURIComponent(options.item));
|
||
this.detail = item;
|
||
this.detail.orderImgUrl =
|
||
"https://picsum.photos/80/80?random=3,https://picsum.photos/80/80?random=3,https://picsum.photos/80/80?random=3";
|
||
console.log("t1", this.detail)
|
||
// 现在可以使用item对象了
|
||
// 进度映射
|
||
if (item.status == 0) {
|
||
this.detailStep = 0;
|
||
this.detailStatus = '创建工单';
|
||
} else if (item.status == 4) {
|
||
this.detailStep = 3;
|
||
this.detailStatus = '已结束';
|
||
} else if (item.status == 3) {
|
||
this.detailStep = 2;
|
||
this.detailStatus = '处理中';
|
||
} else {
|
||
this.detailStep = 1;
|
||
this.detailStatus = '已接单';
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
uni.navigateBack();
|
||
},
|
||
previewImage(urls, index) {
|
||
// 使用uView的图片预览组件
|
||
this.$u.previewImage({
|
||
urls: urls.filter(url => url.trim() !== ''),
|
||
current: index
|
||
});
|
||
},
|
||
onConfirm(selected) {
|
||
},
|
||
transfer() {
|
||
this.showSelect = true
|
||
},
|
||
complete() {
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
icon: 'success'
|
||
});
|
||
},
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page-container {
|
||
background: #fff;
|
||
}
|
||
|
||
.top-line {
|
||
width: 100vw;
|
||
height: 3rpx;
|
||
background: #ECECEC;
|
||
}
|
||
|
||
.repair-detail-progress-box {
|
||
height: 107rpx;
|
||
margin-bottom: 41rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.repair-detail-progress {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 5rpx;
|
||
margin-left: 85rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.repair-detail-step {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
|
||
.repair-detail-dot {
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
border-radius: 50%;
|
||
background: #BDBDBD;
|
||
border: 2rpx solid #BDBDBD;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.repair-detail-dot.active {
|
||
background: #2186FF;
|
||
border-color: #2186FF;
|
||
}
|
||
|
||
.repair-detail-dot.current {
|
||
background: #EF8D00;
|
||
border-color: #EF8D00;
|
||
}
|
||
|
||
.repair-detail-line {
|
||
flex: 1;
|
||
height: 4rpx;
|
||
background: #BDBDBD;
|
||
margin: 0 2rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.repair-detail-line.active {
|
||
background: #2186FF;
|
||
}
|
||
|
||
.repair-detail-progress-labels {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-left: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.repair-detail-label {
|
||
font-size: 22rpx;
|
||
color: #888;
|
||
text-align: center;
|
||
flex: 1;
|
||
position: relative;
|
||
top: 8rpx;
|
||
}
|
||
|
||
.detail-list {
|
||
font-size: 28rpx;
|
||
line-height: 2em;
|
||
margin-left: 40rpx;
|
||
}
|
||
|
||
.detail-key {
|
||
color: #595858;
|
||
}
|
||
|
||
.detail-value {
|
||
margin-bottom: 30rpx;
|
||
color: ##2F2F2F;
|
||
}
|
||
|
||
.remark {
|
||
white-space: pre-line;
|
||
}
|
||
|
||
.link {
|
||
color: #007CFF;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.image-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.image-item {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 10rpx;
|
||
margin-right: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.btn-group {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-top: 60rpx;
|
||
}
|
||
|
||
.btn {
|
||
width: 276rpx;
|
||
height: 88rpx;
|
||
padding: 20rpx;
|
||
font-size: 30rpx;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.primary {
|
||
background-color: #1890ff;
|
||
color: #fff;
|
||
}
|
||
|
||
.ghost {
|
||
background-color: #fff;
|
||
color: #1890ff;
|
||
border: 2rpx solid #1890ff;
|
||
}
|
||
</style> |