文件

960 行
36 KiB
HTML
可执行文件

<!--[1.2.34]-->
<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: #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: #007aff;
border: 0;
border-radius: 0 2px 2px 0;
margin: 0;
color: white;
}
.showgoodsitem {
width: 100%;
height: 100%;
position: absolute;
top: 165px;
background-color: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
z-index: 600;
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: calc(100vw - 160px);
background-color: rgba(0, 0, 0, 0.1);
top: -36px;
padding-left: 160px;
left: 0;
z-index: 600;
}
.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;
}
.gA_inner {
box-sizing: border-box;
padding: 10px 20px;
display: flex;
align-items: flex-start;
}
.attrInput {
width: 100%;
height: 100%;
border-color: transparent;
background-color: transparent;
box-sizing: border-box;
display: block;
text-align: center;
padding: 0 !important;
}
.attrBtn {
color: #313131;
cursor: pointer;
margin-right: 30px;
background-color: transparent;
}
.attrBtn:hover {
color: #4394ff;
}
.sku-img {
width: 100px;
height: 100px;
}
.goodsImg {
height: 130px;
}
.input-disabled {
border: none;
outline: none;
}
.input-disabled:disabled {
background-color: transparent;
}
th, td, tr {
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center !important;
}
.sku_mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
}
.gA_inners {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 80%;
margin: 0 auto;
z-index: 1000;
}
.forzen {
display: none;
}
[v-cloak] {
display: none;
}
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>
<div id="app" style="position: relative;with:100%;height: 100%;" v-cloak>
<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" v-if="searchgoodsinfo.attribute==1">
<label class="layui-form-label">出货量</label>
<div class="layui-input-inline">
<input type="number" class="keywordinput" v-model="searchgoodsinfo.num" ref="innum"
placeholder="规格商品请忽略">
</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" disabled="disabled">
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">规格信息:</span>
<div style="width: calc(100% - 130px);max-width: 900px;overflow: auto;max-height: 281px;">
<table class="layui-table">
<colgroup>
<col width="50">
<col v-for="(title,index) in skuAttr" width="60">
<col width="100">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="40">
</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="list.num" @input="numChange(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">
</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.number="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">
<input type="button" value="批量选择" class="searchbtn" style="margin-left: 20px" @click="batchgoods">
<input type="button" value="批量删除" class="searchbtn" style="margin-left: 20px" @click="batchDelete"
v-if="goodsarr.length > 0">
</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 class="checkBox"><input type="checkbox" @click="checkedAll"></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 class="checkBox"><input type="checkbox" v-model="item.election" @change="CheckItem">
</td>
<td>{{index+1}}</td>
<td>
{{item.goods_name}}
</td>
<td>
{{item.good_number}}
</td>
<td>
{{item.goods_code}}
</td>
<td>
{{item.purch_price}}
</td>
<td>
{{item.num}}
</td>
<td>
<div @click="sku_details(index)" class="delbtn" v-if="item.attribute==2">规格</div>
<div @click="delgoodsitem(index)" class="delbtn" style="color:#A9A9A9">删除</div>
</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">{{len}}</span>
</label>
<label class="layui-form-label" style="width: auto;">实际库存出货量:
<span class="totalnum">{{allnum}}</span>
</label>
<label class="layui-form-label" style="width: auto;">进价总计:
<span class="totalnum">{{allmoney}}</span>
</label>
<input type="button" value="确认出货单" class="searchbtn" @click="doconfirm">
</div>
</div>
</form>
<div class="sku_mask" v-if="skudetail" @click.stop="skudetail=false">
<div class="gA_inners" @click="skudetail=true"
style="top:20px;width: 800px;overflow: auto;height: 600px;background: #fff">
<div>
<table class="layui-table" style="height: 100%">
<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 skuAttrdetail">{{title.name}}</th>
<th>规格条码</th>
<th>进价</th>
<th>零售价</th>
<th>商城价</th>
<th>商城会员价</th>
<th>单件对应库存</th>
<th>库存</th>
<th>出货量</th>
</tr>
</thead>
<tbody>
<tr v-for="(list,index) in skuListdetail">
<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="list.num" disabled="disabled">
</td>
</tr>
<tr v-if="!skuListdetail.length">
<td style="text-align: center;height: 40px;" :colspan="10+skuAttrdetail.length">未选择规格</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</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,
canchangenum: false,
settimeouttimer: "",
shade: false,
keyword: "",
shade2: false,
searchgoodsinfo: {},
goodsarr: [],
skuList: [],
skuAttr: [],
len: 0,
allmoney: 0,
allnum: 0,
skuAttrdetail: [],
skuListdetail: [],
skudetail: false,
select_goodsarr: [], //全选删除
allChecked: false
}
},
created: function () {
// console.log(this.supplier_id);
$('.showgoodsitembox').css({'opacity': 1});
this.getgoodsarr();
},
methods: {
getgoodsarr: function () {
var app = this;
$.ajax({
url: "{:U('getgoods_bank')}",
type: 'post',
success: function (res) {
if (res.status == 1) {
app.goodsarr = res.data;
app.len = res.total.len;
app.allnum = res.total.allnum;
app.allmoney = res.total.allmoney;
} else {
app.goodsarr = [];
}
},
error: function (error) {
layer.msg('错误了。。。')
}
})
},
//规格详情
sku_details: function (index) {
var that = this;
var goods_bankid = that.goodsarr[index].id
$.ajax({
url: "{:U('purchase_sku_details')}",
type: "post",
data: {goods_bankid: goods_bankid},
success: function (res) {
if (res.status == 1) {
that.skuAttrdetail = res.info.attr;
that.skuListdetail = res.info.list;
that.skudetail = true;
}
}
})
},
delgoodsitem: function (index) {
var id = this.goodsarr[index]['id'];
var app = this;
app.shade = true;
$.ajax({
url: "{:U('delete_goods_bank')}",
data: {id: id},
type: 'post',
success: function (res) {
if (res.status == 1) {
MenuApp.refreshWindow();
} 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)
},
numChange: function (index, nums) {
this.skuList[index].num = nums;
},
//批量选择
batchgoods: function () {
layer.open({
type: 2,
content: "{:U('batchgoods')}",
area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
offset: 'rb',
shade: 0,
end: function () {
MenuApp.refreshWindow();
}
})
},
searchgoods: function () {
var keyword = this.keyword;
var app = this;
if (keyword) {
$.ajax({
url: "{:U('searchgoods')}",
data: {keyword: keyword},
type: 'post',
success: function (res) {
if (res.status == 1) {
app.searchgoodsinfo = res.goods;
if (res.info.attr.length > 0) {
app.skuAttr = res.info.attr;
}
if (res.info.list.length > 0) {
app.skuList = res.info.list
}
app.showgoods = true;
app.keyword = "";
setTimeout(function () {
$(app.$refs.innum).focus();
}, 100)
} else {
layer.msg(res.msg, {time: 1500});
app.keyword = "";
}
}
})
}
},
// 取消按钮
cancelstock: function () {
this.showgoods = false;
this.searchgoodsinfo = {};
$('#keywordsearch').focus();
},
// 进货单品确定按钮
dostock: function () {
var searchgoodsinfo = this.searchgoodsinfo;
var skuList = this.skuList;
if (searchgoodsinfo.attribute == 1) {
if (!searchgoodsinfo.num) {
layer.msg('请输入出货量', {time: 1500})
return false;
}
if (parseFloat(searchgoodsinfo.num) == 0 || parseFloat(searchgoodsinfo.num) < 0) {
layer.msg('出货量不能小于0', {time: 1500})
return false;
}
//不称重
if (searchgoodsinfo.can_exchange_weigh == 1) {
var y = String(searchgoodsinfo.num).indexOf(".");
if (y > 0) {
layer.msg("出货量有误,必须为整数", {time: 1500});
return false;
}
if (parseInt(searchgoodsinfo.num) < 0) {
layer.msg("出货量有误,不能小于0", {time: 1500});
return false;
}
} else if (searchgoodsinfo.can_exchange_weigh == 2) { //称重
var y = String(searchgoodsinfo.num).indexOf(".");
if (y > 0) {
var count = String(searchgoodsinfo.num).length - y;
if (count > 4) {
layer.msg("出货量有误,必须为整数", {time: 1500});
return false;
}
}
if (parseInt(searchgoodsinfo.num) < 0) {
layer.msg("出货量有误,不能小于0", {time: 1500});
return false;
}
}
if (parseFloat(searchgoodsinfo.num) > parseFloat(searchgoodsinfo.goods_num)) {
layer.msg("出货量不能大于库存量", {time: 1500});
return false;
}
} else if (searchgoodsinfo.attribute == 2) {
var specis = 0;
for (var i = 0; i < skuList.length; i++) {
if (!(skuList[i].num) && parseFloat(skuList[i].num) != 0) {
layer.msg("请输入出货量默认为0", {time: 1500});
return false;
}
if (skuList[i].num > skuList[i].goods_num) {
layer.msg("出货量不能大于库存总量", {time: 1500});
return false;
}
if (searchgoodsinfo.can_exchange_weigh == 1) { //不称重
var y = String(skuList[i].num).indexOf(".");
if (y > 0) {
layer.msg("出货量有误,必须为整数", {time: 1500});
return false;
}
if (parseInt(skuList[i].num) < 0) {
layer.msg("出货量有误,不能小于0", {time: 1500});
return false;
}
} else if (searchgoodsinfo.can_exchange_weigh == 2) { //称重
var y = String(skuList[i].num).indexOf(".");
if (y > 0) {
layer.msg("出货量有误,出货量必须为整数", {time: 1500});
return false;
}
if (parseInt(skuList[i].num) < 0) {
layer.msg("出货量有误,不能小于0", {time: 1500});
return false;
}
}
//判断是否都为0
if (parseInt(skuList[i].num) == 0) {
specis += 1;
}
}
if (specis == skuList.length) {
layer.msg("出货量有误,必须有一个规格出货量不为0", {time: 1500});
return false;
}
}
var app = this;
$.ajax({
url: "{:U('addgoods_allocation')}",
data: {searchgoodsinfo: searchgoodsinfo, skuList: skuList},
type: 'post',
success: function (res) {
if (res.status == 1) {
app.goodsarr.push(res.data);
app.cancelstock();
MenuApp.refreshWindow();
} 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;
}
if (this.goodsarr.length <= 0) {
layer.msg('您还没添加调拨商品呢!', {time: 1500})
return;
}
var app = this;
layer.confirm('确定要确认该出货单吗?', function (index) {
layer.close(index);
app.submitfloworder();
})
},
submitfloworder: function () {
var vm = this;
var tostoreid = vm.tostoreid;
var goodsarr = vm.goodsarr;
var dismoney = vm.dismoney;
var goods_bank_ids = [];
for (var i = 0; i < goodsarr.length; i++) {
goods_bank_ids.push(goodsarr[i].id);
}
if (!goods_bank_ids) {
layer.confirm("请新建出货单", {time: 1500})
return false;
}
$.ajax({
url: "{:U('addallocation')}",
data: {
goods_bank_ids: goods_bank_ids,
dismoney: dismoney,
tostoreid: tostoreid
},
type: 'post',
success: function (res) {
if (res.status == 1) {
layer.msg(res.msg, {time: 2000, icon: 1}, function () {
MenuApp.refreshWindow();
});
} else {
layer.msg(res.msg);
}
},
error: function (error) {
layer.msg('出错了。')
}
})
},
//选中事件
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
if (check) {
app.select_goodsarr = app.goodsarr;
} else {
app.select_goodsarr = [];
}
},
//批量删除
batchDelete: function () {
var that = this;
var select_goodsarr = that.select_goodsarr;
if (!select_goodsarr) {
layer.msg('请选择要删除的商品', {time: 1000})
return;
}
var id_arr = [];
for (var i = 0; i < select_goodsarr.length; i++) {
id_arr.push(select_goodsarr[i].id);
}
$.ajax({
url: "{:U('batchDeteleGoodsBank')}",
type: "post",
data: {id_arr: id_arr},
success: function (res) {
if (res.status == 1) {
layer.msg(res.msg, {time: 1500}, function () {
that.getgoodsarr();
});
} else {
layer.msg(res.msg, {time: 1000})
}
}
})
}
},
computed: {}
})
})
</script>