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

2024-04-02 20:56:51 +08:00 · 2024-04-02 20:56:51 +08:00 · 4f839136c7
commit 4f839136c7
parent 253d707131
7 changed files with 270 additions and 211 deletions
--- a/src/components/SimpleProcessDesigner/src/addNode.vue
+++ b/src/components/SimpleProcessDesigner/src/addNode.vue
@ -24,6 +24,12 @@
            <p>条件分支</p>
          </a>
          -->
+          <a class="add-node-popover-item condition" @click="addType(4)">
+            <div class="item-wrapper">
+              <span class="iconfont"></span>
+            </div>
+            <p>条件分支</p>
+          </a>
        </div>
        <template #reference>
          <button class="btn" type="button">
@ -36,6 +42,7 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue'
+import { generateUUID } from '@/utils'
 let props = defineProps({
  childNodeP: {
    type: Object,
@ -89,7 +96,8 @@ const addType = (type) => {
    emits('update:childNodeP', {
      name: '路由',
      type: 4,
-      childNode: null,
+      id : 'GateWay_'+ generateUUID(),
+      childNode: props.childNodeP,
      conditionNodes: [
        {
          name: '条件1',
@ -97,15 +105,13 @@ const addType = (type) => {
          type: 3,
          priorityLevel: 1,
          conditionList: [],
-          nodeUserList: [],
-          // childNode: props.childNodeP
+          childNode: null
        },
        {
-          name: '条件2',
+          name: '其它情况',
          type: 3,
          priorityLevel: 2,
          conditionList: [],
-          nodeUserList: [],
          childNode: null
        }
      ]
@ -115,55 +121,52 @@ const addType = (type) => {
 </script>
 <style scoped lang="scss">
 .add-node-btn-box {
-  width: 240px;
+  position: relative;
  display: inline-flex;
+  width: 240px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
-  position: relative;

-  &:before {
-    content: '';
+  &::before {
    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
    z-index: -1;
-    margin: auto;
    width: 2px;
    height: 100%;
+    margin: auto;
    background-color: #cacaca;
+    content: '';
  }

  .add-node-btn {
-    user-select: none;
+    display: flex;
    width: 240px;
    padding: 20px 0 32px;
-    display: flex;
-    -webkit-box-pack: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-box-flex: 1;
+    -webkit-box-pack: center;
+    user-select: none;
    flex-grow: 1;

    .btn {
-      outline: none;
-      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+      position: relative;
      width: 30px;
      height: 30px;
-      background: #3296fa;
-      border-radius: 50%;
-      position: relative;
-      border: none;
      line-height: 30px;
+      background: #3296fa;
+      border: none;
+      border-radius: 50%;
+      outline: none;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
      -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-
+  
      .iconfont {
-        color: #fff;
        font-size: 16px;
+        color: #fff;
      }

      &:hover {
@ -172,8 +175,8 @@ const addType = (type) => {
      }

      &:active {
-        transform: none;
        background: #1e83e9;
+        transform: none;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
      }
    }
@ -191,7 +194,6 @@ const addType = (type) => {
    color: #191f25 !important;

    .item-wrapper {
-      user-select: none;
      display: inline-block;
      width: 80px;
      height: 80px;
@ -200,6 +202,7 @@ const addType = (type) => {
      border: 1px solid #e2e2e2;
      border-radius: 50%;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      user-select: none;

      .iconfont {
        font-size: 35px;
@ -238,8 +241,8 @@ const addType = (type) => {

    &:active {
      .item-wrapper {
-        box-shadow: none;
        background: #eaeaea;
+        box-shadow: none;
      }

      .iconfont {
--- a/src/components/SimpleProcessDesigner/src/consts.ts
+++ b/src/components/SimpleProcessDesigner/src/consts.ts
@ -1,5 +1,6 @@
 export enum NodeType {
-  //// 0 发起人 1审批 2抄送 3条件 4路由
+  //// -1 根节点流程开始节点 0 发起人 1审批 2抄送 3条件 4路由
+  ROOT_NODE = -1,
  /**
   * 发起人节点
   */
@ -37,11 +38,10 @@ NODE_TITLE.set(NodeType.CC_USER_NODE, '抄送人')

 export type WorkFlowNode = {
  id: string,
-  parentId: string,
  type: NodeType,
  name: string,
-  attributes: Map<string,any>,
+  attributes: Object | undefined,
  // 操作人
-  childNode: WorkFlowNode,
-  conditionNodes: WorkFlowNode[]
+  childNode?: WorkFlowNode | undefined,
+  conditionNodes: WorkFlowNode[] | undefined
 }
--- a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
+++ b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
@ -156,7 +156,7 @@
 </template>
 <script lang="ts" setup>
 import { ref, watch, computed, toRaw } from 'vue'
-import { approveMethods, setApproverStr } from '../util'
+import { approveMethods } from '../util'
 import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
 import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
 import { defaultProps, handleTree } from '@/utils/tree'
@ -165,7 +165,7 @@ import * as DeptApi from '@/api/system/dept'
 import * as PostApi from '@/api/system/post'
 import * as UserApi from '@/api/system/user'
 import * as UserGroupApi from '@/api/bpm/userGroup'
-let props = defineProps({
+defineProps({
  directorMaxLevel: {
    type: Number,
    default: 0
@ -182,12 +182,8 @@ const candidateConfig = ref({
  approveMethod: undefined
 })
 let approverConfig = ref({})
-let approverVisible = ref(false)
-let approverRoleVisible = ref(false)
-let checkedRoleList = ref([])
-let checkedList = ref([])
 let store = useWorkFlowStoreWithOut()
-let { setApproverConfig, setApprover, setUserTaskConfig } = store
+let { setApprover, setUserTaskConfig } = store
 let approverConfig1 = computed(() => store.approverConfig1)
 let approverDrawer = computed(() => store.approverDrawer)
 const userTaskConfig = computed(() => store.userTaskConfig)
@ -220,47 +216,7 @@ watch(userTaskConfig, (val) => {
 watch(approverConfig1, (val) => {
  approverConfig.value = val.value
 })
-let changeRange = () => {
-  approverConfig.value.nodeUserList = []
-}
-const changeType = (val) => {
-  approverConfig.value.nodeUserList = []
-  approverConfig.value.examineMode = 1
-  approverConfig.value.noHanderAction = 2
-  if (val == 2) {
-    approverConfig.value.directorLevel = 1
-  } else if (val == 4) {
-    approverConfig.value.selectMode = 1
-    approverConfig.value.selectRange = 1
-  } else if (val == 7) {
-    approverConfig.value.examineEndDirectorLevel = 1
-  }
-}
-const addApprover = () => {
-  approverVisible.value = true
-  checkedList.value = approverConfig.value.nodeUserList
-}
-const addRoleApprover = () => {
-  approverRoleVisible.value = true
-  checkedRoleList.value = approverConfig.value.nodeUserList
-}
-const sureApprover = (data) => {
-  approverConfig.value.nodeUserList = data
-  approverVisible.value = false
-}
-const sureRoleApprover = (data) => {
-  approverConfig.value.nodeUserList = data
-  approverRoleVisible.value = false
-}
-const saveApprover = () => {
-  approverConfig.value.error = !setApproverStr(approverConfig.value)
-  setApproverConfig({
-    value: approverConfig.value,
-    flag: true,
-    id: approverConfig1.value.id
-  })
-  closeDrawer()
-}
+
 const saveConfig = () => {
  const rawConfig = toRaw(userTaskConfig.value)
  const { approveMethod, candidateStrategy , candidateParam} = toRaw(candidateConfig.value);
--- a/src/components/SimpleProcessDesigner/src/nodeWrap.vue
+++ b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
@ -6,21 +6,16 @@
 * @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>
+        <span v-if="nodeConfig.type == 0">发起人</span>
        <template v-else>
          <span class="iconfont">{{ nodeConfig.type == 1 ? '' : '' }}</span>
          <input
@ -39,7 +34,7 @@
      <div class="content" @click="setPerson">
        <div class="text">
          <span class="placeholder" v-if="!showText">请选择{{ defaultText }}</span>
-          <span v-html="showText" class="ellipsis-text"  v-else></span>
+          <span v-html="showText" class="ellipsis-text" v-else></span>
        </div>
        <div class="icon-box">
          <i class="anticon anticon-edit" @click="editNode"></i>
@ -59,31 +54,36 @@
        <div class="col-box" v-for="(item, index) in nodeConfig.conditionNodes" :key="index">
          <div class="condition-node">
            <div class="condition-node-box">
+              <div class="title-wrapper" :style="`background: rgb(${bgColors[nodeConfig.type]});`">
+                <input
+                  v-if="isInputList[index]"
+                  type="text"
+                  class="ant-input editable-title-input"
+                  @blur="blurEvent(index)"
+                  @focus="$event.currentTarget.select()"
+                  v-model="item.name"
+                />
+                <span v-else class="editable-title" @click="clickEvent(index)">{{
+                  item.name
+                }}</span>
+                <!-- <span class="priority-title" @click="setPerson(item.priorityLevel)"
+                      >优先级{{ index + 1 }}</span
+                    > -->
+                <i
+                  class="anticon anticon-close close"
+                  @click="delTerm(index)"
+                  v-if="index != nodeConfig.conditionNodes?.length - 1"
+                ></i>
+              </div>
              <div class="auto-judge" :class="isTried && item.error ? 'error active' : ''">
-                <div class="sort-left" v-if="index != 0" @click="arrTransfer(index, -1)">&lt;</div>
-                <div class="title-wrapper">
-                  <input
-                    v-if="isInputList[index]"
-                    type="text"
-                    class="ant-input editable-title-input"
-                    @blur="blurEvent(index)"
-                    @focus="$event.currentTarget.select()"
-                    v-model="item.name"
-                  />
-                  <span v-else class="editable-title" @click="clickEvent(index)">{{
-                    item.name
-                  }}</span>
-                  <span class="priority-title" @click="setPerson(item.priorityLevel)"
-                    >优先级{{ item.priorityLevel }}</span
-                  >
-                  <i class="anticon anticon-close close" @click="delTerm(index)"></i>
-                </div>
-                <div
+                <!-- <div class="sort-left" v-if="index != 0" @click="arrTransfer(index, -1)">&lt;</div> -->
+
+                <!-- <div
                  class="sort-right"
                  v-if="index != nodeConfig.conditionNodes.length - 1"
                  @click="arrTransfer(index)"
                  >&gt;</div
-                >
+                > -->
                <div class="content" @click="setPerson(item.priorityLevel)">{{
                  conditionStr(nodeConfig, index)
                }}</div>
@ -121,18 +121,14 @@ import {
  placeholderList,
  getApproverShowText
 } from './util'
+import { WorkFlowNode } from './consts'
 import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
 let _uid = getCurrentInstance().uid

 let props = defineProps({
  nodeConfig: {
-    type: Object,
-    default: () => ({})
-  },
-  flowPermission: {
-    type: Object,
-    // eslint-disable-next-line vue/require-valid-default-prop
-    default: () => []
+    type: Object as () => WorkFlowNode,
+    default: () => ({}) as WorkFlowNode
  }
 })

@ -161,14 +157,13 @@ onMounted(() => {
    resetConditionNodesErr()
  }
 })
-let emits = defineEmits(['update:flowPermission', 'update:nodeConfig'])
+let emits = defineEmits(['update:nodeConfig'])
 let store = useWorkFlowStoreWithOut()
 let {
  setPromoter,
  setApprover,
  setCopyer,
  setCondition,
-  setFlowPermission,
  setCopyerConfig,
  setConditionsConfig,
  setUserTaskConfig
@ -176,15 +171,17 @@ let {
 // 审批节点的配置
 const userTaskConfig = computed(() => store.userTaskConfig)
 let isTried = computed(() => store.isTried)
-let flowPermission1 = computed(() => store.flowPermission1)
 let approverConfig1 = computed(() => store.approverConfig1)
 let copyerConfig1 = computed(() => store.copyerConfig1)
 let conditionsConfig1 = computed(() => store.conditionsConfig1)
 const showText = computed(() => {
  if (props.nodeConfig.type == 0) return '发起人'
  if (props.nodeConfig.type == 1) {
-    if(props.nodeConfig.attributes){
-      return getApproverShowText(props.nodeConfig.attributes.approveMethod, props.nodeConfig.attributes.candidateStrategy)
+    if (props.nodeConfig.attributes) {
+      return getApproverShowText(
+        props.nodeConfig.attributes.approveMethod,
+        props.nodeConfig.attributes.candidateStrategy
+      )
    } else {
      return ''
    }
@ -196,11 +193,6 @@ watch(userTaskConfig, (approver) => {
    emits('update:nodeConfig', approver.value)
  }
 })
-watch(flowPermission1, (flow) => {
-  if (flow.flag && flow.id === _uid) {
-    emits('update:flowPermission', flow.value)
-  }
-})
 watch(approverConfig1, (approver) => {
  if (approver.flag && approver.id === _uid) {
    emits('update:nodeConfig', approver.value)
@ -240,38 +232,42 @@ const delNode = () => {
  emits('update:nodeConfig', props.nodeConfig.childNode)
 }
 const addTerm = () => {
-  let len = props.nodeConfig.conditionNodes.length + 1
+  const len = props.nodeConfig.conditionNodes.length
+  let lastIndex = props.nodeConfig.conditionNodes.length - 1
  // eslint-disable-next-line vue/no-mutating-props
-  props.nodeConfig.conditionNodes.push({
+  props.nodeConfig.conditionNodes.splice(lastIndex, 0, {
    name: '条件' + len,
    type: 3,
    priorityLevel: len,
    conditionList: [],
-    nodeUserList: [],
    childNode: null
  })
  resetConditionNodesErr()
  emits('update:nodeConfig', props.nodeConfig)
 }
 const delTerm = (index) => {
-  // eslint-disable-next-line vue/no-mutating-props
-  props.nodeConfig.conditionNodes.splice(index, 1)
-  props.nodeConfig.conditionNodes.map((item, index) => {
-    item.priorityLevel = index + 1
-    item.name = `条件${index + 1}`
-  })
-  resetConditionNodesErr()
-  emits('update:nodeConfig', props.nodeConfig)
-  if (props.nodeConfig.conditionNodes.length == 1) {
-    if (props.nodeConfig.childNode) {
-      if (props.nodeConfig.conditionNodes[0].childNode) {
-        reData(props.nodeConfig.conditionNodes[0].childNode, props.nodeConfig.childNode)
-      } else {
-        // eslint-disable-next-line vue/no-mutating-props
-        props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode
+  if (props.nodeConfig.conditionNodes) {
+    // eslint-disable-next-line vue/no-mutating-props
+    props.nodeConfig.conditionNodes.splice(index, 1)
+    props.nodeConfig.conditionNodes.map((item, index) => {
+      // item.priorityLevel = index + 1
+      if (index !== props.nodeConfig.conditionNodes.length - 1) {
+        item.name = `条件${index + 1}`
      }
+    })
+    resetConditionNodesErr()
+    emits('update:nodeConfig', props.nodeConfig)
+    if (props.nodeConfig.conditionNodes.length == 1) {
+      if (props.nodeConfig.childNode) {
+        if (props.nodeConfig.conditionNodes[0].childNode) {
+          reData(props.nodeConfig.conditionNodes[0].childNode, props.nodeConfig.childNode)
+        } else {
+          // eslint-disable-next-line vue/no-mutating-props
+          props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode
+        }
+      }
+      emits('update:nodeConfig', props.nodeConfig.conditionNodes[0].childNode)
    }
-    emits('update:nodeConfig', props.nodeConfig.conditionNodes[0].childNode)
  }
 }
 const reData = (data, addData) => {
@ -285,21 +281,16 @@ const setPerson = (priorityLevel) => {
  var { type } = props.nodeConfig
  if (type == 0) {
    setPromoter(true)
-    setFlowPermission({
-      value: props.flowPermission,
-      flag: false,
-      id: _uid
-    })
  } else if (type == 1) {
    setApprover(true)
-    let showText = undefined;
-    if(_uid === userTaskConfig.value.id) {
+    let showText = undefined
+    if (_uid === userTaskConfig.value.id) {
      showText = userTaskConfig.value.showText
    }
    setUserTaskConfig({
      value: {
        ...JSON.parse(JSON.stringify(props.nodeConfig)),
-        id: 'Activity_'+_uid,
+        id: 'Activity_' + _uid
      },
      flag: false,
      id: _uid,
@ -315,27 +306,30 @@ const setPerson = (priorityLevel) => {
  } else {
    setCondition(true)
    setConditionsConfig({
-      value: JSON.parse(JSON.stringify(props.nodeConfig)),
+      value: {
+        ...JSON.parse(JSON.stringify(props.nodeConfig)),
+        id: 'Gateway_' + _uid
+      },
      priorityLevel,
      flag: false,
      id: _uid
    })
  }
 }
-const arrTransfer = (index, type = 1) => {
-  //向左-1,向右1
-  // eslint-disable-next-line vue/no-mutating-props
-  props.nodeConfig.conditionNodes[index] = props.nodeConfig.conditionNodes.splice(
-    index + type,
-    1,
-    props.nodeConfig.conditionNodes[index]
-  )[0]
-  props.nodeConfig.conditionNodes.map((item, index) => {
-    item.priorityLevel = index + 1
-  })
-  resetConditionNodesErr()
-  emits('update:nodeConfig', props.nodeConfig)
-}
+// const arrTransfer = (index, type = 1) => {
+//   //向左-1,向右1
+//   // eslint-disable-next-line vue/no-mutating-props
+//   props.nodeConfig.conditionNodes[index] = props.nodeConfig.conditionNodes.splice(
+//     index + type,
+//     1,
+//     props.nodeConfig.conditionNodes[index]
+//   )[0]
+//   props.nodeConfig.conditionNodes.map((item, index) => {
+//     item.priorityLevel = index + 1
+//   })
+//   resetConditionNodesErr()
+//   emits('update:nodeConfig', props.nodeConfig)
+// }
 </script>
 <style lang="scss" scoped>
 .ellipsis-text {
@ -351,10 +345,16 @@ const arrTransfer = (index, type = 1) => {
 }

 .start-event-node-circle {
-  width: 10px;
-  height: 10px;
-  margin: auto;
-  background: #dbdcdc;
+  display: flex;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  // margin: auto;
+  // background: #dbdcdc;
+  font-size: 16px;
+  color: #f8f8fa;
+  background-image: linear-gradient(90deg, #ff6a00, #f78b3e), linear-gradient(#ff6a00, #ff6a00);
  border-radius: 50%;
 }

--- a/src/components/SimpleProcessDesigner/src/util.ts
+++ b/src/components/SimpleProcessDesigner/src/util.ts
@ -92,10 +92,22 @@ export const copyerStr = (nodeConfig: any) => {
 export const conditionStr = (nodeConfig, index) => {
  const { conditionList, nodeUserList } = nodeConfig.conditionNodes[index]
  if (conditionList.length == 0) {
-    return index == nodeConfig.conditionNodes.length - 1 &&
-      nodeConfig.conditionNodes[0].conditionList.length != 0
-      ? '其他条件进入此流程'
-      : '请设置条件'
+    // return index == nodeConfig.conditionNodes.length - 1 &&
+    //   nodeConfig.conditionNodes[0].conditionList.length != 0
+    //   ? '其他条件进入此流程'
+    //   : '请设置条件'
+    // return index == nodeConfig.conditionNodes.length - 1 &&
+    //   nodeConfig.conditionNodes[0].conditionList.length != 0
+    //   ? '其他条件进入此流程'
+    //   : '请设置条件'
+    console.log('index===>', index);
+    console.log('nodeConfig.conditionNodes.length===>', nodeConfig.conditionNodes.length);
+    if( index === nodeConfig.conditionNodes.length - 1) {
+      return '其它情况将进入该分支'
+    } else {
+      return '请设置条件'
+    }
+    
  } else {
    let str = ''
    for (let i = 0; i < conditionList.length; i++) {
@ -163,7 +175,7 @@ export const removeEle = (arr, elem, key = 'id') => {
  arr.splice(includesIndex, 1)
 }

-export const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250']
+export const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250','50, 150, 250','248, 107, 248']
 export const placeholderList = ['发起人', '审核人', '抄送人']
 export const setTypes = [
  { value: 1, label: '指定成员' },
--- a/src/components/SimpleProcessDesigner/theme/workflow.css
+++ b/src/components/SimpleProcessDesigner/theme/workflow.css
@ -1174,15 +1174,47 @@ html {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1)
 }

-.dingflow-design .auto-judge .title-wrapper {
+/* .dingflow-design .auto-judge .title-wrapper {
    position: relative;
    font-size: 12px;
    color: #15bc83;
    text-align: left;
-    line-height: 16px
+    height: 24px;
+    line-height: 24px;
+    width: 258px;
+} */
+.dingflow-design  .title-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    font-size: 12px;
+    border-radius: 4px 4px 0 0;
+    text-align: left;
+    height: 24px;
+    line-height: 24px;
+    width: 220px;
+    color: #fff;
+}
+.dingflow-design  .title-wrapper .editable-title {
+    max-width: 120px;
+    padding-left: 10px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis
+}
+.dingflow-design  .title-wrapper .close {
+    padding-right: 10px;
 }

-.dingflow-design .auto-judge .title-wrapper .editable-title {
+/* .dingflow-design  .title-wrapper .priority-title {
+    display: inline-block;
+    float: right;
+    margin-right: 10px;
+    color: rgba(25, 31, 37, .56)
+} */
+
+/* .dingflow-design .auto-judge .title-wrapper .editable-title {
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
@ -1195,7 +1227,7 @@ html {
    float: right;
    margin-right: 10px;
    color: rgba(25, 31, 37, .56)
-}
+} */

 .dingflow-design .auto-judge .placeholder {
    color: #bfbfbf
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/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>