667 行
27 KiB
HTML
可执行文件
667 行
27 KiB
HTML
可执行文件
<!--[1.1.96]-->
|
|
<link href="__PUBLIC__/Retail/css/base.css" rel="stylesheet">
|
|
<link href="__PUBLIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="__PUBLIC__/Retail/css/store.css" rel="stylesheet">
|
|
<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: #f55;
|
|
border: 0;
|
|
border-radius: 0 2px 2px 0;
|
|
margin: 0;
|
|
color: white;
|
|
}
|
|
.showgoodsitem{
|
|
width:400px;
|
|
height:400px;
|
|
position: absolute;
|
|
top:100px;
|
|
left:calc(50% - 200px);
|
|
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;
|
|
}
|
|
</style>
|
|
<div id="app" style="position: relative;with:100%;height: 100%;">
|
|
<form class="" style="display: flex;height: 100%;flex-direction: column;">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">供货商</label>
|
|
<div class="layui-input-inline">
|
|
<select name="supplier_id" id="supplier_id" class="supplier" v-model="supplier_id" >
|
|
<option value="0">--选择供货商--</option>
|
|
<volist name="info" id="vo">
|
|
<option value="{$vo.id}">{$vo.supplier_name}</option>
|
|
</volist>
|
|
<option value="-1">--自采/其他--</option>
|
|
</select>
|
|
</div>
|
|
<label class="layui-form-label" style="width:150px;">按(条码/货号/名称)查询</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" v-model="keyword" id="keywordsearch" class="keywordinput" @keyup.enter="searchgoods" placeholder="商品条码/货号/名称">
|
|
</div>
|
|
<input type="button" value="查询" class="searchbtn" @click="searchgoods">
|
|
<div class="layui-input-inline" style="margin-left: 40px;position: relative">
|
|
<input type="button" value="导入货单" class="searchbtn">
|
|
<input type="file" class="import" @change="upfile" ref="myfile" >
|
|
</div>
|
|
<div class="layui-input-inline" style="margin-left: 40px;">
|
|
<input type="button" value="下载导入模板" class="searchbtn" @click="downfile" >
|
|
</div>
|
|
</div>
|
|
<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 style="width:5%">序号</th>
|
|
<th style="width:5%">操作</th>
|
|
<th style="width:10%">商品名称</th>
|
|
<th style="width:8%">货号</th>
|
|
<th style="width:12%">条码</th>
|
|
<th style="width:8%">售价</th>
|
|
<th style="width:8%">库存</th>
|
|
<!---->
|
|
<th style="width:8%">进货量</th>
|
|
<th style="width:8%">赠送量</th>
|
|
<th style="width:8%">单位</th>
|
|
<th style="width:8%">规格</th>
|
|
<th style="width:8%">进货价(元)</th>
|
|
<th style="width:8%">小计(元)</th>
|
|
</tr>
|
|
<tr style="height: 30px;">
|
|
<td colspan="13"></td>
|
|
</tr>
|
|
<template v-for="(item,index) in goodsarr">
|
|
<tr style="height: 30px;">
|
|
<td>{{index+1}}</td>
|
|
<td>
|
|
<div @click="delgoodsitem(index)" class="delbtn">删除</div>
|
|
</td>
|
|
<td>
|
|
{{item.goods_name}}
|
|
</td>
|
|
<td>
|
|
{{item.good_number}}
|
|
</td>
|
|
<td>
|
|
{{item.goods_code}}
|
|
</td>
|
|
<td>
|
|
{{item.retail_price}}
|
|
</td>
|
|
<td>
|
|
{{item.goods_num}}
|
|
</td>
|
|
<!---->
|
|
<td>
|
|
<input type="number" v-model="item.num" @input="changegoodsitemnum(index,item.num)" class="goodsinput">
|
|
</td>
|
|
<td>
|
|
<input type="number" v-model="item.givenum" @input="changegoodsitemgivenum(index,item.givenum)" class="goodsinput">
|
|
</td>
|
|
<td>
|
|
{{item.company}}
|
|
</td>
|
|
<td>
|
|
{{item.specifications}}
|
|
</td>
|
|
<td>
|
|
{{item.purch_price}}
|
|
</td>
|
|
<td>
|
|
{{Math.round(100*item.num*item.purch_price)/100}}
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="total">
|
|
<div class="layui-form-item" >
|
|
<input type="button" value="下载导入失败表格" class="searchbtn" @click="downfaultfile" v-if="candownfaultfile">
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label" style="width: auto;">商品种类:
|
|
<span class="totalnum">{{goodsarr.length}}</span>
|
|
</label>
|
|
<label class="layui-form-label" style="width: auto;">进货量:
|
|
<span class="totalnum">{{floworderdata.allnum}}</span>
|
|
</label>
|
|
<label class="layui-form-label" style="width: auto;">赠送量:
|
|
<span class="totalnum">{{floworderdata.allgivenum}}</span>
|
|
</label>
|
|
<label class="layui-form-label" style="width: auto;">总金额:
|
|
<span class="totalnum">{{floworderdata.allmoney}}</span>
|
|
</label>
|
|
<label class="layui-form-label" style="width: auto;">优惠金额:
|
|
<span class="totalnum"><input type="number" v-model="dismoney" style="width:60px;text-align: center;"></span>
|
|
</label>
|
|
<label class="layui-form-label" style="width: auto;">结算金额:
|
|
<span class="totalnum">{{Math.round((floworderdata.allmoney-dismoney)*100)/100}}</span>
|
|
</label>
|
|
<input type="button" value="确认进货单" class="searchbtn" @click="doconfirm">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<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 v-if="showgoods" class="showgoodsitembox" style="opacity: 0;">
|
|
<div class="showgoodsitem">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">商品名称</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" class="keywordinput" :value="searchgoodsinfo.goods_name" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">条码</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" class="keywordinput" :value="searchgoodsinfo.goods_code" placeholder="商品条码" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">货号</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" class="keywordinput" :value="searchgoodsinfo.good_number" placeholder="商品货号" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">进货量</label>
|
|
<div class="layui-input-inline">
|
|
<input type="number" class="keywordinput" v-model="searchgoodsinfo.num" ref="innum">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">进货价</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" class="keywordinput" v-model="searchgoodsinfo.purch_price">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">赠送量</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" class="keywordinput" v-model="searchgoodsinfo.givenum">
|
|
</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">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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:"",
|
|
dismoney:0,
|
|
showgoods:false,
|
|
floworderid:"{$floworderid}",
|
|
canchangenum:false,
|
|
settimeouttimer:"",
|
|
shade:false,
|
|
keyword:"",
|
|
shade2:false,
|
|
searchgoodsinfo:{},
|
|
goodsarr:[]
|
|
}
|
|
},
|
|
created:function () {
|
|
// console.log(this.$http);
|
|
// console.log(this.supplier_id);
|
|
$('.showgoodsitembox').css({'opacity':1});
|
|
this.getgoodsarr();
|
|
// 传统写法
|
|
// this.post(
|
|
// "{:U('getgoodsarr')}",
|
|
// {floworderid: this.floworderid},
|
|
// function (res) {
|
|
// if(res.status==1){
|
|
// this.goodsarr = res.data;
|
|
// }else{
|
|
// this.goodsarr = [];
|
|
// }
|
|
// }.bind(this)
|
|
// )
|
|
// this.$http.post("{:U('getgoodsarr')}", {
|
|
// floworderid: this.floworderid
|
|
// },{emulateJSON:true}).then(function(response){
|
|
// // 响应成功回调
|
|
// // console.log(response);
|
|
// return response.data;
|
|
// }, function(response){
|
|
// // 响应错误回调
|
|
// })
|
|
// .then(function (res) {
|
|
// console.log(res);
|
|
// if(res.status==1){
|
|
// this.goodsarr = res.data;
|
|
// }else{
|
|
// this.goodsarr = [];
|
|
// }
|
|
// });
|
|
},
|
|
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 floworderid = this.floworderid;
|
|
var app = this;
|
|
$.ajax({
|
|
url:"{:U('getgoodsarr')}",
|
|
data:{
|
|
floworderid:floworderid
|
|
},
|
|
type:'post',
|
|
success:function (res) {
|
|
if(res.status==1){
|
|
app.goodsarr = res.data;
|
|
}else{
|
|
app.goodsarr = [];
|
|
}
|
|
},
|
|
error:function (error) {
|
|
layer.msg('错误了。。。')
|
|
}
|
|
})
|
|
},
|
|
// 删除一想
|
|
delgoodsitem:function (index) {
|
|
console.log(index);
|
|
var id= this.goodsarr[index]['id'];
|
|
var app = this;
|
|
app.shade =true;
|
|
$.ajax({
|
|
url:"{:U('delgoodsitem')}",
|
|
data:{id:id},
|
|
type:'post',
|
|
success:function (res) {
|
|
if(res.status==1){
|
|
app.goodsarr.splice(index, 1);
|
|
}else{
|
|
layer.msg(res.msg,{time:1500})
|
|
}
|
|
app.shade =false;
|
|
},
|
|
error:function (error) {
|
|
console.log(error);
|
|
layer.msg('出错了');
|
|
app.shade =false;
|
|
}
|
|
})
|
|
},
|
|
//修改进货量
|
|
changegoodsitemnum:function (index) {
|
|
// console.log(this.goodsarr[index]['num'],num2);
|
|
var num = this.goodsarr[index]['num'];
|
|
var id = this.goodsarr[index]['id'];
|
|
if(isNaN(Number(num))){
|
|
layer.msg('进货量必须是整数',{time:1000})
|
|
return ;
|
|
}
|
|
this.canchangenum = false;
|
|
clearTimeout(this.settimeouttimer);
|
|
this.settimeouttimer=setTimeout(function () {
|
|
this.canchangenum = true;
|
|
this.changenum(id,num,1)
|
|
}.bind(this),300)
|
|
},
|
|
// 修改赠送量
|
|
changegoodsitemgivenum:function (index) {
|
|
// console.log(this.goodsarr[index]['givenum']);
|
|
var num = this.goodsarr[index]['givenum'];
|
|
var id = this.goodsarr[index]['id'];
|
|
if(isNaN(Number(num))){
|
|
layer.msg('进货量必须是整数',{time:1000})
|
|
return ;
|
|
}
|
|
this.canchangenum = false;
|
|
clearTimeout(this.settimeouttimer);
|
|
this.settimeouttimer=setTimeout(function () {
|
|
this.canchangenum = true;
|
|
this.changenum(id,num,2);
|
|
}.bind(this),300)
|
|
},
|
|
searchgoods:function () {
|
|
// console.log(this.keyword);
|
|
var keyword = this.keyword;
|
|
var app = this;
|
|
if(keyword){
|
|
$.ajax({
|
|
url:"{:U('searchgoods')}",
|
|
data:{keyword:keyword},
|
|
type:'post',
|
|
success:function (res) {
|
|
// console.log(res);
|
|
if(res.status==1){
|
|
app.searchgoodsinfo = res.goods;
|
|
app.showgoods = true;
|
|
app.keyword="";
|
|
setTimeout(function () {
|
|
$(app.$refs.innum).focus();
|
|
},100)
|
|
}else{
|
|
layer.msg('未找到您需要的商品',{time:1500});
|
|
app.keyword="";
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 取消按钮
|
|
cancelstock:function () {
|
|
this.showgoods = false;
|
|
this.searchgoodsinfo = {};
|
|
$('#keywordsearch').focus();
|
|
},
|
|
// 进货单品确定按钮
|
|
dostock:function () {
|
|
var searchgoodsinfo = this.searchgoodsinfo;
|
|
searchgoodsinfo['floworderid'] = this.floworderid;
|
|
if(!searchgoodsinfo.num){
|
|
layer.msg('请输入进货数量',{time:1500})
|
|
return ;
|
|
}
|
|
var app = this;
|
|
$.ajax({
|
|
url:"{:U('dostock')}",
|
|
data:searchgoodsinfo,
|
|
type:'post',
|
|
success:function (res) {
|
|
if(res.status==1){
|
|
app.goodsarr.push(res.data);
|
|
app.cancelstock();
|
|
}else{
|
|
layer.msg(res.msg,{time:2000},function () {
|
|
app.cancelstock();
|
|
});
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//修改数量
|
|
changenum:function (id,num,type) {
|
|
if(!this.canchangenum){
|
|
return ;
|
|
}
|
|
this.shade = true;
|
|
var app = this;
|
|
$.ajax({
|
|
url:"{:U('changenum')}",
|
|
data:{
|
|
id:id,
|
|
num:num,
|
|
type:type
|
|
},
|
|
type:'post',
|
|
success:function (res) {
|
|
console.log(res)
|
|
app.shade = false;
|
|
app.canchangenum = true;
|
|
},
|
|
error:function (error) {
|
|
layer.msg('出错了')
|
|
app.shade = false;
|
|
}
|
|
})
|
|
},
|
|
// 确认订货单
|
|
doconfirm:function () {
|
|
var supplier_id = this.supplier_id;
|
|
var app = this;
|
|
if(supplier_id==0){
|
|
layer.msg('请选择供货商')
|
|
return ;
|
|
}
|
|
layer.confirm('确定要确认该进货单吗？',function (index) {
|
|
layer.close(index);
|
|
app.submitfloworder();
|
|
})
|
|
},
|
|
submitfloworder:function () {
|
|
var supplier_id = this.supplier_id;
|
|
var id = this.floworderid;
|
|
var dismoney = this.dismoney;
|
|
$.ajax({
|
|
url:"{:U('submitfloworder')}",
|
|
data:{
|
|
id:id,
|
|
supplier_id:supplier_id,
|
|
dismoney:dismoney
|
|
},
|
|
type:'post',
|
|
success:function (res) {
|
|
// console.log(res);
|
|
if(res.status==1){
|
|
layer.msg(res.msg,{time:2000,icon:1},function () {
|
|
MenuApp.refreshWindow();
|
|
});
|
|
|
|
// window.location.replace("{:U('index')}");
|
|
}else{
|
|
layer.msg(res.msg);
|
|
}
|
|
},
|
|
error:function (error) {
|
|
console.log(error);
|
|
layer.msg('出错了。')
|
|
}
|
|
})
|
|
},
|
|
// 下载导入模板
|
|
downfile:function () {
|
|
window.location.href="{:U('downfile')}";
|
|
},
|
|
// 上传模板表格
|
|
upfile:function () {
|
|
var app = this;
|
|
console.log(this.$refs.myfile.files[0]);
|
|
var file = this.$refs.myfile.files[0];
|
|
var fd = new FormData();
|
|
fd.append('file',file);
|
|
$.ajax({
|
|
url:"{:U('myimport')}",
|
|
data:fd,
|
|
type:'post',
|
|
async: false,
|
|
cache: false,
|
|
contentType: false, //不设置内容类型
|
|
processData: false,
|
|
success:function (res) {
|
|
console.log(res);
|
|
if(res.status==1){
|
|
layer.msg(res.msg,{time:2000})
|
|
app.getgoodsarr();
|
|
app.candownfaultfile = true;
|
|
}else{
|
|
layer.msg(res.msg,{time:2000});
|
|
}
|
|
}
|
|
})
|
|
},
|
|
downfaultfile:function () {
|
|
var id = this.floworderid;
|
|
window.location.href="{:U('downfaultfile')}?id="+id;
|
|
}
|
|
},
|
|
computed:{
|
|
floworderdata:function () {
|
|
var allnum = 0;
|
|
var allgivenum = 0;
|
|
var allmoney = 0;
|
|
var goodsarr = this.goodsarr;
|
|
for(var i=0;i<goodsarr.length;i++){
|
|
allnum = allnum+goodsarr[i]['num']*1;
|
|
allgivenum = allgivenum+goodsarr[i]['givenum']*1;
|
|
allmoney = allmoney+goodsarr[i]['num']*goodsarr[i]['purch_price'];
|
|
}
|
|
allnum = Math.round(allnum);
|
|
allgivenum = Math.round(allgivenum);
|
|
allmoney = Math.round(allmoney*100)/100;
|
|
return {
|
|
allnum:allnum,
|
|
allgivenum:allgivenum,
|
|
allmoney:allmoney
|
|
};
|
|
}
|
|
}
|
|
})
|
|
})
|
|
</script>
|