big-model-web/src/views/workflow/chart/node-index.vue

<template>
  <div class="node" ref="ref_node">
    <div class="node-title">{{ state.nodeData?.title }}</div>
    <div class="node-content">
      <template v-if="state.nodeData?.type === 'root'">
        <rootNode :node="state.node"/>
      </template>
      <template v-else-if="state.nodeData?.type === 'if-else'">
        <ifElseNode :node="state.node"/>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, inject, nextTick, onMounted, reactive, ref} from "vue";
import rootNode from '../instance/root/node/index.vue'
import ifElseNode from '../instance/if-else/node/index.vue'

const getNode: any = inject('getNode')
const emits = defineEmits([])
const props = defineProps({})
const {proxy}: any = getCurrentInstance()
const state: any = reactive({
  node: null,
  nodeData: {}
})
const ref_node = ref()
onMounted(() => {
  state.node = getNode()
  state.nodeData = state.node.data
  nextTick(() => {
    state.node.size(ref_node.value.clientWidth, ref_node.value.clientHeight)
  })
})
</script>

<style lang="scss" scoped>
@import "@/views/workflow/instance/component/style";

.node {
  z-index: 10;
  border: $borderStyle;
  border-radius: 10px;
  background-color: #ffffff;
  position: absolute;
  width: 240px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  &:hover {
    border-color: #286bfb;
    cursor: pointer;
  }
  .node-title {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: bold;
  }
  .node-content {
    padding: 0px 12px;
    //margin-bottom: 8px;
    //border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
}
</style>