androidCnToWechatGrt/pagesStorage/moveStorage/add.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='新增'></cus-header>
		<div class="box">
			<div class="title">移库单基本信息</div>
			<div class="form">
				<div class="item">
					<div class="left"><span>*</span>移库单号</div>
					<div class="right">
						<input type="text" placeholder-class="storage-inp-ph" placeholder="请输入移库单号" v-model="movementDto.orderNo" @blur="e=>setDto(e,'orderNo')">
					</div>
				</div>
				<div class="item">
					<div class="left"><span>*</span>源仓库</div>
					<div class="right" @tap="selectSourceWarehouse">
						<text v-if="movementDto.sourceWarehouseName">{{movementDto.sourceWarehouseName}} ></text>
						<text class="tip" v-else>请选择仓库 ></text>
					</div>
				</div>
				<div class="item">
					<div class="left"><span>*</span>所属项目</div>
					<div class="right" @tap="selectProject">
						<text v-if="movementDto.projectName">{{movementDto.projectName}} ></text>
						<text class="tip" v-else>请选择项目 ></text>
					</div>
				</div>
				<div class="item">
					<div class="left"><span>*</span>目标仓库</div>
					<div class="right" @tap="selectTargetWarehouse">
						<text v-if="movementDto.targetWarehouseName">{{movementDto.targetWarehouseName}} ></text>
						<text class="tip" v-else>请选择仓库 ></text>
					</div>
				</div>
				<!-- <div class="item">
					<div class="left">总数量</div>
					<div class="right">
						<input type="text" v-model="movementDto.totalQuantity" disabled>
					</div>
				</div> -->
				<div class="item">
					<div class="left">总金额</div>
					<div class="right">
						<input type="text" placeholder-class="storage-inp-ph" placeholder="请输入" v-model="movementDto.totalAmount"  @blur="e=>setDto(e,'totalAmount')">
					</div>
				</div>
				<div class="zdjs" @tap="autoCalculate">自动计算</div>
			</div>
		</div>
		<div class="box" :style="{'padding-bottom':movementDto.details.length?'0':'48rpx'}">
			<div class="title">商品明细</div>
			<div class="btn" @tap="toAddGoods">+ 添加商品</div>
			<div class="goods">
				<template v-if="movementDto.details.length">
					<div class="good" v-for="(good,idx) in movementDto.details" :key="good.skuId">
						<div class="title">
							<text>{{good.item.itemName}}</text>
							<image :src="imgBase+'storage/icon_remove_grey.png'" @tap="deleteGood(idx)"></image>
						</div>
						<div class="info">
							<div>规格信息：<span>{{good.itemSku.skuName||''}} / {{good.itemSku.grossWeight||0}}kg / {{good.itemSku.width||0}}X{{good.itemSku.height||0}}cm</span></div>
						</div>
						<div class="info">
							<div>剩余库存：<span>{{good.nextQuantity}}</span></div>
						</div>
						<div class="num">
							<text>移库数量：</text>
							<u-number-box v-model="good.quantity" button-size="48" :integer="true" inputWidth="102rpx"
							 @change="e=>changeRkNum(e,idx)" bgColor="#F5F8FA"></u-number-box>
						</div>
						<div class="num">
							<text>金额：</text>
							<u-number-box v-model="good.amount" button-size="48" :integer="false" :canSmall="true" inputWidth="102rpx" 
							@change="e=>changeRkMoney(e,idx)" bgColor="#F5F8FA"></u-number-box>
						</div>
					</div>
				</template>
			</div>
		</div>
		<div class="save">
			<div class="btn" @tap="saveShipment">保存</div>
		</div>
		<u-picker title="源仓库" :show="sourceWarehouseShow" :columns="sourceWarehouseList" keyName="warehouseName" 
			@cancel="sourceWarehouseShow=false" @confirm="sourceWarehouseConfirm" :immediateChange="true">
		</u-picker>
		<u-picker title="所属项目" :show="projectShow" :columns="projectList" keyName="projectName" 
			@cancel="projectShow=false" @confirm="projectConfirm" :immediateChange="true">
		</u-picker>
		<u-picker title="目标仓库" :show="targetWarehouseShow" :columns="targetWarehouseList" keyName="warehouseName" 
			@cancel="targetWarehouseShow=false" @confirm="targetWarehouseConfirm" :immediateChange="true">
		</u-picker>
	</view>
</template>

<script>
	import { generateNo } from '@/utils/common.js'
	export default {
		data(){
			return {
				movementDto:{
					id: '',
					orderNo: '',
					totalAmount: '',
					orderStatus: 1,
					sourceWarehouseId: '',
					sourceWarehouseName: '',
					targetWarehouseId: '',
					targetWarehouseName: '',
					totalQuantity: 0,
					details: [],
					projectId:'',
					projectName:''
				},
				sourceWarehouseShow:false,
				sourceWarehouseList:[],
				targetWarehouseShow:false,
				targetWarehouseList:[],
				projectShow:false,
				projectList:[]
			}
		},
		mounted() {
			this.movementDto.orderNo = generateNo('YK');
		},
		methods:{
			selectSourceWarehouse(){
				this.sourceWarehouseShow = true;
				this.$nextTick(()=>{
					this.$api.get('/wms/warehouse/page').then(res=>{
						if(res.data.code===0){
							this.sourceWarehouseList = [res.data.data.list];
						}else this.$showToast(res.data.msg)
					})
				})
			},
			sourceWarehouseConfirm(e){
				this.movementDto.sourceWarehouseId = e.value[0].id;
				this.movementDto.sourceWarehouseName = e.value[0].warehouseName;
				this.sourceWarehouseShow = false;
			},
			selectProject(){
				this.projectShow = true;
				this.$nextTick(()=>{
					this.$api.get('/wms/project/page',{page:1,limit:-1}).then(res=>{
						if(res.data.code===0){
							this.projectList = [res.data.data.list];
						}else this.$showToast(res.data.msg)
					})
				})
			},
			projectConfirm(e){
				this.movementDto.projectId = e.value[0].id;
				this.movementDto.projectName = e.value[0].projectName;
				this.projectShow = false;
			},
			selectTargetWarehouse(){
				this.targetWarehouseShow = true;
				this.$nextTick(()=>{
					this.$api.get('/wms/warehouse/page').then(res=>{
						if(res.data.code===0){
							this.targetWarehouseList = [res.data.data.list];
						}else this.$showToast(res.data.msg)
					})
				})
			},
			targetWarehouseConfirm(e){
				this.movementDto.targetWarehouseId = e.value[0].id;
				this.movementDto.targetWarehouseName = e.value[0].warehouseName;
				this.targetWarehouseShow = false;
			},
			
			setDto(e,name){
				this.movementDto[name] = e.target.value;
			},
			autoCalculate(){
				this.movementDto.totalAmount = this.movementDto.details.reduce((cur,pre)=>cur+(+pre.amount||0),0);
			},
			toAddGoods(){
				if(!this.movementDto.sourceWarehouseId) return this.$showToast('请选择源仓库')
				if(!this.movementDto.projectId) return this.$showToast('请选择项目')
				let ids = this.movementDto.details.map(d=>d.skuId);
				uni.navigateTo({
					url:'/pagesStorage/moveStorage/goods?ids='+ids+'&warehouseId='+this.movementDto.sourceWarehouseId+'&projectId='+this.movementDto.projectId,
					events:{
						addGoods:list=>{
							let aList = JSON.parse(JSON.stringify(list));
							this.movementDto.details.forEach(d=>{
								aList = list.filter(l=>l.skuId!=d.skuId)
							})
							aList.forEach((d,i)=>{
								let amount = d.checknum*d.itemSku.costPrice;
								this.$set(aList[i],'amount',amount);
								this.$set(aList[i],'quantity',d.checknum);
							})
							this.movementDto.details = [...this.movementDto.details,...aList];
							this.computeNum();
							this.autoCalculate();
						}
					}
				})
			},
			deleteGood(index){
				this.movementDto.details.splice(index,1);
				this.$nextTick(()=>{
					this.computeNum();
							this.autoCalculate();
				})
			},
			changeRkNum(e,index){
				this.$set(this.movementDto.details[index],'quantity',e.value);
				this.$nextTick(()=>{
					this.computeNum();
				})
			},
			changeRkMoney(e,index){
				this.$set(this.movementDto.details[index],'amount',e.value);
				this.autoCalculate();
			},
			computeNum(){
				this.movementDto.totalQuantity = this.movementDto.details.reduce((cur,pre)=>cur+pre.quantity,0);
			},
			saveShipment(){
				if(!this.movementDto.orderNo) return this.$showToast('请输入移库单号');
				if(!this.movementDto.sourceWarehouseId) return this.$showToast('请选择源仓库')
				if(!this.movementDto.projectId) return this.$showToast('请选择项目')
				if(!this.movementDto.targetWarehouseId) return this.$showToast('请选择目标仓库')
				
				let temp = JSON.parse(JSON.stringify(this.movementDto.details));
				let details = temp.map(d=>{
					return {
					    skuId: d.itemSku.id,
					    amount: d.amount,
					    quantity: d.quantity,
					    sourceWarehouseId: this.movementDto.sourceWarehouseId,
					    projectId: this.movementDto.projectId,
					    targetWarehouseId: this.movementDto.targetWarehouseId,
					}
				})
				this.movementDto.details = details;
				
				this.$api.post('/wms/movementOrder/move',this.movementDto).then(res=>{
					if(res.data.code===0){
						this.$showToast('移库单新增成功');
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pagesStorage/moveStorage/index'
							})
						},1500)
					}else this.$showToast(res.data.msg)
				})
			},
		}
	}
</script>

<style>
	.storage-inp-ph{
		color: #B9C0C8 !important;
	}
</style>
<style scoped lang="less">
	.page{
		padding: 0 24rpx 186rpx;
		background: #F4F8FB;
		box-sizing: border-box;
		
		.box{
			width: 100%;
			padding: 36rpx 24rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			
			.title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #1D2129;
				line-height: 36rpx;
				text-align: left;
			}
			
			.form{
				width: 100%;
				margin-top: 36rpx;
				.item{
					width: 100%;
					height: 90rpx;
					background: #FFFFFF;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #1D2129;
						line-height: 42rpx;
						text-align: left;
						span{
							color: #F95050;
						}
					}
					.right{
						input{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #4E5969;
							line-height: 42rpx;
							text-align: right;
						}
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #4E5969;
							line-height: 42rpx;
							text-align: right;
							&.tip{
								color: #B9C0C8;
							}
						}
					}
				}
				.zdjs{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #198CFF;
					line-height: 37rpx;
					text-align: right;
					margin-top: 9rpx;
				}
			}
		
			.btn{
				width: 100%;
				height: 64rpx;
				border-radius: 16rpx;
				border: 1rpx solid #198CFF;
				margin-top: 26rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #198CFF;
				line-height: 64rpx;
				text-align: center;
				letter-spacing: 2rpx;
			}
		
			.goods{
				width: 100%;
				margin-top: 10rpx;
				.good{
					width: 100%;
					padding: 36rpx 0;
					box-sizing: border-box;
					background: #FFFFFF;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
					&>div{
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					.title{
						text{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 30rpx;
							color: #1D2129;
							line-height: 30rpx;
							text-align: left;
						}
						image{
							width: 28rpx;
							height: 28rpx;
						}
					}
					.info{
						margin-top: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #86909C;
						line-height: 24rpx;
						span{
							color: #4E5969;
						}
					}
					.num,.money{
						margin-top: 24rpx;
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
							line-height: 24rpx;
							text-align: left;
						}
					}
				}
			}
		}
		
		.save{
			width: 100%;
			height: 148rpx;
			padding: 20rpx 48rpx 0;
			box-sizing: border-box;
			background: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			.btn{
				width: 100%;
				height: 88rpx;
				background: #198CFF;
				border-radius: 16rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				letter-spacing: 2rpx;
			}
		}
	}
</style>