mashangyoujiu/Application/Retail/View/Statistics/goods_repertory.html

<!DOCTYPE html>
<html>
<!--[1.1.7]-->
<head>
    <meta charset="UTF-8">
    <title>库存统计</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/layui-v2.4.3/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/goodsList.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
    <style>
        .goods_repertory {
            display: flex;
            padding: 15px;
        }
        .layui-col-md{
            width: 19%;
        }
        .layui-card{
            border: 1px solid #c2ccd1;
        }
        .goods_edit {
            box-sizing: border-box;
            padding: 3px 0px 8px 47px;
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
<div class="goodsBox">
    <form id="select_serach" class="layui-form" style="margin-top: 15px;">
        <div class="goods_edit">
            <div class="goods_edit_input">
                <input type="text" name="text" id="keyword" value="" placeholder="品名/货号/条码"/>
            </div>
            <div class="sale_screen_hr">
                <div class="layui-input-inline">
                    <select name="supplier" id="supplier">
                        <option value="">选择供货商</option>
                        <volist name="supplier" id="vo">
                            <option value="{$vo['id']}">{$vo['supplier_name']}</option>
                        </volist>
                    </select>
                </div>
                <div class="layui-input-inline" style="margin-left: 20px;">
                    <select name="goods_brand" id="goods_brand">
                        <option value="">选择品牌</option>
                        <volist name="goods_brand" id="vo">
                            <option value="{$vo['id']}">{$vo['name']}</option>
                        </volist>
                    </select>
                </div>
            </div>
        </div>
        <div class="goods_edit">
            <div class="layui-input-inline" >
                <select name="person1" id="person1" lay-filter="person1">
                    <option value="">选择一级分类</option>
                    <volist name="goods_class" id="vo">
                        <option value="{$vo['id']}">{$vo['class_name']}</option>
                    </volist>
                </select>
            </div>
            <div class="layui-input-inline class2" style="display: none;margin-left: 5px">
                <select name="person2" id="person2" lay-filter="person2">
                    <option value="">选择二级分类</option>
                </select>
            </div>
            <div class="layui-input-inline class3" style="display: none;margin-left: 5px">
                <select name="person3" id="person3" lay-filter="person3">
                    <option value="">选择三级分类</option>
                </select>
            </div>
            <div class="goods_edit_add" id="serach" style="margin-left: 20px;">搜索</div>
        </div>
    </form>
    <div class="goods_table">
        <table class="layui-hide" id="test" lay-filter="demo"></table>
        <script type="text/html" id="barDemo">
            {{# if(d.attribute == 2){ }}
            <a class="layui-btn layui-btn-xs" lay-event="sku_detail">sku详情</a>
            {{# } }}
        </script>
    </div>
</div>
<div id="goods_sku" style="display: none;">
    <div class="layui-row layui-col-space8 goods_repertory" style="padding: 5px;">
        <div class="layui-col-md">
            <div class="layui-card">
                <div class="layui-card-header">规格总数</div>
                <div class="layui-card-body sku_count"></div>
            </div>
        </div>
        <div class="layui-col-md">
            <div class="layui-card">
                <div class="layui-card-header">总库存</div>
                <div class="layui-card-body sku_sum_repertory"></div>
            </div>
        </div>
        <div class="layui-col-md">
            <div class="layui-card">
                <div class="layui-card-header">总进价</div>
                <div class="layui-card-body sku_all_purch_price"></div>
            </div>
        </div>
        <div class="layui-col-md">
            <div class="layui-card">
                <div class="layui-card-header">店内预售总额</div>
                <div class="layui-card-body sku_store_sell_all_money"></div>
            </div>
        </div>
        <div class="layui-col-md">
            <div class="layui-card">
                <div class="layui-card-header">商城预售总额</div>
                <div class="layui-card-body sku_xcx_sell_all_money"></div>
            </div>
        </div>
    </div>

    <table class="layui-hide" id="sku_test" lay-filter="sku_demo"></table>
</div>
</body>
<script src="__PUBLIC__/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/layui-v2.4.3/layui/layui.js"></script>
<script type="text/javascript">
    function renderForm() {     // 刷新表单
        layui.use('form', function () {
            var form = layui.form;      //高版本建议把括号去掉，有的低版本，需要加()
            form.render();
        });
    }
    var storeid = {:I('get.storeid')};
    layui.use(['table', 'form', 'upload'], function () {
        var table = layui.table;
        var form = layui.form;
        //展示已知数据
        table.render({
            elem: '#test',
            url: "{:U('get_goods_repertory')}",
            where: {storeid:storeid},
            toolbar: true,
            loading: true,
            cols: [
                [{
                    field: 'index',
                    title: '序号',
                    align: 'center',
                    width: 60,
                }, {
                    field: 'goods_name',
                    title: '商品名',
                    align: 'center',
                }, {
                    field: 'good_number',
                    title: '货号',
                    align: 'center',
                }, {
                    field: 'goods_code',
                    title: '条码',
                    align: 'center',
                }, {
                    field: 'class',
                    title: '分类',
                    align: 'center',
                }, {
                    field: 'supplier',
                    title: '供货商',
                    align: 'center',
                }, {
                    field: 'brand',
                    title: '品牌',
                    align: 'center',
                }, {
                    field: 'goods_num',
                    title: '库存',
                    align: 'center',
                }, {
                    field: 'purch_price',
                    title: '进价',
                    align: 'center',
                }, {
                    field: 'all_purch_price',
                    title: '进价总额',
                    align: 'center',
                }, {
                    field: 'retail_price',
                    title: '店内售价',
                    align: 'center',
                }, {
                    field: 'all_retail_price',
                    title: '店内预售总额',
                    align: 'center',
                },{
                    field: 'online_price',
                    title: '商城售价',
                    align: 'center',
                }, {
                    field: 'all_online_price',
                    title: '商城预售总额',
                    align: 'center',
                }, {
                    fixed: 'right',
                    title: '规格库存',
                    align: 'center',
                    toolbar: '#barDemo',
                    width: 100
                }]
            ],
            page: true,
            id: 'goods_repertory',
        });
        var class1_val = '';
        var class2_val = '';
        form.on('select(person1)', function (data) {                // 选择一级分类
            if (class1_val == data.value) {
                return;
            }
            class1_val = data.value;
            if (data.value == '') {     // 隐藏分类2 3
                $('.class2').hide();
                $('.class3').hide();
                renderForm();
            } else {
                $('.class3').hide();
                $('#person2').html("<option value=''>选择二级分类</option>");
                $.post("{:U('Sale/getChildClass')}", {
                    id: data.value,
                    type: 2
                }, function (res) {
                    if (res.status == 1) {
                        for (var i = 0; i < res.data.length; i++) {
                            var child = `<option value="${res.data[i].id}">${res.data[i].class_name}</option>`;
                            $('#person2').append(child);
                        }
                        $('.class2').fadeIn();
                        $('#person3').html("<option value=''>选择三级分类</option>");
                        renderForm();
                    } else {
                        $('.class2').hide();
                        renderForm();
                    }
                })
            }
        });
        form.on('select(person2)', function (data) {            // 选择二级分类
            if (class2_val == data.value) {
                return;
            }
            class2_val = data.value;
            if (data.value == '') {
                $('.class3').hide();
                $('#person3>option').remove();
                $('#person3').append("<option value=''>选择三级分类</option>");
                renderForm();
            } else {
                $('#person3').html("<option value=''>选择三级分类</option>");
                $.post("{:U('Sale/getChildClass')}", {
                    id: data.value,
                    type: 3
                }, function (res) {
                    if (res.status == 1) {
                        for (var i = 0; i < res.data.length; i++) {
                            var child = `<option value="${res.data[i].id}">${res.data[i].class_name}</option>`;
                            $('#person3').append(child);
                        }
                        $('.class3').fadeIn();
                        renderForm();
                    } else {
                        $('.class3').hide();
                        renderForm();
                    }
                })
            }
        });
        //商品搜索
        $("#serach").click(function () {
            //执行重载
            table.reload('goods_repertory', {
                page: {
                    curr: 1     //  重新从第 1 页开始
                }
                , where: {
                    keyword: $('#keyword').val(),
                    supplier_id: $('#supplier').val(),
                    goods_brand_id: $('#goods_brand').val(),
                    person1: $('#person1').val(),
                    person2: $('#person2').val(),
                    person3: $('#person3').val()
                }
            });
        });
        // 操作
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'sku_detail') {    // 查看sku详情
                table.render({
                    elem: '#sku_test',
                    where:{goods_id:data.id,storeid:storeid},
                    url: "{:U('get_goods_sku_repertory')}",
                    cols: [
                        [{
                            field: 'index',
                            title: '序号',
                            align: 'center',
                            width: 60,
                        },  {
                            field: 'sku_name',
                            title: '规格',
                            align: 'center',
                        }, {
                            field: 'goods_num',
                            title: '库存',
                            align: 'center',
                        }, {
                            field: 'sku_num',
                            title: '对应数量',
                            align: 'center',
                        }, {
                            field: 'purch_price',
                            title: '进价',
                            align: 'center',
                        }, {
                            field: 'all_purch_price',
                            title: '总进价',
                            align: 'center',
                        }, {
                            field: 'retail_price',
                            title: '店内售价',
                            align: 'center',
                        }, {
                            field: 'all_retail_price',
                            title: '店内预售总额',
                            align: 'center',
                        }, {
                            field: 'online_price',
                            title: '商城售价',
                            align: 'center',
                        }, {
                            field: 'all_online_price',
                            title: '商城预售总额',
                            align: 'center',
                        }]
                    ],
                    page: false,
                    done: function(res, curr, count){
                        $(".sku_count").html(count);                    // 商品总数
                        $(".sku_sum_repertory").text(res.sum_repertory);        // 商品总库存
                        $(".sku_all_purch_price").text(res.all_purch_price);          // 总进价
                        $(".sku_store_sell_all_money").text(res.store_sell_all_money);          // 店内售价总和
                        $(".sku_xcx_sell_all_money").text(res.xcx_sell_all_money);              // 小程序售价总和
                    }
                });
                layer.open({        // 弹框
                    type: 1,
                    title: '商品sku详情',
                    area: ["50%", '100%'],
                    offset: 'r',
                    shadeClose: true,
                    skin: 'layui-layer-molv',
                    content: $("#goods_sku"),
                });
            }
        });
    });
</script>
</html>