adtec-core-package 2.4.9 → 2.5.0

package/src/components/bpmntree/views/flowDesign/index.vue

@@ -1,653 +1,653 @@
-<script setup lang="ts">
-import TreeNode from './nodes/TreeNode.vue'
-import Panel from './panels/index.vue'
-import type {
-  ApprovalNode,
-  BranchNode,
-  CcNode,
-  ConditionNode,
-  ErrorInfo,
-  ExclusiveNode,
-  FlowNode,
-  InclusiveNode,
-  JumpNode,
-  NodeType,
-  NotifyNode,
-  ParallelNode,
-  TimerNode,
-} from './nodes/type'
-import type { FilterRules } from '../../components/AdvancedFilter/type'
-import type { Field } from '../../components/Render/type'
-// import BpmnComp from '@/framework/views/workflow/bpmnpackage/view.index.vue'
-// import ProcessDiagram from '@/framework/views/workflow/components/ProcessDiagram.vue'
-import { useDraggableScroll } from '../../hooks/useDraggableScroll'
-import { ElMessage } from 'element-plus'
-import { computed, provide, ref } from 'vue'
-import type { IWfProcessInstVo } from '../../../../interface/workflow/IWfTaskVo'
-
-const props = withDefaults(
-  defineProps<{
-    process: FlowNode
-    fields: Field[]
-    readOnly?: boolean
-    defaultZoom?: number
-    bgColor?: string
-    bpmnView?: boolean
-    bpmnXml?: string
-    processInst?: IWfProcessInstVo
-  }>(),
-  {
-    readOnly: false,
-    defaultZoom: 100,
-    bgColor: 'var(--el-bg-color-page)',
-    bpmnView: false,
-    bpmnXml: '',
-  },
-)
-const processInstData = computed(() => {
-  return props.processInst
-})
-const flatFields = computed(() => {
-  const all: Field[] = []
-  const loop = (children: Field[]) => {
-    children.forEach((field) => {
-      if (field.type === 'formItem') {
-        all.push(field)
-      }
-      if (Array.isArray(field.children)) {
-        loop(field.children)
-      }
-    })
-  }
-  loop(props.fields)
-  return all
-})
-const getScale = computed(() => zoom.value / 100)
-const zoom = ref(props.defaultZoom)
-const readOnly = computed(() => props.readOnly)
-const activeData = ref<FlowNode>({
-  id: '',
-  name: '',
-  type: 'start',
-})
-const penalVisible = ref(false)
-const nodesError = ref<Recordable<ErrorInfo[]>>({})
-const treeRoot = ref(null)
-const designerContainerRef = ref<HTMLElement | null>(null)
-const getTaskNodes = (id: string) => {
-  let res = [] as FlowNode[]
-  const allNodes = getAllNodes(props.process)
-  for (let i in allNodes) {
-    if (
-      allNodes[i].id !== id &&
-      !res.some((x) => x.id === allNodes[i].id) &&
-      ['cc', 'approval', 'timer', 'notify'].includes(allNodes[i].type)
-    ) {
-      res.push(allNodes[i])
-    }
-  }
-  return res
-}
-const addFormItem = (item: Field) => {
-  props.fields.push(item)
-}
-const deleteFormItem = (id: string) => {
-  const nodes = getAllNodes(props.process)
-  for (const node of nodes) {
-    if (node.type === 'condition') {
-      if ((node as ConditionNode)?.conditions.conditions.findIndex((x) => x.field === id) > -1) {
-        ElMessage.warning('参数已作为条件使用，无法删除！')
-        return
-      }
-    }
-  }
-  props.fields.splice(
-    props.fields.findIndex((x) => x.id === id),
-    1,
-  )
-}
-const getParentNodes = (id: string) => {
-  const nodes = getPathNodes(id, props.process, [])
-  if (nodes && nodes.length > 0) {
-    return nodes.filter((x) => x.type === 'approval')
-  } else {
-    return []
-  }
-}
-const getPathNodes = (
-  id: string,
-  node: BranchNode | FlowNode,
-  parents: (BranchNode | FlowNode)[],
-): FlowNode[] => {
-  const nodes = []
-  if (node.id === id) {
-    return parents
-  }
-  parents.push(node)
-  if ('children' in node && Array.isArray(node.children) && node.children.length > 0) {
-    // 如果是数组，递归遍历每个子节点
-    node.children.forEach((childNode) => {
-      nodes.push(...getPathNodes(id, childNode, [...parents]))
-    })
-  }
-  if (node.child) {
-    // 如果是单个子节点
-    nodes.push(...getPathNodes(id, node.child, [...parents]))
-  }
-  return nodes
-}
-const getNodeById = (id: string) => {
-  const nodes = getAllNodes(props.process)
-  const node = nodes.find((x) => x.id === id)
-  if (node) {
-    return node
-  } else {
-    return undefined
-  }
-}
-provide('flowDesign', {
-  processInst: processInstData,
-  readOnly: readOnly,
-  fields: flatFields,
-  nodesError: nodesError,
-  getTaskNodes: getTaskNodes,
-  getParentNodes: getParentNodes,
-  addFormItem: addFormItem,
-  deleteFormItem: deleteFormItem,
-  getNodeById: getNodeById,
-})
-
-useDraggableScroll(designerContainerRef)
-
-const openPenal = (node: FlowNode) => {
-  activeData.value = node
-  penalVisible.value = true
-}
-const nextId = (): string => {
-  let id = `node_${Math.random().toString(36).substring(2, 7)}`
-  const findId = (node: FlowNode, id: string): boolean => {
-    if (node.id === id) {
-      return true
-    }
-    if (node.child) {
-      return findId(node.child, id)
-    }
-    if ('children' in node) {
-      const branchNode = node as BranchNode
-      if (branchNode.children && branchNode.children.length > 0) {
-        return branchNode.children.some((item) => {
-          return findId(item, id)
-        })
-      }
-    }
-    return false
-  }
-  if (findId(props.process, id)) {
-    return nextId()
-  }
-  return id
-}
-const addExclusive = (node: FlowNode) => {
-  const child = node.child
-  const id = nextId()
-  const exclusiveNode = {
-    id: id,
-    pid: node.id,
-    type: 'exclusive',
-    name: '独占网关',
-    child: child,
-    children: [],
-  } as ExclusiveNode
-  if (child) {
-    child.pid = id
-  }
-  addCondition(exclusiveNode)
-  addCondition(exclusiveNode)
-  node.child = exclusiveNode
-  if (exclusiveNode.children.length > 0) {
-    const condition = exclusiveNode.children[exclusiveNode.children.length - 1] as ConditionNode
-    condition.def = true
-    condition.name = '默认条件'
-  }
-}
-const addInclusive = (node: FlowNode) => {
-  const child = node.child
-  const id = nextId()
-  const inclusiveNode = {
-    id: id,
-    pid: node.id,
-    type: 'inclusive',
-    name: '包容网关',
-    child: child,
-    children: [],
-  } as InclusiveNode
-  if (child) {
-    child.pid = id
-  }
-  addCondition(inclusiveNode)
-  addCondition(inclusiveNode)
-  node.child = inclusiveNode
-  if (inclusiveNode.children.length > 0) {
-    const condition = inclusiveNode.children[inclusiveNode.children.length - 1] as ConditionNode
-    condition.def = true
-    condition.name = '默认条件'
-  }
-}
-const addParallel = (node: FlowNode) => {
-  const child = node.child
-  const id = nextId()
-  const parallelNode = {
-    id: id,
-    pid: node.id,
-    type: 'parallel',
-    name: '并行网关',
-    child: child,
-    children: [],
-  } as ParallelNode
-  if (child) {
-    child.pid = id
-  }
-  addConcurrent(parallelNode)
-  addConcurrent(parallelNode)
-  node.child = parallelNode
-}
-const addCondition = (node: FlowNode) => {
-  const exclusive = node as ExclusiveNode
-  exclusive.children.splice(exclusive.children.length == 0 ? 0 : exclusive.children.length - 1, 0, {
-    id: nextId(),
-    pid: exclusive.id,
-    type: 'condition',
-    def: false,
-    name: `条件${exclusive.children.length == 0 ? 1 : exclusive.children.length}`,
-    conditions: {
-      operator: 'and',
-      conditions: [],
-      groups: [],
-    } as FilterRules,
-    child: undefined,
-  })
-}
-const addConcurrent = (node: FlowNode) => {
-  const parallel = node as ParallelNode
-  parallel.children.splice(parallel.children.length, 0, {
-    id: nextId(),
-    pid: parallel.id,
-    type: 'concurrent',
-    name: `分支${parallel.children.length + 1}`,
-    // conditions: {
-    //   operator: 'and',
-    //   conditions: [],
-    //   groups: []
-    // } as FilterRules,
-    child: undefined,
-  })
-}
-// const addCondition = (node: FlowNode) => {
-//   const exclusive = node as ExclusiveNode
-//   exclusive.children.splice(exclusive.children.length - 1, 0, {
-//     id: nextId(),
-//     pid: exclusive.id,
-//     type: 'condition',
-//     def: false,
-//     name: `条件${exclusive.children.length + 1}`,
-//     conditions: {
-//       operator: 'and',
-//       conditions: [],
-//       groups: []
-//     } as FilterRules,
-//     child: undefined
-//   })
-// }
-const addCc = (node: FlowNode) => {
-  const child = node.child
-  const id = nextId()
-  node.child = {
-    id: id,
-    pid: node.id,
-    type: 'cc',
-    name: '抄送人',
-    child: child,
-    assigneeType: 'user',
-    formUser: '',
-    formRole: '',
-    users: [],
-    roles: [],
-    leader: 1,
-    orgLeader: 1,
-    choice: false,
-    self: false,
-    formProperties: [],
-  } as CcNode
-  if (child) {
-    child.pid = id
-  }
-}
-const addTimer = (node: FlowNode) => {
-  const child = node.child
-  const id = nextId()
-  node.child = {
-    id: id,
-    pid: node.id,
-    name: '计时等待',
-    type: 'timer',
-    child: child,
-    waitType: 'duration',
-    unit: 'PT%sS',
-    duration: 0,
-    timeDate: undefined,
-  } as TimerNode
-  if (child) {
-    child.pid = id
-  }
-}
-const addJump = (node: FlowNode) => {
-  const child = node.child
-  const id = nextId()
-  node.child = {
-    id: id,
-    pid: node.id,
-    name: '节点跳转',
-    type: 'jump',
-    child: child,
-    targetNode: '',
-  } as JumpNode
-  if (child) {
-    child.pid = id
-  }
-}
-const addNotify = (node: FlowNode) => {
-  const child = node.child
-  const id = nextId()
-  node.child = {
-    id: id,
-    pid: node.id,
-    name: '消息通知',
-    type: 'notify',
-    child: child,
-    assigneeType: 'user',
-    formUser: '',
-    formRole: '',
-    users: [],
-    roles: [],
-    leader: 1,
-    orgLeader: 1,
-    choice: false,
-    self: false,
-    types: ['site'],
-    subject: '',
-    content: '',
-    nodeTag: '',
-    nodeParam: '',
-  } as NotifyNode
-  if (child) {
-    child.pid = id
-  }
-}
-const addApproval = (node: FlowNode) => {
-  const child = node.child
-  const id = nextId()
-  node.child = {
-    id: id,
-    pid: node.id,
-    type: 'approval',
-    name: '审批步骤',
-    executionListeners: [],
-    child: child,
-    // 属性
-    manualUsers: false,
-    hideUsers: false,
-    filterUsers: 'no',
-    assigneeType: 'user',
-    formUser: '',
-    formRole: '',
-    users: [],
-    roles: [],
-    leader: 1,
-    orgLeader: 1,
-    choice: false,
-    self: false,
-    multi: 'single',
-    multiPercent: 100,
-    nobody: 'pass',
-    nobodyUsers: [],
-    formProperties: [],
-    operations: {
-      complete: true,
-      refuse: false,
-      back: true,
-      transfer: false,
-      delegate: false,
-      addMulti: false,
-      minusMulti: false,
-    },
-    msgTypes: ['site'],
-    msgLevel: '50',
-    msgSubject: '',
-    msgContent: '',
-    nodeTag: '',
-    nodeParam: '',
-    backNodes: [],
-    sameUser: 'normal',
-  } as ApprovalNode
-  if (child) {
-    child.pid = id
-  }
-}
-const addNode = (type: NodeType, node: FlowNode) => {
-  const addMap: Recordable<(node: FlowNode) => void> = {
-    exclusive: addExclusive,
-    inclusive: addInclusive,
-    parallel: addParallel,
-    condition: addCondition,
-    concurrent: addConcurrent,
-    cc: addCc,
-    timer: addTimer,
-    jump: addJump,
-    notify: addNotify,
-    approval: addApproval,
-  }
-  const fun = addMap[type]
-  fun && fun(node)
-}
-const delNode = (del: FlowNode) => {
-  delete nodesError.value[del.id]
-  delNodeNext(props.process, del)
-}
-const delNodeNext = (next: FlowNode, del: FlowNode) => {
-  delete nodesError.value[del.id]
-  if (next.id === del.pid) {
-    if ('children' in next && next.child?.id !== del.id) {
-      const branchNode = next as BranchNode
-      const index = branchNode.children.findIndex((item) => item.id === del.id)
-      if (index !== -1) {
-        if (branchNode.children.length <= 2) {
-          delError(branchNode)
-          delNode(branchNode)
-        } else {
-          delError(del)
-          branchNode.children.splice(index, 1)
-        }
-      }
-    } else {
-      if (del.child && del.child.pid) {
-        del.child.pid = next.id
-      }
-      next.child = del.child
-    }
-  } else {
-    if (next.child) {
-      delNodeNext(next.child, del)
-    }
-    if ('children' in next) {
-      const nextBranch = next as BranchNode
-      if (nextBranch.children && nextBranch.children.length > 0) {
-        nextBranch.children.forEach((item) => {
-          delNodeNext(item, del)
-        })
-      }
-    }
-  }
-}
-const delError = (node: FlowNode) => {
-  delete nodesError.value[node.id]
-  if (node.child) {
-    delError(node.child)
-  }
-  if ('children' in node) {
-    const branchNode = node as BranchNode
-    if (branchNode.children && branchNode.children.length > 0) {
-      branchNode.children.forEach((item) => {
-        delError(item)
-      })
-    }
-  }
-}
-const validate = () => {
-  return new Promise((resolve, reject) => {
-    const errors = Object.values(nodesError.value).flat()
-    if (errors.length > 0) {
-      reject(errors)
-    } else {
-      resolve(true)
-    }
-  })
-}
-
-const getAllNodes = (node: BranchNode | FlowNode): FlowNode[] => {
-  const nodes = []
-  if (node) {
-    nodes.push(node)
-    if ('children' in node && Array.isArray(node.children) && node.children.length > 0) {
-      // 如果是数组，递归遍历每个子节点
-      node.children.forEach((childNode) => {
-        nodes.push(...getAllNodes(childNode))
-      })
-    }
-    if (node.child) {
-      // 如果是单个子节点
-      nodes.push(...getAllNodes(node.child))
-    }
-  }
-  return nodes
-}
-
-defineExpose({
-  validate,
-})
-</script>
-
-<template>
-  <div class="designer-container cursor-default active:cursor-grabbing" ref="designerContainerRef">
-    <div class="tool">
-      <slot></slot>
-    </div>
-<!--    <template v-if="props.bpmnView && props.bpmnXml">-->
-<!--      <process-diagram :xml="bpmnXml"></process-diagram>-->
-<!--    </template>-->
-<!--    <template>-->
-      <el-flex
-        width="300px"
-        height="30px"
-        align="center"
-        v-if="processInstData?.hisTasks?.length || processInstData?.hisTasks?.length"
-        class="legend"
-      >
-        <div style="height: 15px; width: 15px; border-radius: 5px; background: #18ad43" />
-        <span>已完成</span>
-        <div
-          style="
-            height: 15px;
-            width: 15px;
-            border-radius: 5px;
-            background: #0b83de;
-            margin-left: 20px;
-          "
-        />
-        <span>进行中</span>
-        <div
-          style="
-            height: 15px;
-            width: 15px;
-            border-radius: 5px;
-            background: #9b9ea1;
-            margin-left: 20px;
-          "
-        />
-        <span>未开始</span>
-      </el-flex>
-      <!--放大/缩小-->
-      <div class="zoom">
-        <el-tooltip content="放大" placement="bottom-start">
-          <el-button icon="plus" @click="zoom += 10" :disabled="zoom >= 150" circle></el-button>
-        </el-tooltip>
-        <span>{{ zoom }}%</span>
-        <el-tooltip content="缩小" placement="bottom-start">
-          <el-button icon="minus" @click="zoom -= 10" circle :disabled="zoom <= 50"></el-button>
-        </el-tooltip>
-      </div>
-      <!--流程树-->
-      <el-scrollbar style="width: 100%">
-        <div class="node-container">
-          <TreeNode
-            ref="treeRoot"
-            :node="process"
-            @addNode="addNode"
-            @delNode="delNode"
-            @activeNode="openPenal"
-          />
-        </div>
-      </el-scrollbar>
-      <!--属性面板-->
-      <Panel v-model="penalVisible" :active-data="activeData" />
-<!--    </template>-->
-  </div>
-</template>
-
-<style scoped lang="scss">
-.designer-container {
-  --flow-bg-color: v-bind(bgColor);
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-  background-color: var(--flow-bg-color);
-
-  .legend {
-    position: absolute;
-    z-index: 999;
-    top: 10px;
-    left: 40px;
-  }
-
-  .zoom {
-    position: absolute;
-    z-index: 999;
-    top: 10px;
-    right: 40px;
-
-    span {
-      margin: 0 10px;
-    }
-  }
-
-  .tool {
-    position: absolute;
-    z-index: 999;
-    top: 10px;
-    left: 15px;
-    display: flex;
-    gap: 5px;
-  }
-
-  .node-container {
-    margin: 0 auto;
-    transform: scale(v-bind(getScale));
-    transform-origin: 50% 0 0;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-  }
-}
-</style>
+<script setup lang="ts">
+import TreeNode from './nodes/TreeNode.vue'
+import Panel from './panels/index.vue'
+import type {
+  ApprovalNode,
+  BranchNode,
+  CcNode,
+  ConditionNode,
+  ErrorInfo,
+  ExclusiveNode,
+  FlowNode,
+  InclusiveNode,
+  JumpNode,
+  NodeType,
+  NotifyNode,
+  ParallelNode,
+  TimerNode,
+} from './nodes/type'
+import type { FilterRules } from '../../components/AdvancedFilter/type'
+import type { Field } from '../../components/Render/type'
+// import BpmnComp from '@/framework/views/workflow/bpmnpackage/view.index.vue'
+// import ProcessDiagram from '@/framework/views/workflow/components/ProcessDiagram.vue'
+import { useDraggableScroll } from '../../hooks/useDraggableScroll'
+import { ElMessage } from 'element-plus'
+import { computed, provide, ref } from 'vue'
+import type { IWfProcessInstVo } from '../../../../interface/workflow/IWfTaskVo'
+
+const props = withDefaults(
+  defineProps<{
+    process: FlowNode
+    fields: Field[]
+    readOnly?: boolean
+    defaultZoom?: number
+    bgColor?: string
+    bpmnView?: boolean
+    bpmnXml?: string
+    processInst?: IWfProcessInstVo
+  }>(),
+  {
+    readOnly: false,
+    defaultZoom: 100,
+    bgColor: 'var(--el-bg-color-page)',
+    bpmnView: false,
+    bpmnXml: '',
+  },
+)
+const processInstData = computed(() => {
+  return props.processInst
+})
+const flatFields = computed(() => {
+  const all: Field[] = []
+  const loop = (children: Field[]) => {
+    children.forEach((field) => {
+      if (field.type === 'formItem') {
+        all.push(field)
+      }
+      if (Array.isArray(field.children)) {
+        loop(field.children)
+      }
+    })
+  }
+  loop(props.fields)
+  return all
+})
+const getScale = computed(() => zoom.value / 100)
+const zoom = ref(props.defaultZoom)
+const readOnly = computed(() => props.readOnly)
+const activeData = ref<FlowNode>({
+  id: '',
+  name: '',
+  type: 'start',
+})
+const penalVisible = ref(false)
+const nodesError = ref<Recordable<ErrorInfo[]>>({})
+const treeRoot = ref(null)
+const designerContainerRef = ref<HTMLElement | null>(null)
+const getTaskNodes = (id: string) => {
+  let res = [] as FlowNode[]
+  const allNodes = getAllNodes(props.process)
+  for (let i in allNodes) {
+    if (
+      allNodes[i].id !== id &&
+      !res.some((x) => x.id === allNodes[i].id) &&
+      ['cc', 'approval', 'timer', 'notify'].includes(allNodes[i].type)
+    ) {
+      res.push(allNodes[i])
+    }
+  }
+  return res
+}
+const addFormItem = (item: Field) => {
+  props.fields.push(item)
+}
+const deleteFormItem = (id: string) => {
+  const nodes = getAllNodes(props.process)
+  for (const node of nodes) {
+    if (node.type === 'condition') {
+      if ((node as ConditionNode)?.conditions.conditions.findIndex((x) => x.field === id) > -1) {
+        ElMessage.warning('参数已作为条件使用，无法删除！')
+        return
+      }
+    }
+  }
+  props.fields.splice(
+    props.fields.findIndex((x) => x.id === id),
+    1,
+  )
+}
+const getParentNodes = (id: string) => {
+  const nodes = getPathNodes(id, props.process, [])
+  if (nodes && nodes.length > 0) {
+    return nodes.filter((x) => x.type === 'approval')
+  } else {
+    return []
+  }
+}
+const getPathNodes = (
+  id: string,
+  node: BranchNode | FlowNode,
+  parents: (BranchNode | FlowNode)[],
+): FlowNode[] => {
+  const nodes = []
+  if (node.id === id) {
+    return parents
+  }
+  parents.push(node)
+  if ('children' in node && Array.isArray(node.children) && node.children.length > 0) {
+    // 如果是数组，递归遍历每个子节点
+    node.children.forEach((childNode) => {
+      nodes.push(...getPathNodes(id, childNode, [...parents]))
+    })
+  }
+  if (node.child) {
+    // 如果是单个子节点
+    nodes.push(...getPathNodes(id, node.child, [...parents]))
+  }
+  return nodes
+}
+const getNodeById = (id: string) => {
+  const nodes = getAllNodes(props.process)
+  const node = nodes.find((x) => x.id === id)
+  if (node) {
+    return node
+  } else {
+    return undefined
+  }
+}
+provide('flowDesign', {
+  processInst: processInstData,
+  readOnly: readOnly,
+  fields: flatFields,
+  nodesError: nodesError,
+  getTaskNodes: getTaskNodes,
+  getParentNodes: getParentNodes,
+  addFormItem: addFormItem,
+  deleteFormItem: deleteFormItem,
+  getNodeById: getNodeById,
+})
+
+useDraggableScroll(designerContainerRef)
+
+const openPenal = (node: FlowNode) => {
+  activeData.value = node
+  penalVisible.value = true
+}
+const nextId = (): string => {
+  let id = `node_${Math.random().toString(36).substring(2, 7)}`
+  const findId = (node: FlowNode, id: string): boolean => {
+    if (node.id === id) {
+      return true
+    }
+    if (node.child) {
+      return findId(node.child, id)
+    }
+    if ('children' in node) {
+      const branchNode = node as BranchNode
+      if (branchNode.children && branchNode.children.length > 0) {
+        return branchNode.children.some((item) => {
+          return findId(item, id)
+        })
+      }
+    }
+    return false
+  }
+  if (findId(props.process, id)) {
+    return nextId()
+  }
+  return id
+}
+const addExclusive = (node: FlowNode) => {
+  const child = node.child
+  const id = nextId()
+  const exclusiveNode = {
+    id: id,
+    pid: node.id,
+    type: 'exclusive',
+    name: '独占网关',
+    child: child,
+    children: [],
+  } as ExclusiveNode
+  if (child) {
+    child.pid = id
+  }
+  addCondition(exclusiveNode)
+  addCondition(exclusiveNode)
+  node.child = exclusiveNode
+  if (exclusiveNode.children.length > 0) {
+    const condition = exclusiveNode.children[exclusiveNode.children.length - 1] as ConditionNode
+    condition.def = true
+    condition.name = '默认条件'
+  }
+}
+const addInclusive = (node: FlowNode) => {
+  const child = node.child
+  const id = nextId()
+  const inclusiveNode = {
+    id: id,
+    pid: node.id,
+    type: 'inclusive',
+    name: '包容网关',
+    child: child,
+    children: [],
+  } as InclusiveNode
+  if (child) {
+    child.pid = id
+  }
+  addCondition(inclusiveNode)
+  addCondition(inclusiveNode)
+  node.child = inclusiveNode
+  if (inclusiveNode.children.length > 0) {
+    const condition = inclusiveNode.children[inclusiveNode.children.length - 1] as ConditionNode
+    condition.def = true
+    condition.name = '默认条件'
+  }
+}
+const addParallel = (node: FlowNode) => {
+  const child = node.child
+  const id = nextId()
+  const parallelNode = {
+    id: id,
+    pid: node.id,
+    type: 'parallel',
+    name: '并行网关',
+    child: child,
+    children: [],
+  } as ParallelNode
+  if (child) {
+    child.pid = id
+  }
+  addConcurrent(parallelNode)
+  addConcurrent(parallelNode)
+  node.child = parallelNode
+}
+const addCondition = (node: FlowNode) => {
+  const exclusive = node as ExclusiveNode
+  exclusive.children.splice(exclusive.children.length == 0 ? 0 : exclusive.children.length - 1, 0, {
+    id: nextId(),
+    pid: exclusive.id,
+    type: 'condition',
+    def: false,
+    name: `条件${exclusive.children.length == 0 ? 1 : exclusive.children.length}`,
+    conditions: {
+      operator: 'and',
+      conditions: [],
+      groups: [],
+    } as FilterRules,
+    child: undefined,
+  })
+}
+const addConcurrent = (node: FlowNode) => {
+  const parallel = node as ParallelNode
+  parallel.children.splice(parallel.children.length, 0, {
+    id: nextId(),
+    pid: parallel.id,
+    type: 'concurrent',
+    name: `分支${parallel.children.length + 1}`,
+    // conditions: {
+    //   operator: 'and',
+    //   conditions: [],
+    //   groups: []
+    // } as FilterRules,
+    child: undefined,
+  })
+}
+// const addCondition = (node: FlowNode) => {
+//   const exclusive = node as ExclusiveNode
+//   exclusive.children.splice(exclusive.children.length - 1, 0, {
+//     id: nextId(),
+//     pid: exclusive.id,
+//     type: 'condition',
+//     def: false,
+//     name: `条件${exclusive.children.length + 1}`,
+//     conditions: {
+//       operator: 'and',
+//       conditions: [],
+//       groups: []
+//     } as FilterRules,
+//     child: undefined
+//   })
+// }
+const addCc = (node: FlowNode) => {
+  const child = node.child
+  const id = nextId()
+  node.child = {
+    id: id,
+    pid: node.id,
+    type: 'cc',
+    name: '抄送人',
+    child: child,
+    assigneeType: 'user',
+    formUser: '',
+    formRole: '',
+    users: [],
+    roles: [],
+    leader: 1,
+    orgLeader: 1,
+    choice: false,
+    self: false,
+    formProperties: [],
+  } as CcNode
+  if (child) {
+    child.pid = id
+  }
+}
+const addTimer = (node: FlowNode) => {
+  const child = node.child
+  const id = nextId()
+  node.child = {
+    id: id,
+    pid: node.id,
+    name: '计时等待',
+    type: 'timer',
+    child: child,
+    waitType: 'duration',
+    unit: 'PT%sS',
+    duration: 0,
+    timeDate: undefined,
+  } as TimerNode
+  if (child) {
+    child.pid = id
+  }
+}
+const addJump = (node: FlowNode) => {
+  const child = node.child
+  const id = nextId()
+  node.child = {
+    id: id,
+    pid: node.id,
+    name: '节点跳转',
+    type: 'jump',
+    child: child,
+    targetNode: '',
+  } as JumpNode
+  if (child) {
+    child.pid = id
+  }
+}
+const addNotify = (node: FlowNode) => {
+  const child = node.child
+  const id = nextId()
+  node.child = {
+    id: id,
+    pid: node.id,
+    name: '消息通知',
+    type: 'notify',
+    child: child,
+    assigneeType: 'user',
+    formUser: '',
+    formRole: '',
+    users: [],
+    roles: [],
+    leader: 1,
+    orgLeader: 1,
+    choice: false,
+    self: false,
+    types: ['site'],
+    subject: '',
+    content: '',
+    nodeTag: '',
+    nodeParam: '',
+  } as NotifyNode
+  if (child) {
+    child.pid = id
+  }
+}
+const addApproval = (node: FlowNode) => {
+  const child = node.child
+  const id = nextId()
+  node.child = {
+    id: id,
+    pid: node.id,
+    type: 'approval',
+    name: '审批步骤',
+    executionListeners: [],
+    child: child,
+    // 属性
+    manualUsers: false,
+    hideUsers: false,
+    filterUsers: 'no',
+    assigneeType: 'user',
+    formUser: '',
+    formRole: '',
+    users: [],
+    roles: [],
+    leader: 1,
+    orgLeader: 1,
+    choice: false,
+    self: false,
+    multi: 'single',
+    multiPercent: 100,
+    nobody: 'pass',
+    nobodyUsers: [],
+    formProperties: [],
+    operations: {
+      complete: true,
+      refuse: false,
+      back: true,
+      transfer: false,
+      delegate: false,
+      addMulti: false,
+      minusMulti: false,
+    },
+    msgTypes: ['site'],
+    msgLevel: '50',
+    msgSubject: '',
+    msgContent: '',
+    nodeTag: '',
+    nodeParam: '',
+    backNodes: [],
+    sameUser: 'normal',
+  } as ApprovalNode
+  if (child) {
+    child.pid = id
+  }
+}
+const addNode = (type: NodeType, node: FlowNode) => {
+  const addMap: Recordable<(node: FlowNode) => void> = {
+    exclusive: addExclusive,
+    inclusive: addInclusive,
+    parallel: addParallel,
+    condition: addCondition,
+    concurrent: addConcurrent,
+    cc: addCc,
+    timer: addTimer,
+    jump: addJump,
+    notify: addNotify,
+    approval: addApproval,
+  }
+  const fun = addMap[type]
+  fun && fun(node)
+}
+const delNode = (del: FlowNode) => {
+  delete nodesError.value[del.id]
+  delNodeNext(props.process, del)
+}
+const delNodeNext = (next: FlowNode, del: FlowNode) => {
+  delete nodesError.value[del.id]
+  if (next.id === del.pid) {
+    if ('children' in next && next.child?.id !== del.id) {
+      const branchNode = next as BranchNode
+      const index = branchNode.children.findIndex((item) => item.id === del.id)
+      if (index !== -1) {
+        if (branchNode.children.length <= 2) {
+          delError(branchNode)
+          delNode(branchNode)
+        } else {
+          delError(del)
+          branchNode.children.splice(index, 1)
+        }
+      }
+    } else {
+      if (del.child && del.child.pid) {
+        del.child.pid = next.id
+      }
+      next.child = del.child
+    }
+  } else {
+    if (next.child) {
+      delNodeNext(next.child, del)
+    }
+    if ('children' in next) {
+      const nextBranch = next as BranchNode
+      if (nextBranch.children && nextBranch.children.length > 0) {
+        nextBranch.children.forEach((item) => {
+          delNodeNext(item, del)
+        })
+      }
+    }
+  }
+}
+const delError = (node: FlowNode) => {
+  delete nodesError.value[node.id]
+  if (node.child) {
+    delError(node.child)
+  }
+  if ('children' in node) {
+    const branchNode = node as BranchNode
+    if (branchNode.children && branchNode.children.length > 0) {
+      branchNode.children.forEach((item) => {
+        delError(item)
+      })
+    }
+  }
+}
+const validate = () => {
+  return new Promise((resolve, reject) => {
+    const errors = Object.values(nodesError.value).flat()
+    if (errors.length > 0) {
+      reject(errors)
+    } else {
+      resolve(true)
+    }
+  })
+}
+
+const getAllNodes = (node: BranchNode | FlowNode): FlowNode[] => {
+  const nodes = []
+  if (node) {
+    nodes.push(node)
+    if ('children' in node && Array.isArray(node.children) && node.children.length > 0) {
+      // 如果是数组，递归遍历每个子节点
+      node.children.forEach((childNode) => {
+        nodes.push(...getAllNodes(childNode))
+      })
+    }
+    if (node.child) {
+      // 如果是单个子节点
+      nodes.push(...getAllNodes(node.child))
+    }
+  }
+  return nodes
+}
+
+defineExpose({
+  validate,
+})
+</script>
+
+<template>
+  <div class="designer-container cursor-default active:cursor-grabbing" ref="designerContainerRef">
+    <div class="tool">
+      <slot></slot>
+    </div>
+<!--    <template v-if="props.bpmnView && props.bpmnXml">-->
+<!--      <process-diagram :xml="bpmnXml"></process-diagram>-->
+<!--    </template>-->
+<!--    <template>-->
+      <el-flex
+        width="300px"
+        height="30px"
+        align="center"
+        v-if="processInstData?.hisTasks?.length || processInstData?.hisTasks?.length"
+        class="legend"
+      >
+        <div style="height: 15px; width: 15px; border-radius: 5px; background: #18ad43" />
+        <span>已完成</span>
+        <div
+          style="
+            height: 15px;
+            width: 15px;
+            border-radius: 5px;
+            background: #0b83de;
+            margin-left: 20px;
+          "
+        />
+        <span>进行中</span>
+        <div
+          style="
+            height: 15px;
+            width: 15px;
+            border-radius: 5px;
+            background: #9b9ea1;
+            margin-left: 20px;
+          "
+        />
+        <span>未开始</span>
+      </el-flex>
+      <!--放大/缩小-->
+      <div class="zoom">
+        <el-tooltip content="放大" placement="bottom-start">
+          <el-button icon="plus" @click="zoom += 10" :disabled="zoom >= 150" circle></el-button>
+        </el-tooltip>
+        <span>{{ zoom }}%</span>
+        <el-tooltip content="缩小" placement="bottom-start">
+          <el-button icon="minus" @click="zoom -= 10" circle :disabled="zoom <= 50"></el-button>
+        </el-tooltip>
+      </div>
+      <!--流程树-->
+      <el-scrollbar style="width: 100%">
+        <div class="node-container">
+          <TreeNode
+            ref="treeRoot"
+            :node="process"
+            @addNode="addNode"
+            @delNode="delNode"
+            @activeNode="openPenal"
+          />
+        </div>
+      </el-scrollbar>
+      <!--属性面板-->
+      <Panel v-model="penalVisible" :active-data="activeData" />
+<!--    </template>-->
+  </div>
+</template>
+
+<style scoped lang="scss">
+.designer-container {
+  --flow-bg-color: v-bind(bgColor);
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  background-color: var(--flow-bg-color);
+
+  .legend {
+    position: absolute;
+    z-index: 999;
+    top: 10px;
+    left: 40px;
+  }
+
+  .zoom {
+    position: absolute;
+    z-index: 999;
+    top: 10px;
+    right: 40px;
+
+    span {
+      margin: 0 10px;
+    }
+  }
+
+  .tool {
+    position: absolute;
+    z-index: 999;
+    top: 10px;
+    left: 15px;
+    display: flex;
+    gap: 5px;
+  }
+
+  .node-container {
+    margin: 0 auto;
+    transform: scale(v-bind(getScale));
+    transform-origin: 50% 0 0;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
+}
+</style>