eam-uniapp/src/pages/overhaulOrder/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.maintenanceNumber}}</view>
				</view>
				<view class="dec-item">
					<view>故障类型：</view>
					<view>{{data.faultTypeName}}</view>
				</view>
				<view class="dec-item" v-if="data.createTime">
					<view>创建时间：</view>
					<view>{{$time.formatDate(data.createTime)}}</view>
				</view>
				<view class="dec-item">
					<view>检修人员：</view>
					<view>{{data.maintenanceName}}</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>{{data.deviceNumber}}</view>
					</view>
					<view class="dec-item">
						<view>设备名称：</view>
						<view>{{data.name}}</view>
					</view>
					<view class="dec-item">
						<view>所属厂区：</view>
						<view>{{data.factoryAreaName}}</view>
					</view>
					<view class="dec-item">
						<view>设备类型：</view>
						<view>{{data.type == 'DEVICE'?'设备':data.type == 'TECH'?'工艺':'模具'}}</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.name}}
								</view>
								<view class="" @click.stop="delService(item)">
									<u-icon name="trash" color="#aaaaaa" size="40"></u-icon>
								</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 || item.status === '0'? '完成':item.status===1 ||item.status === '1'?'未完成':''}}
								</view>
							</view>
							<view class="dec2" v-if='item.status === 0 || 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 || item.status === '1'">
								<view>未完成原因：</view>
								<view>{{item.uncompleted}}</view>
							</view>
							<view class="" v-show="item.items&&item.items.length>0">
								<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>
						</view>
						<!-- <u-icon name="minus-circle" color="#aaaaaa" size="60" ></u-icon> -->
					</view>
					<view class="add-btn" v-if="data.status == 'PECEIVED'">
						<u-button type="primary" @click="addSubForm('creat')"><u-icon name="plus-circle" color="#ffffff"
								size="36"></u-icon>添加检修内容</u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btns">
				<u-button type="primary" v-if="data.status == 'PECEIVED'&&((type=='DEVICE'&&$auth.hasPermi('eam:device-inspection-job-main:orderClickFinishAPP'))||(type=='MOLD'&&$auth.hasPermi('eam:mold-inspection-job-main:orderClickFinishAPP'))||(type=='TECH'&&$auth.hasPermi('eam:tech-inspection-job-main:orderClickFinishAPP')))" @click="orderClickFinish" :loading='loading'
					:disabled='loading'>完成</u-button>
			</view>
			<view class="btns" v-if="(data.status == 'COMPLETED')&&((type=='DEVICE'&&$auth.hasPermi('eam:device-inspection-job-main:orderClickVerifyAPP'))||(type=='MOLD'&&$auth.hasPermi('eam:mold-inspection-job-main:orderClickVerifyAPP'))||(type=='TECH'&&$auth.hasPermi('eam:tech-inspection-job-main:orderClickVerifyAPP')))">
				<u-button type="primary" @click="orderClickVerify()" :loading='loading'
					:disabled='loading'>验证完结</u-button>
			</view>
			<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
		</view>
		<!-- 验证完结-->
		<u-popup v-model="isVerifyShowSuccess" mode="center" border-radius="14">
			<view class="popup-title">验证完结意见</view>
			<view class="popup">
				<textarea v-model="data.applyContent" placeholder="请输入内容"></textarea>
			</view>
			<view class="popup-footer">
				<view @click="cancel">取消</view>
				<view class="sure" @click="verify">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup lang="ts">
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import * as overhaulOrderApi from "@/api/overhaulOrder.js"
	import { useCountStore } from '@/store'

	const { proxy } = getCurrentInstance()
	// 获取自定义的store
	const store = useCountStore()

	const list = ref([{
		name: '设备信息'
	}, {
		name: '检修内容'
	}])
	const current = ref(0)
	const changeItem = ref({
		name: '设备信息',
		value: 1
	})
	const data = ref()
	const loading = ref(false)
	const type = ref('')
	const serviceList = ref([])
	const isVerifyShowSuccess = ref(false)//验证确认弹出层

	function change(index) {
		current.value = index
		changeItem.value = list.value[current.value]
	}
	// 添加表格表单
	function addSubForm(clickType, item) {
		if (data.value.status == 'COMPLETED') {
			return
		}
		if (data.value.status == 'PENDING') {
			proxy.$modal.showToast('请先接单')
			return
		}
		if (clickType == 'updata') {
			proxy.$tab.navigateTo(
				`/pages/overhaulOrder/addServiceRecord?type=${data.value.type}&factoryAreaNumber=${data.value.factoryAreaNumber}&number=${data.value.number}&data=${encodeURIComponent(JSON.stringify(item))}&deviceNumber=${data.value.deviceNumber}`
			)
		} else {
			proxy.$tab.navigateTo(
				`/pages/overhaulOrder/addServiceRecord?type=${data.value.type}&factoryAreaNumber=${data.value.factoryAreaNumber}&number=${data.value.number}&deviceNumber=${data.value.deviceNumber}`
			)
		}
	}
	// 完成
	function orderClickFinish() {
		const paramseData = {
			id: data.value.id,
			verifyContent: data.value.applyContent
		}
		if (!serviceList.value || serviceList.value && serviceList.value.length == 0) {
			proxy.$modal.showToast('请添加检修内容')
			return;
		}

		proxy.$modal.confirm('是否完成？').then(() => {
			proxy.$modal.loading('加载中')
			loading.value = true
			overhaulOrderApi.orderClickFinish(paramseData,type.value).then((res) => {
				if (res.data) {
					proxy.$modal.showToast('操作成功')
					setTimeout(() => {
						// proxy.$tab.navigateTo(`/pages/overhaulOrder/index?type=${type.value}`)
						proxy.$tab.navigateBack()
						loading.value = false
					}, 1500)
				} else {
					proxy.$modal.showToast('操作失败')
					loading.value = false
				}
			}).catch(() => {
				proxy.$modal.closeLoading()
				loading.value = false
			})
		})

	}

	/**
	 * 点击验证完结填写意见
	 */
	function verify() {
		data.value.applyContent = null;
		isVerifyShowSuccess.value = true
	}
	/**
	 * 验证取消
	 */
	function cancel() {
		data.applyContent = null;
		isVerifyShowSuccess.value = false
	}
	// 验证
	function orderClickVerify() {
		const paramseData = {
			id: data.value.id,
			verifyContent: data.value.applyContent
		}
		let tips = '是否验证完结？'
		proxy.$modal.confirm(tips).then(async () => {
			proxy.$modal.loading('加载中')
			loading.value = true
			overhaulOrderApi.orderClickVerify(paramseData,type.value).then((res) => {
				if (res.data) {
					proxy.$modal.showToast('操作成功')
					setTimeout(() => {
						// proxy.$tab.navigateTo(`/pages/overhaulOrder/index?type=${type.value}`)
						proxy.$tab.navigateBack()
						loading.value = false
						isVerifyShowSuccess.value = false
					}, 1500)
				} else {
					proxy.$modal.showToast('操作失败')
					loading.value = false
				}
			}).catch(() => {
				proxy.$modal.closeLoading()
				loading.value = false
			})
		})
	}
	// 获取维修内容列表
	function getOverhaulOrderDetailList() {
		overhaulOrderApi.overhaulOrderDetailList({
			number: data.value.number
		}, type.value).then((res) => {
			if (res.data) {
				serviceList.value = res.data
			}
		}).catch(() => { })
	}
	// 删除维修内容
	function delService(item) {
		if (data.status == 'PECEIVED') {
			proxy.$modal.confirm('确定删除维修内容吗？').then(() => {
				proxy.$modal.loading('加载中')
				overhaulOrderApi.overhaulOrderDetailDelete(item.id, type.value).then((res) => {
					proxy.$modal.closeLoading()
					getOverhaulOrderDetailList()
				}).catch(() => { })
			})
		}

	}



	onLoad(async (option) => {
		if (option.type) type.value = option.type;
		if (option.data) {
			data.value = JSON.parse(decodeURIComponent(option.data))

		}
		changeItem.value = list.value[current.value]

	})
	onShow(() => {
		getOverhaulOrderDetailList()
	})
</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: 160rpx;
				}

				&: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>