From 3b3d0f70b80e7d5fc475b9b6f9348933722b917c Mon Sep 17 00:00:00 2001
From: z9130 <984661593@qq.com>
Date: Fri, 25 Oct 2024 13:13:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/dashboard/home/index.vue        | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/apps/web-test/src/views/dashboard/home/index.vue b/apps/web-test/src/views/dashboard/home/index.vue
index 6a10a8f1..512f2610 100644
--- a/apps/web-test/src/views/dashboard/home/index.vue
+++ b/apps/web-test/src/views/dashboard/home/index.vue
@@ -40,7 +40,14 @@ import { storeToRefs } from 'pinia';
 import { useCanvasStore, UseTilesStore } from '#/store';
 
 import { groupList, tilesList } from './tiles';
-import { debounce, isElementInFolder, isGroup, updateRowHeight } from './utils';
+import {
+  debounce,
+  generateRandomString,
+  isElementInFolder,
+  isGroup,
+  pathToComponent,
+  updateRowHeight,
+} from './utils';
 
 const tilesStore = UseTilesStore();
 const canvasStore = useCanvasStore();
@@ -336,17 +343,18 @@ const layoutUpdatedEvent = (e) => {
     // 获取当前正在拖动的元素
     const dragItem = currentDragItem.value;
     console.log('当前拖动的元素', dragItem);
-
+    const firstKey = gridLayoutRefs.keys().next().value;
+    console.log(firstKey); // 'key1'
     // 判断当前拖动的元素是否进入目标画布区域
     const folderId = isElementInFolder(dragItem, groups);
     console.log('当前拖动的元素是否进入目标画布区域', folderId);
 
-    // const dom = gridLayoutRefs.get('7303');
-    // console.log(dom);
-    // dragItem.component = pathToComponent(dragItem.component, 'component');
-    // dom.layout.push({ ...dragItem, i: generateRandomString(12) });
+    const dom = gridLayoutRefs.get(firstKey);
+    console.log(dom);
+    dragItem.component = pathToComponent(dragItem.component, 'component');
+    dom.layout.push({ ...dragItem, i: generateRandomString(12) });
 
-    // delItem(dragItem);
+    delItem(dragItem);
 
     // console.log(domIdxxxxx.value);
     // console.log(dom);
@@ -569,7 +577,8 @@ const formState = reactive({
       Displayed as <code>[x, y, w, h]</code>:
       <div class="columns">
         <div v-for="item in layout">
-          <b>{{ item.i }}</b>: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
+          <b>{{ item.i }}</b
+          >: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
         </div>
       </div>
     </div>