bookshelfplus/bookshelfplus-frontend/views/dashboard/admin/FileManage.html

<style>
    /* 限制 来源 列的宽度 */
    tr>*:nth-child(8),
    td>*:nth-child(8) {
        max-width: 100px;
    }
    /* 限制 哈希 列的宽度 */
    tr>*:nth-child(10),
    td>*:nth-child(10) {
        max-width: 100px;
    }
    /* 限制 时间 列的宽度 */
    tr>*:nth-child(11),
    td>*:nth-child(11) {
        max-width: 100px;
    }
</style>
<p>
    <a href="<%= pageUrl %>upload">上传文件</a><br>
    删除文件前必须先删除该文件关联的所有文件对象
</p>
<script>
    list({
        tableElementId: "book-table"
    });

    function list({ tableElementId }) {
        getRequest("/file/list", {})
            .then(function (responseData) {
                var axiosData = responseData.data;
                var status = axiosData.status;
                var data = axiosData.data;
                if (status === "success") {
                    // console.log(data);

                    // 数据进行转换
                    var renderData = [];
                    data.forEach(element => {
                        console.log(element);
                        renderData.push({
                            编号: `${element.id}`,
                            关联书籍: `<span class="overflow-omit" style="margin: 0 auto;">
                                        ID: ${element.bookId}
                                        <a href="/book?id=${element.bookId}">查看</a>
                                        <a href="/dashboard/admin/book-manage/detail?id=${element.bookId}">修改</a>
                                    </span>`,
                            文件名: `${element.fileDisplayName}`,
                            格式: `${element.fileFormat}`,
                            页数: `${element.numberOfPages}`,
                            水印: `${element.watermark}`,
                            广告: `${element.advertising}`,
                            来源: `<span class="overflow-omit" style="font-size: 10px;">${element.bookOrigin}</span>`,
                            大小: `${element.fileSize}`,
                            "哈希(双击全选)": `<span class="overflow-omit" style="font-size: 10px;">${element.hashSha1}</span>`,
                            时间: `<span class="overflow-omit" style="font-size: 12px; line-height: 1.2em; display: block;"><nobr>
                                        创建: ${new Date(element.fileCreateAt).toLocaleString()}<br>
                                        修改: ${new Date(element.fileModifiedAt).toLocaleString()}
                                    </nobr></span>`,
                            管理: `<span class="overflow-omit" style="margin: 0 auto;">
                                        <a href="<%= pageUrl %>detail?id=${element.id}">修改</a>
                                        <a href="javascript:deleteBook(${element.id});">删除</a>
                                    </span>`,
                        })
                    });
                    if (renderData.length == 0) {
                        function htmlEncode(str) {
                            // refer: https://stackoverflow.com/questions/4183801/escape-html-chracters
                            var div = document.createElement('div');
                            var txt = document.createTextNode(str);
                            div.appendChild(txt);
                            return div.innerHTML;
                        }
                        renderTable({ data: `暂无文件`, tableId: tableElementId, renderTableHead: true });
                    } else {
                        renderTable({ data: renderData, tableId: tableElementId, renderTableHead: true });
                    }
                } else {
                    alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
                }
            }).catch(function (error) {
                console.log(error);
                alert("无法连接到服务器，请检查网络连接！");
            });
    }
</script>