CMVR-BID/src/views/flow/nodes/function/loop.vue

<template>
  <div
    class="group__container"
    :class="[props.model.id, { 'group__container--dragover': isDragOver }]"
    @dragenter.prevent="isDragOver = true"
    @dragleave="handleDragleave"
  >
    <NodeTitle
      :icon="loop"
      :nodeId="props.model.id"
      :nodeProperties="props.properties"
      :nodeName="props.properties?.name || '循环'"
      nodeDesc="循环执行一系列任务，直至输出所有结果"
      :showZoom="false"
      @setNodeName="setNodeName"
    />
    <div class="loop-body-title">
      <span>循环体</span>
      <span class="loop-body-count">{{ childCount }} 个节点</span>
    </div>
    <div
      class="child__container"
      @drop="handleDrop"
      @dragover="handleDragover"
    >
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import NodeTitle from "../../components/NodeTitle.vue";
import loop from "../../icon/loop.svg";
import { addNewEdge } from "@/utils/flow";
import { emitter } from "@/utils/eventBus";
import { computed, onUnmounted, ref } from "vue";

const props = defineProps({
  model: Object,
  graphModel: Object,
  properties: Object,
  nowTime: Number,
});


const emits = defineEmits(["bindRef", "addToGroup", "contentChange"]);
const isDragOver = ref(false);
const childCount = computed(() => props.model?.children?.size || 0);

const handleDragover = (e) => {
  e.preventDefault();
  isDragOver.value = true;
};

const handleDragleave = (e) => {
  if (!e.currentTarget.contains(e.relatedTarget)) isDragOver.value = false;
};

const handleDrop = (e) => {
  e.preventDefault();
  e.stopPropagation();
  isDragOver.value = false;

  let flowNode = e.dataTransfer.getData("flowNode");
  if (!flowNode) return;
  flowNode = JSON.parse(flowNode);
  if (["start", "end", "loop", "selectArea"].includes(flowNode.type)) return;
  const point = lf.getPointByClient(e.clientX, e.clientY);
  const { type, ...other } = flowNode;
  const node = lf.addNode({
    type,
    x: point.canvasOverlayPosition.x,
    y: point.canvasOverlayPosition.y,
    properties: {
      parentId: props.model.id,
      ...other,
    },
  });
  if (
    !["selectArea", "branch", "stopLoop", "subStart", "subEnd"].includes(node.type)
  ) {
    emitter.emit("openParamsDrawer", node);
  }

  lf.addToGroup(props.model.id, node.id, point.canvasOverlayPosition);
  setTimeout(() => {
    addNewEdge(props.model.id);
  }, 50);
};

const setNodeName = (name) => {
  const properties = lf.getProperties(props.model.id);
  lf.setProperties(props.model.id, {
    ...properties,
    name
  });
  emits("contentChange");
}

onUnmounted(() => {
  emitter.off("openParamsDrawer");
})

</script>
<style lang="scss" scoped>
.group__container {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 16px;
  box-sizing: border-box;
  cursor: default;
  border-radius: 8px;
  border: 1px solid #cfd7e6;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    border-radius: 8px 0 0 8px;
    background: #ff6b35;
  }

  &--dragover {
    border-color: #ff6b35;
    box-shadow: inset 0 0 0 2px rgba(255, 107, 53, 0.14);
  }

  .title {
    height: 40px;
  }

  .loop-body-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    margin-top: 2px;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
  }

  .loop-body-count {
    padding: 2px 8px;
    color: #667085;
    background: #eef1f6;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
  }

  .child__container {
    min-height: 300px;
    flex: 1;
    background-color: #f8fafc;
    border: 1px dashed #b8c2d2;
    border-radius: 6px;
    transition: background-color 0.18s ease, border-color 0.18s ease;
  }

  &--dragover .child__container {
    background-color: #fff7f2;
    border-color: #ff6b35;
  }

  .el-row {
    align-items: end;
  }
}
</style>