aiot-app/pages/pda/workOrder/extrusionMolding/index.vue

<template>
	<view class="content-box">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" :title="title" background-color="#157A2C"
			color="#fff" @clickLeft="back"></uni-nav-bar>


		<view class="top-wrapper cx">
			<stepsNav v-if='info.taskId && stepsList.length' :stepsList="stepsList" :taskId="info.taskId"
				@selectStep='selectStep'></stepsNav>
			<view class="tab_box rx-sc">
				<view class="tab_item" :class="{active: tabType == 1}" @click="handTab(1)">基本信息</view>
				<view class="tab_item" :class="{active: tabType == 2}" @click="handTab(2)">生产明细</view>
				<view class="tab_item" :class="{active: tabType == 3}" @click="handTab(3)">详情</view>
			</view>
		</view>

		<view class="list_box">

			<u-list @scrolltolower="scrolltolower" key="info" v-if="tabType == 1">
				<view class="item_list rx-bc">
					<text class="lable">生产工单号</text>
					<text>{{ info.code }}</text>
				</view>


				<view class="item_list rx-bc">
					<text class="lable">计划编号</text>
					<text>{{ info.productionPlanCode }}</text>
				</view>

				<view class="item_list rx-bc">
					<text class="lable">工艺路线版本</text>
					<text>{{ info.routingVersion }}</text>
				</view>

				<view class="item_list rx-bc">
					<text class="lable">产品编码</text>
					<text> {{ info.productCode }}</text>
				</view>


				<view class="item_list rx-bc">
					<text class="lable">产品名称</text>
					<text>{{ info.productName }}</text>
				</view>


				<view class="item_list rx-bc">
					<text class="lable">牌号</text>
					<text>{{ info.brandNo }}</text>
				</view>


				<view class="item_list rx-bc">
					<text class="lable">型号</text>
					<text>{{info.model}}</text>
				</view>


				<view class="item_list rx-bc">
					<text class="lable">要求生产数量</text>
					<text>{{info.formingNum }} {{info.weightUnit}} </text>
				</view>



				<view class="item_list rx-bc">
					<text class="lable">要求生产重量</text>
					<text>{{ info.formingWeight }} {{info.weightUnit}}</text>
				</view>

				<view class="item_list rx-bc">
					<text class="lable">已完成生产数量</text>
					<text></text>
				</view>


				<view class="item_list rx-bc">
					<text class="lable">已完成生产重量</text>
					<text></text>
				</view>

				<view class="item_list rx-bc">
					<text class="lable">计划开始时间</text>
					<text>{{ info.planStartTime }}</text>
				</view>



			</u-list>

			<u-list @scrolltolower="scrolltolower" key="detail" v-if="tabType == 2">

				<view v-for="(item,index) in produceList" :key="index" class="detail-list">
					<view class="name">{{item.taskName}}</view>
					<view class="list rx-bc">
						<view class="title rx-sc">
							<image class="icon" src="~@/static/pda/layers.svg"></image>
							待投料数量
						</view>

						<view class="rx-ec">
							{{item.waitFeedNum}}
							<image class="arrow_right2" src="~@/static/pda/arrow_right2.svg"></image>
						</view>
					</view>

					<view class="list rx-bc">
						<view class="title rx-sc">
							<image class="icon" src="~@/static/pda/check-square.svg"></image>
							生产中数量
						</view>

						<view class="rx-ec">
							0
							<image class="arrow_right2" src="~@/static/pda/arrow_right2.svg"></image>
						</view>
					</view>


					<view class="list rx-bc">
						<view class="title rx-sc">

							<image class="icon" src="~@/static/pda/target.svg"></image>

							待投料数量
						</view>

						<view class="rx-ec">
							{{item.waitFeedNum}}
							<image class="arrow_right2" src="~@/static/pda/arrow_right2.svg"></image>
						</view>
					</view>
				</view>
			</u-list>

			<u-list @scrolltolower="scrolltolower" key="btnDeatils" v-if="tabType == 3">
				<view style="margin-top: 15px;">
					<button class="search_btn" @click="handleDetails">报工详情</button>
				</view>
			</u-list>

		</view>

		<view class="bottom-wrapper">
			<bottomOperate @operate='operate' :state='currentType'></bottomOperate>
		</view>

	</view>
</template>

<script>
	import bottomOperate from '../../components/bottomOperate.vue'
	import stepsNav from '../../components/stepsNav.vue'

	import {
		getTaskInstanceList,
		workorderInfo,
		produceDetail,
		checkStatus
	} from '@/api/pda/workOrder.js'
	import {
		noop
	} from 'lodash'
	export default {
		components: {
			bottomOperate,
			stepsNav
		},
		data() {
			return {
				title: '',
				tabType: 1,
				id: null,

				stepsList: [],
				info: {},
				taskId: null,

				produceList: [],

				feedAllow: true,

				currentTaskId: null,
				currentTaskName: null,
				currentType: 1,

			}
		},

		onLoad(options) {
			this.title = options.title
			this.id = options.id

			uni.showLoading({
				title: '加载中'
			});



		},

		onShow() {
			this.getSteps()
			this.getInfo()

			this.produce()
		},

		methods: {
			scrolltolower() {},




			handTab(type) {
				if (type != this.tabType) {
					this.tabType = type
				}
			},

			getSteps() {
				getTaskInstanceList(this.id).then(res => {

					// for(let i = 0; i < res.length; i++) {
					// 	if(res[i].taskTypeName == '自然干燥' ||res[i].taskTypeName == '升温干燥') {
					// 		res[i - 1].btns = [ { name: '更换周转车', type: 'turnover'}]
					// 	}
					// }
					this.stepsList = res

					this.setTypeFn()



				})
			},

			getInfo() {
				workorderInfo(this.id).then(res => {
					this.info = res
					this.taskId = res.taskId
					this.setTypeFn()


					this.feedStatus()
					uni.hideLoading();
				}).catch(() => {
					uni.hideLoading();
				})
			},
			setTypeFn() {
				
					this.stepsList.length && this.stepsList.find(f => {
						if (f.taskId == this.taskId) {
							this.currentType = f.type
						}
					})
			
			},

			feedStatus() {
				let taskId = this.currentTaskId || this.taskId
				checkStatus(this.id, taskId).then(res => {
					this.feedAllow = res
				})
			},

			selectStep(item) {
				this.currentTaskId = item.taskId
				this.currentTaskName = item.taskTypeName
				this.currentType = item.type
				this.feedStatus()
			},

			operate(type) {
				let url
				let taskId = this.currentTaskId || this.taskId
				let taskName = this.currentTaskName || this.info.taskName
				if (type == 'picking') {
					url = '/pages/pda/picking/details'
					let _arr = JSON.stringify([this.info.id])
					url += `?arr=${encodeURIComponent(_arr)}&taskId=${taskId}`
					uni.navigateTo({
						url
					})
				} else if (type == 'feeding') {
					if (this.feedAllow) {
						url = '/pages/pda/feeding/details'
						let _arr = JSON.stringify([this.info.id])
						url += `?arr=${encodeURIComponent(_arr)}&taskId=${taskId }&taskName=${taskName}`
						uni.navigateTo({
							url
						})
					} else {
						uni.showToast({
							title: "已投料，请先报工",
							icon: "none",
						})
					}

				} else if (type == 'jobBooking') {
					if (!this.feedAllow) {
						url = '/pages/pda/jobBooking/index/index'
						url += `?id=${this.info.id}&taskId=${taskId }&taskName=${taskName}`
						uni.navigateTo({
							url
						})
					} else {
						uni.showToast({
							title: "请先投料",
							icon: "none",
						})
					}

				} else if (type == 'turnover') {
					url = '/pages/pda/turnover/index/index'
					url += `?workOrderId=${this.info.id}&taskId=${taskId }&taskName=${taskName}`
					uni.navigateTo({
						url
					})


				} else if (type == 'sample') {
					url = '/pages/pda/sample/index/index'
					url += `?workOrderId=${this.info.id}&taskId=${taskId }&taskName=${taskName}`
					uni.navigateTo({
						url
					})
				}

			},


			produce() {
				produceDetail(this.id).then(res => {
					this.produceList = res.produceDetail
				})
			},

			handleDetails() {
				let taskId = this.currentTaskId || this.taskId
				let taskName = this.currentTaskName || this.info.taskName
				let url = '/pages/pda/workOrder/index/details'
				url += `?id=${this.info.id}&taskId=${taskId }&taskName=${taskName}`
				uni.navigateTo({
					url
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-color: $page-bg;
	}

	.top-wrapper {
		background-color: #fff;
		display: flex;
		width: 750rpx;
		background: #fff;
		align-items: center;
	}

	.tab_box {
		width: 100%;
		height: 68rpx;


		.tab_item {
			height: 68rpx;
			line-height: 68rpx;
			padding: 0 20rpx;
			font-size: 32rpx;
			color: #979C9E;

		}

		.active {
			box-sizing: border-box;
			border-bottom: 6rpx solid $theme-color;
			color: $theme-color;
		}


	}

	.list_box {
		flex: 1;
		overflow: hidden;
		padding: 4rpx 0;

		.u-list {
			height: 100% !important;
		}

		.item_list {

			width: 100%;
			height: 80rpx;
			box-sizing: border-box;
			padding: 0 32rpx;
			font-size: 32rpx;
			color: #979C9E;
			font-weight: 400;
			border-bottom: 1rpx solid #E3E5E5;



			.lable {
				color: #090A0A;
				font-weight: 500;
			}
		}


		.detail-list {
			line-height: 80rpx;

			.name {
				color: #090A0A;
				font-size: 32rpx;
				font-weight: 600;
				padding: 0 32rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E3E5E5;
			}

			.list {
				padding: 0 32rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E3E5E5;

				.title {
					font-weight: 400;
					color: #090A0A;

				}

				.icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}

				.arrow_right2 {
					width: 12rpx;
					height: 24rpx;
					margin-left: 8rpx;
				}
			}

		}
	}


	.bottom-wrapper {}

	.search_btn {
		width: 240rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 24rpx;
		background: $theme-color;
		font-size: 32rpx;
		color: #fff;
		margin: 0;
		margin-left: 26rpx;
	}
</style>