eam-uniapp/pages/upkeepOrder/detail.vue

<template>
	<!-- 详情 -->
	<view class="detail-container">
		<view class="info">
			<view class="title">
				<view>保养工单</view>
			</view>
			<view class="dec">
				<view class="dec-item">
					<view>工单单号：</view>
					<view>{{data.number}}</view>
				</view>
				<view class="dec-item">
					<view>保养计划单号：</view>
					<view>{{data.planNumber}}</view>
				</view>
				<view class="dec-item">
					<view>故障类型：</view>
					<view>{{data.faultTypeName}}</view>
				</view>
				<view class="dec-item">
					<view>维修工：</view>
					<view>{{data.maintenance}}</view>
				</view>
			</view>
		</view>
		<div class="line"></div>
		<view class="info" style="padding-bottom: 130rpx;">
			<view class="tab">
				<u-tabs :list="list" :is-scroll="false" bar-height="2" bar-width="250" v-model="current"
					@change="change"></u-tabs>
			</view>

			<view>
				<view class="title">
					<view>{{changeItem.name}}</view>
				</view>
				<view class="dec" v-if="current == 0">
					<view class="dec-item">
						<view>设备编号：</view>
						<view>{{deviceInfo.number}}</view>
					</view>
					<view class="dec-item">
						<view>设备名称：</view>
						<view>{{deviceInfo.name}}</view>
					</view>
					<view class="dec-item">
						<view>所属厂区：</view>
						<view>{{deviceInfo.factoryAreaName}}</view>
					</view>
					<view class="dec-item">
						<view>设备类型：</view>
						<view>{{deviceInfo.typeName}}</view>
					</view>
				</view>
				<view class="list" v-if="current == 1">
					<view class="item " v-for="(item,index) in serviceList" :key="index"
						@click="addSubForm('updata',item)">
						<view class="item-box">
							<view class="spare-title">
								<view class="title-txt">
									{{item.contents}}
								</view>
							</view>
							<!-- <view class="dec2">
								<view>保养部位：</view>
								<view>{{item.equipmentParts}}人</view>
							</view> -->
							<view class="dec2">
								<view>预估人数：</view>
								<view>{{item.peoples}}人</view>
							</view>
							<view class="dec2">
								<view>预估分钟：</view>
								<view>{{item.estimatedMinutes}}分钟</view>
							</view>
							<view class="dec2">
								<view>实际分钟：</view>
								<view>{{item.actualMinutes}}分钟</view>
							</view>
							<view class="dec2">
								<view>责任人：</view>
								<view>{{item.chargePeoplesName}}</view>
							</view>
							<view class="dec2" >
								<view>完成情况：</view>
								<view>{{item.status==0?'完成':'未完成'}}</view>
							</view>
							<view class="dec2" v-if='item.status == 0'>
								<view>完成时间：</view>
								<view>{{$time.formatDate(item.completionTime)}}</view>
							</view>
							<view class="dec2">
								<view>工程师确认：</view>
								<view>{{item.engineer}}</view>
							</view>
							<view class="dec2" v-if="item.status == 1">
								<view>未完成原因：</view>
								<view>{{item.uncompleted}}</view>
							</view>
							<view class="dec2">
								备件：
							</view>
							<view class="items" v-for="(cur,key) in item.items" :key="key">
								<view class="items-name">
									{{cur.name}}
								</view>
								<view class="items-dec">
									备件编号：{{cur.number}}
								</view>
								<view class="items-dec">
									数量：{{cur.qty}}
								</view>
							</view>
						</view>
						<!-- <u-icon name="minus-circle" color="#aaaaaa" size="60" ></u-icon> -->
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btns">
				<u-button type="primary" v-if="data.status == 'PENDING'" @click="orderClick(1)" :loading='loading'
					:disabled='loading'>接单</u-button>
				<u-button type="primary" v-if="data.status == 'PECEIVED'" @click="orderClick(2)" :loading='loading'
					:disabled='loading'>完成</u-button>
			</view>
			<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
		</view>
	</view>
</template>

<script>
	import * as deviceApi from "@/api/device.js"
	import * as moldApi from "@/api/mold.js"
	import * as upkeepOrderApi from "@/api/upkeepOrder.js"
	export default {
		data() {
			return {
				list: [{
					name: '设备信息'
				}, {
					name: '保养内容'
				}],
				current: 0,
				changeItem: '',
				data: '', //工单信息
				loading: false,
				type: "",
				deviceInfo: '', //设备信息
				serviceList: [], //维修内同列表
			}
		},
		methods: {
			change(index) {
				this.current = index
				this.changeItem = this.list[this.current]
			},
			// 添加表格表单
			addSubForm(clickType, item) {
				if(this.data.status == 'PENDING'){
					this.$modal.showToast('请先接单')
					return
				}
				if (clickType == 'updata') {
					this.$tab.navigateTo(
						`/pages/upkeepOrder/addServiceRecord?type=${this.type}&factoryAreaNumber=${this.data.factoryAreaNumber}&number=${this.data.number}&data=${encodeURIComponent(JSON.stringify(item))}`
					)
				} else {
					this.$tab.navigateTo(
						`/pages/upkeepOrder/addServiceRecord?type=${this.type}&factoryAreaNumber=${this.data.factoryAreaNumber}&number=${this.data.number}`
					)
				}
			},
			// 添加备件
			addSpare() {

			},
			// 取消添加备件
			cancle() {
				this.isPopupShow = false
			},
			// 根据设备/模具号查询信息
			getDetailsByNumber() {
				const data = {
					number: this.data.deviceNumber,
					id: ''
				}
				if (this.type == 'DEVICE') {
					deviceApi.getDeviceDetailsByNumber(data).then((res) => {
						if (res.data) {
							this.deviceInfo = res.data
						} else {
							this.$modal.showToast(`找不到该${this.type=='DEVICE'?'设备' : '模具'}`)
						}
					})
				} else if (this.type == 'MOLD') {
					moldApi.getMoldDetailsByNumber(data).then((res) => {
						if (res.data) {
							this.deviceInfo = res.data
						} else {
							this.$modal.showToast(`找不到该${this.type=='DEVICE'?'设备' : '模具'}`)
						}
					})
				}
			},
			// APP维修工单接单、点击完成、验证
			orderClick(type) {
				if(type == 2){
					if(!this.serviceList || this.serviceList&&this.serviceList.length == 0){
						this.$modal.showToast('请添加保养内容')
						return;
					}
				}
			
				const data = {
					id: this.data.id
				}
				let tips = this.data.status == 'PENDING' ? '是否接单？' : this.data.status == 'PECEIVED' ? '是否完成？' : ''
				this.$modal.confirm(tips).then(() => {
					this.$modal.loading('加载中')
					this.loading = true
					if(type == 1){
						upkeepOrderApi.orderClick(data).then((res) => {
							if (res.data) {
								this.$modal.showToast('操作成功')
								setTimeout(() => {
									this.$tab.navigateBack()
									this.loading = false
								}, 1500)
							} else {
								this.$modal.showToast('操作失败')
								this.loading = false
							}
						}).catch(() => {
							this.$modal.closeLoading()
							this.loading = false
						})
					}else if(type == 2){
						upkeepOrderApi.orderClickFinish(data).then((res) => {
							if (res.data) {
								this.$modal.showToast('操作成功')
								setTimeout(() => {
									this.$tab.navigateBack()
									this.loading = false
								}, 1500)
							} else {
								this.$modal.showToast('操作失败')
								this.loading = false
							}
						}).catch(() => {
							this.$modal.closeLoading()
							this.loading = false
						})
					}
					
				})
			},
			// 获取维修内容列表
			getUpkeepOrderDetailList() {
				upkeepOrderApi.upkeepOrderDetailList({
					number: this.data.number
				}).then((res) => {
					if (res.data) {
						this.serviceList = res.data
					}
				})
			},
			// 删除维修内容
			delService(item) {
				this.$modal.confirm('确定删除检修内容吗？').then(() => {
					this.$modal.loading('加载中')
					upkeepOrderApi.upkeepOrderDetailDelete(item.id).then((res) => {
						this.$modal.closeLoading()
						this.getUpkeepOrderDetailList()
					})
				})

			},
		},
		onLoad(option) {
			if (option.type) this.type = option.type;
			if (option.data) {
				this.data = JSON.parse(decodeURIComponent(option.data))

			}
			this.changeItem = this.list[this.current]
			this.data.maintenance =  uni.getStorageSync('user').nickname


		},
		onShow() {
			this.getDetailsByNumber()
			this.getUpkeepOrderDetailList()
		}
	}
</script>

<style lang="scss" scoped>
	.detail-container{
		min-height: 100vh;
		background: white;
	}
	.line{
		background: #f5f5f5;
		height: 20rpx;
	}
	.info {
		background: white;
	}

	.tab {
		border-bottom: 1px solid #e4e4e4;

	}

	.title {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #e4e4e4;

		view {
			&:nth-child(1) {
				flex: 1;
				border-left: 10rpx solid #409eff;
				padding-left: 20rpx;
				font-weight: bold;
			}
		}
	}

	.dec {
		padding: 30rpx;

		.dec-item {
			padding-bottom: 30rpx;
			display: flex;

			view {
				&:nth-child(1) {
					width: 200rpx;
				}

				&:nth-child(2) {
					color: #888888;
					flex: 1;
					width: 0px;
					word-wrap: break-word;
				}
			}
		}
	}

	.dec2 {
		padding: 10rpx 30rpx;
		display: flex;

		view {
			&:nth-child(1) {
				width: 180rpx;
			}

			&:nth-child(2) {
				color: #888888;
				flex: 1;
				width: 0px;
				word-wrap: break-word;
			}
		}


	}

	.items {
		margin: 20rpx 30rpx;
		border-radius: 12rpx;
		background: #F5F5F5;
		padding-bottom: 20rpx;

		.items-name {
			padding: 20rpx;
			border-bottom: 1px solid #dedede;
		}

		.items-dec {
			padding: 0px 20rpx;
			margin-top: 20rpx;
		}
	}

	.popup-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #409eff;
		padding: 30rpx
	}

	.popup {
		width: 600rpx;
		padding: 0rpx 60rpx 0rpx;

	}

	.popup-footer {
		display: flex;
		border-top: 1px solid #e4e4e4;

		view {
			line-height: 100rpx;
			flex: 1;
			text-align: center;

			&.sure {
				color: #409eff;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		background: white;
		z-index: 22;
	}

	.btns {
		display: flex;

		padding: 20rpx;
		box-shadow: 0px -2rpx 20rpx rgba(0, 0, 0, 0.1);


		button {
			flex: 1;
			margin: 0px 10rpx;
		}

		.sure {
			background: #409eff;
			color: white;
			border-radius: 8rpx;

			&::after {
				border: 1px solid #409eff;
				border-radius: 0px;
			}
		}
	}

	.list {
		padding: 20rpx;

		.item {
			display: flex;
			margin-bottom: 20rpx;

			.item-box {
				border-radius: 12rpx;
				border: 1px solid #dedede;
				border-radius: 12rpx;

				flex: 1;
				width: 0rpx;
			}

			.spare-title {
				padding: 20rpx 30rpx;
				border-bottom: 1px solid #e4e4e4;
				display: flex;

				.title-txt {
					color: #409eff;
					font-size: 30rpx;
					font-weight: bold;
					flex: 1;
				}
			}

			.dec {
				color: #9c9c9c;
				padding: 0rpx 30rpx 20rpx;
			}

		}
	}

	.add-btn {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
</style>