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

c9b12c8b · jason · a43bca57 · c9b12c8b · c9b12c8b · c9b12c8b
Commit c9b12c8b authored Oct 29, 2024 by jason
13 changed files
--- a/src/assets/svgs/bpm/simple-process-bg.svg
+++ b/src/assets/svgs/bpm/simple-process-bg.svg
+<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>
\ No newline at end of file
--- a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
+++ b/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'

--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
 <template>
-  <div class="simple-flow-canvas" v-loading="loading">
+  <div v-loading="loading">
-    <div class="simple-flow-container">
+    <SimpleProcessModel
-      <div class="top-area-container">
+      v-if="processNodeTree"
-        <div class="top-actions">
+      :flow-node="processNodeTree"
-          <div class="canvas-control">
+      :readonly="false"
-            <span class="control-scale-group">
+      @save="saveSimpleFlowModel"
-              <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>
    <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 () => {
+const saveSimpleFlowModel = async (simpleModelNode: SimpleFlowNode) => {
-  if (!props.modelId) {
+  if (!simpleModelNode) {
-    message.error('缺少模型 modelId 编号')
+    message.error('模型数据为空')
    return
  }
-  errorNodes = []
+  try {
-  validateNode(processNodeTree.value, errorNodes)
+    loading.value = true
-  if (errorNodes.length > 0) {
+    const data = {
-    errorDialogVisible.value = true
+      id: props.modelId,
-    return
+      simpleModel: simpleModelNode
-  }
+    }
-  const data = {
+    const result = await updateBpmSimpleModel(data)
-    id: props.modelId,
+    if (result) {
-    simpleModel: processNodeTree.value
+      message.success('修改成功')
-  }
+      emits('success')
+    } else {
-  const result = await updateBpmSimpleModel(data)
+      message.alert('修改失败')
-  if (result) {
+    }
-    message.success('修改成功')
+  } finally {
-    close()
+    loading.value = false
-  } else {
-    message.alert('修改失败')
  }
 }
 // 校验节点设置。 暂时以 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

--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
+<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>
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
 <template>
-  <div class="simple-flow-canvas" v-loading="loading">
+    <SimpleProcessModel :flow-node="simpleModel" :readonly="true"/>
-    <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 { 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)
+const simpleModel = useWatchNode(props)
-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>
--- a/src/components/SimpleProcessDesignerV2/src/index.ts
+++ b/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}
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -267,9 +267,9 @@ const remainingRouter: AppRouteRecordRaw[] = [
        }
      },
      {
-        path: 'manager/simple/workflow/model/edit',
+        path: 'manager/simple/model',
-        component: () => import('@/views/bpm/simpleWorkflow/index.vue'),
+        component: () => import('@/views/bpm/simple/SimpleModelDesign.vue'),
-        name: 'SimpleWorkflowDesignEditor',
+        name: 'SimpleModelDesign',
        meta: {
          noCache: true,
          hidden: true,

--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/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>
--- a/src/views/bpm/model/index_old.vue
+++ b/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
      }

--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
 <template>
-  <el-card v-loading="loading" class="box-card">
+  <div v-loading="loading" class="mb-20px">
-    <SimpleProcessViewer :flow-node="simpleModel" />
+      <SimpleProcessViewer :flow-node="simpleModel" :tasks="tasks"/>
-  </el-card>
+  </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({
+const tasks = ref([])
-//   simpleModel: undefined
-// }) // simple 模型数据
 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>
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/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'

--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
 <template>
-   <ContentWrap :bodyStyle="{ padding: '0px 0px' }" class="position-relative">
+  <ContentWrap :bodyStyle="{ padding: '20px 16px' }">
-      <SimpleProcessDesigner :model-id="modelId" />
+    <SimpleProcessDesigner :model-id="modelId" @success="close" />
-   </ContentWrap>
+  </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>