aiot-app/pages/pda/picking/details.vue

<template>
	<view class="content-box">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="领料" background-color="#F7F9FA"
			color="#404446" @clickLeft="back"></uni-nav-bar>

		<view class="list_box">
			<u-list @scrolltolower="scrolltolower">


				<view v-for="(item,index) in List" :key="index" class="card_box">
					<view class="title_box rx-bc">
						<view class="left rx-sc">
							<view class="round">{{index + 1}}</view>
							<view class="code">工单编号:{{item.code}}</view>
						</view>

						<view class="right_box rx-ec">

							<u-button type="success" size="small" class="u-reset-button"
								@click="addPicking(item.workOrderId, item)" text="添加物料"></u-button>

						</view>

					</view>

					<view class="material rx-ss" v-for="(mate, idx) in item.bomList">
						<view class="left rx-ss" @click="mate.checked = ! mate.checked">
							<view class="zdy_check rx-cc" :class="{ check_active : mate.checked   }">
								<u-icon size="28" v-if='mate.checked' name='checkbox-mark'></u-icon>
							</view>
						</view>
						<view class="content_table">
							<view class="item">
								<view class="lable rx-cc">物料编码</view>
								<view class="content">
									{{mate.categoryCode}}
								</view>
							</view>

							<view class="item">
								<view class="lable rx-cc">名称</view>
								<view class="content">{{mate.categoryName}}</view>
							</view>

							<view class="item rx-sc">
								<view class="rx ww55 ">
									<view class="lable rx-cc">牌号</view>
									<view class="content ">{{mate.brandNum}}</view>
								</view>

								<view class="rx ww45">
									<view class="lable rx-cc ww80">数量</view>
									<view class="content content_num">
										<input class="uni-input" v-model="mate.demandQuantity" type="digit"></input>
										<view class="unit">{{mate.unit}}</view>

									</view>
								</view>

							</view>


							<view class="item">
								<view class="lable rx-cc">领料仓库</view>
								<view class="content pd4">
									<zxz-uni-data-select :localdata="mate.warehouseList" v-model="mate.warehouseId"
										dataValue='id' format='{name}' dataKey="name" filterable
										:clear='false'></zxz-uni-data-select>
								</view>
							</view>

						</view>
					</view>

					<view>
						<instanceBom :list='item.instanceList2'></instanceBom>


						<modelBom :workOrderId='item.workOrderId' :modelList='item.modelList'
							:modelList2='item.modelList2' :code='item.code' @hendDel='hendDel'>
						</modelBom>

						<boatBom :palletList='item.palletList' :palletList2='item.palletList2' :code='item.code'
							@hendDel='hendDel'>
						</boatBom>


						<view class='flex_btn' v-if='isPick' @click="openDetails">已有领料单</view>


					</view>

				</view>
			</u-list>

		</view>

		<view class="bottom-wrapper">
			<view class="btn_box" @click="save">提交</view>

		</view>



	</view>
</template>

<script>
	import instanceBom from './components/instanceBom.vue'
	import modelBom from './components/modelBom.vue'
	import boatBom from './components/boatBom.vue'
	import {
		workorderList
	} from '@/api/pda/workOrder.js'

	import {
		batchSave,
		pickDetails
	} from '@/api/pda/picking.js'

	export default {
		components: {
			instanceBom,
			modelBom,
			boatBom
		},
		data() {
			return {
				idsList: [],
				List: [],

				classificationList: [], //分类数据

				taskId: null,
				isPick: false,



			}
		},
		onLoad(options) {
			let queryArray = decodeURIComponent(options.arr);
			this.idsList = JSON.parse(queryArray);

			this.taskId = options.taskId



			this.getList()
			
			if(this.idsList.length == 1) {
				this.getPick()
			}
			

		},
		onShow() {
			uni.$off("setSelectList");

			uni.$on("setSelectList", (selectList, id) => {
				this.List.forEach(m => {
					if (m.workOrderId == id) {
						let instanceList2 = [] // 投料
						let modelList2 = [] // 模具
						let palletList2 = []


						selectList.forEach(f => {
							if (f.rootCategoryLevelId != 5 && f.rootCategoryLevelId != 8) { // 投料
								f.automatic = 1
								instanceList2 = instanceList2.concat(f)
							} else if (f.rootCategoryLevelId == 5) { // 模具
								f.automatic = 1
								modelList2 = modelList2.concat(f)
							} else if (f.rootCategoryLevelId == 8) { // 舟皿
								f.automatic = 1
								palletList2 = palletList2.concat(f)
							}
						})

						this.$set(m, 'instanceList2', instanceList2)
						this.$set(m, 'modelList2', modelList2)
						this.$set(m, 'palletList2', palletList2)
					}
				})




			});

		},

		methods: {
			scrolltolower() {},

			save() {


				let _arr = []
				_arr = this.List.map(m => {

					if (m.bomList.length > 0) {
						let bomList = m.bomList.filter(f => f.checked)
						m['bomDetailDTOSList'] = [...bomList, ...m.modelList, ...m.palletList]
					}
					m.instanceList = [...m.instanceList2, ...m.modelList2, ...m.palletList2]

					return {
						...m
					}
				})


				batchSave(_arr).then(res => {
					uni.navigateTo({
						url: `/pages/pda/picking/index/index?pickStatus=1`,
					});

				})
			},

			getList() {

				workorderList({
					ids: this.idsList,
					taskId: this.taskId
				}).then(res => {

					this.List = res.map(m => {
						m.workOrderId = m.id
						let modelList = []
						let palletList = []
						let bomList = []

						m.bomDetailDTOS.forEach((f, i) => {

							if (f.rootCategoryLevelId == 5) {
								f.automatic = 2
								modelList = modelList.concat(f)
							}

							if (f.rootCategoryLevelId == 8) {
								f.automatic = 2
								palletList = palletList.concat(f)
							}
							if (f.rootCategoryLevelId != 5 && f.rootCategoryLevelId != 8) {
								f.automatic = 2
								bomList = bomList.concat(f)
							}

						})



						m['modelList'] = modelList
						m['palletList'] = palletList
						m['bomList'] = bomList

						m['instanceList2'] = []
						m['palletList2'] = []
						m['modelList2'] = []

						delete m.id
						return {
							...m
						}
					})




				})
			},

			hendDel(type, code, list) {

				if (type == 'modelBom') {
					console.log(list.length)
					if (list.length == 0) {

					}
					this.List.forEach(f => {
						if (f.code == code) {
							if (list.length == 0) {
								f.modelList2 = []
								f.modelList = []
								return false
							}
							f.modelList2 = list.filter(t => t.automatic == 1)
							f.modelList = list.filter(t => t.automatic == 2)
						}
					})
				}
				if (type == 'boatBom') {
					this.List.forEach(f => {
						if (f.code == code) {
							if (list.length == 0) {
								f.palletList2 = []
								f.palletList = []
								return false
							}
							f.palletList2 = list.filter(t => t.automatic == 1)
							f.palletList = list.filter(t => t.automatic == 2)
						}
					})
				}

				this.$forceUpdate()

			},
			



			addPicking(id, item) {
				const storageKey = Date.now() + "";
				console.log(item)
				let arr = [...item.instanceList2, ...item.modelList2, ...item.palletList2]
				uni.setStorageSync(storageKey, arr);
				uni.navigateTo({
					url: `/pages/pda/workOrder/search/index?id=${id}&storageKey=${storageKey}&isType=pick&taskId=${this.taskId}`
				})
			},
			
			getPick() {
				pickDetails(this.idsList).then(res => {
					
					if(res && res.length > 0) {
						this.isPick = true
					}
					
				}) 
			},
			
			openDetails() {
				let url =  `/pages/pda/picking/bill/index?id=${this.idsList[0]}`
				uni.navigateTo({
					url
				})
			},

		},

	}
</script>

<style lang="scss" scoped>
	.content-box {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;

	}


	.list_box {
		flex: 1;
		overflow: hidden;
		padding: 4rpx 0;

		.u-list {
			height: 100% !important;
		}

		.card_box {
			padding: 16rpx 24rpx;

		}


		.title_box {
			.round {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				border-radius: 50%;
				background: $theme-color;
				color: #fff;
				text-align: center;
				font-size: 20rpx;
			}

			.code {
				margin-left: 16rpx;
				font-family: PingFang SC;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				color: $theme-color;
			}
		}

		.right_box {}


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

					}

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

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

						.unit {
							width: 90rpx;
							text-align: center;
							font-size: 24rpx;
							color: #404446;
						}
					}

					.pd4 {
						padding: 4rpx 8rpx;
					}



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

				.ww55 {
					width: 55%;
				}

				.ww45 {
					width: 45%;
				}
			}
		}


	}

	.bottom-wrapper {
		.btn_box {
			width: 750rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: $theme-color;
			text-align: center;
			font-size: 36rpx;
			font-style: normal;
			font-weight: 400;
			color: #fff;
		}
	}


	.flex_btn {
		position: fixed;

		right: 0;
		bottom: 160rpx;
		width: 140rpx;
		height: 66rpx;
		line-height: 66rpx;
		border-radius: 22rpx 0 0 22rpx;
		background: $theme-color;
		text-align: center;
		font-size: 22rpx;
		font-style: normal;
		font-weight: 400;
		color: #fff;
	}
</style>