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

<template>
  <div class="group__container" :class="props.model.id" @mouseleave="setNodeProperties">
    <NodeTitle
      :icon="loop"
      :nodeId="props.model.id"
      :nodeProperties="props.properties"
      :nodeName="props.properties?.name || '循环'"
      nodeDesc="循环执行一系列任务，直至输出所有结果"
      :showZoom="false"
      @setNodeName="setNodeName"
    />
    <div>循环体</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 { onUnmounted } from "vue";

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


const emits = defineEmits(["bindRef", "addToGroup", "contentChange"]);

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

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

  let flowNode = e.dataTransfer.getData("flowNode");
  flowNode = JSON.parse(flowNode);
  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);
  }

  emits("addToGroup", node.id);
  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%;
  // min-height: 420px;
  background: #fff;
  padding: 12px;
  cursor: default;
  border-radius: 12px;
  border: 2px solid white;
  // box-shadow: 0 5px 15px 0#00000008;
  display: flex;
  flex-direction: column;
  position: relative;

  .title {
    height: 40px;
  }

  .child__container {
    min-height: 100px;
    flex: 1;
    background-color: #f6f8fa;
    border-radius: 8px;
  }

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