仿钉钉设计流程-30%: 获取仿钉钉流程模型数据结构

src/components/SimpleProcessDesigner/src/addNode.vue

@@ -71,9 +71,9 @@ const addType = (type) => {
         attributes : {
           approveMethod : undefined,
           candidateStrategy: undefined,
-          candidateParam: []
+          candidateParam: undefined
         },
-        // childNode: props.childNodeP
+        childNode: props.childNodeP
       }
     } else if (type == 2) {
       data = {

src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue

@@ -202,7 +202,19 @@ let visible = computed({
 })
 watch(userTaskConfig, (val) => {
   if (val.value.attributes) {
-    candidateConfig.value = val.value.attributes
+    console.log('val.value.attributes', val.value.attributes);
+    candidateConfig.value.approveMethod = val.value.attributes.approveMethod
+    candidateConfig.value.candidateStrategy = val.value.attributes.candidateStrategy
+    const candidateParamStr =  val.value.attributes.candidateParam;
+    if(val.value.attributes.candidateStrategy === 60) {
+      candidateConfig.value.candidateParam = [candidateParamStr]
+    } else {
+      if(candidateParamStr){
+        candidateConfig.value.candidateParam =  candidateParamStr.split(',').map((item) => +item)
+      }
+    }
+    
+    // candidateConfig.value = val.value.attributes
   }
 })
 watch(approverConfig1, (val) => {
@@ -250,9 +262,14 @@ const saveApprover = () => {
   closeDrawer()
 }
 const saveConfig = () => {
-
   const rawConfig = toRaw(userTaskConfig.value)
-  rawConfig.value.attributes = toRaw(candidateConfig.value)
+  const { approveMethod, candidateStrategy , candidateParam} = toRaw(candidateConfig.value);
+  const candidateParamStr = candidateParam.join(',')
+  rawConfig.value.attributes = {
+    approveMethod,
+    candidateStrategy,
+    candidateParam: candidateParamStr
+  } 
   rawConfig.flag = true
   // TODO 进行校验
   // setApproverConfig({

src/components/SimpleProcessDesigner/src/nodeWrap.vue

@@ -6,14 +6,19 @@
  * @FilePath: /Workflow-Vue3/src/components/nodeWrap.vue
 -->
 <template>
+ 
   <div class="node-wrap" v-if="nodeConfig.type < 3">
+    <div class="start-event-node" v-if="nodeConfig.type === -1">
+        <div class="start-event-node-text">{{ nodeConfig.name }}</div>
+        <div class="start-event-node-circle"></div>
+    </div>
     <div
       class="node-wrap-box"
       :class="
         (nodeConfig.type == 0 ? 'start-node ' : '') +
         (isTried && nodeConfig.error ? 'active error' : '')
       "
-    >
+      v-else>
       <div class="title" :style="`background: rgb(${bgColors[nodeConfig.type]});`">
         <span v-if="nodeConfig.type == 0">{{ nodeConfig.name }}</span>
         <template v-else>
@@ -109,7 +114,6 @@
 import addNode from './addNode.vue'
 import { onMounted, ref, watch, getCurrentInstance, computed } from 'vue'
 import {
-  arrToStr,
   conditionStr,
   setApproverStr,
   copyerStr,
@@ -165,7 +169,6 @@ let {
   setCopyer,
   setCondition,
   setFlowPermission,
-  setApproverConfig,
   setCopyerConfig,
   setConditionsConfig,
   setUserTaskConfig
@@ -340,4 +343,24 @@ const arrTransfer = (index, type = 1) => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.start-event-node {
+  color: #191f2566;
+  text-align: left;
+  border-radius: 50%;
+}
+
+.start-event-node-circle {
+  width: 10px;
+  height: 10px;
+  margin: auto;
+  background: #dbdcdc;
+  border-radius: 50%;
+}
+
+.start-event-node-text {
+  margin-top: 5px;
+  font-size: 14px;
+  text-align: center;
+}
 </style>

src/components/SimpleProcessDesigner/src/util.ts

@@ -56,14 +56,14 @@ export const setApproverStr = (nodeConfig: any) => {
 
 
 export const approveMethods: DictDataVO [] = [
-  { label: '单人审批', value: 1 },
-  { label: '多人审批(所有人审批通过)', value: 2 }
+  { label: '单人审批', value: 1 }
+  // { label: '多人审批(所有人审批通过)', value: 2 }
   // TODO 更多的类型
 ];
 
 export const getApproverShowText = (approveMethod :number, candidateStrategy: number) => {
-  if(approveMethod && candidateStrategy) {
-    let appoveMethodText = ''
+  let appoveMethodText = '单人审批'
+  if(candidateStrategy) {
     approveMethods.forEach((item) => {
       if (item.value == approveMethod) {
         appoveMethodText = item.label