SmartStorage/pages/backMaterialReceiveDetail/backMaterialReceiveDetail.vue

<template>
	<view>
		<view 
			class="single-fetch" 
			v-for="(fetch, index) in fetchList" 
			:key="index" 
		>
			<view>
				<checkbox-group
					@change="checkClick(fetch)"
					style="margin-right: 15rpx;"
					v-show="fetch.backStatus == '0' && Number(fetch.num) == 0"
				>
					<checkbox :checked="fetch.checked" />
				</checkbox-group>
			</view>
			<view class="info-cont">
				<view>
					<span>类型名称</span>
					<h4>{{ fetch.typeName }}</h4>
				</view>
				<view>
					<span>规格型号</span>
					<h4>{{ fetch.typeCode }}</h4>
				</view>
				<view>
					<span>待退料数量</span>
					<h4>{{ fetch.num }}</h4>
				</view>
				<h5
					@click="openPopup(fetch)"
				>
					点击退料
				</h5>
			</view>
		</view>
		<view class="btm-sticky">
			<view class="checked">
				<checkbox-group @tap="checkAll" style="margin-right: 15rpx;">
					<checkbox :checked="allChecked" />
				</checkbox-group>
				<text>全选</text>
			</view>
			<view
				class="exam"
				@click="totalBack"
			>
				完成退料
			</view>
		</view>
		<uni-popup ref="popup1" type="center" :mask-click="false">
			<view class="popup1">
				<view class="pop-top">
					<h4>退料接收</h4>
					<uni-icons style="color: #AAAAAA; font-weight: bold;" type="closeempty" size="20"
						@click="closePopup1">
					</uni-icons>
				</view>
				<h5 style="width: 85%; margin: 2vh auto; font-weight: normal; text-align: center;">请选择接收方式</h5>
				<view class="select-area">
					<view @click="scanCode">二维码</view>
					<view @click="codeOut">编码接收</view>
					<view @click="rfidOut">RFID接收</view>
				</view>
				<!-- <view class="ipt-area">
					<uni-easyinput v-model="codeVal" placeholder="请输入编码"></uni-easyinput>
				</view> -->
			</view>
		</uni-popup>
		<uni-popup ref="popup2" type="center" :mask-click="false">
			<view class="popup2">
				<view class="pop-top">
					<h4>退料接收</h4>
					<uni-icons style="color: #AAAAAA; font-weight: bold;" type="closeempty" size="20"
						@click="closePopup2">
					</uni-icons>
				</view>
				<view class="info-area">
					<view>
						<h4>类型名称</h4>
						<span>{{ infoList.typeName }}</span>
					</view>
					<view>
						<h4>规格型号</h4>
						<span>{{ infoList.typeModelName }}</span>
					</view>
					<view>
						<h4>待入库数量</h4>
						<span>{{ infoList.preNum }}</span>
					</view>
					<!-- <view style="flex-direction: column;">
						<h4 style="margin-bottom: 30rpx;">待修状态</h4>
						<uni-data-checkbox v-model="fixVal" :localdata="fixRange"></uni-data-checkbox>
					</view> -->
					<view>
						<h4>合格数量</h4>
						<uni-easyinput type="number" v-model="passedNum" placeholder="请输入"></uni-easyinput>
					</view>
					<view>
						<h4>待修数量</h4>
						<uni-easyinput type="number" v-model="waitRepairNum" placeholder="请输入"></uni-easyinput>
					</view>
					<view>
						<h4>待报废数量</h4>
						<uni-easyinput type="number" v-model="waitCrashNum" placeholder="请输入"></uni-easyinput>
					</view>
				</view>
				<view class="sub-btn" @click="multiOut">
					退料接收
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import QS from "qs"
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				pageTotal: 0,
				allChecked: false,
				fetchList: [

				],
				codeVal: '',
				manageType: '',
				infoList: '',
				multiNum: 1,
				subList: {},
				fixVal: '',
				fixRange: [{
						text: '合格',
						value: '0'
					},
					{
						text: '待修',
						value: '1'
					},
					{
						text: '待报废',
						value: '2'
					}
				],
				passedNum: '',
				waitRepairNum: '',
				waitCrashNum: '',
				detailsId: '',
				taskId: '',
				submitFlag:false,
				taskStatus:'',
				transMaCode: '',
				rfidNum: '',
				sendTypeId: '',
				parentId: ''
			}
		},
		methods: {
			openPopup(list) {
				console.log(list);
				this.infoList = list
				this.rfidNum = list.num
				this.transMaCode = list.code
				this.sendTypeId = list.typeId
				this.parentId = list.id
				if(Number(list.num)==0){
					uni.showToast({
						icon: 'none',
						title: '待退料数据为0，请勿再点击'
					})
					return 
				}
				if (this.infoList.manageType == '0') {
					this.$refs.popup1.open()
				} else {
					const userInfo = uni.getStorageSync('userInfo');
					console.log("userInfo", userInfo)
					const userId = userInfo.userid

					const {
						taskId,
						id,
						typeId,
						modelId,
						manageType,
						typeName,
						typeCode,
						num
					} = this.infoList
					const params = {
						taskId,
						id,
						typeId,
						modelId,
						manageType,
						userId,
						typeName,
						typeCode,
						num
					}
					const urlStr = QS.stringify(params)
					console.log("urlSTR", urlStr)
					uni.navigateTo({
						url: `/pages/numReceive/numReceive?${urlStr}`
					})
				}
			},
			closePopup1() {
				this.$refs.popup1.close()
			},
			closePopup2() {
				this.$refs.popup2.close()
			},
			checkClick(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.allChecked = false
				} else {
					const goods = this.fetchList.every(item => {
						return item.checked === true
					})
					if (goods) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				}
			},
			checkAll() {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					this.fetchList.map(item => {
						if (item.checked == false) {
							item.checked = true
						}
					})
				} else {
					this.fetchList.map(item => {
						if (item.checked == true) {
							item.checked = false
						}
					})
				}
			},
			scanCode() {
				const that = this
				that.closePopup1()
				/* uni.scanCode({
					success: (res) => {
						console.log("beforeScan", res);
						const userInfo = uni.getStorageSync('userInfo');
						console.log("beforeScan11111", userInfo,that.taskId)
						const userId = userInfo.userid
						uni.navigateTo({
							url: `/pages/scanReceive/scanReceive?code=${res.result}&typeId=${that.infoList.typeId}&num=${that.infoList.num}&parentId=${that.infoList.id}&manageType=${that.infoList.manageType}&taskId=${that.taskId}&createBy=${userId}&scanType="back"`
						})
					}
				}) */
				const userId = uni.getStorageSync('userInfo').userid
				uni.navigateTo({
					url: `/pages/QRIn/QRIn?typeId=${that.infoList.modelId}&num=${that.infoList.num}&parentId=${that.infoList.id}&manageType=${that.infoList.manageType}&taskId=${that.taskId}&createBy=${userId}&scanType="back"`
				})
			},
			codeOut() {
				this.closePopup1()
				const userInfo = uni.getStorageSync('userInfo');
				console.log("userInfo", userInfo)
				const userId = userInfo.userid

				const {
					taskId,
					id,
					typeId,
					modelId,
					manageType,
					typeName,
					typeCode,
					num
				} = this.infoList
				const params = {
					taskId,
					id,
					typeId,
					modelId,
					manageType,
					userId,
					typeName,
					typeCode,
					num
				}
				const urlStr = QS.stringify(params)
				console.log("urlSTR", urlStr)
				uni.navigateTo({
					url: `/pages/codeReceive/codeReceive?${urlStr}&maCode=${this.transMaCode}`
				})
			},
			rfidOut () {
				this.closePopup1()
				uni.navigateTo({
					url: `/pages/rfidReceive/rfidReceive?waitOut=${this.rfidNum}&typeId=${this.sendTypeId}&parentId=${this.parentId}&taskId=${this.taskId}`
				})
			},
			multiOut() {
				let that = this
				this.closePopup2()
				that.subList = {
					parentId: that.infoList.parenntId,
					typeId: that.infoList.typeId,
					outNum: that.multiNum,
					companyId: uni.getStorageSync('userInfo').sysUser.companyId
				}
				console.log(that.subList);
				that.$api.fetchMaterialOutStore.subOutStore(that.subList, null).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '退料接收成功！',
							success: () => {
								uni.navigateBack()
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '退料接收失败！'
						})
					}
				}).catch(err => {
					console.log(err);
				})
			},
			initListData() {
				let that = this
				console.log(that.detailsId);
				that.$api.backMaterialReceive.backMaterialReceiveDetail({
					id: that.detailsId,
					taskId: that.taskId,
					pageNum: that.pageNum,
					pageSize: that.pageSize
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						that.pageTotal = res.data.data.total
						res.data.data.rows.forEach(item => {
							if (item.backStatus == '0') item.checked = false
						})
						/* res.data.data.forEach(item => {
							item.checked = false
						}) */
						that.fetchList = [...that.fetchList, ...res.data.data.rows]
						console.log(that.fetchList);
					}
				}).catch(err => {
					console.log(err);
				})
			},
			backReceiveEndBackFn() {
				const that = this
				let total = that.reduceNumTotal()
				console.log("total==",total)
				if (total > 0) {
					uni.showToast({
						icon: 'none',
						title: '请完成退料接收后才能结束任务'
					})
					return
				}
				// submitFlag false
			
				if(that.submitFlag==true){
					return 
				}
				that.submitFlag = true
				console.log(that.taskId, that.detailsId);
				that.$api.backMaterialReceive.backReceiveEndBack({
					createBy: uni.getStorageSync('userInfo').userid,
					taskId: that.taskId,
					parentId: that.detailsId
				}).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '结束任务成功'
						})
						console.log("退料结束",res)
						that.submitFlag = false
						uni.navigateBack()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err=>{
					that.submitFlag = false
				}).finally(result=>{
					that.submitFlag = false
				})
			},
			reduceNumTotal() {
				const that = this
				let sum = that.fetchList.reduce((accumulator, currentValue) => {
					return accumulator + Number(currentValue.num);
				}, 0);
				console.log("numaccumulator", sum)
				return sum
			},
			endBackMaFn (obj) {
				let that = this
				console.log(obj);
				// 完成退料
				that.$api.backMaterialReceive.backReceiveEndBack(obj).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			totalBack () {
				let that = this
				let submitList = that.fetchList.filter(item => item.checked == true && Number(item.num) == 0)
				if (submitList.length != 0) {
					console.log(submitList);
					let typeIdStr
					let typeIdArr = []
					submitList.forEach(item => {
						typeIdArr.push(item.modelId)
					})
					typeIdStr = typeIdArr.join(',')
					console.log(typeIdStr);
					uni.showModal({
						title: '完成退料',
						content: '确认完成退料吗？',
						success: (res) => {
							if (res.confirm) {
								that.endBackMaFn({
									createBy: uni.getStorageSync('userInfo').userid,
									parentId: submitList[0].id,
									taskId: submitList[0].taskId,
									typeId: typeIdStr
								})
							}
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '未选中完成退料项！'
					})
				}
			}
		},
		onLoad(params) {
			console.log(params);
			this.taskId = params.taskId
			this.detailsId = params.id
			this.taskStatus = params.taskStatus
		},
		onShow() {
			this.fetchList = []
			this.initListData()
		},
		onNavigationBarButtonTap(ev) {
			let that = this
			/* if (ev.text == '结束任务') {
				if(this.taskStatus=="40"){
					uni.showToast({
						icon: 'none',
						title: '请勿再点击'
					})
					return
				}  
				that.backReceiveEndBackFn()
			} */
			let submitList = that.fetchList.filter(item => item.checked == true)
			if (submitList.length != 0) {
				console.log(submitList);
			} else {
				uni.showToast({
					icon: 'none',
					title: '未选中完成退料项！'
				})
			}
		},
		onReachBottom() {
			if (this.fetchList.length >= this.pageTotal) return;
			this.pageNum++
			this.initListData()
		}
	}
</script>

<style lang="scss">
	body{
		background-color: #FAFDFF;
		box-sizing: border-box;
		padding-bottom: 10vh;
	}
	.single-fetch {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		border-bottom: 1px solid #DDDDDD;
		display: flex;
		align-items: center;
		.info-cont{
			view {
				display: flex;
				align-items: center;
				margin-bottom: 25rpx;
			
				span {
					color: #A7A7A7;
					padding-right: 20rpx;
				}
			
				h4 {
					font-size: 14px;
					font-weight: normal;
				}
			}
			
			view:last-child {
				margin-bottom: 0;
			}
			h5{
				width: 150rpx;
				font-size: 14px;
				font-weight: normal;
				box-sizing: border-box;
				padding: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #3788FF;
				color: #fff;
				border-radius: 15rpx;
			}
		}
		
	}

	.btm-exam {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: flex-end;
		border-top: 2px solid #F6F8FF;

		.exam {
			box-sizing: border-box;
			padding: 10rpx 50rpx;
			border-radius: 30rpx;
			background-color: #3788FF;
			font-size: 14px;
			color: #fff;
		}
	}
	
	.btm-sticky{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 15rpx 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.checked{
			display: flex;
			align-items: center;
		}
		.exam{
			box-sizing: border-box;
			padding: 10rpx 50rpx;
			border-radius: 30rpx;
			background-color: #3788FF;
			font-size: 14px;
			color: #fff;
		}
	}

	.popup1 {
		width: 80vw;
		height: 20vh;
		background-color: #fff;
		border-radius: 15rpx;
		overflow: hidden;
		background: linear-gradient(#D9E7FE, #fff, #fff, #fff);

		.pop-top {
			width: 100%;
			height: 5vh;
			box-sizing: border-box;
			padding: 0 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.select-area {
			width: 85%;
			margin: 40rpx auto;
			display: flex;
			justify-content: space-around;
			align-items: center;

			view {
				box-sizing: border-box;
				font-size: 14px;
				padding: 10rpx 20rpx;
				border: 1px solid #D5D5D4;
				border-radius: 20rpx;
			}
		}

		.ipt-area {
			width: 85%;
			margin: 40rpx auto;
		}
	}

	.popup2 {
		width: 80vw;
		height: 60vh;
		background-color: #fff;
		border-radius: 15rpx;
		overflow: hidden;
		background: linear-gradient(#D9E7FE, #fff, #fff, #fff);

		.pop-top {
			width: 100%;
			height: 5vh;
			box-sizing: border-box;
			padding: 0 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.info-area {
			width: 85%;
			margin: 30rpx auto;
			display: flex;
			flex-direction: column;

			view {
				margin-bottom: 15rpx;
				display: flex;
				align-items: center;

				h4 {
					font-weight: normal;
					color: #989898;
					font-size: 14px;
					width: 35%;
				}

				span {
					font-size: 14px;
				}
			}
		}

		.sub-btn {
			width: 85%;
			margin: 30rpx auto;
			background-color: #3788FF;
			color: #fff;
			box-sizing: border-box;
			padding: 15rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 40rpx;
			font-size: 14px;
		}
	}
</style>