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

<template>
	<view>
		<view class="title_box rx-bc">
			<view class="name">设备信息</view>

			<view class="btn_box rx-bc" @click="handleScan(workOrderId)" v-if='workOrderId'>
				<image class="scan" src="@/static/pda/ScanIt.svg"></image>
				更换设备
			</view>
		</view>


		<view class="material rx-ss" v-for="(item, index) in list" :key='index'>
			<view class="left rx-ss" @click="getDelete(index)" 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">
					<view class="lable rx-cc">工位名称</view>
					<view class="content">
						{{ item.workstationName || (item.extInfo && item.extInfo.workstationName) }}
					</view>
				</view>

				<view class="item">
					<view class="lable rx-cc">设备编码</view>
					<view class="content">
						{{ item.code }}
					</view>
				</view>

				<view class="item">
					<view class="lable rx-cc">设备名称</view>
					<view class="content">{{ item.name }}</view>
				</view>



				<view class="item rx-sc">
					<view class="rx ww50">
						<view class="lable  rx-cc">固资编码</view>
						<view class="content">{{ item.extInfo.fixCode }} </view>

					</view>


					<view class="rx ww50">
						<view class="lable ww80 rx-cc">编号</view>
						<view class="content">{{ item.extInfo.codeNumber }}</view>
					</view>

				</view>



				<view class="item">
					<view class="lable rx-cc">炉次号</view>
					<view class="content content_num">
						<input class="uni-input" v-model="item.extInfo.heatNumber"></input>
					</view>

					<view v-if="clientEnvironmentId == 2" class="lable rx-cc"
						:style="Object.prototype.hasOwnProperty.call(item.extInfo, 'turnoverList') && item.extInfo.turnoverList.length > 0 ? 'color: #E6A23C' : 'color: #157A2C'"
						@click="handleStorage(index)">货位</view>

				</view>



			</view>
		</view>

		<SearchPopup mode="center" v-if='popupShow'>
			<template v-slot:list>


				<view class="tab_box">
					<view class="tab_item" :style="tabAct == idxx ? 'color: #E6A23C' : ''"
						v-for="(idItem, idxx) in turnoverList" :key="idxx" @click="handTab(idxx)">
						{{ idItem.name }}{{ idxx + 1 }}
						<uni-icons style="margin-left: 10rpx;" custom-prefix="iconfont" @click.native="handDel(idxx)"
							type="icon-shanchu" size="16" color="#fa3534"></uni-icons>
					</view>

					<view class="tab_add" @click="handTabAdd()">新增</view>
				</view>

				<view v-for="(idItem, idxx) in turnoverList" :key="idxx" v-show="tabAct == idxx">




					<view class="search_list">
						<u-form labelPosition="left" :model="idItem" labelWidth="160" labelAlign="left"
							class="baseForm">

							<u-form-item label="周转车:" class="required-form" borderBottom prop="">
								<zxz-uni-data-select :localdata="turnover" v-model="idItem.turnoverId" dataValue='id'
									format='{name}-{code}' dataKey="id" filterable :clear='false'
									@change="e => changeTurnover(e, idxx)"></zxz-uni-data-select>
							</u-form-item>
							<view class="rx-bs" style="margin-top: 6rpx;" v-if="ishuoWei">

							</view>

						</u-form>
					</view>

					<view class="content_table2">
						<view class="head row rx-sc">
							<view class="item ww10">货位</view>
							<view class="item ww25">工单编号</view>
							<view class="item ww25">产品编码</view>
							<view class="item ww20">数量</view>
							<view class="item ww20">投料</view>

						</view>
						<view class="table">
							<u-list @scrolltolower="scrolltolower" class="z_list">
								<view class="tr row rx-sc" v-for="(it, idx) in idItem.positionList" :key='idx'>
									<view class="tr row rx-sc">
										<view class="item ww10">
											{{ it.code }}
										</view>
										<view class="item ww25 " :class="{'color157': it.workOrderCode === wordItem.code}">
											{{ it.workOrderCode }}
										</view>
										<view class="item ww25 " :class="{'color157': it.workOrderCode === wordItem.code}">
											{{ it.categoryCode }}
										</view>

										<view class="item ww20 ">
											<text>{{ it.quantity }} </text>
										</view>

										<view class="item ww20">
											<input :class="['uni-input', wordItem.code == it.workOrderCode && it.quantity > 0 ? 'content_num' : '']"
												v-model="it.feedNum" type="digit" :disabled="it.quantity <= 0 || wordItem.code != it.workOrderCode "
												@blur="Number(it.feedNum) > Number(it.quantity) ? it.feedNum = Number(it.quantity) : ''"></input>
										</view>

									</view>
								</view>

							</u-list>

						</view>


					</view>

				</view>




			</template>

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


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

				</view>
			</template>

		</SearchPopup>


	</view>
</template>

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

		ishuoWei: {
			type: Boolean,
			default: true
		},
		wordItem: {
			type: Object,
			default: () => { }
		},

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



	},
	data() {
		return {
			popupShow: false,
			formData: {
				turnoverId: null
			},
			listIndex: null,
			clientEnvironmentId: uni.getStorageSync("userInfo") && uni.getStorageSync("userInfo").clientEnvironmentId,

			turnoverList: [{
				name: '周转车',
				turnoverId: '',
				turnoverName: '',
				positionList: []
			}],

			tabAct: 0




		}
	},
	created() {

	},
	methods: {
		handleScan(id) {
			this.$emit('scanIt', id,)
		},

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

		handleStorage(idx) {
			this.listIndex = idx || 0
			this.popupShow = true


		},





		handleClose() {
			this.list[this.listIndex].extInfo.turnoverList = []
			this.popupShow = false
			this.listIndex = 0



		},

		handleOk() {
			this.listIndex = 0
			this.$set(this.list[this.listIndex].extInfo, 'turnoverList', this.turnoverList)
			this.popupShow = false
		},


		scrolltolower() { },


		changeTurnover(e, idxx) {



			let _arr = e.extInfo.positionList || []
			console.log(_arr)

			let isFalse = _arr.some(it => {
				return it.workOrderCode == this.wordItem.code && it.categoryCode == this.wordItem
					.productCode && it.quantity > 0
			})
			if (!isFalse) {
				uni.showToast({
					title: "该周转车没有此工单",
					icon: "none",
				})
				this.$set(this.turnoverList[idxx], 'turnoverId', '')
				this.$set(this.turnoverList[idxx], 'turnoverName', '')
				this.$set(this.turnoverList[idxx], 'positionList', [])

				return false
			}

			this.$set(this.turnoverList[idxx], 'turnoverName', e.name + '-' + e.code)
			this.$set(this.turnoverList[idxx], 'positionList', e.extInfo.positionList)
			this.$forceUpdate()

		},

		handTabAdd() {
			if (this.turnover.length <= this.turnoverList.length) {
				uni.showToast({
					title: "超过最大周转车数",
					icon: "none",
				})
				return false
			}

			this.turnoverList.push({
				name: '周转车',
				turnoverId: '',
				turnoverName: '',
				positionList: []
			})

			console.log(this.list[this.listIndex].extInfo)
			this.$forceUpdate()

		},

		handTab(idxx) {
			this.tabAct = idxx
		},

		handDel(idx) {
			if(this.turnoverList.length <= 1) {
				uni.showToast({
					title: "最少需要一个周转车",
					icon: "none",
				})
				return
			}
			this.turnoverList.splice(idx, 1)
		}
	}
}
</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: 60rpx;
		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;



	.content_table {
		width: 680rpx;
		border: 2rpx solid $border-color;
		margin-bottom: 10rpx;

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

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

			}


			.pd4 {
				padding: 4rpx 8rpx;
			}



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

		.ww50 {
			width: 50%;

		}

		.ww55 {
			width: 55%;
		}

		.ww45 {
			width: 45%;
		}
	}
}



.search_list {
	min-height: 100rpx;
	width: 96vw;
	padding: 0 8rpx;

	/deep/ .u-form-item__body {
		padding: 6rpx 0rpx !important;
	}

}




.content_table2 {
	width: 100%;
	margin-top: 6rpx;

	.row {
		width: 100%;


		.item {

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

		}

		.color157 {
			color: $theme-color;
		}


		.ww20 {
			width: 20%;
		}

		.ww25 {
			width: 25%;
		}



		.ww35 {
			width: 35%;

		}

		.ww10 {
			width: 10%;
		}



	}

	.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: 24rpx;
		}
	}



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

		.item {
			font-size: 24rpx;
			min-height: 64rpx;
			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;

		}
	}
}


.z_list {
	max-height: 500rpx;
}

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

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


}


.tab_box {
	margin-top: 14rpx;
	margin-left: 8rpx;
	display: flex;
	align-items: center;

	.tab_item {
		display: flex;
		padding: 0 6rpx;
		height: 48rpx;
		line-height: 48rpx;
		width: 128rpx;
		text-align: center;
		background: #157A2C;
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		color: #fff;
		border-radius: 4rpx;
		margin-right: 8rpx;
	}

	.tab_add {
		color: #157A2C;
		font-size: 34rpx;
	}
}
</style>