Explorar el Código

1.完善下拉框搜索

1 hace 1 mes
padre
commit
99be625365

+ 11 - 6
imwork-windows/imwork-silos/src/main/java/top/imwork/window/silos/controller/cms/books/InfoServiceController.java

@@ -13,6 +13,7 @@ import top.imwork.window.silos.pojo.bo.InfoResultBO;
 import top.imwork.window.silos.pojo.po.InfoListParamVO;
 import top.imwork.window.silos.pojo.po.InfoParamVO;
 import top.imwork.window.silos.service.IInfoService;
+import top.imwork.window.silos.utils.StringUtils;
 
 /**
  * 图书信息表(书目数据)
@@ -30,33 +31,36 @@ public class InfoServiceController extends BaseController {
 
     /**
      * 根据id查询数据
+     *
      * @param id long类型的id
      * @return 返回查询结果
      */
     @GetMapping("/info/{id}")
-    public ResponseMsg info(@PathVariable("id") Long id){
+    public ResponseMsg info(@PathVariable("id") Long id) {
         return ResponseMsg.buildResponse(infoService.info(id));
     }
 
     /**
      * 新增/修改info
+     *
      * @param infoParamVO 实体信息
      * @return responseMsg 操作结果
      */
     @PostMapping("/save")
-    public ResponseMsg save(@RequestBody @Valid InfoParamVO infoParamVO){
+    public ResponseMsg save(@RequestBody @Valid InfoParamVO infoParamVO) {
         InfoBO infoBO = infoService.save(InfoConvert.infoParamVoToDto(infoParamVO));
         return ResponseMsg.buildResponse(InfoConvert.infoBoToVo(infoBO));
     }
 
     /**
      * 根据id删除图书信息表(书目数据)
+     *
      * @param id id
      * @return true/false 成功/失败
      */
     @DeleteMapping("/delete/{id}")
-    public ResponseMsg delete(@PathVariable("id") Long id){
-        return infoService.delete(id)? ResponseMsg.ok() : ResponseMsg.fail();
+    public ResponseMsg delete(@PathVariable("id") Long id) {
+        return infoService.delete(id) ? ResponseMsg.ok() : ResponseMsg.fail();
     }
 
     /**
@@ -66,13 +70,14 @@ public class InfoServiceController extends BaseController {
      * @return true/false 是否删除成功
      */
     @DeleteMapping("/deleteByIds")
-    public ResponseMsg deleteByIds(@RequestBody DeleteParams dto){
+    public ResponseMsg deleteByIds(@RequestBody DeleteParams dto) {
         String[] idArr = dto.getIds().split(",");
-        return infoService.deleteByIds(idArr)? ResponseMsg.ok() : ResponseMsg.fail();
+        return infoService.deleteByIds(idArr) ? ResponseMsg.ok() : ResponseMsg.fail();
     }
 
     @PostMapping("/queryPage")
     public ResponseMsg queryPage(@RequestBody @Valid InfoListParamVO infoListParamVO) {
+        infoListParamVO.setInfoName(StringUtils.isEmpty(infoListParamVO.getSearchKey()) ? infoListParamVO.getInfoName() : infoListParamVO.getSearchKey());
         InfoResultBO infoResultBO = infoService.queryPage(InfoConvert.infoListParamVoToDTO(infoListParamVO));
         return ResponseMsg.buildResponse(InfoConvert.infoResultBoToVo(infoResultBO));
     }

+ 3 - 16
imwork-windows/imwork-silos/src/main/java/top/imwork/window/silos/pojo/po/InfoListParamVO.java

@@ -1,5 +1,6 @@
 package top.imwork.window.silos.pojo.po;
 
+import lombok.Data;
 import lombok.EqualsAndHashCode;
 import top.imwork.commons.core.pojo.BaseParams;
 
@@ -10,24 +11,10 @@ import top.imwork.commons.core.pojo.BaseParams;
  * email: e-jiangxiaowei@outlook.com
  * date: 2025-11-04 13:16:26
  */
+@Data
 @EqualsAndHashCode(callSuper = true)
 public class InfoListParamVO extends BaseParams {
+    private String searchKey;
     private String infoName;
     private String categoryCode;
-
-    public String getCategoryCode() {
-        return categoryCode;
-    }
-
-    public void setCategoryCode(String categoryCode) {
-        this.categoryCode = categoryCode;
-    }
-
-    public String getInfoName() {
-        return infoName;
-    }
-
-    public void setInfoName(String infoName) {
-        this.infoName = infoName;
-    }
 }

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

@@ -1,116 +1,177 @@
 (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');
+    $.fn.smartDropdown = function (options) {
+        // 配置参数
+        const CONFIG = {
+            grid: {
+                pageNo: 1,
+                pageRows: 5
+            }
         }
-    });
-    //选择
-    $('.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();
-    })
+        const settings = $.extend({
+            url: '',
+            method: 'POST',
+            dataType: 'json',
+            contentType: 'application/json;charset=UTF-8',
+            hiddenId: '',
+            valueField: 'id',
+            textField: 'name',
+            placeholder: '请选择',
+            searchPlaceholder: '请输入搜索关键字...',
+            minSearchLength: 1,
+            searchDelay: 300,
+            pageSize: 5,
+            params: {},
+            onSelect: null,
+            onLoad: null,
+            formatResult: null,
+            formatPagination: null
+        }, options);
 
-    function setInfo(data) {
-        const items = data.dataList || [];
-        const pageCount = data.pageCount || 1;
-        const totalRows = data.totalRows || 0;
-        const currentRows = items.length;
+        //抽取的公共方法
+        return this.each(function () {
+            const $container = $(this);
+            //默认当前页
+            let currentPage = 1;
 
+            // 初始化结构
+            $container.addClass('smart-dropdown');
+            $container.html(`
+                <input type="text" class="smart-dropdown-input" readonly placeholder="${settings.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="${settings.searchPlaceholder}">
+                    </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>
+            `);
+            //缓存选择器
+            const $input = $container.find('.smart-dropdown-input');
+            const $arrow = $container.find('.smart-dropdown-arrow');
+            const $menu = $container.find('.smart-dropdown-menu');
+            const $searchInput = $container.find('.smart-search-input');
+            const $content = $container.find('.smart-dropdown-content');
+            const $prevBtn = $container.find('.smart-page-prev');
+            const $nextBtn = $container.find('.smart-page-next');
+            const $paginationInfo = $container.find('.smart-pagination-info');
 
-        // 渲染列表项
-        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;
+            // 显示/隐藏下拉菜单
+            // 点击输入框时显示对应的自定义div
+            $input.click(function () {
+                $menu.css('display', 'block');
+                initInfo();
             });
-        } else {
-            html = '<div class="loading">暂无数据</div>';
-        }
-        $('.smart-dropdown-content').html(html);
+            //点击其它区域时关闭下拉框
+            $(document).click(function (event) {
+                if (!$(event.target).closest('.smart-dropdown').length) {
+                    $menu.css('display', 'none');
+                }
+            });
+
+            // 显示错误信息
+            function showError(title, msg) {
+                layer.msg(msg || '操作失败', {icon: 2});
+            }
 
-        // 渲染分页信息
-        let paginationText = '';
-        const start = (currentPage - 1) * data.pageRows + 1;
-        const end = start + currentRows - 1;
-        paginationText = `显示 ${start}-${end} 条,共 ${totalRows} 条`;
+            //初始化信息
+            function initInfo() {
+                var requestData = $.extend({
+                    searchKey: $searchInput.val()
+                }, CONFIG.grid);
+                $.ajax({
+                    url: settings.url,
+                    type: settings.method,
+                    dataType: settings.dataType,
+                    contentType: settings.contentType,
+                    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("请求失败", "网络错误或服务器异常");
+                    }
+                });
+            }
 
-        $('.smart-pagination-info').text(paginationText);
+            //渲染列表
+            function setInfo(data) {
+                const items = data.dataList || [];
+                const pageCount = data.pageCount || 1;
+                const totalRows = data.totalRows || 0;
+                const currentRows = items.length;
 
-        // 更新分页按钮状态
-        $('.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);
+                // 渲染列表项
+                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 {
-                    showError("加载失败", res.msg);
+                    html = '<div class="loading">暂无数据</div>';
                 }
-            },
-            error: function (xhr, status, error) {
-                console.error("请求失败:", error);
-                showError("请求失败", "网络错误或服务器异常");
+                $content.html(html);
+
+                // 渲染分页信息
+                let paginationText = '';
+                const start = (currentPage - 1) * data.pageRows + 1;
+                const end = start + currentRows - 1;
+                paginationText = `第${start}-${end}条,共${totalRows}条`;
+
+                $paginationInfo.text(paginationText);
+
+                // 更新分页按钮状态
+                $prevBtn.prop('disabled', currentPage <= 1);
+                $nextBtn.prop('disabled', currentPage >= pageCount);
             }
-        });
-    }
 
-    // 显示错误信息
-    function showError(title, msg) {
-        layer.msg(msg || '操作失败', {icon: 2});
-    }
+            //选择
+            $content.on('click', '.smart-dropdown-item', function () {
+                const value = $(this).data('value');
+                const text = $(this).data('text');
+                selectItem(value, text);
+            });
+
+            // 选择项
+            function selectItem(value, text) {
+                $input.val(text)
+                $searchInput.val("");
+                $menu.css('display', 'none');
+                $('#'+settings.hiddenId).val(value);
+            }
+
+            //实时搜索
+            $searchInput.on('input', function () {
+                initInfo();
+            });
+            //上一页
+            $prevBtn.click(function () {
+                CONFIG.grid.pageNo = currentPage - 1;
+                currentPage = currentPage - 1;
+                initInfo();
+            })
+            //下一页
+            $nextBtn.click(function () {
+                CONFIG.grid.pageNo = currentPage + 1;
+                currentPage = currentPage + 1;
+                initInfo();
+            })
+        });
+    };
 })(jQuery);

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


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

@@ -81,4 +81,24 @@ layui.use(['form', 'layer'], function () {
         })
         return false;
     })
+
+
+    // POST 请求示例
+    $('.smart-dropdown').smartDropdown({
+        url: '/cms/book/info/queryPage',
+        method: 'POST',
+        hiddenId: 'bookInfoId',
+        valueField: 'id',
+        textField: 'name',
+        pageSize: 10,
+        params: {
+            pageNo: 1,
+            pageRows: 10,
+            status: 1,
+            category: 'user'
+        },
+        onSelect: function (item) {
+            console.log('选中:', item);
+        }
+    });
 })

+ 12 - 5
imwork-windows/imwork-silos/src/main/resources/static/business/cms/book/contents/list.js

@@ -303,16 +303,23 @@ layui.config({
 
     // 初始化POST方式下拉框
     function initPostDropdown() {
+        // POST 请求示例
         $('.smart-dropdown').smartDropdown({
             url: '/cms/book/info/queryPage',
             method: 'POST',
-            contentType: 'application/json',
-            valueField: 'isbn',
-            textField: 'title',
+            hiddenId: 'bookInfoId',
+            valueField: 'id',
+            textField: 'name',
             pageSize: 5,
-            onSelect: function(item) {
-                $('#bookInfoId').val(item.value);
+            params: {
+                pageNo: 1,
+                pageRows: 5,
+                status: 1,
+                category: 'user'
             },
+            onSelect: function (item) {
+                console.log('选中:', item);
+            }
         });
     }
 

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

@@ -13,7 +13,6 @@
     <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>
 <div class="container">
@@ -32,8 +31,8 @@
                 <div class="form-row">
                     <div class="form-group">
                         <label class="required">关联图书</label>
+                        <input type="hidden" id="bookInfoId" name="bookInfoId" value="">
                         <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">
@@ -211,8 +210,8 @@
 <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/jplus/tinymce/tinymce.min.js" th:src="@{/assets/lib/jplus/tinymce/tinymce.min.js}"></script>
+<script src="../../../../static/assets/lib/jplugins/dropdown/js/dropdown.js" th:src="@{/assets/lib/jplugins/dropdown/js/dropdown.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>

+ 3 - 2
imwork-windows/imwork-silos/src/main/resources/templates/cms/book/contents/list.html

@@ -9,7 +9,8 @@
     <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/fontawesome6/css/all.min.css" th:href="@{/assets/lib/fonts/fontawesome6/css/all.min.css}"/>
     <link rel="stylesheet" href="../../../../static/business/cms/book/contents/list.css" th:href="@{/business/cms/book/contents/list.css}"/>
-    <link rel="stylesheet" href="../../../../static/assets/lib/jplus/dropdown/css/dropdown.css" th:href="@{/assets/lib/jplus/dropdown/css/dropdown.css}"/>
+    <link rel="stylesheet" href="../../../../static/assets/lib/jplugins/dropdown/css/dropdown.css" th:href="@{/assets/lib/jplugins/dropdown/css/dropdown.css}"/>
+    <script src="../../../../static/assets/lib/jplugins/dropdown/js/dropdown.js"></script>
 
 </head>
 <body>
@@ -105,7 +106,7 @@
 
 <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/jplus/dropdown/js/dropdown.js" th:src="@{/assets/lib/jplus/dropdown/js/dropdown.js}"></script>
+<script src="../../../../static/assets/lib/jplugins/dropdown/js/dropdown.js" th:src="@{/assets/lib/jplugins/dropdown/js/dropdown.js}"></script>
 <script src="../../../../static/business/cms/book/contents/list.js" th:src="@{/business/cms/book/contents/list.js}"></script>
 </body>
 </html>

+ 32 - 8
imwork-windows/imwork-silos/src/main/resources/templates/test/dropdown.html

@@ -16,17 +16,20 @@
     <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}"/>
-
+    <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>
+<input type="hidden" id="bookInfoId" name="bookInfoId" value="" class="hiddenId">
 <div class="smart-dropdown">
-    <input type="hidden" id="dropdownId" name="dropdownId" value="">
-    <input type="text" class="smart-dropdown-input" placeholder="请选择或搜索...">
+    <input type="text" id="dropdownId" class="smart-dropdown-input" placeholder="请选择或搜索...">
     <div class="smart-dropdown-arrow">▼</div>
     <div class="smart-dropdown-menu">
         <div class="smart-dropdown-search">
@@ -44,6 +47,27 @@
 </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>
+<script src="../../static/assets/lib/jplugins/dropdown/js/dropdown.js"
+        th:src="@{/assets/lib/jplugins/dropdown/js/dropdown.js}"></script>
+<script>
+    // POST 请求示例
+    $('.smart-dropdown').smartDropdown({
+        url: '/cms/book/info/queryPage',
+        method: 'POST',
+        hiddenId: 'bookInfoId',
+        valueField: 'id',
+        textField: 'name',
+        pageSize: 10,
+        params: {
+            pageNo: 1,
+            pageRows: 10,
+            status: 1,
+            category: 'user'
+        },
+        onSelect: function (item) {
+            console.log('选中:', item);
+        }
+    });
+</script>
 </body>
 </html>