<!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{ 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;}
.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" v-if="this.statetypeid == 1">提交审核</mt-button>
</mt-header>
<div class="listall">
<div class="listeach">
<div class="listtop">
<span class="topl">{{localtime}}</span>
<span class="topr" v-if="this.statetypeid == 1" style="color: rgb(229, 28, 35);">业务员接收中</span>
<span class="topr" v-if="this.statetypeid == 2" style="color: rgb(139, 195, 74);">业务员接收中</span>
</div>
<p>{{localaccept}}</p>
<div class="listend">总计：<span style="font-weight: bold;">{{localcount}}</span>种商品，共<span style="font-weight: bold;">{{localsingle}}</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" v-show="this.statetypeid == 1">选择图片<input type="file" id="saveImage" name="myphoto" @change="getFile"></span>
</div>
</div>
<div class="goodsall">
<div class="goods_list" v-for="(item, index) in datalist">
<div v-if="item.style !== 1" class="cleabboth"></div>
<div class="goodstitle">
<span>{{item.skuProductPoolDto.barCode}}</span>
<span>{{item.skuProductPoolDto.goodName}}</span>
</div>
<div class="inputlist">
<div class="delmore" @click="delneed(item, index)" v-if="item.style === 1">✕</div>
<div class="inputtop" style="display: block;overflow: hidden;clear: both;">
<div class="inputll"><span>生产日期：</span><span class="datainput" @click="dateClick1(item, index)" :class="{'noinput': nonebg}">{{item.skuInstorageProductDto.productionDateStr}}</span></div>
<div class="inputrr"><span>的商品</span><input v-model="item.skuPurchaseTransferDto.amount" :disabled="nonebg" /><span style="text-align:center;">件</span></div>
</div>
<div class="inputeach" style="margin: 4px 0px;">
<span style="font-size: 14px;display: inline-block; height: 25px;line-height: 25px; float: left;width: 24%; text-align: center;">采购价：</span>
<input v-model="item.skuInstorageProductDto.sellPrice" type="number" :disabled="nonebg" />
</div>
<div class="inputother">
<span >平台价：</span>
<input v-model="item.skuInstorageProductDto.purchasePrice" type="number" :disabled="nonebg" />
<span>会员价：</span>
<input v-model="item.skuInstorageProductDto.memberPrice" type="number" :disabled="nonebg" />
</div>
<div class="buildmorediv" v-if="item.style !== 1" :class="{'class-b': nonebg}"><p class="buildmore" @click="buildmore(item, index)">新增一条</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>
</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>
var app = new Vue({
el: '#app',
data: {
LINK:"http://192.168.124.66:8888/web",
noneid:'',
addpart:[
{name: "待审核"},
],
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:'',
statetypeid:'',
targetID:'',
hotmain:{},
srcimg:'',
personalPhoto:true,
localid:'',
cont:{},
time:'',
danwei:'',
datalist:[],
dataall:[],
value: null,
pickerValue:null,
pickerValue:'',
build:'',
current: 0,
showOrFalse: false,
mobile: null,
active: 0,
dataVal1: new Date(),
date1: "", //默认值
navArr: [
{name: "待审核"},
{name: "审核中"},
{name: "已完成"}
],
setdata:[],
imglink:'',
imgname:'',
imgarray:[],
},
methods:{
getFile(){
let x = document.getElementById('saveImage').files[0];
let updata = new FormData();
updata.append('imgFileTmp',x)
axios({
method: 'POST',
url: this.LINK+`/app/sku/sku-instorage-accept/upload-tmp-pic-dothing/do`,
data: updata,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
//this.$indicator.open('加载中...');
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((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) {
let formData = new FormData()
formData.append('resourceName', "this.limitName")
formData.append('resourceType', "this.selValue" )
this.objbighight = localStorage["objbig"];
this.localaccept = localStorage["acceptNumber"];
this.localtime = localStorage["transferTime"];
this.localsingle = localStorage["productTotalCount"];
this.localcount = localStorage["productTypeCount"];
this.localid = localStorage["name"];
this.statetypeid = localStorage["statetype"];
this.targetID = localStorage["toID"];
//////alert(this.statetypeid)
if(this.statetypeid == 1 ){
this.nonebg= false;
}if(this.statetypeid == 2 ){
this.nonebg= true;
}
var _this = this;
this.load_data = false;
axios({
method: 'get',
url: this.LINK+`/app/sku/sku-instorage-accept/transfer-product/byid/do`+"?id="+this.localid+"&inStoreId="+this.targetID,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
////console.log(res.data.data)
var that = this;
that.datalist = res.data.data;
if(this.statetypeid != 1){
for(var i=0;i<that.datalist.length;i++ ){
that.imgurl = that.datalist[0].oPictureUrlDto.url+that.datalist[0].oPictureUrlDto.name;
}
}
})
},
delneed(target,few){
this.$messagebox({
title: '温馨提示',
message: '确定需要删除吗？',
showCancelButton: true,
confirmButtonText:"删除",
cancelButtonText:"取消"
}).then(action => {
if(action == 'confirm'){
this.datalist.splice(few,1);
}else{
////console.log('取消')
}
})
},
dateClick1(a,b) {
if(this.statetypeid == 1){
this.$refs.picker1.open();
this.cont = a
}if(this.statetypeid == 2){
////console.log("xxx")
}
},
handleConfirm1(value) {
console.info(value)
////console.log(value)
var d = new Date(value);
if (d.getMonth() >= 0) {
let month = (d.getMonth() + 1) < 10 ? ('0' + (d.getMonth() + 1)) : (d.getMonth() + 1)
let day = (d.getDate()) < 10 ? ('0' + (d.getDate())) : (d.getDate())
//let hh = d.getHours();
let hh = (d.getHours()) < 10 ? ('0' + (d.getHours())) : (d.getHours())
let times = d.getFullYear() + '-' + month + '-' + day+" "+"00"+":"+"00"+':'+"00" ;;
this.date1 = times//注意pickerVisibles带s
}else{
this.date1 = "1807-01-01"//设置的开始日期
}
this.cont.skuInstorageProductDto.productionDateStr = this.date1
//////console.log(this.cont )打印出一个对象
},
buildmore(a,b){
if(this.statetypeid == 1){
this.maina = a;
addmore:[],
newobj={
style:1,
id: a.id,
skuProductPoolDto:{
id:a.skuProductPoolDto.id,
},
skuInstorageProductDto:{
sellPrice: "",
purchasePrice:"",
memberPrice:"",
productionDateStr:"",
},
skuPurchaseTransferDto:{
amount:"",
},
pubdate:a.summary,
datetime:""
}
////console.log(this.datalist[0])
this.newmian.push(newobj)
this.datalist.splice(b+1,0,newobj)
this.hotmain = newobj;
console.log(newobj)
console.log(this.datalist)
}else {
return false;
}
},
getsure() {
console.log(this.datalist)
console.log("原始数据")
let x = document.getElementById('saveImage').files[0];
if(x){
let config = {
headers:{'Content-Type':'multipart/form-data'}
};
let myData = {
inStorageAcceptId: this.localid,
products: [],
};
let builddata = []
this.datalist.map((item) =>{
this.noneid = item.skuProductPoolDto.id;
if(item.skuInstorageProductDto.productionDateStr === ""){
this.whether = 1;
}else{
this.whether = 2;
}
let addbuild =({
"tomainid": item.skuProductPoolDto.id,
"knowID": item.skuProductPoolDto.id,
"amount":item.skuPurchaseTransferDto.amount,
"productionDate": item.skuInstorageProductDto.productionDateStr,
"purchasePrice":item.skuInstorageProductDto.purchasePrice,
"memberPrice":item.skuInstorageProductDto.memberPrice,
"sellPrice": item.skuInstorageProductDto.sellPrice,
})
builddata.push(addbuild)
})
console.log(builddata)
console.log("处理过后数据")
var map = {},
dest = [];
for(var i = 0; i < builddata.length; i++){
var ai = builddata[i];
//////console.log(ai)
if(!map[ai.knowID]){
dest.push({
memberPrice:parseFloat(ai.memberPrice),
knowID : ai.knowID,
purchaseProductId:ai.tomainid,
amount: ai.amount,
productionDate:ai.productionDate,
purchasePrice:ai.purchasePrice,
sellPrice:ai.sellPrice,
productsAttrPrice:[]
});
map[ai.knowID] = ai;
}else{
for(var j = 0; j < dest.length; j++){
var dj = dest[j];
if(dj.knowID == ai.knowID){
dj.productsAttrPrice.push(ai);
break;
}
}
}
};
console.log(dest);
console.log("给后台数据")
myData.products = dest;
if(this.whether === 1){
this.$toast({
message: '提示: 请填写所有生产日期',
position: 'center',
duration: 3000
});
return false;
}else{
let formData = new FormData();
formData.append('inStorageProductsJsonString', JSON.stringify(myData))
formData.append('purchasePicStr',JSON.stringify(this.imgarray))
axios({
method: 'POST',
url: this.LINK+`/app/sku/sku-instorage-accept/instorage-product/add/do`,
data: formData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
if(res.data.code === 200){
this.$toast({
message: res.data.msg,
position: 'center',
duration: 2000
});
//setTimeout(location.href = 'index.html',8000);
}else{
this.$toast({
message: res.data.msg,
position: 'center',
duration: 2000
});
}
}).catch((err) => {
////console.log(err);
});
}
}else{
this.$toast({
message: '提示: 请上传送货单再次提交审核',
position: 'center',
duration: 3000
});
return false;
}
},
},
mounted:function(){
this.$nextTick(function(){
this.databuild();
});
this.great();
},
});
</script>
</body>
</html>
网友评论