From 1ec747acc7882b6af87458ab9eb6bbf1cda539aa Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Thu, 7 Nov 2024 01:04:16 +0800
Subject: [PATCH] fix

---
 preview/views/MainView.vue | 82 +++++++++++++++++++++++++++++---------
 1 file changed, 64 insertions(+), 18 deletions(-)

diff --git a/preview/views/MainView.vue b/preview/views/MainView.vue
index f3b09c0..970ef3a 100644
--- a/preview/views/MainView.vue
+++ b/preview/views/MainView.vue
@@ -11,28 +11,50 @@
       <div class="left">
         <div class="title">组件</div>
         <VueDraggable
-            v-model="store.components"
+            v-model="list0"
             :animation="150"
-            :group="{ name: 'people', pull: 'clone', put: false }"
+            :group="{ name: 'designer', pull: 'clone', put: false }"
             :sort="false"
-            :clone="clone"
+            @clone="clone"
             @start="onStart"
             @end="onEnd"
         >
-          <div v-for="item in store.components" :key="item.id" class="tem_btn">
+          <div v-for="item in list0" :key="item.id" class="tem_btn">
             {{ item.name }}
           </div>
         </VueDraggable>
       </div>
       <div ref="targetContent" class="center">
         <VueDraggable
-            v-model="store.previewScheme"
-            :group="{name: 'designer', pull: 'clone', put: false}"
+            v-model="list"
+            :sort="true"
+            :animation="150"
+            group="designer"
             ghost-class="ghost"
             class="canvas"
+            @start="onPreviewStart"
+            @update="onPreviewUpdate"
+            @stop="onPreviewStop"
         >
-          <NestedFunction v-model="store.previewScheme"></NestedFunction>
+          {{list}}
+<!--          {{store.previewScheme}}-->
+<!--          <template v-for="item in store.previewScheme" :key="item.id">-->
+<!--            <component  :id="item.id" :is="item.type" v-bind="item.props"-->
+<!--                       :class="item.class" :style="item.style">-->
+<!--              {{ item.text }}-->
+<!--&lt;!&ndash;              <template v-for="child in componentChildren" :key="child.id">&ndash;&gt;-->
+<!--&lt;!&ndash;                <DynamicComponent :component-data="child" />&ndash;&gt;-->
+<!--&lt;!&ndash;              </template>&ndash;&gt;-->
+<!--&lt;!&ndash;              <template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>&ndash;&gt;-->
+<!--&lt;!&ndash;                <DynamicComponent :component-data="slot" />&ndash;&gt;-->
+<!--&lt;!&ndash;              </template>&ndash;&gt;-->
+<!--            </component>-->
+<!--          </template>-->
+<!--          <DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">-->
+<!--            {{ component.id }}-->
+<!--          </DynamicComponent>-->
         </VueDraggable>
+
       </div>
       <!--      <div class="right">-->
       <!--        <component :is="componentsList[store?.nowComponent?.set]"></component>-->
@@ -41,20 +63,22 @@
   </div>
 </template>
 <script setup lang="ts">
-import {VueDraggable} from "vue-draggable-plus";
-import {onMounted, watch} from 'vue';
+import {DraggableEvent, VueDraggable} from "vue-draggable-plus";
+import {onMounted, ref, watch} from 'vue';
 import {uuid} from 'lsp-uuid';
 import {componentScheme} from "@/schemes/scheme";
 import {useSchemeStore} from '@/stores/useSchemeStore';
 import {IComponent} from "@/type/IComponent";
-import NestedFunction from "@/components/NestedFunction.vue";
 
+let list0=ref([])
+
+let list=ref([])
 
 let componentsList = [];
 const store = useSchemeStore();
 
 watch(store, (n) => {
-  console.log("数据", n);
+  console.log("store发生了变化", n);
 });
 
 const baseScheme =
@@ -84,7 +108,7 @@ store.$onAction(
        onError, // action 抛出或拒绝的钩子
      }) => {
       after((result) => {
-        console.log(result);
+        console.log(`store action-${name}回调后：`+result);
       })
       // 如果 action 抛出或返回一个拒绝的 promise，这将触发
       onError((error) => {
@@ -103,11 +127,23 @@ const initScheme = () => {
 
 
 onMounted(() => {
+  list0.value.push(
+      {
+        "id":123,
+        "name":"www"
+      },
+      {
+        "id":125,
+        "name":"rrr"
+      }
+  );
+  list.value=[]
   initScheme();
   // @ts-ignore
 });
 
-const clone = function (element: IComponent) {
+function clone (element: Record<'name' | 'id'|'type'|'props'|'class'|'text'|'style'|'slots', IComponent>) {
+  console.log("clone",element)
   return {
     id: `${element.type}-${uuid()}`,
     name: element.name,
@@ -125,17 +161,27 @@ const clone = function (element: IComponent) {
     loop: {},
   };
 }
-
-const onEnd = (obj: any) => {
-  console.log(obj)
+const onEnd = (event:DraggableEvent) => {
+  console.log("onEnd",event)
   // const {oldDraggableIndex} = obj;
   // store.previewData(store.component[oldDraggableIndex]);
   // store.nowComponentsData(store.component[oldDraggableIndex]);
 };
 
-const onStart = function () {
-  console.log("start")
+const onStart = function (event) {
+  console.log("onStart",event)
 }
+const onPreviewStart = function (event) {
+  console.log("onPreviewStart",event)
+}
+const onPreviewUpdate = function (event) {
+  console.log("onPreviewUpdate",event)
+}
+
+const onPreviewStop = function (event) {
+  console.log(event)
+}
+
 
 const view = () => {
   localStorage.setItem("lowcode", JSON.stringify(store.previewScheme));