YwxAppThink/addon/download/view/backend/resource/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="delete"
      data-perm="download:delete"
      ><i class="layui-icon layui-icon-delete"></i>
    </a>
  </div>
</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="statusTpl">
  {{# if(d.status == 1) { }}
  <span class="layui-badge layui-bg-green">正常</span>
  {{# } else { }}
  <span class="layui-badge layui-bg-orange">下架</span>
  {{# } }}
</script>

<!-- 免费/收费 -->
<script type="text/html" id="freeTpl">
  {{# if(d.is_free == 1) { }}
  <span class="layui-badge layui-bg-green">免费</span>
  {{# } else { }}
  <span class="layui-badge layui-bg-orange">收费</span>
  {{# } }}
</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||''}}">
    <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="请输入资源标题" autocomplete="off" class="layui-input" value="{{d.title||''}}">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">所属分类</label>
      <div class="layui-input-block">
        <select name="cid" lay-verify="required">
          {volist name="categories" id="c"}
          <option value="{$c.id}" {{ d.cid==$c.id ? 'selected' : '' }}>{$c.title}</option>
          {/volist}
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">作者</label>
      <div class="layui-input-block">
        <input type="text" name="author" placeholder="请输入作者" autocomplete="off" class="layui-input" value="{{d.author||''}}">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">版本</label>
      <div class="layui-input-block">
        <input type="text" name="version" placeholder="如 1.0.0" autocomplete="off" class="layui-input" value="{{d.version||''}}">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">下载地址</label>
      <div class="layui-input-block">
        <input type="text" name="file_url" placeholder="外链下载地址" autocomplete="off" class="layui-input" value="{{d.file_url||''}}">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">本地存储</label>
      <div class="layui-input-inline">
        <input type="checkbox" name="is_local" lay-skin="switch" lay-text="本地|外链" {{ d.is_local==1 ? 'checked' : '' }} value="1">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">是否免费</label>
      <div class="layui-input-inline">
        <input type="checkbox" name="is_free" lay-skin="switch" lay-text="免费|收费" {{ d.is_free!=0 ? 'checked' : '' }} value="1">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-inline">
        <input type="checkbox" name="status" lay-skin="switch" lay-text="正常|下架" {{ d.status!=0 ? 'checked' : '' }} value="1">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">简介</label>
      <div class="layui-input-block">
        <textarea name="intro" placeholder="资源简介" class="layui-textarea">{{d.intro||''}}</textarea>
      </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>

    layui.use(['http', 'auth'], function () {
        var $ = layui.$, table = layui.table, form = layui.form, layer = layui.layer
            , laytpl = layui.laytpl, http = layui.http
            , auth = layui.auth;
        var _savedPerms = (layui.data('backend').permission) || [];
        auth.init(_savedPerms);
        auth.setController('download');
        var dataTable = table.render({
            elem: '#dataTable'
            , url: 'index' // 后端数据接口
            , page: true
            , limit: 15
            , toolbar: '#tableBarTpl'
            , cols: [[
                { type: 'checkbox', fixed: 'left' }
                , { field: 'id', title: 'ID', width: 60, align: 'center', sort: true, fixed: 'left' }
                , { field: 'title', title: '标题', minWidth: 200, align: 'left', fixed: 'left' }
                , { field: 'category_title', title: '分类', width: 120, align: 'center' }
                , { field: 'author', title: '作者', width: 120, align: 'center' }
                , { field: 'version', title: '版本', width: 90, align: 'center' }
                , { field: 'downloads', title: '下载数', width: 90, align: 'center', sort: true }
                , { field: 'is_free', title: '类型', width: 80, align: 'center', templet: '#freeTpl' }
                , { field: 'status', title: '状态', width: 90, align: 'center', templet: '#statusTpl' }
                , { title: '操作', width: 120, align: 'left', toolbar: '#dataBarTpl', fixed: 'right', unresize: true }
            ]]
            , done: function (res, curr, count) {
                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(); }
                });
            }
        });

        table.on('toolbar(dataTable)', function (elem) {
            switch (elem.event) {
                case 'dataCreate':
                    active.dataCreate({ });
                    break;
                case 'dataDelete':
                    var checkStatus = table.checkStatus('dataTable'), checkData = checkStatus.data;
                    let ids = checkData.map((item, index, array) => { return item.id; });
                    active.dataDelete(ids);
                    break;
                case 'dataRecybin':
                    active.dataRecybin();
                    break;
            };
        });

        table.on('tool(dataTable)', function (elem) {
            var data = elem.data;
            switch (elem.event) {
                case 'update':
                    active.dataEdit(data);
                    break;
                case 'delete':
                    active.dataDelete([data.id]);
                    break;
            }
        });

        var dataFromFun = function (data, callback, done) {
            var formHtml = laytpl($('#dataFormTpl').html()).render(data || {});
            layer.open({
                title: data.id ? '编辑资源' : '添加资源',
                content: formHtml,
                anim: "slideLeft",
                offset: "r",
                btnAlign: "l",
                area: ['50% ', '99%'],
                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 = {
            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);
                                    table.reload('dataTable', {}, true);
                                } else {
                                    layer.msg(res.msg || '操作失败');
                                }
                            });
                    });
                });
            },
            dataCreate: function (data = {}) {
                dataFromFun(data,
                    function (layero, index) { },
                    function (layero, index, elem) {
                        var field = elem.field;
                        http.post('save', field)
                            .then((res) => {
                                if (res.code === 0) {
                                    layer.close(index);
                                    table.reload('dataTable', {}, true);
                                } else {
                                    layer.msg(res.msg || '操作失败');
                                }
                            });
                    }
                );
            },
            dataEdit: function (data = {}) {
                dataFromFun(data,
                    function (layero, index) { },
                    function (layero, index, elem) {
                        var field = elem.field;
                        http.put('update', field)
                            .then((res) => {
                                if (res.code === 0) {
                                    layer.close(index);
                                    table.reload('dataTable', {}, true);
                                } else {
                                    layer.msg(res.msg || '操作失败');
                                }
                            });
                    }
                );
            },
            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) {
                        table.render({
                            elem: '#dataRecybinTable',
                            url: "recyclebin",
                            toolbar: '#tableBarTpl',
                            defaultToolbar: [{
                                title: '批量删除数据',
                                layEvent: 'dataDelete',
                                icon: 'layui-icon-delete',
                                onClick: function (obj) {
                                    var checkStatus = table.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' },
                                { field: 'category_title', title: '分类', width: 120, align: 'center' },
                                { field: 'author', title: '作者', width: 120, align: 'center' },
                                {
                                    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 () {
                                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;
                                    }
                                });
                                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('恢复成功');
                            table.reload('dataTable', {}, true);
                        } else {
                            layer.msg(res.msg || '恢复失败');
                        }
                    });
            }
        };
    });


</script>