【功能优化】仿钉钉流程设计优化

src/assets/svgs/bpm/simple-process-bg.svg

@@ -0,0 +1 @@
+<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#FAFAFA" d="M0 0h22v22H0z"/><circle fill="#919BAE" cx="1" cy="1" r="1"/></g></svg>

src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue

@@ -47,7 +47,10 @@
   />
 
   <!-- 结束节点 -->
-  <EndEventNode v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE" :flow-node="currentNode" />
+  <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

@@ -1,23 +1,11 @@
 <template>
-  <div class="simple-flow-canvas" v-loading="loading">
-    <div class="simple-flow-container">
-      <div class="top-area-container">
-        <div class="top-actions">
-          <div class="canvas-control">
-            <span class="control-scale-group">
-              <span class="control-scale-button"> <Icon icon="ep:plus" @click="zoomOut()" /></span>
-              <span class="control-scale-label">{{ scaleValue }}%</span>
-              <span class="control-scale-button"><Icon icon="ep:minus" @click="zoomIn()" /></span>
-            </span>
-          </div>
-          <el-button type="primary" @click="saveSimpleFlowModel">保存</el-button>
-          <!-- <el-button type="primary">全局设置</el-button> -->
-        </div>
-      </div>
-      <div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
-        <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
-      </div>
-    </div>
+  <div v-loading="loading">
+    <SimpleProcessModel
+      v-if="processNodeTree"
+      :flow-node="processNodeTree"
+      :readonly="false"
+      @save="saveSimpleFlowModel"
+    />
     <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
       <div class="mb-2">以下节点内容不完善，请修改后保存</div>
       <div
@@ -35,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import ProcessNodeTree from './ProcessNodeTree.vue'
+import SimpleProcessModel from './SimpleProcessModel.vue'
 import { updateBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
 import { SimpleFlowNode, NodeType, NodeId, NODE_DEFAULT_TEXT } from './consts'
 import { getModel } from '@/api/bpm/model'
@@ -50,13 +38,15 @@ import * as UserGroupApi from '@/api/bpm/userGroup'
 defineOptions({
   name: 'SimpleProcessDesigner'
 })
-const router = useRouter() // 路由
+const emits = defineEmits(['success']) // 保存成功事件
+
 const props = defineProps({
   modelId: {
     type: String,
     required: true
   }
 })
+
 const loading = ref(false)
 const formFields = ref<string[]>([])
 const formType = ref(20)
@@ -66,7 +56,6 @@ 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)
@@ -80,28 +69,26 @@ const message = useMessage() // 国际化
 const processNodeTree = ref<SimpleFlowNode | undefined>()
 const errorDialogVisible = ref(false)
 let errorNodes: SimpleFlowNode[] = []
-const saveSimpleFlowModel = async () => {
-  if (!props.modelId) {
-    message.error('缺少模型 modelId 编号')
+const saveSimpleFlowModel = async (simpleModelNode: SimpleFlowNode) => {
+  if (!simpleModelNode) {
+    message.error('模型数据为空')
     return
   }
-  errorNodes = []
-  validateNode(processNodeTree.value, errorNodes)
-  if (errorNodes.length > 0) {
-    errorDialogVisible.value = true
-    return
-  }
-  const data = {
-    id: props.modelId,
-    simpleModel: processNodeTree.value
-  }
-
-  const result = await updateBpmSimpleModel(data)
-  if (result) {
-    message.success('修改成功')
-    close()
-  } else {
-    message.alert('修改失败')
+  try {
+    loading.value = true
+    const data = {
+      id: props.modelId,
+      simpleModel: simpleModelNode
+    }
+    const result = await updateBpmSimpleModel(data)
+    if (result) {
+      message.success('修改成功')
+      emits('success')
+    } else {
+      message.alert('修改失败')
+    }
+  } finally {
+    loading.value = false
   }
 }
 // 校验节点设置。 暂时以 showText 为空 未节点错误配置
@@ -126,12 +113,13 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
       }
       validateNode(node.childNode, errorNodes)
     }
-    
+
     if (
       type == NodeType.CONDITION_BRANCH_NODE ||
       type == NodeType.PARALLEL_BRANCH_NODE ||
       type == NodeType.INCLUSIVE_BRANCH_NODE
-    ) { // 分支节点
+    ) {
+      // 分支节点
       // 1. 先校验各个分支
       conditionNodes?.forEach((item) => {
         validateNode(item, errorNodes)
@@ -142,27 +130,6 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
   }
 }
 
-const close = () => {
-  router.push({ path: '/bpm/manager/model' })
-}
-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
@@ -188,7 +155,7 @@ onMounted(async () => {
     // 获取用户组列表
     userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
 
-    // 获取 SIMPLE 设计器模型
+    //获取 SIMPLE 设计器模型
     const result = await getBpmSimpleModel(props.modelId)
     if (result) {
       processNodeTree.value = result

src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue

@@ -0,0 +1,141 @@
+<template>
+  <div
+    class="simple-process-model-container position-relative"
+    :style="`transform: scale(${scaleValue / 100});`"
+  >
+    <div class="position-absolute top-0px right-0px bg-#fff">
+      <el-row type="flex" justify="end">
+        <el-button-group key="scale-control" size="default">
+          <el-button size="default" :icon="ScaleToOriginal" @click="processReZoom()" />
+          <el-button size="default" :plain="true" :icon="ZoomOut" @click="zoomOut()" />
+          <el-button size="default" class="w-80px"> {{ scaleValue }}% </el-button>
+          <el-button size="default" :plain="true" :icon="ZoomIn" @click="zoomIn()" />
+        </el-button-group>
+        <el-button
+          v-if="!readonly"
+          size="default"
+          class="ml-4px"
+          type="primary"
+          :icon="Select"
+          @click="saveSimpleFlowModel"
+          >保存模型</el-button
+        >
+      </el-row>
+    </div>
+    <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
+  </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>
+    <template #footer>
+      <el-button type="primary" @click="errorDialogVisible = false">知道了</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import ProcessNodeTree from './ProcessNodeTree.vue'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from './consts'
+import { useWatchNode } from './node'
+import { Select, ZoomOut, ZoomIn, ScaleToOriginal } from '@element-plus/icons-vue'
+defineOptions({
+  name: 'SimpleProcessModel'
+})
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  },
+  readonly: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+})
+const emits = defineEmits<{
+  'save': [node: SimpleFlowNode | undefined]
+}>()
+
+const processNodeTree = useWatchNode(props)
+
+provide('readonly', props.readonly)
+let scaleValue = ref(100)
+const MAX_SCALE_VALUE = 200
+const MIN_SCALE_VALUE = 50
+// 放大
+const zoomIn = () => {
+  if (scaleValue.value == MAX_SCALE_VALUE) {
+    return
+  }
+  scaleValue.value += 10
+}
+// 缩小
+const zoomOut = () => {
+  if (scaleValue.value == MIN_SCALE_VALUE) {
+    return
+  }
+  scaleValue.value -= 10
+}
+const processReZoom = () => {
+  scaleValue.value = 100
+}
+
+const errorDialogVisible = ref(false)
+let errorNodes: SimpleFlowNode[] = []
+const saveSimpleFlowModel = async () => {
+  errorNodes = []
+  validateNode(processNodeTree.value, errorNodes)
+  if (errorNodes.length > 0) {
+    errorDialogVisible.value = true
+    return
+  }
+  emits('save', processNodeTree.value)
+}
+// 校验节点设置。 暂时以 showText 为空 未节点错误配置
+const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
+  if (node) {
+    const { type, showText, conditionNodes } = node
+    if (type == NodeType.END_EVENT_NODE) {
+      return
+    }
+    if (type == NodeType.START_USER_NODE) {
+      // 发起人节点暂时不用校验，直接校验孩子节点
+      validateNode(node.childNode, errorNodes)
+    }
+
+    if (
+      type === NodeType.USER_TASK_NODE ||
+      type === NodeType.COPY_TASK_NODE ||
+      type === NodeType.CONDITION_NODE
+    ) {
+      if (!showText) {
+        errorNodes.push(node)
+      }
+      validateNode(node.childNode, errorNodes)
+    }
+
+    if (
+      type == NodeType.CONDITION_BRANCH_NODE ||
+      type == NodeType.PARALLEL_BRANCH_NODE ||
+      type == NodeType.INCLUSIVE_BRANCH_NODE
+    ) {
+      // 分支节点
+      // 1. 先校验各个分支
+      conditionNodes?.forEach((item) => {
+        validateNode(item, errorNodes)
+      })
+      // 2. 校验孩子节点
+      validateNode(node.childNode, errorNodes)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue

@@ -1,63 +1,25 @@
 <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>
+    <SimpleProcessModel :flow-node="simpleModel" :readonly="true"/>
 </template>
 
 <script setup lang="ts">
-import ProcessNodeTree from './ProcessNodeTree.vue'
+import { useWatchNode } from './node'
 import { SimpleFlowNode } from './consts'
 
 defineOptions({
-  name: 'SimpleProcessRender'
+  name: 'SimpleProcessViewer'
 })
 
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
     required: true
+  },
+  // 流程任务
+  tasks : {
+    type : Array,
+    default: () => [] as any[]
   }
 })
-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
-//   }
-// })
+const simpleModel = useWatchNode(props)
 </script>

src/components/SimpleProcessDesignerV2/src/index.ts

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

src/router/modules/remaining.ts

@@ -267,9 +267,9 @@ const remainingRouter: AppRouteRecordRaw[] = [
         }
       },
       {
-        path: 'manager/simple/workflow/model/edit',
-        component: () => import('@/views/bpm/simpleWorkflow/index.vue'),
-        name: 'SimpleWorkflowDesignEditor',
+        path: 'manager/simple/model',
+        component: () => import('@/views/bpm/simple/SimpleModelDesign.vue'),
+        name: 'SimpleModelDesign',
         meta: {
           noCache: true,
           hidden: true,

src/views/bpm/model/CategoryDraggableModel.vue

@@ -342,7 +342,7 @@ const handleDesign = (row: any) => {
     })
   } else {
     push({
-      name: 'SimpleWorkflowDesignEditor',
+      name: 'SimpleModelDesign',
       query: {
         modelId: row.id
       }
@@ -492,9 +492,11 @@ watch(
 <style lang="scss">
 .rename-dialog.el-dialog {
   padding: 0 !important;
+
   .el-dialog__header {
     border-bottom: none;
   }
+
   .el-dialog__footer {
     border-top: none !important;
   }
@@ -503,8 +505,8 @@ watch(
 <style lang="scss" scoped>
 :deep() {
   .el-table__cell {
-    border-bottom: none !important;
     overflow: hidden;
+    border-bottom: none !important;
   }
 }
 </style>

src/views/bpm/model/index_old.vue

@@ -338,7 +338,7 @@ const handleDesign = (row: any) => {
     })
   } else {
     push({
-      name: 'SimpleWorkflowDesignEditor',
+      name: 'SimpleModelDesign',
       query: {
         modelId: row.id
       }

src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue

@@ -1,12 +1,11 @@
 <template>
-  <el-card v-loading="loading" class="box-card">
-    <SimpleProcessViewer :flow-node="simpleModel" />
-  </el-card>
+  <div v-loading="loading" class="mb-20px">
+      <SimpleProcessViewer :flow-node="simpleModel" :tasks="tasks"/>
+  </div>
 </template>
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { TaskStatusEnum } from '@/api/bpm/task'
-import { BpmProcessInstanceStatus } from '@/utils/constants'
 import { SimpleFlowNode, NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
 import { SimpleProcessViewer } from '@/components/SimpleProcessDesignerV2/src/'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
@@ -18,10 +17,7 @@ const props = defineProps({
   id: propTypes.string // 流程实例的编号
 })
 
-// const view = ref({
-//   simpleModel: undefined
-// }) // simple 模型数据
-
+const tasks = ref([])
 const simpleModel = ref()
 
 /** 只有 loading 完成时，才去加载流程列表 */
@@ -31,6 +27,7 @@ watch(
     if (value && props.id) {
       const modelView = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
       if (modelView) {
+        tasks.value = modelView.tasks;
         // 已经拒绝的活动节点编号集合，只包括 UserTask
         const rejectedTaskActivityIds: string[] = modelView.rejectedTaskActivityIds
         // 进行中的活动节点编号集合， 只包括 UserTask
@@ -47,7 +44,7 @@ watch(
           finishedActivityIds,
           finishedSequenceFlowActivityIds
         )
-        console.log("modelView.simpleModel==>", modelView.simpleModel)
+        console.log('modelView.simpleModel==>', modelView.simpleModel)
         simpleModel.value = modelView.simpleModel
       }
     }
@@ -60,8 +57,7 @@ const setSimpleModelNodeTaskStatus = (
   rejectedTaskActivityIds: string[],
   unfinishedTaskActivityIds: string[],
   finishedActivityIds: string[],
-  finishedSequenceFlowActivityIds: string[],
-  
+  finishedSequenceFlowActivityIds: string[]
 ) => {
   if (!simpleModel) {
     return
@@ -75,7 +71,7 @@ const setSimpleModelNodeTaskStatus = (
     }
     return
   }
-  
+
   // 审批节点
   if (
     simpleModel.type === NodeType.START_USER_NODE ||
@@ -84,7 +80,7 @@ const setSimpleModelNodeTaskStatus = (
     simpleModel.activityStatus = TaskStatusEnum.NOT_START
     if (rejectedTaskActivityIds.includes(simpleModel.id)) {
       simpleModel.activityStatus = TaskStatusEnum.REJECT
-    } else if(unfinishedTaskActivityIds.includes(simpleModel.id)) {
+    } else if (unfinishedTaskActivityIds.includes(simpleModel.id)) {
       simpleModel.activityStatus = TaskStatusEnum.RUNNING
     } else if (finishedActivityIds.includes(simpleModel.id)) {
       simpleModel.activityStatus = TaskStatusEnum.APPROVE
@@ -152,9 +148,3 @@ const setSimpleModelNodeTaskStatus = (
 //   }
 // )
 </script>
-<style>
-.box-card {
-  width: 100%;
-  margin-bottom: 20px;
-}
-</style>

src/views/bpm/processInstance/detail/index.vue

@@ -75,11 +75,14 @@
           <!-- 流程图 -->
           <el-tab-pane label="流程图" name="diagram">
             <div class="form-scroll-area">
-              <ProcessInstanceBpmnViewer
+              <ProcessInstanceSimpleViewer
+                v-show="processDefinition.modelType && processDefinition.modelType === BpmModelType.SIMPLE"
                 :id="`${id}`"
                 :loading="processInstanceLoading"
-                :show-header="false"
               />
+              <ProcessInstanceBpmnViewer
+                v-show="processDefinition.modelType && processDefinition.modelType === BpmModelType.BPMN"
+                :id="`${id}`" :loading="processInstanceLoading" />
             </div>
           </el-tab-pane>
 
@@ -122,11 +125,13 @@
 <script lang="ts" setup>
 import { formatDate } from '@/utils/formatTime'
 import { DICT_TYPE } from '@/utils/dict'
+import { BpmModelType } from '@/utils/constants'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as TaskApi from '@/api/bpm/task'
 import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
+import ProcessInstanceSimpleViewer from './ProcessInstanceSimpleViewer.vue'
 import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
 import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
 import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'

src/views/bpm/simple/SimpleModelDesign.vue

@@ -1,16 +1,19 @@
 <template>
-   <ContentWrap :bodyStyle="{ padding: '0px 0px' }" class="position-relative">
-      <SimpleProcessDesigner :model-id="modelId" />
-   </ContentWrap>
- 
+  <ContentWrap :bodyStyle="{ padding: '20px 16px' }">
+    <SimpleProcessDesigner :model-id="modelId" @success="close" />
+  </ContentWrap>
 </template>
 <script setup lang="ts">
 import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/'
 
 defineOptions({
-  name: 'SimpleWorkflowDesignEditor'
+  name: 'SimpleModelDesign'
 })
+const router = useRouter() // 路由
 const { query } = useRoute() // 路由的查询
 const modelId = query.modelId as string
+const close = () => {
+  router.push({ path: '/bpm/manager/model' })
+}
 </script>
 <style lang="scss" scoped></style>