feat(过滤器): 下拉过滤器自定义排序(等待设计请勿merge)

frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js

@@ -99,6 +99,9 @@ class TextSelectServiceImpl extends WidgetService {
   isSortWidget() {
     return true
   }
+  isCustomSortWidget() {
+    return true
+  }
 
   fillValueDerfault(element) {
     const defaultV = element.options.value === null ? '' : element.options.value.toString()

frontend/src/views/panel/filter/filterMain/FilterControl.vue

@@ -51,6 +51,52 @@
           </el-popover>
         </span>
 
+        <span
+          v-if="widget.isCustomSortWidget && widget.isCustomSortWidget()"
+          style="padding-left: 10px;"
+        >
+          <el-checkbox
+            v-model="enableCustomSort"
+            @change="enableCustomSortChange"
+          >
+            <span>{{ $t('chart.sort') }}</span>
+          </el-checkbox>
+
+          <el-popover
+            v-model="customSortPopovervisible"
+            placement="bottom-end"
+            :disabled="!enableCustomSort"
+            width="180"
+          >
+            <div style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;">
+              <filter-custom-sort
+                :field-id="fieldIds"
+                @on-filter-sort-change="customSortChange"
+              />
+              <div
+                slot="footer"
+                class="dialog-footer filter-custom-sort-footer"
+              >
+                <el-button
+                  size="mini"
+                  @click="cancelCustomSort"
+                >{{ $t('chart.cancel') }}</el-button>
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click="saveCustomSort"
+                >{{ $t('chart.confirm') }}</el-button>
+              </div>
+            </div>
+
+            <i
+              slot="reference"
+              :class="{'i-filter-active': enableCustomSort, 'i-filter-inactive': !enableCustomSort}"
+              class="el-icon-sort i-filter"
+            />
+          </el-popover>
+        </span>
+
       </div>
     </el-col>
 
@@ -197,9 +243,10 @@
 </template>
 
 <script>
-
+import FilterCustomSort from './FilterCustomSort'
 export default {
   name: 'FilterControl',
+  components: { FilterCustomSort },
   props: {
     widget: {
       type: Object,
@@ -232,10 +279,16 @@ export default {
         { id: 'HH', name: 'HH' },
         { id: 'HH:mm', name: 'HH:mm' },
         { id: 'HH:mm:ss', name: 'HH:mm:ss' }
-      ]
+      ],
+      enableCustomSort: false,
+      customSortPopovervisible: false
+    }
+  },
+  computed: {
+    fieldIds() {
+      return this.element.options.attrs.fieldId || []
     }
   },
-  computed: {},
   watch: {
     'childViews.datasetParams': {
       handler(newName, oldName) {
@@ -265,6 +318,24 @@ export default {
     }
   },
   methods: {
+    enableCustomSortChange(val) {
+      this.enableCustomSort = val
+      this.element.options.attrs.sort = {
+        sort: 'custom'
+      }
+    },
+    customSortChange(list) {
+
+    },
+    saveCustomSort() {
+
+    },
+    cancelCustomSort() {
+      this.customSortPopovervisible = false
+    },
+    initCustomParam() {
+      this.enableCustomSort = this.element.options.attrs.sort?.sort === 'custom'
+    },
     multipleChange(value) {
       this.fillAttrs2Filter()
     },
@@ -395,4 +466,11 @@ export default {
   text-overflow: ellipsis;
 }
 
+.filter-custom-sort-footer {
+  margin-top: 5px;
+  padding-top: 5px;
+  border-top: solid 1px #eee;
+  text-align: end;
+}
+
 </style>

frontend/src/views/panel/filter/filterMain/FilterCustomSort.vue

@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <draggable
+      v-model="sortList"
+      group="drag"
+      animation="300"
+      :move="onMove"
+      class="drag-list"
+      @update="onUpdate"
+    >
+      <transition-group class="draggable-group">
+        <span
+          v-for="(item) in sortList"
+          :key="item"
+          class="item-dimension"
+          :title="item"
+        >
+          <svg-icon
+            icon-class="drag"
+            class="item-icon"
+          />
+          <span class="item-span">
+            {{ item }}
+          </span>
+        </span>
+      </transition-group>
+    </draggable>
+  </div>
+</template>
+
+<script>
+import { linkMultFieldValues, multFieldValues } from '@/api/dataset/dataset'
+import { getLinkToken, getToken } from '@/utils/auth'
+export default {
+  name: 'FilterCustomSort',
+  props: {
+
+    fieldId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      sortList: []
+    }
+  },
+  computed: {
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
+    }
+  },
+  watch: {
+    fieldId() {
+      this.init()
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let method = multFieldValues
+      const token = this.$store.getters.token || getToken()
+      const linkToken = this.$store.getters.linkToken || getLinkToken()
+      if (!token && linkToken) {
+        method = linkMultFieldValues
+      }
+      const param = { fieldIds: this.fieldId.split(',') }
+      if (this.panelInfo.proxy) {
+        param.userId = this.panelInfo.proxy
+      }
+
+      method(param).then(res => {
+        this.sortList = this.optionData(res.data)
+      })
+    },
+    optionData(data) {
+      if (!data) return null
+      return data.filter(item => !!item)
+    },
+    onMove() {
+    },
+    onUpdate() {
+      this.$emit('on-filter-sort-change', this.sortList)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drag-list {
+  overflow: auto;
+  height: 30vh;
+}
+
+.item-dimension {
+  padding: 2px;
+  margin: 2px;
+  border: solid 1px #eee;
+  text-align: left;
+  color: #606266;
+  /*background-color: rgba(35,46,64,.05);*/
+  background-color: white;
+  display: flex;
+  align-items: center;
+}
+
+.item-icon{
+  cursor: move;
+  margin: 0 2px;
+}
+
+.item-span{
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.blackTheme .item-dimension {
+  border: solid 1px;
+  border-color: var(--TableBorderColor);
+  color: var(--TextPrimary);
+  background-color: var(--MainBG);
+}
+
+.item-dimension + .item-dimension {
+  margin-top: 6px;
+}
+
+.item-dimension:hover {
+  color: #1890ff;
+  background: #e8f4ff;
+  border-color: #a3d3ff;
+  cursor: pointer;
+}
+
+.blackTheme .item-dimension:hover {
+  color: var(--Main);
+  background: var(--ContentBG);
+  cursor: pointer;
+}
+</style>