305 lines
7.6 KiB
Vue
305 lines
7.6 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 != 0) || (this.isManager&&this.detailStep == 0))&&this.detailStep!=3"
|
||
class="btn-group">
|
||
<button class="btn ghost"
|
||
@click="transfer(1)">{{this.isManager ? '指派':this.detailStep == 2 ? '完成':'开始'}}</button>
|
||
<button v-if="this.detailStep == 1" class="btn primary" @click="transfer(2)">转派</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: []
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.isManager = this.vuex_user.roles[0].roleId == 1
|
||
if (options.item) {
|
||
const item = JSON.parse(decodeURIComponent(options.item));
|
||
this.detail = item;
|
||
// 现在可以使用item对象了
|
||
// 进度映射
|
||
this.getStepInfo()
|
||
}
|
||
if ((this.isManager && this.detailStep == 0) || (!this.isManager && this.detailStep == 1)) {
|
||
this.getHandler()
|
||
}
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
uni.navigateBack();
|
||
},
|
||
async getHandler() {
|
||
let handlers = await this.$u.api.getHandler3({}, this.detail.type);
|
||
if (handlers.code === 200) {
|
||
this.users = [...this.users, ...handlers.data];
|
||
}
|
||
},
|
||
getStepInfo(){
|
||
if (this.detail.status == 0) {
|
||
this.detailStep = 0;
|
||
this.detailStatus = '创建工单';
|
||
} else if (this.detail.status == 4) {
|
||
this.detailStep = 3;
|
||
this.detailStatus = '已结束';
|
||
} else if (this.detail.status == 3) {
|
||
this.detailStep = 2;
|
||
this.detailStatus = '处理中';
|
||
} else {
|
||
this.detailStep = 1;
|
||
this.detailStatus = '已接单';
|
||
}
|
||
},
|
||
previewImage(urls, index) {
|
||
// 使用uView的图片预览组件
|
||
this.$u.previewImage({
|
||
urls: urls.filter(url => url.trim() !== ''),
|
||
current: index
|
||
});
|
||
},
|
||
async onConfirm(selected) {
|
||
let params = this.detail
|
||
params.handler = selected[0].value
|
||
params.status = 1
|
||
let res = await this.$u.api.updateOrder2(params);
|
||
if (res.code == '200') {
|
||
// 关闭页面前发送事件通知前页面刷新
|
||
uni.$emit('refreshData', '');
|
||
this.detail.handler = selected.value
|
||
this.detail.status = 1
|
||
this.getStepInfo()
|
||
}
|
||
},
|
||
async submit() {
|
||
let params = this.detail
|
||
if(this.detail.status == 1||this.detail.status == 2){
|
||
params.status = 3
|
||
}else {
|
||
params.status = 4
|
||
}
|
||
let res = await this.$u.api.updateOrder2(params);
|
||
if (res.code == '200') {
|
||
// 关闭页面前发送事件通知前页面刷新
|
||
uni.$emit('refreshData', '');
|
||
this.detail.status = params.status
|
||
console.log("t1", params.status)
|
||
this.getStepInfo()
|
||
}
|
||
},
|
||
transfer(type) {
|
||
if (this.isManager || type == 2) {
|
||
this.showSelect = true
|
||
} else {
|
||
this.submit()
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</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> |