Storage-Android-master/pages/warehouse/return-warehouse.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.back()">
				<span style="color: #FFFFFF;">返回</span> 
			</view>
		</uni-nav-bar> 
		<view class="add-header">
			退仓面料： <button @click="openModal">添加物料</button>
		</view>
		<view class="ul">
			<view class="li" v-for="(i,index) in form.backDetailList" :key="i.materialId">
				<view class="label">
					物料名称:{{i.name}}
				</view>
				<view class="lists">
					<view class="list-box" v-for="(j,jindex) in i.materialMetersList">
						<view>卷{{jindex + 1}}</view>
						<view>
							<span>{{j}}</span>
						</view>
					</view>
				</view>
				<view class="list-btn-warp">
					<button @click="listDelete(index)">删除</button>
					<button @click="listUpdate(i,index)">{{i.isEdit ? '确认' : '修改'}}</button>
				</view>
			</view>
		</view>
		<view class="footer-btn-warp" style="margin-top: 20rpx;" v-if="form.backDetailList.length != 0">
			<button class="cancel" style="background-color:red"  @tap="$utils.back()">取消</button>
			<button class="upload" style="background-color:blue" @click="submitBack()">确定</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.name ? '请选择物料' : selectMaterialDtl.name }}
					</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.materialMetersList">
						<view class="delete-icon" @click="materialMetersListDelete(index)">
							-
						</view>
						<view class="li-label">
							卷{{index + 1}}
						</view>
						<view class="input">
							
							<input type="number" :value="i" @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">取消</button>
					<button class="upload" style="background-color:blue" @click="pushList">确定</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>
	export default{
		name:"xx",
		data(){
			return{
				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,
			}
		},
		created(){
			this.selectList()
			this.getSelectMaterialList()
		},
		methods:{
			
			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()
						}
					},
				});
				
			},
			materialMetersListDelete(index){
				this.selectMaterialDtl.materialMetersList.splice(index,1)
			},
			listUpdate(i,index){
				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.materialMetersList[index] = e.detail.value
				console.log(this.selectMaterialDtl)
			},
			tabsChange(index) {
				this.swiperCurrent = index;
				this.current = index; 
			},
			addList(){
				if(!this.selectMaterialDtl.name){
					this.$msg.showToast('请选择物料！')
					return
				}
				this.selectMaterialDtl.materialMetersList.push(0)
			},
			selectMaterialList(i){
				const v = this
				v.selectMaterialDtl = {
					materialId:i.id,
					materialMetersList:[],
					name:i.name,
					isEdit:false,
				}
				this.$refs.popup2.close()
			},
			openSelectModal(){
				this.selectMaterialDtl = {}
				this.updateIndex = null
				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">
	.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>