<!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:
}
.mint-header{width: 100%; position: fixed; opacity: 1; z-index: 100;}
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
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
text-indent: 3px;
font-size: 12px;
}
.buildmore{
width: 96%;
margin:5px auto;
text-align: center;
border-radius: 4px;border: 1px solid
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
.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
-webkit-box-shadow:2px 2px 5px
box-shadow:2px 2px 5px
border: none;
background:
}
.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
}
.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:
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:
}
.class-b{
display: none!important;
}
.noinput{
background:
}
@media screen and (min-width: 800px) {
.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>