manager.html 30.8 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html>

<head lang='zh'>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"/>
    <title>协同办公</title>
    <link rel='stylesheet' href='./css/alert/alert.css'/>
    <link href="./assets/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="./assets/bootstrap/bootstrap-table.min.css" rel="stylesheet">
    <link href="./assets/bootstrap/bootstrap-table-page-jump-to.min.css" rel="stylesheet">
    <script src="./assets/config/extApiConfig.js"></script>
    <script nomodule>
        alert("您的浏览其版本不支持，请升级最新版本！")
    </script>
    <style>
        td {
            word-break: break-all;
        }
    </style>
</head>

<body>
<!--<div class="container-fluid py-4" style="background-color: white">
    <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 border-bottom">
        <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
            <span class="fs-4">在线文档管理</span>
        </a>

        <div class="col-md-3 text-end">
            <button type="button" class="btn btn-outline-primary me-2">登录</button>
            <button type="button" class="btn btn-primary">退出</button>
        </div>
    </header>
</div>-->
<div class="p-2">
    <div id="toolbar" style="width: 500px;display: flex">
        <input type="text" class="form-control" id="documentKeyWord" placeholder="搜索关键字">
        <div class="w-100">
            <button class="btn btn-primary mx-lg-1" type="button" id="documentQuery">搜索</button>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#docManagerModal"
                    data-bs-whatever="@Add">新增
            </button>
        </div>
    </div>
    <table
            id="table"
            class="table-borderless"
            data-locale="zh-CN"
            data-search="false"
            data-show-jump-to="true"
            data-pagination="true"
            data-side-pagination="server"
            data-toolbar="#toolbar">
    </table>
</div>

<!--新增和编辑-->
<div class="modal fade" id="docManagerModal" tabindex="-1" aria-labelledby="docModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="docModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" class="form-control" id="id" readonly="readonly">
                    <div class="mb-3">
                        <label for="docNo" class="col-form-label">文档编号:</label>
                        <input type="text" class="form-control" id="docNo" readonly="readonly">
                    </div>
                    <div class="mb-3">
                        <label for="docName" class="col-form-label">文档名称:</label>
                        <input type="text" class="form-control" id="docName">
                    </div>
                    <!--                    <div class="mb-3">
                                            <label for="docStateView" class="col-form-label">文档状态:</label>
                                            <div class="form-check form-switch" id="docStateView">
                                                <label class="form-check-label" for="docState">启用/停用</label>
                                                <input class="form-check-input" type="checkbox" role="switch" id="docState">
                                            </div>
                                        </div>-->
                    <div class="mb-3">
                        <label for="docStateView" class="col-form-label">文档状态:</label>
                        <div class="form-check d-flex" id="docStateView">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="docState" value="1" id="docState1"
                                       checked>
                                <label class="form-check-label" for="docState1">
                                    启用
                                </label>
                            </div>
                            <div class="form-check mx-lg-2">
                                <input class="form-check-input" type="radio" name="docState" value="0" id="docState2">
                                <label class="form-check-label" for="docState2">
                                    禁用
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="docDesc" class="col-form-label">文档描述:</label>
                        <textarea class="form-control" id="docDesc"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveDocument">保存</button>
            </div>
        </div>
    </div>
</div>

<!--授权-->
<div class="modal fade " id="documentRightModal" tabindex="-1" aria-labelledby="docModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">文档授权</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <div id="userToolbar" class="d-flex">
                            <input type="text" class="form-control" id=userKeyWord" placeholder="搜索用户">
                            <div class="w-100">
                                <button class="btn btn-primary mx-lg-1" type="button" id="userQuery">搜索</button>
                                <button type="button" class="btn btn-secondary" id="syncUserBtn">同步用户</button>
                            </div>
                        </div>
                        <table
                                id="tableUser"
                                class="table-borderless"
                                data-locale="zh-CN"
                                data-search="false"
                                data-show-jump-to="true"
                                data-pagination="true"
                                data-side-pagination="server"
                                data-toolbar="#userToolbar">
                        </table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!--弹框确认-->
<div>
    <div id="deleteMsg" class="toast" role="alert" aria-live="assertive" aria-atomic="true" ata-bs-autohide="false"
         data-autohide="false">
        <div class="toast-header">
            <strong class="me-auto">删除提示</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            删除后将无法恢复，您确认删除吗？
            <div class="mt-2 pt-2 border-top " style="text-align: right">
                <button type="button" class="btn btn-primary btn-sm" id="document_confirm_ok">确认删除</button>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">取消</button>
            </div>
        </div>
    </div>
</div>

<!--设计-->
<div class="modal fade" id="documetViewModal" tabindex="-1" aria-labelledby="modalFullscreenLabel" aria-modal="true"
     role="dialog">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <!--            <div class="modal-header">
                            <h5 class="modal-title h4" id="modalFullscreenLabel"></h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>-->
            <div class="modal-body" style="overflow: hidden;padding: 0px">
                <iframe src="" title="" style="width: 100%;height: 100%" allowfullscreen></iframe>
            </div>
            <!--            <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>-->
        </div>
    </div>
</div>


<script src="./plugins/js/plugin.js"></script>
<script src="./assets/bootstrap/bootstrap.bundle.min.js"></script>
<script src="./assets/bootstrap/bootstrap-table.min.js"></script>
<script src="./assets/bootstrap/bootstrap-table-page-jump-to.min.js"></script>
<script src="./assets/bootstrap/bootstrap-table-zh-CN.min.js"></script>


<script type="module">
    import {showDanger, showSuccess, showWarning} from './assets/config/loading.js';

    var extApiConfig = window.extApiConfig;
    // 验证用户给
    var flag = window.userLogin.checkUser({docConfigApi: extApiConfig}, showWarning, showSuccess);

    if (flag) {
        var $table = $('#table')
        var $tableUser;
        $(function () {

            function reload() {
                $table.bootstrapTable('refresh');
            }

            // 查询
            $('#documentQuery').click(function () {
                reload();
            });

            // 同步用户
            $('#syncUserBtn').click(function () {
                var token = window.userLogin.getToken();
                if (token) {
                    $.get(extApiConfig.loginConfig.getUser.replace('#{tokenKey}', token), {}, function (res) {
                        // 请求成功
                        if (res && res.code === 0) {
                            var userArr = res.data.map(function (v) {
                                return {userId: v.id, userName: v.nickname};
                            });

                            if (userArr && userArr.length > 0) {
                                $.ajaxSettings.contentType = 'application/json; charset=utf-8';
                                $.post(extApiConfig.loginConfig.syncUser, JSON.stringify(userArr), function (res) {
                                    if (res && res.code === 0) {
                                        showSuccess(res.msg);
                                    } else {
                                        showWarning(res.msg);
                                    }
                                });
                            }
                        } else {
                            showWarning(res.msg);
                        }
                    })
                }
            });
            // 预览设计
            var documetViewModal = document.getElementById('documetViewModal')
            documetViewModal.addEventListener('show.bs.modal', function (event) {
                var button = event.relatedTarget
                var gridKey = button.getAttribute('data-bs-gridKey')
                var docName = button.getAttribute('data-bs-docName') + ` - 协同办公`
                /*var modalTitle = documetViewModal.querySelector('.modal-title')
                modalTitle.textContent = docName;*/

                var viewIframe = documetViewModal.querySelector('iframe')
                if (viewIframe) {
                    var params = window.location.search;
                    if (!params) {
                        params = `?gridKey=${gridKey}`;
                    } else {
                        params += `&gridKey=${gridKey}`;
                    }
                    viewIframe.src = window.extApiConfig.API_PREFIX + `/index.html${params}`;
                    viewIframe.title = docName;
                }
            });

            // 文档授权
            var documentRightModal = document.getElementById('documentRightModal')
            documentRightModal.addEventListener('show.bs.modal', function (event) {
                var button = event.relatedTarget
                var gridKey = button.getAttribute('data-bs-gridKey')
                var docName = button.getAttribute('data-bs-docname')

                $('#rightDocNo').val(gridKey);
                $('#rightDocName').val(docName);

                $tableUser = $('#tableUser')
                // 加载表格
                $tableUser.bootstrapTable({
                    method: 'get',
                    url: extApiConfig.loginConfig.getUserAll,// 请求路径
                    responseHandler: function (res) {
                        if (res && res.code !== 0) {
                            showWarning(res.msg);
                            return [];
                        }
                        return res.data;
                    },
                    striped: false, // 是否显示行间隔色
                    pageNumber: 1, // 初始化加载第一页
                    pagination: false,// 是否分页
                    height: 300,
                    sidePagination: 'server',// server:服务器端分页|client：前端分页
                    pageSize: 15,// 单页记录数
                    queryParams: function (params) {
                        return {
                            gridKey: gridKey,
                            keyWord: $('#userToolbar').find('input').val()
                        }
                    },
                    onLoadSuccess: function () {
                        $tableUser.bootstrapTable('hideColumn', 'userId');

                        // 搜索用户
                        $('#userQuery').click(function () {
                            $tableUser.bootstrapTable('refresh');
                        });

                        // 保存授权
                        $('[data-auth-type]').click(function () {
                            var that = $(this);
                            var userId = that.attr('data-bs-userId');
                            var gridKey = that.attr('data-bs-gridKey');
                            var type = that.attr('data-auth-type');
                            var index = that.attr('data-bs-index');
                            var shareId = that.attr('data-bs-shareId');

                            var isRead = $('input[name="isRead'+index+'"]:checked').val()
                            var isEdit = $('input[name="isEdit'+index+'"]:checked').val()

                            $.get(extApiConfig.loginConfig.saveUserAuth, {
                                userId: userId,
                                gridKey: gridKey,
                                type: type,
                                isRead: isRead,
                                isEdit: isEdit,
                                shareId:shareId
                            }, function (res) {
                                // 刷新
                                $tableUser.bootstrapTable('refresh');
                                if (res && res.code == 0) {
                                    showSuccess(res.msg);
                                } else {
                                    showWarning(res.msg);
                                }
                            })

                        });
                    },
                    columns: [/*{
                        field: 'state',
                        class: 'text-center',
                        width: '50px',
                        checkbox:true
                    }, */{
                        title: '用户Id',
                        field: 'userId',
                        sort: true,
                        class: 'text-center',
                        hidden: true
                    }, {
                        title: '用户昵称',
                        field: 'nickName',
                        sort: true,
                        class: 'text-center'
                    },{
                        title: '读取权限',
                        field: 'isRead',
                        sort: true,
                        class: 'text-center',
                        formatter: (value, row, index) => {
                            return `<div class="form-check d-flex">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="isRead${index}" value="1" id="isRead${index}"
                                        ${row.read ? 'checked' : ''}  ${row.state ? 'disabled' : ''}>
                                <label class="form-check-label" for="isRead${index}">
                                    启用
                                </label>
                            </div>
                            <div class="form-check mx-lg-2">
                                <input class="form-check-input" type="radio" name="isRead${index}" value="2" id="isRead${index}" ${!row.read ? 'checked' : ''} ${row.state ? 'disabled' : ''}>
                                <label class="form-check-label" for="isRead${index}">
                                    禁用
                                </label>
                            </div>
                        </div>`
                        }
                    },{
                        title: '编辑权限',
                        field: 'isEdit',
                        sort: true,
                        class: 'text-center',
                        formatter: (value, row, index) => {
                            return `<div class="form-check d-flex">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="isEdit${index}" value="1" id="isEdit${index}"
                                        ${ row.edit ? 'checked' : ''} ${row.state ? 'disabled' : ''}>
                                <label class="form-check-label" for="isEdit${index}">
                                    启用
                                </label>
                            </div>
                            <div class="form-check mx-lg-2">
                                <input class="form-check-input" type="radio" name="isEdit${index}" value="2" id="isEdit${index}" ${!row.edit ? 'checked' : ''} ${row.state ? 'disabled' : ''}>
                                <label class="form-check-label" for="isEdit${index}">
                                    禁用
                                </label>
                            </div>
                        </div>`
                        }
                    }, {
                        title: '同步时间',
                        field: 'syncTime',
                        sort: true,
                        class: 'text-center'
                    }, {
                        title: '操作',
                        field: 'op',
                        class: 'text-center',
                        width: '80px',
                        formatter: (value, row, index) => {
                            var htm = "";
                            if (row.state) {
                                // 已授权
                                htm += `<button type="button" data-auth-type="cancel" data-bs-index="${index}" data-bs-shareId="${row.shareId}" data-bs-userId="${row.userId}" data-bs-gridKey="${gridKey}" class="btn btn-outline-secondary btn-sm mx-lg-1">取消</button>`
                            } else {
                                // 未授权
                                htm += `<button type="button" data-auth-type="add" data-bs-index="${index}" data-bs-userId="${row.userId}" data-bs-gridKey="${gridKey}" class="btn btn-outline-primary btn-sm mx-lg-1">授权</button>`
                            }
                            return htm;
                        }
                    }]
                });

            });

            // 新增/编辑弹框
            var docManagerModal = document.getElementById('docManagerModal')
            docManagerModal.addEventListener('show.bs.modal', function (event) {
                var button = event.relatedTarget
                var recipient = button.getAttribute('data-bs-whatever')
                var modalTitle = docManagerModal.querySelector('.modal-title')

                var modalBodyInput = docManagerModal.querySelector('.modal-body input[id="docNo"]')
                // 新增文档
                if ('@Add' === recipient) {
                    modalTitle.textContent = '新增文档'
                    // 获取文档编号
                    if (extApiConfig.docManager && extApiConfig.docManager.getDocNo) {
                        $.get(extApiConfig.docManager.getDocNo, {}, function (res) {
                            // 请求成功
                            if (res && res.code === 0) {
                                modalBodyInput.value = res.data;
                            }
                        })
                    } else {
                        showWarning('没有配置文档管理接口地址！');
                    }
                    return;
                }


                // 编辑文档
                if ('@Edit' === recipient) {
                    var id = button.getAttribute('data-bs-id');
                    if (extApiConfig.docManager && extApiConfig.docManager.getDetail) {
                        $.get(extApiConfig.docManager.getDetail, {id: id}, function (res) {
                            // 请求成功
                            if (res && res.code === 0) {
                                var d = res.data;
                                modalBodyInput.value = d.listId;
                                $('#id').val(d.id);
                                $('#docName').val(d.docName);
                                // $('#docState').val(d.docState);
                                $('[name="docState"][value="' + d.docState + '"]').prop('checked', true)
                                $('#docDesc').val(d.docDesc);
                            }
                        })
                    } else {
                        showWarning('没有配置文档管理接口地址！');
                    }
                }
            })

            // 保存
            $('#saveDocument').click(function () {
                var userId = '';
                var userName = '';
                var userDetail = localStorage.getItem('userDetail');
                if (userDetail) {
                    var userObj = JSON.parse(userDetail);
                    userId = userObj.id;
                    userName = userObj.nickname;
                }
                var params = {
                    id: $('#id').val(),
                    listId: $('#docNo').val(),
                    docName: $('#docName').val(),
                    docState: $('[name="docState"]:checked').val(),
                    docDesc: $('#docDesc').val(),
                    createUserId: userId,
                    createUserName: userName
                }

                // 保存
                if (extApiConfig.docManager && extApiConfig.docManager.saveOrUpdateDoc) {
                    $.ajaxSettings.contentType = 'application/json; charset=utf-8';
                    $.post(extApiConfig.docManager.saveOrUpdateDoc, JSON.stringify(params), function (res) {
                        if (res && res.code === 0) {
                            showSuccess(res.msg);
                        }
                        reload();
                        $("#docManagerModal").modal('hide');
                    }).error(function (err) {
                        if (err && err.responseJSON && err.responseJSON.resp_msg) {
                            showDanger(err.responseJSON.resp_msg);
                            $("#docManagerModal").modal('hide');
                        }
                    });
                    return;
                }
                // alert('没有配置文档管理接口地址！');
                showWarning('没有配置文档管理接口地址！');
            });

            // 删除确认
            $('#document_confirm_ok').click(function () {
                var id = $(this).attr('data-id');
                var gridKey = $(this).attr('data-gridKey');
                if (extApiConfig.docManager && extApiConfig.docManager.deleteDoc) {
                    $.get(extApiConfig.docManager.deleteDoc, {id: id, gridKey: gridKey}, function (res) {
                        // 请求成功
                        if (res && res.code === 0) {
                            showSuccess(res.msg);
                            var toastView = document.getElementById('deleteMsg')
                            var toast = new bootstrap.Toast(toastView)
                            toast.hide()
                            reload();
                        }
                    })
                }
            });

            // 加载表格
            $table.bootstrapTable({
                method: 'get',
                url: extApiConfig.docManager.pageList,// 请求路径

                responseHandler: function (res) {
                    // var data = res.data;
                    // return {
                    //     rows: data.records,
                    //     total: data.total,
                    // }
                    if (res && res.code !== 0) {
                        showWarning(res.msg);

                        return [];
                    }
                    return res.data;
                },
                striped: false, // 是否显示行间隔色
                pageNumber: 1, // 初始化加载第一页
                pagination: false,// 是否分页
                sidePagination: 'server',// server:服务器端分页|client：前端分页
                pageSize: 15,// 单页记录数
                queryParams: function (params) {
                    // var temp = {// 如果是在服务器端实现分页，limit、offset这两个参数是必须的
                    //     "page": (params.offset / params.limit) + 1, // 当前页码
                    //     "limit": params.limit, // 每页显示数量
                    // };
                    // return temp;

                    var userId = '';
                    var userDetail = localStorage.getItem('userDetail');
                    if (userDetail) {
                        var userObj = JSON.parse(userDetail);
                        userId = userObj.id;
                    }

                    return {
                        docName: $('#documentKeyWord').val(),
                        docDesc: $('#documentKeyWord').val(),
                        createUserId: userId
                    }
                },
                onLoadSuccess: function () {
                    var toastView = document.getElementById('deleteMsg')
                    $('button[btn-type="delete"]').click(function () {
                        var top = $(this).offset().top + 40;
                        $('#deleteMsg').parent().css({
                            "position": "absolute",
                            "top": top + "px",
                            "right": "20px",
                        });
                        $('#document_confirm_ok').attr('data-id', $(this).attr('data-id'))
                        $('#document_confirm_ok').attr('data-gridKey', $(this).attr('data-gridKey'))
                        var toast = new bootstrap.Toast(toastView)
                        toast.show()
                    });
                },
                columns: [{
                    title: '序号',
                    field: 'id',
                    class: 'text-center',
                    width: '50px',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    title: '文档名称',
                    field: 'docName',
                    sort: true,
                    class: 'text-center',
                    width: '400px'
                }, {
                    title: '文档编号',
                    field: 'listId',
                    sort: true,
                    class: 'text-center',
                    width: '250px'
                }, {
                    title: '文档权限类型',
                    field: 'typeName',
                    class: 'text-center',
                    sort: true
                }, {
                    title: '文档描述',
                    field: 'docDesc',
                    class: 'text-center',
                    sort: true
                }, {
                    title: '文档状态',
                    field: 'docState',
                    class: 'text-center',
                    sort: true,
                    width: '100px',
                    formatter: (value, row, index) => {
                        if (value === 0) {
                            return `<span class="badge bg-secondary">禁用</span>`
                        }
                        return `<span class="badge bg-success">启用</span>`
                    }
                }, {
                    title: '创建时间',
                    field: 'createTime',
                    class: 'text-center',
                    width: '220px'
                }, {
                    title: '操作',
                    field: 'op',
                    class: 'text-center',
                    width: '250px',
                    formatter: (value, row, index) => {
                        var htm = '';
                        if(row.owner){
                            htm += `<button type="button " data-id="${row.id}" data-gridKey="${row.listId}" btn-type="delete" class="btn btn-outline-danger btn-sm mx-lg-1">删除</button>`
                            htm += `<button type="button" data-bs-toggle="modal" data-bs-target="#docManagerModal" data-bs-whatever="@Edit" data-bs-id="${row.id}" class="btn btn-outline-secondary btn-sm mx-lg-1">编辑</button>`
                            htm += `<button type="button" data-bs-toggle="modal" data-bs-target="#documentRightModal" data-bs-gridKey="${row.listId}" data-bs-docName="${row.docName}" class="btn btn-outline-primary btn-sm mx-lg-1">授权</button>`
                        }
                        if (row.docState === 1) {
                            htm += `<button type="button" data-bs-toggle="modal" data-bs-target="#documetViewModal" data-bs-gridKey="${row.listId}" data-bs-docName="${row.docName}" class="btn btn-outline-primary btn-sm mx-lg-1">查看</button>`
                        }
                        return htm;
                    }
                }]
            });
        })
    }
</script>
</body>

</html>