项目代码

183 阅读6分钟

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.3, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" href="./css/index.css">
	<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
</head>
<style>
[v-cloak]{
    display: none;
}
.mint-header{
	background: #3FD15B;
}
.mint-header{width: 100%; position: fixed; opacity: 1; z-index: 100;}
#add{width: 100%;background: #e1e1e1;}
body{padding: 0px!important;margin: 0px!important;}
.header {font-size: 16px!important;text-align: center!important;padding: 0px!important;margin: auto!important;}
.listeach{
	position: relative;
	box-sizing: border-box;
	width: 98%;
	margin:14px auto;
	overflow: hidden;
	clear: both;
	border-bottom: 1px solid #e1e1e1;
	background: white;
	padding: 0px 4px 8px 4px;
}
.inputll .datainput{
	display: inline-block; 
	height: 25px;
	line-height: 25px; 
	float: right;
	width: 54%;
	border-radius: 4px;
	border: 1px solid #E1E1E1!important;
	text-indent: 3px;
	font-size: 12px;
}
.buildmore{
	width: 96%;
	margin:5px auto;
	text-align: center;
	border-radius: 4px;border: 1px solid #E1E1E1!important;
	overflow: hidden;
	clear: both;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
}
.listeach .listtop{font-size: 1rem;width: 100%;display: block;overflow: hidden;clear: both;}
.listeach .listtop .topl,.listeach .listtop .topr{font-size: 14px;}
.listeach .listtop .topl{float: left;}
.listeach .listtop .topr{float: right;}
.listeach p{font-size: 14px;padding: 0px;margin: auto;padding: 8px 0px;font-weight: bold;}
.listend{font-size: 14px;width: 100%;text-align: right;}
.listall{/*margin-top: 10px; */             padding-top:40px ;}
.goodstitle{overflow: hidden; width: 96%;margin:auto auto auto auto;padding: 5px 0px;}
.goodstitle span{font-size: 14px;font-weight: bold;}
.goodstitle span:nth-child(1){float: right;font-weight: bold;}
.goodstitle span:nth-child(2){float: left;width: 58%;}
input{border-radius: 4px;border: 1px solid #E1E1E1;font-size: 14px;text-indent: 4px;outline: none;}
.inputlist{overflow: hidden;}
.inputlist div{margin: 0px 0px;overflow: hidden;}		
.inputrr,.inputll{width: 50%;float: left;}
.inputll span{font-size: 14px;display: inline-block; height: 25px;line-height: 25px; float: left;width: 44%;}
.inputrr span{font-size: 14px;display: inline-block; height: 25px;line-height: 25px; float: left;width: 30%; text-align: center;}
.inputrr input{display: inline-block; height: 25px;line-height: 25px; float: left;width:30%; text-align: center;}
.inputeach{clear: both;overflow: hidden;}
.inputeach input{display: inline-block; height: 25px;line-height: 25px; float: left;width: 73%;}
.inputother span, .inputother input{font-size: 14px;float: left;width: 24%;display: inline-block;height: 25px;line-height: 25px;}
.inputother span{text-align: center;}
.buildmorediv{width: 100%;margin:10px auto;text-align: center;overflow: hidden;clear: both;}
.goods_list{overflow: hidden;clear: both;}
.cleabboth{
	height: 7px; 
	width: 100%;
	overflow: hidden; 
	clear: both; 
	margin: 8px auto 8px auto;
	moz-box-shadow:2px 2px 5px #e1e1e1; 
	-webkit-box-shadow:2px 2px 5px #e1e1e1; 
	box-shadow:2px 2px 5px #e1e1e1;
	border: none;
	background:#e1e1e1;
}
.inputtop{width: 98%;margin:3px auto!important;}
.delmore{text-align: right;margin-right: 18px!important;font-size: 20px;color: red;}
.upform{
	margin: 8px auto; 
	overflow: hidden;
	clear: both; 
	width: 100%;
	border-bottom: 1px solid #E1E1E1;
}
.upform div{
	margin-top: 10px;
}
.upform .formleft{
	float: left;
	text-align: center;
	line-height: 40px;
	font-size: 14px;
	font-weight: bold;
	margin-left: 2%;
}
.upform .formright{
	float: right;
	width: 78px!important;
}
.upform .formright input{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 23px;
    cursor: pointer;
   opacity: 0;
}
.viewupimgs{
	clear: both;
	overflow: hidden;
	width: 100%;
	z-index: 10000;
}
.viewupimgs span{
	position: relative;
	width: 40px;
	height: 40px;
	display: inline-block;
	float: left;
	margin: 8px 6px;
}
.viewupimgs span img{
	display: block;
	width: 40px;
	height: 40px;
}
.chanceimg{
	display: block;
	height: 40px;
	width: 40px;
	float: right;
}
.cholesmall{
	position: absolute;
	color: red;
	top: -12px;
	right: -8px;
	font-style:normal
}
.chance{
padding: 0px 8px;
float: left;
background: #3498db;
color: white;
position: relative;
display: inline-block;
margin-bottom: 0;
font-size: 12px;
font-weight: 400;
line-height: 36px;
height: 36px;
text-align: center;
border: 1px solid transparent;
border-radius: 4px;
}
.activenone{
	background: #E1E1E1;
}
.class-b{
	display: none!important;
}
.noinput{
	background: #E8E8E1!important;
}
	@media screen and (min-width: 800px) { 
		#app {width: 540px!important;margin: auto;}
		.mint-header{width: 540px!important;} 
	}  
	</style>
	<body>
		<div id="app" v-cloak>
			<div class="contain">
				<mt-header title="入库接收详情">
  					<router-link to="" slot="left">
    					<mt-button icon="back"  @click="goback">返回</mt-button>
  					</router-link>
  					<mt-button slot="right" @click="getsure">提交审核</mt-button>
				</mt-header>
				<div class="listall">
					<div class="listeach">
						<div class="listtop">
							<span class="topl">{{Receiveall.Actualtime}}</span>
							<span class="topr" v-if="Receiveall.reveceState == 0" style="color: #3FD15B;">待接收 </span>
							<span class="topr" v-if="Receiveall.reveceState == 1" style="color: #3FD15B;">审核中</span>
							<span class="topr" v-if="Receiveall.reveceState == 2" style="color: #3FD15B;">审核拒绝</span>
							<span class="topr" v-if="Receiveall.reveceState == 3" style="color: #3FD15B;">审核通过</span>
						</div>
						<p>{{Receiveall.receiveNo}}</p>
						<div class="listend">
							总计:<span style="font-weight: bold;">{{Receiveall.proCount}}</span>种商品,
							共<span style="font-weight: bold;">{{Receiveall.proSeCount}}</span>件
						</div>
					</div>
				</div>
				<div class="upform">
					<div class="formleft">送货单</div>
					<div class="formright">
						<span class="chance" >选择图片<input type="file" id="saveImage" name="myphoto" @change="getFile" multiple accept="image/*"></span>
					</div>
					<div class="viewupimgs">
						<span v-for="(item,index) in viewimgs">
							<i class="cholesmall" @click="deleteimg(index)">Θ</i>
							<img :src="item.url+item.name" />
						</span>
					</div>
				</div>
				<div class="goodsall">
					<div class="goods_list" v-for="(item, pIdx) in datalist">
						<div v-if="item.style !== 1" class="cleabboth"></div>
						<div class="Rejectionstyle" style="margin: 2px 10px;">
							<mt-switch v-model="item.setflag"  @change="turnstyle(item, pIdx)">拒收</mt-switch>
						</div>
						<div class="goodstitle">
							<span>{{item.barCode}}</span>
							<span>{{item.goodName}}</span>
						</div>
						<div class="buildmorediv" :class="{'class-b': nonebg}"><p class="buildmore" @click="buildmore(item, pIdx)">新增一条</p></div>
						
						<div class="inputlist" v-for="(each, index) in item.prppList">
							<div class="delmore" @click="deleteone(pIdx, index)">✕</div>
							<div class="inputtop" style="display: block;overflow: hidden;clear: both;">
								<div  class="inputll">
									<span>生产日期:</span>
									<span class="datainput" @click="dateClick1(each, pIdx)" :class="{'noinput': nonebg}">{{each.batch}}</span>
								</div>
								<div  class="inputrr">
									<span>的商品</span>
									<input v-model="each.realBuyCount" :disabled="nonebg" type="number"  @blur="sumFocus($event)"/>
									<span style="text-align:center;">件</span>
								</div>
							</div>
							<!--<div class="buildmorediv" v-if="index== 0" :class="{'class-b': nonebg}"><p class="buildmore" @click="buildmore(item, pIdx)">新增一条</p></div>-->
						</div>
					</div>
				</div>
  				
				<mt-datetime-picker 
					v-model="dataVal1" 
					type="date" 
					ref="picker1" 
					year-format="{value}年" 
					month-format="{value}月" 
					date-format="{value}日" 
				 	hour-format="{value}"
                	minute-format="{value}"
                	second-format="{value}"
					@confirm="handleConfirm1"
				>
				</mt-datetime-picker>
				<mt-datetime-picker 
					v-model="dataVal1" 
					type="date" 
					ref="picker2" 
					year-format="{value}年" 
					month-format="{value}月" 
					date-format="{value}日" 
				 	hour-format="{value}"
                	minute-format="{value}"
                	second-format="{value}"
					@confirm="handleConfirm2"
				>
				</mt-datetime-picker>
  				
			</div>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
		<script src="https://unpkg.com/vue-resource@1.5.1/dist/vue-resource.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					LINK:'http://ha.tongchengxianggou.com',
					//LINK:"http://pic.tongchengxianggou.com:9011",
					//LINK:"http://192.168.124.66:8888/web",
					noneid:'',
					addpart:[
						{name: "待审核"}, 
					],
					loopmark:'',
					whether:'',
					maina:'',
					newmian:[],
					imgurl:"http://www.17sucai.com/preview/1/2016-12-16/take_photo/img/photo_icon.png",
					nonebg: false,
					objbighight:'',
					localtime:'',
					localaccept:'',
					localcount:'',
					localsingle:'',
					targetID:'',
					statetypeid:'',
					hotmain:{},
					srcimg:'',
					personalPhoto:true,
					localid:'',
					cont:{},
					conttime:{},
					time:'',
					danwei:'',
					datalist:[],
					dataall:[],
					value: null,
					pickerValue:null,
					pickerValue:'',
					build:'',
					current: 0,
					showOrFalse: false,
					mobile: null,
					active: 0,
					dataVal1: new Date(),
					date1: "", //默认值
					date2: "", //默认值
			        navArr: [
						{name: "待审核"},                 
						{name: "审核中"},                 
						{name: "已完成"}            
					],
					setdata:[],
					imglink:'',
					imgname:'',
					imgarray:[],
					Receiveall:{},
					viewimgs:[],
					filesArr:[],
					images: [],
					
				},
				methods:{
					turnstyle: function(ta,tb){
						console.log(tb)
				  	},
				  	sumFocus(e){
						if(e.target.value<=0){
							e.target.value =""
							return false
						}else{
							e.target.value =e.target.value
						}
					},
					deleteimg(index) {
						var viewname = [];
						var that = this;
						this.filesArr.splice(index, 1);
						this.images.splice(index, 1);
						this.viewimgs.splice(index,1)
						that.viewimgs.map((item) => {
							viewname.push(item.name)
							that.viewurl =item.url
						});
						that.viewstring = viewname.join(";");
					},
					getFile(e) {
						var that = this;
						let files = e.target.files;
						// 如果没有选中文件,直接返回
						if(files.length === 0) {
							return;
						}
						let reader;
						let file;
						let images = this.images;
						for(let i = 0; i < files.length; i++) {
							file = files[i];
							this.filesArr.push(file);
							reader = new FileReader();
							if(file.size > self.maxSize) {
								Toast('图片太大,不允许上传!');
								continue;
							}
							reader.onload = (e) => {
								let img = new Image();
								img.onload = function() {
									let canvas = document.createElement('canvas');
									let ctx = canvas.getContext('2d');
									let w = img.width;
									let h = img.height;
									// 设置 canvas 的宽度和高度
									canvas.width = w;
									canvas.height = h;
									ctx.drawImage(img, 0, 0, w, h);
									let base64 = canvas.toDataURL('image/png');
									images.push(base64);
								};
								img.src = e.target.result;
							};
							reader.readAsDataURL(file);
						}
						that.$indicator.open({
						      text: '加载中....',
						      spinnerType: 'fading-circle'
					  	});
						var promise = Promise.all(this.filesArr.map((tempFilePath, index) => {
							return new Promise(function(resolve, reject) {
								var param = new FormData(); // 创建form对象
								param.append('imgFileTmp', tempFilePath)
								
								that.$http.post(that.LINK + `/app/sku/sku-instorage-accept/upload-tmp-pic-dothing/do`, param)
									.then(res => {
										if(res.body.code === 200) {
											resolve(res.body.data.replace(/\[|]/g, ''));
										} else {
											reject("failed");
										}
									})
									.catch(function(error) {
										reject("failed");
									});
							});
						}));
						promise.then(function(results) {
							that.$indicator.close();
							var viewname = []; //这是回显的步骤
							results.map((item) => {
								let obj = JSON.parse(item)
								that.viewimgs.push(obj)
							});
							that.filesArr = [];
							that.viewtitle = "重新上传"
							that.viewimgs.map((item) => {
								viewname.push(item.name)
								that.viewurl =item.url
							});
							that.viewstring = viewname.join(";");
						}).catch(function(err) {
							console.log(err);
						});
					},
					goback(){
						window.history.go(-1);
					},
				 	great(){
				 		/*
	      				document.getElementById('saveImage').onchange = function () {
	          				var imgFile = this.files[0];
	      					var fr = new FileReader();
	          				fr.onload = function () {
	          					this.imgurl = fr.result;
	            				document.getElementById('portrait').src = this.imgurl;
	          				};
	          				fr.readAsDataURL(imgFile);
	          			}
	          			*/
        			},
        			databuild(a) {
        				var formData = new FormData()
						this.Receiveall= JSON.parse(localStorage.getItem("ReceiveData"));
        				this.$indicator.open({
					      	text: '加载中....',
					      	spinnerType: 'fading-circle'
					  	});
					 	var _this = this;
						this.load_data = false;
						this.$http({
							method: 'POST',
							url: this.LINK +`/sku/revece/order/list/product`+"?receveId="+this.Receiveall.id+"&max="+10000,
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
						}).then(res => {
							if(res.data.code ===200){
								this.$indicator.close();
								var that = this;
								console.log("shuju")
								console.log(res.data.data)
								//this.datalist = res.data.data.rvList;
								this.viewimgs = res.data.data.listLogo;
								var viewname=[];
								that.viewimgs.map((item) => {
									viewname.push(item.name)
									that.viewurl =item.url
								});
								that.viewstring = viewname.join(";");
								
								
		                  		var loopadd=[];
		                  		var changedata=[];
		                  		var looparry=[];
		                  		res.data.data.rvList.map((item) =>{
	                  				if(item.flag===0){
	                  					this.$set(item, 'setflag', false)
	                  				}else if(item.flag===1){
	                  					this.$set(item, 'setflag', true)
	                  				}
		          				})
								this.datalist = res.data.data.rvList;
								
							}
						})
					},
					//循环出来的删除
					deleteone(a,b){
						console.log(a)
						console.log(b)
						this.$messagebox({
							title: '温馨提示',
							message: '确定需要删除吗?',
							showCancelButton: true,
							confirmButtonText:"删除",
							cancelButtonText:"取消"
				        }).then(action => {
							if(action == 'confirm'){
								this.datalist[a].prppList.splice(b,1);
							}
			     	 	})
					},
			        delneed(target,few){
			        	this.$messagebox({
			          		title: '温馨提示',
				          	message: '确定需要删除吗?',
				          	showCancelButton: true,
				          	confirmButtonText:"删除",
				          	cancelButtonText:"取消"
				        }).then(action => {
				          	if(action == 'confirm'){
				            	this.datalist.splice(few,1);
				          	}else{
					          }
			     	 	})
					},
					//-----------------------------时间选择----------------------------------------------------
					dateClick1(a,b) {
						this.$refs.picker1.open();
            			this.cont = a
            		},
            		handleConfirm1(value) {
            			var that = this;
            			//alert(value)
                		var d = new Date(value);
                		if (d.getMonth() >= 0) {
    						var month = (d.getMonth() + 1) < 10 ? ('0' + (d.getMonth() + 1)) : (d.getMonth() + 1)
							var day = (d.getDate()) < 10 ? ('0' + (d.getDate())) : (d.getDate())
							var hh = (d.getHours()) < 10 ? ('0' + (d.getHours())) : (d.getHours())
							var times = d.getFullYear() + '-' + month + '-' + day;
							this.date1 = times//注意pickerVisibles带s
						}else{
							this.date1 = "1807-01-01"//设置的开始日期
						}
				 		var formData = new FormData();
						formData.append('prId', this.cont.id)
						formData.append('batchNo', this.date1)
						this.$http.post(this.LINK + `/sku/purchas/batch/flag`, formData)
						.then(res => {
							if(res.data.code === 200) {
								this.cont.batch  = this.date1  //时间如果没有问题
							} else {
								this.$toast({
									message: "请重新选取保质期",
									position: 'center',
									duration: 2000
								});
								this.$indicator.close();
							}

						}).catch((err) => {    
							console.log(err);  
						});
		           	},
		           	
		           	dateClick2(c,b) {
						this.$refs.picker2.open();
            			this.conttime = c;
            		},
            		handleConfirm2(value) {
                		var d = new Date(value);
                		if (d.getMonth() >= 0) {
                			var month = (d.getMonth() + 1) < 10 ? ('0' + (d.getMonth() + 1)) : (d.getMonth() + 1)
                			var day = (d.getDate()) < 10 ? ('0' + (d.getDate())) : (d.getDate())
							var hh = (d.getHours()) < 10 ? ('0' + (d.getHours())) : (d.getHours())
							var timeall = d.getFullYear() + '-' + month + '-' + day+" "+"00"+":"+"00"+':'+"00" ;
							this.date2 = timeall//注意pickerVisibles带s
							}else{
							this.date2 = "1807-01-01"//设置的开始日期
						}
				 		this.conttime.attrValue  = this.date2; 
		           	},
			        buildmore(a,b){
			        	this.maina = a;
						console.log(a)
						addmore: [],
						newobj = {
							batch: "",
							realBuyCount: "",
							id:a.id
						}
						this.newmian.push(newobj)
						a.prppList.splice(b + 1, 0, newobj)
						this.hotmain = newobj;
                  	},
                  	getsure() {
						if(this.viewstring==""){
							this.$toast({
					  			message:"请上传图片",
					  			position: 'center',
					  			duration: 2000
					  		});
					  		return false;
						}
              			this.$indicator.open({
					      	text: '加载中....',
					      	spinnerType: 'fading-circle'
					  	});
              			console.log(this.datalist)
                  		var loopadd=[];
                  		var looparry=[];
                  		this.datalist.map((item) =>{
                  			if(item.setflag===false){
              					this.$set(item, 'flagto', 0)
              				}else if(item.setflag===true){
              					this.$set(item, 'flagto', 1)
              				}
                  			var dange =({
              					"prrId": item.id,
              					"flag":item.flagto,
              					"li":[]
              					
              				})
                  			loopadd.push(dange)
                  			loopmain = item.prppList;
                  			if(loopmain){
                  				loopmain.map((item)=>{
	                  				var loopobj =({
	                  					"batchNo": item.batch,
	                  					"buyCount":item.realBuyCount,
	                  				})
	                  				dange.li.push(loopobj)
	                  				
	                  			})
                  			}
          				})
                  		console.log(this.Receiveall.id)
                  		console.log(this.viewurl)
                  		console.log(this.viewstring)
                  		console.log(JSON.stringify(loopadd))
                  		let param = new FormData();
              			param.append('receveId',this.Receiveall.id)//商品模板id
              			param.append('state', 2)//富文本
              			param.append('url', this.viewurl)
						param.append('name', this.viewstring)
	        			param.append('jsonArray', JSON.stringify(loopadd))//模板json
	        			//this.$http.post(this.LINK+`/sku/purchas/requisition/product/price/add`,param)
                			.then(res =>  {
							if(res.data.code === 200){
								this.$toast({
						  			message: res.data.msg,
						  			position: 'center',
						  			duration: 2000
						  		});
						  		this.$indicator.close();
						  		setTimeout(function(){
				                    window.history.go(-1);
				                },200);
						  		//setTimeout(location.href = 'index.html',8000);
							}else{
								this.$indicator.close();
								this.$toast({
						  			message:res.data.msg,
						  			position: 'center',
						  			duration: 2000
						  		});
							}
						}).catch((err) => {    
							////console.log(err);  
						});
					},
				},
				mounted:function(){
	      			this.$nextTick(function(){
						this.databuild();
					});
					this.great();
				},
			});
		</script>
	</body>

</html>