app-hl/pages/task-detail/index.vue

<template>
	<view class="detail">
		<view class="base-info module">
			<view class="title">派工单（编号： #{{code}}）</view>
			<view class="cont">
				<view class="item">
					<view class="label">产品状态：</view>
					<view class="val yjd">{{statusMap[detailInfo.status]}}</view>
				</view>
				<view class="item">
					<view class="label">产品名称：</view>
					<view class="val">{{detailInfo.productName}}</view>
				</view>
				<view class="item">
					<view class="label">派工工序：</view>
					<view class="val">{{detailInfo.procedureName}}</view>
				</view>
				<view class="item">
					<view class="label">任务编号：</view>
					<view class="val">{{detailInfo.code}}</view>
				</view>
				<view class="item">
					<view class="label">完成时限：</view>
					<view class="val"  v-if="detailInfo.startWorkTime">
						{{detailInfo.startWorkTime | formatDate}} ～ {{detailInfo.endWorkTime | formatDate}}
					</view>
				</view>

				<view class="item">
					<view class="label">派工数量：</view>
					<view class="val">{{detailInfo.processingProductAmount}}</view>
				</view>
				<view class="item">
					<view class="label">预计工时：</view>
					<view class="val">{{detailInfo.predictWorkTime}}</view>
				</view>
				<view class="item">
					<view class="label">总报工产量：</view>
					<view class="val">{{detailInfo.reportAmount}}</view>
				</view>

				<view class="item">
					<view class="label">总实际工时：</view>
					<view class="val">{{detailInfo.workTime}}</view>
				</view>

			</view>
		</view>
		<view class="pg-info module" v-if="isQC">
			<view class="cont">
				<view class="item">
					<view class="label">合格数量</view>
					<view class="val">
						{{ detailInfo.qualifiedAmount || 0 }}
					</view>
				</view>
				<view class="item">
					<view class="label">不合格数量</view>
					<view class="val">
						{{ detailInfo.unqualifiedAmount || 0 }}
					</view>
				</view>
				<view class="item">
					<view class="label">报废数量</view>
					<view class="val">
						{{ detailInfo.scrapAmount || 0 }}
					</view>
				</view>
				<view class="item">
					<view class="label">返修数量</view>
					<view class="val">
						{{ detailInfo.repairAmount || 0 }}
					</view>
				</view>
			</view>
		</view>
		<view class="module" v-if="detailInfo.reportList && detailInfo.reportList.length">
			<view class="title">历史报工明细</view>
			<view class="cont" v-for="item in detailInfo.reportList" :key="item.id">
				<view class="item">
					<view class="label">生产开始时间：</view>
					<view class="val">{{item.startTime | formatDate}}</view>
				</view>
				<view class="item">
					<view class="label">生产结束时间：</view>
					<view class="val">{{item.endTime | formatDate}}</view>
				</view>
				<view class="item">
					<view class="label">报工产量：</view>
					<view class="val">{{item.reportAmount}}</view>
				</view>
				<view class="item">
					<view class="label">实际工时：</view>
					<view class="val">{{item.realWorkTime}}</view>
				</view>
				<block v-if="isQC">
					<view class="item">
						<view class="label">合格数量：</view>
						<view class="val">0</view>
					</view>
					<view class="item">
						<view class="label">不合格数量：</view>
						<view class="val">1</view>
					</view>
					<view class="item">
						<view class="label">报废数量：</view>
						<view class="val">2</view>
					</view>
					<view class="item">
						<view class="label">返修数量：</view>
						<view class="val">3</view>
					</view>
				</block>
			</view>
		</view>

		<block v-if="status !=='FINISHED'">
			<block v-if="isStaff">
				<good-drawer @close="closeDrawer" @submit="handleLQSubmit" ref="drawer" :detailList="detailList">
				</good-drawer>
				<view class="action">
					<view class="llsq item" @click="handleSQ">领料申请</view>
					<view class="next item" @click="handleNext">下一步</view>
				</view>
			</block>
			<block v-else>
				<view class="action">
					<view class="next item" @click="handleNext">下一步</view>
				</view>
			</block>
		</block>
	</view>
</template>

<script>
	import goodDrawer from '@/components/good-drawer/good-drawer.vue'
	import {
		getToken
	} from '@/utils/auth'
	import {
		produceDetailApi,
		produceOperateApi,
		produceReportApi,
		produceRecieveApi
	} from '@/api/task-detail'
	export default {
		components: {
			goodDrawer
		},
		data() {
			return {
				id: '',
				code: 0,
				status: '',
				detailInfo: {},
				detailList: [],
				statusText: '已开工'
			};
		},
		computed: {
			isLogin() {
				return !!getToken()
			},
			statusMap() {
				return this.$store.state.user.statusMap || {};
			},
			isStaff() {
				const produceGroupType = this.$store.state.user.userInfo.produceGroupType || '’';
				return produceGroupType == 'PROCESS'
			},
			isQC() {
				const produceGroupType = this.$store.state.user.userInfo.produceGroupType || '’';
				return produceGroupType == 'QC'
			},
			produceGroupType() {
				const produceGroupType = this.$store.state.user.userInfo.produceGroupType || '’';
				return produceGroupType
			}
		},
		onShow() {
			if (!this.isLogin) {
				uni.navigateTo({
					url: '/pages/login'
				})
			}
		},
		onLoad(option) {
			this.status = option.status
			this.id = option.id
			this.code = option.code
			this.statusText = this.statusMap[this.status] || '已开工',
				this.initData()
		},
		//时间戳的处理    
		filters: {
			formatDate: function(value) {
				var date = new Date();
				date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}
		},
		methods: {
			handleSQ() {
				this.$refs.drawer.$refs.showLeft.open()
			},
			handleLQSubmit(detailList) {
				const params = {
					taskId: this.id,
					detailList
				}
				produceRecieveApi(params).then(res => {
					const {
						code,
						data,
						msg
					} = res
					this.$refs.drawer.$refs.showLeft.close()
				})
			},
			closeDrawer() {
				this.$refs.drawer.$refs.showLeft.close()
			},
			handleNext() {
				uni.navigateTo({
					url: `/pages/bg-detail/index?id=${this.id}&status=${this.status}`
				});
			},
			initData() {
				const taskType = this.$store.state.user.userInfo.produceGroupType
				const params = {
					id: this.id,
					taskType
				}
				produceDetailApi(params).then(res => {
					const {
						code,
						data,
						msg
					} = res

					this.detailInfo = data
					const dataList = data.detailList
					this.detailList = dataList.map(e => {
						const obj = {
							id: e.id,
							productId: e.productId,
							productName: e.productName,
							spec: e.spec,
							receiveAmount: e.receiveAmount,
							amount: 1
						}
						return obj
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		width: 100%;
		height: 100%;
		background: #fff;
		

		.module {
			margin: 20rpx;
			padding: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 0px 0px 8px 0px rgba(161, 161, 177, 0.12);

			.title {
				font-size: 28rpx;
				font-weight: 600;
				padding-bottom: 8px;
				color: #0D0D26;
				border-bottom: 1px solid #eaeef1;
			}

			.cont {
				background: #FAFAFD;
				padding: 20rpx;
				margin: 20rpx 0 10rpx;

				.item {
					margin: 20rpx 0;
					display: flex;

					// justify-content: space-between;
					.label {
						color: #95969D;
						margin-right: 20rpx;
						font-size: 28rpx;

						&.name {
							color: #356899;
							font-size: 36rpx;
						}
					}

					.val {
						color: #0D0D26;
						font-size: 28rpx;

						&.yjd {
							background: #E8FFEA;
							color: #356899;
							font-size: 24rpx;
							padding: 6rpx 10rpx;
						}
					}
				}
			}

			&.bgInfo {
				display: flex;
				justify-content: space-around;

				.item {
					flex: 1;
					text-align: center;

					.label {
						font-size: 24rpx;
						color: #95969D;
					}

					.val {
						font-size: 32rpx;
						color: #0D0D26;
						margin-top: 4rpx;
					}
				}
			}

		}
		
		.pg-info {
			.cont {
				display: flex;
				.item {
					flex: 1;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					.val {
						margin-top: 20rpx;
					}
				}
			}
		}

		.popup {
			.table {
				width: 400rpx;
			}
		}

		.action {
			border-top: 1px solid #95969D;
			padding: 20rpx 0;
			width: 100%;
			margin: 40rpx auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				flex: 1;
				color: #fff;
				margin: 0 40rpx;
				padding: 10px 0;
				font-weight: 600;
				border-radius: 20rpx;
				font-size: 32rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;

				&.bg {
					background-color: #409eff;
				}

				&.llsq {
					background-color: #FF7D00;
				}

				&.next {
					background-color: #356899;
				}

				&.start {
					background-color: #FF7D00;
				}

				&.end {
					background-color: #356899;
				}

				&.tjbg {
					background-color: #409eff;
				}

			}

		}
	}
</style>