YwxAppThink/addon/download/view/backend/category/index.html

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header"> </div>
        <div class="layui-card-body">
            <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>
<script type="text/html" id="tableBarTpl">
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-sm layui-btn-primary" title="新建分类"  lay-event="dataCreate" data-perm="download:add"> <i class="layui-icon layui-icon-add-1"></i> </a>
        <a class="layui-btn layui-btn-sm layui-btn-primary" title="删除分类"  lay-event="dataDelete" data-perm="download:delete"><i class="layui-icon layui-icon-delete"></i> </a>
        <a class="layui-btn layui-btn-sm layui-btn-primary" title="分类回收站" lay-event="dataRecybin" data-perm="download:recyclebin"><i class="layui-icon layui-icon-home"></i> </a>
    </div>
    </script>
<script type="text/html" id="dataBarTpl">
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-sm layui-btn-primary" title="编辑分类"  lay-event="update" data-perm="download:edit"><i class="layui-icon layui-icon-edit"></i> </a>
        <a class="layui-btn layui-btn-sm layui-btn-primary" title="添加子分类"  lay-event="create" data-perm="download:add"><i class="layui-icon layui-icon-add-1"></i> </a>
        <a class="layui-btn layui-btn-sm layui-btn-primary" title="删除分类"  lay-event="delete" data-perm="download:delete"><i class="layui-icon layui-icon-delete"></i> </a>
    </div>
    </script>
<!-- 添加/编辑分类表单模板 -->
<script type="text/html" id="dataFormTpl">
    <form class="layui-form layui-form-pane" lay-filter="wxapp-form" id="wxapp-form">
        <input type="hidden" name="id" value="{{= d.id || '' }}">
        <input type="hidden" name="pid" value="{{= d.pid || 0 }}">
        <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="请输入分类名称" value="{{ d.title || '' }}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图标</label>
            <div class="layui-input-block">
                <input type="text" name="cover" id="iconPicker" placeholder="支持 emoji 或图片URL" value="{{ d.cover || '' }}" 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 || 50 }}" 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 != 0 ? 'checked' : (!d.id ? 'checked' : '') }}>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <button class="layui-btn" lay-submit="" lay-filter="wxapp-form-submit" id="wxapp-form-submit">提交</button>
        </div>
    </form>
    </script>
<!-- 状态开关 -->
<script type="text/html" id="statusTpl">
        <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="dataRecybinTpl">
    <div class="layui-card">
        <div class="layui-card-header"> </div>
        <div class="layui-card-body">
            <table class="layui-hide" id="dataRecybinTable" lay-filter="dataRecybinTable"></table>
        </div>
    </div>
    </script>
<script type="text/html" id="dataRecybinBarTpl">
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-sm layui-btn-primary" title="恢复数据"  lay-event="restore"><i class="layui-icon layui-icon-edit"></i> </a>
         <a class="layui-btn layui-btn-sm layui-btn-primary" title="删除分类"  lay-event="delete"><i class="layui-icon layui-icon-delete"></i> </a>
    </div>
    </script>
<script>
    layui.use(['layer', 'http', 'auth'], function () {
        var $ = layui.$;
        var treeTable = layui.treeTable;
        var form = layui.form;
        var layer = layui.layer;
        var laytpl = layui.laytpl;
        var http = layui.http;
        var auth = layui.auth;
        var _savedPerms = (layui.data('backend').permission) || [];
        auth.init(_savedPerms);
        auth.setController('download');
        treeTable.render({
            elem: '#dataTable',
            url: 'index',
            parseData: function (res) {
                return {
                    code: res.code === 0 ? 0 : 1,
                    data: res.data || [],
                    msg: res.message || ''
                };
            },
            tree: {
                customName: {
                    children: "children",
                    isParent: "is_parent",
                    name: "title",
                    id: "id",
                    pid: "pid",
                    icon: "cover"
                },
                data: { isSimpleData: true, rootPid: 0 },
                view: {},
                async: {},
                callback: {}
            },
            height: 'full-100',
            toolbar: '#tableBarTpl',
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' },
                { field: 'title', title: '分类名称', width: 220, fixed: 'left' },
                { field: 'cover', title: '图标', width: 100, templet: function (d) {
                    return d.cover ? '<span style="font-size:18px;">' + d.cover + '</span>' : '<span class="layui-badge-rim">无</span>';
                } },
                { field: 'sort', title: '排序', width: 80, sort: true },
                { field: 'status', title: '状态', width: 96, align: 'center', templet: '#statusTpl' },
                { fixed: "right", title: "操作", width: 181, align: "center", toolbar: "#dataBarTpl" }
            ]],
            page: true,
            done: function (res, curr, count, origin) {
                var view = $('#dataTable').next('.layui-table-view');
                view.find('[data-perm]').each(function () {
                    var perm = $(this).attr('data-perm');
                    if (perm && !auth.has(perm)) { $(this).remove(); }
                });
                $('.layui-btn[data-perm]').each(function () {
                    var perm = $(this).attr('data-perm');
                    if (perm && !auth.has(perm)) { $(this).remove(); }
                });
            }
        });
        treeTable.on('toolbar(dataTable)', function (obj) {
            var options = obj.config;
            switch (obj.event) {
                case 'dataCreate':
                    active.dataCreate({ pid: 0 });
                    break;
                case 'dataDelete':
                    var checkStatus = treeTable.checkStatus('dataTable'), checkData = checkStatus.data;
                    let ids = checkData.map((item, index, array) => { return item.id; });
                    active.dataDelete(ids);
                    break;
                case 'dataRecybin':
                    active.dataRecybin();
                    break;
            };
        });
        treeTable.on('tool(dataTable)', function (elem) {
            var data = elem.data;
            switch (elem.event) {
                case 'update':
                    active.dataEdit(data);
                    break;
                case 'create':
                    active.dataCreate({ pid: data.id });
                    break;
                case 'delete':
                    active.dataDelete([data.id]);
                    break;
                default:
                    break;
            }
        });
        // 状态开关
        form.on('switch(statusSwitch)', function (obj) {
            var id = this.value;
            var status = obj.elem.checked ? 1 : 0;
            layer.confirm('确定要' + (status ? '启用' : '禁用') + '该分类吗？', function (index) {
                layui.request.post('update', { id: id, status: status }).then(function (res) {
                    if (res.code === 0) {
                        layer.msg(res.msg, { icon: 1 });
                        treeTable.reload('dataTable', {}, true);
                    } else {
                        layer.msg(res.msg, { icon: 2 });
                        obj.elem.checked = !obj.elem.checked;
                        form.render('checkbox');
                    }
                });
                layer.close(index);
            }, function () {
                obj.elem.checked = !obj.elem.checked;
                form.render('checkbox');
            });
        });

        var dataFromFun = function (data, callback, done) {
            var formHtml = laytpl($('#dataFormTpl').html()).render(data || {});
            layer.open({
                title: data.id ? '编辑分类' : (data.pid ? '添加子分类' : '添加根分类'),
                content: formHtml,
                anim: "slideLeft",
                offset: "r",
                btnAlign: "l",
                area: ['520px', '98%'],
                shade: 0.1,
                shadeClose: true,
                btn: ['确定', '取消'],
                success: function (layero, index) {
                    callback(layero, index);
                    form.render();
                },
                yes: function (index, layero) {
                    window.layui.form.on('submit(wxapp-form-submit)', function (elem) {
                        done(layero, index, elem);
                        layui.off('submit(wxapp-form)', 'from');
                        return false;
                    });
                    layero.contents().find("#wxapp-form-submit").trigger('click');
                }
            });
        };
        //事件
        var active = {
            dataCreate: function (data = {}) {
                dataFromFun(data,
                    function (layero, index) {
                    },
                    function (layero, index, elem) {
                        var field = elem.field;
                        field.status = field.status ? 1 : 0;
                        http.post('save', field)
                            .then((res) => {
                                if (res.code === 0) {
                                    layer.close(index);
                                    treeTable.reload('dataTable', {}, true);
                                } else {
                                    layer.msg(res.msg || '操作失败');
                                }
                            });
                    }
                );
            },
            dataEdit: function (data = {}) {
                dataFromFun(data,
                    function (layero, index) {
                    },
                    function (layero, index, elem) {
                        var field = elem.field;
                        field.status = field.status ? 1 : 0;
                        http.put('update', field)
                            .then((res) => {
                                if (res.code === 0) {
                                    layer.close(index);
                                    treeTable.reload('dataTable', {}, true);
                                } else {
                                    layer.msg(res.msg || '操作失败');
                                }
                            });
                    }
                );
            },
            dataDelete: function (ids, force = 0) {
                if (ids.length === 0) {
                    return layer.msg('请选择数据');
                }
                layer.prompt({
                    formType: 1
                    , title: '敏感操作，请验证口令'
                }, function (value, index) {
                    layer.close(index);
                    layer.confirm('确定删除吗？其下级分类与关联资源将一并删除，且不可恢复。', function (index) {
                        http.delete('delete', { ids: ids.join(','), force: force })
                            .then((res) => {
                                if (res.code === 0) {
                                    layer.close(index);
                                    treeTable.reload('dataTable', {}, true);
                                } else {
                                    layer.msg(res.msg || '操作失败');
                                }
                            });
                        layer.msg('已删除');
                        treeTable.reload('dataTable', {}, true);
                    });
                });
            },
            dataRecybin: function (data = {}) {
                var formHtml = laytpl($('#dataRecybinTpl').html()).render(data || {});
                layer.open({
                    title: '分类回收站',
                    content: formHtml,
                    anim: "slideLeft",
                    offset: "r",
                    area: ['60%', '99%'],
                    shade: 0.1,
                    shadeClose: true,
                    success: function (layero, index) {
                        layui.table.render({
                            elem: '#dataRecybinTable',
                            url: 'recyclebin',
                            height: 'full-100',
                            toolbar: '#dataRecybinBarTpl',
                            defaultToolbar: [{
                                title: '批量删除数据',
                                layEvent: 'dataDelete',
                                icon: 'layui-icon-delete',
                                onClick: function (obj) {
                                    var checkStatus = treeTable.checkStatus('dataRecybinTable'), checkData = checkStatus.data;
                                    let ids = checkData.map((item, index, array) => { return item.id; });
                                    console.log(ids);
                                }
                            }, 'filter', 'exports', 'print'],
                            cols: [[
                                { type: 'checkbox', fixed: 'left' },
                                { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' },
                                { field: 'title', title: '分类名称', width: 200, fixed: 'left' },
                                {
                                    fixed: "right", title: "操作", width: 120, align: "center", templet: function (d) {
                                        return `<div class="layui-btn-group">
                                                        <a class="layui-btn layui-btn-sm" title="恢复数据" lay-event="restore" > <i class="layui-icon layui-icon-edit"></i> </a >
                                                        <a class="layui-btn layui-btn-sm" title="删除数据" lay-event="delete"><i class="layui-icon layui-icon-delete"></i> </a>
                                                    </div >`;
                                    }
                                }
                            ]],
                            page: true,
                            done: function (res, curr, count, origin) {
                                layui.table.on('tool(dataRecybinTable)', function (elem) {
                                    var data = elem.data;
                                    switch (elem.event) {
                                        case 'restore':
                                            active.dataRestore([data.id]);
                                            break;
                                        case 'delete':
                                            active.dataDelete([data.id], 1);
                                            break;
                                    }
                                });
                                layui.table.on('toolbar(dataRecybinTable)', function (elem) {
                                    switch (elem.event) {
                                        case 'dataDelete':
                                            var checkStatus = table.checkStatus('dataRecybinTable'), checkData = checkStatus.data;
                                            let idss = checkData.map((item, index, array) => { return item.id; });
                                            active.dataDelete(idss, 1);
                                            break;
                                        case 'dataRestore':
                                            var checkStatus = table.checkStatus('dataRecybinTable'), checkData = checkStatus.data;
                                            let ids = checkData.map((item, index, array) => { return item.id; });
                                            active.dataRestore(ids);
                                            break;
                                    };
                                });
                            }
                        });
                    }
                });
            },
            dataRestore: function (ids) {
                if (ids.length === 0) {
                    return layer.msg('请选择数据');
                }
                http.put('restore', { ids: ids.join(',') })
                    .then((res) => {
                        if (res.code === 0) {
                            layer.msg('恢复成功');
                            treeTable.reload('dataTable', {}, true);
                        } else {
                            layer.msg(res.msg || '恢复失败');
                        }
                    });
            }
        };
    });
</script>