{extend name='table'}

{block name="button"}
{/block}

{block name="content"}
<div class="think-box-shadow" style="flex: 4">
    {include file="user/index_search"}
    <table class="layui-hide" id="UserTable" data-url="{:request()->url()}" data-target-search="form.form-search" lay-filter="UserTable"></table>
</div>
<script type="text/html" id="ToolbarTpl">
    <div class="layui-btn-container">
        <!--{if auth("edit")}-->
        <a class="layui-btn layui-btn-xs" data-modal="{:url('edit')}?id={{d.staff_id}}" data-title="编辑用户档案">{:lang('编 辑')}</a>
        <!--{/if}-->
        <!--{if auth("clear")}-->
        <a class="layui-btn layui-btn-danger layui-btn-xs" data-confirm="{:lang('确定要清除该员工档案吗？')}" data-action="{:url('clear')}" data-value="id#{{d.staff_id}}">{:lang('清除档案')}</a>
        <!--{/if}-->
    </div>
</script>
<script>
    $(function () {
        $('#UserTable').layTable({
            height: 'full',
            sort: ['create_at', 'desc'],
            cols: [[
                { field: 'staff_id', title: '序号', width: 80 },
                { field: 'name', title: '名称', width: 200 },
                { field: 'phone', title: '手机号' },
                { field: 'email', title: '邮箱' },
                { field: 'bz', title: '备注' },
                { field: 'create_at', title: '档案创建时间', width: 200, sort: true },
                { fixed: "right", title: "操作", width: 200, align: "center", toolbar: "#ToolbarTpl"}
            ]],
            page: true
        })
        layui.use(['form', 'table'], function () {
            const Table = layui.table;
            const Form = layui.form;
            Table.on('tool(UserTable)', function (obj) {
                console.log(obj);
            })
        });
    })
</script>
{/block}