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>
		<u-list @scrolltolower="scrolltolower" class="z_list2">
			<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 v-if="item.isSJSB === '1'">
						<!-- v-if="item.isSBFL==" -->
						<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 class="item"
							v-if="clientEnvironmentId == 2 && Object.prototype.hasOwnProperty.call(item, 'equipmentLabelJson') && item.equipmentLabelJson.length != 0 && item.equipmentLabelJson[0].SBFL == 1">
							<view class="lable rx-cc">是否封炉</view>
							<view class="content">
								<u-checkbox-group v-model="item.isSBFL" size="15px">
									<u-checkbox labelSize="15px" iconSize="10px" activeColor="#157A2C" name="true"
										label="是"></u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
					</view>

					<view v-else>
						<!-- v-if="item.isSBFL==" -->
						<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 class="item"
							v-if="clientEnvironmentId == 2 && Object.prototype.hasOwnProperty.call(item, 'equipmentLabelJson') && item.equipmentLabelJson.length != 0 && item.equipmentLabelJson[0].SBFL == 1">
							<view class="lable rx-cc">是否封炉</view>
							<view class="content">
								<u-checkbox-group v-model="item.isSBFL" size="15px">
									<u-checkbox labelSize="15px" iconSize="10px" activeColor="#157A2C" name="true"
										label="是"></u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
					</view>

				</view>
			</view>

		</u-list>
		<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>


						</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 || isDetails"
												@blur="Number(it.feedNum) > Number(it.quantity) ? it.feedNum = Number(it.quantity) : ''"></input>
										</view>

									</view>
								</view>

							</u-list>

						</view>


					</view>


					<u-line color="#2979ff" style="margin: 16rpx 0;"></u-line>



					<!-- 卸车 -->
					<view v-if="type !== 'feeding'">
						<view class="search_list">
							<u-form labelPosition="left" :model="idItem" labelWidth="200" labelAlign="left"
								class="baseForm">

								<u-form-item label="卸到周转车:" class="required-form" borderBottom prop="">
									<zxz-uni-data-select :localdata="unloadTurnover" v-model="idItem.unloadTurnoverId"
										dataValue='id' format='{name}-{code}' dataKey="id" filterable :clear='false'
										@change="e => changeUnloadTurnover(e, idxx, idItem)"
										v-if="!isDetails"></zxz-uni-data-select>
									<text v-else>{{ idItem.unloadTurnoverName }} </text>
								</u-form-item>


							</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.unloadPositionList"
										: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 || isDetails"
													@blur="Number(it.feedNum) > Number(it.quantity) ? it.feedNum = Number(it.quantity) : ''"></input>
											</view>

										</view>
									</view>

								</u-list>

							</view>


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




			</template>

			<template v-slot:operate>
				<view style="margin-bottom: 10px;">
					和：{{ feedingSumNum }}
				</view>

				<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: ''
		},

		type: {
			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,// *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境

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

				unloadTurnoverId: '',
				unloadTurnoverName: '',
				unloadPositionList: []
			}],

			unloadTurnover: [],
			feedingSumNum: 0,


			tabAct: 0




		}
	},
	created() {


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

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

		handleStorage(idx) {
			this.listIndex = idx || 0
			this.feedingSumNum = 0;
			if (Object.prototype.hasOwnProperty.call(this.list[0].extInfo, 'turnoverList')) {
				this.unloadTurnover = this.turnover

				this.turnoverList = JSON.parse(JSON.stringify(this.list[0].extInfo.turnoverList)) || this.turnoverList
			}

			console.log(this.turnoverList, 'this.turnoverList');

			this.turnoverList.forEach(v => {
				v.positionList.forEach(d => {
					if (d.feedNum) {
						this.feedingSumNum += Number(d.feedNum)
					}
				})

			})





			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)
		},


		changeUnloadTurnover(e, idxx, idItem) {


			let _arr = idItem.positionList
			let unloadArr = e.extInfo.positionList || []


			for (let obj1 of unloadArr) {
				for (let obj2 of _arr) {
					if (obj1.code === obj2.code && obj2.workOrderCode === this.wordItem.code && !obj1.workOrderCode && !obj1.quantity) {
						obj1.workOrderCode = obj2.workOrderCode;
						obj1.categoryCode = obj2.categoryCode;
						obj1.quantity = obj2.quantity;
						obj1.feedNum = obj2.feedNum;
						break;
					}
				}
			}



			this.$set(this.turnoverList[idxx], 'unloadTurnoverName', e.name + '-' + e.code)
			this.$set(this.turnoverList[idxx], 'unloadPositionList', JSON.parse(JSON.stringify(unloadArr)))
			this.$forceUpdate()

		},
	}
}
</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: 674rpx;
		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%;
		}

		.ww30{
			width: 30%;
		}
		.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: 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: 350rpx;
}

.z_list2 {
	max-height: 700rpx;
}

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