Calculation/app/view/file/filesjs.ejs

<style>
    #file-right-view {
        position: relative;
    }
    #file-right-spr.file-main-resizer {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 12px;
        height: 100%;
        margin-left: 0;
        float: none;
        cursor: col-resize;
        z-index: 20;
        user-select: none;
    }
    #file-right-spr .file-main-resizer-button {
        position: absolute;
        top: 50%;
        left: 1px;
        width: 10px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-50%);
        border: 1px solid #b8c2cc;
        border-radius: 0 4px 4px 0;
        background-color: #fff;
        color: #7d8790;
        box-shadow: 1px 0 3px rgba(0, 0, 0, .12);
        pointer-events: none;
        transition: border-color .15s, background-color .15s, color .15s;
    }
    #file-right-spr:hover .file-main-resizer-button {
        border-color: #409eff;
        background-color: #ecf5ff;
        color: #409eff;
    }
</style>
<div class="panel-content">
    <div class="panel-title fluid">
        <div class="title-main  d-flex justify-content-between">
            <div>资料管理/<%- ctx.subProject.name %><span class="ml-4" id="file-count"></span></div>
            <div class="ml-auto">
                <% if (canManageDir) { %>
                <a href="/sp/<%- ctx.subProject.id %>/config-dir" class="btn btn-outline-primary btn-sm ml-1">配置目录</a>
                <% } %>
            </div>
        </div>
    </div>
    <div class="content-wrap row pr-46">
        <div class="d-flex flex-nowrap w-100 sub-content">
            <div class="c-body" id="left-view" style="width: 100%; min-width: 0; flex: 0 0 auto;">
                <div class="sjs-height-0 d-flex flex-nowrap w-100" style="margin-left: 0 !important; overflow: hidden;">
                    <div class="border-right" id="file-left-view" style="width: 22%; min-width: 160px; flex: 0 0 auto; overflow: hidden;">
                        <div class="d-flex flex-row">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm  text-primary dropdown-toggle" data-toggle="dropdown" id="zhankai" aria-expanded="false">显示层级</button>
                                <div class="dropdown-menu" aria-labelledby="zhankai" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 21px, 0px); top: 0px; left: 0px; will-change: transform;">
                                    <a class="dropdown-item" name="showLevel" tag="1" href="javascript: void(0);">第一层</a>
                                    <a class="dropdown-item" name="showLevel" tag="2" href="javascript: void(0);">第二层</a>
                                    <a class="dropdown-item" name="showLevel" tag="3" href="javascript: void(0);">第三层</a>
                                    <a class="dropdown-item" name="showLevel" tag="4" href="javascript: void(0);">第四层</a>
                                    <a class="dropdown-item" name="showLevel" tag="last" href="javascript: void(0);">最底层</a>
                                </div>
                            </div>
                            <div class="p-2 js-can-edit-dir" style="display:none;"><a href="javascript: void(0);" id="add-slibing">添加同级</a></div>
                            <div class="p-2 js-can-edit-dir" style="display:none;"><a href="javascript: void(0);" id="add-child">添加子级</a></div>
                        </div>
                        <div id="filing-spread" style="width: 100%; height: calc(100% - 40px);"></div>
                    </div>
                    <div id="file-right-view" style="width: 76%; min-width: 0; flex: 0 0 auto; overflow: hidden;">
                        <div class="resize-x file-main-resizer" id="file-right-spr" r-Type="width" div1="#file-left-view" div2="#file-right-view" title="拖动调整目录和文件区域宽度" a-type="percent" store-id="file-detail-sjs" store-version="1.0.0" min="20">
                            <span class="file-main-resizer-button" aria-hidden="true">&#8942;</span>
                        </div>
                        <div class="ml-2" id="file-view" style="display: none; min-width: 0; overflow: hidden;">
                            <div class="d-flex flex-nowrap align-items-stretch w-100" style="min-width: 0;">
                                <div class="flex-grow-1 pr-2" style="min-width: 0; overflow-x: auto;">
                                    <div class="d-flex flex-row">
                                        <div class="py-2 pr-2 js-can-upload" style="display:none;"><a href="#add-file" data-toggle="modal" data-target="#add-file">上传文件</a></div>
                                        <div class="py-2 pr-2 js-can-upload" style="display:none;"><a href="#add-big-file" data-toggle="modal" data-target="#add-big-file">大文件上传</a></div>
                                        <div class="p-2 js-can-upload" id="rela-file-btn" style="display:none;"><a href="#rela-file" data-toggle="modal" data-target="#rela-file">引用文件</a></div>
                                        <div class="p-2"><a href="javascript: void(0)" id="batch-del-file-btn">批量删除</a></div>
                                        <div class="p-2"><a href="javascript: void(0)" id="batch-download">批量下载</a></div>
                                        <div class="p-2">
                                            <span id="showPage">
                                                <a href="javascript:void(0);" class="page-select ml-3" content="pre"><i class="fa fa-chevron-left"></i></a>
                                                <span id="curPage">1</span>/<span id="curTotalPage">10</span>
                                                <a href="javascript:void(0);" class="page-select mr-3" content="next"><i class="fa fa-chevron-right"></i></a>
                                            </span>
                                        </div>
                                    </div>
                                    <table class="table table-hover table-bordered" style="min-width: 590px;">
                                        <thead>
                                        <tr class="text-center">
                                            <th width="60px">选择</th>
                                            <th>文件名称 <span name="file-sort" field="filename" tag="filename|desc"><i class="fa fa-sort" aria-hidden="true"></i></span></th>
                                            <th width="70px">锁定 <i class="fa fa-info-circle text-muted" title="锁定后，任何用户均不能编辑、移动或删除该文件"></i></th>
                                            <th width="10%">上传人</th>
                                            <th width="20%">上传时间 <span name="file-sort" field="create_time" tag="create_time|asc"><i class="fa fa-sort-amount-desc" aria-hidden="true"></i></span></th>
                                            <th width="10%">文件类型</th>
                                            <th width="60px">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="file-list">
                                        </tbody>
                                    </table>
                                </div>
                                <div class="border ml-2" style="width: 250px; flex: 0 1 250px; min-width: 180px; max-width: 320px; min-height: 260px; overflow: hidden;">
                                    <div class="font-weight-bold text-center border-bottom py-2">上报说明</div>
                                    <div id="filing-upload-tips" class="p-3 text-muted"
                                         style="white-space: pre-wrap; overflow-wrap: anywhere; max-height: calc(100vh - 230px); overflow-y: auto;">暂无上报说明</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="c-body" id="right-view" style="display: none; width: 33%; min-width: 0; flex: 0 0 auto; overflow: hidden;">
                <div class="resize-x" id="right-spr" r-Type="width" div1="#left-view" div2="#right-view" title="调整大小" a-type="percent"></div>
                <div class="tab-content">
                    <div id="search" class="tab-pane tab-select-show mr-1">
                        <div class="sjs-bar mt-1">
                            <div class="input-group input-group-sm pb-1">
                                <div class="input-group-prepend">
                                    <select class="input-group-text" id="search-filter">
                                        <option value="cur">当前分类</option>
                                        <option value="all">全部分类</option>
                                    </select>
                                </div>
                                <input id="search-keyword" type="text" class="form-control" autocomplete="off" placeholder="输入文件名称查找" aria-label="Recipient\'s username" aria-describedby="button-addon2">
                                <div class="input-group-append"><button class="btn btn-outline-secondary" type="button">搜索</button></div>
                            </div>
                        </div>
                        <div class="sjs-sh scroll-y">
                            <table class="table table-bordered">
                                <tr class="text-center"><th>文件名称</th><th width="15%">上传人</th><th width="15%">操作</th></tr>
                                <tbody id="search-list"></tbody>
                            </table>
                        </div>
                    </div>
                    <div id="reference" class="tab-pane tab-select-show">
                    </div>
                </div>
            </div>
        </div>
        <!--右侧菜单-->
        <div class="side-menu">
            <ul class="nav flex-column right-nav" id="side-menu">
                <li>
                    <a class="nav-link" content="#search" href="javascript: void(0);">查找定位</a>
                </li>
                <li>
                    <a class="nav-link" content="#reference" href="javascript: void(0);">参考文件</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<% if (needFilingInitialization) { %>
<div class="modal fade" id="filing-initialization-modal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">初始化资料目录</h5>
            </div>
            <div class="modal-body px-4 py-4" style="min-height: 205px;">
                <div class="d-flex flex-wrap justify-content-between mb-3">
                    <label class="mb-0 mr-3">
                        <input type="radio" name="filing-initialization-type" value="blank" checked class="mr-1">新创建目录
                    </label>
                    <label class="mb-0 mr-3">
                        <input type="radio" name="filing-initialization-type" value="template" class="mr-1">从模板库中选取
                    </label>
                    <label class="mb-0">
                        <input type="radio" name="filing-initialization-type" value="project" class="mr-1">从其他项目中选取
                    </label>
                </div>
                <div id="filing-initialization-description" class="text-muted mb-3">从空白目录开始创建资料目录</div>
                <div id="filing-initialization-template-wrap" style="display:none;">
                    <select class="form-control form-control-sm" id="filing-initialization-template">
                        <option value="">选择系统模板库</option>
                        <% for (const template of filingInitializationTemplates) { %>
                        <option value="<%= template.id %>"><%= template.name %></option>
                        <% } %>
                    </select>
                </div>
                <div id="filing-initialization-project-wrap" style="display:none;">
                    <select class="form-control form-control-sm" id="filing-initialization-project">
                        <option value="">选择项目</option>
                        <% for (const project of filingInitializationProjects) { %>
                        <option value="<%= project.id %>"><%= project.name %></option>
                        <% } %>
                    </select>
                    <% if (filingInitializationProjects.length === 0) { %>
                    <small class="form-text text-warning">当前账号暂无其他可复制目录的项目</small>
                    <% } %>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-sm btn-primary" id="filing-initialization-ok">确定</button>
            </div>
        </div>
    </div>
</div>
<% } %>
<script>
    let canFiling = false;
    let canUpload = false;
    const filing = JSON.parse(unescape('<%- escape(JSON.stringify(filing)) %>'));
    const category = JSON.parse(unescape('<%- escape(JSON.stringify(categoryData)) %>'));
    const whiteList = JSON.parse('<%- JSON.stringify(fileUploadWhitelist) %>');
    let canEdit = false;
    let canLockFile = false;
    const filingPermissionMap = JSON.parse(unescape('<%- escape(JSON.stringify(filingPermissionMap)) %>'));
    const projectFileLocked = <%- Boolean(ctx.subProject.lock_file) %>;
    const fileReferenceList = JSON.parse('<%- JSON.stringify(fileReferenceList) %>');
    const needFilingInitialization = <%- Boolean(needFilingInitialization) %>;
</script>