feat: 流程设计

src/components/business/EasyProcess/utils/tools.js

@@ -2,7 +2,7 @@
  * 获取UUID
  * @returns {*}
  */
-export const getUUID = () => {
+export const getUUID = (): string => {
   return new Date().getTime() + '' + Math.floor(Math.random() * 1000 + 1)
 }
 
@@ -10,7 +10,7 @@ export const getUUID = () => {
  * 复制对象(深拷贝)
  * @param source
  */
-export const copy = (source) => {
+export const copy = (source: object): string | null => {
   if (source) {
     const str = JSON.stringify(source)
     return JSON.parse(str)

src/components/business/EasyProcess/index.vue

@@ -35,7 +35,7 @@
   import EndNode from './node/end/endNode.vue'
 
   import { ref, watchEffect, provide, nextTick } from 'vue'
-  import { copy } from './utils/tools'
+  import { copy } from './common/common.util.ts'
   import { createValidator } from './utils/validator'
   import { KEY_VALIDATOR, KEY_PROCESS_DATA } from './config/keys'
   import { blankProcessData } from './common/data'

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

@@ -39,8 +39,8 @@
 
 <script setup name="AddNode">
   import { ref, onMounted, getCurrentInstance } from 'vue'
-  import { nodeConfig } from '../../config/nodeConfig'
-  import { copy } from '../../utils/tools'
+  import { nodeConfigData } from '../../common/data.ts'
+  import { copy } from '../../common/common.util.ts'
 
   const props = defineProps({
     node: {
@@ -57,8 +57,8 @@
   const nodeAddSelectPostion = ref(null)
   const nodeSelect = ref([])
 
-  Object.keys(nodeConfig).forEach((key) => {
-    let item = nodeConfig[key]
+  Object.keys(nodeConfigData).forEach((key) => {
+    let item = nodeConfigData[key]
     // 生成可增加节点数据
     if (item.canAdd) {
       nodeSelect.value.push({
@@ -102,7 +102,7 @@
 
   // 添加节点
   const addNode = (nodeType) => {
-    let typeConfig = nodeConfig[nodeType]
+    let typeConfig = nodeConfigData[nodeType]
     if (typeConfig) {
       let addNode = copy(typeConfig.defaultNode)
       let childNode = copy(props.node.childNode)

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

@@ -16,7 +16,7 @@
   import Button from '@/components/business/Button/Button.vue'
   import { ref, shallowRef, defineAsyncComponent } from 'vue'
   import { nodeConfigData } from '../../common/data'
-  import { copy } from '../../utils/tools'
+  import { copy } from '../../common/common.util.ts'
 
   // 节点数据的副本
   let node = ref(null)

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

@@ -1,10 +1,6 @@
 <template>
   <div :class="{ 'ep-node': true, 'ep-node-arrows': !isStart }">
-    <div
-      :class="{ 'ep-node-content': true, 'ep-node-error': isError }"
-      @mouseenter="mouseenter(true)"
-      @mouseleave="mouseleave(false)"
-    >
+    <div :class="{ 'ep-node-content': true, 'ep-node-error': isError }">
       <!-- header -->
       <div
         class="ep-node-header"
@@ -29,28 +25,6 @@
           :node="props.node"
         />
       </div>
-      <!-- 同级节点左移动 -->
-      <div class="ep-node-move ep-node-move-left" v-if="isShowLeftMoveBtn">
-        <svg-icon
-          icon-class="left"
-          class="ep-node-move-icon"
-          :color="isSelectedLeftMoveBtn ? '#1e83e9' : '#696969'"
-          @click="moveNode(1)"
-          @mouseenter="selectedMoveBtn(1, true)"
-          @mouseleave="selectedMoveBtn(1, false)"
-        />
-      </div>
-      <!-- 同级节点右移动 -->
-      <div class="ep-node-move ep-node-move-right" v-if="isShowRightMoveBtn">
-        <svg-icon
-          icon-class="right"
-          class="ep-node-move-icon"
-          :color="isSelectedRightMoveBtn ? '#1e83e9' : '#696969'"
-          @click="moveNode(2)"
-          @mouseenter="selectedMoveBtn(2, true)"
-          @mouseleave="selectedMoveBtn(2, false)"
-        />
-      </div>
       <!-- 校验错误提示 -->
       <div class="ep-node-error-msg" v-if="isError">
         <div class="ep-node-error-msg-box">
@@ -90,8 +64,8 @@
     onUnmounted,
     inject
   } from 'vue'
-  import { nodeConfig } from '../../config/nodeConfig'
-  import { getUUID } from '../../utils/tools'
+  import { nodeConfigData } from '../../common/data.ts'
+  import { getUUID } from '../../common/common.util.ts'
   import { START, CONDITION } from '../../config/nodeType'
   import { KEY_VALIDATOR } from '../../config/keys'
 
@@ -119,7 +93,7 @@
   const tempNodeId = getUUID()
 
   // 节点配置数据
-  const config = ref(nodeConfig[props.node.nodeType])
+  const config = ref(nodeConfigData[props.node.nodeType])
 
   // 获取流程验证器实例
   const validator = inject(KEY_VALIDATOR)
@@ -129,7 +103,7 @@
   watch(
     () => props.node,
     () => {
-      config.value = nodeConfig[props.node.nodeType]
+      config.value = nodeConfigData[props.node.nodeType]
       validator.validate()
     }
   )
@@ -137,19 +111,11 @@
   const modules = import.meta.glob('../*/*Node.vue')
   const nodeComponents = shallowRef({})
 
-  Object.keys(nodeConfig).forEach((key) => {
-    let item = nodeConfig[key]
-    // 加载节点组件
+  Object.keys(nodeConfigData).forEach((key) => {
     let component = defineAsyncComponent(modules[`../${key}/${key}Node.vue`])
     nodeComponents.value[key] = component
   })
 
-  // 节点左右移动按钮状态
-  const isShowLeftMoveBtn = ref(false)
-  const isSelectedLeftMoveBtn = ref(false)
-  const isShowRightMoveBtn = ref(false)
-  const isSelectedRightMoveBtn = ref(false)
-
   onMounted(async () => {})
 
   onUnmounted(async () => {
@@ -210,60 +176,6 @@
   const emit = defineEmits(['removeNode'])
   const removeNode = () => {
     emit('removeNode')
-    isShowLeftMoveBtn.value = false
-    isShowRightMoveBtn.value = false
-  }
-
-  // 鼠标移入事件
-  const mouseenter = () => {
-    showMoveBtn(1, true)
-    showMoveBtn(2, true)
-  }
-
-  // 鼠标移出事件
-  const mouseleave = () => {
-    showMoveBtn(1, false)
-    showMoveBtn(2, false)
-  }
-
-  // 节点左右移动按钮状态
-  const showMoveBtn = (direction, flag) => {
-    let index = props.conditionIndex
-    let length = props.conditionNodes.length
-    if (isCondition() && !isLastCondition()) {
-      if (direction == 1 && index != 0) {
-        isShowLeftMoveBtn.value = flag
-      } else if (direction == 2 && index != length - 2) {
-        isShowRightMoveBtn.value = flag
-      } else {
-        isShowRightMoveBtn.value = false
-      }
-    }
-  }
-
-  const selectedMoveBtn = (direction, flag) => {
-    if (direction == 1) {
-      isSelectedLeftMoveBtn.value = flag
-    } else {
-      isSelectedRightMoveBtn.value = flag
-    }
-  }
-
-  /**
-   * 移动节点
-   * @param direction 方向：1-左移 2-右移
-   */
-  const moveNode = (direction) => {
-    let index = props.conditionIndex
-    if (direction == 1) {
-      let c = props.conditionNodes[index]
-      props.conditionNodes[index] = props.conditionNodes[index - 1]
-      props.conditionNodes[index - 1] = c
-    } else {
-      let c = props.conditionNodes[index]
-      props.conditionNodes[index] = props.conditionNodes[index + 1]
-      props.conditionNodes[index + 1] = c
-    }
   }
 
   // 更新节点配置属性

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

@@ -1,14 +1,14 @@
 <template>
   <!-- 条件节点 -->
   <div class="ep-node-condition">
-    <div v-if="!props.node.isLastCondition"> 请假天数: {{ node.config.days }}天 </div>
+    <div v-if="!props.node.isLastCondition"> 请假天数: {{ node.nodeData.days }}天 </div>
     <div v-else> 其他条件进入此流程 </div>
   </div>
 </template>
 
 <script setup name="ConditionNode">
-  import { getCurrentInstance, inject } from 'vue'
-  import { KEY_PROCESS_DATA, KEY_VALIDATOR } from '../../config/keys'
+  import { inject } from 'vue'
+  import { KEY_VALIDATOR } from '../../config/keys'
 
   const props = defineProps({
     tempNodeId: {
@@ -18,14 +18,10 @@
     node: {
       // 传入的流程配置数据
       type: Object,
-      default: {}
+      default: () => {}
     }
   })
 
-  const { proxy } = getCurrentInstance()
-
-  // 获取流程数据
-  const processData = inject(KEY_PROCESS_DATA)
   // 获取流程验证器实例
   const validator = inject(KEY_VALIDATOR)
 

src/components/business/EasyProcess/node/router/routerNode.vue

@@ -36,8 +36,8 @@
   import NodeWrap from '../NodeWrap.vue'
   import AddNode from '../base/AddNode.vue'
   import { onMounted } from 'vue'
-  import { copy } from '../../utils/tools'
-  import { nodeConfig } from '../../config/nodeConfig'
+  import { copy } from '../../common/common.util.ts'
+  import { nodeConfigData } from '../../common/data.ts'
   import { CONDITION } from '../../config/nodeType'
 
   const props = defineProps({
@@ -62,7 +62,7 @@
 
   // 添加条件分支
   const addCondition = () => {
-    let defaultNode = copy(nodeConfig[CONDITION].defaultNode)
+    let defaultNode = copy(nodeConfigData[CONDITION].defaultNode)
     let length = props.node.conditionNodes.length
     props.node.conditionNodes.splice(length - 1, 0, defaultNode)
   }