feat(admin): 新增搜索表单多选功能 add xmSelect plugin support for multiple selection

- Add xmSelect case handling in AdminController for 'in' operation
- Include xmSelect.js in admin layout
- Update easy-admin.js to support xmSelect initialization and data binding
- Modify goods.js to demonstrate xmSelect usage with simulated data
- Adjust public.css for better styling of xmSelect elements

Signed-off-by: wolfcode <37436228+wolf-leo@users.noreply.github.com>

app/admin/view/layout/default.html

@@ -26,6 +26,7 @@
             EDITOR_TYPE: "{$adminEditor|default='wangEditor'}",
         };
     </script>
+    <script src="/static/plugs/xmSelect/xm-select.js" charset="utf-8"></script>
     <script src="/static/plugs/layui-v2.x/layui.js" charset="utf-8"></script>
     <script src="/static/plugs/require-2.3.6/require.js" charset="utf-8"></script>
     <script src="/static/config-admin.js?v={$version}" charset="utf-8"></script>

app/common/controller/AdminController.php

@@ -190,6 +190,9 @@ class AdminController extends BaseController
                 case '%*':
                     $where[] = [$key, 'LIKE', "%{$val}"];
                     break;
+                case 'in':
+                    $where[] = [$key, 'IN', $val];
+                    break;
                 case 'range':
                     [$beginTime, $endTime] = explode(' - ', $val);
                     $where[] = [$key, '>=', strtotime($beginTime)];

public/static/admin/css/public.css

@@ -134,6 +134,12 @@ html.dark, body {
     color: #a29c9c;
 }
 
+.layui-form-item xm-select {
+    min-height: 30px !important;
+    line-height: 30px !important;
+    margin: 0 !important;
+}
+
 /** 按钮背景色 */
 .layuimini-container .layuimini-btn-primary {
     color: #fff;

public/static/admin/js/mall/goods.js

@@ -42,6 +42,14 @@ define(["jquery", "easy-admin"], function ($, ea) {
                     {field: 'virtual_sales', width: 100, title: '虚拟销量'},
                     {field: 'sales', width: 80, title: '销量'},
                     {field: 'status', title: '状态', width: 85, selectList: {0: '禁用', 1: '启用'}, templet: ea.table.switch},
+                    // 演示多选，实际数据库并无 status2 字段，搜索后会报错
+                    {
+                        field: 'status2', title: '演示多选', width: 105, search: 'xmSelect', selectList: {1: '模拟选项1', 2: '模拟选项2', 3: '模拟选项3', 4: '模拟选项4', 5: '模拟选项5'},
+                        searchOp: 'in', templet: function (res) {
+                            // 根据自己实际项目进行输出
+                            return res?.status2 || '模拟数据'
+                        }
+                    },
                     {field: 'create_time', minWidth: 80, title: '创建时间', search: 'range'},
                     {
                         width: 250,

public/static/plugs/easy-admin/easy-admin.js

@@ -20,7 +20,9 @@ define(["jquery", "tableSelect"], function ($, tableSelect) {
         upload_url: 'ajax/upload',
         upload_exts: 'doc|gif|ico|icon|jpg|mp3|mp4|p12|pem|png|rar',
         csrf_token: window.CONFIG.CSRF_TOKEN,
-        wait_submit: false
+        wait_submit: false,
+        xmSelectList: {},
+        xmSelectModel: {},
     };
 
 
@@ -370,6 +372,15 @@ define(["jquery", "tableSelect"], function ($, tableSelect) {
                                     '</div>\n' +
                                     '</div>';
                                 break;
+                            case 'xmSelect':
+                                formHtml += '\t<div class="layui-form-item layui-inline">\n' +
+                                    '<label class="layui-form-label">' + d.title + '</label>\n' +
+                                    '<div class="layui-input-inline">\n' +
+                                    '<div id="c-' + d.fieldAlias + '" class="tableSearch-xmSelect xmSelect-' + d.fieldAlias + '" name="' + d.fieldAlias + '" data-search-op="' + d.searchOp + '"></div>\n' +
+                                    '</div>\n' +
+                                    '</div>';
+                                init.xmSelectList[d.fieldAlias] = d.selectList
+                                break;
                             case 'range':
                                 d.searchOp = 'range';
                                 formHtml += '\t<div class="layui-form-item layui-inline">\n' +
@@ -823,6 +834,17 @@ define(["jquery", "tableSelect"], function ($, tableSelect) {
                 return value;
             },
             listenTableSearch: function (tableId) {
+                if (Object.keys(init.xmSelectList).length > 0) {
+                    $.each(init.xmSelectList, function (index, value) {
+                        const keysArray = Object.keys(value).map((key) => {
+                            return {name: value[key], value: key}
+                        })
+                        init.xmSelectModel[index] = xmSelect.render({
+                            el: '.xmSelect-' + index, language: 'zn', data: keysArray, name: index,
+                            filterable: true, paging: true, pageSize: 10, theme: {color: '#16b777'}, toolbar: {show: true},
+                        })
+                    })
+                }
                 form.on('submit(' + tableId + '_filter)', function (data) {
                     var dataField = data.field;
                     var formatFilter = {},
@@ -1155,6 +1177,11 @@ define(["jquery", "tableSelect"], function ($, tableSelect) {
                 if (tableId === undefined || tableId === '' || tableId == null) {
                     tableId = init.table_render_id;
                 }
+                if (Object.keys(init.xmSelectModel).length > 0) {
+                    $.each(init.xmSelectModel, function (index, value) {
+                        init.xmSelectModel[index].setValue([])
+                    })
+                }
                 table.reload(tableId, {
                     page: {
                         curr: 1