管理员后台文件管理前端页面完成；一些小调整

2025-09-24 18:35:15 +08:00 · 2022-04-10 16:50:08 +08:00
parent dc1e8ee810
commit 2912c09098
7 changed files with 86 additions and 32 deletions
--- a/bookshelfplus-frontend/public/assets/javascripts/searchBooks.js
+++ b/bookshelfplus-frontend/public/assets/javascripts/searchBooks.js
@@ -23,10 +23,10 @@ function search({ tableElementId = "", searchText = "", categoryId = 0 }) {
                                        ${element.category.name}
                                    </span>
                                </a>`,
-                        简介: ` <span class="overflow-omit" style="max-width: ${columnWidth[2] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
+                        简介: `<span class="overflow-omit" style="max-width: ${columnWidth[2] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
                                    ${element.description}
                                </span>`,
-                        语言: ` <span class="overflow-omit" style="max-width: ${columnWidth[3] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
+                        语言: `<span class="overflow-omit" style="max-width: ${columnWidth[3] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
                                    ${element.language}
                                </span>`,
                        出版社: `<span class="overflow-omit" style="max-width: ${columnWidth[4] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
--- a/bookshelfplus-frontend/routes/index.js
+++ b/bookshelfplus-frontend/routes/index.js
@@ -99,7 +99,7 @@ router.get('/dashboard/:group/:page/:subpage?', function (req, res) {
            },
            "file-manage": {
                title: "文件管理",
-                baseTemplate: "blank",
+                baseTemplate: "table",
                pageTemplate: "FileManage",
                childPage: {
                    "upload": {
--- a/bookshelfplus-frontend/views/category.html
+++ b/bookshelfplus-frontend/views/category.html
@@ -71,12 +71,12 @@
                    //     var mainDivWidth = 70/*vw*/; // 定义div的宽度（用于计算表格中的数据的显示长度）
                    //     var columnWidth = [60, 40];
                    //     renderData.push({
-                    //         分类名: ` <a target="_blank" href="/category?id=${element.id}">
+                    //         分类: `<a target="_blank" href="/category?id=${element.id}">
                    //                     <span class="overflow-omit" style="max-width: ${columnWidth[0] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
                    //                         ${element.name}
                    //                     </span>
                    //                 </a>`,
-                    //         简介: ` <span class="overflow-omit" style="max-width: ${columnWidth[1] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
+                    //         简介: `<span class="overflow-omit" style="max-width: ${columnWidth[1] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
                    //                     ${element.description}
                    //                 </span>`,
                    //     })
@@ -90,12 +90,12 @@
                            var mainDivWidth = 70/*vw*/; // 定义div的宽度（用于计算表格中的数据的显示长度）
                            var columnWidth = [70, 30];
                            renderData.push({
-                                分类名: ` <a target="_blank" href="/category?id=${category.id}">
+                                分类: `<a target="_blank" href="/category?id=${category.id}">
                                            <span class="overflow-omit" style="max-width: ${columnWidth[0] * mainDivWidth / 100}vw; max-height: 2em; text-align: left;">
                                                ${"&nbsp;".repeat((category.level-1)*8)}${category.name}
                                            </span>
                                        </a>`,
-                                简介: ` <span class="overflow-omit" style="max-width: ${columnWidth[1] * mainDivWidth / 100}vw; max-height: 2em; text-align: left; text-indent: 1em;">
+                                简介: `<span class="overflow-omit" style="max-width: ${columnWidth[1] * mainDivWidth / 100}vw; max-height: 2em; text-align: left; text-indent: 1em;">
                                            ${category.description}
                                        </span>`,
                            })
--- a/bookshelfplus-frontend/views/dashboard/admin/BookManage.html
+++ b/bookshelfplus-frontend/views/dashboard/admin/BookManage.html
@@ -5,6 +5,15 @@
 <input id="searchButton" type="button" value="搜索" />
 <!-- 搜索书籍 -->
 <script>
+    var requestParams = getParams();
+    var searchbox = document.getElementById("searchInput");
+    var keyword = (requestParams["keyword"] || "").trim();
+    search({
+        tableElementId: "book-table",
+        searchText: null,
+        categoryId: null
+    });
+
    $("#searchButton").click(function () {
        search({
            tableElementId: "book-table",
@@ -29,18 +38,18 @@
                        var columnWidth = [20, 15, 10, 15, 5, 35];
                        renderData.push({
                            编号: `${element.id}`,
-                            书名: ` <a target="_blank" href="/book?id=${element.id}">
+                            书名: `<a target="_blank" href="/book?id=${element.id}">
                                        <span class="overflow-omit" style="max-width: ${columnWidth[0] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
                                            ${element.bookName}
                                        </span>
                                    </a>`,
-                            分类: ` <a target="_blank" href="/category?id=${element.category.id}">
+                            分类: `<a target="_blank" href="/category?id=${element.category.id}">
                                        <span class="overflow-omit" style="max-width: ${columnWidth[1] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
                                            ${element.category.name}
                                        </span>
                                    </a>`,
                            作者: `${element.author}`,
-                            语言: ` <span class="overflow-omit" style="max-width: ${columnWidth[2] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
+                            语言: `<span class="overflow-omit" style="max-width: ${columnWidth[2] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
                                        ${element.language}
                                    </span>`,
                            出版社: `<span class="overflow-omit" style="max-width: ${columnWidth[3] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
@@ -75,11 +84,6 @@
                    } else {
                        renderTable({ data: renderData, tableId: tableElementId, renderTableHead: true });
                    }
-
-                    // 渲染后重新获取一次字体
-                    if (typeof (fontmin) === "function") {
-                        fontmin(getPageText());
-                    }
                } else {
                    alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
                }
--- a/bookshelfplus-frontend/views/dashboard/admin/FileManage.html
+++ b/bookshelfplus-frontend/views/dashboard/admin/FileManage.html
@@ -1 +1,62 @@
-<a href="<%= pageUrl %>upload">上传文件</a>
+<p>
+    <a href="<%= pageUrl %>upload">上传文件</a>
+</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}`,
+                            关联书籍Id: `<a target="_blank" href="/admin/book-manage/detail?id=${element.bookId}">${element.bookId}</a>`,
+                            文件名: `${element.fileDisplayName}`,
+                            格式: `${element.fileFormat}`,
+                            页数: `${element.numberOfPages}`,
+                            水印: `${element.watermark}`,
+                            广告: `${element.advertising}`,
+                            来源: `${element.bookOrigin}`,
+                            大小: `${element.fileSize}`,
+                            哈希: `${element.hashSha1}`,
+                            缩略图: `${element.thumbnail}`,
+                            创建时间: `${element.fileCreateAt}`,
+                            修改时间: `${element.fileModifiedAt}`,
+                            管理: `<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>
--- a/bookshelfplus-frontend/views/dashboard/table.html
+++ b/bookshelfplus-frontend/views/dashboard/table.html
@@ -29,6 +29,10 @@
 </head>
 <body>
    <%- include("./component/navbar.html"); %>
+    <!-- 获取参数 -->
+    <script src="/assets/javascripts/getParams.js"></script>
+    <!-- 渲染表格 -->
+    <script src="/assets/javascripts/renderTable.js"></script>
    <main class="main">
        <h1><%= title %></h1>
        <div id="container">
@@ -40,20 +44,5 @@
        </div>
    </main>
    <%- include("./component/footer.html"); %>
-
-    <!-- 获取参数 -->
-    <script src="/assets/javascripts/getParams.js"></script>
-    <!-- 渲染表格 -->
-    <script src="/assets/javascripts/renderTable.js"></script>
-    <script>
-        var requestParams = getParams();
-        var searchbox = document.getElementById("searchInput");
-        var keyword = (requestParams["keyword"] || "").trim();
-        search({
-            tableElementId: "book-table",
-            searchText: null,
-            categoryId: null
-        });
-    </script>
 </body>
 </html>
--- a/bookshelfplus-frontend/views/dashboard/user/myCollection.html
+++ b/bookshelfplus-frontend/views/dashboard/user/myCollection.html
@@ -27,7 +27,7 @@
                                        </span>
                                    </a>`,
                            作者: `${element.author}`,
-                            语言: ` <span class="overflow-omit" style="max-width: ${columnWidth[2] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
+                            语言: `<span class="overflow-omit" style="max-width: ${columnWidth[2] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
                                        ${element.language}
                                    </span>`,
                            收藏: `<span style="display: block; width: 80px; max-height: 2em; margin: 0 auto;">