仿钉钉设计流程：增加发起人、条件分支节点

src/views/bpm/simpleWorkflow/index.vue

@@ -8,31 +8,17 @@
         </el-col>
       </el-row>
       <div class="box-scale">
-        <!-- <div class="start-event-node">
-          <div class="start-event-node-text">流程开始</div>
-          <div class="start-event-node-circle"></div>
-          <div class="start-event-node-flow">
-            <el-popover placement="right-start" width="auto">
-              <div class="add-node-popover-body">
-                <a class="add-node-popover-item approver" @click="addType(1)">
-                  <div class="item-wrapper">
-                    <span class="iconfont"></span>
-                  </div>
-                  <p>审批人</p>
-                </a>
-              </div>
-              <template #reference>
-                <button class="btn" type="button">
-                  <span class="iconfont"></span>
-                </button>
-              </template>
-            </el-popover>
-          </div>
-        </div> -->
+        <div class="start-event-node">
+          <div class="start-event-node-circle">开始</div>
+        </div>
+        <div class="start-event-node-line"></div>
         <nodeWrap v-model:nodeConfig="nodeConfig" />
-        <div class="end-node">
+        <!-- <div class="end-node">
           <div class="end-node-circle"></div>
           <div class="end-node-text">流程结束</div>
+        </div> -->
+        <div class="end-event">
+          <div class="end-event-circle">结束</div>
         </div>
       </div>
     </section>
@@ -41,8 +27,8 @@
 </template>
 <script lang="ts" setup>
 import nodeWrap from '@/components/SimpleProcessDesigner/src/nodeWrap.vue'
-import addNode from '@/components/SimpleProcessDesigner/src/addNode.vue'
 import approverDrawer from '@/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue'
+import { WorkFlowNode } from '@/components/SimpleProcessDesigner/src/consts'
 import { ref } from 'vue'
 import { saveBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
 defineOptions({ name: 'SimpleWorkflowDesignEditor' })
@@ -51,23 +37,34 @@ const router = useRouter() // 路由
 const { query } = useRoute() // 路由的查询
 const modelId = query.modelId
 const message = useMessage() // 国际化
-const nodeConfig = ref({
-  name: '流程开始',
-  type: -1,
-  id: 'StartEvent_' + uid,
-  childNode: undefined
-})
+const nodeConfig = ref<WorkFlowNode>({
+    name: '发起人',
+    type: 0,
+    id: 'StartEvent_' + uid,
+    childNode: undefined,
+    attributes: undefined,
+    conditionNodes: undefined
+  }
+)
 const test = async () => {
   if (!modelId) {
     message.error('缺少模型 modelId 编号')
     return
   }
+  const test = nodeConfig.value;
+  console.log('test is ', test)
+  console.log('nodeConfig.value ', nodeConfig.value)
   const data = {
     modelId: modelId,
     simpleModelBody: toRaw(nodeConfig.value)
   }
+  const data1 = {
+    modelId: modelId,
+    simpleModelBody: nodeConfig.value
+  }
   console.log('request json data is ', data)
-  const result = await saveBpmSimpleModel(data)
+  console.log('request json data1 is ', data1)
+  const result = await saveBpmSimpleModel(data1)
   console.log('save the result is ', result)
   if (result) {
     message.success('修改成功')
@@ -91,4 +88,63 @@ onMounted(async () => {
 </script>
 <style>
 @import url('@/components/SimpleProcessDesigner/theme/workflow.css');
+
+.end-event {
+  display: flex;
+  direction: columns;
+  justify-content: center;
+  align-items: center;
+}
+
+.end-event-circle {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  font-size: 14px;
+  color: #f8f8fa;
+  background-image: linear-gradient(-30deg,#bbbbc4,#d5d5de),linear-gradient(#bcbcc5,#bcbcc5);
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+}
+
+/* .start-event-node {
+  color: #191f2566;
+  text-align: left;
+  border-radius: 50%;
+} */
+.start-event-node {
+  display: flex;
+  direction: columns;
+  justify-content: center;
+  align-items: center;
+}
+
+.start-event-node-circle {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #f8f8fa;
+  background-image: linear-gradient(90deg,#ff6a00,#f78b3e),linear-gradient(#ff6a00,#ff6a00);
+  border-radius: 50%;
+}
+
+.start-event-node-line::before {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    width: 2px;
+    height: 100%;
+    margin: auto;
+    background-color: #cacaca;
+    content: "";
+}
+
+.start-event-node-line {
+  position: relative;
+  padding: 20px 0 32px;
+}
 </style>