projectx/web/templates/manage/customer/list.tmpl

{{template "header" .}}

<!-- <div class="layui-row layui-col-space15">
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <div class="layui-colla-title">查询</div>
            <div class="layui-colla-content layui-show">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" action="">
                            {{.CsrfTokenField}}
                            <div class="layui-form-item">
                                <div class="layui-form-item layui-inline">
                                    <label class="layui-form-label" style="overflow:visible;padding:0;width:110px;">
                                        <select id="SearchTimeType">
                                            <option value="CreateTime">创建时间</option>
                                        </select>
                                    </label>
                                    <div class="layui-input-inline" style="width:150px;">
                                        <input type="text" class="layui-input" id="timeBegin" placeholder="yyyy-MM-dd"
                                            readonly value="{{ yearBegin }}" />
                                    </div>
                                    <div class="layui-input-inline"
                                        style="width:10px;line-height:30px;margin-right:5px">
                                        -
                                    </div>
                                    <div class="layui-input-inline" style="width:150px;">
                                        <input type="text" class="layui-input " id="timeEnd" placeholder="yyyy-MM-dd"
                                            readonly value="{{ monthEnd }}" />
                                    </div>
                                </div>
                                <div class="layui-form-item layui-inline">
                                    <label class="layui-form-label">
                                        状态
                                    </label>
                                    <div class="layui-input-inline">
                                        <select id="status">
                                            <option value="0">请选择</option>
                                            {{range .Statuses}}
                                            <option value="{{.Value}}">{{.Name}}</option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-inline">
                                    <label class="layui-form-label">
                                        类别
                                    </label>
                                    <div class="layui-input-inline">
                                        <select id="category">
                                            {{range.Categories}}
                                            <option value="{{.Value}}">{{.Name}}</option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-inline">
                                    <label class="layui-form-label">
                                        来源
                                    </label>
                                    <div class="layui-input-inline">
                                        <select id="source">
                                            {{range.Sources}}
                                            <option value="{{.Value}}">{{.Name}}</option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <input type="text" id="title" placeholder="" class="layui-input">
                                </div>
                                <div class="layui-inline">
                                    <button type="button" class="pear-btn pear-btn-md pear-btn-primary" lay-submit
                                        lay-filter="user-query">
                                        <i class="layui-icon layui-icon-search"></i>
                                        查询
                                    </button>
                                    <button type="reset" class="pear-btn pear-btn-md" lay-submit
                                        lay-filter="user-reset">
                                        <i class="layui-icon layui-icon-refresh"></i>
                                        重置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> -->

<!-- 工具栏 -->
<script id="toolbar" type="text/html">
    {{ genBtn .AuthorizeMenus "add"}}
    <button type="button" lay-event="search" lay-on="search" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon layui-icon-search"></i>
    </button>
</script>

<script type="text/html" id="actionBox">
    {{ genLink .AuthorizeMenus "edit"}}
</script>

<div class="search-layer" id="search-layer" style="display: none;">
    <div class="layui-form layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-column">
                <label class="tips">开始时间</label>
                <input type="text" name="timeBegin" id="timeBegin" placeholder="yyyy-MM-dd" readonly
                    value="{{ yearBegin }}" class="layui-input" />
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-column">
                <label class="tips">结束时间</label>
                <input type="text" name="timeEnd" id="timeEnd" placeholder="yyyy-MM-dd" readonly value="{{ monthEnd }}"
                    class="layui-input" />
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-column">
                <label class="tips">状态</label>
                <select name="status" id="status">
                    {{range.Statuses}}
                    <option value="{{.Value}}">{{.Name}}</option>
                    {{end}}
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-column">
                <label class="tips">类别</label>
                <select id="category" name="category">
                    {{range.Categories}}
                    <option value="{{.Value}}">{{.Name}}</option>
                    {{end}}
                </select>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-column">
                <label class="tips">来源</label>
                <select id="source">
                    {{range.Sources}}
                    <option value="{{.Value}}">{{.Name}}</option>
                    {{end}}
                </select>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-column">
                <label class="tips">名称</label>
                <input type="text" name="title" id="title" placeholder="请输入名称" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
</div>

<div class="layui-panel">
    <table id="tablelist" lay-filter="tablelist"></table>
</div>

{{define "js"}}
<script>
    layui.use(['table', 'form', 'jquery', 'laydate', 'util'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let util = layui.util;
        let laydate = layui.laydate;

        /**开始时间 */
        laydate.render({
            elem: '#timeBegin',
            type: 'datetime',
            value: '{{ yearBegin }}',
            ready: function (date) {
                this.dateTime.hours = 0;
                this.dateTime.minutes = 0;
                this.dateTime.seconds = 0;
            }
        });

        /**截止时间 */
        laydate.render({
            elem: '#timeEnd',
            type: 'datetime',
            value: '{{ monthEnd }}',
            ready: function (date) {
                this.dateTime.hours = 23;
                this.dateTime.minutes = 59;
                this.dateTime.seconds = 59;
            }
        });

        // 加载列表
        table.render({
            elem: '#tablelist',
            url: "/customer/list",
            method: "POST",
            headers: { 'X-CSRF-Token': $('#csrf_token').val() },
            where: getQueryParams(),
            // height: 'full-100',
            height: function () {
                return $(window).height() - 22;
            },
            page: true,
            cols: [[
                { field: 'name', title: '名称', align: 'left', fixed: 'left', width: 200 },
                { field: 'sid', title: '编号', align: 'left', width: 180 },
                { field: 'category_name', title: '类别', align: 'left', width: 100 },
                { field: 'source_name', title: '来源', align: 'left', width: 100 },
                {
                    field: 'status', title: '状态', align: 'center', width: 90, templet: function (row) {
                        switch (row.status) {
                            case 0: return '<span style="color:green;">正常</span>';
                            case -1: return '<span style="color:red;">删除</span>';
                            default: return '其它';
                        }
                        return '';
                    }
                },
                { field: 'contact_name', title: '联系人姓名', align: 'left', width: 120 },
                { field: 'contact_phone', title: '联系人手机', align: 'left', width: 120 },
                { field: 'address', title: '地址', align: 'left', width: 200 },
                { field: 'sort', title: '排序', align: 'center', width: 80 },
                { field: 'created_at', title: '创建时间', align: 'center', width: 160, templet: function (d) { return !d.created_at ? '' : util.toDateString(d.created_at) } },
                { field: 'created_name', title: '创建人', align: 'center', width: 100 },
                { field: 'updated_at', title: '更新时间', align: 'center', width: 160, templet: function (d) { return !d.updated_at ? '' : util.toDateString(d.updated_at) } },
                { field: 'updated_name', title: '更新人', align: 'center', width: 100 },
                { title: '操作', toolbar: '#actionBox', align: 'center', fixed: 'right', width: 100 },
            ]],
            skin: 'line',
            toolbar: '#toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'exports'],
            request: {
                pageName: 'page',
                limitName: 'rows'
            }
        });

        // 工具栏
        table.on('toolbar(tablelist)', function (obj) {
            switch (obj.event) {
                case 'add': add(); break;
                case 'search': search(); break;
                case 'refresh': refresh(); break;
            }
        });

        function add(obj) {
            layer.open({
                type: 2,
                // offset: 'r',
                // anim: 'slideLeft',
                title: '新增',
                shade: 0.1,
                area: ['99%', '98%'],
                content: "/customer/add"
            });
        }

        function search() {
            layer.open({
                type: 1,
                offset: '20px',
                title: '搜索',
                content: $('#search-layer'), // 捕获的元素
                shade: 0.1,
                shadeClose: false,
                scrollbar: false,
                resize: false,
                move: false,
                skin: 'search-layer-open',
                area: ['50%', '350px'],
                btn: ['搜索', '重置'],
                btn1: function (index, layero) {
                    search_btn();
                    layer.close(index);
                },
                btn2: function (index, layero) {
                    $('#timeBegin').val(formatDate(getCurrentYearStart(), 'YYYY-MM-DD HH:mm:ss'));
                    $('#timeEnd').val(formatDate(getCurrentMonthEnd(), 'YYYY-MM-DD HH:mm:ss'));
                    $('#title').val('');
                    $('#category').val('');
                    $('#source').val('');
                    $('#status').val(9999);
                    form.render('select');
                    return false;
                }
            });
        }

        function refresh() {
            table.reload('tablelist');
        }

        // 表格项操作按钮
        table.on('tool(tablelist)', function (obj) {
            switch (obj.event) {
                case 'edit': edit(obj); break;
            }
        });

        function edit(obj) {
            layer.open({
                type: 2,
                // offset: 'r',
                // anim: 'slideLeft',
                title: '修改',
                shade: 0.1,
                area: ['99%', '98%'],
                content: "/customer/edit?id=" + obj.data['sid']
            });
        }

        // 搜索条件
        function getQueryParams() {
            return {
                timeBegin: $('#timeBegin').val(),
                timeEnd: $('#timeEnd').val(),
                status: $('#status').val(),
                category: $('#category').val(),
                source: $('#source').val(),
                title: $('#title').val()
            };
        }

        // 搜索
        function search_btn() {
            table.reload('tablelist', {
                where: getQueryParams(),
                page: {
                    curr: 1
                }
            })
            return false;
        }
    });
</script>
{{end}}

{{template "footer" .}}