Storage-Android-master/pages/warehouse/reviewDtl.vue

<template>
	<div>
		<uni-nav-bar title="退仓复核-详情" :status-bar="true" background-color="#3F92F9" color="#FFF">
			<view slot="left">
				<u-icon name="account-fill" color="#FFF" size="35"></u-icon>
				<span style="padding: 0 5rpx;color: #FFFFFF;">{{ userInfo.name }}</span>
			</view>
			<view slot="right" @tap="$utils.openNew(`/pages/warehouse/review`)">
				<span style="color: #FFFFFF;">返回</span> 
			</view>
		</uni-nav-bar>
		<ul class="review-ul">
			<li v-for="(i,index) in dtlData.checkDetailsInfoList" :key="i.materialId">
				<view class="title">
					物料名称:{{i.materialName}}
				</view>
				<view class="lists">
					<view class="list-box" v-for="(j,jindex) in i.stockBackDetailsList" :key="i.id">
						<view class="col">
							卷{{jindex + 1}}
						</view>
						<view class="col" style="padding: 0 10rpx;">
							{{j.materialMeters}}
						</view style="padding: 0 10rpx;"> 
						<view class="col" style="min-height:10rpx"> 
							{{j.rfid ? j.rfid : ' '}}
						</view>
						<view class="col">
							<button @click="sacnFn(index,jindex)">扫描</button>
						</view>
						<view class="col">
							<button @click="tagFn(index,jindex)">生成</button>
						</view>
					</view>
					<view class="footer-btn-warp" style="margin-top: 20rpx;">
						<button class="cancel" style="color:#333" @click="dtlDataListDlt(index)">删除</button>
						<button class="upload" style="color:#333" @click="listUpdate(i,index)">修改</button>
					</view>
				</view>
			</li>
		</ul>
		<view class="footer-btn-warp" style="margin-top: 20rpx;">
			<button class="cancel" style="background-color:red"  @tap="$utils.back()">取消</button>
			<button class="upload" style="background-color:blue" @click="submitCheck">确定</button>
		</view>
		<uni-popup ref="addModal" type="bottom">
			<view class="addModal-content">
				<view class="select-warp">
					<view class="label">
						选择面料
					</view>
					<view class="show-text" @click="openSelectModal">
						{{!selectMaterialDtl.materialName ? '请选择物料' : selectMaterialDtl.materialName }}
					</view>
					<view class="add-icon">
						+
					</view>
				</view>
				<view style="height:40rpx;border-bottom: 1px solid #ccc;">
					
				</view>
				<view class="ul">
					<view class="li" v-for="(i,index) in selectMaterialDtl.stockBackDetailsList">
						<view class="delete-icon" @click="materialMetersListDelete(index)">
							-
						</view>
						<view class="li-label">
							卷{{index + 1}}
						</view>
						<view class="input">
							
							<input type="number" :value="i.materialMeters" @input="((e)=>inputChange(e,index))">
						</view>
					</view>
					
				</view>
				<!-- <button class="add-btn" @click="addList">在添加一卷</button> -->
				<view class="footer-btn-warp" style="margin-top: 20rpx;">
					<button class="cancel" style="background-color:red" @click="closeaddModal">取消</button>
					<button class="upload" style="background-color:blue" @click="closeaddModal">确定</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" type="bottom">
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
			 swiperWidth="750"></u-tabs-swiper>
			<view class="search-box" v-if="current == 0">
				<ul>
					<li @click="selectMaterialList(i)" v-for="i in pickingToday" :key="i.id">
						{{i.name}}
					</li>
					<view class="no-data" v-if="pickingToday.length == 0">
						暂无今日领取面料数据
					</view>
				</ul>
			</view>
			<view  class="search-box" v-if="current == 1">
				<view class="input-warp">
					<u-input
						v-model="req.search"
						:searchIcon="true" 
						:border="true" 
						placeholder="请输入物料名称或编码"
						@search="getSelectMaterialList"
						class="search-input"
						 />
				</view>
				<ul>
					<li @click="selectMaterialList(i)" v-for="i in materialData" :key="i.id">
						{{i.name}}
					</li>
					<view class="no-data" v-if="materialData.length == 0">
						暂无数据
					</view>
				</ul>
			</view>
		</uni-popup>
	</div>
</template>

<script>
	import scan from './scan'
	export default{
		name:"xx",
		components:{
			scan
		},
		data(){
			return{
				dtlData:{},
				isEdit:false,
				swiperCurrent:0,
				current:0,
				list: [{
					name: '今日领取的面料'
				}, {
					name: '选择其他'
				}],
				userInfo:this.$storage.getStorageSync('userInfo'),
				form:{
					operatorId:this.$storage.getStorageSync('userInfo').id,
					backDetailList:[],
				},
				req:{
					userId:this.$storage.getStorageSync('userInfo').id,
					pageNum:1,
					pageSize:10,
					search:null,
					materialCode:null,
				},
				pickingToday:[],
				materialData:[],
				selectMaterialDtl:{},
				updateIndex:null,
			}
		},
		onLoad(option){
			const v = this
			uni.getStorage({
				key: 'reviewDtl',
				success: function (res) {
					console.log(res)
					v.dtlData = res.data
				} ,fail(err) {
					v.getDtl(option.id)
				}
			});
			
		},
		created(){
			this.selectList()
			this.getSelectMaterialList()
		},
		methods:{
			closeaddModal(){
				this.$refs.addModal.close()
			},
			submitCheck(){
				uni.showLoading({
					title: '正在提交'
				})
				const v = this
				var rfidItems = []
				for (var i = 0; i < v.dtlData.checkDetailsInfoList.length; i++) {
					const element = v.dtlData.checkDetailsInfoList[i]
					for (var j = 0; j < element.stockBackDetailsList.length; j++) {
						const jelement = element.stockBackDetailsList[j]
						if(!jelement.rfid){
							this.$msg.showToast('请扫描或生成所有面料！')
							return
						}else{
							rfidItems.push(jelement.rfid)
						}
					}
				}
				console.log(rfidItems)
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/stockBack/submitCheck',
					method: 'POST',
					header:{
						'Content-Type' : 'application/json',
					},
					data: v.dtlData,
					success: res => {
						console.log(res)
						if(res.data.code == 200){
							
							this.$utils.openNew(`/pages/warehouse/review`)
						}
					}, 
				});
			},
			tagFn(index,jindex){
				const v = this
				v.dtlData.index = index
				v.dtlData.jindex = jindex
				uni.setStorage({
					key: 'reviewDtl',
					data: v.dtlData,
					success: function () {
						v.$utils.open('/pages/warehouse/tag')
					}
				});
			},
			sacnFn(index,jindex){
				const v = this
				v.dtlData.index = index 
				v.dtlData.jindex = jindex
				uni.setStorage({
					key: 'reviewDtl',
					data: v.dtlData,
					success: function () {
						v.$utils.open('/pages/warehouse/scan')
					}
				});
			},
			getDtl(_id){
				console.log(_id)
				const v = this
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/stockBack/checkDetails',
					method: 'POST',
					header:{
						'Content-Type' : 'application/json',
					},
					data: {
						stockBackId:_id
					},
					success: res => {
						this.dtlData = res.data.data
						v.dtlData.checkerId = this.$storage.getStorageSync('userInfo').id
						console.log(this.dtlData)
					},
				});
			},
			submitBack(){
				const v = this
				console.log(v.form)
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/stockBack/submitBack',
					method: 'POST',
					header:{
						'Content-Type' : 'application/json',
					},
					data: v.form,
					success: res => {
						console.log(res)
						if(res.data.code == 200){
							this.$msg.showToast('操作成功！')
							this.$utils.back()
						}
					},
				});
				
			},
			dtlDataListDlt(index){
				this.dtlData.checkDetailsInfoList.splice(index,1)
			},
			materialMetersListDelete(index){
				this.dtlData.checkDetailsInfoList[this.updateIndex].stockBackDetailsList.splice(index,1)
			},
			listUpdate(i,index){
				console.log(i)
				this.selectMaterialDtl = i
				this.updateIndex = index
				this.$refs.addModal.open()
			},
			listDelete(index){
				this.form.backDetailList.splice(index,1)
			},
			pushList(){
				if(this.updateIndex === null){
					this.form.backDetailList.push(this.selectMaterialDtl)
				}else{
					this.form.backDetailList[this.updateIndex] = this.selectMaterialDtl
				}
				
				this.selectMaterialDtl = {}
				this.$refs.addModal.close()
			},
			inputChange(e,index){
				
				this.selectMaterialDtl.stockBackDetailsList[index].materialMeters = e.detail.value
				console.log(this.selectMaterialDtl)
			},
			tabsChange(index) {
				this.swiperCurrent = index;
				this.current = index; 
			},
			addList(){
				this.selectMaterialDtl.materialMetersList.push({
					"id": "1565274397500047361",
					"stockBackId": "1565274397445521410",
					"materialId": "01.002.0043",
					"materialMeters": 0,
					"oldMaterialMeters": 0,
					"rfid": ""
				})
			},
			selectMaterialList(i){
				const v = this
				this.dtlData.checkDetailsInfoList[this.updateIndex].materialId = i.code
				this.dtlData.checkDetailsInfoList[this.updateIndex].materialName = i.name
				console.log(i)
				console.log(this.updateIndex)
			},
			openSelectModal(){
				
				this.$refs.popup2.open()
			},
			
			getSelectMaterialList(){
				const v = this
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/material/selectList',
					method: 'POST',
					header:{
						'Content-Type' : 'application/json',
					},
					data: v.req,
					success: res => {
						console.log(res)
						this.materialData = res.data.data
					},
				});
			},
			selectList(){
				const v = this
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/stockBack/getPickingToday',
					method: 'POST',
					header:{
						'Content-Type' : 'application/json',
					},
					data: v.req,
					success: res => {
						console.log(res)
						this.pickingToday = res.data.data
					},
				});
			},
			openModal(){
				this.$refs.addModal.open('bottom')
			},
		},
	}
</script>

<style scoped lang="less">
	.review-ul{
		padding: 0 20rpx; 
		li{
			background-color: #fff;
			border-radius: 6rpx;
			list-style: none;
			margin-top: 20rpx;
			.title{ 
				height: 100rpx;
				line-height: 100rpx;
				font-size: 30rpx;
				border-bottom: 1px solid #dcdcdc;
				padding: 0 20rpx;
			}
			.lists{
				.list-box{
					overflow: hidden;
					line-height: 80rpx;
					.col{
						float: left;
						width: 20%;
						text-align: center;
						overflow: hidden;
						
						button{
							width: 80%;
							
						}
					}
				}
			}
		}
	}
	.footer-btn-warp{
		display: flex;
		padding: 20rpx;
		button{
			width: 48%;
			color: #fff;
		}
	}
	.search-box{
		.input-warp{
			padding: 40rpx;
		}
		.search-input{
		}
		background-color: #fff;
		
		text-align: center;
		ul{
			li{
				padding: 25rpx 30rpx;
				border-bottom: 1rpx solid #dcdcdc;
				list-style: none;
			}
		}
		.no-data{
			padding: 100rpx;
		}
	}
	.addModal-content{
		background-color: #fff;
		border-top-left-radius:20rpx;
		border-top-right-radius:20rpx;
		padding-top:40rpx;
		.footer-btn-warp{
			display: flex;
			padding: 20rpx;
			button{
				width: 48%;
				color: #fff;
			}
		}
		.ul{
			
			.li{
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 20rpx;
				.input{
					width: 70%;
					input{
						border:1rpx solid #dcdcdc;
						height: 78rpx;
						line-height: 78rpx;
						padding: 0 20rpx;
					}
				}
			}
			.delete-icon{
				height: 80rpx;
				width: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 40rpx;
				color: #fff;
				background-color: #ccc;
			}
		}
		.select-warp{
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 20rpx ;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			
			.show-text{
				width: 70%;
				border:1rpx solid #dcdcdc;
				padding: 0 20rpx;
			}
			.add-icon{
				height: 80rpx;
				width: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 40rpx;
				color: #fff;
				background-color: #ccc;
			}
		}
	}
	.ul{
		.li{
			background-color: #fff;
			border-radius: 5rpx;
			margin: 20rpx 20rpx 0;
			.label{
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 30rpx;
				border-bottom: 1rpx solid #ccc;
				padding: 0 20rpx;
				
			}
			.lists{
				border-bottom: 1rpx solid #ccc;
				.list-box{
					height: 100rpx;
					line-height: 100rpx;
					display: flex;
					justify-content: space-between;
					padding: 0 20rpx;
				}
			}
			.list-btn-warp{
				display: flex;
				padding: 20rpx;
				button{
					width: 48%;
				}
			}
		}
	}
	.add-header{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		font-weight: bold;
		overflow: hidden;
		padding: 20rpx;
		button{
			width: 200rpx;
			color: #fff;
			background-color: red;
			float: right;
			margin: 14rpx 0;
		}
	}
</style>