Merge pull request #10169 from dataease/pr@dev-v2@feat_tab-sort

feat(仪表板): Tab组件支持排序

core/core-frontend/package.json

@@ -52,6 +52,7 @@
     "vue": "^3.3.4",
     "vue-clipboard3": "^2.0.0",
     "vue-codemirror": "^6.1.1",
+    "vue-draggable-next": "^2.2.1",
     "vue-i18n": "^9.2.2",
     "vue-router": "4.1.3",
     "vue-types": "^5.0.2",

core/core-frontend/src/custom-component/de-tabs/Component.vue

@@ -14,11 +14,12 @@
       :border-color="noBorderColor"
       :border-active-color="borderActiveColor"
     >
+      <draggable :list="moveTabs" animation="100" class="drag-list" item-key="id">
         <el-tab-pane
           class="el-tab-pane-custom"
           :lazy="true"
           :key="tabItem.name"
-        v-for="(tabItem, index) in element.propValue"
+          v-for="(tabItem, index) in moveTabs"
           :label="tabItem.title"
           :name="tabItem.name"
         >
@@ -73,6 +74,7 @@
             :outer-scale="scale"
           ></de-preview>
         </el-tab-pane>
+      </draggable>
     </de-custom-tab>
     <el-dialog
       title="编辑标题"
@@ -118,6 +120,7 @@ import { canvasChangeAdaptor, findComponentIndexById } from '@/utils/canvasUtils
 import DeCustomTab from '@/custom-component/de-tabs/DeCustomTab.vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
+import draggable from 'vuedraggable'
 const dvMainStore = dvMainStoreWithOut()
 const { tabMoveInActiveId, bashMatrixInfo, editMode, mobileInPc } = storeToRefs(dvMainStore)
 const tabComponentRef = ref(null)
@@ -174,8 +177,17 @@ const editableTabsValue = ref(null)
 const noBorderColor = ref('none')
 let currentInstance
 
+const moveTabs = computed(
+  () => element.value.propValue || [{ name: '1', label: 'Tab 1', content: 'Content 1' }]
+)
+
 const isEditMode = computed(() => editMode.value === 'edit' && isEdit.value && !mobileInPc.value)
 
+const onMove = evt => {
+  // do custom
+  return true
+}
+
 const calcTabLength = () => {
   setTimeout(() => {
     if (element.value.propValue.length > 1) {