1 1 месяц назад
Родитель
Сommit
c9f3001850

+ 24 - 0
imwork-windows/imwork-silos/src/main/java/top/imwork/window/silos/controller/test/TestController.java

@@ -0,0 +1,24 @@
+package top.imwork.window.silos.controller.test;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+/**
+ * Copyright (C), 2015-2026
+ * FileName: TestController
+ * Author<作者姓名>:   stars
+ * CreateTime<创建时间>:   2026/1/5 14:37
+ * UpdateTime<修改时间>:   2026/1/5 14:37
+ * Description〈功能简述〉:
+ * History<历史描述>:
+ * Since<版本号>: 1.0.0
+ */
+@RequestMapping("/test")
+@Controller
+public class TestController {
+    @GetMapping("/dropdown.html")
+    public String dropdown() {
+        return "/test/dropdown";
+    }
+}

+ 1 - 1
imwork-windows/imwork-silos/src/main/java/top/imwork/window/silos/security/config/SecurityConfig.java

@@ -69,7 +69,7 @@ public class SecurityConfig{
                         //登录/注册页面
                         .requestMatchers("/login", "/login.html", "/silos/login.html", "/auth/login", "/", "/register").permitAll()
                         // 公开访问的API
-                        .requestMatchers("/api/public/**").permitAll()
+                        .requestMatchers("/api/public/**","/cms/book/info/queryPage").permitAll()
                         // Swagger文档
                         .requestMatchers("/swagger-ui/**", "/v3/api-docs/**", "/swagger-resources/**").permitAll()
                         // 其他所有请求都需要认证

+ 114 - 0
imwork-windows/imwork-silos/src/main/resources/static/assets/lib/jplugins/dropdown/css/dropdown.css

@@ -0,0 +1,114 @@
+.smart-dropdown {
+    position: relative;
+    width: auto; /* 允许宽度根据内容自动调整 */
+    min-width: 120px; /* 最小宽度为120px */
+    max-width: 300px; /* 最大宽度为300px */
+    font-family: Arial, sans-serif;
+}
+
+.smart-dropdown-input {
+    width: 100%;
+    padding: 8px 35px 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+.smart-dropdown-arrow {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: #666;
+}
+
+
+.smart-dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: white;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    display: none;
+    z-index: 1000;
+    margin-top: 2px;
+}
+
+.smart-dropdown-search {
+    padding: 8px;
+    border-bottom: 1px solid #eee;
+}
+
+.smart-search-input {
+    width: 100%;
+    padding: 6px;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    box-sizing: border-box;
+}
+
+.smart-dropdown-content {
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.smart-dropdown-item {
+    padding: 8px 12px;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.smart-dropdown-item:hover {
+    background: #f5f5f5;
+}
+
+.smart-dropdown-item.selected {
+    background: #e6f7ff;
+    color: #1890ff;
+}
+
+.smart-dropdown-pagination {
+    padding: 8px;
+    border-top: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.smart-pagination-info {
+    font-size: 12px;
+    color: #666;
+}
+
+.smart-pagination-controls button {
+    padding: 4px 8px;
+    margin-left: 4px;
+    border: 1px solid #ddd;
+    background: white;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.smart-pagination-controls button:hover:not(:disabled) {
+    background: #f5f5f5;
+}
+
+.smart-pagination-controls button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.loading {
+    padding: 20px;
+    text-align: center;
+    color: #999;
+}
+
+.error {
+    padding: 20px;
+    text-align: center;
+    color: #f5222d;
+}

+ 116 - 0
imwork-windows/imwork-silos/src/main/resources/static/assets/lib/jplugins/dropdown/js/dropdown.js

@@ -0,0 +1,116 @@
+(function ($) {
+    //当前页
+    let currentPage = 1;
+    // 配置常量
+    const CONFIG = {
+        grid: {
+            pageNo: 1,
+            pageRows: 5
+        }
+    }
+    // 点击输入框时显示对应的自定义div
+    $('.smart-dropdown-input').click(function () {
+        $('.smart-dropdown-menu').css('display', 'block');
+        initInfo();
+    });
+    //点击其它区域时关闭下拉框
+    $(document).click(function (event) {
+        if (!$(event.target).closest('.smart-dropdown').length) {
+            $('.smart-dropdown-menu').css('display', 'none');
+        }
+    });
+    //选择
+    $('.smart-dropdown-content').on('click', '.smart-dropdown-item', function() {
+        const value = $(this).data('value');
+        const text = $(this).data('text');
+        selectItem(value, text);
+    });
+    // 选择项
+    function selectItem(value, text) {
+        $('.smart-dropdown-input').val(text)
+        $('#dropdownId').val(value);
+        $('.smart-search-input').val("");
+        $('.smart-dropdown-menu').css('display', 'none');
+    }
+    //实时搜索
+    $('.smart-search-input').on('input', function() {
+        initInfo();
+    });
+    //上一页
+    $(".smart-page-prev").click(function () {
+        CONFIG.grid.pageNo = currentPage - 1;
+        currentPage = currentPage - 1;
+        initInfo();
+    })
+    //下一页
+    $(".smart-page-next").click(function () {
+        CONFIG.grid.pageNo = currentPage + 1;
+        currentPage = currentPage + 1;
+        initInfo();
+    })
+
+    function setInfo(data) {
+        const items = data.dataList || [];
+        const pageCount = data.pageCount || 1;
+        const totalRows = data.totalRows || 0;
+        const currentRows = items.length;
+
+
+        // 渲染列表项
+        let html = '';
+        if (items.length > 0) {
+            items.forEach(function (item) {
+                let itemHtml = '';
+                itemHtml = `<div class="smart-dropdown-item" 
+                                          data-value="${item.isbn}" 
+                                          data-text="${item.title}">${item.title}</div>`;
+                html += itemHtml;
+            });
+        } else {
+            html = '<div class="loading">暂无数据</div>';
+        }
+        $('.smart-dropdown-content').html(html);
+
+        // 渲染分页信息
+        let paginationText = '';
+        const start = (currentPage - 1) * data.pageRows + 1;
+        const end = start + currentRows - 1;
+        paginationText = `显示 ${start}-${end} 条,共 ${totalRows} 条`;
+
+        $('.smart-pagination-info').text(paginationText);
+
+        // 更新分页按钮状态
+        $('.smart-page-prev').prop('disabled', currentPage <= 1);
+        $('.smart-page-next').prop('disabled', currentPage >= pageCount);
+    }
+
+    //初始化信息
+    function initInfo() {
+        var requestData = $.extend({
+            infoName:$('.smart-search-input').val()
+        }, CONFIG.grid);
+        $.ajax({
+            url: "/cms/book/info/queryPage",
+            type: "POST",
+            dataType: "json",
+            contentType: 'application/json;charset=UTF-8',
+            data: JSON.stringify(requestData),
+            success: function (res) {
+                if (res.code === 200) {
+                    setInfo(res.data);
+                } else {
+                    showError("加载失败", res.msg);
+                }
+            },
+            error: function (xhr, status, error) {
+                console.error("请求失败:", error);
+                showError("请求失败", "网络错误或服务器异常");
+            }
+        });
+    }
+
+    // 显示错误信息
+    function showError(title, msg) {
+        layer.msg(msg || '操作失败', {icon: 2});
+    }
+})(jQuery);

+ 0 - 0
imwork-windows/imwork-silos/src/main/resources/static/assets/lib/jplugins/dropdown/带搜索功能的下拉框.txt


+ 0 - 0
imwork-windows/imwork-silos/src/main/resources/static/assets/lib/jplugins/jquery自定义插件.txt


+ 116 - 0
imwork-windows/imwork-silos/src/main/resources/static/business/cms/book/contents/js/dropdown.js

@@ -0,0 +1,116 @@
+(function ($) {
+    //当前页
+    let currentPage = 1;
+    // 配置常量
+    const CONFIG = {
+        grid: {
+            pageNo: 1,
+            pageRows: 5
+        }
+    }
+    // 点击输入框时显示对应的自定义div
+    $('.smart-dropdown-input').click(function () {
+        $('.smart-dropdown-menu').css('display', 'block');
+        initInfo();
+    });
+    //点击其它区域时关闭下拉框
+    $(document).click(function (event) {
+        if (!$(event.target).closest('.smart-dropdown').length) {
+            $('.smart-dropdown-menu').css('display', 'none');
+        }
+    });
+    //选择
+    $('.smart-dropdown-content').on('click', '.smart-dropdown-item', function() {
+        const value = $(this).data('value');
+        const text = $(this).data('text');
+        selectItem(value, text);
+    });
+    // 选择项
+    function selectItem(value, text) {
+        $('.smart-dropdown-input').val(text)
+        $('#bookInfoId').val(value);
+        $('.smart-search-input').val("");
+        $('.smart-dropdown-menu').css('display', 'none');
+    }
+    //实时搜索
+    $('.smart-search-input').on('input', function() {
+        initInfo();
+    });
+    //上一页
+    $(".smart-page-prev").click(function () {
+        CONFIG.grid.pageNo = currentPage - 1;
+        currentPage = currentPage - 1;
+        initInfo();
+    })
+    //下一页
+    $(".smart-page-next").click(function () {
+        CONFIG.grid.pageNo = currentPage + 1;
+        currentPage = currentPage + 1;
+        initInfo();
+    })
+
+    function setInfo(data) {
+        const items = data.dataList || [];
+        const pageCount = data.pageCount || 1;
+        const totalRows = data.totalRows || 0;
+        const currentRows = items.length;
+
+
+        // 渲染列表项
+        let html = '';
+        if (items.length > 0) {
+            items.forEach(function (item) {
+                let itemHtml = '';
+                itemHtml = `<div class="smart-dropdown-item" 
+                                          data-value="${item.isbn}" 
+                                          data-text="${item.title}">${item.title}</div>`;
+                html += itemHtml;
+            });
+        } else {
+            html = '<div class="loading">暂无数据</div>';
+        }
+        $('.smart-dropdown-content').html(html);
+
+        // 渲染分页信息
+        let paginationText = '';
+        const start = (currentPage - 1) * data.pageRows + 1;
+        const end = start + currentRows - 1;
+        paginationText = `显示 ${start}-${end} 条,共 ${totalRows} 条`;
+
+        $('.smart-pagination-info').text(paginationText);
+
+        // 更新分页按钮状态
+        $('.smart-page-prev').prop('disabled', currentPage <= 1);
+        $('.smart-page-next').prop('disabled', currentPage >= pageCount);
+    }
+
+    //初始化信息
+    function initInfo() {
+        var requestData = $.extend({
+            infoName:$('.smart-search-input').val()
+        }, CONFIG.grid);
+        $.ajax({
+            url: "/cms/book/info/queryPage",
+            type: "POST",
+            dataType: "json",
+            contentType: 'application/json;charset=UTF-8',
+            data: JSON.stringify(requestData),
+            success: function (res) {
+                if (res.code === 200) {
+                    setInfo(res.data);
+                } else {
+                    showError("加载失败", res.msg);
+                }
+            },
+            error: function (xhr, status, error) {
+                console.error("请求失败:", error);
+                showError("请求失败", "网络错误或服务器异常");
+            }
+        });
+    }
+
+    // 显示错误信息
+    function showError(title, msg) {
+        layer.msg(msg || '操作失败', {icon: 2});
+    }
+})(jQuery);

+ 29 - 5
imwork-windows/imwork-silos/src/main/resources/templates/cms/book/contents/edit.html

@@ -11,6 +11,8 @@
     <link rel="stylesheet" href="../../../../static/assets/lib/fonts/fontawesome6/css/all.min.css" th:href="@{/assets/lib/fonts/fontawesome6/css/all.min.css}"/>
     <link rel="stylesheet" href="../../../../static/business/cms/book/contents/edit.css" th:href="@{/business/cms/book/contents/edit.css}"/>
     <link rel="stylesheet" href="../../../../static/business/cms/base/pagination/pagination.css" th:href="@{/business/cms/base/pagination/pagination.css}"/>
+    <link rel="stylesheet" href="../../../../static/assets/lib/jplugins/dropdown/css/dropdown.css" th:href="@{/assets/lib/jplugins/dropdown/css/dropdown.css}"/>
+
 
 </head>
 <body>
@@ -29,6 +31,27 @@
                 <h3 class="section-title">基本信息</h3>
                 <div class="form-row">
                     <div class="form-group">
+                        <label class="required">关联图书</label>
+                        <div class="smart-dropdown">
+                            <input type="hidden" id="bookInfoId" name="bookInfoId" value="">
+                            <input type="text" class="smart-dropdown-input" placeholder="请选择或搜索...">
+                            <div class="smart-dropdown-arrow">▼</div>
+                            <div class="smart-dropdown-menu">
+                                <div class="smart-dropdown-search">
+                                    <input type="text" class="smart-search-input" placeholder="搜索...">
+                                </div>
+                                <div class="smart-dropdown-content"></div>
+                                <div class="smart-dropdown-pagination">
+                                    <div class="smart-pagination-info"></div>
+                                    <div class="smart-pagination-controls">
+                                        <button class="smart-page-prev">上一页</button>
+                                        <button class="smart-page-next">下一页</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                   <!-- <div class="form-group">
                         <label class="required">关联图书</label>
                         <div class="dropdown-container">
                             <div class="dropdown-header">
@@ -42,7 +65,7 @@
                                 </div>
 
                                 <div class="options-container">
-                                    <!-- 选项将通过JavaScript动态生成 -->
+                                    &lt;!&ndash; 选项将通过JavaScript动态生成 &ndash;&gt;
                                 </div>
 
                                 <div class="pagination">
@@ -56,10 +79,10 @@
                         </div>
 
                         <div class="selected-tags">
-                            <!-- 已选标签将通过JavaScript动态生成 -->
+                            &lt;!&ndash; 已选标签将通过JavaScript动态生成 &ndash;&gt;
                         </div>
 
-                        <!--<label for="bookInfoId" class="required">关联图书</label>
+                        &lt;!&ndash;<label for="bookInfoId" class="required">关联图书</label>
                         <select id="bookInfoId" name="bookId" required>
                             <option value="">请选择图书</option>
                             <option value="9787111239505">java核心技术</option>
@@ -68,8 +91,8 @@
                             <option value="3">CSS权威指南</option>
                             <option value="4">HTML5与CSS3基础教程</option>
                         </select>
-                        <div class="error-message" id="bookIdError">请选择关联图书</div>-->
-                    </div>
+                        <div class="error-message" id="bookIdError">请选择关联图书</div>&ndash;&gt;
+                    </div>-->
                     <div class="form-group">
                         <label for="chapterLevel" class="required">章节层级</label>
                         <select id="chapterLevel" name="chapterLevel" required>
@@ -189,6 +212,7 @@
 <script src="../../../../static/assets/lib/layui/layui.js" th:src="@{/assets/lib/layui/layui.js}"></script>
 <script src="../../../../static/assets/lib/jplus/tinymce/tinymce.min.js" th:src="@{/assets/lib/jplus/tinymce/tinymce.min.js}"></script>
 <script src="../../../../static/business/cms/book/contents/edit.js" th:src="@{/business/cms/book/contents/edit.js}"></script>
+<script src="../../../../static/business/cms/book/contents/js/dropdown.js" th:src="@{/business/cms/book/contents/js/dropdown.js}"></script>
 <script src="../../../../static/business/cms/base/pagination.js" th:src="@{/business/cms/base/pagination.js}"></script>
 </body>
 </html>

+ 1 - 0
imwork-windows/imwork-silos/src/main/resources/templates/main/index.html

@@ -58,6 +58,7 @@
                     <li><a href="/cms/book/info/list.html" class="tabs" id="6"><span>图书管理</span></a></li>
                     <li><a href="/cms/book/contents/list.html" class="tabs" id="10"><span>章节管理</span></a></li>
                     <li><a href="/cms/book/category/list.html" class="tabs" id="7"><span>分类管理</span></a></li>
+                    <li><a href="/test/dropdown.html" class="tabs" id="30"><span>下拉框</span></a></li>
                 </ul>
             </li>
             <li class="canvas-nav-item">

+ 49 - 0
imwork-windows/imwork-silos/src/main/resources/templates/test/dropdown.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
+    <!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
+    <meta name="renderer" content="webkit">
+    <!--国产浏览器高速模式-->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- 作者 -->
+    <meta name="author" content="silos"/>
+    <meta name="revised" content="Silos-Admin-v-2.0.0"/>
+    <!-- 定义页面的最新版本 -->
+    <meta name="description" content="网站简介"/>
+    <!-- 网站简介 -->
+    <meta name="keywords" content="搜索关键字,以半角英文逗号隔开"/>
+    <title>Index</title>
+    <!-- 公共样式 开始 -->
+    <link rel="stylesheet" href="../../static/assets/lib/layui/css/layui.css" th:href="@{/assets/lib/layui/css/layui.css}"/>
+    <link rel="stylesheet" href="../../static/assets/lib/fonts/fontawesome4/css/font-awesome.css" th:href="@{/assets/lib/fonts/fontawesome4/css/font-awesome.css}"/>
+    <link rel="stylesheet" href="../../static/assets/lib/fonts/fontawesome6/css/all.min.css" th:href="@{/assets/lib/fonts/fontawesome6/css/all.min.css}"/>
+    <link rel="stylesheet" href="../../static/assets/lib/jplugins/dropdown/css/dropdown.css" th:href="@{/assets/lib/jplugins/dropdown/css/dropdown.css}"/>
+
+
+</head>
+<body>
+<div class="smart-dropdown">
+    <input type="hidden" id="dropdownId" name="dropdownId" value="">
+    <input type="text" class="smart-dropdown-input" placeholder="请选择或搜索...">
+    <div class="smart-dropdown-arrow">▼</div>
+    <div class="smart-dropdown-menu">
+        <div class="smart-dropdown-search">
+            <input type="text" class="smart-search-input" placeholder="搜索...">
+        </div>
+        <div class="smart-dropdown-content"></div>
+        <div class="smart-dropdown-pagination">
+            <div class="smart-pagination-info"></div>
+            <div class="smart-pagination-controls">
+                <button class="smart-page-prev">上一页</button>
+                <button class="smart-page-next">下一页</button>
+            </div>
+        </div>
+    </div>
+</div>
+<script src="../../static/assets/lib/jquery/jquery.js" th:src="@{/assets/lib/jquery/jquery.js}"></script>
+<script src="../../static/assets/lib/layui/layui.js" th:src="@{/assets/lib/layui/layui.js}"></script>
+<script src="../../static/assets/lib/jplugins/dropdown/js/dropdown.js" th:src="@{/assets/lib/jplugins/dropdown/js/dropdown.js}"></script>
+</body>
+</html>