551 lines
13 KiB
HTML
551 lines
13 KiB
HTML
{extend name="app/shop/view/base.html"/}
|
|
{block name="resources"}
|
|
<style>
|
|
.stock-body tr:first-child:hover td{
|
|
background-color:#FFF;
|
|
}
|
|
.stock-body,.stock-body tr,.stock-body tr td{
|
|
background-color:#FFF;
|
|
}
|
|
.stock-view{
|
|
padding:20px;
|
|
}
|
|
.stock-search-block{
|
|
position:relative;
|
|
}
|
|
.stock-autocomplete-list{
|
|
position:absolute;
|
|
z-index:9999;
|
|
background-color:#FFF;
|
|
width:500px;
|
|
box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
|
|
border-radius: 4px;
|
|
overflow:hidden;
|
|
color: rgba(0,0,0,.85);
|
|
font-variant: tabular-nums;
|
|
line-height: 1.5715;
|
|
list-style: none;
|
|
left:0;
|
|
top:62px;
|
|
display:none;
|
|
}
|
|
.stock-autocomplete-list ul{
|
|
padding:6px 0;
|
|
}
|
|
.stock-autocomplete-list ul li{
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
|
|
text-align:left;
|
|
padding: 5px 12px;
|
|
color: rgba(0,0,0,.85);
|
|
}
|
|
.stock-li-hover{
|
|
background-color: #f5f5f5;
|
|
}
|
|
.stock-sku-no{
|
|
display:inline-block;
|
|
float:right;
|
|
}
|
|
|
|
.ns-title-pic {
|
|
width:45px;
|
|
height:45px;
|
|
text-align:center;
|
|
}
|
|
.table-goods-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: calc(100% - 90px);
|
|
margin-left:15px;
|
|
}
|
|
.table-goods-info > div {
|
|
width: 100%;
|
|
}
|
|
.table-goods-info * {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.table-goods-info .goods-name{
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
white-space: break-spaces;
|
|
line-height: 1.3;
|
|
}
|
|
.ns-table-title{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.ns-title-pic img{
|
|
display:inline-block;
|
|
height:auto;
|
|
width:auto;
|
|
max-height:100%;
|
|
max-width:100%;
|
|
}
|
|
.ns-table-title .ns-title-content{display: flex;flex-direction: column;justify-content: space-between;}
|
|
.action-btn{
|
|
cursor: pointer;
|
|
}
|
|
.empty-data{
|
|
text-align:center;
|
|
padding:30px !important;
|
|
color:rgba(0,0,0,.25);
|
|
}
|
|
.total-data{
|
|
padding:15px !important;
|
|
background: #fafafa;
|
|
color:#333;
|
|
}
|
|
.goods-money{
|
|
color:#ff4d4f;
|
|
}
|
|
.store-view{
|
|
margin-top:10px;
|
|
}
|
|
.store-view .layui-form-label{
|
|
width: 80px;
|
|
text-align: center;
|
|
}
|
|
.store-view .layui-input-block{
|
|
margin-left:80px;
|
|
}
|
|
</style>
|
|
{/block}
|
|
{block name="main"}
|
|
<div class="layui-form form">
|
|
<div class="stock-view">
|
|
<!--<div class="">-->
|
|
<!--<button type="button" class="layui-btn bg-color" onclick="queryGoods()">添加商品</button>-->
|
|
<!--</div>-->
|
|
<div class="store-view">
|
|
<div class="layui-form-item">
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label"><span class="required">*</span>门店：</label>
|
|
<div class="layui-input-block len-mid">
|
|
<select name="store_id" lay-verify="required" lay-filter="store_list" class="len-mid">
|
|
<option value="">请选择</option>
|
|
{foreach $store_list as $store_k => $store_v}
|
|
<option value="{$store_v.store_id}">{$store_v.store_name}</option>
|
|
<option value="{$store_v.store_id}" {if $store_k == 0}selected {php} $default_store_id = $store_v['store_id']; {/php}{/if}>{$store_v.store_name}</option>
|
|
{/foreach}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<table class="layui-table" lay-size="lg">
|
|
<colgroup>
|
|
<col width="450">
|
|
<col width="120">
|
|
<col width="120">
|
|
<col>
|
|
<col width="200">
|
|
<col width="120">
|
|
<col width="90">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>商品名称/规格/编码</th>
|
|
<th>当前库存</th>
|
|
<th>销售库存</th>
|
|
<th>单位</th>
|
|
<th>实盘数量</th>
|
|
<th>盈亏数量</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="stock-body">
|
|
<tr class="stock-search-line">
|
|
<td class="stock-search-block">
|
|
<input type="text" class="layui-input stock-search" placeholder="请输入商品名称/规格/编码" style="border:none;padding-left:0;"/>
|
|
<div class="stock-autocomplete-list">
|
|
<ul></ul>
|
|
</div>
|
|
</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="8" class="total-data">合计: 共<span class="kinds-num">0</span>种商品, 盘盈：<span class="goods-up">0</span>种, 盘亏：<span class="goods-down">0</span>种, 持平：<span class="goods-same">0</span>种</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
|
|
<div class="form-row">
|
|
<button class="layui-btn" lay-submit lay-filter="save">提交</button>
|
|
<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script type="text/html" id="stock_goods_info">
|
|
<tr class="stock-tr" data-key = '{{ d.key }}'>
|
|
<td>
|
|
<div class="ns-table-title">
|
|
<div class="ns-title-pic" id="goods_img_{{d.sku_id}}">
|
|
<img src="{{ns.img(d.sku_image || ''.split(',')[0], 'small')}}" layer-src/>
|
|
</div>
|
|
<div class="ns-title-content table-goods-info">
|
|
<div>
|
|
<a href="javascript:;" class="ns-multi-line-hiding ns-gn-color textOVerThree goods-name" title="{{d.sku_name}}" lay-event="preview">{{d.sku_name}}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" class="layui-input" name="goods_sku_id" value="{{ d.goods_sku_id || 0 }}"/>
|
|
<input type="hidden" class="layui-input" name="stock" value="{{ d.real_stock || 0 }}"/>
|
|
</td>
|
|
|
|
<!-- 库存 -->
|
|
<td>{{ d.real_stock || 0 }}</td>
|
|
<td>{{ d.stock || 0 }}</td>
|
|
<!-- 单位 -->
|
|
<td>{{ d.unit }}</td>
|
|
<!-- 数量 -->
|
|
<td>
|
|
<input type="number" class="layui-input stock-num" name="goods_num" value="{{ d.goods_num || '' }}" placeholder="0" onchange="dataChange(this)"/>
|
|
</td>
|
|
|
|
<!-- 成本总价 -->
|
|
<td>
|
|
<span class="compare-num">0</span>
|
|
</td>
|
|
<td>
|
|
<a class="text-color action-btn" onclick="delTr(this)">删除</a>
|
|
</td>
|
|
</tr>
|
|
</script>
|
|
{/block}
|
|
{block name="script"}
|
|
<script>
|
|
var count = 0;
|
|
var stock_data = {};//库存数据 {{'sku_info':{},'supplier_name':'', 'stock' : 0, 'unit':'','goods_num':0, 'goods_price':0,'goods_money':0}}
|
|
var laytpl,form;
|
|
var default_store_id = {$default_store_id ?? 0};
|
|
var temp_list = {};
|
|
|
|
var scanCode = { lastTime: 0, code: '' };
|
|
function clearBarCode() {
|
|
scanCode = {lastTime: 0, code: ''}
|
|
}
|
|
|
|
// 监听扫码枪事件
|
|
$(window).keypress(function (e) {
|
|
if(!checkStore()){
|
|
return false;
|
|
}
|
|
var currCode = e.keyCode || e.which || e.charCode;
|
|
|
|
var currTime = new Date().getTime();
|
|
if (scanCode.lastTime > 0) {
|
|
if (currTime - scanCode.lastTime <= 100) {
|
|
scanCode.code += String.fromCharCode(currCode);
|
|
} else if (currTime - scanCode.lastTime > 500) {
|
|
// 输入间隔500毫秒清空
|
|
clearBarCode();
|
|
}
|
|
} else {
|
|
scanCode.code = String.fromCharCode(currCode);
|
|
}
|
|
scanCode.lastTime = currTime;
|
|
|
|
if(currCode == 13){
|
|
autocomplete(scanCode.code.trim(),function () {
|
|
if(ns.checkIsNotNull(temp_list)){
|
|
$(".stock-autocomplete-list").show();
|
|
}
|
|
$('.stock-autocomplete-list ul li').click();
|
|
});
|
|
}
|
|
});
|
|
|
|
layui.use(['form', 'laytpl'], function () {
|
|
form = layui.form,laytpl = layui.laytpl;
|
|
var repeat_flag = false;
|
|
form.render();
|
|
fetch({});
|
|
|
|
//门店选择
|
|
form.on('select(store_list)', function(data){
|
|
var store_id = data.value;
|
|
if(default_store_id > 0){
|
|
layer.confirm('更改门店，将清除已录入的单报明细，确定吗?\n', {
|
|
title: '操作提示',
|
|
btn: ['是', '否'],
|
|
closeBtn: 0,
|
|
yes: function() {
|
|
default_store_id = store_id;
|
|
reset();
|
|
layer.closeAll()
|
|
},
|
|
btn2: function() {
|
|
|
|
}
|
|
});
|
|
}else{
|
|
default_store_id = store_id;
|
|
}
|
|
});
|
|
|
|
form.on('submit(save)', function(data){
|
|
var field = data.field;
|
|
var stock_json = [];
|
|
var check_return = true;
|
|
if($('.stock-tr').length <= 0){
|
|
check_return = false;
|
|
layer.msg('请选择产品');
|
|
return false;
|
|
}
|
|
|
|
$('.stock-tr').each(function(){
|
|
var obj = $(this);
|
|
|
|
var goods_num = obj.find('input[name=goods_num]').val() || 0;
|
|
var goods_name = obj.find('.goods-name').text() || '';
|
|
var goods_sku_id = obj.find('input[name=goods_sku_id]').val() || 0;
|
|
|
|
if(goods_num <= 0){
|
|
check_return = false;
|
|
layer.msg('商品:'+goods_name+'入库数量不能为空');
|
|
return false;
|
|
}
|
|
|
|
stock_json.push({goods_num, goods_sku_id});
|
|
});
|
|
|
|
if(!check_return) return false;
|
|
if(repeat_flag) return false;
|
|
repeat_flag = true;
|
|
$.ajax({
|
|
type : 'post',
|
|
dataType: 'JSON',
|
|
url : ns.url("stock://shop/stock/addcheck"),
|
|
async : true,
|
|
data : {stock_json:JSON.stringify(stock_json),store_id:default_store_id},
|
|
success : function(res) {
|
|
if (res.code >= 0) {
|
|
layer.confirm('添加成功', {
|
|
title: '操作提示',
|
|
btn: ['返回列表', '继续入库'],
|
|
closeBtn: 0,
|
|
yes: function() {
|
|
location.href = ns.url("stock://shop/stock/check");
|
|
},
|
|
btn2: function() {
|
|
location.href = ns.url("stock://shop/stock/addcheck");
|
|
}
|
|
});
|
|
} else {
|
|
repeat_flag = false;
|
|
layer.msg(res.message);
|
|
}
|
|
return false
|
|
}
|
|
})
|
|
});
|
|
|
|
});
|
|
|
|
function back() {
|
|
location.href = ns.url("stock://shop/stock/check")
|
|
}
|
|
|
|
function autocomplete(text,callback){
|
|
$.ajax({
|
|
url: ns.url("stock://shop/stock/getskulist"),
|
|
data: {search:text,store_id:default_store_id},
|
|
dataType: 'JSON',
|
|
type: 'POST',
|
|
success: function(res) {
|
|
//根据写入的数据来查询相似的数据
|
|
$('.stock-autocomplete-list ul').html('');
|
|
temp_list = {};
|
|
if(res.data.length > 0){
|
|
$(".stock-autocomplete-list").show();
|
|
}else{
|
|
$(".stock-autocomplete-list").hide();
|
|
}
|
|
$.each(res.data, function(index, value){
|
|
temp_list[value.sku_id] = value;
|
|
$('.stock-autocomplete-list ul').append('<li data-sku_id = "'+value.sku_id+'">'+value.sku_name+' <span class="stock-sku-no">'+value.sku_no+'</span></li>');
|
|
});
|
|
|
|
$('.stock-autocomplete-list ul li').hover(function(){
|
|
$(".stock-autocomplete-list ul li").removeClass('stock-li-hover');
|
|
$(this).addClass('stock-li-hover');
|
|
});
|
|
|
|
$('.stock-autocomplete-list ul li').click(function(){
|
|
var sku_id = $(this).data('sku_id');
|
|
var item = temp_list[sku_id];
|
|
$(".stock-autocomplete-list").hide();
|
|
$('.stock-search').val('');
|
|
var temp_item = {};
|
|
|
|
var temp_one_item = stock_data[sku_id];
|
|
if(ns.checkIsNotNull(temp_one_item)){
|
|
// stock_data[sku_id]['goods_num'] += 1;
|
|
}else{
|
|
item.goods_sku_id = sku_id;
|
|
temp_item[sku_id] = item;
|
|
fetch(temp_item);
|
|
}
|
|
});
|
|
|
|
if(callback) callback();
|
|
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
$(function(){
|
|
|
|
$(".stock-search").focus(function(event){
|
|
if(!checkStore()){
|
|
return false;
|
|
}
|
|
autocomplete($(this).val());
|
|
if(ns.checkIsNotNull(temp_list)){
|
|
$(".stock-autocomplete-list").show();
|
|
}
|
|
event.stopPropagation();
|
|
return false;
|
|
});
|
|
$(".stock-search").click(function(event){
|
|
if(!checkStore()){
|
|
return false;
|
|
}
|
|
autocomplete($(this).val());
|
|
if(ns.checkIsNotNull(temp_list)){
|
|
$(".stock-autocomplete-list").show();
|
|
}
|
|
event.stopPropagation();
|
|
return false;
|
|
});
|
|
$("body").on('keyup', '.stock-search', function(){
|
|
autocomplete($(this).val());
|
|
});
|
|
|
|
$('body').click(function(){
|
|
$(".stock-autocomplete-list").hide();
|
|
})
|
|
|
|
});
|
|
|
|
//选择自动补全列表
|
|
function autocompleteSelect(){
|
|
//定位当前选中的sku记录
|
|
}
|
|
|
|
//数据渲染（任何来源）
|
|
function fetch(data){
|
|
stock_data = $.extend(stock_data, data);
|
|
//重新渲染
|
|
var template = $("#stock_goods_info").html();
|
|
$('.stock-body tr').not('.stock-search-line').remove();
|
|
|
|
if(ns.checkIsNotNull(stock_data)){
|
|
$.each(stock_data, function (index,value){
|
|
value.key = index;
|
|
laytpl(template).render(value, function (html) {
|
|
$('.stock-body').append(html);
|
|
form.render();
|
|
})
|
|
})
|
|
}else{
|
|
$('.stock-body').append('<tr> <td colspan="8" class="empty-data">无数据</td> </tr>');
|
|
}
|
|
form.render();
|
|
syncData();
|
|
}
|
|
|
|
function dataChange(obj){
|
|
syncData();
|
|
}
|
|
|
|
function syncData(){
|
|
var count_num = 0,goods_money = 0;
|
|
var kinds_data = [];
|
|
var up_num = 0;
|
|
var down_num = 0;
|
|
var same_num = 0;
|
|
$('.stock-tr').each(function(){
|
|
var obj = $(this);
|
|
var key = obj.data('key');
|
|
|
|
var goods_sku_id = obj.find('input[name=goods_sku_id]').val() || 0;
|
|
|
|
var begin_goods_num = obj.find('input[name=goods_num]').val();
|
|
var stock = obj.find('input[name=stock]').val();
|
|
var goods_num = parseInt(begin_goods_num) || 0;
|
|
|
|
if(kinds_data.indexOf(goods_sku_id) == -1){
|
|
kinds_data.push(goods_sku_id)
|
|
}
|
|
//重新采集数据
|
|
stock_data[key].goods_num = goods_num;//库存数量
|
|
|
|
count_num += goods_num;
|
|
|
|
//比对盘盈盘亏
|
|
var item_stock = stock;
|
|
if(item_stock > goods_num){
|
|
//盘亏
|
|
down_num++;
|
|
}else{
|
|
if(item_stock == goods_num){
|
|
same_num++;
|
|
}else{
|
|
up_num++;
|
|
}
|
|
}
|
|
if(begin_goods_num !== ''){
|
|
var compare_num = goods_num - item_stock;
|
|
|
|
}else{
|
|
compare_num = 0;
|
|
}
|
|
obj.find('.compare-num').text(compare_num);
|
|
});
|
|
|
|
$(".kinds-num").text(parseInt(kinds_data.length));
|
|
$(".goods-up").text(parseInt(up_num));
|
|
$(".goods-down").text(parseInt(down_num));
|
|
$(".goods-same").text(parseInt(same_num));
|
|
}
|
|
|
|
function reset(){
|
|
stock_data = {};
|
|
temp_list = {};
|
|
fetch();
|
|
syncData();
|
|
}
|
|
function checkStore(){
|
|
if(default_store_id == 0){
|
|
layer.msg('请先选择门店');
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function delTr(obj){
|
|
var parent = $(obj).parents('.stock-tr');
|
|
var key = parent.data('key');//唯一值 (sku_id不承担)
|
|
parent.remove();
|
|
delete stock_data[key];
|
|
syncData();
|
|
}
|
|
</script>
|
|
{/block} |