airoptweb/src/views/vuetree/useDnD.js

// import { useVueFlow,Position,MarkerType } from '@vue-flow/core';
import { useVueFlow,Position,MarkerType} from '@vue-flow/core';
import { ref, watch } from 'vue'
import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
import { request, uploadFile } from "@/utils/request"
import gc1 from '@/assets/flowimg/gc1.png'
import gc2 from '@/assets/flowimg/gc2.png'
import gc3 from '@/assets/flowimg/gc3.png'
import wen from '@/assets/flowimg/wen.png'
import xuek1 from '@/assets/flowimg/xuek1.png'
import xuek0 from '@/assets/flowimg/xuek0.png'
import xuek2 from '@/assets/flowimg/xuek2.png'
import xuek3 from '@/assets/flowimg/xuek3.png'
import xuek4 from '@/assets/flowimg/xuek4.png'
import xuek5 from '@/assets/flowimg/xuek5.png'
import xuek6 from '@/assets/flowimg/xuek6.png'
import xuek7 from '@/assets/flowimg/xuek7.png'
import xuek8 from '@/assets/flowimg/xuek8.png'
import xuek9 from '@/assets/flowimg/xuek9.png'
import xuek10 from '@/assets/flowimg/xuek10.png'
import xuek11 from '@/assets/flowimg/xuek11.png'
import xuek12 from '@/assets/flowimg/xuek12.png'
import r2 from '@/assets/flowimg/mob.png'
import aero from '@/assets/flowimg/aero.png'
import csh from '@/assets/flowimg/csh.png'
import ffd from '@/assets/flowimg/ffd.png'
import ADflow from '@/assets/flowimg/ADflow.png'
import tacs from '@/assets/flowimg/TACS.png'
import fsi from '@/assets/flowimg/fsi.png'
import mathfunc from '@/assets/flowimg/MathFunc.png'
import flight from '@/assets/flowimg/flight.png'
let nid = 0;
let id=0
let treeobj=ref([]);
let datas={}

/**
 * @returns {string} - A unique id.
 */
function getId() {
  //return `node_${id++}`
  return `${nid}${id++}`;
}
function imagefun(){
  console.log(nid);
  // if(nid=='1-1'){
  //   return  datas = {label: '优化问题', image:gc1}
  //   }else if(nid=='1-2'){
  //     return datas = {label:'分析流程', image:gc2}
  //   }else if(nid=='1-3'){
  //     return datas = {label:'优化器', image:gc3}
    // }else
     if(nid=='2-1'){
      return datas = {label:'优化问题', image:wen,name:'Project'}
    }else if(nid=='3-1'){
      return datas = {label:'CATIA', image:xuek1,name:'CATIA'}
    }else if(nid=='3-0'){
      return datas = {label:'CST', image:xuek0,name:'CST'}
    }else if(nid=='3-10'){
      return datas = {label:'FFD', image:ffd,name:'FFD'}
    }else if(nid=='3-11'){
      return datas = {label:'ADflow', image:ADflow,name:'ADflow'}
    }else if(nid=='3-12'){
      return datas = {label:'TACS', image:tacs,name:'TACS'}
    }else if(nid=='3-13'){
      return datas = {label:'FUM to FEM', image:fsi,name:'FSI'}
    }else if(nid=='3-14'){
      return datas = {label:'MathFunc', image:mathfunc,name:'MathFunc'}
    }else if(nid=='3-15'){
      return datas = {label:'Flight', image:flight,name:'Flight'}
    }
     else if(nid=='3-2'){
      return datas = {label:'Excel', image:xuek2,name:'Excel'}
    }else if(nid=='3-3'){
      return datas = {label:'Feko', image:xuek3,name:'Feko'}
    }else if(nid=='3-4'){
      return datas = {label:'Fluent', image:xuek4,name:'Fluent'}
    }else if(nid=='3-5'){
      return datas = {label:'HCFD', image:xuek5,name:'HCFD'}
    }else if(nid=='3-6'){
      return datas = {label:'Matlab', image:xuek6,name:'Matlab'}
    }else if(nid=='3-7'){
      return datas = {label:'Nastran', image:xuek7,name:'Nastran'}
    }else if(nid=='3-8'){
      return datas = {label:'Python', image:xuek8,name:'Python'}
    }else if(nid=='3-9'){
      return datas = {label:'Xfoil', image:xuek9,name:'Xfoil'}
    }else if(nid=='4-1'){
      return datas = {label:'进化优化器', image:xuek10,name:'optimizer1'}
    }else if(nid=='4-2'){
      return datas = {label:'代理优化器', image:xuek11,name:'optimizer3'}
    }else if(nid=='4-3'){
      return datas = {label:'梯度优化器', image:xuek12,name:'optimizer2'}
    }else if(nid=='3-01'){
      return datas = {label:'优化器', image:r2,name:'optimizer'}
    }else if(nid=='3-02'){
      return datas = {label:'参数化', image:csh,name:'参数化'}
    }else if(nid=='3-03'){
      return datas = {label:'气动分析', image:aero,name:'气动分析'}
    }
    else{
      return null;
    }

  }

/**
 * In a real world scenario you'd want to avoid creating refs in a global scope like this as they might not be cleaned up properly.
 * @type {{draggedType: Ref<string|null>, isDragOver: Ref<boolean>, isDragging: Ref<boolean>}}
 */
const state = {
  /**
   * The type of the node being dragged.
   */
  draggedType: ref(null),
  isDragOver: ref(false),
  isDragging: ref(false),
}

// 保存流
const saveflow = async (pid, wid, uid, type, fromuid, touid) => {
  const params = {
    transCode: 'MDO0058',
    pid: pid || '',
    wid: wid || '', // 流ID
    uid: uid || '',
    type: type || '',
    fromuid: fromuid || '',
    touid: touid || '',
  };

  try {
    const res = await request(params);
    return res.wid;
  } catch (err) {
    ElMessage.error(err.returnMsg);
  }
};

// 用来存储每种组件名称出现次数的对象
const nameCount = {}

export default function useDragAndDrop() {
  const { draggedType, isDragOver, isDragging } = state

  const { addNodes, addEdges,screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow()

  watch(isDragging, (dragging) => {
    document.body.style.userSelect = dragging ? 'none' : ''
  })

  function onDragStart(event, type,id) {
  
 
    if (event.dataTransfer) {
     
      nid=id;
      event.dataTransfer.setData('application/vueflow', type)
      event.dataTransfer.effectAllowed = 'move'    
   
    }

    draggedType.value =type;
    //draggedType.value = 'smoothstep'
    isDragging.value = true

    document.addEventListener('drop', onDragEnd)
   
  }

  /**
   * Handles the drag over event.
   *
   * @param {DragEvent} event
   */
  function onDragOver(event) {
    event.preventDefault()

    if (draggedType.value) {
      isDragOver.value = true

      if (event.dataTransfer) {
        event.dataTransfer.dropEffect = 'move'
      }
    }
  }
  function handleNodeDrop(e){
  
  }
  function onDragLeave(e) {
  
    isDragOver.value = false
  }

  function onDragEnd() {
    isDragging.value = false
    isDragOver.value = false
    draggedType.value = null
    nid=''
    document.removeEventListener('drop', onDragEnd)
  }

  /**
   * Handles the drop event.
   *
   * @param {DragEvent} event
   */
  async function onDrop(event) {
    const position = screenToFlowCoordinate({
      x: event.clientX,
      y: event.clientY,
    })

    const savedObj = JSON.parse(sessionStorage.getItem("objlist"));
    // console.log('objlist',savedObj);
    const pid = savedObj.pid;
    const newwid = '';

    const nodeId = getId()
    const image1=imagefun();
    // 获取当前组件的名称
    const componentName = image1.name;

    // 如果该组件的名称已存在，给名称添加序号
    if (!nameCount[componentName]) {
      nameCount[componentName] = 0;
    }
  
    nameCount[componentName]++; // 增加计数
    const newName = `${componentName}${nameCount[componentName]}`; // 新的名称加上序号
 
    let snodes=ref([]);
    let sedges=ref([]);

    if(nid=='4'){
      // const nodes = ref([])
      // const edges = ref([])

    }else{
      // 创建初始的节点数据，不包含 wid
      const newNode = {
        id: nodeId,
        type: draggedType.value,
        position,
        data: { ...image1, uid: newName },
      };

      snodes.value.push(newNode)

      // 异步保存数据并更新 wid
      saveflow(pid, newwid, newName, 'com', '', '').then((wid) => {
      // 更新节点数据中的 wid
      newNode.data.wid = wid;

      // 使用 onNodesInitialized 来更新节点数据
      onNodesInitialized(() => {
        // 更新节点的其他数据
        updateNode(nodeId, (node) => ({
          ...node, 
          data: {
            ...node.data,
            wid: newNode.data.wid,  // 更新节点中的 wid
          },
        }));
      });
    }).catch((err) => {
      console.error('保存流程失败:', err.message);
      ElMessage.error('保存流程失败');
    });

        // saveflow(pid , savewid, newName, 'com', '', '')
        // console.log('返回的 wid:', widtemp.value)
        // const wid = widtemp.value
        // const uid = newName
        // // 创建新节点，包含 wid 数据
        // const newNode = {
        //   id: nodeId,
        //   type: draggedType.value,
        //   position,
        //   data: { ...image1, wid , uid}, // 将 wid 存入节点数据中
        // }
  
        // snodes.value.push(newNode)
    
    }
    const { off } = onNodesInitialized(() => {
      updateNode(nodeId, (node) => ({
        position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 },
        dimensions:{ height:  58, width: 60}
      }))

      off()
    })
    addNodes(snodes.value)
    treeobj.value=snodes.value

   // addEdges(sedges.value)
  }
  return {
    treeobj,
    draggedType,
    isDragOver,
    isDragging,
    onDragStart,
    onDragLeave,
    onDragOver,
    onDrop,
    handleNodeDrop,
  }
}