From 99aea4b9d36f5f6e72027962b38e11d5fe8b9523 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sun, 11 Sep 2022 01:26:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E6=94=B9=E6=88=90=E5=B1=82=E7=BA=A7=E4=B8=A2?=
 =?UTF-8?q?=E5=A4=B1=E5=93=8D=E5=BA=94=E5=BC=8F=E7=9A=84=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chart/ContentLayers/index.vue | 33 +++++++++++++++----------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index dcd61128..1c34c7b3 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/src/views/chart/ContentLayers/index.vue
@@ -17,7 +17,7 @@
       <n-text class="not-layer-text">暂无图层~</n-text>
     </n-space>
     <!-- https://github.com/SortableJS/vue.draggable.next -->
-    <draggable item-key="id" v-model="reverseList" ghostClass="ghost" @change="onMoveCallback">
+    <draggable item-key="id" v-model="layerList" ghostClass="ghost" @change="onMoveCallback">
       <template #item="{ element }">
         <div class="go-content-layer-box">
           <!-- 组合 -->
@@ -27,7 +27,7 @@
             v-else
             :componentData="element"
             @mousedown="mousedownHandle($event, element)"
-            @mouseenter="mouseenterHandle(element)" 
+            @mouseenter="mouseenterHandle(element)"
             @mouseleave="mouseleaveHandle(element)"
             @contextmenu="handleContextMenu($event, element, optionsHandle)"
           ></layers-list-item>
@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, toRaw } from 'vue'
+import { computed, ref, watch } from 'vue'
 import Draggable from 'vuedraggable'
 import cloneDeep from 'lodash/cloneDeep'
 import { ContentBox } from '../ContentBox/index'
@@ -58,9 +58,23 @@ import { icon } from '@/plugins'
 const { LayersIcon } = icon.ionicons5
 const chartLayoutStore = useChartLayoutStore()
 const chartEditStore = useChartEditStore()
-
 const { handleContextMenu, onClickOutSide } = useContextMenu()
 
+const layerList = ref<any>([])
+
+// 逆序展示
+const reverseList = computed(() => {
+  const list: Array<CreateComponentType | CreateComponentGroupType> = cloneDeep(chartEditStore.getComponentList)
+  return list.reverse()
+})
+
+watch(
+  () => reverseList.value,
+  newValue => {
+    layerList.value = newValue
+  }
+)
+
 // 右键事件
 const optionsHandle = (
   targetList: MenuOptionsItemType[],
@@ -80,12 +94,6 @@ const optionsHandle = (
   }
   return targetList
 }
- 
-// 逆序展示
-const reverseList = computed(() => {
-  const list: Array<CreateComponentType | CreateComponentGroupType> = cloneDeep(chartEditStore.getComponentList)
-  return list.reverse()
-})
 
 // 缩小
 const backHandle = () => {
@@ -95,14 +103,13 @@ const backHandle = () => {
 // 移动结束处理
 const onMoveCallback = (val: any) => {
   const { oldIndex, newIndex } = val.moved
-  const moveTarget = toRaw(val.moved.element)
   if (newIndex - oldIndex > 0) {
     // 从上往下
-    chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)
+    const moveTarget = chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)[0]
     chartEditStore.getComponentList.splice(-newIndex, 0, moveTarget)
   } else {
     // 从下往上
-    chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)
+    const moveTarget = chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)[0]
     if (newIndex === 0) {
       chartEditStore.getComponentList.push(moveTarget)
     } else {