storage-wechat/pages/materialTransfer/materialTransfer.vue

<template>
	<div class="materialTransfer">
		<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.stockTransferDetailsList" :key="jindex">
						<view>卷{{jindex + 1}}</view>
						<view>
							<span>{{j.quantity}}</span>
						</view>
					</view>
					<view class="user-select">
						<view style="width:30%">
							接收人：
						</view>
						<view class="" style="width:70%;border: 1rpx solid #dcdcdc;padding:0 20rpx">
							<picker :value="i.receiveUser" :range="selectOneList"
								@change="(e)=>printingWorkersSelect(e,index)" range-key="realName" style="width:100%">
								<view class="uni-input">{{i.userName || '请选择人员'}}</view>
							</picker>
						</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.stockTransferDetailsList" :key="index">
						<view class="delete-icon" @click="stockTransferDetailsListDelete(index)">
							-
						</view>
						<view class="li-label">
							卷{{index + 1}}
						</view>
						<view class="input">

							<input type="number" :value="i.quantity" @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.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">
					<input v-model="req.search" confirm-type="search" 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: {
					submitUser: null,
					backDetailList: [],
				},
				req: {
					userId: null,
					pageNum: 1,
					pageSize: 30,
					search: null,
					materialCode: null,
				},
				pickingToday: [],
				materialData: [],
				selectMaterialDtl: {},
				updateIndex: null,
				selectOneList: [],
			}
		},
		created() {
			const v = this
			uni.getStorage({
				key: 'Authorization',
				success: (res => {
					console.log(res)
					v.form.submitUser = res.data.account
					v.req.userId = res.data.account
					v.userInfo = res.data
					console.log(v.req, 'req')
					v.selectList()
					v.getSelectMaterialList()
					v.getBackUser()
				})

			})

		},
		methods: {
			printingWorkersSelect(e, index) {
				console.log(e, index)
				this.form.backDetailList[index].receiveUser = this.selectOneList[e.detail.value].userId
				this.form.backDetailList[index].userName = this.selectOneList[e.detail.value].realName

			},
			getBackUser() {
				this.$post('/stockBack/getBackUser', {}).then(res => {
					this.selectOneList = res.data.A007.concat(res.data.A008, res.data.A012)
				})
			},
			tabChange(_type) {
				this.current = _type
			},
			submitBack() {
				const v = this
				console.log(v.form)
				for (var i = 0; i < this.form.backDetailList.length; i++) {
					this.form.backDetailList[i]
					for (var j = 0; j < this.form.backDetailList[i].stockTransferDetailsList.length; j++) {
						if(this.form.backDetailList[i].stockTransferDetailsList[j].quantity === 0){
							uni.showToast({
								title: '请输入数量！',
								icon:"none" 
							})
							return
						}
					}
				}
				uni.showLoading({title: '加载中',mask:true});
				v.$post('/stockTransfer/add', this.form.backDetailList).then(res => {
					console.log(res)
					uni.hideLoading()
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功，跳转中！'
						})
						setTimeout(() => {
							wx.reLaunch({
								url: '/pages/home'
							})
						}, 2000)
					}
				})
			},
			stockTransferDetailsListDelete(index) {
				this.selectMaterialDtl.stockTransferDetailsList.splice(index, 1)
			},
			listUpdate(i, index) {
				this.selectMaterialDtl = i
				this.updateIndex = index
				this.$refs.addModal.open()
			},
			listDelete(index) {
				this.form.backDetailList.splice(index, 1)
			},
			backFn() {
				uni.navigateBack()
			},
			cancelFn() {
				this.$refs.addModal.close()
			},
			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.stockTransferDetailsList[index].quantity = e.detail.value
				console.log(this.selectMaterialDtl)
			},
			tabsChange(index) {
				this.swiperCurrent = index;
				this.current = index;
			},
			addList() {
				if (!this.selectMaterialDtl.name) {
					uni.showToast({
						title: '请选择物料',
						icon: "none"
					})
					return
				}
				this.selectMaterialDtl.stockTransferDetailsList.push({
					quantity: 0,
				})
			},
			selectMaterialList(i) {
				const v = this
				v.selectMaterialDtl = {
					materialId: i.id,
					stockTransferDetailsList: [],
					name: i.name,
					isEdit: false,
					userName: null,
					receiveUser: null,
					submitUser: v.form.submitUser
				}
				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">
	
	.materialTransfer {
		background-color: #f2f2f2;
		min-height: 100vh;

		.user-select {
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 20rpx;
		}
	}

	.tabs {
		background-color: #fff;
		display: flex;
		justify-content: space-between;

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

		

		.active {
			color: #000 !important;
		}

		.active::before {
			position: absolute;
			bottom: 0;
			left: 50%;
			content: " ";
			height: 4rpx;
			width: 100rpx;
			margin-left: -50rpx;
			background-color: blue;
		}
	}

	.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>