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

253d7071 · jason · 627b822f · 253d7071 · 253d7071 · 253d7071
Commit 253d7071 authored Mar 29, 2024 by jason
6 changed files
--- a/src/api/bpm/simple/index.ts
+++ b/src/api/bpm/simple/index.ts
@@ -7,3 +7,9 @@ export const saveBpmSimpleModel = async (data) => {
    data: data
  })
 }
+export const getBpmSimpleModel = async (modelId) => {
+  return await request.get({
+    url: '/bpm/simple/get?modelId=' + modelId
+  })
+}
\ No newline at end of file
--- a/src/components/SimpleProcessDesigner/src/addNode.vue
+++ b/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 = {

--- a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
+++ b/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({

--- a/src/components/SimpleProcessDesigner/src/nodeWrap.vue
+++ b/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>
--- a/src/components/SimpleProcessDesigner/src/util.ts
+++ b/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

--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
 <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,19 +67,27 @@ 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');