115 lines
3.5 KiB
Vue
115 lines
3.5 KiB
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.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, type PropType, ref } from 'vue';
|
|
import { safePreventDefault, safeStopPropagation } from '@/utils/event';
|
|
import {findPlatformWithComponents} from './api'
|
|
import { type PlatformWithComponents, type Scenario } from './types';
|
|
|
|
export default defineComponent({
|
|
emits: ['drag-item-start', 'drag-item-end'],
|
|
props: {
|
|
scenario: {
|
|
type: Object as PropType<Scenario>,
|
|
required: true,
|
|
}
|
|
},
|
|
setup(_props, { emit }) {
|
|
|
|
const activeKey = ref<number>(1);
|
|
const templateData = ref<PlatformWithComponents[]>([]);
|
|
const isDraggingOver = ref<boolean>(false);
|
|
const draggedNodeData = ref<PlatformWithComponents | null>(null);
|
|
const currentScenario = ref<Scenario|null>(_props.scenario)
|
|
|
|
const loadTress = () => {
|
|
templateData.value = []
|
|
findPlatformWithComponents(_props.scenario?.id).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, 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> |