仿钉钉流程设计- bug 修复

Author: cooling-jason

src/components/SimpleProcessDesignerV2/src/NodeHandler.vue

@@ -47,8 +47,7 @@ import {
   NodeType,
   NODE_DEFAULT_NAME,
   ApproveMethodType,
-  RejectHandlerType,
-  CandidateStrategy
+  RejectHandlerType
 } from './consts'
 import { generateUUID } from '@/utils'
 defineOptions({
@@ -80,15 +79,13 @@ const addNode = (type: number) => {
       showText: '',
       type: NodeType.USER_TASK_NODE,
       approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
-      candidateStrategy: CandidateStrategy.USER,
       // 超时处理
       rejectHandler: {
         type: RejectHandlerType.FINISH_PROCESS
       },
       timeoutHandler: {
         enable: false
       },
-
       childNode: props.childNode
     }
     emits('update:childNode', data)
@@ -99,9 +96,6 @@ const addNode = (type: number) => {
       name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
       showText: '',
       type: NodeType.COPY_TASK_NODE,
-      candidateStrategy: CandidateStrategy.USER,
-      candidateParam: undefined,
-      fieldsPermission: undefined,
       childNode: props.childNode
     }
     emits('update:childNode', data)

src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue

@@ -3,20 +3,19 @@
   <StartEventNode
     v-if="currentNode && currentNode.type === NodeType.START_EVENT_NODE"
     :flow-node="currentNode"
-    @update:model-value="handleModelValueUpdate"
   />
   <!-- 审批节点 -->
   <UserTaskNode
     v-if="currentNode && currentNode.type === NodeType.USER_TASK_NODE"
     :flow-node="currentNode"
-    @update:model-value="handleModelValueUpdate"
+    @update:flow-node="handleModelValueUpdate"
     @find:parent-node="findFromParentNode"
   />
   <!-- 抄送节点 -->
   <CopyTaskNode
     v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE"
     :flow-node="currentNode"
-    @update:model-value="handleModelValueUpdate"
+    @update:flow-node="handleModelValueUpdate"
   />
   <!-- 条件节点 -->
   <ExclusiveNode
@@ -25,8 +24,8 @@
     @update:model-value="handleModelValueUpdate"
     @find:parent-node="findFromParentNode"
   />
-   <!-- 并行节点 -->
-   <ParallelNode
+  <!-- 并行节点 -->
+  <ParallelNode
     v-if="currentNode && currentNode.type === NodeType.PARALLEL_NODE_FORK"
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
@@ -36,7 +35,7 @@
   <ProcessNodeTree
     v-if="currentNode && currentNode.childNode"
     v-model:flow-node="currentNode.childNode"
-    :parent-node= "currentNode"
+    :parent-node="currentNode"
     @find:recursive-find-parent-node="recursiveFindParentNode"
   />
 
@@ -65,11 +64,14 @@ const props = defineProps({
   }
 })
 const emits = defineEmits<{
-  'update:flowNode',
-  'find:recursiveFindParentNode': [nodeList: SimpleFlowNode[], curentNode: SimpleFlowNode, nodeType: number]
+  'update:flowNode': [node: SimpleFlowNode | undefined]
+  'find:recursiveFindParentNode': [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number
+  ]
 }>()
 
-
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
 
 // 重要：监控节点变化. 重新绘制节点
@@ -79,16 +81,12 @@ watch(
     currentNode.value = newValue
   }
 )
-
+// 用于删除节点
 const handleModelValueUpdate = (updateValue) => {
-  console.log('Process Node Tree handleModelValueUpdate', updateValue)
   emits('update:flowNode', updateValue)
 }
 
-const findFromParentNode = (
-  nodeList: SimpleFlowNode[],
-  nodeType: number
-) => {
+const findFromParentNode = (nodeList: SimpleFlowNode[], nodeType: number) => {
   emits('find:recursiveFindParentNode', nodeList, props.parentNode, nodeType)
 }
 

src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue

@@ -15,25 +15,29 @@
         </div>
       </div>
       <div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
-        <ProcessNodeTree v-if="processNodeTree"  v-model:flow-node="processNodeTree" />
+        <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
       </div>
     </div>
     <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
       <div class="mb-2">以下节点内容不完善，请修改后保存</div>
-      <div class="mb-3 b-rounded-1 bg-gray-100 p-2 line-height-normal" v-for="(item, index) in errorNodes" :key="index">
-          {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
+      <div
+        class="mb-3 b-rounded-1 bg-gray-100 p-2 line-height-normal"
+        v-for="(item, index) in errorNodes"
+        :key="index"
+      >
+        {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
       </div>
       <template #footer>
-        <el-button type="primary" @click="errorDialogVisible = false" >知道了</el-button>
+        <el-button type="primary" @click="errorDialogVisible = false">知道了</el-button>
       </template>
     </Dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import ProcessNodeTree from './ProcessNodeTree.vue';
+import ProcessNodeTree from './ProcessNodeTree.vue'
 import { updateBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
-import { SimpleFlowNode, NodeType,NODE_DEFAULT_TEXT } from './consts'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from './consts'
 
 defineOptions({
   name: 'SimpleProcessDesigner'
@@ -44,33 +48,11 @@ const props = defineProps({
   modelId: String
 })
 const message = useMessage() // 国际化
-const processNodeTree = ref<SimpleFlowNode>({
-  name: '开始',
-  type: NodeType.START_EVENT_NODE,
-  id: 'StartEvent_1',
-  childNode: {
-    id: 'EndEvent_1',
-    name: '结束',
-    type: NodeType.END_EVENT_NODE
-  }
-})
-
-// const rootNode = ref<SimpleFlowNode>({
-//   name: '开始',
-//   type: NodeType.START_EVENT_NODE,
-//   id: 'StartEvent_1'
-// })
-
-// const childNode = ref<SimpleFlowNode>({
-//   id: 'EndEvent_1',
-//   name: '结束',
-//   type: NodeType.END_EVENT_NODE
-// })
+const processNodeTree = ref<SimpleFlowNode | undefined>()
 
 const errorDialogVisible = ref(false)
 let errorNodes: SimpleFlowNode[] = []
 const saveSimpleFlowModel = async () => {
-  console.log('processNodeTree===>', processNodeTree.value)
   if (!props.modelId) {
     message.error('缺少模型 modelId 编号')
     return
@@ -79,7 +61,7 @@ const saveSimpleFlowModel = async () => {
   validateNode(processNodeTree.value, errorNodes)
   if (errorNodes.length > 0) {
     errorDialogVisible.value = true
-    return;
+    return
   }
   const data = {
     id: props.modelId,
@@ -93,7 +75,6 @@ const saveSimpleFlowModel = async () => {
   } else {
     message.alert('修改失败')
   }
-  
 }
 // 校验节点设置。 暂时以 showText 为空 未节点错误配置
 const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
@@ -158,10 +139,19 @@ const zoomIn = () => {
 onMounted(async () => {
   const result = await getBpmSimpleModel(props.modelId)
   if (result) {
-    console.log('the result is ', result)
     processNodeTree.value = result
-    // rootNode.value = result
-    // childNode.value = result.childNode
+  } else {
+    // 初始值
+    processNodeTree.value = {
+      name: '开始',
+      type: NodeType.START_EVENT_NODE,
+      id: 'StartEvent_1',
+      childNode: {
+        id: 'EndEvent_1',
+        name: '结束',
+        type: NodeType.END_EVENT_NODE
+      }
+    }
   }
 })
 </script>

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

@@ -14,11 +14,11 @@
           class="config-editable-input"
           @blur="blurEvent()"
           v-mountedFocus
-          v-model="currentNode.name"
-          :placeholder="currentNode.name"
+          v-model="configForm.name"
+          :placeholder="configForm.name"
         />
         <div v-else class="node-name"
-          >{{ currentNode.name }}
+          >{{ configForm.name }}
           <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"
         /></div>
 
@@ -223,8 +223,15 @@ const props = defineProps({
 })
 // 是否可见
 const settingVisible = ref(false)
-// 当前节点信息
+// 当前节点
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
+// 监控节点变化
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue
+  }
+)
 const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') // 角色列表
 const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
 const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // 用户列表
@@ -247,13 +254,14 @@ const activeTabName = ref('user')
 const formRef = ref() // 表单 Ref
 
 const configForm = ref<any>({
+  name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE),
   candidateParamArray: [],
   candidateStrategy: CandidateStrategy.USER,
   fieldsPermission: []
 })
 // 表单校验规则
 const formRules = reactive({
-  candidateStrategy: [{ required: true }],
+  candidateStrategy: [{ required: true, message: '抄送人设置不能为空', trigger: 'change' }],
   candidateParamArray: [{ required: true, message: '选项不能为空', trigger: 'blur' }]
 })
 
@@ -269,6 +277,7 @@ const saveConfig = async () => {
   if (!valid) return false
   const showText = getShowText()
   if (!showText) return false
+  currentNode.value.name = configForm.value.name
   currentNode.value.candidateParam = configForm.value.candidateParamArray?.join(',')
   currentNode.value.candidateStrategy = configForm.value.candidateStrategy
   currentNode.value.showText = showText
@@ -280,11 +289,10 @@ const saveConfig = async () => {
 const open = () => {
   settingVisible.value = true
 }
-//  修改当前编辑的节点， 由父组件传过来
+// 设置抄送节点
 const setCurrentNode = (node: SimpleFlowNode) => {
-  currentNode.value = node
-  configForm.value.fieldsPermission =
-    cloneDeep(node.fieldsPermission) || getDefaultFieldsPermission(formFields?.value)
+  configForm.value.name = node.name
+  // 抄送人设置
   configForm.value.candidateStrategy = node.candidateStrategy
   const strCandidateParam = node?.candidateParam
   if (node.candidateStrategy === CandidateStrategy.EXPRESSION) {
@@ -294,6 +302,9 @@ const setCurrentNode = (node: SimpleFlowNode) => {
       configForm.value.candidateParamArray = strCandidateParam.split(',').map((item) => +item)
     }
   }
+  // 表单字段权限
+  configForm.value.fieldsPermission =
+    cloneDeep(node.fieldsPermission) || getDefaultFieldsPermission(formFields?.value)
 }
 
 defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
@@ -387,16 +398,9 @@ const clickIcon = () => {
 // 输入框失去焦点
 const blurEvent = () => {
   showInput.value = false
-  currentNode.value.name =
-    currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string)
+  configForm.value.name =
+    configForm.value.name || (NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string)
 }
 </script>
 
-<style lang="scss" scoped>
-// ::v-deep(.el-divider--horizontal) {
-//   display: block;
-//   height: 1px;
-//   margin: 0;
-//   border-top: 1px var(--el-border-color) var(--el-border-style);
-// }
-</style>
+<style lang="scss" scoped></style>