Merge pull request #6704 from dataease/pr@dev@feat_custom_sort_top_and_find

feat: 维度自定义排序支持置顶和搜索#6288

core/frontend/src/icons/svg/to-top.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700022592729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1436" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M797.866667 490.666667L571.733333 266.666667 533.333333 228.266667c-6.4-6.4-14.933333-8.533333-23.466666-8.533334-8.533333 0-17.066667 2.133333-23.466667 8.533334L448 266.666667 226.133333 490.666667c-8.533333 8.533333-8.533333 21.333333 0 29.866666l29.866667 29.866667c8.533333 8.533333 21.333333 8.533333 29.866667 0l183.466666-183.466667V874.666667c0 10.666667 8.533333 21.333333 21.333334 21.333333h42.666666c10.666667 0 21.333333-8.533333 21.333334-21.333333V369.066667l183.466666 183.466666c8.533333 8.533333 21.333333 8.533333 29.866667 0l29.866667-29.866666c8.533333-8.533333 8.533333-23.466667 0-32zM874.666667 215.466667H149.333333c-10.666667 0-21.333333-8.533333-21.333333-21.333334v-42.666666c0-10.666667 8.533333-21.333333 21.333333-21.333334h725.333334c10.666667 0 21.333333 8.533333 21.333333 21.333334v42.666666c0 12.8-8.533333 21.333333-21.333333 21.333334z" fill="#297AFF" p-id="1437"></path></svg>

core/frontend/src/views/chart/components/compare/CustomSortEdit.vue

@@ -1,16 +1,25 @@
 <template>
   <div>
+    <el-row style="margin-bottom: 6px">
+      <el-col>
+        <el-input
+          v-model="searchText"
+          :placeholder="$t('commons.search')"
+          size="mini"
+        />
+      </el-col>
+    </el-row>
     <draggable
       v-model="sortList"
       group="drag"
       animation="300"
-      :move="onMove"
       class="drag-list"
+      :disabled="searchText"
       @update="onUpdate"
     >
       <transition-group class="draggable-group">
         <span
-          v-for="(item) in sortList"
+          v-for="(item, index) in filterList"
           :key="item"
           class="item-dimension"
           :title="item"
@@ -22,6 +31,15 @@
           <span class="item-span">
             {{ item }}
           </span>
+          <span
+            :title="$t('panel.to_top')"
+            @click="moveToTop(index, item)"
+          >
+            <svg-icon
+              icon-class="to-top"
+              class="item-icon to-top"
+            />
+          </span>
         </span>
       </transition-group>
     </draggable>
@@ -49,12 +67,19 @@ export default {
   },
   data() {
     return {
-      sortList: []
+      sortList: [],
+      searchText: ''
     }
   },
   computed: {
     panelInfo() {
       return this.$store.state.panel.panelInfo
+    },
+    filterList() {
+      if (!this.searchText) {
+        return this.sortList
+      }
+      return this.sortList.filter(item => item?.includes(this.searchText))
     }
   },
   watch: {
@@ -72,7 +97,13 @@ export default {
         this.onUpdate()
       })
     },
-    onMove() {
+    moveToTop(index, item) {
+      let targetIndex = index
+      if (this.searchText) {
+        targetIndex = this.sortList.findIndex(i => i === item)
+      }
+      const [target] = this.sortList.splice(targetIndex, 1)
+      this.sortList.unshift(target)
     },
     onUpdate() {
       this.$emit('onSortChange', this.sortList)
@@ -98,7 +129,10 @@ export default {
   display: flex;
   align-items: center;
 }
-
+.item-dimension .to-top {
+  display: none;
+  cursor: pointer;
+}
 .item-icon{
   cursor: move;
   margin: 0 2px;
@@ -129,6 +163,9 @@ export default {
   border-color: #a3d3ff;
   cursor: pointer;
 }
+.item-dimension:hover .to-top {
+  display: block;
+}
 
 .blackTheme .item-dimension:hover {
   color: var(--Main);