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.bomDetailDTOS">
						<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.measuringUnit}}</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.instanceList'></instanceBom>

						<modelBom v-if='item.modelList.length != 0' :workOrderId='item.workOrderId'
							:list='item.modelList'>
						</modelBom>



					</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 '../feeding/components/modelBom.vue'
	import {
		workorderList
	} from '@/api/pda/workOrder.js'

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

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

				classificationList: [], //分类数据

				taskId: null


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

			this.taskId = options.taskId



			this.getList()

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

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

						selectList.forEach(f => {
							if (f.rootCategoryLevelId == 1) {
								instanceList = instanceList.concat(f)
							} else if (f.rootCategoryLevelId == 5) {
								modelList = modelList.concat(f)


							}
						})

						this.$set(m, 'instanceList', instanceList)
						this.$set(m, 'modelList', modelList)
					}
				})




			});

		},

		methods: {
			scrolltolower() {},

			save() {
				let _arr = []
				_arr = this.List.map(m => {
					if (m.bomDetailDTOS.length > 0) {
						m.bomDetailDTOS = m.bomDetailDTOS.filter(f => f.checked)
					}
					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
						if (!m.hasOwnProperty('modelList')) {
							m.modelList = [] // 模具
						}
						delete m.id
						return {
							...m
						}
					})

				})
			},



			addPicking(id, item) {
				const storageKey = Date.now() + "";

				let arr = [...item.instanceList, ...item.modelList]
				uni.setStorageSync(storageKey, arr);
				uni.navigateTo({
					url: `/pages/pda/workOrder/search/index?id=${id}&storageKey=${storageKey}&isType=pick`
				})
			},

		},

	}
</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 {
							padding: 0 4rpx;
							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;
		}
	}
</style>