暂存

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>