【功能新增】 仿钉钉流程模型增加浏览模式

Author: cooling-jason

src/components/SimpleProcessDesignerV2/src/NodeHandler.vue

@@ -6,6 +6,7 @@
         v-model:visible="popoverShow"
         placement="right-start"
         width="auto"
+        v-if="!readonly"
       >
         <div class="handler-item-wrapper">
           <div class="handler-item" @click="addNode(NodeType.USER_TASK_NODE)">
@@ -78,6 +79,8 @@ const props = defineProps({
 
 const emits = defineEmits(['update:childNode'])
 
+const readonly = inject<Boolean>('readonly') // 是否只读
+
 const addNode = (type: number) => {
   popoverShow.value = false
   if (type === NodeType.USER_TASK_NODE) {

src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue

@@ -47,7 +47,7 @@
   />
 
   <!-- 结束节点 -->
-  <EndEventNode v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE" />
+  <EndEventNode v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE" :flow-node="currentNode" />
 </template>
 <script setup lang="ts">
 import StartUserNode from './nodes/StartUserNode.vue'

src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue

@@ -57,7 +57,7 @@ const props = defineProps({
     required: true
   }
 })
-const loading = ref(true)
+const loading = ref(false)
 const formFields = ref<string[]>([])
 const formType = ref(20)
 const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
@@ -66,6 +66,7 @@ const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
 const deptTreeOptions = ref()
 const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
+provide('readonly', false)
 provide('formFields', formFields)
 provide('formType', formType)
 provide('roleList', roleOptions)

src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="simple-flow-canvas" v-loading="loading">
+    <div  class="simple-flow-container">
+      <div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
+        <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProcessNodeTree from './ProcessNodeTree.vue'
+import { SimpleFlowNode } from './consts'
+
+defineOptions({
+  name: 'SimpleProcessRender'
+})
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+const loading = ref(false)
+
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    processNodeTree.value = newValue
+  }
+)
+const processNodeTree = ref<SimpleFlowNode | undefined>(props.flowNode)
+provide('readonly', true)
+let scaleValue = ref(100)
+const MAX_SCALE_VALUE = 200
+const MIN_SCALE_VALUE = 50
+// 放大
+const zoomOut = () => {
+  if (scaleValue.value == MAX_SCALE_VALUE) {
+    return
+  }
+  scaleValue.value += 10
+}
+// 缩小
+const zoomIn = () => {
+  if (scaleValue.value == MIN_SCALE_VALUE) {
+    return
+  }
+  scaleValue.value -= 10
+}
+
+// onMounted(async () => {
+//   try {
+//     loading.value = true
+//     if (props.view) {
+//       processNodeTree.value = props.view.simpleModel
+//     }
+//   } finally {
+//     loading.value = false
+//   }
+// })
+</script>

src/components/SimpleProcessDesignerV2/src/consts.ts

@@ -1,6 +1,6 @@
 // @ts-ignore
 import { DictDataVO } from '@/api/system/dict/types'
-
+import { TaskStatusEnum } from '@/api/bpm/task'
 /**
  * 节点类型
  */
@@ -96,6 +96,8 @@ export interface SimpleFlowNode {
   conditionGroups?: ConditionGroup
   // 是否默认的条件
   defaultFlow?: boolean
+  // 活动的状态，用于前端节点状态展示
+  activityStatus? : TaskStatusEnum
 }
 // 候选人策略枚举 （ 用于审批节点。抄送节点 )
 export enum CandidateStrategy {

src/components/SimpleProcessDesignerV2/src/index.ts

@@ -1,4 +1,5 @@
 import SimpleProcessDesigner from './SimpleProcessDesigner.vue'
+import SimpleProcessViewer from './SimpleProcessViewer.vue'
 import '../theme/simple-process-designer.scss'
 
-export { SimpleProcessDesigner }
+export { SimpleProcessDesigner, SimpleProcessViewer }

src/components/SimpleProcessDesignerV2/src/node.ts

@@ -1,4 +1,5 @@
 import { cloneDeep } from 'lodash-es'
+import { TaskStatusEnum } from '@/api/bpm/task'
 import * as RoleApi from '@/api/system/role'
 import * as DeptApi from '@/api/system/dept'
 import * as PostApi from '@/api/system/post'
@@ -476,3 +477,26 @@ export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
     blurEvent
   }
 }
+
+/**
+ * @description 根据节点任务状态，获取节点任务状态样式
+ */
+export function  useTaskStatusClass(taskStatus: TaskStatusEnum | undefined) : string {
+  if (!taskStatus) {
+    return ''
+  }
+  if (taskStatus === TaskStatusEnum.APPROVE ) {
+    return 'status-pass'
+  }
+  if (taskStatus === TaskStatusEnum.RUNNING ) {
+    return 'status-running'
+  }
+  if (taskStatus === TaskStatusEnum.REJECT ) {
+    return 'status-reject'
+  }
+  if (taskStatus === TaskStatusEnum.CANCEL ) {
+    return 'status-cancel'
+  }
+   
+  return '';
+}

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

@@ -5,7 +5,7 @@
         <div class="node-title-container">
           <div class="node-title-icon copy-task"><span class="iconfont icon-copy"></span></div>
           <input
-            v-if="showInput"
+            v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
             @blur="blurEvent()"
@@ -24,9 +24,9 @@
           <div class="node-text" v-else>
             {{ NODE_DEFAULT_TEXT.get(NodeType.COPY_TASK_NODE) }}
           </div>
-          <Icon icon="ep:arrow-right-bold" />
+          <Icon v-if="!readonly" icon="ep:arrow-right-bold" />
         </div>
-        <div class="node-toolbar">
+        <div v-if="!readonly" class="node-toolbar">
           <div class="toolbar-icon"
             ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
           /></div>
@@ -36,7 +36,7 @@
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
       <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
     </div>
-    <CopyTaskNodeConfig v-if="currentNode" ref="nodeSetting" :flow-node="currentNode" />
+    <CopyTaskNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
   </div>
 </template>
 <script setup lang="ts">
@@ -57,7 +57,8 @@ const props = defineProps({
 const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined]
 }>()
-
+// 是否只读
+const readonly = inject<Boolean>('readonly') 
 // 监控节点的变化
 const currentNode = useWatchNode(props)
 // 节点名称编辑
@@ -66,6 +67,9 @@ const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.
 const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {
+  if (readonly) {
+    return
+  }
   nodeSetting.value.showCopyTaskNodeConfig(currentNode.value)
   nodeSetting.value.openDrawer()
 }

src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue

@@ -1,13 +1,27 @@
 <template>
   <div class="end-node-wrapper">
-    <div class="end-node-box">
+    <div class="end-node-box" :class="taskStatusClass">
       <span class="node-fixed-name" title="结束">结束</span>
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import { SimpleFlowNode } from '../consts'
+import { useWatchNode, useTaskStatusClass } from '../node'
+
 defineOptions({
   name: 'EndEventNode'
 })
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null
+  }
+})
+// 监控节点变化
+const currentNode = useWatchNode(props)
+// 节点任务状态样式
+const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
+
 </script>
 <style lang="scss" scoped></style>

src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
-      <el-button class="branch-node-add" color="#67c23a" @click="addCondition"  plain>添加条件</el-button>
+      <div v-if="readonly" class="branch-node-readonly" :class="taskStatusClass">
+        <span class="iconfont icon-exclusive icon-size"></span>
+      </div>
+      <el-button v-else class="branch-node-add" color="#67c23a" @click="addCondition" plain
+        >添加条件</el-button
+      >
+
       <div
         class="branch-node-item"
         v-for="(item, index) in currentNode.conditionNodes"
@@ -17,9 +23,9 @@
         </template>
         <div class="node-wrapper">
           <div class="node-container">
-            <div class="node-box" :class="{ 'node-config-error': !item.showText }">
+            <div class="node-box" :class="[{ 'node-config-error': !item.showText }, `${useTaskStatusClass(item.activityStatus)}`]">
               <div class="branch-node-title-container">
-                <div v-if="showInputs[index]">
+                <div v-if="!readonly && showInputs[index]">
                   <input
                     type="text"
                     class="input-max-width editable-title-input"
@@ -39,7 +45,10 @@
                   {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
                 </div>
               </div>
-              <div class="node-toolbar" v-if="index + 1 !== currentNode.conditionNodes?.length">
+              <div
+                class="node-toolbar"
+                v-if="!readonly && index + 1 !== currentNode.conditionNodes?.length"
+              >
                 <div class="toolbar-icon">
                   <Icon
                     color="#0089ff"
@@ -87,6 +96,7 @@ import NodeHandler from '../NodeHandler.vue'
 import ProcessNodeTree from '../ProcessNodeTree.vue'
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
 import { getDefaultConditionNodeName } from '../utils'
+import { useTaskStatusClass } from '../node'
 import { generateUUID } from '@/utils'
 import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue'
 const { proxy } = getCurrentInstance() as any
@@ -109,9 +119,11 @@ const emits = defineEmits<{
     nodeType: number
   ]
 }>()
-
+// 是否只读
+const readonly = inject<Boolean>('readonly') 
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
-// const conditionNodes = computed(() => currentNode.value.conditionNodes);
+// 节点状态样式
+const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
 
 watch(
   () => props.flowNode,
@@ -135,6 +147,9 @@ const clickEvent = (index: number) => {
 }
 
 const conditionNodeConfig = (nodeId: string) => {
+  if (readonly) {
+    return
+  }
   const conditionNode = proxy.$refs[nodeId][0]
   conditionNode.open()
 }