aiot-app/pages/home/backlog/planNatureApproval.vue

<template>
	<view class="plan-approval-container">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" :title="isApproval ? '计划性验收详情' : '计划性审批详情'" @clickLeft="back"></uni-nav-bar>
		<template>
			<view class="tab-title">
				<view class="tab-item" :class="0 === pickTabIndex ? 'active' : ''" @click="changeChartsTab(0)">基本信息
				</view>
				<view class="tab-item" :class="1 === pickTabIndex ? 'active' : ''" @click="changeChartsTab(1)">需维修设备
				</view>
			</view>
		</template>

		<view class="content">
			<!-- 基本信息 -->
			<view class="baseinfo" v-if="pickTabIndex === 0">
				<view class="col">
					<text class="label">计划单号</text>
					<text class="desc">{{ baseInfo.planCode }}</text>
				</view>
				<view class="col">
					<text class="label">计划性名称</text>
					<text class="desc">{{ baseInfo.planName }}</text>
				</view>

				<view class="col">
					<text class="label">报修数量</text>
					<text class="desc">{{ baseInfo.planRepairEquiReqs &&  baseInfo.planRepairEquiReqs.length }}</text>
				</view>



				<view class="col">
					<text class="label">设备分类</text>
					<text class="desc">{{ baseInfo.equiTypeName }}</text>
				</view>



				<template>
					<view class="col">
						<text class="label">维修部门</text>
						<text class="desc">{{ baseInfo.executorDeptName }}</text>
					</view>
					<view class="col">
						<text class="label">维修人员</text>
						<text class="desc">{{ baseInfo.executorName }}</text>
					</view>
					<view class="col">
						<text class="label">审核人员</text>
						<text class="desc">{{ baseInfo.examineName }}</text>
					</view>
					<view class="col">
						<text class="label">计划开始时间</text>
						<text class="desc">{{ baseInfo.planStartTime }}</text>
					</view>
				</template>
				<view class="col">
					<text class="label">计划完成时间</text>
					<text class="desc">{{ baseInfo.planEndTime }}</text>
				</view>
			
				
				<view class="col" v-if="isApproval">
					<text class="label">开工时间：</text>
					<text class="desc">{{ baseInfo.planWorkOrder.acceptTime  }}</text>
				</view>
				
				<view class="col" v-if="isApproval">
					<text class="label">完工时间：</text>
					<text class="desc">{{  baseInfo.planWorkOrder.finishTime }}</text>
				</view>
				
				<view class="col" v-if="isApproval">
					<text class="label">实际工时：</text>
					<text class="desc">{{ timeInterval(baseInfo.planWorkOrder.acceptTime,  baseInfo.planWorkOrder.finishTime)   }}</text>
				</view>
				
				<view class="col" >
					<text class="label">备注</text>
					<text class="desc">{{ baseInfo.remake  }}</text>
				</view>
			</view>
			<view class="equipment" v-if="pickTabIndex === 1">

				<template>
					<view class="pd-list">
						<!-- 盘点 -->
						<view class="pd-list-item" v-for="item in baseInfo.planRepairEquiReqs" :key="item.id">
							<view class="item">
								<view class="s2"> 固资编码：{{ item.fixAssetCode }} </view>
							</view>
							<view class="item">
								<view class="s2"> 设备编码：{{ item.name }} </view>
							</view>
							<view class="item">
								<view class="s1"> 设备名称：{{ item.code }} </view>
							</view>
							<view class="item">
								<view class="s2"> 设备型号：{{ item.equiModel }} </view>
							</view>


						</view>
					</view>
				</template>


			</view>
		</view>
	<view class="approval-container" v-if="!isApproval && baseInfo.planStatus == '4'">
	  <view class="approval_btn-wrapper">
	    <text class="approval-btn primary" @click="handlePass">通过</text>
	 </view>

	</view>

	   <Approval v-if="isApproval && baseInfo.planStatus == '8' && baseInfo.planWorkOrder.status.code ==5" :devOpsType="1"
		 :planType="options.planType" :myHandleId="options.id" :id="options.workOrderId" />
	
	</view>
</template>

<script>
	import {
		post,
		get,
		postJ
	} from '@/utils/api.js'
	import Approval from '@/components/Approval.vue'




	export default {
		components: {
			Approval,
	
		},
		data() {
			return {
		
				tabList: [{
						value: 0,
						label: '基本信息',
						list: []
					},
					{
						value: 1,
						label: '设备',
						list: []
					}
				],
				pickTabIndex: 0,

				options: {
					id: '',
					workOrderId: '',
					planType: '',
					devOpsType: ''
				},
				baseInfo: {},

				isApproval: false
			}
		},
		onLoad(options) {
			this.options = options
			this.isApproval = options.handleType == 1
		},
		onShow() {
			this.getInfo()
		},
		computed: {

		},
		methods: {
			//切换选项卡
			changeChartsTab(index) {
				this.pickTabIndex = index
			},
			getInfo() {
				let url 
				if(this.options.handleType == 1) {
					url =  `/planRepair/planRepairDetail/${this.options.workOrderId}`  
				} else {
					url = `/planRepair/planRepairDetailBack/${this.options.workOrderId}`
				}
				get(
					this.apiUrl + url

				).then(res => {
					if (res?.success) {
						console.log(res.data)
						this.baseInfo = res.data

					}
				})
			},
			
			handlePass() {
				let params = {
					 planId: this.options.workOrderId,
					 myHandleId: this.options.id
				}
				postJ(this.apiUrl + '/planRepair/examinePlanRepair', params).then(res => {
				  if (res?.success) {
				    uni.navigateTo({
				      url: `/pages/home/backlog/result?type=approve&status=3`
				    })
				  }
				})
			},
			
			// 计算实际工时
			 timeInterval(dt1, dt2) {
			  if (!dt1 || !dt2) {
			    return "";
			  }
			  if (typeof dt1 == "string") {
			    dt1 = new Date(dt1.replace(/-/, "/"));
			    dt2 = new Date(dt2.replace(/-/, "/"));
			  }
			  var res = dt2 - dt1;
			  if (isNaN(res)) throw Error("invalid dates arguments");
			  let re = res / (1000 * 60 * 60);
			
			  var h = parseInt(re);
			  var m = parseInt((re - h) * 60);
			  let result = "";
			  if (h) {
			    result += `${h} 小时`;
			  }
			  if (m) {
			    result += `${m} 分钟`;
			  }
			  return result;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-title {
		width: 100%;
		padding: 0 30rpx;
		margin-bottom: 12rpx;
		display: flex;
		height: $tab-height;
		line-height: $tab-height;
		background-color: #ffffff;
		border-bottom: 1px solid #f2f2f2;
		box-sizing: border-box;

		.tab-item {
			width: 30%;
			text-align: center;
			font-size: 32rpx;
			color: $uni-text-color-grey;
		}

		.tab-item.active {
			color: $j-primary-border-green;
			border-bottom: 1px solid $j-primary-border-green;
		}
	}

	.plan-approval-container {
		display: flex;
		flex-direction: column;
		padding-bottom: 80rpx;

		/deep/.uni-collapse-item {
			background-color: rgba(21, 122, 44, 0.372549019607843);
		}

		.content {
			flex: 1;
			overflow: auto;

			.baseinfo {
				padding: 0 22rpx;
				font-size: 28rpx;

				.col {
					display: flex;
					padding: 10rpx 0;
					border-bottom: 1rpx dashed #d7d7d7;

					.label {
						display: inline-block;
						width: 200rpx;
						text-align: right;
						margin-right: 20rpx;
						font-weight: bold;
					}

					.desc {
						flex: 1;
						word-break: break-all;
					}
				}
			}
		}


	}

	.pd-list-item {
		padding: 10rpx;
		border-bottom: 1px solid #d7d7d7;

		.item {
			display: flex;
			font-size: 28rpx;
			justify-content: space-between;
			padding: 10rpx;
		}
	}
	
	.approval-container {
	  width: 100vw;
	  height: 80rpx;
	
	  .approval_btn-wrapper {
	    display: flex;
	    position: fixed;
	    bottom: 0;
	    width: 100vw;
	    height: 80rpx;
		background-color: #fff;
	  }
	
	  .approval-btn {
	    flex: 1;
	    line-height: 78rpx;
	    text-align: center;
	    border: 1rpx solid $j-primary-border-green;
	    &.refuse {
	      color: red;
	    }
	    &.primary {
	      background-color: $j-primary-border-green;
	      color: #fff;
	    }
	  }
	}
	
</style>