仿钉钉流程设计器- 新增发起人节点，去掉开始节点

Author: cooling-jason

src/components/SimpleProcessDesignerV2/src/NodeHandler.vue

@@ -20,13 +20,13 @@
             </div>
             <div class="handler-item-text">抄送</div>
           </div>
-          <div class="handler-item" @click="addNode(NodeType.EXCLUSIVE_NODE)">
+          <div class="handler-item" @click="addNode(NodeType.CONDITION_BRANCH_NODE)">
             <div class="handler-item-icon condition">
               <span class="iconfont icon-size icon-exclusive"></span>
             </div>
             <div class="handler-item-text">条件分支</div>
           </div>
-          <div class="handler-item" @click="addNode(NodeType.PARALLEL_NODE_FORK)">
+          <div class="handler-item" @click="addNode(NodeType.PARALLEL_BRANCH_NODE)">
             <div class="handler-item-icon condition">
               <span class="iconfont icon-size icon-parallel"></span>
             </div>
@@ -107,10 +107,10 @@ const addNode = (type: number) => {
     }
     emits('update:childNode', data)
   }
-  if (type === NodeType.EXCLUSIVE_NODE) {
+  if (type === NodeType.CONDITION_BRANCH_NODE) {
     const data: SimpleFlowNode = {
       name: '条件分支',
-      type: NodeType.EXCLUSIVE_NODE,
+      type: NodeType.CONDITION_BRANCH_NODE,
       id: 'GateWay_' + generateUUID(),
       childNode: props.childNode,
       conditionNodes: [
@@ -140,10 +140,10 @@ const addNode = (type: number) => {
     }
     emits('update:childNode', data)
   }
-  if (type === NodeType.PARALLEL_NODE_FORK) {
+  if (type === NodeType.PARALLEL_BRANCH_NODE) {
     const data: SimpleFlowNode = {
       name: '并行分支',
-      type: NodeType.PARALLEL_NODE_FORK,
+      type: NodeType.PARALLEL_BRANCH_NODE,
       id: 'GateWay_' + generateUUID(),
       childNode: props.childNode,
       conditionNodes: [

src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue

@@ -1,7 +1,7 @@
 <template>
-  <!-- 开始节点 -->
-  <StartEventNode
-    v-if="currentNode && currentNode.type === NodeType.START_EVENT_NODE"
+  <!-- 发起人节点 -->
+  <StartUserNode
+    v-if="currentNode && currentNode.type === NodeType.START_USER_NODE"
     :flow-node="currentNode"
   />
   <!-- 审批节点 -->
@@ -19,14 +19,14 @@
   />
   <!-- 条件节点 -->
   <ExclusiveNode
-    v-if="currentNode && currentNode.type === NodeType.EXCLUSIVE_NODE"
+    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_NODE_FORK"
+    v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
     @find:parent-node="findFromParentNode"
@@ -43,7 +43,7 @@
   <EndEventNode v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE" />
 </template>
 <script setup lang="ts">
-import StartEventNode from './nodes/StartEventNode.vue'
+import StartUserNode from './nodes/StartUserNode.vue'
 import EndEventNode from './nodes/EndEventNode.vue'
 import UserTaskNode from './nodes/UserTaskNode.vue'
 import CopyTaskNode from './nodes/CopyTaskNode.vue'
@@ -90,7 +90,11 @@ const recursiveFindParentNode = (
   findNode: SimpleFlowNode,
   nodeType: number
 ) => {
-  if (!findNode || findNode.type === NodeType.START_EVENT_NODE) {
+  if (!findNode) {
+    return
+  }
+  if (findNode.type === NodeType.START_USER_NODE) {
+    nodeList.push(findNode)
     return
   }
 

src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue

@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import ProcessNodeTree from './ProcessNodeTree.vue'
 import { updateBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
-import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from './consts'
+import { SimpleFlowNode, NodeType, NodeId, NODE_DEFAULT_TEXT } from './consts'
 
 defineOptions({
   name: 'SimpleProcessDesigner'
@@ -83,7 +83,7 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
     if (type == NodeType.END_EVENT_NODE) {
       return
     }
-    if (type == NodeType.START_EVENT_NODE) {
+    if (type == NodeType.START_USER_NODE) {
       validateNode(node.childNode, errorNodes)
     }
 
@@ -106,7 +106,7 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
       validateNode(node.childNode, errorNodes)
     }
 
-    if (type == NodeType.EXCLUSIVE_NODE) {
+    if (type == NodeType.CONDITION_BRANCH_NODE) {
       conditionNodes?.forEach((item) => {
         validateNode(item, errorNodes)
       })
@@ -138,17 +138,16 @@ const zoomIn = () => {
 
 onMounted(async () => {
   const result = await getBpmSimpleModel(props.modelId)
-  console.log('the result is :', result)
   if (result) {
     processNodeTree.value = result
   } else {
     // 初始值
     processNodeTree.value = {
-      name: '开始',
-      type: NodeType.START_EVENT_NODE,
-      id: 'StartEvent', 
+      name: '发起人',
+      type: NodeType.START_USER_NODE,
+      id: NodeId.START_USER_NODE_ID,
       childNode: {
-        id: 'EndEvent',
+        id: NodeId.END_EVENT_NODE_ID,
         name: '结束',
         type: NodeType.END_EVENT_NODE
       }

src/components/SimpleProcessDesignerV2/src/consts.ts

@@ -6,49 +6,54 @@ import { DictDataVO } from '@/api/system/dict/types'
  */
 export enum NodeType {
   /**
-   * 发起人节点
+   * 结束节点
    */
-  START_EVENT_NODE = 0,
+  END_EVENT_NODE = 1,
   /**
-   * 结束节点
+   * 发起人节点
    */
-  END_EVENT_NODE = -2,
-
+  START_USER_NODE = 10,
   /**
    * 审批人节点
    */
-  USER_TASK_NODE = 1,
+  USER_TASK_NODE = 11,
 
   /**
    * 抄送人节点
    */
-  COPY_TASK_NODE = 2,
+  COPY_TASK_NODE = 12,
 
   /**
    * 条件节点
    */
-  CONDITION_NODE = 3,
+  CONDITION_NODE = 50,
   /**
-   * 条件分支节点
+   * 条件分支节点 (对应排他网关)
    */
-  EXCLUSIVE_NODE = 4,
+  CONDITION_BRANCH_NODE = 51,
   /**
-   * 并行分支分叉节点
+   * 并行分支节点 (对应并行网关)
    */
-  PARALLEL_NODE_FORK = 5,
+  PARALLEL_BRANCH_NODE = 52,
+
   /**
-   * 并行分支聚合
+   * 包容分支节点 (对应包容网关)
    */
-  PARALLEL_NODE_JOIN = 6,
+  INCLUSIVE_BRANCH_NODE = 53
+}
+
+export enum NodeId {
   /**
-   * 包容分支分叉节点
+   * 发起人节点 Id
    */
-  INCLUSIVE_NODE_FORK = 7,
+  START_USER_NODE_ID = 'StartUserNode',
+
   /**
-   * 包容分支聚合节点
+   * 发起人节点 Id
    */
-  INCLUSIVE_NODE_JOIN = 8
+  END_EVENT_NODE_ID = 'EndEvent'
 }
+
 /**
  *  节点结构定义
  */
@@ -298,7 +303,23 @@ export enum ConditionConfigType {
    */
   RULE = 2
 }
-
+/**
+ * 表单权限的枚举
+ */
+export enum FieldPermissionType {
+  /**
+   * 只读
+   */
+  READ = '1',
+  /**
+   * 编辑
+   */
+  WRITE = '2',
+  /**
+   * 隐藏
+   */
+  NONE = '3'
+}
 /**
  * 操作按钮权限结构定义
  */
@@ -335,6 +356,7 @@ export enum OperationButtonType {
    */
   RETURN = 6
 }
+
 /**
  * 条件规则结构定义
  */
@@ -369,11 +391,13 @@ export const NODE_DEFAULT_TEXT = new Map<number, string>()
 NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置审批人')
 NODE_DEFAULT_TEXT.set(NodeType.COPY_TASK_NODE, '请配置抄送人')
 NODE_DEFAULT_TEXT.set(NodeType.CONDITION_NODE, '请设置条件')
+NODE_DEFAULT_TEXT.set(NodeType.START_USER_NODE, '请设置发起人')
 
 export const NODE_DEFAULT_NAME = new Map<number, string>()
 NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人')
 NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人')
 NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
+NODE_DEFAULT_NAME.set(NodeType.START_USER_NODE, '发起人')
 
 // 候选人策略。暂时不从字典中取。 后续可能调整。控制显示顺序
 export const CANDIDATE_STRATEGY: DictDataVO[] = [
@@ -483,6 +507,16 @@ export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
   { id: OperationButtonType.RETURN, displayName: '回退', enable: false }
 ]
 
+// 发起人的按钮权限。暂时定死，不可以编辑
+export const START_USER_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OperationButtonType.APPROVE, displayName: '提交', enable: true },
+  { id: OperationButtonType.REJECT, displayName: '拒绝', enable: false },
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: false },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: false },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: false },
+  { id: OperationButtonType.RETURN, displayName: '回退', enable: false }
+]
+
 export const MULTI_LEVEL_DEPT: DictDataVO = [
   { label: '第 1 级部门', value: 1 },
   { label: '第 2 级部门', value: 2 },

src/components/SimpleProcessDesignerV2/src/node.ts

@@ -12,7 +12,8 @@ import {
   RejectHandlerType,
   NODE_DEFAULT_NAME,
   AssignStartUserHandlerType,
-  AssignEmptyHandlerType
+  AssignEmptyHandlerType,
+  FieldPermissionType
 } from './consts'
 export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlowNode> {
   const node = ref<SimpleFlowNode>(props.flowNode)
@@ -26,9 +27,9 @@ export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlo
 }
 
 /**
- * @description 表单数据权限配置，用于审批节点、抄送节点
+ * @description 表单数据权限配置，用于发起人节点 、审批节点、抄送节点
  */
-export function useFormFieldsPermission() {
+export function useFormFieldsPermission(defaultPermission: FieldPermissionType) {
   // 字段权限配置. 需要有 field, title,  permissioin 属性
   const fieldsPermissionConfig = ref<Array<Record<string, string>>>([])
 
@@ -66,7 +67,7 @@ export function useFormFieldsPermission() {
       fieldsPermission.push({
         field,
         title,
-        permission: '1' // 只读
+        permission: defaultPermission
       })
       // TODO 子表单 需要处理子表单字段
       // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
@@ -139,7 +140,6 @@ export function useNodeForm(nodeType: NodeType) {
   const configForm = ref<UserTaskFormType | CopyTaskFormType>()
   if (nodeType === NodeType.USER_TASK_NODE) {
     configForm.value = {
-      //candidateParamArray: [],
       candidateStrategy: CandidateStrategy.USER,
       approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
       approveRatio: 100,
@@ -154,7 +154,6 @@ export function useNodeForm(nodeType: NodeType) {
     }
   } else {
     configForm.value = {
-      //candidateParamArray: [],
       candidateStrategy: CandidateStrategy.USER
     }
   }

src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue

@@ -157,13 +157,29 @@
             <div class="field-setting-item-label"> {{ item.title }} </div>
             <el-radio-group class="field-setting-item-group" v-model="item.permission">
               <div class="item-radio-wrap">
-                <el-radio value="1" size="large" label="1"><span></span></el-radio>
+                <el-radio
+                  :value="FieldPermissionType.READ"
+                  size="large"
+                  :label="FieldPermissionType.WRITE"
+                  ><span></span
+                ></el-radio>
               </div>
               <div class="item-radio-wrap">
-                <el-radio value="2" size="large" label="2" disabled><span></span></el-radio>
+                <el-radio
+                  :value="FieldPermissionType.WRITE"
+                  size="large"
+                  :label="FieldPermissionType.WRITE"
+                  disabled
+                  ><span></span
+                ></el-radio>
               </div>
               <div class="item-radio-wrap">
-                <el-radio value="3" size="large" label="3"><span></span></el-radio>
+                <el-radio
+                  :value="FieldPermissionType.NONE"
+                  size="large"
+                  :label="FieldPermissionType.NONE"
+                  ><span></span
+                ></el-radio>
               </div>
             </el-radio-group>
           </div>
@@ -180,7 +196,13 @@
   </el-drawer>
 </template>
 <script setup lang="ts">
-import { SimpleFlowNode, CandidateStrategy, NodeType, CANDIDATE_STRATEGY } from '../consts'
+import {
+  SimpleFlowNode,
+  CandidateStrategy,
+  NodeType,
+  CANDIDATE_STRATEGY,
+  FieldPermissionType
+} from '../consts'
 import {
   useWatchNode,
   useDrawer,
@@ -208,7 +230,9 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.COPY_
 // 激活的 Tab 标签页
 const activeTabName = ref('user')
 // 表单字段权限配置
-const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission()
+const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission(
+  FieldPermissionType.READ
+)
 // 抄送人表单配置
 const formRef = ref() // 表单 Ref
 // 表单校验规则