mashangyoujiu/Application/Retail/View/Attributes/managerGoods.html

<!doctype html>
<html>
<!--[1.0.45]-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品SKU管理</title>

    <link rel="stylesheet" type="text/css" href="__PUBLIC__/layui-v2.4.3/layui/css/layui.css"/>
    <style>
        .box {
            margin: 10px 20px 0 20px;
        }

        .layui-btn-danger {
            background: white !important;
            color: #999 !important;
            border: 1px solid #CCCCCC !important;
        }

        .layui-table-tool {
            display: none;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="pxll_attrBox">
        <div class="pxll_addAttrGoods">
            <button type="button" class="layui-btn" id="createSku">增加商品SKU</button>
        </div>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData" id="getCheckData">获取选中行数据</button>
            </div>
        </script>

        <div class="pxll_checkBox" style="display: none">
            <div class="layui-form" id="createBox">
                <table class="layui-table" id="pxll_table">
                    <colgroup>
                        <col width="150">
                        <col width="300">
                        <col>
                        <col width="150">
                    </colgroup>
                    <thead>
                    <tr>
                        <th></th>
                        <th>规格属性名称</th>
                        <th>属性值</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="attrData">
                    </tbody>
                </table>
            </div>
        </div>

        <div id="table_box">
            <table class="layui-hide" id="attributes" lay-filter="demo"></table>
        </div>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="conserve">保存</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>商品规格</legend>
    </fieldset>
    <div>
        <button class="layui-btn" type="button" id="batchSet">批量保存</button>
    </div>
    <div class="pxll_attrGoods">
        <form id="formSet">
            <table class="layui-hide" id="attrGoods" lay-filter="demo1"></table>
        </form>
    </div>
</div>
</body>
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/layui-v2.4.3/layui/layui.js"></script>
<script>
    var arr = [];//空数组，盛放选中的规格属性
    var goodsId = {$id};//商品id
    var store_status = {$good_state['store_mem_status']};
    var shop_status = {$good_state['shop_mem_status']};
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table,
            layer = layui.layer;

        table.render({
            elem: '#attributes'
            , url: "{:U('Attributes/attributesList')}"
            , toolbar: '#toolbarDemo'
            , cols: [
                [
                    {type: 'radio'}
                    , {field: 'id', title: 'ID', sort: true}
                    , {field: 'name', title: '属性/规格名称'}
                    , {field: 'content', title: '属性/规格值', sort: true}

                ]
            ]
            , id: "loadTable"
            , page: true
        });


        $("#table_box").on("click", ".laytable-cell-radio", function () {
            $("#getCheckData").click()
            $(".pxll_checkBox").show();
        })

        //头工具栏事件
        table.on('toolbar(demo)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;  //获取选中行数据
                    // console.log(data[0].name)
                    if (arr.length >= 2) {
                        layer.msg("最多只能选择两条", {time: 2000})
                    } else {
                        if (arr.length == 1) {
                            if (arr[0].id == data[0].id) {
                                layer.msg("请勿重复选择")
                                return
                            } else {
                                var str = `<tr>
                        <td>已选择</td>
                        <td>${data[0].name}</td>
                        <td>${data[0].content}</td>
                        <td>
                            <button type="button" class="layui-btn layui-btn-danger" data-id="${data[0].id}">移除</button>
                        </td>
                    </tr>`;

                                $("#attrData").append(str);
                                arr.push(data[0]);
                            }
                        }
                        else {
                            var str = `<tr>
                        <td>已选择</td>
                        <td>${data[0].name}</td>
                        <td>${data[0].content}</td>
                        <td>
                            <button type="button" class="layui-btn layui-btn-danger" data-id="${data[0].id}">移除</button>
                        </td>
                    </tr>`;

                            $("#attrData").append(str);
                            arr.push(data[0]);
                        }
                    }
                    break;
            };
        });

        $("#createBox").on("click", ".layui-btn-danger", function (e) {
            var id = $(this).attr("data-id");
            $(this).parents("tr").remove();

            for (var i = 0; i < arr.length; i++) {
                if (arr[i].id == id) {
                    arr.splice(i, 1);
                }
            }
            var tab = document.getElementById("pxll_table");
            //表格行数
            var rows = tab.rows.length
            if (rows == 1) {
                $(".pxll_checkBox").hide();
            }
        })

        /**
         *
         */
        $("#createSku").click(function () {
            var arrLenth = arr.length;
            if (arrLenth <= 0) {
                layer.msg("请选择规格属性");
                return
            } else {
                layer.confirm("确认要添加新的规格属性吗", {title: "警告"}, function (index) {
                    var attrId = '';
                    for (var j = 0; j < arr.length; j++) {
                        attrId += arr[j].id + ',';
                    }

                    $.ajax({
                        url: "{:U('Attributes/managerGoods')}",
                        type: "POST",
                        data: {
                            goodsId: goodsId,
                            attrId: attrId
                        },
                        success: function (res) {
                            if (res.status == 1) {
                                table.reload("attrTable")
                                layer.close(index);
                            }
                        }
                    })
                })
            }
        })

        /**
         * 规格商品
         */
        // 开启门店、商城会员价
        if (store_status == 1 && shop_status == 1) {
            table.render({
                elem: '#attrGoods',
                url: "{:U('Attributes/attrGoods')}",
                width: 1200,
                where: {
                    id: {$id}
                },
                cols: [
                    [
                        {field: 'key', width: 80, title: '序号'},
                        {field: 'sku', title: '规格/属性'},
                        {field: 'goods_price', title: '售价', sort: true, edit: 'text',},
                        {field: 'num', title: '库存', sort: true, edit: 'text',},
                        {field: 'shop_mem_price', title: '商城会员价', sort: true, edit: 'text',},
                        {field: 'store_mem_price', title: '门店会员价', sort: true, edit: 'text',},
                        {field: '', title: '操作', width: 120, toolbar: '#barDemo'},
                    ]
                ],
                id: "attrTable",
                page: false
            });
        } else if (store_status == 1 && shop_status == 2) {      //开启商城会员价
            table.render({
                elem: '#attrGoods',
                url: "{:U('Attributes/attrGoods')}",
                width: 1200,
                where: {
                    id: {$id}
                },
                cols: [
                    [
                        {field: 'key', width: 80, title: '序号'},
                        {field: 'sku', title: '规格/属性'},
                        {field: 'goods_price', title: '售价', sort: true, edit: 'text',},
                        {field: 'num', title: '库存', sort: true, edit: 'text',},
                        {field: 'store_mem_price', title: '门店会员价', sort: true, edit: 'text',},
                        {field: '', title: '操作', width: 120, toolbar: '#barDemo'},
                    ]
                ],
                id: "attrTable",
                page: false
            });
        } else if (store_status == 2 && shop_status == 1) {          // 开启门店会员价
            table.render({
                elem: '#attrGoods',
                url: "{:U('Attributes/attrGoods')}",
                width: 1200,
                where: {
                    id: {$id}
                },
                cols: [
                    [
                        {field: 'key', width: 80, title: '序号'},
                        {field: 'sku', title: '规格/属性'},
                        {field: 'goods_price', title: '售价', sort: true, edit: 'text',},
                        {field: 'num', title: '库存', sort: true, edit: 'text',},
                        {field: 'shop_mem_price', title: '商城会员价', sort: true, edit: 'text',},
                        {field: '', title: '操作', width: 120, toolbar: '#barDemo'},
                    ]
                ],
                id: "attrTable",
                page: false
            });
        } else if (store_status == 2 && shop_status == 2) {              // 未开启 商城、门店会员价
            table.render({
                elem: '#attrGoods',
                url: "{:U('Attributes/attrGoods')}",
                width: 1200,
                where: {
                    id: {$id}
                },
                cols: [
                    [
                        {field: 'key', width: 80, title: '序号'},
                        {field: 'sku', title: '规格/属性'},
                        {field: 'goods_price', title: '售价', sort: true, edit: 'text',},
                        {field: 'num', title: '库存', sort: true, edit: 'text',},
                        {field: '', title: '操作', width: 120, toolbar: '#barDemo'},
                    ]
                ],
                id: "attrTable",
                page: false
            });
        }
        //
        table.on('tool(demo1)', function (obj) {
            var data = obj.data;
            // 删除
            if (obj.event === 'del') {
                var id = data.id;
                layer.confirm("确认要删除该规格吗?", {title: "警告", icon: 7}, function (index) {
                    $.ajax({
                        url: "{:U('Attributes/attrGoodsDelete')}",
                        type: "POST",
                        data: {id: id, goodsId: goodsId},
                        success: function (res) {
                            if (res.status == 1) {
                                layer.msg(res.msg);
                                obj.del();
                                layer.close(index);
                            } else {
                                layer.msg(res.msg)
                            }
                        }
                    })
                })
            } else if (obj.event === 'conserve') {         // 保存 单条数据
                var goods_price = data.goods_price;
                if (!goods_price || goods_price <= 0) {
                    layer.msg('请设置合理的商品价格');
                    return;
                }
                var shop_mem_price = parseFloat(data.shop_mem_price);
                if (shop_mem_price) {
                    if (shop_mem_price < 0) {
                        layer.msg('请设置合理的商城会员价');
                        return;
                    }
                }
                var store_mem_price = parseFloat(data.store_mem_price);
                if (store_mem_price) {
                    if (store_mem_price < 0) {
                        layer.msg('请设置合理的店内会员价');
                        return;
                    }
                }
                var num = data.num;
                if (num == '') {
                    layer.msg('请填写库存');
                    return;
                }

                $.ajax({
                    url: "{:U('Attributes/conserve')}",
                    type: "POST",
                    data: {
                        id: data.id,
                        goods_price: goods_price,
                        shop_mem_price: shop_mem_price,
                        store_mem_price: store_mem_price,
                        num: num,
                        goodsId: goodsId
                    },
                    success: function (res) {
                        console.log(res);
                        if (res.status == 1) {
                            layer.msg(res.msg, {icon: 1, time: 800}, function () {
                                table.reload('attrTable')
                            });
                        } else {
                            layer.msg(res.msg, {icon: 2, time: 800});
                        }
                    }
                })
            }
        })
        // 批量保存
        $("#batchSet").click(function () {
            var table_goods = table.cache.attrTable;
            for (var i = 0; i < table_goods.length; i++) {
                if (table_goods[i].goods_price <= 0) {
                    layer.msg('请设置合理的商品价格');
                    return;
                }
                var shop_mem_price = parseFloat(table_goods[i].shop_mem_price);
                if (shop_mem_price) {
                    if (shop_mem_price < 0) {
                        layer.msg('请设置合理的商城会员价');
                        return;
                    }
                }
                var store_mem_price = parseFloat(table_goods[i].store_mem_price);
                if (store_mem_price) {
                    if (store_mem_price < 0) {
                        layer.msg('请设置合理的店内会员价');
                        return;
                    }
                }
            }
            $.ajax({
                url: "{:U('batchSet')}",
                type: "post",
                data: {table_goods: table_goods, goodsId: goodsId},
                success: function (res) {
                    if (res.status == 1) {
                        layer.msg(res.msg, {icon: 1, time: 1200}, function () {
                            table.reload('attrTable');
                        })
                    } else {
                        layer.msg(res.msg, {icon: 2, time: 1200})
                    }
                }
            });
        });
    });
</script>
</html>