仿钉钉流程设计器-修复一些问题

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

@@ -152,7 +152,7 @@ import * as DeptApi from '@/api/system/dept'
 import * as PostApi from '@/api/system/post'
 import * as UserApi from '@/api/system/user'
 import * as UserGroupApi from '@/api/bpm/userGroup'
-import { defaultProps, handleTree } from '@/utils/tree'
+import { defaultProps } from '@/utils/tree'
 defineOptions({
   name: 'CopyTaskNodeConfig'
 })
@@ -175,8 +175,8 @@ const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
 const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // 用户列表
 const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList')  // 部门列表
 const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // 用户组列表
-const deptTreeOptions = ref() // 部门树
-deptTreeOptions.value = handleTree(deptOptions?.value as DeptApi.DeptVO[], 'id')
+const deptTreeOptions = inject('deptTree') // 部门树
+
 // 抄送人策略， 去掉发起人自选
 const copyUserStrategies = computed( ()=> {
   return getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)
@@ -285,7 +285,6 @@ const getShowText = () : string => {
 }
 
 onMounted(async () => {
-
   console.log('candidateParam', currentNode.value.attributes?.candidateParam)
   candidateParamArray.value = currentNode.value.attributes?.candidateParam?.split(',').map(item=> +item)
   console.log('candidateParamArray.value', candidateParamArray.value)

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

@@ -164,7 +164,7 @@
 <script setup lang="ts">
 import { SimpleFlowNode, APPROVE_METHODS,CandidateStrategy } from '../consts'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { defaultProps, handleTree } from '@/utils/tree'
+import { defaultProps } from '@/utils/tree'
 import * as RoleApi from '@/api/system/role'
 import * as DeptApi from '@/api/system/dept'
 import * as PostApi from '@/api/system/post'
@@ -186,12 +186,12 @@ const emits = defineEmits<{
 const notAllowedMultiApprovers = ref(false)
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
 const settingVisible = ref(false)
-const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
-const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
-const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
-let   deptOptions: DeptApi.DeptVO[] = []// 部门列表
-const deptTreeOptions = ref() // 部门树
-const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
+const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') // 角色列表
+const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
+const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // 用户列表
+const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList')  // 部门列表
+const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // 用户组列表
+const deptTreeOptions = inject('deptTree') // 部门树
 const candidateParamArray = ref<any[]>([])
 
 const closeDrawer = () => {
@@ -210,7 +210,7 @@ const getShowText = () : string => {
   if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
-      userOptions.value.forEach((item) => {
+      userOptions?.value.forEach((item) => {
         if (candidateParamArray.value.includes(item.id)) {
           candidateNames.push(item.nickname)
         }
@@ -223,7 +223,7 @@ const getShowText = () : string => {
   if (currentNode.value.attributes.candidateStrategy === 10) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
-      roleOptions.value.forEach((item) => {
+      roleOptions?.value.forEach((item) => {
         if (candidateParamArray.value.includes(item.id)) {
           candidateNames.push(item.name)
         }
@@ -236,7 +236,7 @@ const getShowText = () : string => {
       || currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_LEADER ) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
-      deptOptions.forEach((item) => {
+      deptOptions?.value.forEach((item) => {
         if (candidateParamArray.value.includes(item.id)) {
           candidateNames.push(item.name)
         }
@@ -253,7 +253,7 @@ const getShowText = () : string => {
    if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.POST) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
-      postOptions.value.forEach((item) => {
+      postOptions?.value.forEach((item) => {
         if (candidateParamArray.value.includes(item.id)) {
           candidateNames.push(item.name)
         }
@@ -265,7 +265,7 @@ const getShowText = () : string => {
   if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER_GROUP) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
-      userGroupOptions.value.forEach((item) => {
+      userGroupOptions?.value.forEach((item) => {
         if (candidateParamArray.value.includes(item.id)) {
           candidateNames.push(item.name)
         }
@@ -311,15 +311,15 @@ const changedCandidateUsers = () => {
 }
 onMounted(async () => {
   // 获得角色列表
-  roleOptions.value = await RoleApi.getSimpleRoleList()
-  postOptions.value = await PostApi.getSimplePostList()
-  // 获得用户列表
-  userOptions.value = await UserApi.getSimpleUserList()
-  // 获得部门列表
-  deptOptions = await DeptApi.getSimpleDeptList()
-  deptTreeOptions.value = handleTree(deptOptions, 'id')
-  // 获得用户组列表
-  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
+  // roleOptions.value = await RoleApi.getSimpleRoleList()
+  // postOptions.value = await PostApi.getSimplePostList()
+  // // 获得用户列表
+  // userOptions.value = await UserApi.getSimpleUserList()
+  // // 获得部门列表
+  // deptOptions = await DeptApi.getSimpleDeptList()
+  // deptTreeOptions.value = handleTree(deptOptions, 'id')
+  // // 获得用户组列表
+  // userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
   console.log('candidateParam', currentNode.value.attributes?.candidateParam)
   candidateParamArray.value = currentNode.value.attributes?.candidateParam?.split(',').map(item=> +item)
   console.log('candidateParamArray.value', candidateParamArray.value)

src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue

@@ -28,7 +28,7 @@
         </div>
         <div class="node-toolbar">
           <!-- <div class="toolbar-icon"><Icon icon="ep:document-copy" @click="copyNode" /></div> -->
-          <div class="toolbar-icon"><Icon icon="ep:delete" @click="deleteNode" /></div>
+          <div class="toolbar-icon"><Icon icon="ep:circle-close" :size="18"  @click="deleteNode" /></div>
         </div>
       </div>
 
@@ -47,6 +47,7 @@
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts'
 import NodeHandler from '../NodeHandler.vue'
 import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue';
+import { generateUUID } from '@/utils'
 defineOptions({
   name: 'CopyTaskNode'
 })
@@ -88,9 +89,25 @@ const openNodeConfig = () => {
 
 // 删除节点。更新当前节点为孩子节点
 const deleteNode = () => {
-  console.log('the child node is ', currentNode.value.childNode)
   emits('update:modelValue', currentNode.value.childNode)
 }
+// 复制节点
+const copyNode = () => {
+  const newCopyNode: SimpleFlowNode = {
+    id: generateUUID(),
+    name: currentNode.value.name,
+    showText: currentNode.value.showText,
+    type: currentNode.value.type,
+    // 抄送节点配置
+    attributes: {
+      candidateStrategy: currentNode.value.attributes?.candidateStrategy,
+      candidateParam: currentNode.value.attributes?.candidateParam
+    },
+    childNode: currentNode.value
+  }
+  currentNode.value = newCopyNode
+  emits('update:modelValue', currentNode.value)
+}
 // 接收抄送人配置组件传过来的事件，并且更新节点 信息
 const handleModelValueUpdate = (updateValue) => {
   emits('update:modelValue', updateValue)

src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue

@@ -27,8 +27,8 @@
           <Icon icon="ep:arrow-right-bold" />
         </div>
         <div class="node-toolbar">
-          <div class="toolbar-icon"><Icon icon="ep:document-copy" @click="copyNode" /></div>
-          <div class="toolbar-icon"><Icon icon="ep:delete" @click="deleteNode" /></div>
+          <!-- <div class="toolbar-icon"><Icon icon="ep:document-copy" @click="copyNode" /></div> -->
+          <div class="toolbar-icon"><Icon icon="ep:circle-close"  :size="18" @click="deleteNode" /></div>
         </div>
       </div>
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->

src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss

@@ -178,15 +178,14 @@
         .node-toolbar {
           opacity: 0;
           position: absolute;
-          top: -26px;
-          right: 10px;
+          top: -5px;
+          right: -8px;
           display: flex;
 
           .toolbar-icon {
             text-align: center;
             vertical-align: middle;
-            color: #000;
-            border-radius: 4px;
+            color: #6d6c6e;
           }
         }
       }

src/views/bpm/simpleWorkflow/index.vue

@@ -5,6 +5,7 @@
 import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/';
 import { getModel } from '@/api/bpm/model'
 import { getForm, FormVO } from '@/api/bpm/form'
+import { handleTree } from '@/utils/tree'
 import * as RoleApi from '@/api/system/role'
 import * as DeptApi from '@/api/system/dept'
 import * as PostApi from '@/api/system/post'
@@ -21,6 +22,7 @@ const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
 const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
+const deptTreeOptions = ref()
 const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
 provide('formFields', formFields)
 provide('formType', formType)
@@ -29,6 +31,7 @@ provide('postList', postOptions)
 provide('userList', userOptions)
 provide('deptList', deptOptions)
 provide('userGroupList', userGroupOptions)
+provide('deptTree', deptTreeOptions)
 onMounted( async () => {
   const bpmnModel = await getModel(modelId);
   if (bpmnModel) {
@@ -45,7 +48,9 @@ onMounted( async () => {
   userOptions.value = await UserApi.getSimpleUserList()
   // 获得部门列表
   deptOptions.value = await DeptApi.getSimpleDeptList()
-  console.log('index deptOptions value is' , deptOptions.value)
+
+  deptTreeOptions.value =  handleTree(deptOptions.value as DeptApi.DeptVO[], 'id');
+
   // 用户组列表
   userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
 })