From c9b12c8b39743bb7980122a1f5a4cad0e6657830 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 29 Oct 2024 10:52:46 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E3=80=91=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81=E7=A8=8B=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/bpm/simple-process-bg.svg     |    1 +
 .../src/ProcessNodeTree.vue                   |    5 +-
 .../src/SimpleProcessDesigner.vue             |   99 +-
 .../src/SimpleProcessModel.vue                |  141 ++
 .../src/SimpleProcessViewer.vue               |   56 +-
 .../SimpleProcessDesignerV2/src/index.ts      |    2 +-
 .../theme/simple-process-designer.scss        | 1559 +++++++++++------
 src/router/modules/remaining.ts               |    6 +-
 .../bpm/model/CategoryDraggableModel.vue      |    6 +-
 src/views/bpm/model/index_old.vue             |    2 +-
 .../detail/ProcessInstanceSimpleViewer.vue    |   28 +-
 .../bpm/processInstance/detail/index.vue      |    9 +-
 .../SimpleModelDesign.vue}                    |   13 +-
 13 files changed, 1263 insertions(+), 664 deletions(-)
 create mode 100644 src/assets/svgs/bpm/simple-process-bg.svg
 create mode 100644 src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
 rename src/views/bpm/{simpleWorkflow/index.vue => simple/SimpleModelDesign.vue} (50%)

diff --git a/src/assets/svgs/bpm/simple-process-bg.svg b/src/assets/svgs/bpm/simple-process-bg.svg
new file mode 100644
index 00000000..eb23ab5a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
index b1b97e9b..9b1d65aa 100644
--- 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'
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index 3415ff0b..bfe3e501 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/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
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
new file mode 100644
index 00000000..a14203e4
--- /dev/null
+++ b/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>
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
index e3181c40..e83c9e93 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
+++ b/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>
diff --git a/src/components/SimpleProcessDesignerV2/src/index.ts b/src/components/SimpleProcessDesignerV2/src/index.ts
index cacfbc12..88de07fb 100644
--- 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}
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index c5b5710c..39c475d5 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -1,573 +1,573 @@
-.simple-flow-canvas {
-  z-index: 1;
-  overflow: auto;
-  background-color: #fafafa;
-  // user-select: none;
+// .simple-flow-canvas {
+//   z-index: 1;
+//   overflow: auto;
+//   background-color: #fafafa;
+//   // user-select: none;
 
-  .simple-flow-container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+//   .simple-flow-container {
+//     position: relative;
+//     display: flex;
+//     flex-direction: column;
+//     justify-content: center;
+//     align-items: center;
 
-    .top-area-container {
-      position: sticky;
-      inset: 0;
-      display: flex;
-      width: 100%;
-      height: 42px;
-      z-index: 1;
-      // padding: 4px 0;
-      background-color: #fff;
-      justify-content: flex-end;
-      align-items: center;
+//     .top-area-container {
+//       position: sticky;
+//       inset: 0;
+//       display: flex;
+//       width: 100%;
+//       height: 42px;
+//       z-index: 1;
+//       // padding: 4px 0;
+//       background-color: #fff;
+//       justify-content: flex-end;
+//       align-items: center;
 
-      .top-actions {
-        display: flex;
-        margin: 4px;
-        margin-right: 8px;
-        align-items: center;
+//       .top-actions {
+//         display: flex;
+//         margin: 4px;
+//         margin-right: 8px;
+//         align-items: center;
 
-        .canvas-control {
-          font-size: 16px;
+//         .canvas-control {
+//           font-size: 16px;
 
-          .control-scale-group {
-            display: inline-flex;
-            align-items: center;
-            margin-right: 8px;
+//           .control-scale-group {
+//             display: inline-flex;
+//             align-items: center;
+//             margin-right: 8px;
 
-            .control-scale-button {
-              display: inline-flex;
-              width: 28px;
-              height: 28px;
-              padding: 2px;
-              text-align: center;
-              cursor: pointer;
-              justify-content: center;
-              align-items: center;
-            }
+//             .control-scale-button {
+//               display: inline-flex;
+//               width: 28px;
+//               height: 28px;
+//               padding: 2px;
+//               text-align: center;
+//               cursor: pointer;
+//               justify-content: center;
+//               align-items: center;
+//             }
 
-            .control-scale-label {
-              margin: 0 4px;
-              font-size: 14px;
-            }
-          }
-        }
-      }
-    }
+//             .control-scale-label {
+//               margin: 0 4px;
+//               font-size: 14px;
+//             }
+//           }
+//         }
+//       }
+//     }
 
-    .scale-container {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      margin-top: 16px;
-      background-color: #fafafa;
-      transform-origin: 50% 0 0;
-      transform: scale(1);
-      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+//     .scale-container {
+//       display: flex;
+//       flex-direction: column;
+//       justify-content: center;
+//       align-items: center;
+//       margin-top: 16px;
+//       background-color: #fafafa;
+//       transform-origin: 50% 0 0;
+//       transform: scale(1);
+//       transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
-      // 节点容器 定义节点宽度
-      .node-container {
-        width: 200px;
-      }
-      // 节点
-      .node-box {
-        position: relative;
-        display: flex;
-        min-height: 70px;
-        padding: 5px 10px 8px;
-        cursor: pointer;
-        background-color: #fff;
-        flex-direction: column;
-        border: 2px solid transparent;
-        border-radius: 8px;
-        box-shadow: 0 1px 4px 0 rgba(10, 30, 65, 0.16);
-        transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+//       // 节点容器 定义节点宽度
+//       .node-container {
+//         width: 200px;
+//       }
+//       // 节点
+//       .node-box {
+//         position: relative;
+//         display: flex;
+//         min-height: 70px;
+//         padding: 5px 10px 8px;
+//         cursor: pointer;
+//         background-color: #fff;
+//         flex-direction: column;
+//         border: 2px solid transparent;
+//         border-radius: 8px;
+//         box-shadow: 0 1px 4px 0 rgba(10, 30, 65, 0.16);
+//         transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
 
-        &.status-pass {
-          border-color: #67c23a;
-          background-color: #a9da90;
-        }
-        &.status-pass:hover {
-          border-color: #67c23a;
-        }
-        &.status-running {
-          border-color: #5a9cf8;
-          background-color: #e7f0fe;
-        }
-        &.status-running:hover {
-          border-color: #5a9cf8;
-        }
-        &.status-reject {
-          border-color: #e47470;
-          background-color: #f6e5e5;
-        }
-        &.status-reject:hover {
-          border-color: #e47470;
-        }
+//         &.status-pass {
+//           border-color: #67c23a;
+//           background-color: #a9da90;
+//         }
+//         &.status-pass:hover {
+//           border-color: #67c23a;
+//         }
+//         &.status-running {
+//           border-color: #5a9cf8;
+//           background-color: #e7f0fe;
+//         }
+//         &.status-running:hover {
+//           border-color: #5a9cf8;
+//         }
+//         &.status-reject {
+//           border-color: #e47470;
+//           background-color: #f6e5e5;
+//         }
+//         &.status-reject:hover {
+//           border-color: #e47470;
+//         }
 
-        &:hover {
-          border-color: #0089ff;
-          .node-toolbar {
-            opacity: 1;
-          }
+//         &:hover {
+//           border-color: #0089ff;
+//           .node-toolbar {
+//             opacity: 1;
+//           }
 
-          .branch-node-move {
-            display: flex;
-          }
-        }
+//           .branch-node-move {
+//             display: flex;
+//           }
+//         }
 
-        // 普通节点标题
-        .node-title-container {
-          display: flex;
-          padding: 4px;
-          cursor: pointer;
-          border-radius: 4px 4px 0 0;
-          align-items: center;
+//         // 普通节点标题
+//         .node-title-container {
+//           display: flex;
+//           padding: 4px;
+//           cursor: pointer;
+//           border-radius: 4px 4px 0 0;
+//           align-items: center;
 
-          .node-title-icon {
-            display: flex;
-            align-items: center;
+//           .node-title-icon {
+//             display: flex;
+//             align-items: center;
 
-            &.user-task {
-              color: #ff943e;
-            }
-            &.copy-task {
-              color: #3296fa;
-            }
-            &.start-user {
-              color: #676565;
-            }
-          }
+//             &.user-task {
+//               color: #ff943e;
+//             }
+//             &.copy-task {
+//               color: #3296fa;
+//             }
+//             &.start-user {
+//               color: #676565;
+//             }
+//           }
 
-          .node-title {
-            margin-left: 4px;
-            font-size: 14px;
-            font-weight: 600;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            color: #1f1f1f;
-            line-height: 18px;
-            &:hover {
-              border-bottom: 1px dashed #f60;
-            }
-          }
-        }
+//           .node-title {
+//             margin-left: 4px;
+//             font-size: 14px;
+//             font-weight: 600;
+//             white-space: nowrap;
+//             overflow: hidden;
+//             text-overflow: ellipsis;
+//             color: #1f1f1f;
+//             line-height: 18px;
+//             &:hover {
+//               border-bottom: 1px dashed #f60;
+//             }
+//           }
+//         }
 
-        // 条件节点标题
-        .branch-node-title-container {
-          display: flex;
-          padding: 4px 0;
-          cursor: pointer;
-          border-radius: 4px 4px 0 0;
-          align-items: center;
-          justify-content: space-between;
+//         // 条件节点标题
+//         .branch-node-title-container {
+//           display: flex;
+//           padding: 4px 0;
+//           cursor: pointer;
+//           border-radius: 4px 4px 0 0;
+//           align-items: center;
+//           justify-content: space-between;
 
-          .input-max-width {
-            max-width: 115px !important;
-          }
+//           .input-max-width {
+//             max-width: 115px !important;
+//           }
 
-          .branch-title {
-            font-size: 13px;
-            font-weight: 600;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            color: #f60;
-            &:hover {
-              border-bottom: 1px dashed #000;
-            }
-          }
+//           .branch-title {
+//             font-size: 13px;
+//             font-weight: 600;
+//             white-space: nowrap;
+//             overflow: hidden;
+//             text-overflow: ellipsis;
+//             color: #f60;
+//             &:hover {
+//               border-bottom: 1px dashed #000;
+//             }
+//           }
 
-          .branch-priority {
-            min-width: 50px;
-            font-size: 12px;
-          }
-        }
+//           .branch-priority {
+//             min-width: 50px;
+//             font-size: 12px;
+//           }
+//         }
 
-        .node-content {
-          display: flex;
-          min-height: 32px;
-          padding: 4px 8px;
-          margin-top: 4px;
-          line-height: 32px;
-          justify-content: space-between;
-          align-items: center;
-          color: #111f2c;
-          background: rgba(0, 0, 0, 0.03);
-          border-radius: 4px;
+//         .node-content {
+//           display: flex;
+//           min-height: 32px;
+//           padding: 4px 8px;
+//           margin-top: 4px;
+//           line-height: 32px;
+//           justify-content: space-between;
+//           align-items: center;
+//           color: #111f2c;
+//           background: rgba(0, 0, 0, 0.03);
+//           border-radius: 4px;
 
-          .node-text {
-            display: -webkit-box;
-            overflow: hidden;
-            font-size: 14px;
-            line-height: 24px;
-            text-overflow: ellipsis;
-            word-break: break-all;
-            -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
-            -webkit-box-orient: vertical;
-          }
-        }
+//           .node-text {
+//             display: -webkit-box;
+//             overflow: hidden;
+//             font-size: 14px;
+//             line-height: 24px;
+//             text-overflow: ellipsis;
+//             word-break: break-all;
+//             -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+//             -webkit-box-orient: vertical;
+//           }
+//         }
 
-        //条件节点内容
-        .branch-node-content {
-          display: flex;
-          min-height: 32px;
-          padding: 4px 0;
-          margin-top: 4px;
-          line-height: 32px;
-          align-items: center;
-          color: #111f2c;
-          border-radius: 4px;
+//         //条件节点内容
+//         .branch-node-content {
+//           display: flex;
+//           min-height: 32px;
+//           padding: 4px 0;
+//           margin-top: 4px;
+//           line-height: 32px;
+//           align-items: center;
+//           color: #111f2c;
+//           border-radius: 4px;
 
-          .branch-node-text {
-            overflow: hidden;
-            font-size: 12px;
-            line-height: 24px;
-            text-overflow: ellipsis;
-            word-break: break-all;
-            -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
-            -webkit-box-orient: vertical;
-          }
-        }
+//           .branch-node-text {
+//             overflow: hidden;
+//             font-size: 12px;
+//             line-height: 24px;
+//             text-overflow: ellipsis;
+//             word-break: break-all;
+//             -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+//             -webkit-box-orient: vertical;
+//           }
+//         }
 
-        // 节点操作 ：删除
-        .node-toolbar {
-          opacity: 0;
-          position: absolute;
-          top: -20px;
-          right: 0px;
-          display: flex;
+//         // 节点操作 ：删除
+//         .node-toolbar {
+//           opacity: 0;
+//           position: absolute;
+//           top: -20px;
+//           right: 0px;
+//           display: flex;
 
-          .toolbar-icon {
-            text-align: center;
-            vertical-align: middle;
-          }
-        }
+//           .toolbar-icon {
+//             text-align: center;
+//             vertical-align: middle;
+//           }
+//         }
 
-        // 条件节点左右移动
-        .branch-node-move {
-          position: absolute;
-          width: 10px;
-          cursor: pointer;
-          display: none;
-          align-items: center;
-          height: 100%;
-          justify-content: center;
-        }
+//         // 条件节点左右移动
+//         .branch-node-move {
+//           position: absolute;
+//           width: 10px;
+//           cursor: pointer;
+//           display: none;
+//           align-items: center;
+//           height: 100%;
+//           justify-content: center;
+//         }
 
-        .move-node-left {
-          left: -2px;
-          top: 0px;
-          background: rgba(126, 134, 142, 0.08);
-          border-top-left-radius: 8px;
-          border-bottom-left-radius: 8px;
-        }
+//         .move-node-left {
+//           left: -2px;
+//           top: 0px;
+//           background: rgba(126, 134, 142, 0.08);
+//           border-top-left-radius: 8px;
+//           border-bottom-left-radius: 8px;
+//         }
 
-        .move-node-right {
-          right: -2px;
-          top: 0px;
-          background: rgba(126, 134, 142, 0.08);
-          border-top-right-radius: 6px;
-          border-bottom-right-radius: 6px;
-        }
-      }
+//         .move-node-right {
+//           right: -2px;
+//           top: 0px;
+//           background: rgba(126, 134, 142, 0.08);
+//           border-top-right-radius: 6px;
+//           border-bottom-right-radius: 6px;
+//         }
+//       }
 
-      .node-config-error {
-        border-color: #ff5219 !important;
-      }
-      // 普通节点包装
-      .node-wrapper {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-      }
-      // 节点连线处理
-      .node-handler-wrapper {
-        position: relative;
-        display: flex;
-        height: 70px;
-        align-items: center;
-        user-select: none;
-        justify-content: center;
-        flex-direction: column;
+//       .node-config-error {
+//         border-color: #ff5219 !important;
+//       }
+//       // 普通节点包装
+//       .node-wrapper {
+//         display: flex;
+//         flex-direction: column;
+//         justify-content: center;
+//         align-items: center;
+//       }
+//       // 节点连线处理
+//       .node-handler-wrapper {
+//         position: relative;
+//         display: flex;
+//         height: 70px;
+//         align-items: center;
+//         user-select: none;
+//         justify-content: center;
+//         flex-direction: column;
 
-        &::before {
-          position: absolute;
-          top:0;
-          z-index: 0;
-          width: 2px;
-          height: 100%;
-          margin: auto;
-          background-color: #dedede;
-          content: '';
-        }
+//         &::before {
+//           position: absolute;
+//           top: 0;
+//           z-index: 0;
+//           width: 2px;
+//           height: 100%;
+//           margin: auto;
+//           background-color: #dedede;
+//           content: '';
+//         }
 
-        .node-handler {
-          .add-icon {
-            position: relative;
-            top: -5px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            width: 25px;
-            height: 25px;
-            color: #fff;
-            background-color: #0089ff;
-            border-radius: 50%;
+//         .node-handler {
+//           .add-icon {
+//             position: relative;
+//             top: -5px;
+//             display: flex;
+//             align-items: center;
+//             justify-content: center;
+//             cursor: pointer;
+//             width: 25px;
+//             height: 25px;
+//             color: #fff;
+//             background-color: #0089ff;
+//             border-radius: 50%;
 
-            &:hover {
-              transform: scale(1.1);
-            }
-          }
-        }
+//             &:hover {
+//               transform: scale(1.1);
+//             }
+//           }
+//         }
 
-        .node-handler-arrow {
-          position: absolute;
-          bottom: 0;
-          left: 50%;
-          display: flex;
-          transform: translateX(-50%);
-        }
-      }
+//         .node-handler-arrow {
+//           position: absolute;
+//           bottom: 0;
+//           left: 50%;
+//           display: flex;
+//           transform: translateX(-50%);
+//         }
+//       }
 
-      // 条件节点包装
-      .branch-node-wrapper {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        margin-top: 16px;
+//       // 条件节点包装
+//       .branch-node-wrapper {
+//         position: relative;
+//         display: flex;
+//         flex-direction: column;
+//         justify-content: center;
+//         align-items: center;
+//         margin-top: 16px;
 
-        .branch-node-container {
-          position: relative;
-          display: flex;
+//         .branch-node-container {
+//           position: relative;
+//           display: flex;
 
-          &::before {
-            position: absolute;
-            height: 100%;
-            width: 4px;
-            background-color: #fafafa;
-            content: '';
-            left: 50%;
-            transform: translate(-50%);
-          }
+//           &::before {
+//             position: absolute;
+//             height: 100%;
+//             width: 4px;
+//             background-color: #fafafa;
+//             content: '';
+//             left: 50%;
+//             transform: translate(-50%);
+//           }
 
-          .branch-node-add {
-            position: absolute;
-            top: -18px;
-            left: 50%;
-            z-index: 1;
-            height: 36px;
-            padding: 0 10px;
-            font-size: 12px;
-            line-height: 36px;
-            border: 2px solid #dedede;
-            border-radius: 18px;
-            transform: translateX(-50%);
-            transform-origin: center center;
-          }
+//           .branch-node-add {
+//             position: absolute;
+//             top: -18px;
+//             left: 50%;
+//             z-index: 1;
+//             height: 36px;
+//             padding: 0 10px;
+//             font-size: 12px;
+//             line-height: 36px;
+//             border: 2px solid #dedede;
+//             border-radius: 18px;
+//             transform: translateX(-50%);
+//             transform-origin: center center;
+//           }
 
-          .branch-node-readonly {
-            position: absolute;
-            top: -18px;
-            left: 50%;
-            z-index: 1;
-            width: 36px;
-            height: 36px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border: 2px solid #dedede;
-            background-color: #fff;
-            border-radius: 50%;
-            transform: translateX(-50%);
-            transform-origin: center center;
-            
-            &.status-pass {
-              border-color: #6bb63c;
-              background-color: #e9f4e2;
-            }
-            &.status-pass:hover {
-              border-color: #6bb63c;
-            }
+//           .branch-node-readonly {
+//             position: absolute;
+//             top: -18px;
+//             left: 50%;
+//             z-index: 1;
+//             width: 36px;
+//             height: 36px;
+//             display: flex;
+//             align-items: center;
+//             justify-content: center;
+//             border: 2px solid #dedede;
+//             background-color: #fff;
+//             border-radius: 50%;
+//             transform: translateX(-50%);
+//             transform-origin: center center;
 
-            .icon-size {
-              font-size: 22px;
-              color: #67c23a;
-            }
-          }
+//             &.status-pass {
+//               border-color: #6bb63c;
+//               background-color: #e9f4e2;
+//             }
+//             &.status-pass:hover {
+//               border-color: #6bb63c;
+//             }
 
-          .branch-node-item {
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            min-width: 280px;
-            padding: 40px 40px 0;
-            background: transparent;
-            border-top: 2px solid #dedede;
-            border-bottom: 2px solid #dedede;
+//             .icon-size {
+//               font-size: 22px;
+//               color: #67c23a;
+//             }
+//           }
 
-            &::before {
-              position: absolute;
-              width: 2px;
-              height: 100%;
-              margin: auto;
-              inset: 0;
-              background-color: #dedede;
-              content: '';
-            }
-          }
-          // 覆盖条件节点第一个节点左上角的线
-          .branch-line-first-top {
-            position: absolute;
-            top: -5px;
-            left: -1px;
-            width: 50%;
-            height: 7px;
-            background-color: #fafafa;
-            content: '';
-          }
-          // 覆盖条件节点第一个节点左下角的线
-          .branch-line-first-bottom {
-            position: absolute;
-            bottom: -5px;
-            left: -1px;
-            width: 50%;
-            height: 7px;
-            background-color: #fafafa;
-            content: '';
-          }
-          // 覆盖条件节点最后一个节点右上角的线
-          .branch-line-last-top {
-            position: absolute;
-            top: -5px;
-            right: -1px;
-            width: 50%;
-            height: 7px;
-            background-color: #fafafa;
-            content: '';
-          }
-          // 覆盖条件节点最后一个节点右下角的线
-          .branch-line-last-bottom {
-            position: absolute;
-            right: -1px;
-            bottom: -5px;
-            width: 50%;
-            height: 7px;
-            background-color: #fafafa;
-            content: '';
-          }
-        }
-      }
+//           .branch-node-item {
+//             position: relative;
+//             display: flex;
+//             flex-direction: column;
+//             align-items: center;
+//             min-width: 280px;
+//             padding: 40px 40px 0;
+//             background: transparent;
+//             border-top: 2px solid #dedede;
+//             border-bottom: 2px solid #dedede;
 
-      .node-fixed-name {
-        display: inline-block;
-        width: auto;
-        padding: 0 4px;
-        overflow: hidden;
-        text-align: center;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      // 开始节点包装
-      .start-node-wrapper {
-        position: relative;
-        margin-top: 16px;
+//             &::before {
+//               position: absolute;
+//               width: 2px;
+//               height: 100%;
+//               margin: auto;
+//               inset: 0;
+//               background-color: #dedede;
+//               content: '';
+//             }
+//           }
+//           // 覆盖条件节点第一个节点左上角的线
+//           .branch-line-first-top {
+//             position: absolute;
+//             top: -5px;
+//             left: -1px;
+//             width: 50%;
+//             height: 7px;
+//             background-color: #fafafa;
+//             content: '';
+//           }
+//           // 覆盖条件节点第一个节点左下角的线
+//           .branch-line-first-bottom {
+//             position: absolute;
+//             bottom: -5px;
+//             left: -1px;
+//             width: 50%;
+//             height: 7px;
+//             background-color: #fafafa;
+//             content: '';
+//           }
+//           // 覆盖条件节点最后一个节点右上角的线
+//           .branch-line-last-top {
+//             position: absolute;
+//             top: -5px;
+//             right: -1px;
+//             width: 50%;
+//             height: 7px;
+//             background-color: #fafafa;
+//             content: '';
+//           }
+//           // 覆盖条件节点最后一个节点右下角的线
+//           .branch-line-last-bottom {
+//             position: absolute;
+//             right: -1px;
+//             bottom: -5px;
+//             width: 50%;
+//             height: 7px;
+//             background-color: #fafafa;
+//             content: '';
+//           }
+//         }
+//       }
 
-        .start-node-container {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
+//       .node-fixed-name {
+//         display: inline-block;
+//         width: auto;
+//         padding: 0 4px;
+//         overflow: hidden;
+//         text-align: center;
+//         text-overflow: ellipsis;
+//         white-space: nowrap;
+//       }
+//       // 开始节点包装
+//       .start-node-wrapper {
+//         position: relative;
+//         margin-top: 16px;
 
-          .start-node-box {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 90px;
-            height: 36px;
-            padding: 3px 4px;
-            color: #212121;
-            cursor: pointer;
-            background: #fafafa;
-            border-radius: 30px;
-            box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
-            box-sizing: border-box;
-          }
-        }
-      }
+//         .start-node-container {
+//           display: flex;
+//           flex-direction: column;
+//           justify-content: center;
+//           align-items: center;
 
-      // 结束节点包装
-      .end-node-wrapper {
-        margin-bottom: 16px;
+//           .start-node-box {
+//             display: flex;
+//             justify-content: center;
+//             align-items: center;
+//             width: 90px;
+//             height: 36px;
+//             padding: 3px 4px;
+//             color: #212121;
+//             cursor: pointer;
+//             background: #fafafa;
+//             border-radius: 30px;
+//             box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
+//             box-sizing: border-box;
+//           }
+//         }
+//       }
 
-        .end-node-box {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 80px;
-          height: 36px;
-          border: 2px solid #fafafa;
-          color: #212121;
-          border-radius: 30px;
-          box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
-          box-sizing: border-box;
+//       // 结束节点包装
+//       .end-node-wrapper {
+//         margin-bottom: 16px;
 
-          &.status-pass {
-            border-color: #6bb63c;
-            background-color: #a9da90;
-          }
+//         .end-node-box {
+//           display: flex;
+//           justify-content: center;
+//           align-items: center;
+//           width: 80px;
+//           height: 36px;
+//           border: 2px solid #fafafa;
+//           color: #212121;
+//           border-radius: 30px;
+//           box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
+//           box-sizing: border-box;
 
-          &.status-pass:hover {
-            border-color: #6bb63c;
-          }
+//           &.status-pass {
+//             border-color: #6bb63c;
+//             background-color: #a9da90;
+//           }
 
-          &.status-reject {
-            border-color: #e47470;
-            background-color: #f6e5e5;
-          }
-          &.status-reject:hover {
-            border-color: #e47470;
-          }
+//           &.status-pass:hover {
+//             border-color: #6bb63c;
+//           }
 
-          &.status-cancel {
-            border-color: #919398;
-            background-color: #eaeaeb
-          }
-          &.status-cancel:hover {
-            border-color: #919398;
-          }
-        }
-      }
+//           &.status-reject {
+//             border-color: #e47470;
+//             background-color: #f6e5e5;
+//           }
+//           &.status-reject:hover {
+//             border-color: #e47470;
+//           }
 
-      // 可编辑的 title 输入框
-      .editable-title-input {
-        height: 20px;
-        max-width: 145px;
-        line-height: 20px;
-        font-size: 12px;
-        margin-left: 4px;
-        border: 1px solid #d9d9d9;
-        border-radius: 4px;
-        transition: all 0.3s;
+//           &.status-cancel {
+//             border-color: #919398;
+//             background-color: #eaeaeb;
+//           }
+//           &.status-cancel:hover {
+//             border-color: #919398;
+//           }
+//         }
+//       }
 
-        &:focus {
-          border-color: #40a9ff;
-          outline: 0;
-          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-        }
-      }
-    }
-  }
-}
+//       // 可编辑的 title 输入框
+//       .editable-title-input {
+//         height: 20px;
+//         max-width: 145px;
+//         line-height: 20px;
+//         font-size: 12px;
+//         margin-left: 4px;
+//         border: 1px solid #d9d9d9;
+//         border-radius: 4px;
+//         transition: all 0.3s;
+
+//         &:focus {
+//           border-color: #40a9ff;
+//           outline: 0;
+//           box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+//         }
+//       }
+//     }
+//   }
+// }
 
 // 配置节点头部
 .config-header {
@@ -740,6 +740,531 @@
   }
 }
 
+.simple-process-model-container {
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-top: 16px;
+  background-color: #fafafa;
+  transform-origin: 50% 0 0;
+  transform: scale(1);
+  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  background: url(@/assets/svgs/bpm/simple-process-bg.svg) 0 0 repeat;
+  // 节点容器 定义节点宽度
+  .node-container {
+    width: 200px;
+  }
+  // 节点
+  .node-box {
+    position: relative;
+    display: flex;
+    min-height: 70px;
+    padding: 5px 10px 8px;
+    cursor: pointer;
+    background-color: #fff;
+    flex-direction: column;
+    border: 2px solid transparent;
+    border-radius: 8px;
+    box-shadow: 0 1px 4px 0 rgb(10 30 65 / 16%);
+    transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    &.status-pass {
+      background-color: #a9da90;
+      border-color: #67c23a;
+    }
+
+    &.status-pass:hover {
+      border-color: #67c23a;
+    }
+
+    &.status-running {
+      background-color: #e7f0fe;
+      border-color: #5a9cf8;
+    }
+
+    &.status-running:hover {
+      border-color: #5a9cf8;
+    }
+
+    &.status-reject {
+      background-color: #f6e5e5;
+      border-color: #e47470;
+    }
+
+    &.status-reject:hover {
+      border-color: #e47470;
+    }
+
+    &:hover {
+      border-color: #0089ff;
+
+      .node-toolbar {
+        opacity: 1;
+      }
+
+      .branch-node-move {
+        display: flex;
+      }
+    }
+
+    // 普通节点标题
+    .node-title-container {
+      display: flex;
+      padding: 4px;
+      cursor: pointer;
+      border-radius: 4px 4px 0 0;
+      align-items: center;
+
+      .node-title-icon {
+        display: flex;
+        align-items: center;
+
+        &.user-task {
+          color: #ff943e;
+        }
+
+        &.copy-task {
+          color: #3296fa;
+        }
+
+        &.start-user {
+          color: #676565;
+        }
+      }
+
+      .node-title {
+        margin-left: 4px;
+        overflow: hidden;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 18px;
+        color: #1f1f1f;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:hover {
+          border-bottom: 1px dashed #f60;
+        }
+      }
+    }
+
+    // 条件节点标题
+    .branch-node-title-container {
+      display: flex;
+      padding: 4px 0;
+      cursor: pointer;
+      border-radius: 4px 4px 0 0;
+      align-items: center;
+      justify-content: space-between;
+
+      .input-max-width {
+        max-width: 115px !important;
+      }
+
+      .branch-title {
+        overflow: hidden;
+        font-size: 13px;
+        font-weight: 600;
+        color: #f60;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:hover {
+          border-bottom: 1px dashed #000;
+        }
+      }
+
+      .branch-priority {
+        min-width: 50px;
+        font-size: 12px;
+      }
+    }
+
+    .node-content {
+      display: flex;
+      min-height: 32px;
+      padding: 4px 8px;
+      margin-top: 4px;
+      line-height: 32px;
+      justify-content: space-between;
+      align-items: center;
+      color: #111f2c;
+      background: rgb(0 0 0 / 3%);
+      border-radius: 4px;
+
+      .node-text {
+        display: -webkit-box;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 24px;
+        text-overflow: ellipsis;
+        word-break: break-all;
+        -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    //条件节点内容
+    .branch-node-content {
+      display: flex;
+      min-height: 32px;
+      padding: 4px 0;
+      margin-top: 4px;
+      line-height: 32px;
+      align-items: center;
+      color: #111f2c;
+      border-radius: 4px;
+
+      .branch-node-text {
+        overflow: hidden;
+        font-size: 12px;
+        line-height: 24px;
+        text-overflow: ellipsis;
+        word-break: break-all;
+        -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    // 节点操作 ：删除
+    .node-toolbar {
+      position: absolute;
+      top: -20px;
+      right: 0;
+      display: flex;
+      opacity: 0;
+
+      .toolbar-icon {
+        text-align: center;
+        vertical-align: middle;
+      }
+    }
+
+    // 条件节点左右移动
+    .branch-node-move {
+      position: absolute;
+      display: none;
+      width: 10px;
+      height: 100%;
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .move-node-left {
+      top: 0;
+      left: -2px;
+      background: rgb(126 134 142 / 8%);
+      border-bottom-left-radius: 8px;
+      border-top-left-radius: 8px;
+    }
+
+    .move-node-right {
+      top: 0;
+      right: -2px;
+      background: rgb(126 134 142 / 8%);
+      border-top-right-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+  }
+
+  .node-config-error {
+    border-color: #ff5219 !important;
+  }
+  // 普通节点包装
+  .node-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  // 节点连线处理
+  .node-handler-wrapper {
+    position: relative;
+    display: flex;
+    height: 70px;
+    align-items: center;
+    user-select: none;
+    justify-content: center;
+    flex-direction: column;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      z-index: 0;
+      width: 2px;
+      height: 100%;
+      margin: auto;
+      background-color: #dedede;
+      content: '';
+    }
+
+    .node-handler {
+      .add-icon {
+        position: relative;
+        top: -5px;
+        display: flex;
+        width: 25px;
+        height: 25px;
+        color: #fff;
+        cursor: pointer;
+        background-color: #0089ff;
+        border-radius: 50%;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
+    }
+
+    .node-handler-arrow {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      display: flex;
+      transform: translateX(-50%);
+    }
+  }
+
+  // 条件节点包装
+  .branch-node-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 16px;
+
+    .branch-node-container {
+      position: relative;
+      display: flex;
+
+      &::before {
+        position: absolute;
+        left: 50%;
+        width: 4px;
+        height: 100%;
+        background-color: #fafafa;
+        content: '';
+        transform: translate(-50%);
+      }
+
+      .branch-node-add {
+        position: absolute;
+        top: -18px;
+        left: 50%;
+        z-index: 1;
+        height: 36px;
+        padding: 0 10px;
+        font-size: 12px;
+        line-height: 36px;
+        border: 2px solid #dedede;
+        border-radius: 18px;
+        transform: translateX(-50%);
+        transform-origin: center center;
+      }
+
+      .branch-node-readonly {
+        position: absolute;
+        top: -18px;
+        left: 50%;
+        z-index: 1;
+        display: flex;
+        width: 36px;
+        height: 36px;
+        background-color: #fff;
+        border: 2px solid #dedede;
+        border-radius: 50%;
+        transform: translateX(-50%);
+        align-items: center;
+        justify-content: center;
+        transform-origin: center center;
+
+        &.status-pass {
+          background-color: #e9f4e2;
+          border-color: #6bb63c;
+        }
+
+        &.status-pass:hover {
+          border-color: #6bb63c;
+        }
+
+        .icon-size {
+          font-size: 22px;
+          color: #67c23a;
+        }
+      }
+
+      .branch-node-item {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        min-width: 280px;
+        padding: 40px 40px 0;
+        background: transparent;
+        border-top: 2px solid #dedede;
+        border-bottom: 2px solid #dedede;
+
+        &::before {
+          position: absolute;
+          width: 2px;
+          height: 100%;
+          margin: auto;
+          inset: 0;
+          background-color: #dedede;
+          content: '';
+        }
+      }
+      // 覆盖条件节点第一个节点左上角的线
+      .branch-line-first-top {
+        position: absolute;
+        top: -5px;
+        left: -1px;
+        width: 50%;
+        height: 7px;
+        background-color: #fafafa;
+        content: '';
+      }
+      // 覆盖条件节点第一个节点左下角的线
+      .branch-line-first-bottom {
+        position: absolute;
+        bottom: -5px;
+        left: -1px;
+        width: 50%;
+        height: 7px;
+        background-color: #fafafa;
+        content: '';
+      }
+      // 覆盖条件节点最后一个节点右上角的线
+      .branch-line-last-top {
+        position: absolute;
+        top: -5px;
+        right: -1px;
+        width: 50%;
+        height: 7px;
+        background-color: #fafafa;
+        content: '';
+      }
+      // 覆盖条件节点最后一个节点右下角的线
+      .branch-line-last-bottom {
+        position: absolute;
+        right: -1px;
+        bottom: -5px;
+        width: 50%;
+        height: 7px;
+        background-color: #fafafa;
+        content: '';
+      }
+    }
+  }
+
+  .node-fixed-name {
+    display: inline-block;
+    width: auto;
+    padding: 0 4px;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  // 开始节点包装
+  .start-node-wrapper {
+    position: relative;
+    margin-top: 16px;
+
+    .start-node-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .start-node-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 90px;
+        height: 36px;
+        padding: 3px 4px;
+        color: #212121;
+        cursor: pointer;
+        background: #fafafa;
+        border-radius: 30px;
+        box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
+        box-sizing: border-box;
+      }
+    }
+  }
+
+  // 结束节点包装
+  .end-node-wrapper {
+    margin-bottom: 16px;
+
+    .end-node-box {
+      display: flex;
+      width: 80px;
+      height: 36px;
+      color: #212121;
+      border: 2px solid #fafafa;
+      border-radius: 30px;
+      box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
+      box-sizing: border-box;
+      justify-content: center;
+      align-items: center;
+
+      &.status-pass {
+        background-color: #a9da90;
+        border-color: #6bb63c;
+      }
+
+      &.status-pass:hover {
+        border-color: #6bb63c;
+      }
+
+      &.status-reject {
+        background-color: #f6e5e5;
+        border-color: #e47470;
+      }
+
+      &.status-reject:hover {
+        border-color: #e47470;
+      }
+
+      &.status-cancel {
+        background-color: #eaeaeb;
+        border-color: #919398;
+      }
+
+      &.status-cancel:hover {
+        border-color: #919398;
+      }
+    }
+  }
+
+  // 可编辑的 title 输入框
+  .editable-title-input {
+    height: 20px;
+    max-width: 145px;
+    margin-left: 4px;
+    font-size: 12px;
+    line-height: 20px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: all 0.3s;
+
+    &:focus {
+      border-color: #40a9ff;
+      outline: 0;
+      box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+    }
+  }
+}
+
 // iconfont 样式
 @font-face {
   font-family: 'iconfont'; /* Project id 4495938 */
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index a61fd166..f0ce322e 100644
--- 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',
-        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,
diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index c6c87da5..75a2d55d 100644
--- 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>
diff --git a/src/views/bpm/model/index_old.vue b/src/views/bpm/model/index_old.vue
index 4534ec61..8b5f84df 100644
--- 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
       }
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
index 29ea24dd..6ec91a09 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/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>
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 6a1d7425..6fe4565e 100644
--- 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'
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simple/SimpleModelDesign.vue
similarity index 50%
rename from src/views/bpm/simpleWorkflow/index.vue
rename to src/views/bpm/simple/SimpleModelDesign.vue
index df5073d4..1740e03f 100644
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/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>