think-plugs-staff/src/view/dept/index.html

{extend name='table'}

{block name="button"}
<!--{if auth("add")}-->
<button data-modal='{:url("add")}' data-title="{:lang('添加部门')}" class='layui-btn layui-btn-sm'>{:lang('添加部门')}</button>
<!--{/if}-->
{/block}

{block name="content"}
<div class="think-box-shadow">
    {include file="dept/index_search"}
    <table class="layui-hide" id="DeptTable" data-url="{:request()->url()}" data-target-search="form.form-search" lay-filter="DeptTable"></table>
</div>
<script type="text/html" id="StatusSwitchTpl">
    <!--{if auth("state")}-->
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="{:lang('已启用')}|{:lang('已禁用')}" lay-filter="StatusSwitch" {{-d.status>0?'checked':''}}>
    <!--{else}-->
    {{-d.status ? '<b class="color-green">{:lang("已启用")}</b>' : '<b class="color-red">{:lang("已禁用")}</b>'}}
    <!--{/if}-->
</script>
<script type="text/html" id="SortInputTpl">
    <input type="number" min="0" data-blur-number="0" data-action-blur="{:sysuri()}" data-value="id#{{d.id}};action#sort;sort#{value}" data-loading="false" value="{{d.sort}}" class="layui-input text-center">
</script>
<script type="text/html" id="HeadmanTpl">
    {{d.headman_name}}
    <!--{if auth("headman")}-->
    {{# if(d.headman_id) { }}
    <a class="layui-btn layui-btn-xs" data-modal="{:url('headman')}?id={{d.id}}" data-title="修改部门负责人">{:lang('修改')}</a>
    {{# } else { }}
    <a class="layui-btn layui-btn-xs" data-modal="{:url('headman')}?id={{d.id}}" data-title="设置部门负责人">{:lang('设置')}</a>
    {{# } }}
    <!--{/if}-->
</script>
<script type="text/html" id="ToolbarTpl">
    <div class="layui-btn-container">
        <!--{if auth("edit")}-->
        <a class="layui-btn layui-btn-warm layui-btn-xs" data-modal="{:url('edit')}?id={{d.id}}" data-title="{:lang('编辑员工')}">编辑</a>
        <!--{/if}-->
        <!--{if auth("del")}-->
        <a class="layui-btn layui-btn-danger layui-btn-xs" data-confirm="{:lang('确定要永久删除吗？')}" data-action="{:url('del')}" data-value="id#{{d.id}}">{:lang('删 除')}</a>
        <!--{/if}-->
    </div>
</script>
<script>
    $(function () {
        $('#DeptTable').layTable({
            elem: '',
            height: 'full',
            sort: {field: 'sort', type: 'desc'},
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'sort', title: '排序', width: 100, sort: true, templet: '#SortInputTpl' },
                { field: 'name', title: '部门名', templet: function (d) {
                    if (d.parent) {
                        if (d.parent.parent) {
                            return '<span class="layui-badge layui-bg-gray">' + d.parent.parent.name + '&nbsp;/&nbsp;' + d.parent.name + '&nbsp;</span>' + d.name;
                        }
                        return '<span class="layui-badge layui-bg-gray">' + d.parent.name + '&nbsp;/&nbsp;</span>' + d.name;
                    }
                    return d.name;
                    } },
                { field: 'headman_name', title: '部门负责人', templet: '#HeadmanTpl'},
                { field: 'status', title: '状态', align: 'center', minWidth: 110, templet: '#StatusSwitchTpl' },
                { 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(DeptTable)', function (obj) {
                console.log(obj);
            })

            Form.on('switch(StatusSwitch)', function (obj) {
                var data = {id: obj.value, status: obj.elem.checked > 0 ? 1 : 0};
                $.form.load("{:url('state')}", data, 'post', function (ret) {
                    if (ret.code < 1) $.msg.error(ret.info, 3, function () {
                        $('#DeptTable').trigger('reload');
                    }); else {
                        $('#DeptTable').trigger('reload')
                    }
                    return false;
                }, false);
            });
        });
    })
</script>
{/block}