iot-device-management-frontend/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue

<script setup lang="ts">
import type { SimpleFlowNode } from '../consts';

import { NodeType } from '../consts';
import { useWatchNode } from '../helpers';
import CopyTaskNode from './nodes/copy-task-node.vue';
import EndEventNode from './nodes/end-event-node.vue';
import StartUserNode from './nodes/start-user-node.vue';
import UserTaskNode from './nodes/user-task-node.vue';

defineOptions({ name: 'ProcessNodeTree' });
const props = defineProps({
  parentNode: {
    type: Object as () => SimpleFlowNode,
    default: () => null,
  },
  flowNode: {
    type: Object as () => SimpleFlowNode,
    default: () => null,
  },
});
const emits = defineEmits<{
  recursiveFindParentNode: [
    nodeList: SimpleFlowNode[],
    curentNode: SimpleFlowNode,
    nodeType: number,
  ];
  'update:flowNode': [node: SimpleFlowNode | undefined];
}>();

const currentNode = useWatchNode(props);

// 用于删除节点

const handleModelValueUpdate = (updateValue: any) => {
  emits('update:flowNode', updateValue);
};

const findParentNode = (nodeList: SimpleFlowNode[], nodeType: number) => {
  emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
};

// 递归从父节点中查询匹配的节点
const recursiveFindParentNode = (
  nodeList: SimpleFlowNode[],
  findNode: SimpleFlowNode,
  nodeType: number,
) => {
  if (!findNode) {
    return;
  }
  if (findNode.type === NodeType.START_USER_NODE) {
    nodeList.push(findNode);
    return;
  }

  if (findNode.type === nodeType) {
    nodeList.push(findNode);
  }
  emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
};
</script>
<template>
  <!-- 发起人节点 -->
  <StartUserNode
    v-if="currentNode && currentNode.type === NodeType.START_USER_NODE"
    :flow-node="currentNode"
  />
  <!-- 审批节点 -->
  <UserTaskNode
    v-if="
      currentNode &&
      (currentNode.type === NodeType.USER_TASK_NODE ||
        currentNode.type === NodeType.TRANSACTOR_NODE)
    "
    :flow-node="currentNode"
    @update:flow-node="handleModelValueUpdate"
    @find-parent-node="findParentNode"
  />
  <!-- 抄送节点 -->
  <CopyTaskNode
    v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE"
    :flow-node="currentNode"
    @update:flow-node="handleModelValueUpdate"
  />
  <!-- 条件节点 -->
  <!-- <ExclusiveNode
    v-if="currentNode && currentNode.type === NodeType.CONDITION_BRANCH_NODE"
    :flow-node="currentNode"
    @update:model-value="handleModelValueUpdate"
    @find:parent-node="findFromParentNode"
  /> -->
  <!-- 并行节点 -->
  <!-- <ParallelNode
    v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
    :flow-node="currentNode"
    @update:model-value="handleModelValueUpdate"
    @find:parent-node="findFromParentNode"
  /> -->
  <!-- 包容分支节点 -->
  <!-- <InclusiveNode
    v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"
    :flow-node="currentNode"
    @update:model-value="handleModelValueUpdate"
    @find:parent-node="findFromParentNode"
  /> -->
  <!-- 延迟器节点 -->
  <!-- <DelayTimerNode
    v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
    :flow-node="currentNode"
    @update:flow-node="handleModelValueUpdate"
  /> -->
  <!-- 路由分支节点 -->
  <!-- <RouterNode
    v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
    :flow-node="currentNode"
    @update:flow-node="handleModelValueUpdate"
  /> -->
  <!-- 触发器节点 -->
  <!-- <TriggerNode
    v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE"
    :flow-node="currentNode"
    @update:flow-node="handleModelValueUpdate"
  /> -->
  <!-- 子流程节点 -->
  <!-- <ChildProcessNode
    v-if="currentNode && currentNode.type === NodeType.CHILD_PROCESS_NODE"
    :flow-node="currentNode"
    @update:flow-node="handleModelValueUpdate"
  /> -->
  <!-- 递归显示孩子节点  -->
  <ProcessNodeTree
    v-if="currentNode && currentNode.childNode"
    v-model:flow-node="currentNode.childNode"
    :parent-node="currentNode"
    @recursive-find-parent-node="recursiveFindParentNode"
  />

  <!-- 结束节点 -->
  <EndEventNode
    v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE"
    :flow-node="currentNode"
  />
</template>
<style lang="scss" scoped></style>