SmartParks_uniapp/pages/sys/workbench/order/orderDetail.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>