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

src/api/bpm/simple/index.ts

@@ -6,4 +6,10 @@ export const saveBpmSimpleModel = async (data) => {
     url: '/bpm/simple/save',
     data: data
   })
+}
+
+export const getBpmSimpleModel = async (modelId) => {
+  return await request.get({
+    url: '/bpm/simple/get?modelId=' + modelId
+  })
 }

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: 1 }
-  { label: '多人审批(所有人审批通过)', value: 2 }
+  // { 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

src/views/bpm/simpleWorkflow/index.vue

@@ -1,14 +1,34 @@
 <template>
   <div>
-   
     <section class="dingflow-design">
       <el-row>
-        <el-col :span="20"/>
+        <el-col :span="20" />
         <el-col :span="4">
           <el-button type="primary" size="small" @click="test">保存(用于测试，还未完成)</el-button>
         </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> -->
         <nodeWrap v-model:nodeConfig="nodeConfig" />
         <div class="end-node">
           <div class="end-node-circle"></div>
@@ -21,25 +41,23 @@
 </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 { ref } from 'vue'
-import { saveBpmSimpleModel } from '@/api/bpm/simple'
+import { saveBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
 defineOptions({ name: 'SimpleWorkflowDesignEditor' })
-const uid = getCurrentInstance().uid;
+const uid = getCurrentInstance().uid
 const router = useRouter() // 路由
 const { query } = useRoute() // 路由的查询
-const modelId = query.modelId;
+const modelId = query.modelId
 const message = useMessage() // 国际化
 const nodeConfig = ref({
-  name: '发起人',
+  name: '流程开始',
-  type: 0,
+  type: -1,
-  id: 'Activity_'+uid,
+  id: 'StartEvent_' + uid,
-  attributes: {
-    "candidateStrategy": '70'
-  },
   childNode: undefined
 })
-const test = async ()=> {
+const test = async () => {
   if (!modelId) {
     message.error('缺少模型 modelId 编号')
     return
@@ -49,20 +67,28 @@ const test = async ()=> {
     simpleModelBody: toRaw(nodeConfig.value)
   }
   console.log('request json data is ', data)
-  const result =  await saveBpmSimpleModel(data);
+  const result = await saveBpmSimpleModel(data)
-  console.log('the result is ', result)
+  console.log('save the result is ', result)
-  if(result){
+  if (result) {
     message.success('修改成功')
+    close()
   } else {
-    message.alert('修改失败');
+    message.alert('修改失败')
   }
-  close ()
+  
 }
 const close = () => {
   router.push({ path: '/bpm/manager/model' })
 }
-
+onMounted(async () => {
+  console.log('the modelId is ', modelId)
+  const result = await getBpmSimpleModel(modelId)
+  if(result){
+    console.log('get the result is ', result)
+    nodeConfig.value = result;
+  }
+})
 </script>
 <style>
 @import url('@/components/SimpleProcessDesigner/theme/workflow.css');
-</style>
+</style>