feat: 自定义排序

backend/src/main/java/io/dataease/controller/chart/ChartViewController.java

@@ -75,8 +75,8 @@ public class ChartViewController {
     @DePermission(type = DePermissionType.PANEL, level = ResourceAuthLevel.PANNEL_LEVEL_VIEW, paramIndex = 1)
     @ApiOperation("详细信息")
     @PostMapping("/get/{id}/{panelId}")
-    public ChartViewDTO get(@PathVariable String id, @PathVariable String panelId,@RequestBody ChartViewRequest viewRequest) {
-        ChartViewDTO result = chartViewService.getOne(id,viewRequest.getQueryFrom());
+    public ChartViewDTO get(@PathVariable String id, @PathVariable String panelId, @RequestBody ChartViewRequest viewRequest) {
+        ChartViewDTO result = chartViewService.getOne(id, viewRequest.getQueryFrom());
         return result;
     }
 
@@ -92,7 +92,7 @@ public class ChartViewController {
     @ApiOperation("数据")
     @PostMapping("/getData/{id}/{panelId}")
     public ChartViewDTO getData(@PathVariable String id, @PathVariable String panelId,
-            @RequestBody ChartExtRequest requestList) throws Exception {
+                                @RequestBody ChartExtRequest requestList) throws Exception {
         return chartViewService.getData(id, requestList);
     }
 
@@ -113,8 +113,8 @@ public class ChartViewController {
     @DePermission(type = DePermissionType.PANEL, level = ResourceAuthLevel.PANNEL_LEVEL_MANAGE, paramIndex = 1)
     @ApiOperation("批量复制")
     @PostMapping("chartBatchCopy/{panelId}")
-    public Map<String,String> chartBatchCopy(@RequestBody ChartCopyBatchRequest request, @PathVariable String panelId) {
-        return chartViewService.chartBatchCopy(request,panelId);
+    public Map<String, String> chartBatchCopy(@RequestBody ChartCopyBatchRequest request, @PathVariable String panelId) {
+        return chartViewService.chartBatchCopy(request, panelId);
     }
 
     @ApiIgnore
@@ -161,8 +161,16 @@ public class ChartViewController {
 
     @ApiOperation("校验视图Title")
     @PostMapping("/checkTitle")
-    public String checkTitle( @RequestBody ChartViewCacheRequest request) {
+    public String checkTitle(@RequestBody ChartViewCacheRequest request) {
         return chartViewService.checkTitle(request);
     }
 
+    @ApiIgnore
+    @ApiOperation("获取字段值")
+    @PostMapping("/getFieldData/{id}/{panelId}/{fieldId}")
+    public List<String> getFieldData(@PathVariable String id, @PathVariable String panelId, @PathVariable String fieldId,
+                                     @RequestBody ChartExtRequest requestList) throws Exception {
+        return chartViewService.getFieldData(id, requestList, false, fieldId);
+    }
+
 }

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

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { customSort } from '@/views/chart/chart/util'
+import { post } from '@/api/dataset/dataset'
 
 export default {
   name: 'CustomSortEdit',
@@ -27,6 +27,10 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    field: {
+      type: Object,
+      required: true
     }
   },
   data() {
@@ -34,6 +38,11 @@ export default {
       sortList: []
     }
   },
+  computed: {
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
+    }
+  },
   watch: {
     chart() {
       this.init()
@@ -44,34 +53,8 @@ export default {
   },
   methods: {
     init() {
-      console.log(this.chart)
-      const chart = JSON.parse(JSON.stringify(this.chart))
-      let customSortData
-      const res = []
-      if (Object.prototype.toString.call(chart.customSort) === '[object Array]') {
-        customSortData = JSON.parse(JSON.stringify(chart.customSort))
-      } else {
-        customSortData = JSON.parse(chart.customSort)
-      }
-      if (!customSortData || customSortData.length === 0) {
-        if (chart && chart.data) {
-          const data = chart.data.datas
-          data.forEach(ele => {
-            res.push(ele.field)
-          })
-        }
-      } else {
-        if (chart && chart.data) {
-          const data = chart.data.datas
-          const cus = customSort(customSortData, data)
-          cus.forEach(ele => {
-            res.push(ele.field)
-          })
-        }
-      }
-      // 字段去重
-      this.sortList = res.filter(function(item, index, arr) {
-        return res.indexOf(item, 0) === index
+      post('/chart/view/getFieldData/' + this.chart.id + '/' + this.panelInfo.id + '/' + this.field.id, {}).then(response => {
+        this.sortList = response.data
       })
     },
     onMove() {

frontend/src/views/chart/components/drag-item/DimensionItem.vue

@@ -33,6 +33,7 @@
                 <el-dropdown-item :command="beforeSort('none')">{{ $t('chart.none') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeSort('asc')">{{ $t('chart.asc') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeSort('desc')">{{ $t('chart.desc') }}</el-dropdown-item>
+                <el-dropdown-item v-show="false && (item.deType === 0 || item.deType === 5)" :command="beforeSort('custom_sort')">{{ $t('chart.custom_sort') }}...</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
@@ -179,8 +180,18 @@ export default {
     },
     sort(param) {
       // console.log(param)
-      this.item.sort = param.type
-      this.$emit('onDimensionItemChange', this.item)
+      if (param.type === 'custom_sort') {
+        const item = {
+          index: this.index,
+          sort: param.type
+        }
+        this.$emit('onCustomSort', item)
+      } else {
+        this.item.index = this.index
+        this.item.sort = param.type
+        this.item.customSort = []
+        this.$emit('onDimensionItemChange', this.item)
+      }
     },
     beforeSort(type) {
       return {

frontend/src/views/chart/view/ChartEdit.vue

@@ -372,6 +372,7 @@
                             @editItemFilter="showDimensionEditFilter"
                             @onNameEdit="showRename"
                             @valueFormatter="valueFormatter"
+                            @onCustomSort="onCustomSort"
                           />
                         </transition-group>
                       </draggable>
@@ -934,6 +935,23 @@
         <el-button type="primary" size="mini" @click="saveValueFormatter">{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
+
+    <!--自定义排序-->
+    <el-dialog
+      v-if="showCustomSort"
+      v-dialogDrag
+      :title="$t('chart.custom_sort')"
+      :visible="showCustomSort"
+      :show-close="false"
+      width="500px"
+      class="dialog-css"
+    >
+      <custom-sort-edit :chart="chart" :field="customSortField" @onSortChange="customSortChange" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeCustomSort">{{ $t('chart.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="saveCustomSort">{{ $t('chart.confirm') }}</el-button>
+      </div>
+    </el-dialog>
   </el-row>
 </template>
 
@@ -996,9 +1014,11 @@ import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 import { pluginTypes } from '@/api/chart/chart'
 import ValueFormatterEdit from '@/views/chart/components/value-formatter/ValueFormatterEdit'
 import ChartStyle from '@/views/chart/view/ChartStyle'
+import CustomSortEdit from '@/views/chart/components/compare/CustomSortEdit'
 export default {
   name: 'ChartEdit',
   components: {
+    CustomSortEdit,
     ChartStyle,
     ValueFormatterEdit,
     LabelNormalText,
@@ -1131,7 +1151,10 @@ export default {
       preChartId: '',
       pluginRenderOptions: [],
       showValueFormatter: false,
-      valueFormatterItem: {}
+      valueFormatterItem: {},
+      showCustomSort: false,
+      customSortList: [],
+      customSortField: {}
 
     }
   },
@@ -1540,7 +1563,6 @@ export default {
       const view = this.buildParam(true, 'chart', false, switchType)
       if (!view) return
       viewEditSave(this.panelInfo.id, view).then(() => {
-        this.getData(this.param.id)
         bus.$emit('view-in-cache', { type: 'propChange', viewId: this.param.id })
       })
     },
@@ -1697,6 +1719,11 @@ export default {
       return true
     },
 
+    onCustomSort(item) {
+      this.customSortField = this.view.xaxis[item.index]
+      this.customSort()
+    },
+
     dimensionItemChange(item) {
       this.calcData(true)
     },
@@ -2385,6 +2412,33 @@ export default {
       }
       this.calcData(true)
       this.closeValueFormatter()
+    },
+
+    customSort() {
+      this.showCustomSort = true
+    },
+    customSortChange(val) {
+      this.customSortList = val
+    },
+    closeCustomSort() {
+      this.showCustomSort = false
+      this.customSortField = {}
+      this.customSortList = []
+    },
+    saveCustomSort() {
+      // 先将所有自定义排序的维度设置为none，再对当前维度赋值
+      this.view.xaxis.forEach(ele => {
+        if (ele.sort === 'custom_sort') {
+          ele.sort = 'none'
+          ele.customSort = []
+        }
+        if (ele.id === this.customSortField.id) {
+          ele.sort = 'custom_sort'
+          ele.customSort = this.customSortList
+        }
+      })
+      this.calcData(true)
+      this.closeCustomSort()
     }
   }
 }