androidCnToWechatGrt/pagesStorage/outStorage/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="shipmentDto.orderNo" @blur="e=>setShipment(e,'orderNo')">
					</div>
				</div>
				<div class="item">
					<div class="left"><span>*</span>仓库</div>
					<div class="right" @tap="selectWarehouse">
						<text v-if="shipmentDto.warehouseName">{{shipmentDto.warehouseName}} ></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="shipmentDto.projectName">{{shipmentDto.projectName}} ></text>
						<text class="tip" v-else>请选择项目 ></text>
					</div>
				</div>
				<div class="item">
					<div class="left"><span>*</span>出库类型</div>
					<div class="right" @tap="selectShipmentType">
						<text v-if="shipmentDto.optTypeName">{{shipmentDto.optTypeName}} ></text>
						<text class="tip" v-else>请选择 ></text>
					</div>
				</div>
				<div class="item">
					<div class="left">客户</div>
					<div class="right" @tap="selectMerchant">
						<text v-if="shipmentDto.merchantName">{{shipmentDto.merchantName}} ></text>
						<text class="tip" v-else>请选择 ></text>
					</div>
				</div>
				<div class="item">
					<div class="left"><span>*</span>出库日期</div>
					<div class="right" @tap="dateShow = true">
						<text v-if="shipmentDto.shipmentDate">{{shipmentDto.shipmentDate}} ></text>
						<text class="tip" v-else>请选择 ></text>
					</div>
				</div>
				<div class="item">
					<div class="left">业务单号</div>
					<div class="right">
						<input type="text" placeholder-class="storage-inp-ph" placeholder="请输入" v-model="shipmentDto.bizOrderNo" @blur="e=>setShipment(e,'bizOrderNo')">
					</div>
				</div>
				<div class="item">
					<div class="left"><span>*</span>领料人</div>
					<div class="right">
						<input type="text" placeholder-class="storage-inp-ph" placeholder="请输入" v-model="shipmentDto.collector" @blur="e=>setShipment(e,'collector')">
					</div>
				</div>
				<!-- <div class="item">
					<div class="left">总数量</div>
					<div class="right">
						<input type="text" v-model="shipmentDto.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="shipmentDto.totalAmount"  @blur="e=>setShipment(e,'totalAmount')">
					</div>
				</div>
				<div class="zdjs" @tap="autoCalculate">自动计算</div>
			</div>
		</div>
		<div class="box" :style="{'padding-bottom':shipmentDto.details.length?'0':'48rpx'}">
			<div class="title">商品明细</div>
			<div class="btn" @tap="toAddGoods">+ 添加商品</div>
			<div class="goods">
				<template v-if="shipmentDto.details.length">
					<div class="good" v-for="(good,idx) in shipmentDto.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="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="warehouseShow" :columns="warehouseList" keyName="warehouseName" 
			@cancel="warehouseShow=false" @confirm="warehouseConfirm" :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="ShipmentTypeShow" :columns="ShipmentTypeList" keyName="dictLabel" 
			@cancel="ShipmentTypeShow=false" @confirm="ShipmentTypeConfirm" :immediateChange="true">
		</u-picker>
		<u-picker title="客户" :show="merchantShow" :columns="merchantList" keyName="merchantName" 
			@cancel="merchantShow=false" @confirm="merchantConfirm" :immediateChange="true">
		</u-picker>
		<u-calendar title='出库日期' :minDate="minDate" :maxDate="maxDate" :monthNum="5" :show="dateShow" mode="single" @confirm="dateConfirm" @close="dateShow = false"></u-calendar>
	</view>
</template>

<script>
	import { generateNo } from '@/utils/common.js'
	export default {
		data(){
			return {
				shipmentDto:{
					id: '',
					orderNo: '',
					optType: '',
					optTypeName: '',
					merchantId: '',
					merchantName: '',
					bizOrderNo: '',
					totalAmount: '',
					orderStatus: 1,
					warehouseId: '',
					warehouseName: '',
					totalQuantity: 0,
					shipmentDate:'',
					collector:'',
					details: [],
					projectId:'',
					projectName:''
				},
				warehouseShow:false,
				warehouseList:[],
				ShipmentTypeShow:false,
				ShipmentTypeList:[],
				merchantShow:false,
				merchantList:[],
				dateShow:false,
				minDate:'',
				maxDate:'',
				projectShow:false,
				projectList:[]
			}
		},
		mounted() {
			this.shipmentDto.orderNo = generateNo('CK');
			this.minDate = new Date(new Date().setMonth(new Date().getMonth() - 3)).Format('yyyy-MM-dd');
			this.maxDate = new Date(new Date().setMonth(new Date().getMonth() + 1)).Format('yyyy-MM-dd');
		},
		methods:{
			selectWarehouse(){
				this.warehouseShow = true;
				this.$nextTick(()=>{
					this.$api.get('/wms/warehouse/page').then(res=>{
						if(res.data.code===0){
							this.warehouseList = [res.data.data.list];
						}else this.$showToast(res.data.msg)
					})
				})
			},
			warehouseConfirm(e){
				this.shipmentDto.warehouseId = e.value[0].id;
				this.shipmentDto.warehouseName = e.value[0].warehouseName;
				this.warehouseShow = 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.shipmentDto.projectId = e.value[0].id;
				this.shipmentDto.projectName = e.value[0].projectName;
				this.projectShow = false;
			},
			selectShipmentType(){
				this.ShipmentTypeShow = true;
				this.$nextTick(()=>{
					this.$api.get('/sys/dict/data/getListByType/wms_shipment_type').then(res=>{
						if(res.data.code===0){
							this.ShipmentTypeList = [res.data.data];
						}else this.$showToast(res.data.msg)
					})
				})
			},
			ShipmentTypeConfirm(e){
				this.shipmentDto.optType = e.value[0].dictValue;
				this.shipmentDto.optTypeName = e.value[0].dictLabel;
				this.ShipmentTypeShow = false;
			},
			selectMerchant(){
				this.merchantShow = true;
				this.$nextTick(()=>{
					this.$api.get('/wms/merchant/page').then(res=>{
						if(res.data.code===0){
							this.merchantList = [res.data.data.list];
						}else this.$showToast(res.data.msg)
					})
				})
			},
			merchantConfirm(e){
				this.shipmentDto.merchantId = e.value[0].id;
				this.shipmentDto.merchantName = e.value[0].merchantName;
				this.merchantShow = false;
			},
			setShipment(e,name){
				this.shipmentDto[name] = e.target.value;
			},
			autoCalculate(){
				this.shipmentDto.totalAmount = this.shipmentDto.details.reduce((cur,pre)=>cur+(+pre.amount||0),0);
			},
			toAddGoods(){
				if(!this.shipmentDto.warehouseId) return this.$showToast('请选择仓库')
				if(!this.shipmentDto.projectId) return this.$showToast('请选择项目')
				let ids = this.shipmentDto.details.map(d=>d.skuId);
				uni.navigateTo({
					url:'/pagesStorage/outStorage/goods?ids='+ids+'&warehouseId='+this.shipmentDto.warehouseId+'&projectId='+this.shipmentDto.projectId,
					events:{
						addGoods:list=>{
							let aList = JSON.parse(JSON.stringify(list));
							this.shipmentDto.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.shipmentDto.details = [...this.shipmentDto.details,...aList];
							this.computeNum();
							this.autoCalculate();
						}
					}
				})
			},
			deleteGood(index){
				this.shipmentDto.details.splice(index,1);
				this.$nextTick(()=>{
					this.computeNum();
					this.autoCalculate();
				})
			},
			changeRkNum(e,index){
				this.$set(this.shipmentDto.details[index],'quantity',e.value);
				this.$nextTick(()=>{
					this.computeNum();
				})
			},
			changeRkMoney(e,index){
				this.$set(this.shipmentDto.details[index],'amount',e.value);
				this.autoCalculate();
			},
			computeNum(){
				this.shipmentDto.totalQuantity = this.shipmentDto.details.reduce((cur,pre)=>cur+pre.quantity,0);
			},
			saveShipment(){
				if(!this.shipmentDto.orderNo) return this.$showToast('请输入出库单号');
				if(!this.shipmentDto.warehouseId) return this.$showToast('请选择仓库');
				if(!this.shipmentDto.projectId) return this.$showToast('请选择所属项目');
				if(!this.shipmentDto.optType) return this.$showToast('请选择出库类型');
				if(!this.shipmentDto.shipmentDate) return this.$showToast('请选择出库日期');
				if(!this.shipmentDto.collector) return this.$showToast('请输入领料人');
				
				let temp = JSON.parse(JSON.stringify(this.shipmentDto.details));
				let details = temp.map(d=>{
					return {
					    skuId: d.itemSku.id,
					    amount: d.amount,
					    quantity: d.quantity,
					    warehouseId: this.shipmentDto.warehouseId,
					    projectId: this.shipmentDto.projectId,
					}
				})
				this.shipmentDto.details = details;
				
				this.$api.post('/wms/shipmentOrder/shipment',this.shipmentDto).then(res=>{
					if(res.data.code===0){
						this.$showToast('出库单新增成功');
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pagesStorage/outStorage/index'
							})
						},1500)
					}else this.$showToast(res.data.msg)
				})
			},
			dateConfirm(e){
				this.shipmentDto.shipmentDate = e[0];
				this.dateShow = false;
			}
		}
	}
</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>