auto-solution/modeler/src/views/decision/communication/nodes-card.vue

<template>
  <div class="w-full">
    <a-collapse v-model:activeKey="activeKey" :accordion="true" class="platform-collapse">
      <a-collapse-panel key="1">
        <template #header>
          <span class="ks-model-builder-title-icon icon-model"></span>平台名称
        </template>
        <div class="w-full h-full">
          <a-row>
            <a-col v-for="nm in templateData" :span="12">
              <div
                :key="nm.id"
                class="ks-model-drag-item"
                @dragend="handleDragEnd"
                @dragstart="handleDragStart($event, nm)"
              >
                <img :alt="nm.description ?? nm.name ?? ''" class="icon" src="@/assets/icons/model-4.svg" />
                <span class="desc">{{ nm.description ?? nm.name }}</span>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-collapse-panel>
    </a-collapse>

  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { safePreventDefault, safeStopPropagation } from '@/utils/event';
import {findPlatformWithComponents} from './api'
import {type PlatformWithComponents} from './types'

export default defineComponent({
  emits: ['drag-item-start', 'drag-item-end'],
  setup(_props, { emit }) {

    const activeKey = ref<number>(1);
    const templateData = ref<PlatformWithComponents[]>([]);
    const isDraggingOver = ref<boolean>(false);
    const draggedNodeData = ref<PlatformWithComponents | null>(null);

    const loadTress = () => {
      templateData.value = []
      findPlatformWithComponents(1).then(r => {
        templateData.value = r.data ?? []
      });
    };

    const handleDragStart = (e: DragEvent, nm: PlatformWithComponents) => {
      let dragNode: PlatformWithComponents = { ...nm };
      draggedNodeData.value = dragNode as PlatformWithComponents;

      if (e.dataTransfer) {
        e.dataTransfer.setData('text/plain', JSON.stringify(draggedNodeData.value));
        e.dataTransfer.effectAllowed = 'copyMove';

        const dragPreview = document.createElement('div');
        dragPreview.textContent = dragNode.name || '';
        dragPreview.style.cssText = `
          position: absolute;
          top: -1000px;
          padding: 6px 12px;
          background: #3b82f6;
          color: white;
          border-radius: 6px;
          font-size: 12px;
          font-weight: 500;
        `;
        document.body.appendChild(dragPreview);
        e.dataTransfer.setDragImage(dragPreview, dragPreview.offsetWidth / 2, dragPreview.offsetHeight / 2);
        emit('drag-item-start', dragNode, group, isDraggingOver.value, e);
        console.log('开始拖动:', dragNode);
        setTimeout(() => document.body.removeChild(dragPreview), 0);
      }
    };

    const handleDragEnd = (e: DragEvent) => {
      safePreventDefault(e);
      safeStopPropagation(e);
      isDraggingOver.value = false;
      console.log('拖动结束');
      emit('drag-item-end', isDraggingOver.value, e);
    };


    const load = ()=> {
      findPlatformWithComponents(1).then(re=> {
        console.error(re);
      })
    }

    onMounted(() => {
      loadTress();
      load();
    });

    return {
      activeKey,
      templateData,
      handleDragStart,
      handleDragEnd,
    };
  },
});

</script>