feat: 添加流程处理脚本用于生成流程数据

src/components/business/EasyProcess/common/process.data.ts

@@ -66,7 +66,7 @@ export const nodeConfigData: Record<EasyProcess.NodeType, EasyProcess.NodeMeta>
     canRemoved: true,
     hasDrawer: true,
     icon: { name: '&#xe60d;' },
-    defaultNode: () => ({ nodeId: getUUID(), nodeName: '基本操作', nodeType: 'operate', nodeData: {} })
+    defaultNode: () => ({ nodeId: getUUID(), nodeName: '基本操作', nodeType: 'operation', nodeData: {} })
   }
 }
 

src/components/business/EasyProcess/index2.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="ep-container">
-    <!-- 流程 -->
-    <div class="ep-process" :style="`transform: scale(${zoom / 100});`">
-      <!-- 递归节点 -->
-      <NodeWrap v-if="processData" :node="processData" />
-      <!-- 结束节点 -->
-      <NodeEnd />
-    </div>
-    <!-- 缩放 -->
-    <div class="ep-zoom">
-      <el-icon class="ep-zoom-icon" color="#ffffff" :class="zoom == 50 && 'disabled'" @click="setZoom(-10)">
-        <Minus />
-      </el-icon>
-      <span>{{ zoom }}%</span>
-      <el-icon class="ep-zoom-icon" color="#ffffff" :class="zoom == 300 && 'disabled'" @click="setZoom(10)">
-        <Plus />
-      </el-icon>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts" name="ProcessDesigner">
-  import { ref, provide, nextTick, watch } from 'vue'
-  import { Minus, Plus } from '@element-plus/icons-vue'
-  import NodeWrap from './core/node_wrap.vue'
-  import NodeEnd from './core/node-end.vue'
-  import { copy } from './common/common.util'
-  import { Validator } from './common/validator.util'
-  import { blankProcessData, ProcessConstant } from './common/process.data'
-  import { EasyProcess } from './common/process.type'
-
-  const props = defineProps<{ data?: EasyProcess.NodeConfig }>()
-
-  const processData = ref<EasyProcess.NodeConfig>(props.data || blankProcessData)
-  provide(ProcessConstant.KEY_PROCESS_DATA, processData)
-
-  // 初始化流程数据
-  const initProcess = (data?: EasyProcess.NodeConfig) => {
-    processData.value = copy(data || blankProcessData)
-    nextTick(() => validate())
-  }
-  watch(
-    () => props.data,
-    (val) => {
-      if (val && Object.keys(val).length) {
-        initProcess(val)
-      }
-    },
-    { immediate: true, deep: true }
-  )
-
-  /* ====== 节点数据验证 ====== start */
-  // 注册节点验证器
-  let validator = new Validator()
-  provide(ProcessConstant.KEY_VALIDATOR, validator)
-  // 验证流程节点数据
-  const validate = (callback?: (valid: boolean, messages: string[]) => void) => {
-    let result = validator.validate()
-    if (callback && typeof callback === 'function') {
-      callback(result.valid, result.messages)
-    }
-  }
-  /* ====== 节点数据验证 ====== end */
-
-  /* ====== 缩放 ====== start */
-  const zoom = ref<number>(100)
-  const setZoom = (step: number) => (zoom.value = Math.min(300, Math.max(50, zoom.value + step)))
-  /** ====== 缩放 ====== end */
-
-  // 暴露方法给父组件使用
-  defineExpose({ validate, getResult: () => copy(processData.value) })
-</script>
-<style lang="scss" scoped>
-  .ep-container {
-    position: relative;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    padding: 16px;
-    overflow: auto;
-    background-color: #f5f5f7;
-  }
-
-  .ep-process {
-    position: relative;
-    height: 100%;
-  }
-
-  .ep-zoom {
-    position: absolute;
-    top: 70px;
-    right: 40px;
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 125px;
-    height: 40px;
-  }
-
-  .ep-zoom-icon {
-    width: 25px;
-    height: 25px;
-    color: #fff;
-    cursor: pointer;
-    background-color: #5a5e66;
-    border: 1px solid #5a5e66;
-    border-radius: 5px;
-  }
-</style>

src/components/business/EasyProcess/node/base/BaseNode.vue

@@ -35,12 +35,19 @@
   import { EasyProcess } from '../../common/process.type'
   import { Validator } from '../../common/validator.util'
 
-  const props = withDefaults(
-    defineProps<{
-      node: EasyProcess.NodeConfig
-    }>(),
-    {}
-  )
+  import NodeStart from '../start/startNode.vue'
+  import NodeOperation from '../operation/operationNode.vue'
+  import NodeFault from '../fault/faultNode.vue'
+  import NodeVoice from '../voice/voiceNode.vue'
+
+  const nodeComponents = shallowRef({
+    start: NodeStart,
+    operation: NodeOperation,
+    fault: NodeFault,
+    voice: NodeVoice
+  })
+
+  const props = withDefaults(defineProps<{ node: EasyProcess.NodeConfig }>(), {})
 
   // 节点配置数据
   const config = ref(nodeConfigData[props.node.nodeType])
@@ -82,14 +89,6 @@
   // 生成临时节点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()

src/components/business/EasyProcess/node/condition/conditionNode.vue

@@ -8,9 +8,9 @@
   </div>
 </template>
 
-<script setup name="ConditionNode">
+<script setup lang="ts" name="ConditionNode">
   import { inject } from 'vue'
-  import { KEY_VALIDATOR } from '../../config/keys'
+  import { ProcessConstant } from '../../common/process.data'
 
   const props = defineProps({
     tempNodeId: {
@@ -37,7 +37,7 @@
   ]
 
   // 获取流程验证器实例
-  const validator = inject(KEY_VALIDATOR)
+  const validator = inject(ProcessConstant.KEY_VALIDATOR)
 
   // 注册验证器
   validator.register(props.tempNodeId, () => {

src/components/business/EasyProcess/node/operate/operateDrawer.vue

@@ -1,3 +0,0 @@
-<template>
-    <div> 基本操作 </div>
-</template>

src/components/business/EasyProcess/node/operate/operateNode.vue

@@ -1,3 +0,0 @@
-<template>
-    <div> 基本操作 </div>
-</template>

src/components/business/EasyProcess/node/operation/operationDrawer.vue

@@ -0,0 +1,3 @@
+<template>
+  <div> 基本操作 </div>
+</template>

src/components/business/EasyProcess/node/operation/operationNode.vue

@@ -0,0 +1,29 @@
+<!--
+  @desc: 操作节点
+  @date: 2025-10-10
+-->
+
+<template>
+  <div class="operationNode">{{ 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">
+  .operationNode {
+    padding: 10px;
+  }
+</style>

src/components/business/EasyProcess/node/start/node_start.vue

@@ -3,6 +3,6 @@
   <div style="text-align: center"> 开始节点</div>
 </template>
 
-<script setup name="StartNode"></script>
+<script setup lang="ts" name="StartNode"></script>
 
 <style lang="scss" scoped></style>