JG-ADMIN-TEMP/src/views/base/craftManagement/route/components/CustomNode/index.vue

<script setup>
import { Position, Handle } from "@vue-flow/core";
const props = defineProps(["data", "id"]);
const currentProcess = inject("currentProcess");
const selectNode = inject("selectNode");
const selectStatus = ref(false);
const editStatus = inject("editStatus");
const getBorderClass = computed(() => {
  let str = "borderBlack";
  if (selectStatus.value) {
    if (editStatus.value == true) {
      str = "borderBlue";
    } else {
      str = "borderGreen";
    }
  }
  return str;
});
watch(
  () => currentProcess.value,
  () => {
    if (currentProcess.value == null) {
      selectStatus.value = false;
      return;
    }
    selectStatus.value = props.id == currentProcess.value.id;
  },
  { deep: true }
);
watch(
  () => selectNode.value,
  () => {
    if (selectNode.value == null) {
      selectStatus.value = false;
      return;
    }
    selectStatus.value = props.id == selectNode.value.id;
  },
  { deep: true }
);
</script>

<template>
  <div class="nodes" :class="getBorderClass">
    <Handle
      :style="{
        height: '13px',
        width: '13px',
      }"
      type="target"
      :position="Position.Top"
    />
    <div
      style="
        text-align: center;
        width: 100%;
        color: black;
        word-wrap: break-word;
        margin: 10px;
      "
    >
      {{ data.label }}
    </div>

    <Handle
      :style="{
        height: '13px',
        width: '13px',
      }"
      type="source"
      :position="Position.Bottom"
    />
  </div>
</template>
<style lang="scss">
.vue-flow__node-custom {
  padding: 0px !important;
  background-color: white !important;
  box-shadow: 0 0 0 0 !important;
  border: 0px solid black !important;
}
.nodes {
  width: 150px;
  min-height: 60px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
}
.borderBlack {
  border-color: black;
}
.borderBlue {
  border-color: blue;
}
.borderGreen {
  border-color: green;
}
</style>