From 931417928f97ccc81c14640938a256e7777bde76 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 27 Apr 2024 00:35:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E5=99=A8-=E5=89=8D=E7=AB=AF=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/model/index.ts                    |   2 +-
 .../src/NodeHandler.vue                       |  70 +++
 .../src/ProcessNodeTree.vue                   |  42 ++
 .../src/SimpleProcessDesigner.vue             | 140 +++++
 .../SimpleProcessDesignerV2/src/consts.ts     |  72 +++
 .../SimpleProcessDesignerV2/src/index.ts      |   4 +
 .../src/nodes/EndEventNode.vue                |  13 +
 .../src/nodes/StartEventNode.vue              |  35 ++
 .../theme/iconfont.ttf                        | Bin 0 -> 2908 bytes
 .../theme/iconfont.woff                       | Bin 0 -> 1976 bytes
 .../theme/iconfont.woff2                      | Bin 0 -> 1480 bytes
 .../theme/simple-process-designer.scss        | 521 ++++++++++++++++++
 src/views/bpm/simpleWorkflow/index.vue        | 167 +-----
 src/views/bpm/simpleWorkflow/index1.vue       | 169 ++++++
 14 files changed, 1081 insertions(+), 154 deletions(-)
 create mode 100644 src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
 create mode 100644 src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
 create mode 100644 src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
 create mode 100644 src/components/SimpleProcessDesignerV2/src/consts.ts
 create mode 100644 src/components/SimpleProcessDesignerV2/src/index.ts
 create mode 100644 src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
 create mode 100644 src/components/SimpleProcessDesignerV2/src/nodes/StartEventNode.vue
 create mode 100644 src/components/SimpleProcessDesignerV2/theme/iconfont.ttf
 create mode 100644 src/components/SimpleProcessDesignerV2/theme/iconfont.woff
 create mode 100644 src/components/SimpleProcessDesignerV2/theme/iconfont.woff2
 create mode 100644 src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
 create mode 100644 src/views/bpm/simpleWorkflow/index1.vue

diff --git a/src/api/bpm/model/index.ts b/src/api/bpm/model/index.ts
index 2e1d4e64..88d3b541 100644
--- a/src/api/bpm/model/index.ts
+++ b/src/api/bpm/model/index.ts
@@ -29,7 +29,7 @@ export const getModelPage = async (params) => {
   return await request.get({ url: '/bpm/model/page', params })
 }
 
-export const getModel = async (id: number) => {
+export const getModel = async (id: string) => {
   return await request.get({ url: '/bpm/model/get?id=' + id })
 }
 
diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
new file mode 100644
index 00000000..7ecbacb5
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="node-handler-wrapper">
+    <div class="node-handler" v-if="props.showAdd">
+     <el-popover  trigger="hover" v-model:visible="popoverShow"  placement="right-start"  width="auto"> 
+          <div class="handler-item-wrapper">
+            <div class="handler-item"  @click="addNode(NodeType.USER_TASK_NODE)">
+              <div class="approve handler-item-icon">
+                <span class="iconfont icon-approve icon-size"></span>
+              </div>
+              <div class="handler-item-text">审批人</div>
+            </div>
+            <!-- <div class="handler-item" @click="addNode(NodeType.CONDITION_NODE)">
+              <div class="handler-item-icon">
+                <span class="iconfont icon-size icon-exclusive"></span>
+              </div>
+              <div class="handler-item-text">条件分支</div>
+            </div> -->
+          </div>
+          <template #reference>
+            <div class="add-icon"><Icon icon="ep:plus" /></div>
+          </template>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_NAME } from './consts'
+import { generateUUID } from '@/utils'
+defineOptions({
+  name: 'NodeHandler'
+})
+const popoverShow = ref(false)
+
+const props = defineProps({
+  childNode: {
+    type: Object as () => SimpleFlowNode,
+    default: null
+  },
+  showAdd: {
+    // 是否显示添加节点
+    type: Boolean,
+    default: true
+  }
+})
+
+const emits = defineEmits(['update:childNode'])
+
+const addNode = (type: number) => {
+  popoverShow.value = false
+  if (type === NodeType.USER_TASK_NODE) {
+    const data: SimpleFlowNode = {
+      id:  generateUUID(),
+      name: NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string,
+      showText: '',
+      type: NodeType.USER_TASK_NODE,
+      // 审批节点配置
+      attributes: {
+        approveMethod: 1,
+        candidateStrategy: 30,
+        candidateParam: undefined
+      },
+      childNode: props.childNode
+    }
+    emits('update:childNode', data)
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
new file mode 100644
index 00000000..855ca63e
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@@ -0,0 +1,42 @@
+<template>
+  <!-- 开始节点 -->
+  <StartEventNode v-if="currentNode && currentNode.type === NodeType.START_EVENT_NODE" :flow-node ="currentNode" />
+
+  <!-- 递归显示子节点  -->
+  <ProcessNodeTree v-if="currentNode && currentNode.childNode"  v-model:flow-node="currentNode.childNode"/>
+
+  <!-- 结束节点 -->
+  <EndEventNode v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE"/>
+</template>
+<script setup lang='ts'>
+import StartEventNode from './nodes/StartEventNode.vue';
+import EndEventNode from './nodes/EndEventNode.vue';
+
+import { SimpleFlowNode, NodeType }  from './consts';
+defineOptions({
+  name: 'ProcessNodeTree'
+})
+const props = defineProps({
+  flowNode : {
+    type: Object as () => SimpleFlowNode,
+    default: () => null 
+  }
+})
+const emits = defineEmits(['update:flowNode'])
+
+const currentNode = ref<SimpleFlowNode>(props.flowNode);
+
+// 重要：监控节点变化. 能动态新增、删除节点
+watch(() => props.flowNode, (newValue) => {  
+  console.log("Flow Nodes changed", newValue);
+  currentNode.value = newValue;  
+});
+
+// const handleModelValueUpdate = (updateValue) => {
+//   console.log('handleModelValueUpdate', updateValue)
+//   emits('update:flowNode', updateValue);
+// } 
+</script>
+<style lang='scss' scoped>
+
+</style>
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
new file mode 100644
index 00000000..85cf3e66
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="simple-flow-canvas">
+    <div class="simple-flow-container">
+      <div class="top-area-container">
+        <div class="top-actions">
+          <div class="canvas-control">
+            <span class="control-scale-group">
+              <span class="control-scale-button"> <Icon icon="ep:plus" @click="zoomOut()" /></span>
+              <span class="control-scale-label">{{ scaleValue }}%</span>
+              <span class="control-scale-button"><Icon icon="ep:minus" @click="zoomIn()" /></span>
+            </span>
+          </div>
+          <el-button type="primary" @click="saveSimpleFlowModel">保存</el-button>
+          <!-- <el-button type="primary">全局设置</el-button> -->
+        </div>
+      </div>
+      <div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
+        <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
+      </div>
+    </div>
+    <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
+      <div v-for="(item, index) in errorNodes" :key="index">
+          {{ item.name }}
+      </div>
+      <template #footer>
+        <el-button type="primary" @click="errorDialogVisible = false" >知道了</el-button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProcessNodeTree from './ProcessNodeTree.vue';
+import { saveBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
+import { SimpleFlowNode, NodeType } from './consts'
+
+defineOptions({
+  name: 'SimpleProcessDesigner'
+})
+
+const router = useRouter() // 路由
+const props = defineProps({
+  modelId: String
+})
+const message = useMessage() // 国际化
+const processNodeTree = ref<SimpleFlowNode>({
+  name: '开始',
+  type: NodeType.START_EVENT_NODE,
+  id: 'StartEvent_1',
+  childNode: {
+    id: 'EndEvent_1',
+    name: '结束',
+    type: NodeType.END_EVENT_NODE
+  }
+})
+
+const errorDialogVisible = ref(false)
+let errorNodes: SimpleFlowNode[] = []
+const saveSimpleFlowModel = async () => {
+  console.log('processNodeTree===>', processNodeTree.value)
+  if (!props.modelId) {
+    message.error('缺少模型 modelId 编号')
+    return
+  }
+  errorNodes = []
+  validateNode(processNodeTree.value, errorNodes)
+  console.log('errorNodes is ', errorNodes)
+  if (errorNodes.length > 0) {
+    errorDialogVisible.value = true
+  }
+  // const data = {
+  //   modelId: props.modelId,
+  //   simpleModelBody: simpleWorkFlowNodes.value
+  // }
+  // console.log('request json data1 is ', data)
+  // const result = await saveBpmSimpleModel(data)
+  // console.log('save the result is ', result)
+  // if (result) {
+  //   message.success('修改成功')
+  //   close()
+  // } else {
+  //   message.alert('修改失败')
+  // }
+}
+const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
+  if (node) {
+    const { type, showText, conditionNodes } = node
+    if (type == NodeType.END_EVENT_NODE) {
+      return
+    }
+    if (type == NodeType.START_EVENT_NODE) {
+      validateNode(node.childNode, errorNodes)
+    }
+
+    if (type === NodeType.USER_TASK_NODE) {
+      if (!showText) {
+        errorNodes.push(node)
+      }
+      validateNode(node.childNode, errorNodes)
+    }
+    if (type === NodeType.CONDITION_NODE) {
+      if (!showText) {
+        errorNodes.push(node)
+      }
+      validateNode(node.childNode, errorNodes)
+    }
+
+    if (type == NodeType.EXCLUSIVE_NODE) {
+      conditionNodes?.forEach((item) => {
+        validateNode(item, errorNodes)
+      })
+      validateNode(node.childNode, errorNodes)
+    }
+  }
+}
+const close = () => {
+  router.push({ path: '/bpm/manager/model' })
+}
+let scaleValue = ref(100)
+
+const zoomOut = () => {
+  if (scaleValue.value == 300) {
+    return
+  }
+  scaleValue.value += 10
+}
+const zoomIn = () => {
+  if (scaleValue.value == 50) {
+    return
+  }
+  scaleValue.value -= 10
+}
+onMounted(async () => {
+  const result = await getBpmSimpleModel(props.modelId)
+  if (result) {
+    console.log('get the result is ', result)
+    processNodeTree.value = result
+  }
+})
+</script>
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
new file mode 100644
index 00000000..72450b72
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -0,0 +1,72 @@
+// @ts-ignore
+import { DictDataVO } from '@/api/system/dict/types'
+
+export enum NodeType {
+  /**
+   * 发起人节点
+   */
+  START_EVENT_NODE = 0,
+  /**
+   * 结束节点
+   */
+  END_EVENT_NODE = -2,
+
+  /**
+   * 审批人节点
+   */
+  USER_TASK_NODE = 1,
+ 
+  /**
+   * 条件节点
+   */
+  CONDITION_NODE = 3,
+  /**
+   * 条件分支节点
+   */
+  EXCLUSIVE_NODE = 4,
+  /**
+   * 并行分支分叉节点
+   */
+  PARALLEL_NODE_FORK = 5,
+  /**
+   * 并行分支聚合
+   */
+  PARALLEL_NODE_JOIN = 6,
+  /**
+   * 包容分支分叉节点
+   */
+  INCLUSIVE_NODE_FORK = 7,
+  /**
+   * 包容分支聚合节点
+   */
+  INCLUSIVE_NODE_JOIN = 8
+}
+
+export type SimpleFlowNode = {
+  id: string,
+  type: NodeType,
+  name: string,
+  showText?: string,
+  attributes?: any,
+  // 孩子节点
+  childNode?: SimpleFlowNode,
+  // 条件节点
+  conditionNodes?: SimpleFlowNode[]
+}
+
+export const NODE_DEFAULT_TEXT = new Map<number,string>()
+NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置该节点')
+NODE_DEFAULT_TEXT.set(NodeType.CONDITION_NODE, '请设置条件')
+
+export const NODE_DEFAULT_NAME = new Map<number,string>()
+NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人')
+NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
+
+
+export const APPROVE_METHODS: DictDataVO [] = [
+  { label: '单人审批', value: 1 },
+  { label: '多人会签(需所有审批人同意)', value: 2 },
+  { label: '多人或签(一名审批人同意即可)', value: 3 },
+  { label: '依次审批(按顺序依次审批)', value: 4 }
+  // TODO 更多的类型
+]
\ No newline at end of file
diff --git a/src/components/SimpleProcessDesignerV2/src/index.ts b/src/components/SimpleProcessDesignerV2/src/index.ts
new file mode 100644
index 00000000..a53dcf38
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/index.ts
@@ -0,0 +1,4 @@
+import SimpleProcessDesigner from './SimpleProcessDesigner.vue'
+import '../theme/simple-process-designer.scss'
+
+export { SimpleProcessDesigner }
\ No newline at end of file
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
new file mode 100644
index 00000000..3278e7b8
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="end-node-wrapper">
+    <div class="end-node-box">
+      <span class="node-fixed-name" title="结束">结束</span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+defineOptions({
+  name: 'EndEventNode'
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/StartEventNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/StartEventNode.vue
new file mode 100644
index 00000000..7835c959
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/StartEventNode.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="start-node-wrapper">
+    <div class="start-node-container">
+      <div class="start-node-box">
+        <Icon icon="ep:avatar" />
+        <span class="node-fixed-name" :title="currentNode.name">{{currentNode.name}}</span>
+        <Icon icon="ep:arrow-right-bold" />
+      </div>
+      <!-- 传递子节点给添加节点组件。会在子节点后面添加节点 -->
+      <node-handler v-if="currentNode" v-model:child-node="currentNode.childNode" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import NodeHandler from '../NodeHandler.vue'
+import { SimpleFlowNode }  from '../consts';
+defineOptions({
+  name: 'StartEventNode'
+})
+const props = defineProps({
+  flowNode : {
+    type: Object as () => SimpleFlowNode,
+    default: () => null
+  }
+});
+const currentNode = ref<SimpleFlowNode>(props.flowNode);
+
+watch(() => props.flowNode, (newValue) => {  
+  console.log('start node value changed=================>', newValue);
+  currentNode.value = newValue;  
+}); 
+</script>
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/SimpleProcessDesignerV2/theme/iconfont.ttf b/src/components/SimpleProcessDesignerV2/theme/iconfont.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..c2dcd3f422eda69e3cb3520c32c67528a6f82944
GIT binary patch
literal 2908
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

literal 0
HcmV?d00001

diff --git a/src/components/SimpleProcessDesignerV2/theme/iconfont.woff b/src/components/SimpleProcessDesignerV2/theme/iconfont.woff
new file mode 100644
index 0000000000000000000000000000000000000000..e20cfa28ccfb331b1598919902c25269ed71c7d7
GIT binary patch
literal 1976
zcmY*adpy%^8~@FQWsY;|Fwr9_B{PzVg?OAEMhg*bGt8W}LZ-qLbLi1K(UZfRCS@;=
zXp-ooIiIB@L`W)!tVm5#-rwHCAMf?~d_VW~{odDoU)S}=eciG6-+u=n0BEue079}N
z{Qkow{{Nc;!P6E1AaGDU2I7>?HNA^?f)NJP>_9F7$x_p~i4s9(fLa>J6To%K@>2La
zYIs~Q07!vnp*H{kmOBrbObrPl2LgaJ7mPCkVYctjI=v831hsyUqd@GHor0!?L_{+|
zZ64%`5?!(pPNzuX)<IWU0;mqmJc7&w^U6r-(*~gfQ3paJ$q_-IwjZp+8q7~sF0-s*
z(4(TkenY?*R}g{MGRG5`TnZ_WM4AaelWHiW^XI;7BhU0X9qOTQ0!U;Qz_G*>81FN&
z%1VNELVIgjG)0}@t7%ez{xNAsKysE$CUJ$rUZL<sPc%CzsZ`t6q&XNJFb8B{YA_}w
zX$Y<QfV^yxu~p*0<mV?zNlD)op`1XHoku$ih__U5V{(_XY~-Yj<?V^DeC^s_qYJQC
zy3V~h=hwqE_37W!d0R#8>5S36&&OR6KZTHr!4aAcK6$8(up{oB>1yY|&lKI1YI{xp
zi2LL9@u|cuy_LMDa>RvSkzX!x28kbPr>CpC==#rChn?zfhasuq&ODof?2w`Q<W;G;
zm%3sA>>-FS9ftB$Yo>~VM}Ho97$zzl-}c%`)GrFZK)G;KAZUs#D{y^&C)jDl`(;|K
z{z>C<XHVD>IX!s%ijAqdih)e2dP)v%trTC1dx6xxtlTbZW2chL`z1YIDXymZGIFuv
z$xo9?gW|$t`;&)`Ykr<)YUy!O<SNpY%`Mz_ZEC>ugl^leXsnyLYw>2VDsY0T{1ZqF
z{=M7o$JXzg+bh@_gE1B#a318+W)!T?s1i6ci;Xfc{A-xjz%9bOLEI@+DM-(1SVw2E
zyk~W{nHLP<UQv5>R)3t@p#v+vI~-t->@d0W+tWHdACHa4$zy*uI%Zp#*~00LT4G(b
zk<)D`n5sSxofZY<qaG`bwx<&lPA_I|!o53!PCu$WoS-?K?hkJ}V0_`%Kx`ecLzXVg
zU@A??L@D_<!tiHpRy}tAWYcG8fi9`e-3}ov7h>pvg+FeZh?0FWc6y3N!}y`jJ8y<r
zBiJo$_?)i7*F2Sv-!3qR&*h`eDi`}!htULH^~<K05*rxHoZ}5l_&)m&9doE~s~3ir
z9(9Fx$_AXBCmvip=4BSv@+H9K3h{MvF<}p;a4l`S&r)v9nX~!k7SF^arNm6*iyDPF
zR*l!iXxLY$3hAOgpOK>&>oy7l=<783oM>L*9k<N7e7C=$_Zz;+b920LFjwU6zqzoO
zv$$l?z`ILuP@noO2T47(yZNr%qyCClNMTOZ!Wz#lwj#lI#7#VWEjD%{6(N2pm-_HW
zI#<?9&^i4!)&u2QQvS=-a-@zv#3&N)qPOg2#$n4!%Jb@jcfN5nKY4TXbWHKvcn1{T
zIijw_>-lO?wQ*>!8Tx>mf*So(1hNy3tK{{XjPx((9`8pWD!(pxQz3p-%Y-w$@J}w>
zAiGWbu?nh>dtB8=t;%s4rEXojv4y=ukm-8W?^f4DwrKbrDF%mNiXJTVI^8?(#~V#I
zPE0~yMPUgw!RO1n;uY9eC|F!j=94uY<Lw?|_lzy4Oa4<rr)af8&Q_?QHZ!hVkLN<O
z81r>mtadUPYhnLri#33nR#n}96UoyELgAEpV1i596Nj=6dGQFZeK1~ddzN}%?KgtS
z1`{$Lzdhq-u7TCi!OxgmM%-7#FL!*+t6B^(YA)pgC*}&qRzxa(OM^=fZJSmc8eRXc
zHNTg*t8qthHZ#6fV1U(=ZFuwqXHZ6%ohND{7I>03`R|zo%>H%zAGc<|M>Jy?0yImg
zE6{3%ZzMty&?r?-UyBfilm?FMm&5!oK5~6psNB{HNLk;=f~eO(0S5&s26z{lL?X2$
zK_HWW7C7}J76{w`-a~vLFQxwYZ!Quw4V+~FL|^B<l&uVVi-dy$$Sep8ygMb!DzepD
zIi<LT1IyX(eA|@fbzncTXEVo<?_P4ZL{{+Lp?=iY$ngc%^*Tp&4!#f)mEjmSb^>bu
z_|-UlsyR=q2N2byrmi-9I6U5_C%AF2L0HDPxshFiPtd3?O)p{;Zd5X$MoiVn`;<<_
zqQs7>lvuLT!*%8A8JXf%&qZP@?)#Yrw(KT+l)oi+6unZNQV<gNM!3iyjyf{I_Y8U7
zeOtu5{xv`qzs$FMW=70A6?1jaW9P!D2};4`rg^L;zdPSfA+GZ6SVe#S14aLu=)+47
zC$i>kLXh&LQsWc~_XL@(^;T|={7F0eXzKS|k+fNw4{a+3KVRR?*FK+eSSotZPq*=T
zYn+AabwlEkM@;m=$iDn!(;VLcr-1vjN|uv<^OIjd4_*7Ge0<#_o@%0dKW7s%mQD9&
zawEEJ<XAe&(nH^a`LC-e@@DSndD7mP9~uun8fs%N4y+jo$*iulZIG<zC+`<^O?7+-
f71y2f@x0+TEn^n;z{NDO%D{OI5aE#ErwRNE)wo%0

literal 0
HcmV?d00001

diff --git a/src/components/SimpleProcessDesignerV2/theme/iconfont.woff2 b/src/components/SimpleProcessDesignerV2/theme/iconfont.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..77bbd1b3621996d06b22ff96ebc4d03180784a64
GIT binary patch
literal 1480
zcmV;(1vmP4Pew8T0RR9100qbZ3jhEB01I3I00n#i0RR9100000000000000000000
z0000SR0d!GgI)@W7>8>CHUcCA919Qt1Rw>3X9r{(-3d{YP)-Ng4@r^|DH0(d0Nh~|
zL;wI_fdw1@41{?2Z@>TTGc#BI$4r{3MOGJ2&?1EHl|{1m@CNl=E!~DzWmBt=_bHCr
zRkeKE`;u#OziE!*6h;w;!{Qhe(Tr#K_tKX_=_MuaDk66klx$84V=#ijf7{nSq5uD0
z)y(4o$-ef`LbB$fIqXv~u?ds_t&Y9G>OBR|si^h=o?)Q6c^iR#OYIule0qHcOSdC7
zux>)o8`QaRyT~G#(GAKBCA8{Vx@!?HRHSF=HSj$D`S_(7GbB|O9A*F2lN5%XH2RgF
zdN}!$v`4_@2^BIH9+@c~&pYnQrEFoY=pXx=#bIEuR#JD;@5Ij2u4;Eo_gAk+yD{hv
zgTsID2wAOCB%+3jflNN0tm&i}5p*UZGM%T0n(in>MRyFM(EU{=fhOH$Fh+oQNc_jD
zg}I|he5kAp8Z>n1;?$G@ljTfpVfO6SENyn{btFyW3`21o!LrFDej9@0D2Bmlx~OoI
zG|OMd%?mat%c3n7%O57y3P%a`qA^OfU<5BJ$_GiptZHEqlwXwAoSQA4+k%i!Za|X6
z&8ILA$di|V1b!JtsjHAUEQViuRGCyXb=O!pGNY0&!s^w;V1Yuv7CCYgf`}~`hKNl$
zc>q%z0O0F#L!9Kvb&w&h!aT?qPxS#Fby>)OTNKDmsUimOb&-NqeDWa-FDC4=&`Dak
zU?!L&oT0rgVK8<7xZKdHcnrK{$09i2Ee@JxS(h{PGaBH>%`Y<><R8mQ+aM7!skSMH
zkY>Z<0Gy(k=M2ZOF3=dvYf*WWs&IpH{1SPExO)0>PQlN#)a7Qu|Do%S@bHfDh)bIB
zvLN!6ORA$|YB_O9Q%+Z$6<?Sy@@-n4Z}M$iUTO3#Tv-W%{7ZZ*DlQsqRVKKLxGiq;
z(a#A$kK~Em6ZF9kjW1h8pFUPG4ZE2jwIQ?RikkE=&|Y#_N_5=@4t9EhhJ*$mXKE0J
z`F{DDe9b^jLHy{BnmK+sd<{ZloqzMhyYC}JqTe6m&(j|Z3gyFt)n@Nr!9;j`U_WsG
zB;JAqqD4@Q@TU+*MCGy|l@+6^CASGKi<54OKPxL{Lo@14iSoB~nstRKW8G$*?V*_{
z1U#<cm1vND5Sn`Rf{_9Bi-OU!x;LzJzs+fVF-Wp?GRuk#%M!%-iB$y$R0BVhpRW2;
zF65i8)eYUVXs|OLZZw1jp~|aV$-}fH`G|(UG0!$G*8X!`kY=E6kg;KBa=Uq{+muXs
z$)^Cf_#z10M(>~Z(<{~UJAWU&Jz*OngMG!s0-O-cBCO|*qqOS1Nt;kv?1wP?U3iIB
z{RQ_`WCY;mq;0UQyT3D%Xc^9CX|@6Z5kKP5rEO#HO1^av0-Oct4duUi0E{pBJ#S$A
z$-_LpHl9D^7sww|_4`=n&c(kMkIUQt+WEgs-{;jYM^K=L7jjkmVQ>V$2IXlXW^scw
zWvqQHAZO!jL$Ezrf7rpt-!t4dsYZwuesHQ0H6)D*khP}c3wb_N23QWY)*9%yz{%bN
zjNpum(udhz0m4vkkPP+;vY|fkh5QAT(MC`k>L2<Yjm5(aFgubXPZ3j!@c@g&8X2iM
zpY(>Zj*9$H^nrX;U>F;s-c6s8A-{<&s&3X~mMFc|c&eU_l(Oi&Eh%A<GrP?okYg_*
z606~eM<R@*P;3Ad5|$xTY;OO)8zj@AM7$9HVDl>G)8wc@s0;9C3L|QHB*m4kOcPT~
zLQ>1NG<3S2ji@kTAveCLL=sHM*N8cr0>Y9~h1kDJKgeUyFL=8qQsgL6MIBAF`gWK^
ib*iFE6Nz<$sXQ{NqFL&X*rp?Q!RL2r#zj6-iWC5rIkjv6

literal 0
HcmV?d00001

diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
new file mode 100644
index 00000000..6d2b4130
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -0,0 +1,521 @@
+.simple-flow-canvas {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: auto;
+  background-color: #fafafa;
+  user-select: none;
+
+  .simple-flow-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .top-area-container {
+      position: sticky;
+      inset: 0;
+      display: flex;
+      width: 100%;
+      height: 42px;
+      z-index: 1;
+      // padding: 4px 0;
+      background-color: #fff;
+      justify-content: flex-end;
+      align-items: center;
+
+      .top-actions {
+        display: flex;
+        margin: 4px;
+        margin-right: 8px;
+        align-items: center;
+
+        .canvas-control {
+          font-size: 16px;
+
+          .control-scale-group {
+            display: inline-flex;
+            align-items: center;
+            margin-right: 8px;
+
+            .control-scale-button {
+              display: inline-flex;
+              width: 28px;
+              height: 28px;
+              padding: 2px;
+              text-align: center;
+              cursor: pointer;
+              justify-content: center;
+              align-items: center;
+            }
+
+            .control-scale-label {
+              margin: 0 4px;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+
+    .scale-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      margin-top: 16px;
+      background-color: #fafafa;
+      transform-origin: 50% 0 0;
+      transform: scale(1);
+      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      // 节点容器 定义节点宽度
+      .node-container {
+        width: 200px;
+      }
+      // 节点
+      .node-box {
+        position: relative;
+        display: flex;
+        min-height: 70px;
+        padding: 5px 10px 8px;
+        cursor: pointer;
+        background-color: #fff;
+        flex-direction: column;
+        border: 2px solid transparent;
+        // border-color: #0089ff;
+        border-radius: 8px;
+        // border-color: #0089ff;
+        box-shadow: 0 1px 4px 0 rgba(10, 30, 65, 0.16);
+        transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+        &:hover {
+          // border-color: #0089ff;
+          .node-toolbar {
+            opacity: 1;
+          }
+        }
+
+        // 普通节点标题
+        .node-title-container {
+          display: flex;
+          padding: 4px;
+          cursor: pointer;
+          border-radius: 4px 4px 0 0;
+          align-items: center;
+
+          .node-title-icon {
+            display: flex;
+            align-items: center;
+          }
+
+          .node-title {
+            margin-left: 4px;
+            font-size: 14px;
+            font-weight: 600;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: #1f1f1f;
+            // vertical-align: middle;
+          }
+        }
+
+        // 条件节点标题
+        .branch-node-title-container {
+          display: flex;
+          padding: 4px;
+          cursor: pointer;
+          border-radius: 4px 4px 0 0;
+          align-items: center;
+          justify-content: space-between;
+
+          .branch-title {
+            max-width: 120px;
+            font-size: 13px;
+            font-weight: 600;
+            color: #f60;
+          }
+
+          .branch-priority {
+            min-width: 50px;
+            font-size: 13px;
+          }
+        }
+
+        .node-content {
+          display: flex;
+          min-height: 32px;
+          padding: 4px 8px;
+          margin-top: 4px;
+          line-height: 32px;
+          justify-content: space-between;
+          align-items: center;
+          color: #111f2c;
+          background: rgba(0, 0, 0, 0.03);
+          border-radius: 4px;
+
+          .node-text {
+            display: -webkit-box;
+            overflow: hidden;
+            font-size: 14px;
+            line-height: 24px;
+            text-overflow: ellipsis;
+            word-break: break-all;
+            -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+            -webkit-box-orient: vertical;
+          }
+        }
+
+        .node-toolbar {
+          opacity: 0;
+          position: absolute;
+          top: -26px;
+          right: 10px;
+          display: flex;
+
+          .toolbar-icon {
+            text-align: center;
+            vertical-align: middle;
+            color: #000;
+            border-radius: 4px;
+          }
+        }
+      }
+
+      
+      .node-config-error {
+        border-color: #ff5219;
+      }
+      // 普通节点包装
+      .node-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      // 节点连线处理
+      .node-handler-wrapper {
+        position: relative;
+        display: flex;
+        height: 70px;
+        align-items: center;
+        user-select: none;
+        justify-content: center;
+        flex-direction: column;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          right: 0;
+          left: 0;
+          // bottom: 5px;
+          bottom: 0px;
+          z-index: 0;
+          width: 2px;
+          height: 100%;
+          // height: calc(100% - 5px);
+          margin: auto;
+          background-color: #dedede;
+          content: '';
+        }
+
+        .node-handler {
+          .add-icon {
+            position: relative;
+            top: -5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            width: 25px;
+            height: 25px;
+            color: #fff;
+            background-color: #0089ff;
+            border-radius: 50%;
+
+            &:hover{
+              transform: scale(1.1);
+              
+            }
+          }
+          
+        }
+
+        .node-handler-arrow {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          display: flex;
+          transform: translateX(-50%);
+        }
+      }
+
+      
+      // 条件节点包装
+      .branch-node-wrapper {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-top: 16px;
+
+        .branch-node-container {
+          position: relative;
+          display: flex;
+
+          &::before {
+            position: absolute;
+            height: 100%;
+            width: 4px;
+            background-color:  #fafafa;
+            content: "";
+            left: 50%;
+            transform: translate(-50%);
+          }
+
+          .branch-node-add {
+            position: absolute;
+            top: -18px;
+            left: 50%;
+            z-index: 1;
+            height: 36px;
+            padding: 0 10px;
+            font-size: 12px;
+            line-height: 36px;
+            color: #222;
+            cursor: pointer;
+            background: #fff;
+            border: 2px solid #dedede;
+            border-radius: 18px;
+            transform: translateX(-50%);
+            transform-origin: center center;
+            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+          }
+
+          .branch-node-item {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-width: 280px;
+            padding: 40px 40px 0;
+            background: transparent;
+            border-top: 2px solid #dedede;
+            border-bottom: 2px solid #dedede;
+
+            &::before {
+              position: absolute;
+              width: 2px;
+              height: 100%;
+              margin: auto;
+              inset: 0;
+              background-color: #dedede;
+              content: '';
+            }
+          }
+          // 覆盖条件节点第一个节点左上角的线
+          .branch-line-first-top {
+            position: absolute;
+            top: -5px;
+            left: -1px;
+            width: 50%;
+            height: 7px;
+            background-color: #fafafa;
+            content: '';
+          }
+          // 覆盖条件节点第一个节点左下角的线
+          .branch-line-first-bottom {
+            position: absolute;
+            bottom: -5px;
+            left: -1px;
+            width: 50%;
+            height: 7px;
+            background-color: #fafafa;
+            content: '';
+          }
+          // 覆盖条件节点最后一个节点右上角的线
+          .branch-line-last-top {
+            position: absolute;
+            top: -5px;
+            right: -1px;
+            width: 50%;
+            height: 7px;
+            background-color: #fafafa;
+            content: '';
+          }
+          // 覆盖条件节点最后一个节点右下角的线
+          .branch-line-last-bottom {
+            position: absolute;
+            right: -1px;
+            bottom: -5px;
+            width: 50%;
+            height: 7px;
+            background-color: #fafafa;
+            content: '';
+          }
+        }
+      }
+
+      .node-fixed-name {
+        display: inline-block;
+        width: auto;
+        padding: 0 4px;
+        overflow: hidden;
+        text-align: center;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      // 开始节点包装
+      .start-node-wrapper {
+        position: relative;
+        margin-top: 16px;
+
+        .start-node-container {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+
+          .start-node-box {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 90px;
+            height: 36px;
+            padding: 3px 4px;
+            color: #212121;
+            cursor: pointer;
+            // background: #2c2c2c;
+            background: #fafafa;
+            border-radius: 30px;
+            box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
+            box-sizing: border-box;
+          }
+        }
+      }
+
+      // 结束节点包装
+      .end-node-wrapper {
+        margin-bottom: 16px;
+
+        .end-node-box {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 80px;
+          height: 36px;
+          color: #212121;
+          // background: #6e6e6e;
+          background: #fafafa;
+          border-radius: 30px;
+          box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
+          box-sizing: border-box;
+        }
+      }
+
+      // 可编辑的 title 输入框
+      .editable-title-input {
+        height: 20px;
+        line-height: 20px;
+        font-size: 12px;
+        margin-left: 4px;
+        border: 1px solid #d9d9d9;
+        border-radius: 4px;
+        transition: all 0.3s;
+
+        &:focus   {
+          border-color: #40a9ff;
+          outline: 0;
+          box-shadow: 0 0 0 2px rgba(24, 144, 255, .2)
+        }
+      }
+    }
+  }
+
+
+}
+
+// 节点连线气泡卡片样式
+.handler-item-wrapper {
+  display: flex;
+  cursor: pointer;
+
+  .handler-item {
+    margin-right: 8px;
+  }
+
+ .handler-item-icon {
+   width: 80px;
+   height: 80px;
+   background: #fff;
+   border: 1px solid #e2e2e2;
+   border-radius: 50%;
+   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+   user-select: none;
+   text-align: center;
+
+   &:hover {
+    background: #3296fa;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+   }
+
+   .icon-size {
+     font-size: 35px;
+     line-height: 80px;
+   }
+ }
+
+ .approve {
+   color: #ff943e;
+ }
+
+ .handler-item-text {
+   margin-top: 4px;
+   width: 80px;
+   text-align: center;
+ }
+
+}
+
+// iconfont 样式
+@font-face {
+  font-family: "iconfont"; /* Project id 4495938 */
+  src: url('iconfont.woff2?t=1712392083512') format('woff2'),
+      url('iconfont.woff?t=1712392083512') format('woff'),
+      url('iconfont.ttf?t=1712392083512') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-Inclusive:before {
+  content: "\e602";
+}
+
+.icon-copy:before {
+  content: "\e7eb";
+}
+
+.icon-handle:before {
+  content: "\e61c";
+}
+
+.icon-exclusive:before {
+  content: "\e717";
+}
+
+.icon-approve:before {
+  content: "\e715";
+}
+
+.icon-parallel:before {
+  content: "\e688";
+}
\ No newline at end of file
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simpleWorkflow/index.vue
index 7ac48369..619b9c4a 100644
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
@@ -1,169 +1,30 @@
 <template>
-  <div>
-    <section class="dingflow-design">
-      <div class="sticky right-0 top-0 z-10 w-full flex justify-end bg-white p-2 pr-4">
-        <el-button type="primary" size="small" @click="test">保存(测试中，待完善)</el-button>
-      </div>
-      <div class="box-scale">
-        <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-event">
-          <div class="end-event-circle">结束</div>
-        </div>
-      </div>
-    </section>
-  </div>
-  <approverDrawer/>
-  <copyerDrawer />
+  <SimpleProcessDesigner :model-id="modelId"/>
 </template>
-<script lang="ts" setup>
-import nodeWrap from '@/components/SimpleProcessDesigner/src/nodeWrap.vue'
-import approverDrawer from '@/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue'
-import copyerDrawer from '@/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue'
-import { WorkFlowNode } from '@/components/SimpleProcessDesigner/src/consts'
-import { ref } from 'vue'
-import { saveBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
+<script setup lang='ts'>
+import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/';
 import { getModel } from '@/api/bpm/model'
 import { getForm, FormVO } from '@/api/bpm/form'
-defineOptions({ name: 'SimpleWorkflowDesignEditor' })
-const uid = getCurrentInstance().uid
-const router = useRouter() // 路由
-const { query } = useRoute() // 路由的查询
-const modelId = query.modelId
-const message = useMessage() // 国际化
-const nodeConfig = ref<WorkFlowNode>({
-  name: '发起人',
-  type: 0,
-  id: 'StartEvent_' + uid,
-  childNode: undefined,
-  attributes: undefined,
-  conditionNodes: []
+defineOptions({
+  name: 'SimpleWorkflowDesignEditor'
 })
-// 默认的表单字段权限
-const defaultFieldsPermission: any[] = []
-const  formType = ref(20);
-provide('defaultFieldsPermission', defaultFieldsPermission)
+const { query } = useRoute() // 路由的查询
+const modelId : string | undefined = query.modelId  as string;
+const formFields = ref<string[]>([])
+const formType = ref(20);
+provide('formFields', formFields)
 provide('formType', formType)
-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 data1 = {
-    modelId: modelId,
-    simpleModelBody: toRaw(nodeConfig.value)
-  }
-  const data = {
-    modelId: modelId,
-    simpleModelBody: nodeConfig.value
-  }
-  console.log('request json data1 is ', data1)
-  const result = await saveBpmSimpleModel(data)
-  console.log('save the result is ', result)
-  if (result) {
-    message.success('修改成功')
-    close()
-  } else {
-    message.alert('修改失败')
-  }
-}
-const close = () => {
-  router.push({ path: '/bpm/manager/model' })
-}
-onMounted(async () => {
-  const bpmnModel = await getModel(modelId)
+onMounted( async () => {
+  const bpmnModel = await getModel(modelId);
   if (bpmnModel) {
     formType.value = bpmnModel.formType
     if (formType.value === 10) {
       const bpmnForm = await getForm(bpmnModel.formId) as unknown as FormVO
-      const formFields = bpmnForm?.fields
-      if (formFields) {
-        formFields.forEach((fieldStr: string) => {
-          const { field, title } = JSON.parse(fieldStr)
-          defaultFieldsPermission.push({
-            field,
-            title,
-            permission: '2'
-          })
-        })
-      }
-      console.log('defaultFieldsPermissions', defaultFieldsPermission);
+      formFields.value = bpmnForm?.fields
     }
   }
-  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 lang='scss' scoped>
 
-.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>
diff --git a/src/views/bpm/simpleWorkflow/index1.vue b/src/views/bpm/simpleWorkflow/index1.vue
new file mode 100644
index 00000000..6ee5b4e3
--- /dev/null
+++ b/src/views/bpm/simpleWorkflow/index1.vue
@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <section class="dingflow-design">
+      <div class="sticky right-0 top-0 z-10 w-full flex justify-end bg-white p-2 pr-4">
+        <el-button type="primary" size="small" @click="test">保存(测试中，待完善)</el-button>
+      </div>
+      <div class="box-scale">
+        <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-event">
+          <div class="end-event-circle">结束</div>
+        </div>
+      </div>
+    </section>
+  </div>
+  <approverDrawer/>
+  <copyerDrawer />
+</template>
+<script lang="ts" setup>
+import nodeWrap from '@/components/SimpleProcessDesigner/src/nodeWrap.vue'
+import approverDrawer from '@/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue'
+import copyerDrawer from '@/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue'
+import { WorkFlowNode } from '@/components/SimpleProcessDesigner/src/consts'
+import { ref } from 'vue'
+import { saveBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
+import { getModel } from '@/api/bpm/model'
+import { getForm, FormVO } from '@/api/bpm/form'
+defineOptions({ name: 'SimpleWorkflowDesignEditor2' })
+const uid = getCurrentInstance().uid
+const router = useRouter() // 路由
+const { query } = useRoute() // 路由的查询
+const modelId = query.modelId
+const message = useMessage() // 国际化
+const nodeConfig = ref<WorkFlowNode>({
+  name: '发起人',
+  type: 0,
+  id: 'StartEvent_' + uid,
+  childNode: undefined,
+  attributes: undefined,
+  conditionNodes: []
+})
+// 默认的表单字段权限
+const defaultFieldsPermission: any[] = []
+const  formType = ref(20);
+provide('defaultFieldsPermission', defaultFieldsPermission)
+provide('formType', formType)
+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 data1 = {
+    modelId: modelId,
+    simpleModelBody: toRaw(nodeConfig.value)
+  }
+  const data = {
+    modelId: modelId,
+    simpleModelBody: nodeConfig.value
+  }
+  console.log('request json data1 is ', data1)
+  const result = await saveBpmSimpleModel(data)
+  console.log('save the result is ', result)
+  if (result) {
+    message.success('修改成功')
+    close()
+  } else {
+    message.alert('修改失败')
+  }
+}
+const close = () => {
+  router.push({ path: '/bpm/manager/model' })
+}
+onMounted(async () => {
+  const bpmnModel = await getModel(modelId)
+  if (bpmnModel) {
+    formType.value = bpmnModel.formType
+    if (formType.value === 10) {
+      const bpmnForm = await getForm(bpmnModel.formId) as unknown as FormVO
+      const formFields = bpmnForm?.fields
+      if (formFields) {
+        formFields.forEach((fieldStr: string) => {
+          const { field, title } = JSON.parse(fieldStr)
+          defaultFieldsPermission.push({
+            field,
+            title,
+            permission: '2'
+          })
+        })
+      }
+      console.log('defaultFieldsPermissions', defaultFieldsPermission);
+    }
+  }
+  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');
+
+.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>