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>
		<u-button type="success" size="small" class="u-reset-button-ii" v-if="clientEnvironmentId == 21"
			@click="undatePicking()" text="刷新库存"></u-button>

		<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" v-if="clientEnvironmentId !== 9">
							<u-button type="success" size="small" class="u-reset-button" v-if="isOutsource == 0"
								@click="addPicking(item.workOrderId, item)" text="添加物料"></u-button>

						</view>

					</view>

					<view class="select" @click="selectAll(item.bomList)">全选/取消</view>

					<view class="material rx-ss" v-for="(mate, idx) in item.bomList" :key="idx">
						<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"
											:disabled="clientEnvironmentId == 9"></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 class="item" v-if="clientEnvironmentId == 21">
								<view class="lable rx-cc">库存可用量</view>
								<view class="content ">{{ mate.waitOutInWeight }}</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'
							:resObj='item' @hendDel='hendDel'>
						</boatBom>

						<packingBom :list='item.packingList2'></packingBom>



						<semiProductBom
							:list="[...item.semiProductList2, ...item.productList2, ...item.junkProductList2]">
						</semiProductBom>



						<view style="height: 80rpx;"></view>

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


					</view>

				</view>


				<view class="out_box" v-if="isOutsource == 1">
					<view class="out_text" @click="getListOutsource()">重新获取委外领料单</view>
				</view>


			</u-list>

		</view>

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

		<outsourceOrder ref="outsourceRef" @outsourceEmit="outsourceFn"></outsourceOrder>



	</view>
</template>

<script>
import instanceBom from './components/instanceBom.vue'
import modelBom from './components/modelBom.vue'
import boatBom from './components/boatBom.vue'
import packingBom from './components/packingBom'
import semiProductBom from './components/semiProductBom'
import outsourceOrder from './components/outsourceOrder'
import {
	znPdaPage,
	workorderList,
	listOutsourceInWarehouse,
	listOutsource,
	currentStockQuery
} from '@/api/pda/workOrder.js'
import {
	VirtualPagination
} from '@/utils/pages.js'

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

export default {
	components: {
		instanceBom,
		modelBom,
		boatBom,
		packingBom,
		semiProductBom,
		outsourceOrder
	},
	data() {
		return {
			isType: true,

			idsList: [],
			List: [],
			pagination: {},
			classificationList: [], //分类数据
			newListOne: [],
			taskId: null,
			isPick: false,
			isOutsource: 0,
			clientEnvironmentId: uni.getStorageSync("userInfo") && uni.getStorageSync("userInfo")
				.clientEnvironmentId, // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境


		}
	},
	onLoad(options) {
		console.log(options, '1111111111');

		let queryArray = decodeURIComponent(options.arr);

		this.idsList = JSON.parse(queryArray);
		this.isOutsource = Number(options.isOutsource) || 0

		this.taskId = options.taskId

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



		if (this.clientEnvironmentId == 21) {
			this.getZnList()
		} else {
			this.getList()
		}



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


		if (this.isOutsource == 1) {
			this.getListOutsource()
		}



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

		uni.$on("setSelectList", (selectList, id) => {
			this.List.forEach(m => {
				if (m.workOrderId == id) {
					let instanceList2 = [] // 投料
					let modelList2 = [] // 模具
					let palletList2 = []
					let packingList2 = [] // 包装
					let semiProductList2 = [] //半成品
					let productList2 = [] // 产品
					let junkProductList2 = [] //废品

					selectList.forEach(f => {
						if (![5, 8, 13, 23, 9, 28].includes(f.rootCategoryLevelId)) {
							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)
						} else if (f.rootCategoryLevelId == 13) {
							f.automatic = 1
							packingList2 = packingList2.concat(f)
						} else if (f.rootCategoryLevelId == 23) {
							f.automatic = 1
							semiProductList2 = semiProductList2.concat(f)
						} else if (f.rootCategoryLevelId == 9) {
							f.automatic = 1
							productList2 = productList2.concat(f)
						} else if (f.rootCategoryLevelId == 28) {
							f.automatic = 1
							junkProductList2 = junkProductList2.concat(f)
						}

					})

					this.$set(m, 'instanceList2', instanceList2)
					this.$set(m, 'modelList2', modelList2)
					this.$set(m, 'palletList2', palletList2)
					this.$set(m, 'packingList2', packingList2)
					this.$set(m, 'semiProductList2', semiProductList2)
					this.$set(m, 'productList2', productList2)
					this.$set(m, 'junkProductList2', junkProductList2)


				}
			})




		});

	},

	methods: {
		selectAll(list) {
			if (Array.isArray(list) && list.length) {
				// let a = list.some(v=>v.checked = true)
				// ture 就是取消 false 就是选中
				if (this.isType) {
					list.map(d => {
						d.checked = false
					})
					this.isType = false;

				} else {
					list.map(d => {
						d.checked = true
					})
					this.isType = true;
				}
			}

			console.log(list, 'list');
		},

		//刷新库存


		async undatePicking() {
			uni.showLoading({
				title: '加载中...',
			});
			const res = await currentStockQuery(this.idsList[0]);
			uni.hideLoading()

			this.getZnList();
		},

		scrolltolower() {

			let arr = this.pagination.nextPage();
			if (arr.length) {
				this.List[0].bomList = [...this.List[0].bomList, ...arr]
			}


		},

		save() {


			let _arr = []
			console.log(this.newList, 'm');

			if (this.clientEnvironmentId !== 21) {

				_arr = this.List.map(m => {
					console.log(m, '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, ...m.packingList2, ...
						m.semiProductList2, ...m.productList2, ...m.junkProductList2
					]
					m.isOutsource = this.isOutsource
					return {
						...m
					}
				})
			}


			if (this.clientEnvironmentId == 21) {

				findVoucherList({ workOrderId: this.idsList[0] }).then(res => {
					uni.navigateTo({
						url: `/pages/pda/picking/index/index?pickStatus=1`,
					});

				})

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

				})
			}



		},
		// 中赢保存
		getZnList() {
			znPdaPage({
				// ids: ,
				workId: this.idsList[0]
			}).then(res => {

				if (res?.length) {
					let 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['modelList2'] = []
						m['instanceList2'] = []
						m['palletList2'] = []
						m['packingList2'] = []
						m['semiProductList2'] = []
						m['productList2'] = []
						m['junkProductList2'] = []

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

					this.newListOne = JSON.parse(JSON.stringify(List));

					this.pagination = new VirtualPagination(List[0].bomList, 10);

					List[0].bomList = this.pagination.getCurrentPageData();

					this.List = List;

				}



			})
		},



		getList() {

			workorderList({

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

				console.log('领料列表', 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['modelList2'] = []
					m['instanceList2'] = []
					m['palletList2'] = []
					m['packingList2'] = []
					m['semiProductList2'] = []
					m['productList2'] = []
					m['junkProductList2'] = []

					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()

		},

		getListOutsource(list) {
			let param = {
				workOrderId: this.idsList,
				taskId: this.taskId
			}

			listOutsource(param).then(res => {

				if (res) {
					this.$refs.outsourceRef.open(res)
				} else {
					uni.showToast({
						title: '暂无委外申请单',
						icon: 'none'
					})
				}
			})
		},

		outsourceFn(list) {
			this.outsourceInWarehouseFn(list)


		},




		addPicking(id, item) {
			const storageKey = Date.now() + "";
			let arr = [...item.instanceList2, ...item.modelList2, ...item.palletList2, ...item.packingList2, ...item
				.semiProductList2, ...item.productList2, ...item.junkProductList2
			]
			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
				}

			})
		},

		outsourceInWarehouseFn(list) {
			let param = {
				outsourceOrder: list || [],
				workOrderId: this.idsList[0],
				taskId: this.taskId
			}

			listOutsourceInWarehouse(param).then(res => {
				res.list.map(m => {
					m.isOut = 1
					return {
						...m
					}
				})
				let _arr = [...this.List[0].instanceList2, ...res.list]
				this.$set(this.List[0], 'instanceList2', _arr)
				this.$forceUpdate()
			})
		},

		openDetails() {
			let url = `/pages/pda/picking/bill/index?id=${this.idsList[0]}`
			uni.navigateTo({
				url
			})
		},

	},

	beforeDestroy() {
		uni.hideLoading();
	},

}
</script>

<style lang="scss" scoped>
.select {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5rpx 0;
	width: 150rpx;
	background-color: #157A2C;
	color: #fff;
	font-size: 24rpx;
	border-radius: 5rpx;
}

.u-reset-button-ii {
	position: relative;
	right: -251rpx;
	width: 200rpx;
}

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

.out_box {
	margin: 20rpx;
	display: flex;
	justify-content: center;
	color: $theme-color;
	font-size: 28rpx;
}
</style>