storage-wechat/pages/shiftHandover/shiftHandover.vue

<template>
	<view class="checkSubmit">
		<view class="form-box" style="margin:0 30rpx">
			<uni-forms ref="baseForm" label-position="left">
				<view class="commons-title">
					接班人员
				</view>
				<uni-forms-item label="接班人员" required>
					<picker @change="bindPickerChange2" :range="userList" range-key="nickName">
						<view class="" style="text-align: right;display: flex;justify-content: space-between;padding-top:20rpx">
							<view class="" style="color:#999">
								{{successorName || '请选择接班人员'}}
							</view>
							 <uni-icons type="forward" size="20"></uni-icons>
						</view>
					</picker>
				</uni-forms-item>
				<view class="commons-title">
					转班明细
				</view>
				<view style="border-bottom: 1rpx solid #000;" v-for="(i,index) in formData" :key="i.qrCode">
					<uni-forms-item label="物料名称" required>
						<view>
							<view class="" style="text-align: right;display: flex;justify-content: space-between;padding-top:20rpx">
								<view class="" style="color:#999"  @click="openSelectQd(index)">
									{{i.qrCodeName || '请选择物料或者扫描二维码'}}
								</view>
								<uni-icons type="scan"  @click="scanCode(index)" size="20"></uni-icons>
								<uni-icons  @click="openSelectQd(index)" type="forward" size="20"></uni-icons>
							</view>
						</view>
					</uni-forms-item>
					<view style="width:90%">
						<uni-forms-item   label="称重结果" required>
							<uni-easyinput  v-model="i.weighingResults" />
							<span style="position: absolute;right:-80rpx;top:10px">kg</span>
						</uni-forms-item>
					</view>
					<uni-forms-item label="有无外包装" required>
						<switch  style="transform:scale(0.8)" @change="(e)=>switchChange(e,index,'outerPackaging')" />
					</uni-forms-item>
					<uni-forms-item label="有无卷芯" required>
						<switch style="transform:scale(0.8)" @change="(e)=>switchChange(e,index,'convolution')" />
					</uni-forms-item>
				</view>
			</uni-forms>
			<button size="mini" type="default" style="width: 500rpx;margin: 20rpx auto;display: block;"
				@click="add()">
				添加明细
			</button>
		</view>
		<view class="submit-box">
			<view class="" style="line-height: 80rpx;text-align: center;">
				本次转班：{{formData.length}} 件
			</view>
			<button @click="addShift" style="background: #0066CC;color:#fff;margin-bottom: 30rpx;">提交</button>
			
		</view>
		<uni-popup ref="popup" type="top">
			<view class="search-box">
				<uni-search-bar @confirm="getMaterial" v-model="req.materialName" @cancel="reload">
				</uni-search-bar>
				<ul>
					<li @click="selectMaterialList(i)" v-for="i in materialList" :key="i.id">
						{{i.name}}
					</li>
				</ul>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getInfo
	} from "@/util/api.js";
	import Vue from 'vue'
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	import {
		dateFormat,
		getTime
	} from '../../util/uitl.js'
	export default {
		components: {
			htzImageUpload,
		},
		data() {
			return {
				req:{
					materialName:null, 
				},
				formData: [],
				userList:[],
				materialList:[],
				successorName:null,
				successorId:null,
				userData:null,
				materialIndex:null,
			}
		},
		onLoad(option) {
			const v = this
			v.getUser()
			uni.getStorage({
				key: "userInfo",
				success(_data) {
					v.userData = _data.data
				},
				fail() {
			
				}
			})
			//v.getMaterial()
		},
		methods: {
			selectMaterialList(i){
				const v = this
				console.log(i)
				v.formData[v.materialIndex].qrCode = null
				v.formData[v.materialIndex].qrCodeName = i.name
				v.formData[v.materialIndex].quantity = null
				v.formData[v.materialIndex].materialId = i.id
				console.log(v.formData)
			},
			addShift(){
				const v = this
				console.log(v.formData,123123123)
				if(!v.successorId){
					uni.showToast({
						icon:'none',
						title: '请选择交接人员',
						duration: 2000
					});
					return
				}
				if(v.formData.length == 0){
					uni.showToast({
						icon:'none',
						title: '请添加明细',
						duration: 2000
					});
					return
				}
				for (var i = 0; i < v.formData.length; i++) {
					const element = v.formData[i]
					element.shiftHandoverPersonneId = v.userData.id
					element.successorId = v.successorId
					element.count = v.formData.length
					console.log(element.weighingResults)
					if(element.weighingResults == 0 || !element.weighingResults){
						uni.showToast({
							icon:'none',
							title: '请填写物料剩余数量',
							duration: 2000
						});
						return
					}
					if(!element.materialId){
						uni.showToast({
							icon:'none',
							title: '请选择物料',
							duration: 2000
						});
						return
					}
				}
				v.$post('/mgr/shiftChange/addShift',v.formData).then(res=>{
					if(res.code == 200){
						uni.showToast({
							title: '提交成功，跳转中！'
						})
						setTimeout(()=>{
							wx.reLaunch({
								url: '/pages/home'
							})
						},500)
					}
				})
			},
			
			add(){
				const v = this
				v.formData.push({
					shiftHandoverPersonneId:null,
					successorId:null,
					qrCode:null,
					qrCodeName:null,
					materialId:null,
					quantity:null,
					convolution:0,
					outerPackaging:0,
					weighingResults:0,
				})
			},
			scanCode(index) {
				const v = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						uni.showToast({
							icon: "loading",
							title: '加载中',
							duration: 1500
						});
						v.$post('/wx/common/gerMaterialInfoByQrcode', {
							qrCode: res.result
						}).then(res => {
							if(res.code == 200){
								v.formData[index].qrCode = res.data.qrCode
								v.formData[index].qrCodeName = res.data.materialName
								v.formData[index].quantity = res.data.quantity
								v.formData[index].materialId = res.data.materialId
							}
						})
					}
				});
			},
			//打开搜索
			openSelectQd(index){
				const v = this
				v.materialIndex = index
				this.$refs.popup.open('top')
			},
			reload(){
				this.req.keyword = null
				this.getMaterial()
			},
			//物料信息
			getMaterial(){
				const v = this
				v.$post('/wx/common/getMaterial',v.req).then(res=>{
					if(res.code == 200){
						v.materialList = res.data
					}
				})
			},
			//用户信息
			getUser(){
				const v = this
				v.$post('/wx/common/getUser',v.formData).then(res=>{
					if(res.code == 200){
						v.userList = res.data
					}
				})
				
			},
			switchChange(e,index,key){
				const v = this
				e.detail.value ? v.formData[index][key] = 1 :  v.formData[index][key] = 0
				console.log(v.formData)
			},
			//选择人员
			bindPickerChange2(e){
				const v = this
				console.log(v.userList[e.detail.value])
				v.successorName = v.userList[e.detail.value].nickName
				v.successorId = v.userList[e.detail.value].userId
			},
		},
	}
</script>

<style lang="less">
	.checkSubmit {
		.search-box{
			background-color: #fff;
			ul{
				li{
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 30rpx;
					border-bottom: 1rpx solid #dcdcdc;
				}
			}
		}
		.submit-box {

			padding: 0 30rpx;
		}

		.dtl {
			padding: 30rpx;
			border-bottom: 1rpx solid #dcdcdc;
			font-size: 26rpx;
			line-height: 40rpx;
		}

		.addQrcode-list {
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			padding: 15rpx;
			border-bottom: 1rpx solid #dcdcdc;
			font-size: 24rpx;

			.fl {
				display: flex;

				.code {
					margin-right: 20rpx;
				}
			}

			.fr {
				line-height: 80rpx;
			}
		}
	}

	.popup-input-warp {
		padding: 30rpx 40rpx;
	}


	.txt {
		margin-bottom: 20rpx;
	}

	.imglist {
		display: flex;
		flex-wrap: wrap;
	}

	.imglist .item {
		width: 150rpx;
		height: 150rpx;
		margin-right: 22rpx;
		margin-bottom: 10rpx;
		position: relative;
	}

	.imglist .last-item {
		width: 150rpx;
		height: 150rpx;
		text-align: center;
		line-height: 146rpx;
		border: 2rpx dashed #8B97A9;
		box-sizing: border-box;
	}

	.imglist .item image {
		width: 100%;
		height: 100%;
	}

	.imglist .item .delete {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: -25rpx;
		right: -12rpx;
		font-size: 40rpx;
		font-weight: bold;
	}
</style>