Ben Lin
2024-05-01 f4b7cfb7f1477d2860d08a69ef48728412c00fd2
src/components/FlowChart/src/FlowChart.vue
@@ -34,6 +34,7 @@
  import customEdge from './customEdge';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import actionRect from './actionRect';
  const { notification } = useMessage();
  const { t } = useI18n();
@@ -60,7 +61,7 @@
        type: Array,
      },
    },
    emits: ['view-data', 'save-data', 'add-lf'],
    emits: ['view-data', 'save-data', 'add-lf', 'select-node', 'click-blank'],
    setup(props, { emit }) {
      const globSetting = useGlobSetting();
      const lfElRef = ref(null);
@@ -145,6 +146,7 @@
        });
        const lf = unref(lfInstance)!;
        // lf?.setDefaultEdgeType('line');
        lf.register(actionRect);
        onRender();
        lf?.setPatternItems(props.patternItems || configDefaultDndPanel(lf));
      }
@@ -159,31 +161,34 @@
        // const lFData = toLogicFlowData(props.data);
        lf.render(props.data);
        if (globSetting.apiUrl == 'http://localhost:9528/api') {
          lf.on('anchor:drop', (data) => {
            const nodeData = data.nodeModel.getData();
            if (nodeData.properties.isReturn === true) {
              console.log(11, nodeData.properties.isReturn);
              data.nodeModel.graphModel.edges.forEach((element) => {
                if (element.sourceNodeId === data.nodeModel.id) {
                  lf.changeEdgeType(element.id, 'custom-edge');
                }
              });
            }
          });
        }
        lf.on('anchor:drop', (data) => {
          const nodeData = data.nodeModel.getData();
          if (nodeData.properties.isReturn === true) {
            console.log(11, nodeData.properties.isReturn);
            data.nodeModel.graphModel.edges.forEach((element) => {
              if (element.sourceNodeId === data.nodeModel.id) {
                lf.changeEdgeType(element.id, 'custom-edge');
              }
            });
          }
        });
        lf.on('node:click,edge:click', (data) => {
          if (data.isSelected) {
            console.log(data.data.text.value, data.isSelected);
            notification.success({
              message: t('点击了节点'),
              description: `${data.data.text.value}: ${data.isSelected}`,
              duration: 3,
            });
            // notification.success({
            //   message: t('点击了节点'),
            //   description: `${data.data.text.value}: ${data.isSelected}`,
            //   duration: 3,
            // });
            emit('select-node', data);
          } else {
            console.log(data.data.type);
          }
        });
        lf.on('blank:mousedown', (e) => {
          emit('click-blank');
        });
      }
      function handlePreview() {