NN2022081301/public/agent/pages/system/annex.html

<style>
    /* 文件列表item */
    .file-choose-list-item {
        position: relative;
        display: inline-block;
        vertical-align: top;
        padding: 8px 8px;
        margin: 5px 0;
        cursor: pointer;
    }

    .file-choose-list-item:hover {
        background-color: #F7F7F7;
    }

    /* 文件列表图片 */
    .file-choose-list-item-img {
        width: 90px;
        height: 90px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-radius: 3px;
        overflow: hidden;
        position: relative;
        background-color: #eee;
    }

    .file-choose-list-item-img.img-icon {
        background-size: inherit;
        background-color: transparent;
    }

    .file-choose-list-item.active .file-choose-list-item-img:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.3);
    }

    /* 文件列表名称 */
    .file-choose-list-item-name {
        width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333;
        font-size: 12px;
        text-align: center;
        margin-top: 12px;
    }

    /* 文件列表复选框 */
    .file-choose-list-item-ck {
        position: absolute;
        right: 8px;
        top: 8px;
    }

    .file-choose-list-item-ck .layui-form-checkbox {
        padding: 0;
    }

    /* 文件列表操作菜单 */
    .file-choose-oper-menu {
        background-color: #fff;
        position: absolute;
        left: 8px;
        top: 8px;
        border-radius: 2px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, .15);
        transition: all .3s;
        overflow: hidden;
        transform: scale(0);
        transform-origin: left top;
        visibility: hidden;
    }

    .file-choose-oper-menu.show {
        transform: scale(1);
        visibility: visible;
    }

    /* 文件列表操作菜单item */
    .file-choose-oper-menu-item {
        color: #555;
        padding: 6px 5px;
        font-size: 14px;
        min-width: 70px;
        text-align: center;
        cursor: pointer;
        display: block;
    }

    .file-choose-oper-menu-item:hover {
        background-color: #eee;
    }

    /** 文件列表为空时样式 */
    .file-choose-empty {
        text-align: center;
        color: #999;
        padding: 100px 0;
    }

    .file-choose-empty .layui-icon {
        font-size: 60px;
        display: block;
        margin-bottom: 8px;
        padding: 20px 0;
    }
    /*右键菜单*/
    .ctxMenu, .ctxMenu-sub {
        max-width: 227px;
        min-width: 88px;
        padding: 0;
    }
    .ctxMenu-item > a {
        padding: 0 16px;
    }

    /*// 文件编辑*/
    #editor-content{
        background: #444;
        height: 100%;
        overflow: hidden;
        /*background: url('/static/img/resize_corner.png') no-repeat;*/
    }
    .editor-main {
        width: 100%;
        display: inline-block;
        position: relative;
        background: #777;
    }
    .editor-main.active .ace-editor-main{
        margin-left: 0 !important;
    }
    .editor-header {
        position: relative;
        height: 35px;
        background: #565656;
        /* transition: all 500ms; */
    }
    .editor-header ul>li {
        float: left;
        height: 35px;
        line-height: 35px;
        padding: 0 15px;
        font-size: 13px;
        text-align: center;
        color: #fff;
        border-right: 1px solid #4c4c4c;
        cursor: pointer;
    }

    .editor-header ul>li:hover {
        background: #2f2f2f;
    }

    .editor-toolbar {
        height: 35px;
        line-height: 35px;
        bottom: 0;
        text-align: right;
        margin-right: 15px;
        position: relative;
        background: #444;
        font-size: 0;
        overflow: hidden;
    }
    .editor-toolbar .pull-left,
    .editor-toolbar .pull-right {
        height: 35px;
    }
    .size-ellipsis {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .editor-toolbar .pull-left span,
    .editor-toolbar .pull-right span {
        color: #fff;
        display: inline-block;
        border-right: 1px solid #505050;
        padding: 0 15px;
        cursor: pointer;
        transition: all 500ms;
        font-size: 13px;
    }

    .editor-toolbar .pull-left span {
        border-right: 0;
        cursor: default;
    }
</style>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body layui-text" style="color: #333;">
            删除文件并非是完全删除，删除移至  <span style="color: red;font-weight: 700">/resource/refuse</span>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">当前位置：<span id="tv-current-position">/</span></div>
        <div class="layui-card-body">
            <div>
                <button id="file-btn-back" class="layui-btn layui-btn-sm layui-btn-primary icon-btn">
                    <i class="layui-icon">&#xe65c;</i>返回上级
                </button>
                <button id="file-btn-refresh" class="layui-btn layui-btn-sm layui-btn-primary icon-btn">
                    <i class="layui-icon">&#xe669;</i>刷新
                </button>
                <div class="dropdown-menu">
                    <button class="layui-btn layui-btn-sm layui-btn-normal icon-btn">
                        新建<i class="layui-icon">&#xe625;</i>
                    </button>
                    <ul class="dropdown-menu-nav layui-anim-upbit dropdown-bottom-left layui-anim" style="">
                        <!--<li class="create-btn" data-value="file"><a>新建文件</a></li>-->
                        <li class="create-btn" data-value="folder"><a>新建目录</a></li>
                    </ul>
                </div>
                <button id="file-btn-upload" class="layui-btn layui-btn-sm layui-btn-normal icon-btn">
                    <i class="layui-icon">&#xe681;</i>上传文件
                </button>
            </div>
            <div id="file-choose-list"></div>
            <!--  // 页脚-->
            <div id="file-list-page"></div>
        </div>
    </div>
</div>


<!--// 文件编辑器-->
<script type="text/html" id="modelEdit">
    <div id="editor-content">
        <div class="editor-header">
            <ul>
                <li class="editor-action" data-value="save">保存</li>
                <li class="editor-action" data-value="help">帮助</li>
            </ul>
        </div>
        <div class="editor-main">
            <pre id="editor-main-content" style="height: 630px"></pre>
        </div>
        <div class="editor-toolbar">
            <div class="pull-left size-ellipsis">
                <span class="size-ellipsis">文件名称：<b id="editor-file"></b></span>
            </div>
        </div>
    </div>
</script>
<!-- js部分 -->
<script type="text/javascript" src="../../assets/libs/ace/ace.js"></script>
<script type="text/javascript" src="../../assets/libs/jquery/clipboard.min.js"></script>
<script>
    layui.use(['jquery', 'layer','contextMenu', 'upload', 'admin', 'dropdown', 'dataGrid', 'notice','laypage', 'fileChoose'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var contextMenu = layui.contextMenu;
        var upload = layui.upload;
        var admin = layui.admin;
        var setter = layui.setter;
        var notice = layui.notice;
        var fileChoose = layui.fileChoose;
        var laypage = layui.laypage;

        var dataList = [],
            route = setter.getCache('route'),
            setDir = '%2F';

        if(route){
            setDir = route.dir || '%2F';
        }
        // 编辑器
        var editor = null;

        // 附件上传
        let uploadInst = upload.render({
            elem: '#file-btn-upload',
            accept: 'file',
            // 限制大小
            size: 2048,
            url: setter.base_server + '/system/annex/upload',
            headers: {
                'Authorization': setter.getToken()
            },
            field : 'file'
            ,multiple: true
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(2); //上传loading
            }
            ,done: function(res, index, upload){
                if (typeof(res.errcode) != 'undefined') {
                    if (res.errcode === 30001) {
                        setter.removeToken();
                        layui.notice.msg('用户失效，请重新登录！', {icon: 2, timeout: 1500}, function () {
                            location.reload();
                        });
                        return false;
                    }
                    notice.msg(res.errmsg,{icon:2});
                }
                layer.closeAll('loading'); //关闭loading
                renderList();
            }
            ,error: function(index, upload){
                layer.closeAll('loading'); //关闭loading
            }
        });

        // 渲染列表
        function renderList(dir,page = 1, limit = 10) {
            dir || (dir = $('#tv-current-position').text());
            setter.putCache('route',{dir: encodeURIComponent(dir)});
            // 2020/03/11 重载到上传目录
            uploadInst.reload({ data : { dir:  dir  } });
            layer.load(2);
            admin.req('system/annex', {dir: dir, page, limit}, function (res) {
                layer.closeAll('loading');
                if (res.code === 10000) {
                    dataList = res.data;
                    // 渲染数据
                    var htmlStr = fileChoose.renderList({
                        data: dataList.list,
                        response: {
                            smUrl: 'thumbs'
                        },
                        menu: [{
                            name: '预览',
                            event: 'preview'
                        }]
                    });
                    $('#file-choose-list').html(htmlStr);
                    // 渲染分页
                    laypage.render({
                        elem: "file-list-page",
                        count: dataList.count, // 总数据
                        curr: page, // 当前页
                        limit: limit,
                        limits: limit || [10, 20, 30, 40, 50, 60, 70, 80, 90],
                        groups: 3,
                        layout: ["prev", "page", "next", "skip", "count", "limit"],
                        prev: '<i class="layui-icon">&#xe603;</i>',
                        next: '<i class="layui-icon">&#xe602;</i>',
                        jump: function (t, e) {
                            !e && renderList(dir, t.curr, t.limit);
                        }
                    })

                } else {
                    notice.msg('加载文件列表失败', {icon: 2});
                    $('#file-btn-back').addClass('layui-disabled');
                }

            }, 'GET');
        }
        // 初始化赋值
        $('#tv-current-position').text(decodeURIComponent(setDir));
        renderList(decodeURIComponent(setDir));

        // 列表右键事件
        $(document).on('contextmenu', '#file-choose-list .file-choose-list-item', function (e) {
            var t = $(this),
                cx = e.clientX,
                cy = e.clientY,
                data = dataList.list[t.data('index')];
            contextMenu.show([{
                name: '重命名',
                click: function () {
                    //notice.msg('点击了重命名'+ data.name , {icon: 3});
                    // 弹窗输入
                    layer.prompt({
                        title: '重命名' + (data.type === 'dir' ? '目录' : '文件'),
                    }, function (value, index, elem) {
                        // operation
                        (value !== data.name) && operation({
                            name: data.name,
                            change: value,
                            folder: (data.type === 'dir'),
                            rename: true
                        }, 'put');
                        layer.close(index);
                    });
                    $('.layui-layer-input').attr('placeholder', (data.type === 'dir' ? '目录' : '文件') + '名称，请勿使用中文名');
                    $('.layui-layer-input').val(data.name);
                    return false;
                }
            }, {
                name: '<span style="color: red;">删除</span>',
                click: function () {
                    operation({name: data.name, folder: (data.type === 'dir')}, 'delete');
                }
            }], cx, cy);
            e.stopPropagation();
            return false;
        });

        // 列表点击事件
        $(document).off('click.fclip').on('click.fclip', '#file-choose-list .file-choose-list-item', function (e) {
            var item = dataList.list[$(this).data('index')];
            if (item.isDir) {  // 是否是文件夹
                var cDir = $('#tv-current-position').text();
                cDir += (cDir == '/' ? item.name : ('/' + item.name));
                $('#tv-current-position').text(cDir);
                setter.putCache('route',{dir: encodeURIComponent(cDir)});
                // 2020/03/11 重载到上传目录
                uploadInst.reload({ data : { dir:  cDir } });
                renderList(cDir);
            } else {
                var $cMenu = $(this).find('.file-choose-oper-menu');
                $('.file-choose-oper-menu').not($cMenu).removeClass('show');
                $cMenu.toggleClass('show');
                e.stopPropagation();
            }
        });

        // 点击空白隐藏下拉框
        $(document).off('click.fclomp').on('click.fclomp', function (e) {
            $('.file-choose-oper-menu').removeClass('show');
        });

        // 菜单事件监听
        $(document).off('click.fclomip').on('click.fclomip', '#file-choose-list .file-choose-oper-menu-item', function () {
            var t = $(this),
                event = t.data('event'),
                data = dataList.list[t.parent().parent().data('index')],
                cDir = $('#tv-current-position').text();

            if (event == 'edit') {  // 编辑
                // 读取文件数据
                admin.req('system/annex/operation', {name:data.name, dir: cDir}, function(res) {
                    if (res.code === 10000){
                        // 打开编辑窗
                        admin.open({
                            type: 1,
                            area: ['80%','80%'], //宽高
                            title: '在线编辑',
                            data: res.data,
                            tpl: true,  // 增加tpl:true开启模板引擎
                            content: $('#modelEdit').html(),
                            success: function (layero, dIndex) {
                                $(layero).children('.layui-layer-content').css('overflow', 'visible');
                                // 初始化编辑器
                                ace.require("ace/ext/language_tools");
                                editor = ace.edit("editor-main-content");
                                editor.session.setMode("ace/mode/" + data.type);
                                editor.setFontSize(16);
                                editor.setHighlightActiveLine(true);
                                editor.setTheme("ace/theme/chrome");
                                // 赋值内容
                                editor.setValue(res.data.content);
                                // 编辑器菜单操作
                                $('#editor-content .editor-action').click(function () {
                                    var t = $(this),
                                        d = t.attr('data-value');
                                    if (d === 'save'){
                                        if (editor.getValue() === ""){
                                            notice.msg('输入内容为空', {icon:2});
                                            return false;
                                        }
                                        // 读取编辑器内容
                                        operation({name: $('#editor-file')[0].innerText, content:editor.getValue()}, 'put');
                                        layer.closeAll();
                                    }else {
                                        notice.msg('等待开发', {icon:3});
                                    }
                                });
                            }
                        });
                        // 赋值名称
                        $('#editor-file')[0].innerText = res.data.name;
                    }else {
                        notice.msg('读取文件数据失败', {icon: 2})
                    }

                });
            } else if (event == 'preview') {
                var url = data.url;
                if ('img' === fileChoose.getFileType(url)) {
                    var imgUrls = [], start = 0;
                    for (var i = 0; i < dataList.list.length; i++) {
                        var tUrl = dataList.list[i].url;
                        if ('img' === fileChoose.getFileType(tUrl)) {
                            imgUrls.push({src: tUrl, alt: dataList.list[i]['name']});
                        }
                        if (url === tUrl) {
                            start = imgUrls.length - 1;
                        }
                    }
                    layer.photos({photos: {start: start, data: imgUrls}, shade: .1, closeBtn: true});
                } else {
                    layer.confirm('这不是图片类型，可能需要下载才能预览，确定要打开吗？', {
                        title: '温馨提示',
                        area: '260px',
                        shade: .1
                    }, function (index) {
                        layer.close(index);
                        window.open(url);
                    });

                }
            } else {
                layer.msg('点击了' + event + '，索引' + dataIndex, {icon: 1});
            }
        });

        // 刷新
        $('#file-btn-refresh').click(function () {
            var cDir = $('#tv-current-position').text();
            renderList(cDir);
        });

        // 返回上级
        $('#file-btn-back').click(function () {
            var cDir = $('#tv-current-position').text();
            if (cDir != '/') {
                cDir = cDir.substring(0, cDir.lastIndexOf('/'));
                cDir || (cDir = '/');
                $('#tv-current-position').text(cDir);
                setter.putCache('route',{dir: encodeURIComponent(cDir)});
                // 2020/03/11 重载到上传目录
                uploadInst.reload({ data : { dir:  cDir } });
                renderList(cDir);
            }
        });

        // 新建文件夹
        $('.create-btn').click(function () {
            var t = $(this),
                d = t.attr('data-value');
            // 弹窗输入
            layer.prompt({
                title: '新建' + (d === 'file'? '文件' : '目录'),
            }, function(value, index, elem) {
                // todo 验证
                if (d === 'file' && !(/^\w+\.{1}[a-z]+$/.test(value))){
                    notice.msg('文件名称错误', {icon: 2});
                    return false;
                }
                // operation
                operation({name: value, folder: (d !== 'file')}, 'post');
                layer.close(index);
            });
            $('.layui-layer-input').attr('placeholder', (d === 'file'? '文件' : '目录') + '名称，请勿使用中文名');
            return false;
        });

        // 统一操作
        function operation(data, method = 'get') {
            var cDir = $('#tv-current-position').text(),
                f = function () {
                    // operation
                    admin.req('system/annex/operation', $.extend({}, data, {dir: cDir}), function (res) {
                        if (res.code === 10000) {
                            notice.msg('操作成功', {icon: 1});
                            renderList(cDir);
                        } else {
                            notice.msg(res.message, {icon: 2});
                        }
                    }, method);
                };
            if (method === 'get'){
                layer.confirm('确定要删除吗？', {title: false, closeBtn: 0, shade: .1}, function (index) {
                    f();
                    layer.close(index);
                });
            }else {
                f();
            }
        }

    });
</script>