manghe/app/admin/view/welfare_house/index.html

{include file="Public:header2"/}

<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">
                    <div class="layui-btn-group">
                        <a class="layui-btn layui-btn-sm" id="addBtn">添加</a>
                    </div>
                    <table id="demo" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="statusSwitch" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="image">
    <img src="{{d.image}}" style="max-width: 100px; max-height: 50px;">
</script>

<!-- 添加/编辑表单模板 -->
<script type="text/html" id="formTpl">
    <form class="layui-form" action="" method="post" style="padding: 20px;">
        <input type="hidden" name="id" value="{{ d.id || '' }}">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" value="{{ d.name || '' }}" 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">
                <button type="button" class="layui-btn" id="image-upload">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <input type="hidden" name="image" value="{{ d.image || '' }}">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="imagePreview" src="{{ d.image || '' }}" style="max-width: 200px; max-height: 100px;">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">跳转路径</label>
            <div class="layui-input-block">
                <input type="text" name="url" value="{{ d.url || '' }}" 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">
                <input type="number" name="sort" value="{{ d.sort || 0 }}" required lay-verify="required|number" placeholder="请输入排序" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|禁用" {{ d.status == 1 ? 'checked' : '' }}>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

{include file="Public:footer"/}
<script>
layui.use(['table', 'form', 'upload', 'laytpl'], function(){
    var table = layui.table;
    var form = layui.form;
    var laytpl = layui.laytpl;
    var upload = layui.upload;
    
    // 数据表格实例
    var tableIns = table.render({
        elem: '#demo',
        url: '/admin/welfare_house',
        page: true,
        cols: [[
            {field: 'id', title: 'ID', width: 80, sort: true},
            {field: 'name', title: '名称'},
            {field: 'image', title: '图片', templet: '#image'},
            {field: 'url', title: '跳转路径'},
            {field: 'sort', title: '排序', width: 100},
            {field: 'status', title: '状态', width: 100, templet: '#status'},
            {field: 'create_time', title: '创建时间', width: 180},
            {field: 'right', title: '操作', width: 150, align: 'center', toolbar: '#barDemo'}
        ]]
    });
    
    // 添加按钮点击事件
    $('#addBtn').on('click', function(){
        openFormLayer({});
    });
    
    // 监听工具条事件
    table.on('tool(test)', function(obj){
        var data = obj.data;
        if(obj.event === 'del'){
            layer.confirm('确定删除此记录?', function(index){
                $.post('/admin/welfare_house_del', {id:data.id}, function(res){
                    if(res.status == 1){
                        layer.msg(res.msg, {icon: 1, time: 1000}, function(){
                            obj.del();
                            layer.close(index);
                        });
                    }else{
                        layer.msg(res.msg, {icon: 2, anim: 6, time: 1000});
                    }
                }, 'json');
            });
        } else if(obj.event === 'edit'){
            openFormLayer(data);
        }
    });
    
    // 打开表单层
    function openFormLayer(data) {
        var title = data.id ? '编辑福利屋' : '添加福利屋';
        var tpl = document.getElementById('formTpl').innerHTML;
        
        laytpl(tpl).render(data, function(html){
            layer.open({
                type: 1,
                title: title,
                area: ['600px', '500px'],
                content: html,
                success: function(layero, index){
                    form.render();
                    
                    // 执行上传实例
                    var uploadInst = upload.render({
                        accept: 'image',
                        elem: '#image-upload',
                        url: '/admin/picture',
                        done: function(res){
                            if(res.status == 1){
                                layer.msg("上传成功", {icon:1, time:1000}, function(){
                                    $("#imagePreview").attr("src", res.data.path);
                                    $("input[name=image]").val(res.data.imgurl);
                                });
                            } else {
                                layer.msg(res.msg, {icon:2, anim:6, time:1500});
                            }
                        },
                        error: function(){
                            layer.msg('服务繁忙，请稍后再试', {icon:2, anim:6, time:1500});
                        }
                    });
                    
                    // 监听表单提交
                    form.on('submit(formSubmit)', function(formData){
                        var url = formData.field.id ? '/admin/welfare_house_edit' : '/admin/welfare_house_add';
                        $.ajax({
                            url: url,
                            type: 'post',
                            data: formData.field,
                            dataType: 'json',
                            success: function(res){
                                if(res.status == 1){
                                    layer.msg(res.msg, {icon: 1, time: 1000}, function(){
                                        layer.close(index);
                                        tableIns.reload(); // 刷新表格
                                    });
                                }else{
                                    layer.msg(res.msg, {icon: 2, anim: 6, time: 1500});
                                }
                            }
                        });
                        return false;
                    });
                }
            });
        });
    }
    
    form.on('switch(statusSwitch)', function(obj){
        var id = this.value;
        var status = obj.elem.checked ? 1 : 0;
        $.post('/admin/welfare_house_status', {id:id, status:status}, function(res){
            if(res.status == 1){
                layer.msg(res.msg, {icon: 1, time: 1000});
            }else{
                layer.msg(res.msg, {icon: 2, anim: 6, time: 1000});
                $(obj.elem).prop('checked', !obj.elem.checked);
                form.render('checkbox');
            }
        }, 'json');
    });
});
</script>