jiaweiqi
/
cosmetics_shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
							<!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;
        }

    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form id='fm' class="layui-form" action="" lay-filter="component-form-element">
                        <div class="layui-row layui-col-space10 layui-form-item">
                            <div class="layui-form-item">
                                <label class="layui-form-label">参数名称：</label>
                                <div class="layui-input-block">
                                    <select id="id_option" name="option" lay-search="">
                                        <option value="">请选择参数名称</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <button class="layui-btn" id="id_save" lay-submit lay-filter="component-form-element"
                                style="display: none">保存
                        </button>
                    </form>
                </div>
            </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>
</div>

<script src="../../layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'layer', 'form',], function () {
        var $ = layui.$
            , admin = layui.admin
            , form = layui.form
            , table = layui.table
            , layer = layui.layer;

        var edit = layui.view.getParameterByName('edit') == 'true';
        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: 'parameter_content', title: '参数内容', edit: 'text', width: '44%',},
                {
                    field: 'id', title: '操作',hide:edit, templet: function (d) {
                        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>';
                    }
                }
            ]],
        });
        admin.req({
            url: '/option/get_option/?types=2',
            done: function (res) {
                var data_user = res.data;
                var user_node = $('#id_option');
                for (var i in data_user) {
                    var pid = data_user[i].value;
                    var name = data_user[i].name;
                    user_node.append("<option value='" + pid + "'>" + name + "</option>");
                }
                form.val("component-form-element", editdata);
            }
        });
        if (edit) {
            var editdata = JSON.parse(JSON.stringify(parent.layui.table.editdata)); // 框架有Bug所以这么转换
            form.val("component-form-element", editdata);
            var oldData = table.cache[layTableId];
            for (var i in editdata.edit_content) {
                var newRow = {
                    id: editdata.edit_content[i].id,
                    parameter_content: editdata.edit_content[i].content,
                }
                oldData.push(newRow);
            }
            tableIns.reload({
                data: oldData
            });
        }
        var active = {
            removeItem: function (index) {
                var oldData = table.cache[layTableId];
                oldData.splice(index, 1);    //删除一项
                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);
        });

        //监听工具条
        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 "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: '',
                parameter_content: '',
            }
            oldData.push(newRow);
            tableIns.reload({
                data: oldData
            });
        });

        //保存
        form.on('submit(component-form-element)', function (data) {
            var rows = table.cache[layTableId];
            var items = [];
            for (var k in rows) {
                var item = {
                    id: rows[k].id,
                    parameter_content: rows[k].parameter_content,
                };
                items.push(item);
            }

            if (items.length === 0) {
                layer.msg('请添加参数内容');
                return false;
            }
            data.field.contents = JSON.stringify(items)
            admin.req({
                url: '/commodity/commodity_parameter/'
                , data: data.field
                , type: 'post'
                , done: function (res) {
                    parent.layui.onSubmitChild(res);
                }
            });
            return false;
        });
        parent.layui.submitChild = function () {
            $("#id_save").click();
        };
    });

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