storage-wechat/pages/usedTotal/return-warehouse.vue

<template>
	<div>
		<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" :key="jindex">
						<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"   @click="backFn">取消</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" :key="index">
						<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"  @click="cancelFn">取消</button>
					<button class="upload" style="background-color:blue" @click="pushList">确定</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" type="bottom">
			<view class="tabs">
				<view class="tab-box" @click="tabChange(0)">
					今日领取的面料
					<view class="blue-line"  :class="current === 1 ? 'op0':''">
			
					</view>
				</view>
				<view class="tab-box" @click="tabChange(1)">
					选择其他
					<view class="blue-line"  :class="current === 0 ? 'op0':''">
			
					</view>
				</view>
			</view>
			<view class="search-box" v-if="current == 0">
				<ul  style="height: 60vh;overflow-y: scroll;">
					<li @click="selectMaterialList(i)" v-for="i in pickingToday" :key="i.id">
						{{i.materialName}}
					</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">
					<input
						v-model="req.search"
						:searchIcon="true" 
						:border="true" 
						placeholder="请输入物料名称或编码"
						@input="getSelectMaterialList"
						class="search-input"
						 />
				</view>
				<ul style="height: 60vh;overflow-y: scroll;">
					<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:{},
				form:{
					operatorId:null,
					backDetailList:[],
				},
				req:{
					userId:null,
					pageNum:1,
					pageSize:30,
					search:null,
					materialCode:null,
				},
				pickingToday:[],
				materialData:[],
				selectMaterialDtl:{},
				updateIndex:null,
			}
		},
		created(){
			const v = this
			uni.getStorage({
				key:'Authorization',
				success:(res=>{
					console.log(res)
					v.form.operatorId = res.data.account
					v.req.userId = res.data.account
					v.userInfo = res.data
					console.log(v.req,'req')
					v.selectList()
					v.getSelectMaterialList()
				})
				
			})
			
		},
		methods:{
			backFn(){
				uni.navigateBack()
			},
			cancelFn(){
				this.$refs.addModal.close()
			},
			tabChange(_type){
				this.current = _type
			},
			submitBack(){
				const v = this
				console.log(v.form)
				uni.showLoading({title: '加载中',mask:true});
				v.$post('/stockBack/submitBack',v.form).then(res=>{
					console.log(res)
					uni.hideLoading()
					if(res.code == 200){
						uni.hideLoading()
						uni.showToast({
							title: '提交成功，跳转中！'
						})
						setTimeout(() => {
							wx.reLaunch({
								url: '/pages/home'
							})
						}, 2000)
					}
				})
			},
			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
				v.$post('/material/selectList',v.req).then(res=>{
					console.log(res,1231231231)
					this.materialData = res.data
				})
				
			},
			selectList(){
				const v = this
				v.$post('/stockBack/getPickingToday',v.req).then(res=>{
					for (var i = 0; i < res.data.length; i++) {
						res.data[i].id = res.data[i].materialId
						res.data[i].name = res.data[i].materialName
					}
					this.pickingToday = res.data
				})
				
			},
			openModal(){
				this.$refs.addModal.open('bottom')
			},
		},
	}
</script>

<style scoped lang="less">
	.tabs{
		background-color: #fff;
		display: flex;
		.tab-box {
			width: 49%;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			position: relative;
			color: #000;
			.blue-line {
				position: absolute;
				bottom: 0;
				left: 50%;
				height: 4rpx;
				width: 100rpx;
				margin-left: -50rpx;
				background-color: blue;
			}
			.op0{
				opacity: 0;
			}
		}
	}
	.footer-btn-warp{
		display: flex;
		padding: 20rpx;
		button{
			width: 48%;
			color: #fff;
		}
	}
	.search-box{
		.input-warp{
			padding: 40rpx;
		}
		.search-input {
			border:1rpx solid #dcdcdc;
			padding: 20rpx;
		}
		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: 60%;
				border:1rpx solid #dcdcdc;
				padding: 0 20rpx;
				overflow: hidden;
				height: 80rpx;
			}
			.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;
				overflow: hidden;
			}
			.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>