后台添加图书、修改图书、书籍管理列表页功能完成；修正一处数据渲染错误；一些小调整

2025-09-16 23:22:20 +08:00 · 2022-04-06 22:52:07 +08:00
parent ca0ede8917
commit 3d2e9b6dfa
14 changed files with 288 additions and 52 deletions
--- a/bookshelfplus-frontend/views/dashboard/admin/BookManage.html
+++ b/bookshelfplus-frontend/views/dashboard/admin/BookManage.html
@@ -1,3 +1,81 @@
 <p>
-    <a href="book-manage/add">添加书籍</a>
-</p>
+    <a href="<%= pageUrl %>detail">添加书籍</a>
+</p>
+<!-- 搜索书籍 -->
+<script>
+    function search({ tableElementId = "", searchText = "", categoryId = 0 }) {
+        getRequest("/book/search", { bookName: searchText, categoryId: categoryId })
+            .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 => {
+                        var mainDivWidth = 96/*vw*/; // 定义div的宽度（用于计算表格中的数据的显示长度）
+                        var columnWidth = [20, 15, 10, 15, 5, 35];
+                        renderData.push({
+                            编号: `${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}">
+                                        <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;">
+                                        ${element.language}
+                                    </span>`,
+                            出版社: `<span class="overflow-omit" style="max-width: ${columnWidth[3] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
+                                        ${element.publishingHouse}
+                                    </span>`,
+                            来源: `<span class="overflow-omit" style="max-width: ${columnWidth[4] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
+                                        ${element.publishingHouse}
+                                    </span>`,
+                            管理: `<span class="overflow-omit" style="max-width: ${columnWidth[5] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
+                                        <a href="<%= pageUrl %>detail?id=${element.id}">修改</a>
+                                        <a href="">删除</a>
+                                    </span>`,
+                        })
+                    });
+
+                    if (renderData.length == 0) {
+                        console.log("没有搜索到相关书籍");
+                        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;
+                        }
+                        if (searchText && searchText != "") {
+                            //
+                            renderTable({ data: `没有搜索到与 <span style="color: red;">${htmlEncode(searchText)}</span> 相关的书籍，请换个关键词再试试吧`, tableId: tableElementId, renderTableHead: true });
+                        } else if (categoryId && categoryId != 0) {
+                            //
+                            renderTable({ data: `该分类下暂无电子书`, tableId: tableElementId, renderTableHead: true });
+                        }
+                    } else {
+                        renderTable({ data: renderData, tableId: tableElementId, renderTableHead: true });
+                    }
+
+                    // 渲染后重新获取一次字体
+                    if (typeof (fontmin) === "function") {
+                        fontmin(getPageText());
+                    }
+                } else {
+                    alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
+                }
+            }).catch(function (error) {
+                console.log(error);
+                alert("无法连接到服务器，请检查网络连接！");
+            });
+    }
+</script>
--- a/bookshelfplus-frontend/views/dashboard/admin/BookManage_Detail.html
+++ b/bookshelfplus-frontend/views/dashboard/admin/BookManage_Detail.html
@@ -1,27 +1,59 @@
 <!-- 是否连续录入复选框 -->
 <p style="text-align: center;">
+    <!-- 只在新增书籍的时候显示 -->
    <input type="checkbox" id="isContinuous" checked="checked" />连续录入
 </p>
 <!-- 生成分类结构 -->
 <script src="/assets/javascripts/generateCategoryHierarchy.js"></script>
 <script>
+    // 如果传入了 id 那么就是修改书籍，否则就是添加书籍
+    var bookId = getParams().id;
+    var isModify = bookId ? true : false;
+    if (!isModify) {
+        // 新增书籍
+        bookId = 0;
+    } else {
+        // 修改书籍
+        $("#isContinuous").parent().remove();
+    }
+
+    // 点击提交按钮
    function btnSubmitClick() {
        formSubmit({
            type: 'POST',
-            url: '/book/add',
+            url: '/book/detail',
+            data: { id: bookId },
            success: function (data) {
                console.log(data);
-                alert("添加成功！");
-                if (document.getElementById("isContinuous").checked) {
+                alert(isModify ? "修改成功！" : "添加成功！");
+                if (!isModify && document.getElementById("isContinuous").checked) {
                    location.reload();
                } else {
                    // 回到书籍管理页
+                    location.href = "<%= pageUrl %>../";
                }
            }
        });
    }

+    // 如果是修改书籍，则需要获取书籍详情
+    async function getBookDetail(bookId) {
+        var responseData = await getRequest("/book/get", { id: bookId });
+        var axiosData = responseData.data;
+        var status = axiosData.status;
+        var data = axiosData.data;
+        if (status === "success") {
+            console.log(data)
+            return data;
+        } else {
+            alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
+            // 回到书籍管理页
+            location.href = "<%= pageUrl %>../";
+        }
+    }
+
    async function getControlsProfile(getValidateUtils) {
+
        // 获取分类列表
        var categoryOptions = [];

@@ -49,6 +81,15 @@
        }

        console.log(categoryOptions);
+
+        // 修改书籍: 获取书籍详情
+        var bookDetail = {};
+        if (isModify) {
+            bookDetail = await getBookDetail(bookId);
+        } else {
+            console.log("新增书籍无需获取书籍详情");
+        }
+
        return [
            // 【模板】
            // {
@@ -104,6 +145,7 @@
                    "id": "bookName",
                    "name": "bookName",
                    "placeholder": "电子书的名称",
+                    "value": bookDetail.bookName || "",
                },
                "label": {
                    "value": "书本名称",
@@ -122,6 +164,7 @@
                    "id": "author",
                    "name": "author",
                    "placeholder": "电子书的作者",
+                    "value": bookDetail.author || "",
                },
                "label": {
                    "value": "作者姓名",
@@ -146,7 +189,7 @@
                    "value": "书籍简介",
                },
                "required": false, // 是否必填
-                "innerHTML": "",
+                "innerHTML": bookDetail.description || "",
                "validate": (val) => getValidateUtils().setValue(val)
                    .notString("传入的值为非字符串类型")
                    .length(0, 5000, "书籍简介不能超过 5000 个字符")
@@ -158,6 +201,7 @@
                    "id": "language",
                    "name": "language",
                    "placeholder": "书籍语言",
+                    "value": bookDetail.language || "",
                },
                "label": {
                    "value": "语言",
@@ -191,6 +235,7 @@
                    "id": "publishingHouse",
                    "name": "publishingHouse",
                    "placeholder": "出版社",
+                    "value": bookDetail.publishingHouse || "",
                },
                "label": {
                    "value": "出版社",
@@ -209,6 +254,7 @@
                    "id": "copyright",
                    "name": "copyright",
                    "placeholder": "来源信息 & 版权信息",
+                    "value": bookDetail.copyright || "",
                },
                "label": {
                    "value": "来源(版权)",
@@ -224,6 +270,7 @@
                "attr": {
                    "id": "categoryId",
                    "name": "categoryId",
+                    "value": bookDetail.category.id || "",
                },
                "label": {
                    "value": "书籍分类",