jiaweiqi
/
cosmetics_shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品明细</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <style type="text/css">
        /*您可以将下列样式写入自己的样式表中*/
        /*layui 元素样式改写*/
        .layui-btn-sm {
            line-height: normal;
            font-size: 12.5px;
        }

        .layui-table-view .layui-table-body {
            min-height: 256px;
        }

        .layui-table-cell .layui-input.layui-unselect {
            height: 30px;
            line-height: 30px;
        }

        /*设置 layui 表格中单元格内容溢出可见样式*/
        .table-overlay .layui-table-view,
        .table-overlay .layui-table-box,
        .table-overlay .layui-table-body {
            overflow: visible;
        }

        .table-overlay .layui-table-cell {
            height: auto;
            overflow: visible;
        }

        .imgStyle {
            padding-left: 10px;
            width: 80px;
            height: 50px;
        }
        .layui-table-cell {
            font-size: 14px;
            padding: 0 5px;
            height: auto;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
            word-break: break-all;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-col-md12">
        <div class="layui-card">
            <form id='fm' class="layui-form" action="" lay-filter="component-form-element">
                <button class="layui-btn" id="id_save" lay-submit lay-filter="component-form-element"
                        style="display: none">保存
                </button>
            </form>
        </div>
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-xs8" style="text-align: left">
                        <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn_add">
                            <i class="layui-icon layui-icon-add "></i> 添加
                        </button>
                    </div>
                </div>
                <div style="height: 5px"></div>
                <div id="tableRes" class="table-overlay">
                    <table id="dataTable" lay-filter="dataTable" class="layui-hide"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../layuiadmin/layui/layui.js"></script>
<script type="text/html" id="statusTpl">
    <a lay-event="type_status"></a>
    <input type="checkbox" name="status" lay-skin="switch" lay-text="上架|下架" lay-filter="status"
           value="{{ d.status }}" {{ d.status == "1" ? 'checked' : "" }} >
</script>
<script type="text/html" id="paramImage">
    <a lay-event="type_button"></a>
    <a class="layui-btn layui-btn-xs" id="param_img{{ d.LAY_TABLE_INDEX }}" lay-event="param_img_event">上传</a>
    {{# if(d.images_url){ }}
    <img src="{{ d.images_url }}" class="imgStyle"/>
    {{# } }}
</script>
<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'upload', 'layer', 'form',], function () {
        var $ = layui.$
            , admin = layui.admin
            , upload = layui.upload
            , form = layui.form
            , table = layui.table
            , layer = layui.layer;

        var parameter1_list = [];
        var parameter2_list = [];
        var id = layui.view.getParameterByName('id');
        var editdata = JSON.parse(JSON.stringify(parent.layui.table.editdata)); // 框架有Bug所以这么转换
        var _data_index = 0
        var parameter1_text = ""
        var parameter2_text = ""
        if (editdata.parameter_text) {
            var parameter_text = editdata.parameter_text.split(',')
            var parameter_len = parameter_text.length
            if (parameter_len >= 1) {
                parameter1_text = parameter_text[0]
            }
            if (parameter_len === 2) {
                parameter2_text = parameter_text[1]
            }
        }

        window.viewObj = {
            renderSelectOptions: function (data, settings) {
                settings = settings || {};
                var valueField = settings.valueField || 'value',
                    textField = settings.textField || 'text',
                    selectedValue = settings.selectedValue || "";
                var html = [];
                for (var i = 0, item; i < data.length; i++) {
                    item = data[i];
                    html.push('<option value="');
                    html.push(item[valueField]);
                    html.push('"');
                    if (selectedValue && item[valueField] == selectedValue) {
                        html.push(' selected="selected"');
                    }
                    html.push('>');
                    html.push(item[textField]);
                    html.push('</option>');
                }
                return html.join('');
            }
        };

        var permissions = layui.data(layui.setter.tableName)['permissions'];
        var editStock = permissions.indexOf('commodity.edit_commodity_stock') > -1 ? true : false;
        var editPrice = permissions.indexOf('commodity.edit_commodity_price') > -1 ? true : false;
        var tbWidth = $("#tableRes").width();
        var layTableId = "layTable";
        var tableIns = table.render({
            elem: '#dataTable',
            id: layTableId,
            data: [],
            width: tbWidth,
            page: false,
            limit: 100,
            loading: true,
            even: true, //不开启隔行背景
            cols: [[
                {title: '序号', type: 'numbers'},
                {field: 'price', title: '销售价格', edit: editPrice ? 'text' : '', width: '10%',},
                {field: 'stock', title: '库存', edit: editStock ? 'text' : '', width: '8%',},
                {field: 'no', title: '编号', edit: 'text', width: '10%',},
                {field: 'name', title: '过账名称', edit: 'text', width: '10%',},
                {
                    field: 'parameter1',
                    title: parameter1_text,
                    hide: parameter1_text ? false : true,
                    width: '15%',
                    templet: function (d) {
                        var options = viewObj.renderSelectOptions(parameter1_list, {
                            valueField: "id",
                            textField: "name",
                            selectedValue: d.parameter1
                        });
                        return '<a lay-event="type_parameter1"></a><select name="parameter1" lay-filter="parameter_filter"><option value="">请选择参数1</option>' + options + '</select>';
                    }
                },
                {
                    field: 'parameter2',
                    title: parameter2_text,
                    hide: parameter2_text ? false : true,
                    width: '15%',
                    templet: function (d) {
                        var options = viewObj.renderSelectOptions(parameter2_list, {
                            valueField: "id",
                            textField: "name",
                            selectedValue: d.parameter2
                        });
                        return '<a lay-event="type_parameter2"></a><select name="parameter2" lay-filter="parameter_filter"><option value="">请选择参数2</option>' + options + '</select>';
                    }
                },
                {field: 'status', title: '状态', templet: '#statusTpl', width: '10%',},
                {field: 'images_url', title: '明细图', templet: '#paramImage', width: '20%',},
                {
                    field: 'id', title: '操作', width: '10%',templet: function (d) {
                        if (d.id) {
                            return ''
                        } else {
                            return '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" lay-id="' + d.id + '"><i class="layui-icon layui-icon-delete"></i>删除</a>';
                        }
                    }
                }
            ]],
            done: function (data, date, total) {
                //重新绑定，upload方法
                bindTableToolbarFunction(total)
            }
        });

        function bindTableToolbarFunction(data_index) {
            for (var i = 0, item; i < data_index; i++) {
                upload.render({
                    elem: "#param_img" + i, // 和html中的param_img对应
                    auto: false,
                    choose: function (obj) {
                        obj.preview(
                            function (i, file, result) {
                                // 把数据索引给图片，便于后续的查找对应。
                                file.data_index = _data_index
                                var oldData = table.cache[layTableId];
                                $.extend(oldData[_data_index], {images_url: result, file: file});
                                tableIns.reload({
                                    data: oldData
                                });
                            }
                        )
                    },
                });
            }
        }

        admin.req({
            url: '/commodity/' + id + '/get_parameter/',
            done: function (res) {
                if (res.code === 0) {
                    parameter1_list = res.data.parameter1;
                    parameter2_list = res.data.parameter2;
                }
                else {
                    layer.msg('获取参数失败', {icon: 5});
                }
                admin.req({
                    url: '/commodity/' + id + '/get_details/',
                    done: function (res) {
                        if (res.code === 0) {
                            var rows = res.data;
                            var oldData = table.cache[layTableId];
                            for (var k in rows) {
                                oldData.push(
                                    {
                                        id: rows[k].id,
                                        price: rows[k].price,
                                        stock: rows[k].stock,
                                        no: rows[k].no,
                                        name: rows[k].name,
                                        status: rows[k].status,
                                        parameter1: rows[k].parameter1,
                                        parameter2: rows[k].parameter2,
                                        images_url: rows[k].images_url,
                                    }
                                )
                            }
                            tableIns.reload({
                                data: oldData
                            });
                        }
                        else
                            layer.msg('获取商品明细失败', {icon: 5});
                    }
                });
            }
        });
        var active = {
            removeItem: function (index) {
                var oldData = table.cache[layTableId];
                oldData.splice(index, 1);    //删除一项
                tableIns.reload({
                    data: oldData
                });
            },
            onParameterChange: function (obj) {
                var oldData = table.cache[layTableId];
                $.extend(oldData[obj.data_index], obj);
                tableIns.reload({
                    data: oldData
                });
            },
        }
        //激活事件
        var activeByType = function (type, arg) {
            if (arguments.length === 2) {
                active[type] ? active[type].call(this, arg) : '';
            } else {
                active[type] ? active[type].call(this) : '';
            }
        }

        //注册按钮事件
        $('.layui-btn[data-type]').on('click', function () {
            var type = $(this).data('type');
            activeByType(type);
        });
        //监听select下拉选中事件
        form.on('select(parameter_filter)', function (data) {
            var elem = data.elem; //得到select原始DOM对象
            $(elem).prev("a[lay-event='type_parameter1']").trigger("click");
            $(elem).prev("a[lay-event='type_parameter2']").trigger("click");
        });

        //监听指定开关
        form.on('switch(status)', function (data) {
            var elem = data.elem; //得到select原始DOM对象
            $(elem).prev("a[lay-event='type_status']").trigger("click");
            //$(elem).html("lay-event='type_status2'").trigger("click");
        });

        //监听工具条
        table.on('tool(dataTable)', function (obj) {
            var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
            var data_index = tr.attr("data-index");
            switch (event) {
                case "type_parameter2":
                    var select = tr.find("select[name='parameter2']");
                    if (select) {
                        var selectedVal = select.val();
                        if (!selectedVal) {
                            layer.tips("请选择一个参数", select.next('.layui-form-select'), {tips: [3, '#FF5722']}); //吸附提示
                        }
                        $.extend(data, {'parameter2': selectedVal});
                        data.data_index = data_index
                        activeByType('onParameterChange', data);	//更新行记录对象
                    }
                    break;
                case "type_parameter1":
                    var select = tr.find("select[name='parameter1']");
                    if (select) {
                        var selectedVal = select.val();
                        if (!selectedVal) {
                            layer.tips("请选择一个参数", select.next('.layui-form-select'), {tips: [3, '#FF5722']}); //吸附提示
                        }
                        $.extend(data, {'parameter1': selectedVal});
                        data.data_index = data_index
                        activeByType('onParameterChange', data);	//更新行记录对象
                    }
                    break;
                case "type_status":
                    var stateVal = tr.find("input[name='status']").val() === "1" ? "0" : "1";
                    $.extend(data, {'status': stateVal})
                    data.data_index = data_index
                    activeByType('onParameterChange', data);	//更新行记录对象
                    break;
                case "param_img_event":
                    // 给图片传tabel索引
                    _data_index = data_index
                    break;
                case "del":
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    activeByType('removeItem', data_index);
                    layer.msg('删除成功', {icon: 6});
                    break;
            }
        });

        $('#btn_add').on('click', function () {
            var oldData = table.cache[layTableId];
            var newRow = {
                id: '',
                price: '',
                stock: '',
                no: '',
                name: '',
                file: '',
                images_url: '',
                status: "1",
                parameter1: '',
                parameter2: '',
            }
            oldData.push(newRow);
            tableIns.reload({
                data: oldData
            });
        });

        //保存
        form.on('submit(component-form-element)', function (data) {
            var rows = table.cache[layTableId];
            var items = [];
            var formData = new FormData();
            var para_items = [] // 验证选择的参数是否重复
            for (var k in rows) {
                if (isNaN(rows[k].price) || isNaN(rows[k].stock)) {
                    layer.msg("第" + (parseInt(k) + 1) + "行，请填写销售价格或库存", {icon: 2})
                    return false
                }
                var param = rows[k].parameter1 + "," + rows[k].parameter2
                if (param.length > 1 && para_items.indexOf(param) > -1) {
                    layer.msg("第" + (parseInt(k) + 1) + "行，选择的参数重复，请重新选择", {icon: 2})
                    return false
                }
                para_items.push(param)
                var item = {
                    id: rows[k].id,
                    price: rows[k].price,
                    stock: rows[k].stock,
                    no: rows[k].no,
                    name: rows[k].name,
                    status: rows[k].status,
                    parameter1: rows[k].parameter1,
                    parameter2: rows[k].parameter2,
                };
                if (rows[k].file) {
                    formData.append(`file${rows[k].file.data_index}`, rows[k].file)
                    item['data_index'] = rows[k].file.data_index
                }

                items.push(item);
            }
            formData.append('items', JSON.stringify(items))
            if (items.length === 0) {
                layer.msg('请添加参数内容', {icon: 2});
                return false;
            }

            admin.req({
                url: '/commodity/' + id + '/add_details/'
                , data: formData
                , contentType: false
                , processData: false
                , type: 'post'
                , done: function (res) {
                    parent.layui.onSubmitChild(res);
                }
            });

            return false;
        });
        parent.layui.submitChild = function () {
            $("#id_save").click();
        };
    });

</script>
</body>
</html>