文件
mashangyoujiu/Application/Retail/View/Flow/newallocating.html

574 行
22 KiB
HTML
可执行文件

<!--[1.1.96]-->
<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">
<style>
.btn {
width: 88px;
background-color: #009688;
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:auto;
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%;">
<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_num" readonly disabled="disabled">
</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">-->
<!--&lt;!&ndash;<input type="text" class="keywordinput" v-model="searchgoodsinfo.remark">&ndash;&gt;-->
<!--<textarea name="desc" placeholder="请输入内容" class="layui-textarea" v-model="searchgoodsinfo.remark"></textarea>-->
<!--</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>
<form class="" style="display: flex;height: 100%;flex-direction: column;">
<div class="layui-form-item">
<label class="layui-form-label" style="width: auto;">目标门店</label>
<div class="layui-input-inline">
<select name="supplier_id" id="tostoreid" class="supplier" v-model="tostoreid" >
<option value="0">--选择门店--</option>
<volist name="info" id="vo">
<option value="{$vo.id}">{$vo.storetag}</option>
</volist>
</select>
</div>
<label class="layui-form-label" style="width:120px;">条码/货号</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>
<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 >序号</th>
<th >操作</th>
<th >商品名称</th>
<th>货号</th>
<th >条码</th>
<!---->
<th >调拨量</th>
<th >单位</th>
<th >规格</th>
<th >进价</th>
<th >小计(元)</th>
<!--<th >调拨原因</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>
<input type="number" v-model="item.num" @input="changegoodsitemnum(index,item.num)" 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>
<!--<td>-->
<!--{{item.remark}}-->
<!--</td>-->
</tr>
</template>
</table>
</div>
</div>
<div class="total">
<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.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>
<input type="button" value="确认调拨单" class="searchbtn" @click="doconfirm">
</div>
</div>
</form>
</div>
<script type="text/javascript">
layui.use(['layer', 'form'], function () {
var layer = layui.layer;
var app = new Vue({
el: '#app',
data: function () {
return {
supplier_id:0,
candownfaultfile:false,
tostoreid:0,
myfile:"",
dismoney:0,
showgoods:false,
floworderid:"{$floworderid}",
canchangenum:false,
settimeouttimer:"",
shade:false,
keyword:"",
shade2:false,
searchgoodsinfo:{},
goodsarr:[]
}
},
created:function () {
// console.log(this.supplier_id);
$('.showgoodsitembox').css({'opacity':1});
this.getgoodsarr();
},
methods:{
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){
res.goods['remark'] = '商品变质';
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 false;
}
var y = String(searchgoodsinfo.num).indexOf(".");
if(y > 0 || parseInt(searchgoodsinfo.num) < 0){
layer.msg("调拨量有误",{time:1500});
return false;
}
if(parseInt(searchgoodsinfo.num) > searchgoodsinfo.goods_num){
layer.msg("调拨量不能大于库存量",{time:1500});
return false;
}
var app = this;
$.ajax({
url:"{:U('dostock')}",
data:searchgoodsinfo,
type:'post',
success:function (res) {
console.log(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 tostoreid = this.tostoreid;
if(!tostoreid){
layer.msg('请选择您要调货到的门店',{time:1500})
return;
}
var app = this;
layer.confirm('确定要确认该调拨单吗?',function (index) {
layer.close(index);
app.submitfloworder();
})
},
submitfloworder:function () {
var tostoreid = this.tostoreid;
var id = this.floworderid;
var dismoney = this.dismoney;
$.ajax({
url:"{:U('submitfloworder')}",
data:{
id:id,
dismoney:dismoney,
tostoreid:tostoreid
},
type:'post',
success:function (res) {
// console.log(res);
if(res.status==1){
layer.msg(res.msg,{time:2000,icon:1},function () {
MenuApp.refreshWindow();
});
// layer.msg(res.msg);
// window.location.replace("{:U('newallocating')}");
}else{
layer.msg(res.msg);
}
},
error:function (error) {
console.log(error);
layer.msg('出错了。')
}
})
}
},
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>