Add search functionality to chart design fields

src/main/java/com/rebuild/web/dashboard/ChartDesignController.java

@@ -32,6 +32,7 @@ import com.rebuild.core.service.dashboard.charts.ChartsFactory;
 import com.rebuild.core.service.dashboard.charts.builtin.DataList;
 import com.rebuild.core.service.dashboard.charts.builtin.EmbedFrame;
 import com.rebuild.core.service.dashboard.charts.builtin.HeadingText;
+import com.rebuild.core.service.general.QuickCodeReindexTask;
 import com.rebuild.core.support.i18n.Language;
 import com.rebuild.utils.JSONUtils;
 import com.rebuild.utils.RbAssert;
@@ -153,10 +154,10 @@ public class ChartDesignController extends EntityController {
                 type = "list";
             }
 
+            String L42 = (parent == null ? "" : (EasyMetaFactory.getLabel(parent) + ".")) + easyField.getLabel();
             dest.add(new String[]{
                     (parent == null ? "" : (parent.getName() + ".")) + easyField.getName(),
-                    (parent == null ? "" : (EasyMetaFactory.getLabel(parent) + ".")) + easyField.getLabel(),
-                    type});
+                    L42, type, QuickCodeReindexTask.generateQuickCode(L42)});
         }
     }
 

src/main/resources/web/assets/css/approvals.css

@@ -46,7 +46,7 @@ See LICENSE and COMMERCIAL in the project root for license information.
   right: 27px;
   top: 18px;
   color: #999;
-  font-size: 1.23rem;
+  font-size: 15px;
 }
 
 #config-side .header > input {

src/main/resources/web/assets/css/chart-design.css

@@ -263,8 +263,9 @@ a.ui-draggable.ui-draggable-dragging {
 .data-info .input .form-control + .icon {
   position: absolute;
   right: 12px;
-  top: 9px;
+  top: 8px;
   color: #999;
+  font-size: 15px;
 }
 
 .data-info .input .form-control:hover,
@@ -551,3 +552,25 @@ a.ui-draggable.ui-draggable-dragging {
 .gradient-bg-list > a:hover {
   opacity: 0.8;
 }
+
+h5 > .search-input {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+h5 > .search-input > input {
+  border: 0 none;
+  width: 100%;
+  padding: 3px 0;
+  appearance: none;
+  outline: 0 none;
+  background-color: transparent;
+}
+
+h5 > .search-input > .zmdi {
+  position: absolute;
+  right: 1px;
+  top: 4px;
+  color: #999;
+  font-size: 15px;
+}

src/main/resources/web/assets/js/charts/chart-design.js

@@ -96,6 +96,27 @@ $(document).ready(() => {
       .disableSelection()
   }, 1000)
 
+  // v4.2 搜索
+  $('.search-input input').on('input', (e) => {
+    $setTimeout(
+      () => {
+        const q = $trim(e.target.value).toLowerCase()
+        $('.list-unstyled.fields>li>a').each(function () {
+          const $item = $(this)
+          const pinyin = $item.data('pinyin')
+          if (!q || $item.text().toLowerCase().includes(q) || $item.data('field').toLowerCase().includes(q) || (pinyin && pinyin.toLowerCase().includes(q))) {
+            $item.removeClass('hide')
+          } else {
+            $item.addClass('hide')
+          }
+        })
+        $('.data-aside>.rb-scroller').perfectScrollbar('update')
+      },
+      200,
+      'sortable-box'
+    )
+  })
+
   let _AdvFilter
   $('.J_filter').on('click', (e) => {
     $stopEvent(e, true)

src/main/resources/web/dashboard/chart-design.html

@@ -25,10 +25,15 @@
               </ul>
             </div>
             <div class="data-info J_fields">
-              <h5>[[${bundle.L('可用字段')}]]</h5>
+              <h5>
+                <div class="search-input">
+                  <input type="text" th:placeholder="${bundle.L('可用字段')}" />
+                  <i class="zmdi zmdi-search"></i>
+                </div>
+              </h5>
               <ul class="list-unstyled fields">
                 <th:block th:each="field : ${availableFields}">
-                  <li th:class="${field[2]}"><a th:title="${field[1]}" th:data-field="${field[0]}" th:data-type="${field[2]}">[[${field[1]}]]</a></li>
+                  <li th:class="${field[2]}"><a th:title="${field[1]}" th:data-field="${field[0]}" th:data-pinyin="${field[3]}" th:data-type="${field[2]}">[[${field[1]}]]</a></li>
                 </th:block>
               </ul>
             </div>