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

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: '发起人',
-  type: 0,
-  id: 'Activity_'+uid,
-  attributes: {
-    "candidateStrategy": '70'
-  },
+  name: '流程开始',
+  type: -1,
+  id: 'StartEvent_' + uid,
   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);
-  console.log('the result is ', result)
-  if(result){
+  const result = await saveBpmSimpleModel(data)
+  console.log('save the result is ', 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>