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

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>