opkpm/app/shop/view/file/lists.html

{layout name="layout2" /}
<style>
    .layui-tree-main {
        width: calc(100% - 50px);
    }
    .layui-tree-iconClick {
        margin: 0 5px 0 10px;
    }
    .layui-tree-txt {
        max-width: calc(100% - 33px);;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow:ellipsis;
    }
</style>
<div class="file-manager">
    <div id="cate-tree-more" class="cate-tree-more" style="width: 200px"></div>
    <div class="gallery">
        <div class="layui-card" style="box-shadow:none;">
            <div class="layui-card-header">
                <button type="button" class="layui-btn layui-btn layui-btn-sm layui-btn-normal layEvent" lay-event="addCate"><i class="layui-icon layui-icon-add-circle"></i> 添加分类</button>
                <button type="button" class="layui-btn layui-btn layui-btn-sm layui-btn-normal" id="upload">
                    <i class="layui-icon layui-icon-upload"></i> {if $type == 10}上传图片{elseif $type == 20}上传视频{else/}上传文件{/if}
                </button>
                <button type="button" class="layui-btn layui-btn layui-btn-sm layEvent layui-btn layui-btn-warm" lay-event="move" style="margin-left:5px;"><i class="layui-icon layui-icon-water"></i>  移动分类</button>
                <button type="button" class="layui-btn layui-btn layui-btn-sm layEvent layui-btn layui-btn-danger" lay-event="del"><i class="layui-icon layui-icon-delete"></i>  删除文件</button>
            </div>
            <div class="layui-card-body">
                <script id="manager" type="text/html">
                    <ul class="warehouse">
                        {{#  layui.each(d, function(index, item){ }}
                            <li lay-id="{{item.id}}" lay-href="{{item.uri}}">
                                <div class="file-icon"><img class="file-image" src="{{item.uri}}"></div>
                                <div class="file-name"><a href="javascript:">{{item.name}}</a></div>
                            </li>
                        {{#  }); }}
                    </ul>
                    {{#  if(d.length === 0){ }}
                        <div class="empty">
                            <i class="layui-icon layui-icon-release" style=""></i>
                            <p>木有数据，请去上传</p>
                        </div>
                    {{#  } }}
                </script>
                <div id="view"></div>
                <input type="hidden" id="fileUrl" value="">
            </div>
        </div>
        <div style="height:55px;"></div>
        <div class="footer">
            <button type="button" id="okFile" class="layui-btn layui-btn layui-btn-sm layui-btn-normal">使用选中文件</button>
            <div id="page"></div>
        </div>
    </div>
</div>

<script>
    layui.use(["form", "element", "tree", "laytpl", "laypage", "upload"], function() {
        var $ = layui.jquery;
        var tree     = layui.tree;
        var laytpl   = layui.laytpl;
        var laypage  = layui.laypage;
        var upload   = layui.upload;
        var category = JSON.parse('{$category|raw}');
        var curCid   = 0;

        var uploadIns = upload.render({
            elem: "#upload"
            ,url: "{:url('Upload/image')}"
            ,accept: "images"
            ,exts: "jpg|png|gif|bmp|jpeg|ico"
            ,size: 4096
            ,data : {
                "cid": curCid, 
                "type": "{$type}"
            }
            ,number: 20
            ,multiple: true
            ,done: function (res) {
                if (res.code === 1) {
                    var li  = "<li lay-id='"+res.data.id+"' lay-href='"+res.data.uri+"'>\n";
                        li += "<div class='file-icon'><img class='file-image' src='"+res.data.uri+"'></div>\n"
                        li += "<div class='file-name'><a href='javascript:'>"+res.data.name+"</a></div>\n";
                        li += "</li>"
                    $(".warehouse").prepend(li)
                }

                layer.msg(res.msg);
            }
        });

        var active = {
            getFile: function (cid, page) {
                cid = cid === undefined ? 0 : cid;
                page = page === undefined ? 1 : page;
                var data = {cid:cid, page:page, type: "{$type}"};
                var index = layer.load(1, {shade: false});
                like.ajax({
                    url: "{:url('File/lists')}",
                    type: "GET",
                    data: data,
                    success:function(res) {
                        layer.close(index);
                        if(res.code === 1) {
                            active.renderList(res.data.data);
                            laypage.render({
                                elem: "page"
                                ,count: res.data.total
                                ,curr: res.data.current_page
                                ,limit: res.data.per_page
                                ,last: res.data.last_page
                                ,jump: function (obj, first) {
                                    if (!first) {
                                        active.getFile(cid, obj.curr)
                                    }
                                }
                            });
                        }
                    }
                });
            },
            renderList: function(data) {
                var getTpl = document.getElementById("manager").innerHTML;
                var view   = document.getElementById('view');
                laytpl(getTpl).render(data, function(html){
                    view.innerHTML = html;
                });
            },
            getChoice: function() {
                var ids  = [];
                var href = [];
                $(".warehouse li.on").each(function () {
                    ids.push($(this).attr("lay-id"));
                    href.push($(this).attr("lay-href"));
                });

                return {ids:ids, href:href}
            },
            move: function () {
                var fileData = active.getChoice();
                if (fileData.ids.length === 0) {
                    layer.msg("尚未选择任何文件");
                    return false;
                }
                layer.open({
                    type: 2
                    ,title: "移动文件"
                    ,content: "{:url('File/move')}?type={$type}"
                    ,area: ["400px", "440px"]
                    ,btn: ["确定", "取消"]
                    ,yes: function(index, layero){
                        var iframeWindow = window["layui-layer-iframe" + index];
                        var submit = layero.find("iframe").contents().find("#addSubmit");
                        iframeWindow.layui.form.on("submit(addSubmit)", function(data){
                            data.field["file_ids"] = fileData.ids;
                            data.field["type"] = "{$type}";
                            like.ajax({
                                url: "{:url('File/move')}",
                                data: data.field,
                                type: "POST",
                                success:function(res) {
                                    if(res.code === 1) {
                                        // if (data.field['cid'] !== '0') {
                                        //     $(".warehouse li.on").remove();
                                        // }
                                        active.getFile(curCid, 1);
                                        layui.layer.msg(res.msg);
                                        layer.close(index);
                                    }
                                }
                            });
                        });
                        submit.trigger("click");
                        return false;
                    }
                });
            },
            del: function () {
                var fileData = active.getChoice();
                if (fileData.ids.length === 0) {
                    layer.msg("尚未选择任何文件");
                    return false;
                }
                layer.confirm('确定删除所选文件？', function(index){
                    like.ajax({
                        url: "{:url('File/del')}",
                        data: {file_ids: fileData.ids, type: '{$type}'},
                        type: "POST",
                        success:function(res) {
                            if(res.code === 1) {
                                active.getFile(curCid, 1);
                                layui.layer.msg(res.msg);
                            }
                        }
                    });
                    layer.close(index);
                });

            },
            addCate: function () {
                layer.open({
                    type: 2
                    ,title: "新增分类"
                    ,content: "{:url('File/addCate')}"
                    ,area: ["400px", "400px"]
                    ,btn: ["确定", "取消"]
                    ,yes: function(index, layero){
                        var iframeWindow = window["layui-layer-iframe" + index];
                        var submit = layero.find("iframe").contents().find("#addSubmit");
                        iframeWindow.layui.form.on("submit(addSubmit)", function(data){
                            data.field["type"] = "{$type}";
                            like.ajax({
                                url: "{:url('File/addCate')}",
                                data: data.field,
                                type: "POST",
                                success:function(res) {
                                    if(res.code === 1) {
                                        category = res.data;
                                        active.renderTree();
                                        layui.layer.msg(res.msg);
                                        layer.close(index);
                                    }
                                }
                            });
                        });
                        submit.trigger("click");
                    }
                });
            },
            editCate: function (obj) {
                if (obj.data.id === 0) {
                    layer.msg("此分类不允许编辑", {icon: 2});
                    return false;
                }
                layer.open({
                    type: 2
                    ,title: "编辑分类"
                    ,content: "{:url('File/editCate')}?id="+ obj.data.id + '&&type={$type}'
                    ,area: ["400px", "400px"]
                    ,btn: ["确定", "取消"]
                    ,yes: function(index, layero){
                        var iframeWindow = window["layui-layer-iframe" + index];
                        var submit = layero.find("iframe").contents().find("#addSubmit");
                        iframeWindow.layui.form.on("submit(addSubmit)", function(data){
                            data.field['id'] = obj.data.id;
                            data.field["type"] = "{$type}";
                            like.ajax({
                                url: "{:url('File/editCate')}",
                                data: data.field,
                                type: "POST",
                                success:function(res) {
                                    if(res.code === 1) {
                                        category = res.data;
                                        active.renderTree();
                                        layui.layer.msg(res.msg);
                                        layer.close(index);
                                    }
                                }
                            });
                        });
                        submit.trigger("click");
                        return false;
                    }
                });
            },
            delCate: function(obj) {
                if (obj.data.id === 0) {
                    layer.msg("此分类不允许删除", {icon: 2});
                    return false;
                }
                like.ajax({
                    url: "{:url('File/delCate')}",
                    data: {id: obj.data.id, type: "{$type}"},
                    type: "POST",
                    success:function(res) {
                        if(res.code === 1) {
                            category = res.data;
                            active.renderTree();
                            layui.layer.msg(res.msg);
                        }else{
                            category = res.data;
                            active.renderTree();
                        }
                    }
                });
            },
            renderTree: function () {
                tree.render({
                    elem: '#cate-tree-more'
                    ,edit: ['update', 'del']
                    ,customOperate: false
                    ,onlyIconControl:true
                    ,data: category
                    ,click: function (obj) {
                        // 节点被点击
                        var cid = obj.data.id;
                        var page = 1;
                        curCid = cid;
                        active.getFile(cid, page);
                        uploadIns.reload({
                            elem: "#upload"
                            ,url: "{:url('Upload/image')}"
                            ,data : {
                                "cid": curCid, 
                                "type": "{$type}"
                            }
                        });
                    }
                    ,operate: function(obj){
                        switch (obj.type) {
                            case "update":
                                active.editCate(obj);
                                break;
                            case "del":
                                active.delCate(obj);
                                break;
                        }
                    }
                });
            }
        };

        like.eventClick(active);
        active.renderTree();
        active.getFile();


        var globalUrls = [];

        $(document).on("click", ".warehouse li", function () {
            var isExist = $.inArray($(this).attr("lay-href"), globalUrls);
            if (isExist >= 0){
                globalUrls.splice(isExist, 1);
            } else {
                globalUrls.push($(this).attr("lay-href"));
            }

            if ($(this).hasClass("on")) {
                $(this).removeClass("on");
            } else {
                $(this).addClass("on");
            }
            $('#fileUrl').val(globalUrls.join(','));
        });

        // 选择图片(用于富文本的图片选择)
        // Author: 张无忌
        $("#okFile").click(function () {
            // var urls = [];
            // $(".warehouse li.on").each(function () {
            //     urls.push($(this).attr("lay-href"));
            // });
            if (globalUrls.length <= 0) {
                parent.layer.msg("请至少选择一张图片");
                return false;
            }

            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            parent.window.callback && parent.window.callback(globalUrls.reverse());
        });

    })
</script>