console
<!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>
.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{ 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;}
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{height: 65px;margin: 8px auto; overflow: hidden;clear: both; width: 100%;border-bottom: 1px solid #E1E1E1;}
.upform div{
margin-top: 10px;
width: 60px;
height: 50px;
}
.upform .formleft{
float: left;
text-align: center;
line-height: 40px;
font-size: 14px;
font-weight: bold;
margin-left: 2%;
}
.upform .formright{
float: right;
width: 120px!important;
margin-right: 2%;
}
.upform .formright input{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
margin: 0;
font-size: 23px;
cursor: pointer;
opacity: 0;
}
.chanceimg{
display: block;
height: 40px;
width: 40px;
float: right;
}
.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">
<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" v-if="Receiveall.arrayTime == 0">今天</span>
<span class="topl" v-if="Receiveall.arrayTime == 1">明天</span>
<span class="topl" v-if="Receiveall.arrayTime == 2">后天</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.productCount}}</span>种商品，共
<span style="font-weight: bold;">{{Receiveall.seCount}}</span>件
</div>
</div>
</div>
<div class="upform">
<div class="formleft">送货单</div>
<div class="formright">
<img class="chanceimg" :src="this.imgurl" alt="" id="portrait"/>
<span class="chance" >选择图片<input type="file" id="saveImage" name="myphoto" @change="getFile"></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="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://pic.tongchengxianggou.com:9011",
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:{}
},
methods:{
turnstyle: function(ta,tb){
console.log(ta.setflag)
console.log(tb)
},
sumFocus(e){
if(e.target.value<=0){
e.target.value =""
return false
}else{
e.target.value =e.target.value
}
},
getFile(){
var x = document.getElementById('saveImage').files[0];
var param = new FormData();
param.append('imgFileTmp',x)
this.$http.post(this.LINK+`/app/sku/sku-instorage-accept/upload-tmp-pic-dothing/do`,param)
.then(res => {
if(res.data.code === 200){
this.$toast({
message: res.data.msg,
position: 'center',
duration: 2000
});
var datasmall = JSON.parse(res.data.data)
this.imgarray = datasmall;
this.imglink = datasmall[0].url;
this.imgname = datasmall[0].name;
}else{
this.$toast({
message: res.data.msg,
position: 'center',
duration: 2000
});
}
})
.catch(function(error){
console.log(error);
});
},
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"));
console.log(this.Receiveall)
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)
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)
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) {
console.log(a)
this.$refs.picker1.open();
this.cont = a
},
handleConfirm1(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
}else{
this.date1 = "1807-01-01"
}
this.cont.batch = this.date1
},
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
}else{
this.date2 = "1807-01-01"
}
this.conttime.attrValue = this.date2;
},
buildmore(a,b){
this.maina = a;
console.log("aaaaaaaaaaaaaaaaaa")
console.log(a)
addmore: [],
newobj = {
batch: "",
realBuyCount: "",
}
this.newmian.push(newobj)
a.prppList.splice(b + 1, 0, newobj)
this.hotmain = newobj;
console.log(this.datalist)
},
getsure() {
var x = document.getElementById('saveImage').files[0];
if(x){
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;
loopmain.map((item)=>{
var loopobj =({
"batchNo": item.batch,
"buyCount":item.realBuyCount,
})
dange.li.push(loopobj)
})
})
console.log("惺惺惜惺惺想")
console.log(loopadd)
let param = new FormData();
param.append('receveId',this.Receiveall.id)
param.append('state', 2)
param.append('url', this.imglink)
param.append('name', this.imgname)
param.append('jsonArray', JSON.stringify(loopadd))
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);
}else{
this.$indicator.close();
this.$toast({
message:"无法提交",
position: 'center',
duration: 2000
});
}
}).catch((err) => {
});
}else{
this.$toast({
message: '提示: 请上传送货单再次提交审核',
position: 'center',
duration: 3000
});
return false;
}
},
},
mounted:function(){
this.$nextTick(function(){
this.databuild();
});
this.great();
},
});
</script>
</body>
</html>