fix: 编写拖拽信息

src/views/chart/components/ContentCharts/components/ItemBox/index.vue

@@ -28,6 +28,10 @@
 <script setup lang="ts">
 import { AppleControlBtn } from '@/components/AppleControlBtn/index'
 import { requireFallbackImg } from '@/utils'
+import { DragKeyEnum } from '@/enums/editPageEnum'
+import { ConfigType } from '@/packages/index.d'
+import omit from 'lodash/omit'
+
 defineProps({
   menuOptions: {
     type: Array,
@@ -36,11 +40,9 @@ defineProps({
 })
 
 // 拖拽处理
-const handleDragStart = (e: DragEvent, item: any) => {
-  if (e.dataTransfer instanceof Object && e.target instanceof Object) {
-    e.dataTransfer.setData('chartName', item.key)
-    e.dataTransfer.setData('chartNode', item.node)
-  }
+const handleDragStart = (e: DragEvent, item: ConfigType) => {
+  // 将配置项绑定到拖拽属性上
+  e!.dataTransfer!.setData(DragKeyEnum.DROG_KEY, JSON.stringify(omit(item, ['node', 'image'])))
 }
 </script>
 

src/views/chart/components/ContentEdit/components/EditBottom/index.vue

@@ -109,7 +109,7 @@ const selectHandle = (v: number) => {
 // 点击锁处理
 const lockHandle = () => {
   chartEditStore.setEditCanvasItem(
-    chartEditStoreEnum.LOCKSCALE,
+    chartEditStoreEnum.LOCK_SCALE,
     !lockScale.value
   )
 }

src/views/chart/components/ContentEdit/hooks/useDrop.hook.ts

@@ -0,0 +1,35 @@
+import { toRefs } from 'vue'
+import { useThrottleFn } from '@vueuse/core'
+import { getChartEditStore } from './useStore.hook'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { DragKeyEnum } from '@/enums/editPageEnum'
+
+const chartEditStore = getChartEditStore()
+const { scale } = toRefs(chartEditStore.getEditCanvas)
+
+// * 拖拽中
+export const handleDrop = (e: DragEvent) => {
+  e.preventDefault()
+  const Loading = window['$loading']
+  try {
+    Loading.start()
+
+    const chartName = e!.dataTransfer!.getData(DragKeyEnum.DROG_KEY)
+    console.log(chartName)
+    chartEditStore.setMousePosition(e.offsetX, e.offsetY)
+
+    setTimeout(() => {
+      Loading.finish()
+    })
+  } catch (error) {
+    Loading.error()
+    window['$message'].success(`添加图表失败，请保存数据后刷新重试`)
+  }
+}
+
+// * 拖拽结束
+export const handleDragOver = (e: DragEvent) => {
+  e.preventDefault()
+  e.stopPropagation()
+  if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
+}

src/views/chart/components/ContentEdit/hooks/useLayout.hook.ts

@@ -6,13 +6,13 @@ const chartEditStore = getChartEditStore()
 
 export const useLayout = () => {
   onMounted(() => {
-    // 设置 Dom 值(ref 不生效先用document)
+    // 设置 Dom 值(ref 不生效先用 document)
     chartEditStore.setEditCanvasItem(
-      EditCanvasTypeEnum.EDITLAYOUTDOM,
+      EditCanvasTypeEnum.EDIT_LAYOUT_DOM,
       document.getElementById('go-chart-edit-layout')
     )
     chartEditStore.setEditCanvasItem(
-      EditCanvasTypeEnum.EDITCONTENTDON,
+      EditCanvasTypeEnum.EDIT_CONTENT_DOM,
       document.getElementById('go-chart-edit-content')
     )
 

src/views/chart/components/ContentEdit/index.vue

@@ -6,6 +6,8 @@
     :showTop="false"
     :showBottom="true"
     :depth="1"
+    @drop="handleDrop"
+    @dragover="handleDragOver"
   >
     <div id="go-chart-edit-content">
       <!-- 中间区域 -->
@@ -19,15 +21,15 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, onMounted } from 'vue'
+import { onUnmounted, onMounted,toRefs } from 'vue'
 import { ContentBox } from '../ContentBox/index'
 import { EditRange } from './components/EditRange'
 import { EditBottom } from './components/EditBottom'
 import { useLayout } from './hooks/useLayout.hook'
+import { handleDrop, handleDragOver } from './hooks/useDrop.hook'
 
 // 布局处理
 useLayout()
-
 </script>
 
 <style lang="scss" scoped>
@@ -35,7 +37,7 @@ useLayout()
   position: relative;
   width: 100%;
   overflow: hidden;
-  @include background-image("background-point");
+  @include background-image('background-point');
   @extend .go-point-bg;
   @include goId(chart-edit-content) {
     position: relative;
@@ -47,7 +49,7 @@ useLayout()
     @extend .go-transition;
     &.content-resize {
       border-radius: 15px;
-      @include hover-border-color("hover-border-color");
+      @include hover-border-color('hover-border-color');
     }
   }
 }