hwmom-ui/src/views/boardGenerate/nodes/data/customDataNode.vue

<template>
  <div
    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
    <NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />

    <div class="custom-node"
         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
      <el-button type="primary" :style="{width:props.dimensions.width  +'px',height:props.dimensions.height+'px'}"
                 :icon="Connection">{{ props.data.customData.name }}
      </el-button>
      <span style="color:#fff">
      </span>
    </div>
    <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
    <Handle v-if="!props.isView" :id="`${props.id}.-s`" type="source" :position="Position.Right" />
  </div>
</template>
<script setup>
import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { Connection } from '@element-plus/icons-vue';
import { Handle, Position } from '@vue-flow/core';
import request from '@/utils/request';
import axios from 'axios';
import { options } from '../../tool.js';

const props = defineProps({
  isView: {
    type: Boolean,
    required: false
  },
  inputData: {
    type: Object,
    required: false
  },
  id: {
    type: String,
    required: true
  },
  isHideHandle: {
    type: Boolean,
    required: false
  },
  selected: {
    type: Boolean,
    required: false
  },
  data: {
    type: Object,
    required: true
  },
  dimensions: {
    type: Object,
    required: true
  }
});
const anyFun = (data, fun, key) => {
  switch (fun) {
    case 'map':
      return data.map(e => e[key]);
    default:
      return null;
  }
};
const parseData = (data, rule) => {
  let resData = data;
  let step = rule.split(',');
  step.forEach((item) => {
    if (resData) {
      let fun = item.split('%');
      if (fun.length === 1) {
        resData = resData[fun[0]];
      }
      if (fun.length === 2) {
        resData = anyFun(resData, fun[0], fun[1]);
      }
    }
  });
  return resData;

};
const getOutputData = () => {
  let params = {};
  (props.data.customData.inputData || []).forEach((item) => {
    params[item.name] = props.inputData[item.name];
  });
  (options.isD ? request : axios.request)({
    method: props.data.customData.method,
    url: props.data.customData.url,
    params: props.data.customData.method === 'get' ? params : '',
    data: props.data.customData.method === 'post' ? params : ''
  }).then(res => {
    let output = {};
    props.data.customData.outputData.forEach(item => {
      output[item.name] = parseData(res.data, item.tier);
    });
    props.data.outputData = output;
  });
};

onMounted(() => {
  getOutputData();
});

let interval = setInterval(() => {
  getOutputData();
}, 1000);

onBeforeUnmount(() => {
  clearInterval(interval);
  interval = null;
});
const emit = defineEmits(['resize']);
const resize = (e) => {
  emit('resize', e, props.id);
};
</script>
<style scoped>
.custom-node {
  width: 100%;
  height: 100%;
}

</style>