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

<template>
  <div class="node" ref="ref_node" :class="{active: state.active, panel: WorkflowStore.panel.node?.id === state.node?.id}">
    <div class="node-title">
      {{ state.nodeData?.title }}
      <div class="node-sub" v-if="state.nodeData?.subTitle">{{ state.nodeData.subTitle }}</div>
    </div>
    <div class="node-content">
      <template v-if="state.nodeData?.type === NodeType.Root">
        <rootNode :node="state.node"/>
      </template>
      <template v-else-if="state.nodeData?.type === NodeType.Test">
        <testNode :node="state.node"/>
      </template>
      <template v-else-if="state.nodeData?.type === NodeType.IfElse">
        <ifElseNode :node="state.node"/>
      </template>
      <template v-else-if="state.nodeData?.type === NodeType.Answer">
        <answerNode :node="state.node"/>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, inject, nextTick, onMounted, reactive, ref, watch} from "vue";
import rootNode from '../instance/root/node/index.vue'
import ifElseNode from '../instance/if-else/node/index.vue'
import testNode from '../instance/test/node/index.vue'
import answerNode from '../instance/answer/node/index.vue'
import {useWorkflowStore} from "@/stores";
import {NodeType} from "@/views/workflow/types";
import {lineActiveStyle, lineStyle} from "@/views/workflow/config";

const WorkflowStore = useWorkflowStore()
const getNode: any = inject('getNode')
const emits = defineEmits([])
const props = defineProps({})
const {proxy}: any = getCurrentInstance()
const state: any = reactive({
  node: null,
  nodeData: {},
  active: false
})
const ref_node = ref()
onMounted(() => {
  state.node = getNode()
  state.node.on('change:attrs', () => {
    state.active = state.node.getAttrByPath('hover') || state.node.getAttrByPath('select')
  })
  state.nodeData = state.node.data.workflowData
  nextTick(() => {
    state.node.size(ref_node.value.clientWidth, ref_node.value.clientHeight)
  })
})
</script>

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

.node {
  z-index: 10;
  border-radius: 10px;
  background-color: #ffffff;
  position: absolute;
  width: 240px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-width: 2px;
  border-color: transparent;
  &.active {
    border-color: rgba(var(--czr-main-color-rgb), 0.5);
    cursor: pointer;
  }
  &.panel {
    border-color: rgba(var(--czr-main-color-rgb), 1);
    cursor: pointer;
  }
  .node-title {
    min-height: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: bold;
    .node-sub {
      font-size: 12px;
      font-weight: normal;
      opacity: 0.65;
    }
  }
  .node-content {
    padding: 0px 12px;
    //margin-bottom: 8px;
    //border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
}
</style>