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.produceRoutingName }}</text>
				</view>

				<view class="item_list rx-bc">
					<text class="lable">批次号</text>
					<text> {{ info.batchNo }}</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.outsourceStatus | outsourceStatusText }}</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.unit }} </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>{{ info.singleReport == 1 ? '单个报工' : '批量报工' }}</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>

				<view class="item_list rx-bc">
					<text class="lable">计划结束时间</text>
					<text>{{ info.planCompleteTime }}</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 }} <text v-if="index == 0"
							style="color: #157A2C; font-size: 32rpx;"> （首工序）</text> </view>
					<view class="list rx-bc" @click="handDetails(item)">
						<view class="title rx-sc">
							<image class="icon" src="~@/static/pda/layers.svg"></image>
							待投料数量
						</view>

						<view class="rx-ec" v-if="item.firstTaskDetails.length > 0">
							<text style="color: #157A2C; font-size: 24rpx;"> 明细</text>
							<image class="arrow_right2" src="~@/static/pda/arrow_right2.svg"></image>
						</view>

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

					<view class="list rx-bc" @click="handDetails(item)">
						<view class="title rx-sc">
							<image class="icon" src="~@/static/pda/check-square.svg"></image>
							已投料数量
						</view>

						<view class="rx-ec" v-if="item.firstTaskDetails.length > 0">
							<text style="color: #157A2C; font-size: 24rpx;"> 明细</text>
							<image class="arrow_right2" src="~@/static/pda/arrow_right2.svg"></image>
						</view>

						<view class="rx-ec" v-else>
							{{ item.feedNum }}
							<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.reportedNum }}
							<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>

				<view style="margin-top: 15px;">
					<button class="search_btn" @click="handleFeedDetails">投料详情</button>
				</view>
			</u-list>




		</view>
		<!-- // 按钮组件 -->
		<view class="bottom-wrapper">
			<bottomOperate @operate='operate' @refresh='refresh'
				:taskObj="{ 'currentTaskName': currentTaskName || info.taskName, 'currentTaskId': currentTaskId || info.taskId, 'workOrderId': id, 'existOutsource': existOutsource }"
				:state='currentType' :gdStatus='info.status' :controlReportMethod='controlReportMethod'
				:stepsList="stepsList"></bottomOperate>
		</view>

		<productionDetailed ref="productionDetailedRef"> </productionDetailed>

	</view>
</template>

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


import {
	getTaskInstanceList,
	workorderInfo,
	produceDetail,
	checkStatus,
	skipTask
} from '@/api/pda/workOrder.js'

export default {
	components: {
		bottomOperate,
		stepsNav,
		productionDetailed
	},
	filters: {
		outsourceStatusText(v) {
			return v == 1 ? "未委外" : v == 2 ? "委外中" : v == 3 ? "完成委外" : "";
		}
	},
	data() {
		return {
			title: '',
			tabType: 1,
			id: null,

			stepsList: [],
			info: {},
			taskId: null,
			singleReport: null, // 报工类型 1单个报工 2批量报工
			produceList: [],
			feedAllow: true,

			currentTaskId: null,
			currentTaskName: null,
			currentType: 1,
			existOutsource: 0,
			controlReportMethod: null,

			clientEnvironmentId: uni.getStorageSync("userInfo") && uni.getStorageSync("userInfo")
				.clientEnvironmentId, // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境

		}
	},

	onLoad(options) {
		this.title = options.title
		this.id = options.id
		this.singleReport = options.singleReport; // 报工类型
		uni.showLoading({
			title: '加载中'
		});
	},

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


		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()



			})
		},

		refresh() {
			console.log(1)
			this.getInfo()
		},

		getInfo() {
			workorderInfo(this.id).then(res => {
				console.log(res, 99999999999)
				this.info = res
				this.taskId = res.taskId
				this.setTypeFn()
				this.feedStatus()

				uni.hideLoading();
			}).catch(() => {
				uni.hideLoading();
			})
		},
		setTypeFn() {
			this.stepsList.length && this.stepsList.find(f => {

				let id = this.currentTaskId || this.taskId

				if (f.taskId == id) {
					this.currentType = f.type,
						this.existOutsource = f.existOutsource
					this.controlReportMethod = f.controlReportMethod
				}

			})

		},

		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.existOutsource = item.existOutsource
			this.currentType = item.type
			this.controlReportMethod = item.controlReportMethod


			this.feedStatus()
		},

		// 点击之后调用事件
		operate(type, item) {
			console.log(4444, type, item)
			// if (this.info.outsourceStatus == 2) {
			// 	uni.showToast({
			// 		title: "工单在委外中",
			// 		icon: "none",
			// 	})

			// 	return false
			// }

			if (this.info.status == 9) {
				uni.showToast({
					title: "工单在暂停中",
					icon: "none",
				})

				return false
			}

			if (this.info.status == 10) {
				uni.showToast({
					title: "工单已终止",
					icon: "none",
				})

				return false
			}




			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') {
				// this.outsourceForm.isFirstTask 
				// 碳谷走老逻辑 批量走 老逻辑

				if (this.clientEnvironmentId == 3 || this.info.singleReport !== 1) {
					url = '/pages/pda/feeding/details'
					let _arr = JSON.stringify([this.info.id])
					url += `?arr=${encodeURIComponent(_arr)}&taskId=${taskId}&taskName=${taskName}&type=${type}`
				} else {
					// 单个投料
					let arr = this.stepsList.find(f => f.taskId == this.info.taskId)
					// 首工序走老逻辑
					console.log(arr.isFirstTask,'11111');

					if (arr.isFirstTask == 1) {
						url = '/pages/pda/feeding/details'
						let _arr = JSON.stringify([this.info.id])
						url += `?arr=${encodeURIComponent(_arr)}&taskId=${taskId}&taskName=${taskName}&type=${type}`
					} else {
						// 首工序
						url = '/pages/pda/feeding/details'
						let _arr = JSON.stringify([this.info.id])
						url += `?arr=${encodeURIComponent(_arr)}&taskId=${taskId}&taskName=${taskName}&type=${type}`

					}
				}
				uni.navigateTo({
					url
				})

			}
			// 报工
			else if (type == 'jobBooking') {
				// if (!this.feedAllow || this.clientEnvironmentId == 3) {

				// } else {
				// 	uni.showToast({
				// 		title: "请先投料",
				// 		icon: "none",
				// 	})
				// }
				url = '/pages/pda/jobBooking/index/index'
				url += `?id=${this.info.id}&taskId=${taskId}&taskName=${taskName}
				&taskType=${this.currentType}&isOutsource=${item.isOutsource || 0}
				&categoryId=${this.info.categoryId}&singleReport=${this.info.singleReport}`
				uni.navigateTo({
					url
				})

			

			} 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 == 'qualityTurnover') {
				url = '/pages/pda/turnover/index/quality'
				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
				})
			} else if (type == 'sampleJob') {
				url = '/pages/pda/sample/index/jobBooking'
				url += `?workOrderId=${this.info.id}&taskId=${taskId}&taskName=${taskName}`
				uni.navigateTo({
					url
				})
			} else if (type == 'inspection') {
				url = '/pages/pda/sample/inspection/index'
				url +=
					`?workOrderId=${this.info.id}&taskId=${taskId}&taskName=${taskName}`
				uni.navigateTo({
					url
				})
			} else if (type == 'inspectionJob') {
				url = '/pages/pda/sample/inspection/job'
				url += `?workOrderId=${this.info.id}&taskId=${taskId}&taskName=${taskName}`
				uni.navigateTo({
					url
				})
			} else if (type == 'warehousing') {

				url = '/pages/pda/warehousing/index'
				url += `?workOrderId=${this.info.id}&taskId=${taskId}`
				uni.navigateTo({
					url
				})
			} else if (type == 'skip') {
				uni.showModal({
					title: '提示',
					content: `是否跳过${taskName}工序！`,
					confirmText: '确认', //这块是确定按钮的文字
					success: rr => {
						if (rr.confirm) {
							let param = {
								taskId: this.currentTaskId || this.taskId,
								workOrderId: this.id
							}
							skipTask(param).then(res => {
								console.log(res)
							})

						} else {

						}
					}
				})
			} else if (type == 'outPicking') {
				url = '/pages/pda/picking/details'
				let _arr = JSON.stringify([this.info.id])
				url += `?arr=${encodeURIComponent(_arr)}&taskId=${taskId}&isOutsource=1`
				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}&taskType=${this.currentType}`
			uni.navigateTo({
				url
			})

		},

		handleFeedDetails() {
			let taskId = this.currentTaskId || this.taskId
			let url = '/pages/pda/feeding/bill/index'
			url += `?id=${this.info.id}&taskId=${taskId}`
			uni.navigateTo({
				url
			})


		},

		handDetails(item) {
			if (this.clientEnvironmentId == 2) {
				if (item.firstTaskDetails.length > 0) {
					this.$refs.productionDetailedRef.open(item)

				} else {
					uni.showToast({
						title: "暂无明细",
						icon: "none",
					})
				}

			}

		}
	}
}
</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>