<!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;
}
.goodstitle span {
font-size: 14px;
}
.goodstitle span:nth-child(1) {
float: right;
font-weight: bold;
}
.goodstitle span:nth-child(2) {
float: left;
font-weight: bold;
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: 22%;
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: 96%;
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: 3px;
padding-bottom: 4px;
}
.upform .formleft {
float: left;
text-align: center;
line-height: 40px;
font-size: 14px;
font-weight: bold;
margin-left: 2%;
}
.upform .formright {
float: right;
width: 68px!important;
margin-right: 2%;
margin-bottom: 10px;
}
.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;
}
.upviewimgs {
clear: both;
width: 98%!important;
margin: auto;
}
.upviewimgs span {
display: inline-block;
float: left;
position: relative;
}
.upviewimgs span img {
width: 40px;
height: 40px;
margin: 0px 2px;
}
.mint-indicator-mask {
z-index: 1000;
opacity: 10000;
}
.weui-uploader__file {
position: relative;
float: left;
margin-right: 9px;
margin-bottom: 9px;
width: 79px;
height: 79px;
background: no-repeat 50%;
background-size: cover;
list-style: none;
}
.weui-uploader__file .x {
text-align: center;
background-color: #000;
font-size: 20px;
line-height: 23px;
color: #fff;
position: absolute;
right: -.3rem;
top: -.3rem;
width: 25px;
height: 25px;
border-radius: 50%;
opacity: .8;
}
.clearclose{
text-align: center;
background-color: #000;
font-size: 15px;
line-height: 15px;
color: #fff;
position: absolute;
right: -50px;
top: -8px;
width: 15px;
height: 15px;
border-radius: 50%;
opacity: .8;
}
@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" 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">
<span class="chance">{{viewtitle}}<input type="file" id="saveImage" name="myphoto" @change="getFile" multiple accept="image/*"></span>
</div>
<div class="upviewimgs">
<!--
<ul class="weui-uploader__files" id="uploaderFiles">
<li ref="files" class="weui-uploader__file" v-for="(image,index) in images" :key="index"
:style="'backgroundImage:url(' + image +' )'"><span @click="deleteimg(index)" class="x">×</span>
</li>
</ul>-->
<div class="upviewimgs">
<span v-for="(item, index) in viewimgs">
<span @click="deleteimg(index)" class="clearclose">×</span>
<img :src="item.url+item.name" />
<span>
</div>
</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="Rejectionstyle" style="margin: 2px 10px;">
<mt-switch v-if="item.style !== 1" v-model="item.Rejection" @change="turnstyle(item, index)">拒收</mt-switch>
</div>
<div class="goodstitle">
<span>{{item.barCode}}</span>
<span>{{item.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)">{{item.productionDateStr}}</span>
</div>
<div class="inputrr">
<span>的商品</span>
<input v-model="item.buyCount" :disabled="item.Rejection===true" type="number" @blur="sumFocus($event)" />
<span style="text-align:center;">件</span>
</div>
</div>
<div class="buildmorediv" v-if="item.style !== 1" :class="{'class-b': nonebg}" v-show="item.Rejection===false">
<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}日" @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 src="https://unpkg.com/vue-resource@1.5.1/dist/vue-resource.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
//LINK:"http://192.168.124.66:8888/web",
//LINK: "http://pic.tongchengxianggou.com:9011",
LINK:'http://ha.tongchengxianggou.com',
noneid: '',
addpart: [{
name: "待审核"
}, ],
whether: '',
maina: '',
newmian: [],
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: [],
Receiveall: {},
indextime: '',
filesArr: [],
images: [],
viewimgs: [],
viewtitle: "选择图片",
viewstring: "",
viewurl: ""
},
methods: {
sumFocus(e) {
if(e.target.value <= 0) {
e.target.value = ""
return false
} else {
e.target.value = e.target.value
}
},
turnstyle: function(ta, tb) {
this.datalist.map((item) => {
if(item.id == ta.id) {
item.Rejection = ta.Rejection
} else {
item.Rejection = item.Rejection
}
});
},
delneed(target, few) {
this.$messagebox({
title: '温馨提示',
message: '确定需要删除吗？',
showCancelButton: true,
confirmButtonText: "删除",
cancelButtonText: "取消"
}).then(action => {
if(action == 'confirm') {
this.datalist.splice(few, 1);
}
})
},
ceshide(){
console.log(this.viewimgs)
console.log(this.viewstring)
},
deleteimg(index) {
var viewname = [];
var that = this;
this.filesArr.splice(index, 1);
this.images.splice(index, 1);
this.viewimgs.splice(index,1)
console.log(this.viewimgs.length)
that.viewimgs.map((item) => {
viewname.push(item.name)
that.viewurl =item.url
});
that.viewstring = viewname.join(";");
console.log("这是给后台的数据")
console.log(that.viewstring)
console.log(that.viewurl)
},
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);
}
console.log( this.filesArr.length)
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 = [];
console.log(that.viewimgs)
that.viewimgs.map((item) => {
viewname.push(item.name)
that.viewurl =item.url
});
that.viewstring = viewname.join(";");
console.log("这是给后台的数据")
console.log(that.viewstring)
console.log(that.viewurl)
}).catch(function(err) {
console.log(err);
});
},
goback() {
window.history.go(-1);
},
great() {
console.log("进入页面的时候触发")
},
databuild(a) {
var formData = new FormData()
this.Receiveall = JSON.parse(localStorage.getItem("ReceiveData"));
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 => {
res.data.data.rvList.map((item) => {
var productionDateStr = "";
var Rejection = "";
this.$set(item, 'productionDateStr', productionDateStr)
this.$set(item, 'Rejection', false)
});
this.datalist = res.data.data.rvList
})
},
dateClick1(a, b) {
console.log("时间时间")
console.log(a)
this.$refs.picker1.open();
this.cont = a;
this.indextime = b;
},
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 //注意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.productionDateStr = this.date1
this.$toast({
message: res.data.msg,
position: 'center',
duration: 2000
});
this.$indicator.close();
setTimeout(function() {
//window.history.go(-1);
}, 200);
} else {
this.$toast({
message: "无法提交",
position: 'center',
duration: 2000
});
this.$indicator.close();
}
}).catch((err) => {
console.log(err);
});
*/
this.cont.productionDateStr = this.date1
},
buildmore(a, b) {
this.maina = a;
addmore: [],
newobj = {
style: 1,
id: a.id,
productionDateStr: "",
buyCount: "",
Rejection: a.Rejection
}
this.newmian.push(newobj)
this.datalist.splice(b + 1, 0, newobj)
this.hotmain = newobj;
},
getsure() {
console.log(this.datalist)
this.isfalse= true;
this.datalist.map((item) => {
if(item.productionDateStr==""){
this.isfalse= false
}
})
if(this.isfalse == false){
this.$toast({
message: "选择日期后提交",
position: 'center',
duration: 2000
});
return false;
}
var x = document.getElementById('saveImage').files[0];
if(x) {
this.$indicator.open({
text: '加载中....',
spinnerType: 'fading-circle'
});
var builddata = []
this.datalist.map((item) => {
if(item.Rejection === false) {
this.whether = 0;
} else {
this.whether = 1;
}
var addbuild = ({
"flag": this.whether,
"buyCount": item.buyCount, //数量
"prrId": item.id,
"batchNo": item.productionDateStr,
})
builddata.push(addbuild)
})
var map = {},
dest = [];
for(var i = 0; i < builddata.length; i++) {
var ai = builddata[i];
if(!map[ai.prrId]) {
dest.push({
prrId: ai.prrId,
flag: ai.flag,
li: [ai]
});
map[ai.prrId] = ai;
} else {
for(var j = 0; j < dest.length; j++) {
var dj = dest[j];
if(dj.prrId == ai.prrId) {
dj.li.push(ai);
break;
}
}
}
}
console.log(dest)
var formData = new FormData();
formData.append('receveId', this.Receiveall.id)
formData.append('state', 1)
formData.append('url', this.viewurl)
formData.append('name', this.viewstring)
formData.append('jsonArray', JSON.stringify(dest))
this.$http.post(this.LINK + `/sku/purchas/requisition/product/price/add`, formData)
.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.$toast({
message: res.data.msg,
position: 'center',
duration: 2000
});
this.$indicator.close();
}
}).catch((err) => {
console.log(err);
});
} else {
this.$toast({
message: '提示: 请上传送货单再次提交审核',
position: 'center',
duration: 3000
});
return false;
}
/*
var x = document.getElementById('saveImage').files[0];
if(x) {
var config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
var myData = {
inStorageAcceptId: this.localid,
products: [],
};
var builddata = []
this.datalist.map((item) => {
this.noneid = item.skuProductPoolDto.id;
if(item.skuInstorageProductDto.productionDateStr === "") {
this.whether = 1;
} else {
this.whether = 2;
}
var 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 {
var formData = new FormData();
formData.append('inStorageProductsJsonString', JSON.stringify(myData))
formData.append('purchasePicStr', JSON.stringify(this.imgarray))
this.$http.post(this.LINK+`/app/sku/sku-instorage-accept/instorage-product/add/do`,formData)
.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>
网友评论