597 行
23 KiB
HTML
可执行文件
597 行
23 KiB
HTML
可执行文件
<!DOCTYPE html>
|
|
<html>
|
|
<!--[1.1.96]-->
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<title>创建进货单</title>
|
|
<link href="__PUBLIC__/Retail/css/base.css" rel="stylesheet">
|
|
<script src="__PUBLIC__/jquery/js/jquery-2.0.3.min.js"></script>
|
|
<link href="__PUBLIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="__PUBLIC__/Retail/css/store.css" rel="stylesheet">
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css"/>
|
|
<style>
|
|
.btn {
|
|
width: 88px;
|
|
background-color: #099688;
|
|
padding: 5px;
|
|
margin: 5px auto;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.btn a {
|
|
color: white;
|
|
}
|
|
|
|
.btn span {
|
|
color: white;
|
|
}
|
|
|
|
/*#FF5722*/
|
|
.btn a.del {
|
|
color: white;
|
|
}
|
|
|
|
.mydel {
|
|
background-color: #FF5722;
|
|
}
|
|
|
|
.Business_tb1 table tr th {
|
|
height: 30px !important;
|
|
background-color: #D5e9ed;
|
|
color: #00a3d6;
|
|
}
|
|
|
|
.Business_tb1 table tr td {
|
|
/*border: none;*/
|
|
height: 100%;
|
|
position: relative;
|
|
/*background-color: white;*/
|
|
font-size: 12px;
|
|
}
|
|
.Business_tb1 table tr{
|
|
width:100%!important;
|
|
}
|
|
.Business_tb1 table tr:nth-child(2n+1){
|
|
/*background-color: pink;*/
|
|
}
|
|
.layui-form-item{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
}
|
|
label{
|
|
margin-bottom: 0;
|
|
width:auto;
|
|
}
|
|
select{
|
|
height:38px;
|
|
}
|
|
.delbtn{
|
|
color:#00a3d6;
|
|
}
|
|
.goodsinput{
|
|
width:60px;
|
|
text-align: center;
|
|
}
|
|
.keywordinput{
|
|
width:200px;
|
|
height:40px ;
|
|
box-sizing: border-box;
|
|
padding: 0px 10px;
|
|
}
|
|
.searchbtn{
|
|
/*width: 60px;*/
|
|
height: 40px;
|
|
padding: 0px 18px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
background: #007aff;
|
|
border: 0;
|
|
border-radius: 0 2px 2px 0;
|
|
margin: 0;
|
|
color: white;
|
|
}
|
|
.showgoodsitem{
|
|
width:80%;
|
|
height:80%;
|
|
position: absolute;
|
|
top:100px;
|
|
background-color: white;
|
|
box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
|
|
z-index: 400;
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
}
|
|
.showgoodsitem input.keywordinput{
|
|
height:28px;
|
|
}
|
|
.showgoodsitem .layui-form-label{
|
|
width:90px;
|
|
}
|
|
body,html{
|
|
width:100%;
|
|
height: 100%;
|
|
background-color: #f3f3f3;
|
|
}
|
|
.showgoodsitembox{
|
|
position: fixed;
|
|
width:100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,0.1);
|
|
top:0;left:0;
|
|
z-index: 450;
|
|
}
|
|
.showgoodsitembox2{
|
|
display: flex;justify-content: center;align-items: center;
|
|
}
|
|
.total{
|
|
width: 96%;
|
|
margin-left: 15px;
|
|
height: 80px;
|
|
margin-bottom: 40px;
|
|
margin-top:10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
box-sizing: border-box;
|
|
/*border:1px solid rgba(0,0,0,0.3);*/
|
|
padding: 10px 30px;
|
|
background-color: #f3f3f3;
|
|
}
|
|
.totalnum{
|
|
color:#00a3d6;
|
|
}
|
|
.import{
|
|
display: block;
|
|
width:92px;
|
|
height: 40px;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top:0;
|
|
left: 0;
|
|
}
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
input[type="number"]{
|
|
-moz-appearance: textfield;
|
|
}
|
|
input[type='checkbox']{
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: #fff;
|
|
-webkit-appearance:none;
|
|
border: 1px solid #c9c9c9;
|
|
border-radius: 2px;
|
|
outline: none;
|
|
position: relative;
|
|
}
|
|
.checkBox input[type=checkbox]:checked:before{
|
|
content: '';
|
|
position: absolute;
|
|
width: 11px;
|
|
height: 6px;
|
|
border-left: 2px solid red;
|
|
border-bottom: 2px solid red;
|
|
transform: rotateZ(-45deg);
|
|
top: 4px;
|
|
left: 3px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="cursor: pointer;box-sizing: border-box;padding-top: 30px;">
|
|
<div id="app" style="position: relative;with:100%;height: 100%;">
|
|
<form class="" style="display: flex;height: 100%;flex-direction: column;">
|
|
<div class="Business" style="flex: 1;overflow-y: hidden;display: flex;flex-direction:column;box-sizing: border-box;">
|
|
<div class="Business_tb1" style="height: 100%;">
|
|
<table border="0" cellspacing="0" cellpadding="0" class="layui-table" style="height:100%;position: relative;display: flex;flex-direction: column;overflow-y: auto;" >
|
|
<tr style="height: 30px;position: relative;top:0;left:0;" id="tabletitle">
|
|
<th class="checkBox"><input type="checkbox" @click="checkedAll"></th>
|
|
<th>商品名称</th>
|
|
<th>进价</th>
|
|
<th>库存</th>
|
|
<th>实际库存出货量</th>
|
|
<th>规格</th>
|
|
</tr>
|
|
<template v-for="(item,index) in goodsarr">
|
|
<tr style="height: 30px;">
|
|
<td class="checkBox"><input type="checkbox" v-model="item.election" @change="CheckItem"></td>
|
|
<td>
|
|
{{item.goods_name}}
|
|
</td>
|
|
<td>
|
|
{{item.purch_price}}
|
|
</td>
|
|
<td>
|
|
{{item.goods_num}}
|
|
</td>
|
|
<td>
|
|
<input type="number" ref="shipment_num" v-model.trim="item.num" @input="changegoodsitemnum(index,item.num)" class="goodsinput">
|
|
</td>
|
|
<td>
|
|
<div @click="delgoodsitem(index)" class="delbtn" v-if="item.attribute==2">规格</div>
|
|
<div class="delbtn" v-if="item.attribute==1">无规格</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="total">
|
|
<div class="layui-form-item">
|
|
<input type="button" value="确认出货商品" class="searchbtn" @click="doconfirm">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div v-if="showgoods" class="showgoodsitembox" style="opacity: 0;">
|
|
<div class="showgoodsitem" style="min-width: 800px;overflow: auto;top:50%;left: 50%;transform: translate(-50%,-50%)">
|
|
<div class=" " style="">
|
|
<!--<span class="layui-form-label">规格信息：</span>-->
|
|
<div style="width: calc(100% - 130px);min-width: 800px;max-height: calc(100% - 200px);overflow: auto">
|
|
<table class="layui-table">
|
|
<colgroup>
|
|
<col width="10%">
|
|
<col width="10%">
|
|
<col width="10%">
|
|
<col width="10%">
|
|
<col width="10%">
|
|
<col width="10%">
|
|
<col width="10%">
|
|
<col width="10%">
|
|
<col width="10%">
|
|
<col width="10%">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th style="padding: 0;text-align: center;">序号</th>
|
|
<th v-for="(title,index) in skuAttr">{{title.name}}</th>
|
|
<th>规格条码</th>
|
|
<th>进价</th>
|
|
<th>零售价</th>
|
|
<th>商城价</th>
|
|
<th>商城会员价</th>
|
|
<th>单件对应库存</th>
|
|
<th>库存</th>
|
|
<th>出货量</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="attrData">
|
|
<tr v-for="(list,index) in skuList">
|
|
<td style="padding: 0;text-align: center;">{{index+1*1}}</td>
|
|
<td v-for="(name,i) in list.name">
|
|
<span>{{name}}</span>
|
|
</td>
|
|
<td>
|
|
{{list.sku_code}}
|
|
</td>
|
|
<td>
|
|
{{list.purch_price}}
|
|
</td>
|
|
<td>
|
|
{{list.retail_price}}
|
|
</td>
|
|
<td>
|
|
{{list.online_price}}
|
|
</td>
|
|
<td>
|
|
{{list.shop_mem_price}}
|
|
</td>
|
|
<td>
|
|
{{list.sku_num}}
|
|
</td>
|
|
<td>
|
|
{{list.goods_num}}
|
|
</td>
|
|
<td>
|
|
<input type="number" v-model.trim="list.num" @input="changeskuitemnum(index,list.num)">
|
|
</td>
|
|
</tr>
|
|
<tr v-if="!skuList.length">
|
|
<td style="text-align: center;height: 40px;" :colspan="10+skuAttr.length">未选择规格</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label"></label>
|
|
<div class="layui-input-inline">
|
|
<input type="button" value="确定" class="searchbtn" @click="dostock">
|
|
<input type="button" value="取消" class="searchbtn" @click="cancelstock" style="background: #DCDCDC;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="shade" class="showgoodsitembox showgoodsitembox2">
|
|
<span>数据操作中。。。</span>
|
|
</div>
|
|
<div v-if="shade2" class="showgoodsitembox showgoodsitembox3" style="background-color:white;">
|
|
<span>数据操作中。。。</span>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
|
|
<script type="text/javascript" src="__PUBLIC__/flow/js/vue.js"></script>
|
|
<script type="text/javascript" src="__PUBLIC__/flow/js/vue-resource.js"></script>
|
|
<script type="text/javascript">
|
|
layui.use(['layer', 'form'], function () {
|
|
var layer = layui.layer;
|
|
Vue.http.options.emulateHTTP = true;
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: function () {
|
|
return {
|
|
supplier_id:0,
|
|
candownfaultfile:false,
|
|
myfile:"",
|
|
showgoods:false,
|
|
canchangenum:false,
|
|
settimeouttimer:"",
|
|
shade:false,
|
|
keyword:"",
|
|
shade2:false,
|
|
searchgoodsinfo:{},
|
|
goodsarr:[],
|
|
select_goodarr:[],
|
|
select_goodsarr:[],
|
|
skuList:[],
|
|
skuAttr:[],
|
|
indexid:false,
|
|
allChecked:false
|
|
}
|
|
},
|
|
created:function () {
|
|
$('.showgoodsitembox').css({'opacity':1});
|
|
this.getgoodsarr();
|
|
},
|
|
methods:{
|
|
post:function (url,data,fn) {
|
|
this.$http.post(url, data,{emulateJSON:true}).then(function(response){
|
|
return response.data;
|
|
}, function(response){
|
|
// 响应错误回调
|
|
}).then(function (res) {
|
|
fn(res);
|
|
});
|
|
},
|
|
getgoodsarr:function () {
|
|
var app = this;
|
|
$.ajax({
|
|
url:"{:U('batchgoods_list')}",
|
|
type:'post',
|
|
success:function (res) {
|
|
if(res.status==1){
|
|
app.goodsarr = res.data;
|
|
}else{
|
|
app.goodsarr = [];
|
|
}
|
|
},
|
|
error:function (error) {
|
|
layer.msg('错误了。。。')
|
|
}
|
|
})
|
|
},
|
|
//规格
|
|
delgoodsitem:function (index) {
|
|
var app = this;
|
|
app.indexid = index;
|
|
var id = app.goodsarr[index].id
|
|
$.ajax({
|
|
url:"{:U('batch_specifications')}",
|
|
type:"post",
|
|
data:{id:id},
|
|
success:function(res){
|
|
if(res.status == 1){
|
|
if(res.data.attr.length > 0){
|
|
app.skuAttr = res.data.attr;
|
|
}
|
|
if(res.data.list.length > 0){
|
|
app.skuList = res.data.list
|
|
}
|
|
app.showgoods = true;
|
|
}else{
|
|
layer.msg(res.msg,{time:1500});
|
|
app.skuList = [];
|
|
app.skuAttr = [];
|
|
}
|
|
}
|
|
})
|
|
app.showgoods = true
|
|
},
|
|
// 规格出货货单品确定按钮
|
|
dostock:function () {
|
|
var app = this;
|
|
var index = app.indexid;
|
|
var goodinfo = app.goodsarr;
|
|
var skuListarr = app.skuList;
|
|
if(skuListarr.length <= 0){
|
|
layer.msg('规格商品请请选择规格');
|
|
return;
|
|
}
|
|
if(index===false){
|
|
layer.msg('参数错误请重试');
|
|
return;
|
|
}
|
|
var quency = 0;
|
|
for(var i =0;i<skuListarr.length;i++){
|
|
if(parseInt(skuListarr[i].num) < 0){
|
|
layer.msg('出货量不能小于0');
|
|
return;
|
|
}
|
|
if(!skuListarr[i].num && parseInt(skuListarr[i].num) !=0){
|
|
layer.msg('请输入出货数量,默认为0');
|
|
return;
|
|
}
|
|
if(parseFloat(skuListarr[i].num) > parseFloat(skuListarr[i].goods_num)){
|
|
layer.msg('出货量不能大于库存总量');
|
|
return;
|
|
}
|
|
var y = String(skuListarr[i].num).indexOf(".");
|
|
if(y > 0){
|
|
layer.msg("出货量必须为整数",{time:1500});
|
|
return false;
|
|
}
|
|
if(skuListarr[i].num == 0 || !skuListarr[i].num){
|
|
quency++;
|
|
}
|
|
}
|
|
if(skuListarr.length == quency){
|
|
layer.msg('最少有一个规格出货数量大于0');
|
|
return;
|
|
}
|
|
var skunum = 0;
|
|
app.goodsarr[index].skuList = skuListarr
|
|
for(var i =0;i<skuListarr.length;i++){
|
|
skunum += (skuListarr[i].num *skuListarr[i].sku_num *1);
|
|
}
|
|
app.goodsarr[index].num = skunum;
|
|
app.showgoods = false;
|
|
},
|
|
// 取消按钮
|
|
cancelstock:function () {
|
|
this.showgoods = false;
|
|
this.searchgoodsinfo = {};
|
|
$('#keywordsearch').focus();
|
|
this.indexid = false
|
|
},
|
|
//选中事件
|
|
CheckItem:function(){
|
|
var app = this;
|
|
var select= app.goodsarr.filter(function (item, index) {
|
|
return item.election == true;
|
|
})
|
|
app.select_goodsarr = select;
|
|
},
|
|
//全选
|
|
checkedAll: function () {
|
|
var app = this;
|
|
var check;
|
|
if(app.allChecked === false){
|
|
check = true;
|
|
}else{
|
|
check = false;
|
|
}
|
|
var select = app.goodsarr.forEach(function (item, index) {
|
|
return item.election = check
|
|
})
|
|
app.allChecked = check
|
|
app.select_goodsarr = app.goodsarr;
|
|
},
|
|
//修改规格出货量
|
|
changeskuitemnum:function(index){
|
|
var num = this.skuList[index]['num'];
|
|
if(parseFloat(num) < 0){
|
|
layer.msg('出货量必须大于0',{time:1000})
|
|
return ;
|
|
}
|
|
if(isNaN(Number(num))){
|
|
layer.msg('出货量必须是数字',{time:1000})
|
|
return ;
|
|
}
|
|
if(parseFloat(num) > parseFloat(this.skuList[index].goods_num)){
|
|
layer.msg('出货量不能大于库存总量',{time:1000})
|
|
return ;
|
|
}
|
|
this.canchangenum = false;
|
|
clearTimeout(this.settimeouttimer);
|
|
this.settimeouttimer=setTimeout(function () {
|
|
this.canchangenum = true;
|
|
this.skuList[index]['num'] = num
|
|
}.bind(this),300)
|
|
},
|
|
//修改进货量
|
|
changegoodsitemnum:function (index) {
|
|
var num = this.goodsarr[index]['num'];
|
|
var id = this.goodsarr[index]['id'];
|
|
if(parseFloat(num) < 0){
|
|
layer.msg('出货量必须大于0',{time:1000})
|
|
return ;
|
|
}
|
|
if(isNaN(Number(num))){
|
|
layer.msg('出货量必须是数字',{time:1000})
|
|
return ;
|
|
}
|
|
this.canchangenum = false;
|
|
clearTimeout(this.settimeouttimer);
|
|
this.settimeouttimer=setTimeout(function () {
|
|
this.canchangenum = true;
|
|
this.goodsarr[index]['num'] = num
|
|
}.bind(this),300)
|
|
},
|
|
// 确认出货商品
|
|
doconfirm:function () {
|
|
var app = this
|
|
var goodsarr = app.select_goodsarr;
|
|
if(!goodsarr){
|
|
layer.msg('请选择要出货的商品',{time:1500})
|
|
return ;
|
|
}
|
|
if(goodsarr.length <=0){
|
|
layer.msg('请选择要出货的商品',{time:1500})
|
|
return ;
|
|
}
|
|
for(var i=0;i<goodsarr.length;i++){
|
|
if(goodsarr[i].can_exchange_weigh ==1){
|
|
var y = String(goodsarr[i].num).indexOf(".");
|
|
if(y > 0){
|
|
layer.msg(goodsarr[i].goods_name + '出货量必须为整数',{time:1500})
|
|
return ;
|
|
}
|
|
}
|
|
if(goodsarr[i].attribute == 1){
|
|
if(!goodsarr[i].num){
|
|
layer.msg('请输入出货商品数量',{time:1500})
|
|
return ;
|
|
}
|
|
if(parseInt(goodsarr[i].num) < 0){
|
|
layer.msg('出货商品数量不能小于0',{time:1500})
|
|
return ;
|
|
}
|
|
if(parseFloat(goodsarr[i].num) > parseFloat(goodsarr[i].goods_num)){
|
|
layer.msg(goodsarr[i].goods_name + '出货商品数量不能大于库存数量',{time:1500})
|
|
return ;
|
|
}
|
|
}else if(goodsarr[i].attribute == 2){
|
|
if(!goodsarr[i]['skuList']){
|
|
layer.msg(goodsarr[i].goods_name + '请点击规格设置出货量',{time:1500})
|
|
return ;
|
|
}
|
|
if(goodsarr[i]['skuList'].length <=0){
|
|
layer.msg(goodsarr[i].goods_name + '规格商品请设置出货数量',{time:1500})
|
|
return ;
|
|
}
|
|
}
|
|
}
|
|
$.ajax({
|
|
url:"{:U('batch_addmgoodsbank')}",
|
|
type:"post",
|
|
data:{goodsarr:goodsarr},
|
|
success:function(res){
|
|
if(res.status == 1){
|
|
var index = parent.layer.getFrameIndex(window.name);
|
|
parent.layer.close(index);//关闭当前页
|
|
}else{
|
|
layer.msg(res.msg,{time:3000})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
},
|
|
watch:{
|
|
//监控键盘输入
|
|
shipment_num_verif:function(){
|
|
|
|
}
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|