流程模型中增加仿钉钉设计器入口

Author: cooling-jason

src/router/modules/remaining.ts

@@ -266,6 +266,18 @@ const remainingRouter: AppRouteRecordRaw[] = [
           activeMenu: '/bpm/manager/model'
         }
       },
+      {
+        path: '/manager/simple/workflow/model/edit',
+        component: () => import('@/views/bpm/simpleWorkflow/index.vue'),
+        name: 'SimpleWorkflowDesignEditor',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '仿钉钉设计流程',
+          activeMenu: '/bpm/manager/model'
+        }
+      },
       {
         path: '/manager/definition',
         component: () => import('@/views/bpm/definition/index.vue'),

src/views/bpm/model/index.vue

@@ -157,6 +157,14 @@
           >
             设计流程
           </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="handleSimpleDesign(scope.row.id)"
+            v-hasPermi="['bpm:model:update']"
+          >
+            仿钉钉设计流程
+          </el-button>
           <el-button
             link
             type="primary"
@@ -323,6 +331,15 @@ const handleDesign = (row) => {
   })
 }
 
+const handleSimpleDesign = (row) => {
+  push({
+    name: 'SimpleWorkflowDesignEditor',
+    query: {
+      modelId: row.id
+    }
+  })
+}
+
 /** 发布流程 */
 const handleDeploy = async (row) => {
   try {

src/views/bpm/simpleWorkflow/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <section class="dingflow-design">
+      <div class="box-scale">
+        <nodeWrap v-model:nodeConfig="nodeConfig" />
+        <div class="end-node">
+          <div class="end-node-circle"></div>
+          <div class="end-node-text">流程结束</div>
+        </div>
+      </div>
+    </section>
+  </div>
+  <approverDrawer :directorMaxLevel="directorMaxLevel" />
+</template>
+<script lang="ts" setup>
+import nodeWrap from '@/components/SimpleProcessDesigner/src/nodeWrap.vue'
+import approverDrawer from '@/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue'
+defineOptions({ name: 'SimpleWorkflowDesignEditor' })
+let nodeConfig = ref({
+  nodeName: '发起人',
+  type: 0,
+  id: 'root',
+  formPerms: {},
+  nodeUserList: [],
+  childNode: {}
+})
+let directorMaxLevel = ref(0)
+</script>
+<style>
+@import url('@/components/SimpleProcessDesigner/theme/workflow.css');
+</style>