aiot-app/pages/pda/jobBooking/components/semiProductJobBomPL.vue

<template>
	<view>
		<view class="title_box rx-bc">
			<view class="name"> 报工信息： ({{list.length || 0}})个</view>
		</view>


		<view :class="['material', it.extInfo.reportWeight && it.extInfo.reportWeight && 'materialBor']"
			v-for="(it, idx) in list" :key="it.id + idx">


			<view class="content_table">

				<view class="item rx-sc">
					<view class="rx">
						<view class="lable lable190 rx-cc " @click="getDelete2(idx)">
							<view class="round">{{idx + 1}}</view>
							<uni-icons custom-prefix="iconfont" type="icon-shanchu" size="16"
								color="#fa3534"></uni-icons>
							物料编码

						</view>
						<view class="content rx-bc">
							<view>{{it.code}} </view>
							<view class="tag_box"
								v-if="Object.prototype.hasOwnProperty.call(it, 'extInfo')  && Object.prototype.hasOwnProperty.call(it.extInfo, 'productionTimes') &&  Object.prototype.hasOwnProperty.call(it.extInfo.productionTimes,item.currentTaskDiagram.taskId) ">
								{{ it.extInfo.productionTimes[item.currentTaskDiagram.taskId]}}
							</view>


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

				<view class="item rx-sc">
					<view class="rx">
						<view class="lable lable150 rx-cc ">名称</view>
						<view class="content rx-bc">

							<view>{{it.name}} <text v-if="[2, 23,9,28].includes(Number(it.rootCategoryLevelId))">

									({{it.rootCategoryLevelId == 2 ? '在制品' :  it.rootCategoryLevelId == 23 ? '半成品' :  it.rootCategoryLevelId == 9 ? '产品' :   it.rootCategoryLevelId == 28 ? '废品' : '' }})
								</text> </view>

							<view class="tag_box " v-if="it.isCache" style="margin-right: -36rpx;">缓</view>
						</view>
					</view>
				</view>

				<view class="item rx-sc">
					<view class="rx">
						<view class="lable lable150 rx-cc ">型号</view>
						<view class="content rx-sc">
							<view>{{it.modelType}}</view>
						</view>
					</view>
				</view>



				<view class="item rx-sc">
					<view class="rx ww50">
						<view class="lable lable150 rx-cc ">设备</view>
						<view class="content rx-sc">
							<view>{{ it.deviceName || it.extInfo.deviceName }}</view>
						</view>
					</view>

					<view class="rx ww50">
						<view class="lable lable150  rx-cc ">炉次号</view>

						<view class="content content_num ">
							<view v-if='isDetails'>{{it.extInfo.heatNumber }}</view>
							<input class="uni-input" v-else v-model="it.extInfo.heatNumber"></input>
						</view>

					</view>

				</view>


				<view class="item rx-sc">
					<view class="rx">
						<view class="lable lable190 rx-cc ">{{ it.extInfo.newWeight ? '上道工序总重量' : '物料总重量' }}</view>
						<view class="content rx-sc">

							<view v-if="it.extInfo.newWeight">{{it.extInfo.newWeight }} / {{it.extInfo.weightUnit}}
							</view>


							<view v-else> {{ toFixedFn(it.extInfo.weight, it.feedQuantity)  }} /
								{{it.extInfo.weightUnit }} </view>
						</view>
					</view>
				</view>

				<view class="item rx-sc">


					<view class="rx ww50">
						<view class="lable lable150  rx-cc ">投料数量</view>
						<view class="content content_num ">
							<view style="color:#157A2C;">{{it.feedQuantity }}</view>
						</view>

					</view>

					<view class="rx ww50">
						<view class="lable lable150 rx-cc ">投料类型</view>
						<view class="content rx-sc" style="color:#157A2C;">
							<view>批量投料</view>
						</view>
					</view>


				</view>



			</view>



			<view class="content_table2">
				<view class="head row rx-sc">
					<view class="item ww25" style="font-size: 20rpx;">
						合格品数量
					</view>
					<view class="item ww25">报工总重量/{{it.extInfo.weightUnit}} </view>

					<view class="item ww40 rx-bc">
						<text>处置</text>
						<image v-if='!isDetails' class="icon" @click="handAddListPL(it, idx)"
							src="~@/static/pda/add.svg" style="width: 46rpx;height: 46rpx;margin-right: 12rpx;"></image>

					</view>
					<view class="item ww10 ">
						操作
					</view>
				</view>

				<view class="table">
					<view class="tr row rx-sc" v-for="(yy, yyIdx) in it.extInfo.batchReportInfo">
						<view class="item ww25 content_num">
							<view v-if='isDetails'>{{yy.allFeedQuantity }}</view>
							<input class="uni-input" v-else v-model="yy.allFeedQuantity"
								@input="blurNum($event,idx, yyIdx)" type='number'></input>
						</view>
						<view class="item ww25 content_num">
							<view v-if='isDetails'>{{yy.allReportWeight }}</view>
							<input class="uni-input" v-else v-model="yy.allReportWeight" type='digit'></input>
						</view>



						<view class="item ww40" v-if='isDetails'>
							{{it.extInfo.taskName}}
						</view>

						<view class="item ww40" v-else>
							<zxz-uni-data-select :localdata="stepsList" v-model="yy.taskId" dataValue='taskId'
								format='{taskTypeName}' dataKey="taskId" filterable
								@change=" e => yy.taskName = e.taskTypeName" :clear='false'></zxz-uni-data-select>
						</view>

						<view class="item ww10">
							<uni-icons v-if='!isDetails' custom-prefix="iconfont" type="icon-shanchu" size="16"
								@click="handDel3(idx, yyIdx)" color="#fa3534"></uni-icons>
						</view>


					</view>

				</view>

			</view>



		</view>






	</view>
</template>

<script>
	import {
		getTaskInstanceList
	} from '@/api/pda/workOrder.js'


	export default {
		props: {
			item: {
				type: Object,
				default: () => {}
			},

			list: {
				type: Array,
				default: () => []
			},

			isDetails: {
				type: Boolean,
				default: false

			},

			equipmentList: {
				type: Array,
				default: () => []
			},


		},

		watch: {
			equipmentList: {
				immediate: true,
				deep: true,
				handler(newVal) {
					this.deviceList = newVal
					this.changeHeatNumber()
				}
			},
		},


		data() {
			return {



				stepsList: [],




				deviceList: []





			}
		},
		created() {

			this.getSteps()


		},
		methods: {



			getSteps() {

				getTaskInstanceList(this.item.workOrderId).then(res => {
					if (this.item.singleReport == 1) {
						this.stepsList = res
					} else {
						this.stepsList = res.filter(f => f.type != 6);
					}

				})
			},


			handAddListPL(it, idx) {
				this.list[idx].extInfo.batchReportInfo.push({
					allFeedQuantity: '',
					allReportWeight: '',
					taskId: '',
					taskName: ''
				})
			},

			handDel3(idx, yyIdx) {
				this.list[idx].extInfo.batchReportInfo.splice(yyIdx, 1)
			},

			blurNum(event, idx, yyIdx) {

				let value = event.target.value;
				value = value.replace(/\./g, '');
				this.$set(this.list[idx].extInfo.batchReportInfo[yyIdx], 'allFeedQuantity', value);

				let count = 0
				this.list[idx].extInfo.batchReportInfo.forEach(m => {
					count = count + Number(m.allFeedQuantity || 0)
				})

				if (count > this.list[idx].feedQuantity) {

					this.$set(this.list[idx].extInfo.batchReportInfo[yyIdx], 'allFeedQuantity', 0)
					this.$forceUpdate()

					uni.showToast({
						title: `投料合格品数不能大于投料数量`,
						icon: 'none'
					})


				}

			},


			getDelete2(idx) {
				uni.showModal({
					title: '删除',
					content: '是否确实删除此物料！',
					confirmText: '确认', //这块是确定按钮的文字
					success: rr => {
						if (rr.confirm) {
							this.list.splice(idx, 1)
						}

					}
				})
			},



			changeHeatNumber() {
				this.deviceList.forEach(f => {
					this.list.forEach(o => {
						if (o.deviceId && f.instanceId == o.deviceId && this.deviceList.length > 1) {
							o.extInfo.heatNumber = f.extInfo.heatNumber
							this.$forceUpdate()
						} else if (this.deviceList.length == 1) {
							o.extInfo.heatNumber = this.deviceList[0].extInfo.heatNumber
							this.$forceUpdate()
						}
					})
				})
			},

			toFixedFn(weight, num) {
				let total = Number(weight) * Number(num)
				return total.toFixed(2)
			}

		}
	}
</script>

<style lang="scss" scoped>
	.title_box {
		margin-top: 20rpx;

		.name {
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			color: $theme-color;
			padding-left: 20rpx;

			position: relative;

			&:before {
				position: absolute;
				content: '';
				left: 0rpx;
				top: 0rpx;
				bottom: 0rpx;
				width: 4rpx;
				height: 28rpx;
				background: $theme-color;
				margin: auto;
			}


		}

		.btn_box {

			.btn {
				padding: 0 18rpx;
				height: 50rpx;
				line-height: 50rpx;
				background: $theme-color;
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				color: #fff;
				border-radius: 4rpx;
				margin-left: 24rpx;
			}
		}



	}




	.material {
		margin-top: 16rpx;
		border: 1rpx solid transparent;


		.content_table {
			width: 100%;
			border: 2rpx solid $border-color;

			box-sizing: border-box;

			.item {
				display: flex;
				border-bottom: 2rpx solid $border-color;

				.lable {
					width: 132rpx;
					text-align: center;
					background-color: #F7F9FA;
					font-size: 26rpx;
					border-right: 2rpx solid $border-color;
					flex-shrink: 0;
				}

				.lable150 {
					width: 156rpx !important;
					font-size: 24rpx;
				}

				.lable190 {
					width: 200rpx !important;
					font-size: 24rpx;
				}

				.ww80 {
					width: 80rpx;
				}

				.content {
					width: 518rpx;
					min-height: 64rpx;
					font-size: 28rpx;
					line-height: 28rpx;
					font-style: normal;
					font-weight: 400;
					padding: 18rpx 8rpx;
					box-sizing: border-box;
					word-wrap: break-word;
					flex-grow: 1 !important;


					.unit {
						padding: 0 4rpx;
						font-size: 24rpx;
						color: #404446;
					}

					.penalize {
						width: 160rpx;
						line-height: 60rpx;
						background: $theme-color;
						font-size: 24rpx;
						text-align: center;
						color: #fff;
					}

				}



				.content_H {
					min-height: 92rpx;
				}

				.pd4 {
					padding: 4rpx 8rpx;
				}



				&:last-child {
					border-bottom: none;
				}
			}

			.ww55 {
				width: 55%;
			}

			.ww10 {
				width: 10%;
			}

			.ww40 {
				width: 40%;
			}

			.ww50 {
				width: 50%;
			}

			.ww45 {
				width: 45%;
			}

			.tag_box {
				padding: 2rpx 10rpx;
				margin-right: 12rpx;
				background: #E6A23C;
				font-size: 22rpx;
				color: #fff;
				border-radius: 4rpx;
			}
		}
	}


	.materialBor {
		border: 1rpx solid #157A2C
	}


	.content_table2 {
		width: 100%;


		.row {
			width: 100%;


			.item {

				color: #404446;
				font-size: 28rpx;
				padding-left: 12rpx;

			}

			.color157 {
				color: $theme-color;
			}


			.ww30 {
				width: 30%;
			}

			.ww20 {
				width: 20%;
			}

			.ww15 {
				width: 15%;
			}

			.ww25 {
				width: 25%;
			}

			.ww50 {
				width: 50%;
			}


			.ww10 {
				width: 10%;
			}

			.ww40 {
				width: 40%;
			}

		}

		.head {
			height: 64rpx;
			background: #F7F9FA;
			// border-top: 2rpx solid #E3E5E5;
			border-left: 2rpx solid #E3E5E5;
			box-sizing: border-box;

			.item {
				height: 64rpx;
				line-height: 64rpx;
				border-right: 2rpx solid #E3E5E5;
				box-sizing: border-box;
				font-size: 22rpx;
			}
		}



		.tr {
			border-top: 2rpx solid #E3E5E5;
			border-left: 2rpx solid #E3E5E5;


			.item {
				font-size: 24rpx;
				min-height: 74rpx;
				display: flex;
				align-items: center;
				border-right: 2rpx solid #E3E5E5;
				box-sizing: border-box;
				white-space: normal;
				word-break: break-all;

			}


			&:last-child {
				border-bottom: 2rpx solid #E3E5E5;

			}

			.numerate {
				font-size: 22rpx;
				color: $theme-color;
			}
		}
	}

	.content_num {
		display: flex;
		align-items: center;
		padding: 0 4rpx;

		/deep/ .uni-input-input {
			border: 2rpx solid #F0F8F2;
			box-sizing: border-box;
			background: #F0F8F2;
			color: $theme-color;
		}


	}

	.round {
		width: 32rpx;
		height: 32rpx;
		line-height: 30rpx;
		text-align: center;
		border-radius: 50%;
		background: $theme-color;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		color: #fff;
		margin-right: 10rpx;

	}
</style>