From d64c408cf90aafff2c61bdffce8e5e44c4834db0 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Fri, 4 Jun 2021 17:08:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3=E6=9F=90=E4=BA=9B?=
 =?UTF-8?q?=E6=83=85=E5=86=B5=E4=B8=8B=E6=A0=87=E7=AD=BE=E6=8E=92=E5=BA=8F?=
 =?UTF-8?q?=E4=B8=8D=E6=AD=A3=E7=A1=AE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Tabs.vue | 42 +++++++++++++++++---------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Tabs.vue b/frontend/src/components/Tabs.vue
index cb479498..f080a372 100644
--- a/frontend/src/components/Tabs.vue
+++ b/frontend/src/components/Tabs.vue
@@ -3,6 +3,7 @@
     <div
       v-for="item in tabList"
       :key="item.key"
+      :data-id="item.key"
       :class="{tab: true, current: item.key === value, fixed: item.fixed}"
       :title="item.description"
       :data-key="item.key"
@@ -82,28 +83,25 @@ export default defineComponent({
       const tmp = list[oldIndex]
       list[oldIndex] = list[newIndex]
       list[newIndex] = tmp
-      emit('change-list', sortTabs(list))
+      emit('change-list', sortTabs([...list]))
     }
 
     let sortable: Sortable
     function initSortable () {
-      sortable && sortable.destroy()
-      nextTick(() => {
-        sortable = Sortable.create(refTabs.value!!, {
-          animation: 250,
-          ghostClass: 'on-sort',
-          direction: 'horizontal',
-          onEnd: ({ oldIndex, newIndex }: { oldIndex?: number; newIndex?: number }) => {
-            swapTab(oldIndex || 0, newIndex || 0)
-          },
-          onMove (event) {
-            if (event.related && event.dragged) {
-              if (event.related.classList.contains('fixed') !== event.dragged.classList.contains('fixed')) {
-                return false
-              }
+      sortable = Sortable.create(refTabs.value!!, {
+        animation: 250,
+        ghostClass: 'on-sort',
+        direction: 'horizontal',
+        onEnd: ({ oldIndex, newIndex }: { oldIndex?: number; newIndex?: number }) => {
+          swapTab(oldIndex || 0, newIndex || 0)
+        },
+        onMove (event) {
+          if (event.related && event.dragged) {
+            if (event.related.classList.contains('fixed') !== event.dragged.classList.contains('fixed')) {
+              return false
             }
           }
-        })
+        }
       })
     }
 
@@ -130,12 +128,16 @@ export default defineComponent({
       initSortable()
     })
 
-    watch(() => props.list, () => {
-      initSortable()
-    })
-
     const tabList = computed(() => sortTabs(props.list))
 
+    watch(tabList, (val) => {
+      if (sortable && val) {
+        nextTick(() => {
+          sortable.sort(val.map(x => x.key))
+        })
+      }
+    })
+
     return {
       refTabs,
       switchTab,