scott
/
crm


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
							{extend name="public/layout" /}
{block name="title"}风格测试{/block}
{block name="head"}
{include file="public/head"}
<style>
    .layui-form-label {
        width: 56px;
        padding-left: 0px;
    }

    .layui-form-item .layui-inline {
        margin-bottom: 5px;
        margin-right: 5px;
    }
.layui-table thead tr, .layui-table-header {
    background-color: #D4E4ED !important;
    border-color: #D4E4ED !important;
}
    #edit {
        margin: 10px;
    }

    #edit .layui-input-block {
        margin-left: 75px;
    }
</style>
{/block}
{block name="body"}

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item clearfix">
                    <div style="float: right;">
                    	<div class="layui-inline">
	                        <label class="layui-form-label">标题</label>
	                        <div class="layui-input-inline">
	                            <input name="title" placeholder="标题" class="layui-input" id="title">
	                        </div>
	                    </div>
	                    <div class="layui-inline">
	                        <label class="layui-form-label">分类</label>
	                        <div class="layui-input-inline">
	                            <select name="type">
	                                <option value="">请选择分类</option>
	                                {volist name="type" id="vo"}
	                                <option value="{$key}">{$vo}</option>
	                                {/volist}
	                            </select>
	                        </div>
	                    </div>
	                    <div class="layui-inline">
	                        <label class="layui-form-label">标签</label>
	                        <div class="layui-input-inline">
	                            <input name="label" placeholder="标签" class="layui-input" id="label">
	                        </div>
	                    </div>
	                     <button class="layui-btn" lay-submit lay-filter="LAY-app-contlist-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>

                    <div class="layui-inline" style="float: left;">
                        <button class="layui-btn edit-btn" data-type="add">清单添加</button>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>
			<div style="clear: both;"></div>
            <div class="layui-card-body">
                <table class="layui-table" lay-data="{ url:'{:url('toolAvoidPit/index')}', page:true, id:'pit'}"
                    lay-filter="pit">
                    <thead>
                        <tr>
                            <th lay-data="{type: 'numbers'}">编号</th>
                            <th lay-data="{field:'title'}">标题</th>
                            <th lay-data="{field:'type', width:150}">类型</th>
                            <th lay-data="{field:'label', width:150}">标签</th>
                            <th lay-data="{templet:'#table-style-list', width:120}">操作</th>
                        </tr>
                    </thead>
                </table>
                <script type="text/html" id="table-style-list">
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
                            class="layui-icon layui-icon-edit"></i></a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                            class="layui-icon layui-icon-delete"></i></a>
                </script>
            </div>
        </div>
    </div>
    <div id="edit" style="display: none;">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类</label>
                <div class="layui-input-block" style="width: 50%;">
                    <select name="type" required lay-verify="required">
                        <option value="">请选择分类</option>
                        {volist name="type" id="vo"}
                        <option value="{$key}">{$vo}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">标签</label>
                <div class="layui-input-block" style="width: 50%;">
                    <input type="label" name="label" required lay-verify="required" placeholder="请输入标签呢"
                        autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block">
                    <textarea name="content" placeholder="请输入内容" class="layui-textarea" style="height: 260px;" required
                        lay-verify="required"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit"
                    value="确认添加">
            </div>
        </form>
    </div>
</body>
{/block}
{/block} {block name="js"}
<script>
    layui.config({
        base: '__LAYUI__/' //静态资源所在路径
            ,
        urlbase: '/sys'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function () {
        var $ = layui.$,
            layuiForm = layui.form,
            admin = layui.admin,
            table = layui.table;

        // 搜索
        layuiForm.on('submit(LAY-app-contlist-search)', function (data) {
            var field = data.field;
            table.reload('pit', {
                where: field
                ,page: {curr:1}
            });
        });

        var errorMsg = {
            title: '请输入标题',
            type: '请选择类型',
            label: '请输入标签',
            content: '请输入内容'
        };
        //事件
        var active = {
            add: function () {
                var form = $('form');
                form.find('input').val('');
                form.find('select').val('');
                form.find('textarea').val('');
                layuiForm.render();
                layer.open({
                    type: 1,
                    title: '清单添加',
                    content: $('#edit'),
                    maxmin: true,
                    area: ['500px', '550px'],
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        var data = {};
                        var stop = false;
                        $('form').serializeArray().forEach(function (item) {
                            if(stop) return ;
                            var name = item.name,
                                value = item.value;
                            if (value == '') {
                                layer.msg(errorMsg[name]);
                                stop = true;
                            }
                            data[name] = value;
                        });
                        if(stop) return ;
                        save(data, index);
                    }
                });
            },
            edit: function () {
                var form = $('form');
                form.find('input[name=title]').val(this.data.title);
                form.find('input[name=label]').val(this.data.label);
                form.find('textarea').val(this.data.content);
                var option = $("form").find('select').find('option');
                for(i=1;i<option.length;i++){
                    if(option[i].text == this.data.type) $(option[i]).attr('selected', true);
                }
                layuiForm.render();
                var that = this;
                layer.open({
                    type: 1,
                    title: '清单添加',
                    content: $('#edit'),
                    maxmin: true,
                    area: ['500px', '550px'],
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        var data = {};
                        var stop = false;
                        form.serializeArray().forEach(function (item) {
                            if(stop) return ;
                            var name = item.name,
                                value = item.value;
                            if (value == '') {
                                layer.msg(errorMsg[name]);
                                stop = true;
                            }
                            data[name] = value;
                        });
                        if(stop) return ;
                        data.id = that.data.id;
                        save(data, index);
                    }
                });
            },
            del: function () {
                var that = this;
                layer.confirm('确定要删除该避坑清单么？', function (index) {
                    admin.req({
                        url: '{:url("admin/toolAvoidPit/delete")}',
                        data: {
                            id: that.data.id
                        },
                        type: 'post',
                        done: function () {
                            that.del();
                            layer.close(index);
                        }
                    })
                })
            }
        };
        $('.layui-btn.edit-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        table.on('tool(pit)', function (obj) {
            var type = obj.event;
            active[type] ? active[type].call(obj) : '';
        });


        function save(data, index) {
            admin.req({
                url: '{:url("toolAvoidPit/save")}',
                type: 'post',
                data: data,
                done: function () {
                    layer.msg('保存成功');
                    table.reload('pit');
                }
            });
            layer.close(index);
        };
    });
</script>
{/block}