mashangyoujiu/Application/Retail/View/GoodsLabel/unboundGoods.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>商品标签</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>

    <style>
        .goods_title {
            font-size: 14px;
            box-sizing: border-box;
            padding: 10px 20px;
        }

        .goods_title_inner {
            width: 100%;
            height: 100%;
            border-left: 2px solid #232b42;
            box-sizing: border-box;
            padding-left: 10px;
        }

        .goods_edit {
            box-sizing: border-box;
            padding: 10px 20px 10px 30px;
            display: flex;
            align-items: center;
        }

        .goods_edit_select {
            width: 230px;
            height: 35px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            background: white;
            margin-right: 20px;
            padding-left: 5px;
        }

        .goods_edit_select > select {
            display: block;
            border: none;
            outline: none;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 0 10px;
            border-radius: 4px;
        }
        .layui-btn-quxiao {
            background-color: #bbb;
        }
    </style>
</head>

<body>
<div class="goodsBox">
    <div class="goods_edit">
        <div class="goods_edit_select">
            <select name="goods_class_id" id="good_class_id">
                <option value="0">选择分类查询商品</option>
                <volist name="cate" id="vo">
                    <option value="{$vo.id}">{$vo.class_name}</option>
                </volist>
            </select>
        </div>
        <button class="layui-btn layui-btn-normal" id="searchBtn">搜索</button>
    </div>
    <div class="goods_table" style="margin-left: 30px">
        <table class="layui-hide" id="test" lay-filter="demo"></table>
        <div style="width: 100%;text-align: center" class="demoTable">
            <form id="select_serach">
                <div class="goods_edit_select">
                    <select name="label_id" id="label_id">
                        <option value="0">选择标签(批量绑定标签)</option>
                        <volist name="list" id="vo">
                            <option value="{$vo.id}">{$vo.label_name}</option>
                        </volist>
                    </select>
                </div>
            </form>
            <button type="button" class="layui-btn bind" data-type="getCheckData">绑定</button>
            <button type="button" class="layui-btn layui-btn-quxiao" id="cancel">取消</button>
        </div>
    </div>
</div>
</body>
<script src="__PUBLIC__/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
<script type="text/javascript">
    var rest = function () {
        document.getElementById("create_cate").reset();
    }
    layui.use('table', function () {
        var table = layui.table;
        //监听表格复选框选择

        //展示已知数据
        table.render({
            elem: '#test',
            url: "{:U('GoodsLabel/goodsList')}",
            width: 699,
            height:'full-185',
            cols: [
                [
                {
                    type: 'checkbox'
                },{
                    field:'key',
                    title:'序号'
                },{
                    field: 'goods_name',
                    title: '商品名称名称',
                }, {
                    field: 'goods_class_name',
                    title: '分类名称'
                }, {
                    field: 'statusName',
                    title: '状态'
                }
                ]
            ],
            id: 'couponReload',
            // page: {
            //     layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            // }, //是否开启分页
            page:true
        });

        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('couponReload')
                    ,data = checkStatus.data;
                // console.log(data[0].id);return
                var ids = '';
                for (var i=0;i<data.length;i++){
                    ids += data[i].id+','
                }
                if (ids==''){
                    layer.msg("请选择要绑定商品",{time:2000});
                    return;
                }else {
                    var label_id = $("#label_id").val();
                    $.ajax({
                        url:"{:U('GoodsLabel/bindGoods')}",
                        type:"POST",
                        data:{
                            ids:ids,
                            labelid:label_id
                        },
                        success:function (res) {
                            if (res.status==1){
                                top.layer.msg(res.msg,{time:2000})
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                            }
                        }
                    })
                }
            }
        };
        $(".bind").click(function () {
            var label_id = $("#label_id").val();
            if (label_id==0){
                layer.tips("请先选择标签","#label_id")
                return
            } else {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            }
        })
        $(".layui-btn-quxiao").click(function () {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        })

        $("#searchBtn").click(function () {
            var keyword = $("#good_class_id").val();
            table.reload('couponReload', {
               where: {
                    keyword: keyword
                }
            });
        })

    })
</script>

</html>