TSYWXT-CLOUD-APP/pages/check-order/processcheckorderlistview.vue

<!--
 * @Title: 
 * @Description: 工单处理记录信息
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
	<view class="wrap">
		<uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" statusBar="false" left-icon="left" left-text="返回"
			@clickLeft="toBack">
			<view class="nav-title">
				<text>{{title}}</text>
			</view>
		</uni-nav-bar>
		<view class="container">
			<view v-if="permission.orgAdmin && orderClose==0" class="view-flex-inline-center">
				<view style="width: 90%;margin-top: 20px;margin-bottom: 20px;">
					<button type="warn" @click="toCancelOrder">取消工单</button>
				</view>
			</view>
			<view v-if="orderClose==1">
				<uni-card title="工单评分">
					<uni-rate :value="orderRate" color="#bbb" active-color="coral" />
				</uni-card>
			</view>
			<uni-list style="width: 100%;">
				<uni-list-item v-for="(item,index) in list" :key="item.id" direction="column">
					<template v-slot:body>
						<view class="point">
							<view class="dot">
								{{index+1}}
							</view>
							<view class="time-title">{{item.createTime}}【{{item.orderStatusName}}】</view>
						</view>
						<view class="time-info">
							<view class="time-line">
								<!-- 工单下发 -->
								<view v-if="item.orderStatusCode ==2" class="list-item-block">
									<view class="line" style="padding-left:12px">
										<view v-if="orderType==1" class="text" style="color: gray;width: 90%;">
											工单类型:<span style="margin-left: 5px;color: cornflowerblue;">维修工单</span>
										</view>
										<view v-else-if="orderType==2" class="text" style="color: gray;width: 90%;">
											工单类型:<span style="margin-left: 5px;color: cornflowerblue;">服务工单</span>
										</view>
										<view v-else></view>
									</view>
									<view class="line" style="padding-left:12px">
										<view class="text" style="color: gray;width: 90%;">
											工单创建人:<span
												style="margin-left: 5px;color: cornflowerblue;">{{item.orderProcessUserName}}</span>
										</view>
									</view>
									<uni-card title="问题描述">
										<view class="text" style="color: cornflowerblue;">{{item.processDesc}}
										</view>
									</uni-card>
									<uni-card title="照片">
										<view class="view-flex-rs-flex-wrap">
											<view v-for="(path, index) in item.failureProcessPhotoList" :key="index"
												class="view-flex-cc" style="width: 80px;">
												<view class="img-container">
													<view class="note-image-box">
														<view class="note-image-item">
															<view class="image-box">
																<image :src="toOss(path)" mode="widthFix"
																	@click="openPhoto(path)">
																</image>
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</uni-card>
									<uni-card title="视频">
										<view class="view-flex-inline">
											<image v-for="(path, index) in item.failureProcessVideoList" :key="index"
												mode="widthFix" style="width: 80px;" :src="videoImg"
												@click="openVideo(path)">
											</image>
										</view>
									</uni-card>
								</view>
								<!-- 		工单处理中 -->
								<view v-else-if="item.orderStatusCode ==3" class="list-item-block">
									<view class="line" style="padding-left:12px">
										<view class="text" style="width: 90%;color: gray;">
											工单处理人:<span
												style="margin-left: 5px;color: cornflowerblue;">{{item.orderProcessUserName}}</span>
										</view>
									</view>
									<!-- <view v-if="orderType==1" class="line"> -->
										<uni-card v-if="orderType==1" title="故障现象描述">
											<view class="text" style="color: cornflowerblue;">{{item.failureCheckDesc}}
											</view>
										</uni-card>
									<!-- </view> -->
									<!-- <view v-else-if="orderType==2" class="line"> -->
										<uni-card v-else-if="orderType==2" title="服务内容描述">
											<view class="text" style="color: cornflowerblue;">{{item.failureCheckDesc}}
											</view>
										</uni-card>
									<!-- </view> -->

								<!-- 	<view v-else></view> -->
									<uni-card title="解决措施说明">
										<view class="text" style="color: cornflowerblue;">{{item.processDesc}}
										</view>
									</uni-card>
									<uni-card v-if="orderType==1 && item.costsReport==2" title="费用说明">
										<view class="text" style="color: cornflowerblue;">{{item.costsReportDesc}}
										</view>
									</uni-card>
									<uni-card title="照片">
										<view class="view-flex-rs-flex-wrap">
											<view v-for="(path, index) in item.failureProcessPhotoList" :key="index"
												class="view-flex-cc" style="width: 80px;">
												<view class="img-container">
													<view class="note-image-box">
														<view class="note-image-item">
															<view class="image-box">
																<image :src="toOss(path)" mode="widthFix"
																	@click="openPhoto(path)">
																</image>
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
										<!-- 										<view class="view-flex-block-center">
											<image v-for="(path, index) in item.failureProcessPhotoList" :key="index"
												mode="widthFix" style="width: 80%;margin-top: 10px;" :src="toOss(path)">
											</image>
										</view> -->
									</uni-card>
								</view>
								<!-- 费用审批 -->
								<view v-else-if="item.orderStatusCode ==5" class="list-item-block">
									<view class="line" style="padding-left:12px">
										<view class="text" style="width: 90%;color: gray;">
											费用审批人:<span
												style="margin-left: 5px;color: cornflowerblue;">{{item.orderProcessUserName}}</span>
										</view>
									</view>
									<uni-card title="审批意见">
										<view class="text" style="color: cornflowerblue;">{{item.processDesc}}
										</view>
									</uni-card>
								</view>
								<!-- 关闭审批 -->
								<view v-else-if="item.orderStatusCode ==7" class="list-item-block">
									<view class="line" style="padding-left:12px">
										<view class="text" style="width: 90%;color: gray;">
											工单完结审批人:<span
												style="margin-left: 5px;color: cornflowerblue;">{{item.orderProcessUserName}}</span>
										</view>
									</view>
									<uni-card title="审批意见">
										<view class="text" style="color: cornflowerblue;">{{item.processDesc}}
										</view>
									</uni-card>
								</view>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import {
		role
	} from "@/api/role.js";
	import http from '@/http/api.js';
	import {
		oss,
		devUrl,
		prodUrl
	} from '@/common/setting';
	export default {
		components: {},
		data() {
			return {
				title: '工单处理记录详情',
				permission: {
					'admin': false,
					'orgAdmin': false,
					'companyAdmin': false,
					'companyServciePerson': false,
				},
				pageSize: 10,
				pageCurrent: 1,
				total: 0,
				list: [],
				query: {},
				orderId: '',
				orderType: 1,
				orderRate: 0,
				baseURL: '',
				baseOSS: '',
				videoImg: '/static/images/video.png',
				orderClose: 0,
			}
		},
		computed: {},
		onLoad(option) {
			this.permission.admin = false;
			this.permission.orgAdmin = false;
			this.permission.companyAdmin = false;
			this.permission.companyServciePerson = false;
			if (this.userInfo.role_name === role.admin) {
				this.permission.admin = true;
			} else if (this.userInfo.role_name === role.orgAdmin) {
				this.permission.orgAdmin = true;
			} else if (this.userInfo.role_name === role.companyAdmin) {
				this.permission.companyAdmin = true;
			} else if (this.userInfo.role_name === role.companyServciePerson) {
				this.permission.companyServciePerson = true;
				if (this.userInfo.post_id == '1706859505948098562') {
					this.postName = "engineer";
				} else if (this.userInfo.post_id == '1730535542909140993') {
					this.postName = "servicePerson";
				}
			}
			this.orderClose = option.orderClose;

			this.orderId = option.orderId;
			this.orderType = option.orderType;
			if (this.orderClose == 1) {
				this.orderRate = option.orderRate;
			}

			this.baseURL = process.env.NODE_ENV === 'development' ? devUrl : prodUrl;
			this.baseOSS = oss;
			this.query = {};
			this.query['orderId'] = this.orderId;
			this.pageCurrent = 1;
			this.getPage()
		},
		onShow() {},
		methods: {
			toOss(path) {
				return this.baseOSS + path;
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onBackPress() {
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
			},
			pageChange(e) {
				this.pageCurrent = e.current;
				this.getPage()
			},
			toCancelOrder() {
				uni.navigateTo({
					url: '/pages/check-order/ordercancel?id=' + this.orderId
				})
			},
			openPhoto(file) {
				let url = '/pages/check-order/photoView?url=' + file;
				uni.navigateTo({
					url: url
				})
			},
			openVideo(file) {
				let url = '/pages/check-order/videoView?url=' + file;
				uni.navigateTo({
					url: url
				})
			},
			getPage(params = {}) {
				let postData = Object.assign(params, this.query);
				let that = this;
				http.request({
					url: '/galaxy-business/order/process/list',
					method: 'GET',
					data: postData,
				}).then(res => {
					if (res.data != null) {
						console.log(JSON.stringify(res.data))
						that.list = res.data;
					}
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.point {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 15rpx 0;
	}

	.dot {
		//margin-left: -22rpx;
		background-color: #19be6b;
		box-shadow: 0 0 5rpx 5rpx #71d5a1;
		color: white;
		width: 50rpx;
		height: 50rpx;
		padding: 5rpx;
		font-size: 28rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.time-title {
		font-size: 30rpx;
		margin-left: 15rpx;
		background-color: whitesmoke;
		padding: 12rpx 25rpx;
		border-radius: 50rpx;
		color: orangered;
	}

	.time-info {
		padding: 0rpx 0rpx 0rpx 25rpx;
	}

	.time-line {
		border-left: 3rpx solid #71d5a1;
		padding: 10rpx 10rpx 30rpx 20rpx;
	}
</style>