Просмотр исходного кода

refactor(EasyProcess): 重构流程组件结构与类型定义

重构流程设计器组件结构,优化类型定义文件组织
- 将 data.type.d.ts 重命名为 process.type.d.ts 并增强类型定义
- 将 data.ts 重命名为 process.data.ts 并优化默认配置生成
- 新增 process.helper.ts 提供流程操作工具类
- 统一组件命名规范,清理无用组件
- 优化节点配置更新逻辑与类型安全
zhanghaijun 1 год назад
Родитель
Сommit
04d577a288

+ 0 - 75
src/components/business/EasyProcess/common/data.type.d.ts

@@ -1,75 +0,0 @@
-/**
- * EasyProcess 相关类型定义
- */
-export declare namespace EasyProcess {
-  /**
-   * ==============================
-   * 流程配置结构定义
-   * ==============================
-   */
-  export interface Node {
-    title: string // 节点标题
-    color?: string // 节点标题颜色
-    bgColor?: string // 节点标题背景颜色
-    canAdd: boolean // 节点是否可以增加
-    canRemoved?: boolean // 节点是否能够移除
-    hasDrawer: boolean // 节点是否可以进行配置
-    icon: {
-      name: string // 图标名
-      color?: string // 图标颜色
-    }
-    defaultNode: NodeConfig // 默认节点结构,用于添加节点时
-  }
-  /**
-   * ==============================
-   * 流程数据结构定义
-   * ==============================
-   */
-  // 节点类型枚举
-  export type BaseType = 'start' | 'router' | 'condition'
-  export type NodeType = BaseType | (string & { _?: never })
-  // 基础节点配置
-  export interface BaseNode {
-    nodeID?: number // 节点ID
-    nodeName: string
-    nodeType: NodeType
-    nodeData?: Record<string, unknown>
-  }
-
-  // 通用节点,支持 childNode
-  export interface NormalNode extends BaseNode {
-    nodeType: Exclude<NodeType, 'router' | 'condition'>
-    childNode?: NodeConfig
-  }
-
-  // 路由节点,包含条件分支和一个默认 childNode
-  export interface RouterNode extends BaseNode {
-    nodeType: 'router'
-    conditionNodes: ConditionNode[]
-    childNode?: NodeConfig
-  }
-
-  // 条件节点,包含一个条件配置和子节点
-  export interface ConditionNode extends BaseNode {
-    nodeType: 'condition'
-    isLastCondition: boolean
-    childNode?: NodeConfig
-  }
-  // 故障节点
-  export interface FaultNode extends BaseNode {
-    nodeType: 'fault'
-    nodeData?: Record<string, unknown>
-  }
-  // 语音节点
-  export interface VoiceNode extends BaseNode {
-    nodeType: 'voice'
-    nodeData?: Record<string, unknown>
-  }
-  //操作节点
-  export interface OperationNode extends BaseNode {
-    nodeType: 'operation'
-    nodeData?: Record<string, unknown>
-  }
-  // 节点配置类型,可以是普通节点、路由节点、条件节点、故障节点、语音节点、操作节点
-  export type NodeConfig = NormalNode | RouterNode | ConditionNode | FaultNode | VoiceNode | OperationNode
-}

+ 14 - 12
src/components/business/EasyProcess/common/data.ts

@@ -1,11 +1,12 @@
-import { EasyProcess } from './data.type'
+import { getUUID } from './common.util'
+import { EasyProcess } from './process.type'
 
 export const ProcessConstant = {
   KEY_VALIDATOR: 'validator',
   KEY_PROCESS_DATA: 'processData'
 }
 
-export const nodeConfigData: Record<EasyProcess.NodeType, EasyProcess.Node> = {
+export const nodeConfigData: Record<EasyProcess.NodeType, EasyProcess.NodeMeta> = {
   start: {
     title: '开始',
     bgColor: '#1e83e9',
@@ -13,14 +14,15 @@ export const nodeConfigData: Record<EasyProcess.NodeType, EasyProcess.Node> = {
     canRemoved: false,
     hasDrawer: false,
     icon: { name: '&#xe646;' },
-    defaultNode: { nodeName: '开始', nodeType: 'start', nodeData: {} }
+    defaultNode: () => ({ nodeId: getUUID(), nodeName: '开始', nodeType: 'start', nodeData: {} })
   },
   router: {
     title: '条件分支',
     canAdd: true,
     hasDrawer: false,
     icon: { name: '&#xe804;' },
-    defaultNode: {
+    defaultNode: () => ({
+      nodeId: getUUID(),
       nodeName: '路由',
       nodeType: 'router',
       nodeData: { value: '1' },
@@ -28,7 +30,7 @@ export const nodeConfigData: Record<EasyProcess.NodeType, EasyProcess.Node> = {
         { nodeName: '条件', nodeType: 'condition', isLastCondition: false, nodeData: { value: '1' } },
         { nodeName: '条件', nodeType: 'condition', isLastCondition: true, nodeData: { value: '1' } }
       ]
-    }
+    })
   },
   condition: {
     title: '条件',
@@ -37,7 +39,7 @@ export const nodeConfigData: Record<EasyProcess.NodeType, EasyProcess.Node> = {
     canRemoved: true,
     hasDrawer: true,
     icon: { name: '&#xe7b7;' },
-    defaultNode: { nodeName: '条件', nodeType: 'condition', isLastCondition: false, nodeData: { value: '1' } }
+    defaultNode: () => ({ nodeId: getUUID(), nodeName: '条件', nodeType: 'condition', isLastCondition: false, nodeData: { value: '1' } })
   },
   fault: {
     title: '故障触发',
@@ -46,7 +48,7 @@ export const nodeConfigData: Record<EasyProcess.NodeType, EasyProcess.Node> = {
     canRemoved: true,
     hasDrawer: true,
     icon: { name: '&#xe7cb;' },
-    defaultNode: { nodeName: '故障触发', nodeType: 'fault', nodeData: {} }
+    defaultNode: () => ({ nodeId: getUUID(), nodeName: '故障触发', nodeType: 'fault', nodeData: {} })
   },
   voice: {
     title: '语音交互',
@@ -55,20 +57,20 @@ export const nodeConfigData: Record<EasyProcess.NodeType, EasyProcess.Node> = {
     canRemoved: true,
     hasDrawer: true,
     icon: { name: '&#xe6e4;' },
-    defaultNode: { nodeName: '语音交互', nodeType: 'voice', nodeData: {} }
+    defaultNode: () => ({ nodeId: getUUID(), nodeName: '语音交互', nodeType: 'voice', nodeData: {} })
   },
-  operate: {
+  operation: {
     title: '基本操作',
     bgColor: '#476B9F',
     canAdd: true,
     canRemoved: true,
     hasDrawer: true,
     icon: { name: '&#xe60d;' },
-    defaultNode: { nodeName: '基本操作', nodeType: 'operate', nodeData: {} }
+    defaultNode: () => ({ nodeId: getUUID(), nodeName: '基本操作', nodeType: 'operate', nodeData: {} })
   }
 }
 
-export const blankProcessData: EasyProcess.NodeConfig = nodeConfigData['start'].defaultNode
+export const blankProcessData = () => nodeConfigData['start'].defaultNode()
 
 export const getNodeConfig = (type: EasyProcess.NodeType) => {
   return (
@@ -79,7 +81,7 @@ export const getNodeConfig = (type: EasyProcess.NodeType) => {
       canRemoved: true,
       hasDrawer: false,
       icon: { name: 'condition' },
-      defaultNode: { nodeName: '未知节点', nodeType: 'other', nodeData: {} }
+      defaultNode: () => ({ nodeId: getUUID(), nodeName: '未知节点', nodeType: 'other', nodeData: {} })
     }
   )
 }

+ 102 - 0
src/components/business/EasyProcess/common/process.helper.ts

@@ -0,0 +1,102 @@
+import { EasyProcess } from './process.type'
+
+export class ProcessHelper {
+  processData: EasyProcess.NodeConfig
+
+  constructor(processData: EasyProcess.NodeConfig) {
+    this.processData = processData
+  }
+  /**
+   * 添加子节点
+   * @param nodeId 父节点ID
+   * @param node 要添加的节点
+   */
+  public addNode(nodeId: string, node: EasyProcess.NodeConfig): boolean {
+    const target = this.findNode(nodeId, this.processData)
+    if (!target) return false
+
+    // 根据类型处理不同结构
+    if (target.nodeType === 'router') {
+      // 路由节点添加条件分支
+      const router = target as EasyProcess.RouterNode
+      if (!router.conditionNodes) router.conditionNodes = []
+      router.conditionNodes.push(node as EasyProcess.ConditionNode)
+    } else {
+      // 普通节点、条件节点添加 childNode
+      target.childNode = node
+    }
+    return true
+  }
+
+  /**
+   * 删除节点(递归查找)
+   * @param nodeId 要删除的节点ID
+   */
+  public deleteNode(nodeId: string, current: EasyProcess.NodeConfig = this.processData): boolean {
+    // 删除子节点
+    if (current.childNode?.nodeId === nodeId) {
+      current.childNode = undefined
+      return true
+    }
+    // 删除条件节点(router专用)
+    if (current.nodeType === 'router') {
+      const router = current as EasyProcess.RouterNode
+      const before = router.conditionNodes?.length ?? 0
+      if (router.conditionNodes) {
+        router.conditionNodes = router.conditionNodes.filter((c) => c.nodeId !== nodeId)
+        if (router.conditionNodes.length < before) return true
+        for (const c of router.conditionNodes) {
+          if (this.deleteNode(nodeId, c)) return true
+        }
+      }
+    }
+    // 递归删除普通子节点
+    if (current.childNode) {
+      return this.deleteNode(nodeId, current.childNode)
+    }
+    return false
+  }
+  /**
+   * 更新节点数据
+   * @param nodeId 节点ID
+   * @param nodeData 更新的字段
+   */
+  public updateNode(nodeId: string, nodeData: Record<string, unknown>) {
+    const target = this.findNode(nodeId, this.processData)
+    if (!target) return false
+    target.nodeData = { ...target.nodeData, ...nodeData }
+    return true
+  }
+
+  /**
+   * 查找节点(深度优先)
+   */
+  private findNode(nodeId: string, current: EasyProcess.NodeConfig): EasyProcess.NodeConfig | null {
+    if (current.nodeId === nodeId) return current
+    // router 条件节点
+    if (current.nodeType === 'router') {
+      const router = current as EasyProcess.RouterNode
+      for (const c of router.conditionNodes || []) {
+        const found = this.findNode(nodeId, c)
+        if (found) return found
+      }
+    }
+    // 普通子节点
+    if (current.childNode) {
+      const found = this.findNode(nodeId, current.childNode)
+      if (found) return found
+    }
+    return null
+  }
+  /**
+   * 打印流程结构(调试用)
+   */
+  public printTree(node: EasyProcess.NodeConfig = this.processData, indent = 0): void {
+    console.log(`${' '.repeat(indent)}- ${node.nodeType} (${node.nodeName})`)
+    if (node.nodeType === 'router') {
+      const router = node as EasyProcess.RouterNode
+      router.conditionNodes?.forEach((cond) => this.printTree(cond, indent + 2))
+    }
+    if (node.childNode) this.printTree(node.childNode, indent + 2)
+  }
+}

+ 95 - 0
src/components/business/EasyProcess/common/process.type.d.ts

@@ -0,0 +1,95 @@
+/**
+ * ==========================================
+ * EasyProcess - 流程设计类型定义
+ * ==========================================
+ * 支持流程节点的类型声明、配置元数据及层级结构。
+ * ==========================================
+ */
+export declare namespace EasyProcess {
+  /**
+   * ==========================================
+   * 流程节点元信息定义(配置层)
+   * ==========================================
+   * 用于描述节点样式、默认配置、行为特征。
+   */
+  export interface NodeMeta {
+    title: string // 节点标题
+    color?: string // 节点标题颜色
+    bgColor?: string // 节点标题背景颜色
+    canAdd: boolean // 节点是否可以增加
+    canRemoved?: boolean // 节点是否能够移除
+    hasDrawer: boolean // 节点是否可以进行配置
+    icon: {
+      name: string // 图标名
+      color?: string // 图标颜色
+    }
+    defaultNode: () => NodeConfig // 默认节点结构,用于添加节点时
+  }
+  /**
+   * ==========================================
+   * 节点类型枚举定义
+   * ==========================================
+   */
+  export type NodeBaseType = 'start' | 'router' | 'condition'
+  export type NodeExtendType = 'fault' | 'voice' | 'operation' | (string & { _?: never }) // 自定义节点类型扩展
+  export type NodeType = NodeBaseType | NodeExtendType // 节点类型
+
+  /**
+   * ==========================================
+   * 基础节点结构定义(数据层)
+   * ==========================================
+   * 所有节点共享的核心属性。
+   */
+  export interface BaseNode {
+    nodeId?: string // 节点ID
+    nodeName: string // 节点名称
+    nodeType: NodeType // 节点类型
+    nodeData: Record<string, unknown> // 节点业务数据(动态配置项)
+    childNode?: NodeConfig // 子节点配置
+  }
+
+  /**
+   * ==========================================
+   * 各类型节点定义
+   * ==========================================
+   */
+  /** 普通节点(可嵌套子节点) */
+  export interface NormalNode extends BaseNode {
+    nodeType: Exclude<NodeType, 'router' | 'condition'>
+  }
+
+  /** 条件节点(带条件配置 + 子节点) */
+  export interface ConditionNode extends BaseNode {
+    nodeType: 'condition'
+    /** 是否为路由分支的最后一个条件 */
+    isLastCondition: boolean
+  }
+
+  /** 路由节点(包含多个条件分支 + 默认节点) */
+  export interface RouterNode extends BaseNode {
+    nodeType: 'router'
+    /** 条件节点集合 */
+    conditionNodes: ConditionNode[]
+  }
+
+  /** 故障节点(支持自定义容错逻辑) */
+  export interface FaultNode extends BaseNode {
+    nodeType: 'fault'
+  }
+
+  /** 语音节点(语音播放或识别) */
+  export interface VoiceNode extends BaseNode {
+    nodeType: 'voice'
+  }
+
+  /** 操作节点(通用交互操作) */
+  export interface OperationNode extends BaseNode {
+    nodeType: 'operation'
+  }
+  /**
+   * ==========================================
+   * 综合节点类型定义
+   * ==========================================
+   */
+  export type NodeConfig = NormalNode | RouterNode | ConditionNode | FaultNode | VoiceNode | OperationNode
+}

+ 0 - 29
src/components/business/EasyProcess/core/node-add.vue

@@ -1,29 +0,0 @@
-<!--
-  @desc: 
-  @date: 2025-10-09
--->
-
-<template>
-  <div class="node-add">{{ title }} </div>
-</template>
-
-<script setup lang="ts">
-  /** -------------------- 组件参数 -------------------- */
-  interface Props {
-    title?: string
-  }
-  const props = withDefaults(defineProps<Props>(), {
-    title: 'hello'
-  })
-
-  /** -------------------- 生命周期 ----------------------- */
-  onMounted(() => {
-    console.log(`${props.title} mounted`)
-  })
-</script>
-
-<style scoped lang="scss">
-  .node-add {
-    padding: 10px;
-  }
-</style>

+ 0 - 24
src/components/business/EasyProcess/core/node_base.vue

@@ -1,24 +0,0 @@
-<template>
-  <div class="node_base">{{ title }} </div>
-</template>
-
-<script setup lang="ts">
-  /** -------------------- 组件参数 -------------------- */
-  interface Props {
-    title?: string
-  }
-  const props = withDefaults(defineProps<Props>(), {
-    title: 'hello'
-  })
-
-  /** -------------------- 生命周期 ----------------------- */
-  onMounted(() => {
-    console.log(`${props.title} mounted`)
-  })
-</script>
-
-<style scoped lang="scss">
-  .node_base {
-    padding: 10px;
-  }
-</style>

+ 0 - 7
src/components/business/EasyProcess/core/node_router.vue

@@ -1,7 +0,0 @@
-<template>
-  <div> </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style lang="scss" scoped></style>

+ 0 - 7
src/components/business/EasyProcess/core/node_start.vue

@@ -1,7 +0,0 @@
-<template>
-  <div> </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style lang="scss" scoped></style>

+ 0 - 23
src/components/business/EasyProcess/core/node_wrap.vue

@@ -1,23 +0,0 @@
-<template>
-  <div>
-    <!-- 路由节点 -->
-    <node-router :node="node" v-if="node.nodeType == 'router'" />
-    <!-- 普通节点 -->
-    <node-base :node="node" v-else />
-    <!-- 子节点 -->
-    <node-wrap :node="node.childNode" v-if="node.childNode && node.childNode.nodeType" />
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { EasyProcess } from '../common/data.type'
-  import NodeRouter from './node_router.vue'
-  import NodeBase from './node_base.vue'
-
-  interface Props {
-    node: EasyProcess.NodeConfig
-  }
-  withDefaults(defineProps<Props>(), {})
-</script>
-
-<style lang="scss" scoped></style>

+ 4 - 4
src/components/business/EasyProcess/index.vue

@@ -22,12 +22,12 @@
 
 <script setup lang="ts" name="ProcessDesigner">
   import NodeWrap from './node/NodeWrap.vue'
-  import EndNode from './node/end/endNode.vue'
+  import EndNode from './node/end/node_end.vue'
   import { ref, watchEffect, provide, nextTick } from 'vue'
   import { copy } from './common/common.util'
-  import { blankProcessData, ProcessConstant } from './common/data'
+  import { blankProcessData, ProcessConstant } from './common/process.data'
   import { Validator } from './common/validator.util'
-  import { EasyProcess } from './common/data.type'
+  import { EasyProcess } from './common/process.type'
 
   defineProps<{ data?: EasyProcess.NodeConfig }>()
 
@@ -37,7 +37,7 @@
   provide(ProcessConstant.KEY_PROCESS_DATA, processData)
 
   watchEffect(() => {
-    processData.value = copy(blankProcessData)
+    processData.value = copy(blankProcessData())
     nextTick(() => validate())
   })
 

+ 2 - 2
src/components/business/EasyProcess/index2.vue

@@ -27,8 +27,8 @@
   import NodeEnd from './core/node-end.vue'
   import { copy } from './common/common.util'
   import { Validator } from './common/validator.util'
-  import { blankProcessData, ProcessConstant } from './common/data'
-  import { EasyProcess } from './common/data.type'
+  import { blankProcessData, ProcessConstant } from './common/process.data'
+  import { EasyProcess } from './common/process.type'
 
   const props = defineProps<{ data?: EasyProcess.NodeConfig }>()
 

+ 1 - 1
src/components/business/EasyProcess/node/base/BaseDrawer.vue

@@ -15,7 +15,7 @@
   import Drawer from '@/components/business/Drawer/Drawer.vue'
   import Button from '@/components/business/Button/Button.vue'
   import { ref, shallowRef, defineAsyncComponent } from 'vue'
-  import { nodeConfigData } from '../../common/data'
+  import { nodeConfigData } from '../../common/process.data'
   import { copy } from '../../common/common.util.ts'
 
   // 节点数据的副本

+ 54 - 91
src/components/business/EasyProcess/node/base/BaseNode.vue

@@ -15,11 +15,11 @@
       <div class="ep-node-error-msg" v-if="isError">
         <div class="ep-node-error-msg-box">
           <icon icon="svg:tips" :width="23" height="23" color="red" @mouseenter="showErrorTips(true)" @mouseleave="showErrorTips(false)" />
-          <div class="ep-node-error-tips" v-if="errorTips && errorMsg">{{ errorMsg }}</div>
+          <div class="ep-node-error-tips" v-if="errorTips">{{ errorMessage }}</div>
         </div>
       </div>
     </div>
-    <AddNode :node="props.node" />
+    <NodeAdd :node="props.node" />
 
     <!-- 节点配置Drawer -->
     <BaseDrawer ref="nodeDrawer" @updateConfig="updateConfig" @cancelUpdateConfig="cancelUpdateConfig" />
@@ -27,89 +27,73 @@
 </template>
 
 <script setup lang="ts" name="BaseNode">
-  import BaseDrawer from './BaseDrawer.vue'
-  import AddNode from './node_add.vue'
   import { ref, shallowRef, onMounted, getCurrentInstance, defineAsyncComponent, watch, computed, onUnmounted, inject } from 'vue'
-  import { nodeConfigData } from '../../common/data'
+  import BaseDrawer from './BaseDrawer.vue'
+  import NodeAdd from './node_add.vue'
+  import { nodeConfigData, ProcessConstant } from '../../common/process.data'
   import { getUUID } from '../../common/common.util'
-  import { KEY_VALIDATOR } from '../../config/keys'
-
-  const props = defineProps({
-    node: {
-      // 传入的流程节点数据
-      type: Object,
-      default: () => {}
-    },
-    conditionNodes: {
-      // 条件集合,当节点类型为condition时有效
-      type: Array,
-      default: () => []
-    },
-    conditionIndex: {
-      // 当前条件节点的顺序,当节点类型为condition时有效
-      type: Number,
-      default: 0
-    }
-  })
-
-  const { proxy } = getCurrentInstance()
-
-  // 生成临时节点ID
-  const tempNodeId = getUUID()
+  import { EasyProcess } from '../../common/process.type'
+  import { Validator } from '../../common/validator.util'
+
+  const props = withDefaults(
+    defineProps<{
+      node: EasyProcess.NodeConfig
+    }>(),
+    {}
+  )
 
   // 节点配置数据
   const config = ref(nodeConfigData[props.node.nodeType])
-
-  // 获取流程验证器实例
-  const validator = inject(KEY_VALIDATOR)
-  const errorMsg = ref(null)
-  const errorTips = ref(false)
+  const isStart = computed(() => props.node.nodeType == 'start')
+  const validator = inject<Validator>(ProcessConstant.KEY_VALIDATOR)
 
   watch(
     () => props.node,
     () => {
       config.value = nodeConfigData[props.node.nodeType]
-      validator.validate()
+      validator?.validate()
     }
   )
-
-  const modules = import.meta.glob('../*/*Node.vue')
-  const nodeComponents = shallowRef({})
-
-  Object.keys(nodeConfigData).forEach((key) => {
-    let component = defineAsyncComponent(modules[`../${key}/${key}Node.vue`])
-    nodeComponents.value[key] = component
-  })
-
-  onMounted(async () => {})
-
-  onUnmounted(async () => {
-    validator.remove(tempNodeId)
-    validator.validate()
-  })
-
-  const isStart = computed(() => {
-    return props.node.nodeType == 'start'
+  // ---------- 节点数据校验 ---------- start
+  const errorTips = ref<boolean>(false)
+  const showErrorTips = (flag: boolean) => (errorTips.value = flag)
+  const errorMessage = computed<string>(() => {
+    let result = validator?.getResult(tempNodeId)
+    return result ? (result.message ?? '') : ''
   })
-
-  // 节点验证结果是否异常
-  const isError = computed(() => {
-    let result = validator.getResult(tempNodeId)
-    if (result) {
-      errorMsg.value = result.message
-      return !result.valid
-    }
-    errorMsg.value = null
-    return false
+  const isError = computed<boolean>(() => {
+    let result = validator?.getResult(tempNodeId)
+    return result ? !result.valid : false
   })
+  // ---------- 节点数据校验 --------- end
 
   // 节点是否可以被移除
   const canRemoved = computed(() => {
-    if (isLastCondition()) {
-      return false
-    }
+    if (isLastCondition.value) return false
     return config.value.canRemoved
   })
+  // 是否是最后一个条件节点
+  const isLastCondition = computed<boolean>(() => {
+    return props.node.nodeType == 'condition' && props.node.isLastCondition
+  })
+
+  const { proxy } = getCurrentInstance()
+
+  // 生成临时节点ID
+  const tempNodeId = getUUID()
+
+  const modules = import.meta.glob('../*/*Node.vue')
+  const nodeComponents = shallowRef({})
+  onMounted(() => {
+    Object.keys(nodeConfigData).forEach((key) => {
+      let component = defineAsyncComponent(() => modules[`../${key}/${key}Node.vue`]() as Promise<{ default: Component }>)
+      nodeComponents.value = { ...nodeComponents.value, [key]: component }
+    })
+  })
+  onUnmounted(async () => {
+    validator?.remove(tempNodeId)
+    validator?.validate()
+  })
 
   // 显示节点配置组件
   const showNodeDrawer = () => {
@@ -121,22 +105,6 @@
     }
   }
 
-  // 判断当前节点是否为条件节点
-  const isCondition = () => {
-    if (props.node.nodeType == 'condition') {
-      return true
-    }
-    return false
-  }
-
-  // 判断当前节点是否为条件节点,且为最后一个条件
-  const isLastCondition = () => {
-    if (isCondition() && props.node.isLastCondition) {
-      return true
-    }
-    return false
-  }
-
   // 移除当前节点
   const emit = defineEmits(['removeNode'])
   const removeNode = () => {
@@ -144,18 +112,13 @@
   }
 
   // 更新节点配置属性
-  const updateConfig = (data) => {
-    props.node.config = data
-    validator.validate()
+  const updateConfig = (data: EasyProcess.NodeConfig) => {
+    props.node = data
+    validator?.validate()
   }
 
   // 取消更新节点配置属性
-  const cancelUpdateConfig = () => {
-    validator.validate()
-  }
-
-  // 显示错误提示信息
-  const showErrorTips = (flag: boolean) => (errorTips.value = flag)
+  const cancelUpdateConfig = () => validator?.validate()
 </script>
 
 <style lang="scss" scoped>

+ 13 - 13
src/components/business/EasyProcess/node/base/node_add.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="ep-node-add">
-    <div ref="nodeAddBtn" class="ep-node-add-btn" v-on:mouseenter="toggleAddSelectVisibility(true)" v-on:mouseleave="toggleAddSelectVisibility(false)">
+    <div ref="nodeAddBtn" class="ep-node-add-btn" v-on:mouseenter="toggleVisibility(true)" v-on:mouseleave="toggleVisibility(false)">
       <Icon class="ep-node-add-btn-icon" :icon="'&#xe83e;'" color="#FFFFFF" />
-      <div ref="nodeAddSelect" :class="['ep-node-add-select-box', 'space-y-3', 'ep-node-add-right']" v-if="isShowAddSelect">
+      <div ref="nodeAddSelect" :class="['ep-node-add-select-box', 'space-y-3', 'ep-node-add-right']" v-if="showSelect">
         <div class="ep-node-add-select-item" v-for="(item, index) in availableNodeTypes" :key="index" v-on:click="insertNodeIntoParent(item.type)">
           <Icon class="ep-node-add-select-item-icon" :icon="item.icon.name" :color="item.iconColor" />
           <div class="ep-node-add-select-item-title"> {{ item.title }} </div>
@@ -14,14 +14,13 @@
 
 <script setup lang="ts" name="AddNode">
   import { ref, computed } from 'vue'
-  import { nodeConfigData } from '../../common/data'
-  import { copy } from '../../common/common.util'
-  import { EasyProcess } from '../../common/data.type'
+  import { nodeConfigData } from '../../common/process.data'
+  import { EasyProcess } from '../../common/process.type'
 
   const props = withDefaults(defineProps<{ node: EasyProcess.NodeConfig }>(), {})
 
-  /** -------------------- 选择添加节点 ----------------------- */
-  interface NodeSelect extends Pick<EasyProcess.Node, 'title' | 'icon'> {
+  /** ---------- 选择添加节点 ---------- start */
+  interface NodeSelect extends Pick<EasyProcess.NodeMeta, 'title' | 'icon'> {
     type: EasyProcess.NodeType
     iconColor: string
   }
@@ -40,20 +39,21 @@
     }, [] as NodeSelect[])
   })
   // 是否显示添加节点选择框
-  const isShowAddSelect = ref(false)
-  const toggleAddSelectVisibility = (flag: boolean) => (isShowAddSelect.value = flag)
-  /** -------------------- 选择添加节点 ----------------------- */
+  const showSelect = ref(false)
+  const toggleVisibility = (flag: boolean) => (showSelect.value = flag)
+  /** ---------- 选择添加节点 ---------- end */
 
   // 添加节点
   const insertNodeIntoParent = (nodeType: EasyProcess.NodeType) => {
     let typeConfig = nodeConfigData[nodeType]
     if (typeConfig) {
-      const addNode = { ...typeConfig.defaultNode }
-      const childNode = { ...props.node.childNode }
+      const addNode = { ...typeConfig.defaultNode() }
+      const childNode = { ...props.node.childNode } as EasyProcess.NodeConfig
       addNode.childNode = childNode
+      // eslint-disable-next-line vue/no-mutating-props
       props.node.childNode = addNode
     }
-    toggleAddSelectVisibility(false)
+    toggleVisibility(false)
   }
 </script>
 

+ 0 - 46
src/components/business/EasyProcess/node/end/endNode.vue

@@ -1,46 +0,0 @@
-<template>
-  <!-- 结束节点 -->
-  <div class="ep-node-end">
-    <div class="ep-node-end-icon"></div>
-    <div class="ep-node-end-text">流程结束</div>
-  </div>
-</template>
-
-<script setup name="EndNode">
-  import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
-
-  const props = defineProps({
-    node: {
-      // 传入的流程配置数据
-      type: Object,
-      default: {}
-    }
-  })
-
-  const { proxy } = getCurrentInstance()
-
-  // 流程配置数据
-  let config = ref({})
-
-  onMounted(async () => {})
-</script>
-
-<style lang="scss" scoped>
-  .ep-node-end {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .ep-node-end-icon {
-      width: 15px;
-      height: 15px;
-      border-radius: 10px;
-      background-color: #cacaca;
-    }
-    .ep-node-end-text {
-      color: #5a5e66;
-      margin-bottom: 100px;
-    }
-  }
-</style>

+ 1 - 1
src/components/business/EasyProcess/core/node_end.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="EndNode"></script>
+<script setup name="EndNode"></script>
 
 <style lang="scss" scoped>
   .ep-node-end {

+ 1 - 1
src/components/business/EasyProcess/node/router/routerNode.vue

@@ -28,7 +28,7 @@
   import AddNode from '../base/node_add.vue'
   import { onMounted } from 'vue'
   import { copy } from '../../common/common.util.ts'
-  import { nodeConfigData } from '../../common/data.ts'
+  import { nodeConfigData } from '../../common/process.data'
 
   const props = defineProps({
     node: {

+ 8 - 0
src/components/business/EasyProcess/node/start/node_start.vue

@@ -0,0 +1,8 @@
+<template>
+  <!-- 发起人节点 -->
+  <div style="text-align: center"> 开始节点</div>
+</template>
+
+<script setup name="StartNode"></script>
+
+<style lang="scss" scoped></style>

+ 0 - 16
src/components/business/EasyProcess/node/start/startNode.vue

@@ -1,16 +0,0 @@
-<template>
-  <!-- 发起人节点 -->
-  <div style="text-align: center;"> 开始节点</div>
-</template>
-
-<script setup name="StartNode">
-  const props = defineProps({
-    tempNodeId: { type: String },
-    node: {
-      type: Object,
-      default: () => {}
-    }
-  })
-</script>
-
-<style lang="scss" scoped></style>