aiot-app/pages/pda/feeding/components/semiProductBom.vue

<template>
	<view>
		<view class="title_box rx-bc">
			<view class="name">物料明细 ({{ list.length || 0 }})个</view>
			<view class="btn_box rx-cc" v-if="deviceList.length > 1" @click="bindDevice">绑定设备</view>
		</view>

		<u-list @scrolltolower="scrolltolower" class="z_list" style="height: 100% !important;">

			<view class="material rx-ss" v-for="(mate, idx) in list" :key="idx">
				<view class="left rx-ss" @click="getDelete(idx)" v-if='workOrderId'>
					<uni-icons custom-prefix="iconfont" type="icon-shanchu" size="20" color="#fa3534"></uni-icons>
				</view>
				<view class="content_table">


					<view class="item rx-sc"
						v-if='([23, 2, 9, 28].includes(Number(mate.rootCategoryLevelId))) && mate.isConsumable == 1'>
						<view class="rx ">
							<view class="lable rx-cc">编码</view>
							<view class="content rx-bc">
								<view>{{ mate.code }} </view>
								<view class="tag_box"
									v-if="Object.prototype.hasOwnProperty.call(mate, 'extInfo') && Object.prototype.hasOwnProperty.call(mate.extInfo, 'productionTimes') && Object.prototype.hasOwnProperty.call(mate.extInfo.productionTimes, item.currentTaskDiagram.taskId)">
									{{ mate.extInfo.productionTimes[item.currentTaskDiagram.taskId] }}
								</view>


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

					<view class="item rx-bc"
						v-if='([23, 2, 9, 28].includes(Number(mate.rootCategoryLevelId))) && mate.isConsumable == 0'
						@click="handleCheck(idx, mate)">
						<view class="rx ">
							<view class="lable rx-cc">编码</view>
							<view class="content rx-bc">
								<view>{{ mate.code }}</view>
								<view class='tag_box' v-if="mate.isCache" style="margin-right: -36rpx;">缓</view>
							</view>
						</view>

						<view class="rx-cc ww20" v-if="deviceList.length > 1">
							<image class="check" v-if="mate.check" src='../../../../static/check.png'></image>
							<image class="check" v-if="!mate.check" src='../../../../static/check_no.png'></image>
						</view>
					</view>


					<view class="item">
						<view class="lable rx-cc">名称</view>
						<view class="content">{{ mate.name }} <text
								v-if="[2, 23, 9, 28].includes(Number(mate.rootCategoryLevelId))">
								({{ mate.rootCategoryLevelId == 2 ? '在制品' : mate.rootCategoryLevelId == 23 ? '半成品' :
									mate.rootCategoryLevelId == 9 ? '产品' : mate.rootCategoryLevelId == 28 ? '废品' : '' }})
							</text></view>
					</view>



					<view class="item" v-for="(itm, index) in tableH(mate.rootCategoryLevelId)" :key="index">
						<view class="lable rx-cc">{{ itm.label }}</view>
						<view class="content">{{ mate[itm.prop] }}</view>
					</view>


					<!-- <view class="item" v-if='mate.isConsumable == 1'>
						<view class="lable rx-cc">包装库存</view>
						<view class="content">{{ mate.packingCountBase }}/ {{ mate.minUnit }}</view>
					</view> -->


					<view class="item rx-sc" v-if='mate.isConsumable == 0 && workInfo.singleReport != 0'>
						<view class="rx ww50">
							<view class="lable  rx-cc">{{ currentTaskDiagram.isFirstTask == 1 ? '物料重量' : '上道重量' }}
							</view>
							<view class="content" v-if="currentTaskDiagram.isFirstTask == 1">
								{{ mate.extInfo.weight || 0 }} {{ mate.extInfo.weightUnit }}
							</view>
							<view class="content" v-if="currentTaskDiagram.isFirstTask == 0">
								{{ mate.extInfo.newWeight || 0 }} {{ mate.extInfo.weightUnit }}
							</view>
						</view>

						<view class="rx ww50">
							<view class="lable ww80 rx-cc">刻码</view>
							<view class="content">{{ mate.extInfo.engrave }}</view>
						</view>



					</view>
					<view class="item rx-sc" v-if='mate.isConsumable == 0 && workInfo.singleReport != 0'>
						<view class="rx ww50">
							<view class="lable rx-cc">序列号</view>
							<view class="content">{{ mate.extInfo.productSequence }}</view>
						</view>


						<view class="rx ww50" v-if='mate.isConsumable == 0 && workInfo.singleReport != 0'>
							<view class="lable rx-cc">物料代号</view>
							<view class="content">{{ mate.extInfo.materielCode }}</view>
						</view>

					</view>

					<view class="item" v-if='mate.isConsumable == 0 && workInfo.singleReport != 0'>
						<view class="lable rx-cc">客户代号</view>
						<view class="content">{{ mate.extInfo.clientCode }}</view>
					</view>

					<view class="item" v-if='mate.isConsumable == 0 && deviceList.length > 0'>
						<view class="rx ww70">
							<view class="lable rx-cc">设备</view>
							<view class="content content_num">

								<zxz-uni-data-select v-if="!isDetails" :localdata="deviceList" v-model="mate.deviceId"
									dataValue='id' format='{name}-{codeNumber}' @change="e => selectVal(e, mate, idx)"
									dataKey="id" filterable :clear='false'></zxz-uni-data-select>
								<span v-if="isDetails">{{ mate.deviceName }}</span>
							</view>
						</view>
						<view class="rx ww30">
							<view class="lable rx-cc ww80">炉次号</view>
							<view class="content content_num ">
								<input class="uni-input" style="width: 120rpx;"
									v-model="mate.extInfo.heatNumber"></input>
							</view>
						</view>
					</view>



					<view class="item" v-if='mate.isConsumable == 0 && workInfo.singleReport == 0'>
						<view class="lable rx-cc">投料类型</view>
						<view class="content" style="color:#157A2C;">{{ workInfo.singleReport == 0 ? '批量投料' : '' }}
						</view>
					</view>



					<view class="item rx-sc" v-if='mate.isConsumable == 0'>
						<view class="rx ww50">
							<view class="lable rx-cc">位置</view>
							<view class="content content_num ">
								<input class="uni-input" v-model='mate.extInfo.position'></input>
							</view>

						</view>

						<view class="rx ww50">
							<view class="lable rx-cc ww80">数量</view>
							<view class="content content_num   ">
								<input class="uni-input" style="width: 160rpx;" v-model="mate.feedQuantity"
									type="digit"></input>
								<view class="unit ">/{{ mate.unit }}</view>
							</view>
						</view>

					</view>





					<view class="item" v-if='mate.isConsumable == 1'>
						<view class="lable rx-cc">数量</view>
						<view class="content content_num">
							<input class="uni-input" v-model="mate.feedQuantity" type="digit"></input>
							<view class="unit">/{{ mate.unit }}</view>
						</view>
					</view>




				</view>
			</view>

		</u-list>

		<SearchPopup mode="center" v-if='deviveShow'>
			<template v-slot:list>
				<view class="search_list">


					<u-form labelPosition="left" :model="formData" labelWidth="180" labelAlign="left" class="baseForm">

						<u-form-item label="绑定设备:" class="required-form" borderBottom prop="assetType">

							<zxz-uni-data-select :localdata="deviceList" v-model="formData.deviceId" dataValue='id'
								format='{name}-{codeNumber}' @change="e => formData.deviceName = e.name + e.codeNumber"
								dataKey="id" filterable :clear='false'></zxz-uni-data-select>

						</u-form-item>

					</u-form>

				</view>
			</template>

			<template v-slot:operate>
				<view class="operate_box rx-bc">
					<u-button size="small" class="u-reset-button" @click="deviceClose">
						取消
					</u-button>


					<u-button type="success" size="small" class="u-reset-button" @click="deviceOk">
						确定
					</u-button>

				</view>
			</template>

		</SearchPopup>


	</view>
</template>

<script>
import {
	tableHeader
} from './feedBom.js'
import SearchPopup from '../../components/searchPopup.vue'
export default {
	components: {
		SearchPopup
	},
	props: {
		workOrderId: {
			type: String,
			default: ''
		},
		list: {
			type: Array,
			default: () => []
		},
		equipmentList: {
			type: Array,
			default: () => []
		},

		currentTaskDiagram: {
			type: Object,
			default: () => { }
		},
		isDetails: {
			type: Boolean,
			default: false
		},

		workInfo: {
			type: Object,
			default: () => { }
		}
	},

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


			}
		},
	},

	data() {
		return {
			deviceList: [],



			deviveShow: false,
			formData: {
				deviceId: null,
				deviceName: null,
			}
		}
	},
	created() {

	},
	methods: {
		tableH(type) {
			return tableHeader(type)
		},

		getDelete(idx) {
			this.list.splice(idx, 1)
		},

		scrolltolower() { },



		handleCheck(idx, it) {
			this.$set(this.list[idx], 'check', !it.check)
		},

		selectVal(e, item, idx) {
			this.$set(this.list[idx], 'deviceName', e.name + '-' + e.codeNumber)
			this.$set(this.list[idx]['extInfo'], 'heatNumber', e.extInfo.heatNumber)
		},

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


		bindDevice() {
			this.deviveShow = true
		},

		deviceOk() {
			let arr = this.list.filter(e => {
				return e.check
			})
			if (arr.length <= 0) {
				uni.showToast({
					icon: 'none',
					title: '请先勾选半成品'
				})
				return false
			}

			if (!this.formData.deviceId) {
				uni.showToast({
					icon: 'none',
					title: '请先选择设备'
				})
				return false
			}

			this.list.forEach(e => {
				if (e.check) {
					e['deviceId'] = this.formData.deviceId
					e['deviceName'] = this.formData.deviceName
				}

			})
			this.$forceUpdate()
			this.deviceClose()

		},

		deviceClose() {
			this.formData.deviceName = null
			this.formData.deviceId = null
			this.deviveShow = false
		},
	}
}
</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 {
		padding: 0 18rpx;
		height: 48rpx;

		background: $theme-color;
		font-size: 26rpx;
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		color: #fff;
		border-radius: 4rpx;

		.scan {
			width: 34rpx;
			height: 34rpx;
			margin-right: 12rpx;

		}

	}

}

.material {
	margin-top: 10rpx;

	.left {
		width: 40rpx;
	}

	.zdy_check {
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid #c8c9cc;
		border-radius: 4rpx;

	}

	.check_active {
		background: $theme-color;
		border: 2rpx solid $theme-color;

		/deep/ .u-icon__icon {
			color: #fff !important;
		}
	}

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

		.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;
			}

			.ww80 {
				width: 80rpx;
			}

			.content {
				width: 500rpx;
				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;

			}

			.content_num {

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

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

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

			.ww400 {
				/deep/ .uni-input-input {
					width: 400rpx;
				}
			}

			.pd4 {
				padding: 4rpx 8rpx;
			}



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

		.ww55 {
			width: 55%;
		}

		.ww45 {
			width: 45%;
		}

		.ww50 {
			width: 50%;

		}

		.ww30 {
			width: 30%;
		}


		.ww70 {
			width: 70%;
		}


		.ww80 {
			width: 80%;
		}

		.ww20 {
			width: 20%;
		}

		.check {
			width: 30rpx;
			height: 30rpx;
		}

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


.z_list {
	max-height: 2000rpx;
}




.search_list {
	min-height: 100rpx;
	width: 90vw;

	/deep/ .baseForm {
		padding: 0 20rpx;
	}
}

.operate_box {
	padding: 10rpx 32rpx;

	/deep/ .u-button {
		width: 40%;
	}
}
</style>