aiot-app/pages/warehouse/material/addStock.vue

<template>
	<view class="mainBox">
		
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="新增物料入库单" @clickLeft="back">
			<!--右菜单-->
			<template slot="float">
				<view class="nav-icon-caozuo rightNav" @click="getsure"><u-button type="success" size="small" class="u-reset-button" text="确定"></u-button></view>
			</template>
		</uni-nav-bar>
		
		<u-cell-group>
			<picker @change="getTypeList" :value="pickerIndex" :range="enterType" range-key="name">
				<u-cell title="入库类型" :value="form.enterTypeName?form.enterTypeName:'无'" :isLink="true"></u-cell>
			</picker>
			<picker @change="getWarehouse" :value="pickerIndex" :range="warehouse" range-key="name">
			   <u-cell title="仓库" :value="form.warehouse.name?form.warehouse.name:'无'" :isLink="true"></u-cell>
			</picker>
			<picker @change="getExecutor" :value="pickerIndex" :range="executor" range-key="name">
				<u-cell title="入库登记人" :value="form.executor.name?form.executor.name:'无'" :isLink="true"></u-cell>
			</picker>
			<picker @change="getSupplier" :value="pickerIndex" :range="supplier" range-key="name">
				<u-cell title="供应商" :value="form.supplier.name?form.supplier.name:'无'" :isLink="true"></u-cell>
			</picker>
			<u-cell title="送货人" :value="form.sendName?form.sendName:'无'" :isLink="true" @click="getSendName()"></u-cell>
			<u-cell title="送货人联系方式" :value="form.sendPhone?form.sendPhone:'无'" :isLink="true" @click="getSendPhone()"></u-cell>
			<u-cell title="送货时间" :isLink="true">
				<view slot="value" class="u-slot-value">
			     	<uni-datetime-picker v-model="form.sendTime">{{form.sendTime}}</uni-datetime-picker>
				</view>
			</u-cell>
		</u-cell-group>
		
		<u-collapse class="cLine" :value="['detail']">	 
		    <u-collapse-item title="附件" name="">
			<view class="picList">
				<upload-File module="物料入库单" @getUpFlie="getUpFlie"></upload-File>
			</view>
		    </u-collapse-item>
			
			<u-collapse-item title="描述" name="">
				<textarea class="textBox" placeholder-style="color:#ddd" placeholder="请输入备注信息" v-model="form.remark" />
			</u-collapse-item>
			
		  </u-collapse>
		  
		 <uni-section title="明细" type="line">
			 <view class="listBox"  v-for="(item, index) in form.numDetails" :key="index" >
			 	<view class="listTit">
			 	  <view style="display:inline-block;"><!--<u-tag :text="item.manageType.name" size="mini" shape="circle" :type="item.manageType.id==2?'primary':'success'"></u-tag>--></view> 
			 	   <view class="name">{{item.name}}</view>	
			 	   <view class="weight">{{item.totalNum}}{{item.unit}}</view>
			 				   <view class="delete" @click="getDelete(index)"><uni-icons custom-prefix="iconfont" type="icon-shanchu" size="24" color="#fa3534"></uni-icons></view>
			 	</view>
			 	<view class="listCont">
			 		<view class="item"><text>编码：</text>{{item.code}}</view>
			 		<view class="item"><text>批次号：</text>{{item.batchNo}}</view>
			 		<view class="item"><text>有效期：</text>{{item.expireDate}}</view>
					<view class="item"><text>包装单位：</text>{{item.unit}}</view>
					<view class="item"><text>应入数量：</text>{{item.num}}</view>
			 	</view>
			 </view>
		 </uni-section>	 
		  
		<view class="footBox">
			<view class="add" @click="getAddDetails"><uni-icons custom-prefix="iconfont" type="icon-shixiangxinzeng" size="20" color="#fff"></uni-icons> 添加明细</view>
			<view class="reg" @click="getAddDetails"><uni-icons type="scan" color="#fff" size="20"></uni-icons> 扫码添加</view>
		</view>
		
		<getinput :show="showInput"   @openInput="getInput" @getInputInfo="getInputInfo"></getinput>
		<addDetails 
		:show="showChoose" 
		title="请选择明细" 
		:tabList="tabList" 
		:materTree = "materTree"
		@openChoose="getChoose" 
		@getChooseInfo="getChooseInfo">
		</addDetails>
	</view>
</template>

<script>
	import {getDate,stopScroll,startScroll} from '@/utils/utils.js';
	import { post,postJ,get } from "@/utils/api.js";
	import getinput from '@/components/Getinput';
	import addDetails from '@/components/addDetails';
	import uploadFile from '@/components/uploadFile';
	export default {
		components: {
			  getinput,
			  uploadFile,
			  addDetails
		},
		data() {
			return {
				form: {
			    	enterType:'',       //入库类型
					enterTypeName:'',   //入库类型名称
					warehouse:{},       //仓库
					executor:{},        //登记人
					supplier:{},        //供应商
                    sendName:'',        //送货人
			    	sendPhone:'',       //联系方式
					sendTime:'',        //送货时间
					attaments: [],      //附件
					remark:'',          //备注
					numDetails:[],      //已选列表
				},
				enterType: [],       //入库类型
				warehouse: [],      //仓库
				executor: [],       //登记人
				supplier: [],       //供应商
                pickerIndex:0,
				showInput: false,    //显示底部输入框
				temp:'',             //临时值
				showChoose: false,   //添加明细开关
				tabList:[
					{
						value:0,
						label:"物料树"
					},
					{
						value:1,
						label:"物料台账列表"
					},
					{
						value:2,
						label:"已选物料"
					}
				],
				materTree:[],     //产品树

			}
		},
		onShow(){
			//获取选项数据
			this.getData();
		},
		mounted(){
			this.form.sendTime = getDate();
		},
		methods: {
			//获取选项数据
		   async getData(){
			   //入库类型
			  let typeInfo = await get(this.apiWebUrl + "/data/dict/source", {code: 'wh,enter_material_type'});
			  this.enterType = typeInfo.data.enter_material_type;
			  //仓库
			  this.warehouse = typeInfo.data.wh;
			  //供应商
			  let supplier = await get(this.apiWebUrl + "/data/dict/source", {code: 'company_info',rela: 5,});
			  this.supplier = supplier.data.company_info;
			  //入库登记人
			  let executor = await postJ(this.apiWebUrl + "/main/user/users",{});
			  this.executor = executor.data;
              //获取产品树
			  let materTree =  await get(this.apiWebUrl + "/main/material/type/tree",{model:2});
			  setTimeout(()=>{
				  let newMaterTree = materTree.data;
				  newMaterTree.forEach(function(res, key) {
				  	newMaterTree[key].childOpen = false;
				  })
				  this.materTree = newMaterTree;
			  },600)
			},
			
			//获取入库类型
			getTypeList(e){
			    this.form.enterType = this.enterType[e.detail.value].id;
			    this.form.enterTypeName = this.enterType[e.detail.value].name;
			},
			//获取仓库信息
			getWarehouse(e){
				this.form.warehouse = this.warehouse[e.detail.value];
			},
			//获取供应商信息
			getSupplier(e){
				this.form.supplier = this.supplier[e.detail.value];
			},
			//入库登记人
			getExecutor(e){
				this.form.executor = this.executor[e.detail.value];
			},
			//填写送货人信息
			getSendName(){
			     this.showInput = !this.showInput;
				 this.team = "sendName";
			},
			//填写送货人电话
			getSendPhone(){
			     this.showInput = !this.showInput;
				 this.team = "sendPhone";
			},
			//输入框开关
			getInput(){
				this.showInput = !this.showInput;
			},
			//接收输入框数据
			getInputInfo(res){
				if(this.team == 'sendName'){
					this.form.sendName = res;
				}else if(this.team == 'sendPhone'){
					this.form.sendPhone = res;
				}
			},
			//上传附件
			getUpFlie(res){
				this.form.attaments = res;
			},
			//添加明细开关
			getChoose(){
				this.showChoose = !this.showChoose;
				if(!this.showChoose){
				   startScroll();    //还原滚动条
				}
			},
			//添加入库明细
			getAddDetails(){
		     	this.showChoose = true;
				stopScroll();  //停止滚动条
			},
			//接收添加入库明细
			getChooseInfo(res){
				this.form.numDetails = res;
				//console.log(this.form);
			},
			//删除
			getDelete(index){
                this.form.numDetails.splice(index,1);
			},
			//确定
			getsure(){
				 console.log(this.form);
				 if(this.form.numDetails.length < 1){
					 uni.showToast({
					 	icon:"none",
					 	title: '请选择添加明细'
					 	});
					   return;
				 }
				 let data = JSON.stringify(this.form);
				 postJ(this.apiWebUrl + "/wms/enter/material/save",data).then((res)=>{
					 console.log(res);
				 });
			},
				
		}
	}
</script>

<style  lang="scss" scoped>
	.mainBox{
		padding-bottom: 120rpx;
	}
	.picList{
		display: flex;
		align-items: center;
		justify-items: flex-start;
		flex-wrap: wrap;
	}
	/deep/.picList .u-image{
		margin-right:10rpx;
		margin-bottom: 10rpx;
	}
	/deep/.cLine .u-line:nth-child(1){
		border-bottom: none !important;
	}
	.footBox{
		position: fixed;
		left:0px;
		bottom: 0px;
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		view{
			width:50%;
			height: 100%;
			text-align: center;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.reg{
			background: $u-success-dark;
		}
		.add{
			background: $uni-color-primary;
		}
		.uni-icons{margin-right: 8rpx !important;}
	}
	
	.listBox{
		 padding: 20rpx;
		 border-bottom:1px #f2f2f2 solid;
		.listTit{
			display: flex;
			align-items: center;
			.name{
				width: 50%;
				margin-left: 10px;
				overflow: hidden;
				white-space:nowrap;
				-o-text-overflow:ellipsis;
				text-overflow:ellipsis;
				overflow: hidden;
				font-size: $uni-font-size-base;
			}
			.weight {
				font-size: $uni-font-size-base;
				margin-left: auto;
				margin-right: 60rpx;
				position: relative;
			}
			.weight::after{
				 position: absolute;
				 right:-30rpx;
				 top:50%;
				 content: '';
				 background: #eee;
				 width: 1px;
				 height: 28rpx;
				 margin-top: -14rpx;
			}
		}
		.listCont{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 15px;
			.item{
				width:50%;
				font-size: $uni-font-size-sm;
				line-height: 48rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
	            -o-text-overflow:ellipsis;
				color: #000;
			}
			.item text{color: #666;}
		}
	 }
	 .listBox:last-child{
		  border:none !important;
	 }
	 .textBox{
		 border: 1px #f2f2f2 solid;
		 height: 160px;
		 display: block;
		 width: auto !important;
	 }
	 .saveBtn{
		  width:50%;
		  margin:40rpx auto;
	}
</style>