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)" v-if="!isDetails"
							type="icon-shanchu" size="16" color="#fa3534"></uni-icons>
					</view>

					<view class="tab_add" @click="handTabAdd()" v-if="!isDetails">新增</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)" v-if="!isDetails"></zxz-uni-data-select>
									<text v-else>{{ idItem.turnoverName}} </text>
							</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: () => []
			},

			isDetails: {
				type: Boolean,
				default: false
			}



		},
		data() {
			return {
				popupShow: false,

				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

				if (this.isDetails) {
					this.turnoverList = JSON.parse(JSON.stringify(this.list[0].extInfo.turnoverList))
				}
				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', JSON.parse(JSON.stringify(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>