仿钉钉流程设计器-抄送节点改造.

ee895d07 · jason · 676ed6bd · ee895d07 · ee895d07 · ee895d07
Commit ee895d07 authored Apr 27, 2024 by jason
10 changed files
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -9,12 +9,12 @@
              </div>
              <div class="handler-item-text">审批人</div>
            </div>
-            <!-- <div class="handler-item" @click="addNode(NodeType.CONDITION_NODE)">
+            <div class="handler-item" @click="addNode(NodeType.COPY_TASK_NODE)">
-              <div class="handler-item-icon">
+              <div class="handler-item-icon copy">
-                <span class="iconfont icon-size icon-exclusive"></span>
+                <span class="iconfont icon-size icon-copy"></span>
              </div>
-              <div class="handler-item-text">条件分支</div>
+              <div class="handler-item-text">抄送</div>
-            </div> -->
+            </div>
          </div>
          <template #reference>
            <div class="add-icon"><Icon icon="ep:plus" /></div>
@@ -25,7 +25,7 @@
 </template>
 <script setup lang="ts">
-import { SimpleFlowNode, NodeType, NODE_DEFAULT_NAME, CandidateStrategy, APPROVE_METHODS } from './consts'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_NAME, CandidateStrategy } from './consts'
 import { generateUUID } from '@/utils'
 defineOptions({
  name: 'NodeHandler'
@@ -64,6 +64,21 @@ const addNode = (type: number) => {
    }
    emits('update:childNode', data)
  }
+  if (type === NodeType.COPY_TASK_NODE) {
+    const data: SimpleFlowNode = {
+      id:  generateUUID(),
+      name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
+      showText: '',
+      type: NodeType.COPY_TASK_NODE,
+      // 审批节点配置
+      attributes: {
+        candidateStrategy: CandidateStrategy.USER,
+        candidateParam: undefined
+      },
+      childNode: props.childNode
+    }
+    emits('update:childNode', data)
+  }
 }
 </script>

--- a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
+++ b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@@ -5,7 +5,10 @@
  <UserTaskNode 
        v-if="currentNode && currentNode.type === NodeType.USER_TASK_NODE" 
        :flow-node ="currentNode" @update:model-value="handleModelValueUpdate"/>
+  <!-- 抄送节点 -->
+  <CopyTaskNode
+        v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE" 
+        :flow-node ="currentNode" @update:model-value="handleModelValueUpdate"/>
  <!-- 递归显示孩子节点  -->
  <ProcessNodeTree v-if="currentNode && currentNode.childNode"  v-model:flow-node="currentNode.childNode"/>
@@ -16,6 +19,7 @@
 import StartEventNode from './nodes/StartEventNode.vue';
 import EndEventNode from './nodes/EndEventNode.vue';
 import UserTaskNode from './nodes/UserTaskNode.vue';
+import CopyTaskNode from './nodes/CopyTaskNode.vue';
 import { SimpleFlowNode, NodeType }  from './consts';
 defineOptions({
  name: 'ProcessNodeTree'

--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -102,6 +102,12 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
      }
      validateNode(node.childNode, errorNodes)
    }
+    if (type === NodeType.COPY_TASK_NODE) {
+      if (!showText) {
+        errorNodes.push(node)
+      }
+      validateNode(node.childNode, errorNodes)
+    }
    if (type === NodeType.CONDITION_NODE) {
      if (!showText) {
        errorNodes.push(node)

--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -15,6 +15,11 @@ export enum NodeType {
   * 审批人节点
   */
  USER_TASK_NODE = 1,
+  /**
+   * 抄送人节点
+   */
+  COPY_TASK_NODE = 2,
  /**
   * 条件节点
@@ -92,11 +97,13 @@ export type SimpleFlowNode = {
 }
 export const NODE_DEFAULT_TEXT = new Map<number,string>()
-NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置该节点')
+NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置审批人')
+NODE_DEFAULT_TEXT.set(NodeType.COPY_TASK_NODE, '请配置抄送人')
 NODE_DEFAULT_TEXT.set(NodeType.CONDITION_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, '条件')

--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -204,7 +204,7 @@ const saveConfig = () => {
  emits('update:modelValue', currentNode.value)
  settingVisible.value = false
 }
-const getShowText = (): string => {
+const getShowText = () : string => {
  let showText = ''
  // 指定成员
  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER) {
@@ -290,11 +290,11 @@ const getShowText = (): string => {
 const open = () => {
  settingVisible.value = true
 }
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+defineExpose({ open }) // 提供 open 方法，用于打开抽屉
 const changeCandidateStrategy = () => {
  candidateParamArray.value = []
  currentNode.value.attributes.approveMethod = 1
-  if (currentNode.value.attributes.candidateStrategy === 30) {
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER) {
    notAllowedMultiApprovers.value = true
  } else {
    notAllowedMultiApprovers.value = false
@@ -302,7 +302,7 @@ const changeCandidateStrategy = () => {
 }
 const changedCandidateUsers = () => {
-  if (candidateParamArray.value?.length <= 1 && currentNode.value.attributes?.candidateStrategy === 30) {
+  if (candidateParamArray.value?.length <= 1 && currentNode.value.attributes?.candidateStrategy === CandidateStrategy.USER) {
    currentNode.value.attributes.approveMethod = 1;
    notAllowedMultiApprovers.value = true
  } else {
@@ -323,7 +323,7 @@ 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)
-  if (currentNode.value.attributes?.candidateStrategy === 30 && candidateParamArray.value?.length <= 1) {
+  if (currentNode.value.attributes?.candidateStrategy === CandidateStrategy.USER && candidateParamArray.value?.length <= 1) {
    notAllowedMultiApprovers.value = true
  } else {
    notAllowedMultiApprovers.value = false

--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div class="node-box" :class="{'node-config-error': !currentNode.showText}">
+        <div class="node-title-container">
+          <div class="node-title-icon copy-task"><span class="iconfont icon-copy"></span></div>
+          <input
+            v-if="showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent($event)"
+            v-mountedFocus
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickEvent">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text"  v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.COPY_TASK_NODE) }}
+          </div>
+          <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>
+      </div>
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
+    </div>
+    <CopyTaskNodeConfig
+      v-if="currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+      @update:model-value="handleModelValueUpdate"
+     />
+  </div>
+</template>
+<script setup lang='ts'>
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts'
+import NodeHandler from '../NodeHandler.vue'
+import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue';
+defineOptions({
+  name: 'CopyTaskNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode | undefined]
+}>()
+const currentNode = ref<SimpleFlowNode>(props.flowNode)
+// 监控当前节点的变化
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue
+  }
+)
+// 显示节点名称输入框
+const showInput = ref(false)
+// 节点名称输入框失去焦点
+const blurEvent = (event) => {
+  showInput.value = false
+  currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string
+}
+// 点击节点标题进行输入
+const clickEvent = () => {
+  showInput.value = true
+}
+const nodeSetting = ref()
+// 打开节点配置
+const openNodeConfig = () => {
+  nodeSetting.value.open()
+}
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  console.log('the child node is ', currentNode.value.childNode)
+  emits('update:modelValue', currentNode.value.childNode)
+}
+// 接收抄送人配置组件传过来的事件，并且更新节点 信息
+const handleModelValueUpdate = (updateValue) => {
+  emits('update:modelValue', updateValue)
+}
+</script>
+<style lang='scss' scoped>
+</style>
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -3,13 +3,12 @@
    <div class="node-container">
      <div class="node-box" :class="{'node-config-error': !flowNode.showText}">
        <div class="node-title-container">
-          <div class="node-title-icon"><Icon icon="ep:avatar" /></div>
+          <div class="node-title-icon user-task"><span class="iconfont icon-approve"></span></div>
          <input
            v-if="showInput"
            type="text"
            class="editable-title-input"
            @blur="blurEvent($event)"
-            @focus="focusEvent($event)"
            v-mountedFocus
            v-model="currentNode.name"
            :placeholder="currentNode.name"
@@ -18,7 +17,7 @@
            {{ currentNode.name }}
          </div>
        </div>
-        <div class="node-content" @click="commonNodeConfig">
+        <div class="node-content" @click="openNodeConfig">
          <div class="node-text" :title="flowNode.showText" v-if="flowNode.showText">
            {{ flowNode.showText }}
          </div>
@@ -32,8 +31,6 @@
          <div class="toolbar-icon"><Icon icon="ep:delete" @click="deleteNode" /></div>
        </div>
      </div>
-      <!-- title="朱文宣妈妈, 许颖嘉, 王禹昊妈妈, 王亦心爸爸, 朱彧兮妈妈, 陈语馨爸爸, 蔡知妤爸爸/蔡知妍爸爸, 蒋昂倬妈妈, 胡恒智爸爸, 杨晞宇妈妈, 赵嘉依妈妈, 罗嘉懿爸爸, 郑辰希妈妈, 周慕然爸爸, 方张霖妈妈, 张若轩妈妈, 王亦心妈妈, 董子夏妈妈, 刘昱君妈妈/刘畅妈妈, 李子琦妈妈, 解宛芙妈妈, 洪栎妈妈, 陈涂晟爸爸, 张泽锴妈妈, 杨晞宇爸爸, 高鸿轩妈妈, 张然妈妈, 景晗亿妈妈, 郑炜彤妈妈, 祝安屹妈妈, 王萧婉妈妈, 朱彧兮爸爸, 李沐辰妈妈, 王元昊爸爸, 罗嘉懿妈妈, 陈语馨妈妈" -->
      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
      <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
    </div>
@@ -51,7 +48,7 @@ import NodeHandler from '../NodeHandler.vue'
 import UserTaskNodeConfig from '../nodes-config/UserTaskNodeConfig.vue';
 import { generateUUID } from '@/utils'
 defineOptions({
-  name: 'CommonNode'
+  name: 'UserTaskNode'
 })
 const props = defineProps({
  flowNode: {
@@ -62,32 +59,27 @@ const props = defineProps({
 const emits = defineEmits<{
  'update:modelValue': [node: SimpleFlowNode | undefined]
 }>()
+const currentNode = ref<SimpleFlowNode>(props.flowNode)
 const nodeSetting = ref()
-const commonNodeConfig = () => {
+// 打开节点配置
-  console.log('nodeSetting', nodeSetting)
+const openNodeConfig = () => {
  nodeSetting.value.open()
 }
-const currentNode = ref<SimpleFlowNode>(props.flowNode)
-console.log('current common node is ', currentNode)
-// 不加这个 COPY 会有问题
 watch(
  () => props.flowNode,
  (newValue) => {
-    console.log('new value is ', newValue)
    currentNode.value = newValue
  }
 )
+// 显示节点名称输入框
 const showInput = ref(false)
+// 节点名称输入框失去焦点
 const blurEvent = (event) => {
-  console.log('blurEvent', event)
  showInput.value = false
  currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string
 }
-const focusEvent = (event: FocusEvent) => {
+// 点击节点标题进行输入
-  console.log('focusEvent', event)
-}
 const clickEvent = () => {
  showInput.value = true
 }
@@ -115,7 +107,6 @@ const copyNode = () => {
    childNode: currentNode.value
  }
  currentNode.value = newCopyNode
-  console.log('current node value', currentNode.value)
  emits('update:modelValue', currentNode.value)
 }
 </script>

--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -108,6 +108,13 @@
          .node-title-icon {
            display: flex;
            align-items: center;
+            &.user-task {
+              color: #ff943e;
+            }
+            &.copy-task {
+              color: #3296fa;
+            }
          }
          .node-title {
@@ -118,7 +125,7 @@
            overflow: hidden;
            text-overflow: ellipsis;
            color: #1f1f1f;
-            // vertical-align: middle;
+            line-height: 18px;
          }
        }
@@ -458,7 +465,7 @@
   text-align: center;
   &:hover {
-    background: #3296fa;
+    background: #e2e2e2;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
   }
@@ -466,11 +473,14 @@
     font-size: 35px;
     line-height: 80px;
   }
- }
+  }
 .approve {
   color: #ff943e;
- }
+  }
+  .copy {
+    color: #3296fa;
+  }
 .handler-item-text {
   margin-top: 4px;

--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
@@ -5,6 +5,11 @@
 import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/';
 import { getModel } from '@/api/bpm/model'
 import { getForm, FormVO } from '@/api/bpm/form'
+import * as RoleApi from '@/api/system/role'
+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'
 defineOptions({
  name: 'SimpleWorkflowDesignEditor'
 })
@@ -12,8 +17,18 @@ const { query } = useRoute() // 路由的查询
 const modelId : string | undefined = query.modelId  as string;
 const formFields = ref<string[]>([])
 const formType = ref(20);
+const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
+const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
+const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
 provide('formFields', formFields)
 provide('formType', formType)
+provide('roleList', roleOptions)
+provide('postList', postOptions)
+provide('userList', userOptions)
+provide('deptList', deptOptions)
+provide('userGroupList', userGroupOptions)
 onMounted( async () => {
  const bpmnModel = await getModel(modelId);
  if (bpmnModel) {
@@ -23,6 +38,16 @@ onMounted( async () => {
      formFields.value = bpmnForm?.fields
    }
  }
+  // 获得角色列表
+  roleOptions.value = await RoleApi.getSimpleRoleList()
+  postOptions.value = await PostApi.getSimplePostList()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+  // 获得部门列表
+  deptOptions.value = await DeptApi.getSimpleDeptList()
+  console.log('index deptOptions value is' , deptOptions.value)
+  // 用户组列表
+  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
 })
 </script>
 <style lang='scss' scoped>