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 style="display:flex;justify-items: start">
						<view class="select" @click="selectAll(item.bomList)" style="width: 64px;">全选/取消</view>
						<view class="select" @click="warehouseShowFn(item.id)" style="width: 85px;margin-left: 10px;">
							一键选择仓库</view>

					</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="
											mate.demandQuantity > mate.availableCountBase
											  ? (mate.demandQuantity = mate.availableCountBase)
											  : row.demandQuantity
											"></input>
										<view class="unit">{{ mate.unit }}</view>

									</view>
								</view>

							</view>
							<view class="item">
								<view class="lable rx-cc">计量库存数量</view>
								<view class="content pd4">
									<view class="content">{{ mate.availableCountBase }} {{ mate.unit }}</view>
								</view>
							</view>

							<view class="item">
								<view class="lable rx-cc">领料仓库</view>
								<view class="content pd4">
									<zxz-uni-data-select :localdata="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' :warehouseList="warehouseList"></instanceBom>


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

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

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



						<semiProductBom :warehouseList="warehouseList"
							: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>
		<u-popup :show="warehouseShow" mode="center" v-if='warehouseShow' :closeOnClickOverlay='false'>
			<view class="popup_list">
				<view class="lable rx-cc">领料仓库</view>
				<view class="content pd4">
					<zxz-uni-data-select :localdata="warehouseList" v-model="warehouseId" dataValue='id' format='{name}'
						dataKey="name" filterable :clear='false'></zxz-uni-data-select>
				</view>

			</view>


			<view class="operate_box  rx-bc">
				<u-button size="small" class="u-reset-button" @click="warehouseShow=fasle">
					取消
				</u-button>
				<u-button type="success" size="small" class="u-reset-button" @click="handOK">
					确认
				</u-button>

			</view>
		</u-popup>
		<view class="bottom-wrapper">
			<view class="btn_box" @click="save">{{ submitText }}</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,
		getInventoryTotal
	} from '@/api/pda/workOrder.js'
	import {
		VirtualPagination
	} from '@/utils/pages.js'

	import {
		batchSave,
		pickDetails,
		findVoucherList
	} from '@/api/pda/picking.js'
	import {
		getWarehouseList,
	} from '@/api/warehouseManagement'
	import {
		forIn
	} from 'lodash'
	export default {
		components: {
			instanceBom,
			modelBom,
			boatBom,
			packingBom,
			semiProductBom,
			outsourceOrder
		},
		data() {
			return {
				isType: true,
				warehouseShow: false,
				warehouseId: '',
				warehouseList: [],
				idsList: [],
				List: [],
				currentId: "",
				pagination: {},
				classificationList: [], //分类数据
				newListOne: [],
				taskId: null,
				isPick: false,
				isOutsource: 0,
				clientEnvironmentId: uni.getStorageSync("userInfo") && uni.getStorageSync("userInfo")
					.clientEnvironmentId, // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境
				submitText: '提交'

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

			let queryArray = decodeURIComponent(options.arr);
			getWarehouseList().then(res => {
				this.warehouseList = res.data
			})

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

			warehouseShowFn(tiemId) {
				this.warehouseShow = true
				this.currentId = tiemId
			},
			handOK() {

				let index = this.List.findIndex(item => item.id == this.currentId)
				// this.$set(this.List[index], 'warehouseId', this.warehouseId)
				console.log(this.List[index], 'this.List[index]')
				for (let key in this.List[index]) {
					if (['instanceList2', 'modelList2', 'palletList2', 'packingList2', 'semiProductList2', 'productList2',
							'junkProductList2', 'bomList'
						].includes(key)) {
						this.List[index][key].forEach((item, i) => {
							this.$set(this.List[index][key][i], 'warehouseId', this.warehouseId)
						})
					}
				}
				this.warehouseShow = false
				this.currentId = ''
			},

			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) {
					this.submitText = '领料中'
					findVoucherList({
						workOrderId: this.idsList[0]
					}).then(res => {
						// uni.navigateTo({
						// 	url: `/pages/pda/picking/index/index?pickStatus=1`,
						// });
						uni.showToast({
							title: "领料成功",
							mask: true,
							duration: 1500,
						});
						uni.navigateBack({
							delta: 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
						}
					})



					this.getInventoryTotalFn()
				})
			},
			//计量库存数量
			getInventoryTotalFn() {
				let ids = []
				this.List.map(item => {
					item.bomList.map(pitem => {
						ids.push(pitem.categoryCode)
					})
				})
				if (ids.length == 0) {
					return;
				}
				getInventoryTotal(ids).then(res => {
					res.map(ritem => {
						this.List.map(item => {
							item.bomList.map(pitem => {
								if (pitem.categoryCode == ritem.code) {
									pitem.availableCountBase = ritem.availableCountBase
								}

							})
						})
					})

				})


			},

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

	.popup_list {
		width: 400rpx;
		height: 400rpx;
	}
</style>