NEZ-2052 feat：编辑页面column, value mapping支持调整顺序

nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue

@@ -482,6 +482,21 @@
         <div class="form__sub-title">
           <span>{{$t('dashboard.panel.chartForm.columns')}}</span>
         </div>
+        <draggable
+          v-model="chartConfig.param.columns"
+          @end="change"
+          :scroll-sensitivity="150"
+          :options="{
+          dragClass:'drag-columns-class',
+          fallbackClass:'fallback-class',
+          forceFallback:true,
+          ghostClass:'chart-ghost',
+          chosenClass:'choose-class',
+          scroll:true,
+          filter: '.drag-disabled',
+          animation: 150,
+          handle: '.drag-sort'
+        }">
           <div v-for="(item,index) in chartConfig.param.columns" :key="index" :class="item.error? 'is-item-box-error' : ''">
             <div class="chart-title chart-title-config">
               <span class="chart-title-content">
@@ -502,7 +517,7 @@
                 <span style="margin-right: 5px" class="nz-icon-minus-medium" :title="$t('overall.delete')">
                   <i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
                 </span>
-              <span style="margin-right: 5px;fontSize:17px;cursor: pointer;" class="draggable-sort" :title="$t('dashboard.panel.chartForm.sort')">
+                <span style="margin-right: 5px;fontSize:17px;cursor: pointer;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
                   <i class="el-icon-sort"></i>
                 </span>
               </span>
@@ -550,6 +565,7 @@
               </el-row>
             </transition-group>
           </div>
+         </draggable>
         <div @click="addColumns" class="thresholds-add">
           {{$t('overall.addColumns')}}
         </div>
@@ -567,6 +583,21 @@
         </div>
         <transition name="el-zoom-in-top">
           <el-row v-if="chartConfig.param.enable.valueMapping">
+            <draggable
+              v-model="chartConfig.param.valueMapping"
+              @end="change"
+              :scroll-sensitivity="150"
+              :options="{
+              dragClass:'drag-valueMapping-class',
+              fallbackClass:'fallback-class',
+              forceFallback:true,
+              ghostClass:'chart-ghost',
+              chosenClass:'choose-class',
+              scroll:true,
+              filter: '.drag-disabled',
+              animation: 150,
+              handle: '.drag-sort'
+            }">
               <div
                 v-for="(item,index) in chartConfig.param.valueMapping"
                 :key="index"
@@ -606,6 +637,9 @@
                     <span @click="removeMapping(index)" style="margin-right: 5px" :title="$t('overall.delete')">
                       <i  class="nz-icon nz-icon-minus"></i>
                     </span>
+                    <span style="margin-right: 5px;fontSize:17px;cursor: pointer;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
+                      <i class="el-icon-sort"></i>
+                    </span>
                   </span>
                 </div>
                 <transition-group appear tag="div" name="el-zoom-in-top">
@@ -737,6 +771,7 @@
                   </el-row>
                 </transition-group>
               </div>
+            </draggable>
             <div @click="addMapping" class="thresholds-add">
               {{$t('overall.addMapping')}}
             </div>

nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue

@@ -435,6 +435,21 @@
         <div class="form__sub-title">
           <span>{{$t('dashboard.panel.chartForm.columns')}}</span>
         </div>
+        <draggable
+          v-model="chartConfig.param.columns"
+          @end="change"
+          :scroll-sensitivity="150"
+          :options="{
+          dragClass:'drag-columns-class',
+          fallbackClass:'fallback-class',
+          forceFallback:true,
+          ghostClass:'chart-ghost',
+          chosenClass:'choose-class',
+          scroll:true,
+          filter: '.drag-disabled',
+          animation: 150,
+          handle: '.drag-sort'
+        }">
           <div v-for="(item,index) in chartConfig.param.columns" :key="index" :class="item.error? 'is-item-box-error' : ''">
             <div class="chart-title chart-title-config">
               <span class="chart-title-content">
@@ -455,7 +470,7 @@
                 <span style="margin-right: 5px" class="nz-icon-minus-medium" :title="$t('overall.delete')">
                   <i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
                 </span>
-              <span style="margin-right: 5px;fontSize:17px;cursor: pointer;" class="draggable-sort" :title="$t('dashboard.panel.chartForm.sort')">
+                <span style="margin-right: 5px;fontSize:17px;cursor: pointer;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
                   <i class="el-icon-sort"></i>
                 </span>
               </span>
@@ -503,6 +518,7 @@
               </el-row>
             </transition-group>
           </div>
+        </draggable>
         <div @click="addColumns" class="thresholds-add">
           {{$t('overall.addColumns')}}
         </div>
@@ -520,6 +536,21 @@
         </div>
         <transition name="el-zoom-in-top">
           <el-row v-if="chartConfig.param.enable.valueMapping">
+            <draggable
+              v-model="chartConfig.param.valueMapping"
+              @end="change"
+              :scroll-sensitivity="150"
+              :options="{
+              dragClass:'drag-valueMapping-class',
+              fallbackClass:'fallback-class',
+              forceFallback:true,
+              ghostClass:'chart-ghost',
+              chosenClass:'choose-class',
+              scroll:true,
+              filter: '.drag-disabled',
+              animation: 150,
+              handle: '.drag-sort'
+            }">
               <div
                 v-for="(item,index) in chartConfig.param.valueMapping"
                 :key="index"
@@ -559,6 +590,9 @@
                     <span @click="removeMapping(index)" style="margin-right: 5px" :title="$t('overall.delete')">
                       <i  class="nz-icon nz-icon-minus"></i>
                     </span>
+                    <span style="margin-right: 5px;fontSize:17px;cursor: pointer;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
+                      <i class="el-icon-sort"></i>
+                    </span>
                   </span>
                 </div>
                 <transition-group appear tag="div" name="el-zoom-in-top">
@@ -691,6 +725,7 @@
                   </el-row>
                 </transition-group>
               </div>
+            </draggable>
             <div @click="addMapping" class="thresholds-add">
               {{$t('overall.addMapping')}}
             </div>
@@ -807,14 +842,15 @@ import nezhaColor from '@/components/common/nezhaColor'
 import filterSearch from '@/components/common/filterSearch/filterSearch.vue'
 import VueTagsInput from '@johmun/vue-tags-input'
 import { isGauge } from '@/components/chart/chart/tools'
-
+import draggable from 'vuedraggable'
 export default {
   name: 'systemChartConfig',
   mixins: [publicConfig, chartTypeShow],
   components: {
     nezhaColor,
     filterSearch,
-    VueTagsInput
+    VueTagsInput,
+    draggable
   },
   data () {
     return {