Calculation/app/view/file/config_dir_modal.ejs

<!-- 授权用户 Modal -->
<div class="modal fade" id="auth-user-modal" data-backdrop="static">
    <div class="modal-dialog modal-lgx" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">授权用户</h5>
            </div>
            <div class="modal-body">
                <div class="mb-3">当前目录：<strong id="auth-user-filing-name"></strong></div>
                <div class="d-flex align-items-center mb-3">
                    <div class="dropdown mr-4">
                        <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button" id="cd-auth-user-dropdown"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">添加用户</button>
                        <div class="dropdown-menu" aria-labelledby="cd-auth-user-dropdown"
                             style="width:260px;">
                            <div class="mb-2 p-2">
                                <input type="text" class="form-control form-control-sm" id="cd-auth-user-search"
                                       placeholder="姓名/手机 检索" aria-label="按姓名或手机号检索用户" autocomplete="off">
                            </div>
                            <dl class="list-unstyled book-list mb-0" id="cd-auth-user-options"></dl>
                        </div>
                    </div>
                    <a href="javascript:void(0);" class="cd-auth-list-action text-muted mr-4" id="cd-auth-batch-delete"
                       aria-disabled="true" tabindex="-1">批量删除</a>
                </div>
                <div class="modal-height-400 scroll-y">
                    <table class="table table-bordered table-sm">
                        <thead>
                        <tr class="text-center">
                            <th width="65px" class="align-middle"><input type="checkbox" id="cd-auth-user-select-all" class="mr-1">选择</th>
                            <th class="align-middle">用户</th>
                            <th width="70px" class="align-middle">查看</th>
                            <th width="100px" class="align-middle"><input type="checkbox" class="cd-auth-permission-all" data-permission="upload_reference"><br>上传/引用</th>
                            <th width="90px" class="align-middle"><input type="checkbox" class="cd-auth-permission-all" data-permission="edit_file"><br>编辑文件</th>
                            <th width="90px" class="align-middle"><input type="checkbox" class="cd-auth-permission-all" data-permission="edit_dir"><br>编辑目录</th>
                            <th width="90px" class="align-middle"><input type="checkbox" class="cd-auth-permission-all" data-permission="lock_file"><br>锁定文件</th>
                            <th width="65px" class="align-middle">移除</th>
                        </tr>
                        </thead>
                        <tbody id="auth-user-list"></tbody>
                    </table>
                </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="auth-user-save">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 批量授权 Modal -->
<div class="modal fade" id="cd-auth-target-modal" data-backdrop="static">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cd-auth-target-modal-title">批量新增授权</h5>
            </div>
            <div class="modal-body p-3">
                <div class="row no-gutters">
                    <div class="col-md-4 pr-md-2">
                        <div class="mb-2">选择目录</div>
                        <div class="border modal-height-400 scroll-y">
                            <table class="table table-bordered table-sm mb-0">
                                <thead>
                                <tr class="text-center">
                                    <th width="55px" class="align-middle">选择</th>
                                    <th class="align-middle">目标目录</th>
                                </tr>
                                </thead>
                                <tbody id="cd-auth-target-list"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-8 pl-md-2">
                        <div class="d-flex align-items-center mb-2">
                            <div class="dropdown mr-3">
                                <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button"
                                        id="cd-auth-target-user-dropdown" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">添加用户</button>
                                <div class="dropdown-menu" aria-labelledby="cd-auth-target-user-dropdown"
                                     style="width:260px;">
                                    <div class="mb-2 p-2">
                                        <input type="text" class="form-control form-control-sm" id="cd-auth-target-user-search"
                                               placeholder="姓名/手机 检索" aria-label="按姓名或手机号检索用户" autocomplete="off">
                                    </div>
                                    <dl class="list-unstyled book-list mb-0" id="cd-auth-target-user-options"></dl>
                                </div>
                            </div>
                            <a href="javascript:void(0);" class="text-muted" id="cd-auth-target-user-delete"
                               aria-disabled="true" tabindex="-1">批量删除</a>
                            <div class="text-danger ml-auto" id="cd-auth-cover-warning" style="display:none;">
                                所选目录原授权用户将被覆盖，请谨慎操作
                            </div>
                        </div>
                        <div class="border modal-height-400 scroll-y">
                            <table class="table table-bordered table-sm mb-0">
                                <thead>
                                <tr class="text-center">
                                    <th width="60px" class="align-middle"><input type="checkbox" id="cd-auth-target-user-select-all" class="mr-1">选择</th>
                                    <th class="align-middle">用户</th>
                                    <th width="60px" class="align-middle">查看</th>
                                    <th width="90px" class="align-middle"><input type="checkbox" class="cd-auth-target-permission-all" data-permission="upload_reference"><br>上传/引用</th>
                                    <th width="80px" class="align-middle"><input type="checkbox" class="cd-auth-target-permission-all" data-permission="edit_file"><br>编辑文件</th>
                                    <th width="80px" class="align-middle"><input type="checkbox" class="cd-auth-target-permission-all" data-permission="edit_dir"><br>编辑目录</th>
                                    <th width="80px" class="align-middle"><input type="checkbox" class="cd-auth-target-permission-all" data-permission="lock_file"><br>锁定文件</th>
                                    <th width="55px" class="align-middle">移除</th>
                                </tr>
                                </thead>
                                <tbody id="cd-auth-target-user-list"></tbody>
                            </table>
                        </div>
                    </div>
                </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="cd-auth-target-save" disabled>确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑目录 Modal -->
<div class="modal fade" id="cd-edit-modal" data-backdrop="static">
    <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-5 py-4">
                <div class="form-group row align-items-center">
                    <label class="col-2 col-form-label text-right" for="cd-edit-parent">目录：</label>
                    <div class="col-10">
                        <select class="form-control form-control-sm" id="cd-edit-parent"></select>
                        <small class="form-text text-warning d-none" id="cd-edit-move-hint"></small>
                    </div>
                </div>
                <div class="form-group row align-items-center">
                    <label class="col-2 col-form-label text-right" for="cd-edit-dir-name">名称：</label>
                    <div class="col-10">
                        <input type="text" class="form-control form-control-sm" id="cd-edit-dir-name" maxlength="100">
                    </div>
                </div>
                <div class="form-group row mb-0">
                    <label class="col-2 col-form-label text-right" for="cd-edit-fixed">固定目录：</label>
                    <div class="col-10 pt-2">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="cd-edit-fixed">
                            <label class="custom-control-label" for="cd-edit-fixed">固定</label>
                        </div>
                        <small class="form-text text-muted">固定后，目录无法被用户删除</small>
                    </div>
                </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="cd-edit-save">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 批量移动文件 Modal -->
<div class="modal fade" id="cd-move-modal" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">批量移动文件</h5>
            </div>
            <div class="modal-body">
                <p>将 <strong id="cd-move-source-name"></strong> 所有上传的文件移动到：</p>
                <div class="modal-height-300 scroll-y">
                    <table class="table table-bordered table-sm">
                        <thead><tr class="text-center"><th width="40px">选择</th><th>目标目录</th></tr></thead>
                        <tbody id="cd-move-target-list"></tbody>
                    </table>
                </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="cd-move-ok">确定移动</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑上报说明 Modal -->
<div class="modal fade" id="cd-tips-modal" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑上报说明 - <span id="cd-tips-filing-name"></span></h5>
            </div>
            <div class="modal-body">
                <textarea class="form-control" id="cd-tips-input" rows="4" placeholder="请输入上报说明"></textarea>
            </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="cd-tips-save">保存</button>
            </div>
        </div>
    </div>
</div>