From 4c4d13cdd0a056c6d5cb803c240f721642f61970 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 24 Mar 2024 20:35:53 +0800
Subject: [PATCH 01/62] =?UTF-8?q?=E6=94=B9=E9=80=A0=E5=AE=A1=E6=89=B9?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE.=20=E6=95=B4=E5=90=88=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=AD=E7=9A=84=E4=BB=BB=E5=8A=A1=E7=9A=84=E5=80=99=E9=80=89?=
 =?UTF-8?q?=E4=BA=BA=E7=AD=96=E7=95=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesigner/src/addNode.vue     |  39 ++-
 .../SimpleProcessDesigner/src/consts.ts       |  47 +++
 .../src/drawer/approverDrawer.vue             | 311 ++++++++++++++++++
 .../SimpleProcessDesigner/src/nodeWrap.vue    | 157 +++++----
 .../SimpleProcessDesigner/src/util.ts         |  29 ++
 src/store/modules/simpleWorkflow.ts           |   6 +-
 src/views/bpm/simpleWorkflow/index.vue        |  23 +-
 7 files changed, 538 insertions(+), 74 deletions(-)
 create mode 100644 src/components/SimpleProcessDesigner/src/consts.ts
 create mode 100644 src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue

diff --git a/src/components/SimpleProcessDesigner/src/addNode.vue b/src/components/SimpleProcessDesigner/src/addNode.vue
index 6d09ae8a..9686165c 100644
--- a/src/components/SimpleProcessDesigner/src/addNode.vue
+++ b/src/components/SimpleProcessDesigner/src/addNode.vue
@@ -32,7 +32,7 @@
     </div>
   </div>
 </template>
-<script setup>
+<script lang="ts" setup>
 import { ref } from 'vue'
 let props = defineProps({
   childNodeP: {
@@ -47,23 +47,36 @@ const addType = (type) => {
   if (type != 4) {
     var data
     if (type == 1) {
+      // data = {
+      //   name: '审核人',
+      //   error: true,
+      //   type: 1,
+      //   settype: 1,
+      //   selectMode: 0,
+      //   selectRange: 0,
+      //   directorLevel: 1,
+      //   examineMode: 1,
+      //   noHanderAction: 1,
+      //   examineEndDirectorLevel: 0,
+      //   childNode: props.childNodeP,
+      //   nodeUserList: []
+      // }
       data = {
-        nodeName: '审核人',
+        name: '审核人',
         error: true,
         type: 1,
-        settype: 1,
-        selectMode: 0,
-        selectRange: 0,
-        directorLevel: 1,
-        examineMode: 1,
-        noHanderAction: 1,
-        examineEndDirectorLevel: 0,
+        // 审批节点配置
+        attributes : {
+          approveMethod : undefined,
+          candidateStrategy: undefined,
+          candidateParam: []
+        },
         childNode: props.childNodeP,
         nodeUserList: []
       }
     } else if (type == 2) {
       data = {
-        nodeName: '抄送人',
+        name: '抄送人',
         type: 2,
         ccSelfSelectFlag: 1,
         childNode: props.childNodeP,
@@ -73,12 +86,12 @@ const addType = (type) => {
     emits('update:childNodeP', data)
   } else {
     emits('update:childNodeP', {
-      nodeName: '路由',
+      name: '路由',
       type: 4,
       childNode: null,
       conditionNodes: [
         {
-          nodeName: '条件1',
+          name: '条件1',
           error: true,
           type: 3,
           priorityLevel: 1,
@@ -87,7 +100,7 @@ const addType = (type) => {
           childNode: props.childNodeP
         },
         {
-          nodeName: '条件2',
+          name: '条件2',
           type: 3,
           priorityLevel: 2,
           conditionList: [],
diff --git a/src/components/SimpleProcessDesigner/src/consts.ts b/src/components/SimpleProcessDesigner/src/consts.ts
new file mode 100644
index 00000000..1c8f1b2c
--- /dev/null
+++ b/src/components/SimpleProcessDesigner/src/consts.ts
@@ -0,0 +1,47 @@
+export enum NodeType {
+  //// 0 发起人 1审批 2抄送 3条件 4路由
+  /**
+   * 发起人节点
+   */
+  START_USER_NODE = 0,
+  /**
+   * 审批人节点
+   */
+  APPROVE_USER_NODE = 1,
+  /**
+   * 抄送人节点
+   */
+  CC_USER_NODE = 2,
+  /**
+   * 条件节点
+   */
+  CONDITION_NODE = 3,
+  /**
+   * 路由节点
+   */
+  ROUTER_NODE = 4
+}
+
+export const NODE_BG_COLOR = new Map()
+NODE_BG_COLOR.set(NodeType.START_USER_NODE, '#87, 106, 149')
+NODE_BG_COLOR.set(NodeType.APPROVE_USER_NODE, '#255, 148, 62')
+NODE_BG_COLOR.set(NodeType.CC_USER_NODE, '#50, 150, 250')
+
+/**
+ * 节点的标题
+ */
+export const NODE_TITLE = new Map()
+NODE_TITLE.set(NodeType.START_USER_NODE, '发起人')
+NODE_TITLE.set(NodeType.APPROVE_USER_NODE, '审批人')
+NODE_TITLE.set(NodeType.CC_USER_NODE, '抄送人')
+
+export type WorkFlowNode = {
+  id: string,
+  parentId: string,
+  type: NodeType,
+  name: string,
+  attributes: Map<string,any>,
+  // 操作人
+  childNode: WorkFlowNode,
+  conditionNodes: WorkFlowNode[]
+}
\ No newline at end of file
diff --git a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
new file mode 100644
index 00000000..5a19d52e
--- /dev/null
+++ b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
@@ -0,0 +1,311 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="visible"
+    class="set_promoter"
+    :show-close="false"
+    :size="550"
+    :before-close="saveConfig"
+  >
+    <template #header>
+      <div class="user-task-header">审批设置</div>
+    </template>
+    <div>
+      <el-form label-position="top" label-width="100px">
+        <el-form-item label="审批方式" prop="approveMethod">
+          <el-select v-model="candidateConfig.approveMethod" style="width: 100%" clearable>
+            <el-option
+              v-for="dict in approveMethods"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="审批人规则类型" prop="candidateStrategy">
+          <el-select v-model="candidateConfig.candidateStrategy" style="width: 100%" clearable @change="changecandidateStrategy">
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item
+          v-if="candidateConfig.candidateStrategy == 10"
+          label="指定角色"
+          prop="candidateParam"
+        >
+          <el-select
+            v-model="candidateConfig.candidateParam"
+            clearable
+            multiple
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in roleOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="candidateConfig.candidateStrategy == 20 || candidateConfig.candidateStrategy == 21"
+          label="指定部门"
+          prop="candidateParam"
+          span="24"
+        >
+          <el-tree-select
+            ref="treeRef"
+            v-model="candidateConfig.candidateParam"
+            :data="deptTreeOptions"
+            :props="defaultProps"
+            empty-text="加载中，请稍后"
+            multiple
+            node-key="id"
+            style="width: 100%"
+            show-checkbox
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="candidateConfig.candidateStrategy == 22"
+          label="指定岗位"
+          prop="candidateParam"
+          span="24"
+        >
+          <el-select
+            v-model="candidateConfig.candidateParam"
+            clearable
+            multiple
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in postOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="
+            candidateConfig.candidateStrategy == 30 ||
+            candidateConfig.candidateStrategy == 31 ||
+            candidateConfig.candidateStrategy == 32
+          "
+          label="指定用户"
+          prop="candidateParam"
+          span="24"
+        >
+          <el-select
+            v-model="candidateConfig.candidateParam"
+            clearable
+            multiple
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in userOptions"
+              :key="item.id"
+              :label="item.nickname"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="candidateConfig.candidateStrategy === 40"
+          label="指定用户组"
+          prop="candidateParam"
+        >
+          <el-select
+            v-model="candidateConfig.candidateParam"
+            clearable
+            multiple
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in userGroupOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="candidateConfig.candidateStrategy === 60"
+          label="流程表达式"
+          prop="candidateParam"
+        >
+          <el-input
+            type="textarea"
+            v-model="candidateConfig.candidateParam[0]"
+            clearable
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="demo-drawer__footer clear">
+      <el-button type="primary" @click="saveConfig">确 定</el-button>
+      <el-button @click="closeDrawer">取 消</el-button>
+    </div>
+  </el-drawer>
+</template>
+<script lang="ts" setup>
+import { ref, watch, computed, toRaw } from 'vue'
+import { approveMethods, setApproverStr } from '../util'
+import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
+import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as RoleApi from '@/api/system/role'
+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({
+  directorMaxLevel: {
+    type: Number,
+    default: 0
+  }
+})
+const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
+const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+const deptTreeOptions = ref() // 部门树
+const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
+const candidateConfig = ref({
+  candidateStrategy: undefined,
+  candidateParam: [],
+  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 approverConfig1 = computed(() => store.approverConfig1)
+let approverDrawer = computed(() => store.approverDrawer)
+const userTaskConfig = computed(() => store.userTaskConfig)
+
+let visible = computed({
+  get() {
+    return approverDrawer.value
+  },
+  set() {
+    closeDrawer()
+  }
+})
+watch(userTaskConfig, (val) => {
+  if (val.value.attributes) {
+    candidateConfig.value = val.value.attributes
+  }
+})
+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 = () => {
+  console.log('before userTaskConfig is ', userTaskConfig.value.id)
+  const rawConfig = toRaw(userTaskConfig.value)
+  rawConfig.value.attributes = toRaw(candidateConfig.value)
+  rawConfig.flag = true
+  // TODO 进行校验
+  // setApproverConfig({
+  //     value: approverConfig.value,
+  //     flag: true,
+  //     id: approverConfig1.value.id
+  // })
+  const showText = getApproverShowText()
+  setUserTaskConfig({
+    value: rawConfig.value,
+    flag: true,
+    id: userTaskConfig.value.id,
+    showText
+  })
+  console.log('after is userTaskConfig', userTaskConfig.value)
+  closeDrawer()
+}
+const getApproverShowText = () => {
+  let appoveMethodText = ''
+  approveMethods.forEach((item) => {
+    if (item.value == candidateConfig.value.approveMethod) {
+      appoveMethodText = item.label
+    }
+  })
+  const strategyText = getDictLabel(
+    DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY,
+    candidateConfig.value.candidateStrategy
+  )
+  return `审批方式：${appoveMethodText} <br/>
+          审批人规则类型：按${strategyText}`
+}
+const closeDrawer = () => {
+  setApprover(false)
+}
+const changecandidateStrategy = () => {
+  candidateConfig.value.candidateParam = []
+}
+onMounted(async () => {
+  // 获得角色列表
+  roleOptions.value = await RoleApi.getSimpleRoleList()
+
+  postOptions.value = await PostApi.getSimplePostList()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+  // 获得部门列表
+  const deptOptions = await DeptApi.getSimpleDeptList()
+  deptTreeOptions.value = handleTree(deptOptions, 'id')
+  // 获得用户组列表
+  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
+})
+</script>
+<style lang="scss" scoped>
+.user-task-header {
+  font-size: 16px !important;
+}
+</style>
diff --git a/src/components/SimpleProcessDesigner/src/nodeWrap.vue b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
index 3c9d5eb1..ecfbdfec 100644
--- a/src/components/SimpleProcessDesigner/src/nodeWrap.vue
+++ b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
@@ -6,40 +6,48 @@
  * @FilePath: /Workflow-Vue3/src/components/nodeWrap.vue
 -->
 <template>
-     <div class="node-wrap" v-if="nodeConfig.type < 3">
-      <div class="node-wrap-box" :class="(nodeConfig.type == 0 ? 'start-node ' : '') +(isTried && nodeConfig.error ? 'active error' : '')">
-          <div class="title" :style="`background: rgb(${bgColors[nodeConfig.type]});`">
-            <span v-if="nodeConfig.type == 0">{{ nodeConfig.nodeName }}</span>
-            <template v-else>
-              <span class="iconfont">{{nodeConfig.type == 1?'':''}}</span>
-              <input
-                v-if="isInput"
-                type="text"
-                class="ant-input editable-title-input"
-                @blur="blurEvent()"
-                @focus="$event.currentTarget.select()"
-                v-focus
-                v-model="nodeConfig.nodeName"
-                :placeholder="defaultText"
-              />
-              <span v-else class="editable-title" @click="clickEvent()">{{ nodeConfig.nodeName }}</span>
-              <i class="anticon anticon-close close" @click="delNode"></i>
-            </template>
-          </div>
-          <div class="content" @click="setPerson">
-            <div class="text">
-                <span class="placeholder" v-if="!showText">请选择{{defaultText}}</span>
-                {{showText}}
-            </div>
-            <i class="anticon anticon-right arrow"></i>
-          </div>
-          <div class="error_tip" v-if="isTried && nodeConfig.error">
-            <i class="anticon anticon-exclamation-circle"></i>
-          </div>
+  <div class="node-wrap" v-if="nodeConfig.type < 3">
+    <div
+      class="node-wrap-box"
+      :class="
+        (nodeConfig.type == 0 ? 'start-node ' : '') +
+        (isTried && nodeConfig.error ? 'active error' : '')
+      "
+    >
+      <div class="title" :style="`background: rgb(${bgColors[nodeConfig.type]});`">
+        <span v-if="nodeConfig.type == 0">{{ nodeConfig.name }}</span>
+        <template v-else>
+          <span class="iconfont">{{ nodeConfig.type == 1 ? '' : '' }}</span>
+          <input
+            v-if="isInput"
+            type="text"
+            class="ant-input editable-title-input"
+            @blur="blurEvent()"
+            @focus="$event.currentTarget.select()"
+            v-model="nodeConfig.name"
+            :placeholder="defaultText"
+          />
+          <span v-else class="editable-title" @click="clickEvent()">{{ nodeConfig.name }}</span>
+          <i class="anticon anticon-close close" @click="delNode"></i>
+        </template>
+      </div>
+      <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>
+        </div>
+        <div class="icon-box">
+          <i class="anticon anticon-edit" @click="editNode"></i>
+        </div>
+        <i class="anticon anticon-right arrow"></i>
+      </div>
+      <div class="error_tip" v-if="isTried && nodeConfig.error">
+        <i class="anticon anticon-exclamation-circle"></i>
       </div>
-      <addNode v-model:childNodeP="nodeConfig.childNode" />
     </div>
-    <div class="branch-wrap" v-if="nodeConfig.type == 4">
+    <addNode v-model:childNodeP="nodeConfig.childNode" />
+  </div>
+  <div class="branch-wrap" v-if="nodeConfig.type == 4">
     <div class="branch-box-wrap">
       <div class="branch-box">
         <button class="add-branch" @click="addTerm">添加条件</button>
@@ -55,16 +63,27 @@
                     class="ant-input editable-title-input"
                     @blur="blurEvent(index)"
                     @focus="$event.currentTarget.select()"
-                    v-model="item.nodeName"
+                    v-model="item.name"
                   />
-                  <span v-else class="editable-title" @click="clickEvent(index)">{{ item.nodeName }}</span>
-                  <span class="priority-title" @click="setPerson(item.priorityLevel)">优先级{{ item.priorityLevel }}</span>
+                  <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 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>
+                <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>
                 <div class="error_tip" v-if="isTried && item.error">
-                    <i class="anticon anticon-exclamation-circle"></i>
+                  <i class="anticon anticon-exclamation-circle"></i>
                 </div>
               </div>
               <addNode v-model:childNodeP="item.childNode" />
@@ -84,9 +103,9 @@
       <addNode v-model:childNodeP="nodeConfig.childNode" />
     </div>
   </div>
-    <nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
+  <nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
 </template>
-<script  setup>
+<script lang="ts" setup>
 import addNode from './addNode.vue'
 import { onMounted, ref, watch, getCurrentInstance, computed } from 'vue'
 import {
@@ -95,7 +114,8 @@ import {
   setApproverStr,
   copyerStr,
   bgColors,
-  placeholderList
+  placeholderList,
+  getApproverShowText
 } from './util'
 import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
 let _uid = getCurrentInstance().uid
@@ -115,11 +135,6 @@ let props = defineProps({
 let defaultText = computed(() => {
   return placeholderList[props.nodeConfig.type]
 })
-let showText = computed(() => {
-  if (props.nodeConfig.type == 0) return arrToStr(props.flowPermission) || '所有人'
-  if (props.nodeConfig.type == 1) return setApproverStr(props.nodeConfig)
-  return copyerStr(props.nodeConfig)
-})
 
 let isInputList = ref([])
 let isInput = ref(false)
@@ -152,13 +167,32 @@ let {
   setFlowPermission,
   setApproverConfig,
   setCopyerConfig,
-  setConditionsConfig
+  setConditionsConfig,
+  setUserTaskConfig
 } = store
+// 审批节点的配置
+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)
+    } else {
+      return ''
+    }
+  }
+  return copyerStr(props.nodeConfig)
+})
+watch(userTaskConfig, (approver) => {
+  if (approver.flag && approver.id === _uid) {
+    emits('update:nodeConfig', approver.value)
+  }
+})
 watch(flowPermission1, (flow) => {
   if (flow.flag && flow.id === _uid) {
     emits('update:flowPermission', flow.value)
@@ -191,12 +225,12 @@ const blurEvent = (index) => {
   if (index || index === 0) {
     isInputList.value[index] = false
     // eslint-disable-next-line vue/no-mutating-props
-    props.nodeConfig.conditionNodes[index].nodeName =
-      props.nodeConfig.conditionNodes[index].nodeName || '条件'
+    props.nodeConfig.conditionNodes[index].name =
+      props.nodeConfig.conditionNodes[index].name || '条件'
   } else {
     isInput.value = false
     // eslint-disable-next-line vue/no-mutating-props
-    props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText
+    props.nodeConfig.name = props.nodeConfig.name || defaultText
   }
 }
 const delNode = () => {
@@ -206,7 +240,7 @@ const addTerm = () => {
   let len = props.nodeConfig.conditionNodes.length + 1
   // eslint-disable-next-line vue/no-mutating-props
   props.nodeConfig.conditionNodes.push({
-    nodeName: '条件' + len,
+    name: '条件' + len,
     type: 3,
     priorityLevel: len,
     conditionList: [],
@@ -221,7 +255,7 @@ const delTerm = (index) => {
   props.nodeConfig.conditionNodes.splice(index, 1)
   props.nodeConfig.conditionNodes.map((item, index) => {
     item.priorityLevel = index + 1
-    item.nodeName = `条件${index + 1}`
+    item.name = `条件${index + 1}`
   })
   resetConditionNodesErr()
   emits('update:nodeConfig', props.nodeConfig)
@@ -255,13 +289,17 @@ const setPerson = (priorityLevel) => {
     })
   } else if (type == 1) {
     setApprover(true)
-    setApproverConfig({
+    let showText = undefined;
+    if(_uid === userTaskConfig.value.id) {
+      showText = userTaskConfig.value.showText
+    }
+    setUserTaskConfig({
       value: {
-        ...JSON.parse(JSON.stringify(props.nodeConfig)),
-        ...{ settype: props.nodeConfig.settype ? props.nodeConfig.settype : 1 }
+        ...JSON.parse(JSON.stringify(props.nodeConfig))
       },
       flag: false,
-      id: _uid
+      id: _uid,
+      showText
     })
   } else if (type == 2) {
     setCopyer(true)
@@ -295,3 +333,10 @@ const arrTransfer = (index, type = 1) => {
   emits('update:nodeConfig', props.nodeConfig)
 }
 </script>
+<style lang="scss" scoped>
+.ellipsis-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/src/components/SimpleProcessDesigner/src/util.ts b/src/components/SimpleProcessDesigner/src/util.ts
index f4acd76c..ae72bce0 100644
--- a/src/components/SimpleProcessDesigner/src/util.ts
+++ b/src/components/SimpleProcessDesigner/src/util.ts
@@ -1,3 +1,6 @@
+// @ts-ignore
+import { DictDataVO } from '@/api/system/dict/types'
+import { DICT_TYPE,  getDictLabel } from '@/utils/dict'
 /**
  * todo
  */
@@ -51,6 +54,32 @@ export const setApproverStr = (nodeConfig: any) => {
   }
 }
 
+
+export const approveMethods: DictDataVO [] = [
+  { label: '单人审批', value: 1 },
+  { label: '多人审批(所有人审批通过)', value: 2 }
+  // TODO 更多的类型
+];
+
+export const getApproverShowText = (approveMethod :number, candidateStrategy: number) => {
+  if(approveMethod && candidateStrategy) {
+    let appoveMethodText = ''
+    approveMethods.forEach((item) => {
+      if (item.value == approveMethod) {
+        appoveMethodText = item.label
+      }
+    })
+    const strategyText = getDictLabel(
+      DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY,
+      candidateStrategy
+    )
+    return `审批方式：${appoveMethodText} <br/>
+            审批人规则类型：按${strategyText}`
+  } else {
+      return ''
+  }
+}
+
 export const copyerStr = (nodeConfig: any) => {
   if (nodeConfig.nodeUserList.length != 0) {
     return arrToStr(nodeConfig.nodeUserList)
diff --git a/src/store/modules/simpleWorkflow.ts b/src/store/modules/simpleWorkflow.ts
index cf98538d..dbeff606 100644
--- a/src/store/modules/simpleWorkflow.ts
+++ b/src/store/modules/simpleWorkflow.ts
@@ -14,7 +14,8 @@ export const useWorkFlowStore = defineStore('simpleWorkflow', {
     conditionDrawer: false,
     conditionsConfig1: {
       conditionNodes: []
-    }
+    },
+    userTaskConfig: {}
   }),
   actions: {
     setTableId(payload) {
@@ -46,6 +47,9 @@ export const useWorkFlowStore = defineStore('simpleWorkflow', {
     },
     setConditionsConfig(payload) {
       this.conditionsConfig1 = payload
+    },
+    setUserTaskConfig(payload) {
+      this.userTaskConfig = payload
     }
   }
 })
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simpleWorkflow/index.vue
index 144615e0..89132787 100644
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
@@ -1,6 +1,13 @@
 <template>
   <div>
+   
     <section class="dingflow-design">
+      <el-row>
+        <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">
         <nodeWrap v-model:nodeConfig="nodeConfig" />
         <div class="end-node">
@@ -10,18 +17,26 @@
       </div>
     </section>
   </div>
+  <approverDrawer />
 </template>
 <script lang="ts" setup>
 import nodeWrap from '@/components/SimpleProcessDesigner/src/nodeWrap.vue'
+import approverDrawer from '@/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue'
+import { ref } from 'vue'
 defineOptions({ name: 'SimpleWorkflowDesignEditor' })
-let nodeConfig = ref({
-  nodeName: '发起人',
+const nodeConfig = ref({
+  name: '发起人',
   type: 0,
   id: 'root',
-  formPerms: {},
   nodeUserList: [],
-  childNode: {}
+  attributes: {
+    "candidateStrategy": 70
+  },
+  childNode: {},
 })
+const test = ()=> {
+  console.log('json format', toRaw(nodeConfig.value))
+}
 </script>
 <style>
 @import url('@/components/SimpleProcessDesigner/theme/workflow.css');

From 627b822f1546770e31542e993570c9482fc179ca Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 27 Mar 2024 09:27:14 +0800
Subject: [PATCH 02/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E6=B5=81=E7=A8=8B=E5=90=8E=E7=AB=AF=E6=8E=A5=E5=85=A5?=
 =?UTF-8?q?-10%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/simple/index.ts                   |  9 +++++
 .../SimpleProcessDesigner/src/addNode.vue     |  7 ++--
 .../src/drawer/approverDrawer.vue             |  2 +-
 .../SimpleProcessDesigner/src/nodeWrap.vue    |  3 +-
 src/views/bpm/model/index.vue                 |  4 +-
 src/views/bpm/simpleWorkflow/index.vue        | 39 +++++++++++++++----
 6 files changed, 50 insertions(+), 14 deletions(-)
 create mode 100644 src/api/bpm/simple/index.ts

diff --git a/src/api/bpm/simple/index.ts b/src/api/bpm/simple/index.ts
new file mode 100644
index 00000000..93307f56
--- /dev/null
+++ b/src/api/bpm/simple/index.ts
@@ -0,0 +1,9 @@
+import request from '@/config/axios'
+
+
+export const saveBpmSimpleModel = async (data) => {
+  return await request.post({
+    url: '/bpm/simple/save',
+    data: data
+  })
+}
\ No newline at end of file
diff --git a/src/components/SimpleProcessDesigner/src/addNode.vue b/src/components/SimpleProcessDesigner/src/addNode.vue
index 9686165c..ec5baf16 100644
--- a/src/components/SimpleProcessDesigner/src/addNode.vue
+++ b/src/components/SimpleProcessDesigner/src/addNode.vue
@@ -10,6 +10,7 @@
             </div>
             <p>审批人</p>
           </a>
+          <!--  TODO 暂时去掉未完成
           <a class="add-node-popover-item notifier" @click="addType(2)">
             <div class="item-wrapper">
               <span class="iconfont"></span>
@@ -22,6 +23,7 @@
             </div>
             <p>条件分支</p>
           </a>
+          -->
         </div>
         <template #reference>
           <button class="btn" type="button">
@@ -71,8 +73,7 @@ const addType = (type) => {
           candidateStrategy: undefined,
           candidateParam: []
         },
-        childNode: props.childNodeP,
-        nodeUserList: []
+        // childNode: props.childNodeP
       }
     } else if (type == 2) {
       data = {
@@ -97,7 +98,7 @@ const addType = (type) => {
           priorityLevel: 1,
           conditionList: [],
           nodeUserList: [],
-          childNode: props.childNodeP
+          // childNode: props.childNodeP
         },
         {
           name: '条件2',
diff --git a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
index 5a19d52e..b5c32cbb 100644
--- a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
+++ b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
@@ -250,7 +250,7 @@ const saveApprover = () => {
   closeDrawer()
 }
 const saveConfig = () => {
-  console.log('before userTaskConfig is ', userTaskConfig.value.id)
+
   const rawConfig = toRaw(userTaskConfig.value)
   rawConfig.value.attributes = toRaw(candidateConfig.value)
   rawConfig.flag = true
diff --git a/src/components/SimpleProcessDesigner/src/nodeWrap.vue b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
index ecfbdfec..210cb84f 100644
--- a/src/components/SimpleProcessDesigner/src/nodeWrap.vue
+++ b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
@@ -295,7 +295,8 @@ const setPerson = (priorityLevel) => {
     }
     setUserTaskConfig({
       value: {
-        ...JSON.parse(JSON.stringify(props.nodeConfig))
+        ...JSON.parse(JSON.stringify(props.nodeConfig)),
+        id: 'Activity_'+_uid,
       },
       flag: false,
       id: _uid,
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index d616f2c0..e7f4ce38 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -74,7 +74,7 @@
       </el-table-column>
       <el-table-column label="流程图标" align="center" prop="icon" width="100">
         <template #default="scope">
-          <el-image :src="scope.row.icon" class="w-32px h-32px" />
+          <el-image :src="scope.row.icon" class="h-32px w-32px" />
         </template>
       </el-table-column>
       <el-table-column label="流程分类" align="center" prop="categoryName" width="100" />
@@ -165,7 +165,7 @@
           <el-button
             link
             type="primary"
-            @click="handleSimpleDesign(scope.row.id)"
+            @click="handleSimpleDesign(scope.row)"
             v-hasPermi="['bpm:model:update']"
           >
             仿钉钉设计流程
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simpleWorkflow/index.vue
index 89132787..c1cc111a 100644
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
@@ -5,7 +5,7 @@
       <el-row>
         <el-col :span="20"/>
         <el-col :span="4">
-          <el-button type="primary" size="small" @click="test">测试</el-button>
+          <el-button type="primary" size="small" @click="test">保存(用于测试，还未完成)</el-button>
         </el-col>
       </el-row>
       <div class="box-scale">
@@ -23,20 +23,45 @@
 import nodeWrap from '@/components/SimpleProcessDesigner/src/nodeWrap.vue'
 import approverDrawer from '@/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue'
 import { ref } from 'vue'
+import { saveBpmSimpleModel } from '@/api/bpm/simple'
 defineOptions({ name: 'SimpleWorkflowDesignEditor' })
+const uid = getCurrentInstance().uid;
+const router = useRouter() // 路由
+const { query } = useRoute() // 路由的查询
+const modelId = query.modelId;
+const message = useMessage() // 国际化
 const nodeConfig = ref({
   name: '发起人',
   type: 0,
-  id: 'root',
-  nodeUserList: [],
+  id: 'Activity_'+uid,
   attributes: {
-    "candidateStrategy": 70
+    "candidateStrategy": '70'
   },
-  childNode: {},
+  childNode: undefined
 })
-const test = ()=> {
-  console.log('json format', toRaw(nodeConfig.value))
+const test = async ()=> {
+  if (!modelId) {
+    message.error('缺少模型 modelId 编号')
+    return
+  }
+  const data = {
+    modelId: modelId,
+    simpleModelBody: toRaw(nodeConfig.value)
+  }
+  console.log('request json data is ', data)
+  const result =  await saveBpmSimpleModel(data);
+  console.log('the result is ', result)
+  if(result){
+    message.success('修改成功')
+  } else {
+    message.alert('修改失败');
+  }
+  close ()
 }
+const close = () => {
+  router.push({ path: '/bpm/manager/model' })
+}
+
 </script>
 <style>
 @import url('@/components/SimpleProcessDesigner/theme/workflow.css');

From 253d707131ffa3ef77e76f7731a30ba1e70f1aeb Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 29 Mar 2024 19:56:45 +0800
Subject: [PATCH 03/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E6=B5=81=E7=A8=8B-30%:=20=E8=8E=B7=E5=8F=96=E4=BB=BF?=
 =?UTF-8?q?=E9=92=89=E9=92=89=E6=B5=81=E7=A8=8B=E6=A8=A1=E5=9E=8B=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/simple/index.ts                   |  6 ++
 .../SimpleProcessDesigner/src/addNode.vue     |  4 +-
 .../src/drawer/approverDrawer.vue             | 23 ++++++-
 .../SimpleProcessDesigner/src/nodeWrap.vue    | 29 ++++++++-
 .../SimpleProcessDesigner/src/util.ts         |  8 +--
 src/views/bpm/simpleWorkflow/index.vue        | 64 +++++++++++++------
 6 files changed, 103 insertions(+), 31 deletions(-)

diff --git a/src/api/bpm/simple/index.ts b/src/api/bpm/simple/index.ts
index 93307f56..b977dea0 100644
--- a/src/api/bpm/simple/index.ts
+++ b/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
+  })
 }
\ No newline at end of file
diff --git a/src/components/SimpleProcessDesigner/src/addNode.vue b/src/components/SimpleProcessDesigner/src/addNode.vue
index ec5baf16..d11ead29 100644
--- 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 = {
diff --git a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
index b5c32cbb..66a557f7 100644
--- 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({
diff --git a/src/components/SimpleProcessDesigner/src/nodeWrap.vue b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
index 210cb84f..e48de2ef 100644
--- 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>
diff --git a/src/components/SimpleProcessDesigner/src/util.ts b/src/components/SimpleProcessDesigner/src/util.ts
index ae72bce0..bcd5a7e6 100644
--- 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: 2 }
+  { label: '单人审批', value: 1 }
+  // { 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
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simpleWorkflow/index.vue
index c1cc111a..1a2702d9 100644
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/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>
\ No newline at end of file
+</style>

From 4f839136c7c3f18fd9cac951df91ece997b71f65 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 2 Apr 2024 20:56:51 +0800
Subject: [PATCH 04/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E6=B5=81=E7=A8=8B=EF=BC=9A=E5=A2=9E=E5=8A=A0=E5=8F=91?=
 =?UTF-8?q?=E8=B5=B7=E4=BA=BA=E3=80=81=E6=9D=A1=E4=BB=B6=E5=88=86=E6=94=AF?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesigner/src/addNode.vue     |  59 +++---
 .../SimpleProcessDesigner/src/consts.ts       |  10 +-
 .../src/drawer/approverDrawer.vue             |  52 +----
 .../SimpleProcessDesigner/src/nodeWrap.vue    | 182 +++++++++---------
 .../SimpleProcessDesigner/src/util.ts         |  22 ++-
 .../SimpleProcessDesigner/theme/workflow.css  |  40 +++-
 src/views/bpm/simpleWorkflow/index.vue        | 116 ++++++++---
 7 files changed, 270 insertions(+), 211 deletions(-)

diff --git a/src/components/SimpleProcessDesigner/src/addNode.vue b/src/components/SimpleProcessDesigner/src/addNode.vue
index d11ead29..7595b670 100644
--- 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 {
diff --git a/src/components/SimpleProcessDesigner/src/consts.ts b/src/components/SimpleProcessDesigner/src/consts.ts
index 1c8f1b2c..2a5b2ea8 100644
--- 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
 }
\ No newline at end of file
diff --git a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
index 66a557f7..089a6ac1 100644
--- 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);
diff --git a/src/components/SimpleProcessDesigner/src/nodeWrap.vue b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
index e48de2ef..034d534b 100644
--- 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%;
 }
 
diff --git a/src/components/SimpleProcessDesigner/src/util.ts b/src/components/SimpleProcessDesigner/src/util.ts
index bcd5a7e6..f910d56b 100644
--- 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: '指定成员' },
diff --git a/src/components/SimpleProcessDesigner/theme/workflow.css b/src/components/SimpleProcessDesigner/theme/workflow.css
index 888b1a82..19f1cb84 100644
--- 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
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simpleWorkflow/index.vue
index 1a2702d9..bf298996 100644
--- 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>

From f79c29d168d340000539df7cec8db785e9ff824a Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 5 Apr 2024 13:04:12 +0800
Subject: [PATCH 05/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E6=B5=81=E7=A8=8B=EF=BC=9A=E5=A2=9E=E5=8A=A0=E6=8A=84?=
 =?UTF-8?q?=E9=80=81=E4=BA=BA=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesigner/src/addNode.vue     |  16 +-
 .../src/drawer/approverDrawer.vue             |  30 +--
 .../src/drawer/copyerDrawer.vue               | 246 ++++++++++++++++++
 .../SimpleProcessDesigner/src/nodeWrap.vue    | 115 ++++----
 .../SimpleProcessDesigner/src/util.ts         |  23 +-
 .../SimpleProcessDesigner/theme/workflow.css  |  49 ++--
 src/directives/index.ts                       |  12 +
 src/main.ts                                   |   6 +-
 src/store/modules/simpleWorkflow.ts           |  12 +-
 src/views/bpm/simpleWorkflow/index.vue        |   2 +
 10 files changed, 391 insertions(+), 120 deletions(-)
 create mode 100644 src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue

diff --git a/src/components/SimpleProcessDesigner/src/addNode.vue b/src/components/SimpleProcessDesigner/src/addNode.vue
index 7595b670..d0c7d746 100644
--- 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 notifier" @click="addType(2)">
+            <div class="item-wrapper">
+              <span class="iconfont"></span>
+            </div>
+            <p>抄送人</p>
+          </a>
           <a class="add-node-popover-item condition" @click="addType(4)">
             <div class="item-wrapper">
               <span class="iconfont"></span>
@@ -86,9 +92,13 @@ const addType = (type) => {
       data = {
         name: '抄送人',
         type: 2,
-        ccSelfSelectFlag: 1,
-        childNode: props.childNodeP,
-        nodeUserList: []
+        error: true,
+         // 抄送节点配置
+        attributes : {
+          candidateStrategy: undefined,
+          candidateParam: undefined
+        },
+        childNode: props.childNodeP
       }
     }
     emits('update:childNodeP', data)
diff --git a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
index 089a6ac1..cbcec808 100644
--- a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
+++ b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
@@ -2,7 +2,6 @@
   <el-drawer
     :append-to-body="true"
     v-model="visible"
-    class="set_promoter"
     :show-close="false"
     :size="550"
     :before-close="saveConfig"
@@ -165,12 +164,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'
-defineProps({
-  directorMaxLevel: {
-    type: Number,
-    default: 0
-  }
-})
+
 const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
 const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
@@ -183,7 +177,7 @@ const candidateConfig = ref({
 })
 let approverConfig = ref({})
 let store = useWorkFlowStoreWithOut()
-let { setApprover, setUserTaskConfig } = store
+let { setApproverDrawer, setUserTaskConfig } = store
 let approverConfig1 = computed(() => store.approverConfig1)
 let approverDrawer = computed(() => store.approverDrawer)
 const userTaskConfig = computed(() => store.userTaskConfig)
@@ -233,32 +227,16 @@ const saveConfig = () => {
   //     flag: true,
   //     id: approverConfig1.value.id
   // })
-  const showText = getApproverShowText()
   setUserTaskConfig({
     value: rawConfig.value,
     flag: true,
     id: userTaskConfig.value.id,
-    showText
   })
-  console.log('after is userTaskConfig', userTaskConfig.value)
   closeDrawer()
 }
-const getApproverShowText = () => {
-  let appoveMethodText = ''
-  approveMethods.forEach((item) => {
-    if (item.value == candidateConfig.value.approveMethod) {
-      appoveMethodText = item.label
-    }
-  })
-  const strategyText = getDictLabel(
-    DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY,
-    candidateConfig.value.candidateStrategy
-  )
-  return `审批方式：${appoveMethodText} <br/>
-          审批人规则类型：按${strategyText}`
-}
+
 const closeDrawer = () => {
-  setApprover(false)
+  setApproverDrawer(false)
 }
 const changecandidateStrategy = () => {
   candidateConfig.value.candidateParam = []
diff --git a/src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue b/src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue
new file mode 100644
index 00000000..d8bd01b6
--- /dev/null
+++ b/src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue
@@ -0,0 +1,246 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="visible"
+    :show-close="false"
+    :size="550"
+    :before-close="saveConfig"
+  >
+    <template #header>
+      <div class="copy-task-header">抄送人设置</div>
+    </template>
+    <div>
+      <el-form label-position="top" label-width="100px">
+        <el-form-item label="选择抄送人" prop="candidateStrategy">
+          <el-select v-model="candidateConfig.candidateStrategy" style="width: 100%" clearable @change="changecandidateStrategy">
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item
+          v-if="candidateConfig.candidateStrategy == 10"
+          label="指定角色"
+          prop="candidateParam"
+        >
+          <el-select
+            v-model="candidateConfig.candidateParam"
+            clearable
+            multiple
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in roleOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="candidateConfig.candidateStrategy == 20 || candidateConfig.candidateStrategy == 21"
+          label="指定部门"
+          prop="candidateParam"
+          span="24"
+        >
+          <el-tree-select
+            ref="treeRef"
+            v-model="candidateConfig.candidateParam"
+            :data="deptTreeOptions"
+            :props="defaultProps"
+            empty-text="加载中，请稍后"
+            multiple
+            node-key="id"
+            style="width: 100%"
+            show-checkbox
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="candidateConfig.candidateStrategy == 22"
+          label="指定岗位"
+          prop="candidateParam"
+          span="24"
+        >
+          <el-select
+            v-model="candidateConfig.candidateParam"
+            clearable
+            multiple
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in postOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="
+            candidateConfig.candidateStrategy == 30 ||
+            candidateConfig.candidateStrategy == 31 ||
+            candidateConfig.candidateStrategy == 32
+          "
+          label="指定用户"
+          prop="candidateParam"
+          span="24"
+        >
+          <el-select
+            v-model="candidateConfig.candidateParam"
+            clearable
+            multiple
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in userOptions"
+              :key="item.id"
+              :label="item.nickname"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="candidateConfig.candidateStrategy === 40"
+          label="指定用户组"
+          prop="candidateParam"
+        >
+          <el-select
+            v-model="candidateConfig.candidateParam"
+            clearable
+            multiple
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in userGroupOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="candidateConfig.candidateStrategy === 60"
+          label="流程表达式"
+          prop="candidateParam"
+        >
+          <el-input
+            type="textarea"
+            v-model="candidateConfig.candidateParam[0]"
+            clearable
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="demo-drawer__footer clear">
+      <el-button type="primary" @click="saveConfig">确 定</el-button>
+      <el-button @click="closeDrawer">取 消</el-button>
+    </div>
+  </el-drawer>
+</template>
+<script lang="ts" setup>
+import { ref, watch, computed, toRaw } from 'vue'
+import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
+import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as RoleApi from '@/api/system/role'
+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'
+
+const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
+const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+const deptTreeOptions = ref() // 部门树
+const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
+const candidateConfig = ref({
+  candidateStrategy: undefined,
+  candidateParam: [],
+})
+const store = useWorkFlowStoreWithOut()
+const { setCopyerDrawer, setCopyerConfig } = store
+
+const copyerDrawer = computed(() => store.copyerDrawer)
+const copyerConfig = computed(() => store.copyerConfig)
+
+const visible = computed({
+  get() {
+    return copyerDrawer.value
+  },
+  set() {
+    closeDrawer()
+  }
+})
+watch(copyerConfig, (val) => {
+  if (val.value.attributes) {
+    console.log('val.value.attributes', val.value.attributes);
+    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
+  }
+})
+
+
+const saveConfig = () => {
+  const rawConfig = toRaw(copyerConfig.value)
+  const { candidateStrategy , candidateParam} = toRaw(candidateConfig.value);
+  const candidateParamStr = candidateParam.join(',')
+  rawConfig.value.attributes = {
+    candidateStrategy,
+    candidateParam: candidateParamStr
+  } 
+  rawConfig.flag = true
+  // TODO 进行校验
+  // setApproverConfig({
+  //     value: approverConfig.value,
+  //     flag: true,
+  //     id: approverConfig1.value.id
+  // })
+
+  setCopyerConfig({
+    value: rawConfig.value,
+    flag: true,
+    id: copyerConfig.value.id,
+  })
+  console.log('after is copyerConfig', copyerConfig.value)
+  closeDrawer()
+}
+
+const closeDrawer = () => {
+  setCopyerDrawer(false)
+}
+const changecandidateStrategy = () => {
+  candidateConfig.value.candidateParam = []
+}
+onMounted(async () => {
+  // 获得角色列表
+  roleOptions.value = await RoleApi.getSimpleRoleList()
+
+  postOptions.value = await PostApi.getSimplePostList()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+  // 获得部门列表
+  const deptOptions = await DeptApi.getSimpleDeptList()
+  deptTreeOptions.value = handleTree(deptOptions, 'id')
+  // 获得用户组列表
+  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
+})
+</script>
+<style lang="scss" scoped>
+.copy-task-header {
+  font-size: 16px !important;
+}
+</style>
diff --git a/src/components/SimpleProcessDesigner/src/nodeWrap.vue b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
index 034d534b..56112e71 100644
--- a/src/components/SimpleProcessDesigner/src/nodeWrap.vue
+++ b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
@@ -22,12 +22,13 @@
             v-if="isInput"
             type="text"
             class="ant-input editable-title-input"
-            @blur="blurEvent()"
-            @focus="$event.currentTarget.select()"
+            @blur="blurEvent(-1)"
+            @focus="$event.currentTarget?.select()"
+            v-mountedFoucs
             v-model="nodeConfig.name"
             :placeholder="defaultText"
           />
-          <span v-else class="editable-title" @click="clickEvent()">{{ nodeConfig.name }}</span>
+          <span v-else class="editable-title" @click="clickEvent(-1)">{{ nodeConfig.name }}</span>
           <i class="anticon anticon-close close" @click="delNode"></i>
         </template>
       </div>
@@ -60,7 +61,8 @@
                   type="text"
                   class="ant-input editable-title-input"
                   @blur="blurEvent(index)"
-                  @focus="$event.currentTarget.select()"
+                  @focus="$event.currentTarget?.select()"
+                  v-mountedFoucs
                   v-model="item.name"
                 />
                 <span v-else class="editable-title" @click="clickEvent(index)">{{
@@ -135,9 +137,8 @@ let props = defineProps({
 let defaultText = computed(() => {
   return placeholderList[props.nodeConfig.type]
 })
-
-let isInputList = ref([])
-let isInput = ref(false)
+const isInputList = ref<boolean[]>([])
+const isInput = ref<boolean>(false)
 const resetConditionNodesErr = () => {
   for (var i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
     // eslint-disable-next-line vue/no-mutating-props
@@ -160,20 +161,20 @@ onMounted(() => {
 let emits = defineEmits(['update:nodeConfig'])
 let store = useWorkFlowStoreWithOut()
 let {
-  setPromoter,
-  setApprover,
-  setCopyer,
-  setCondition,
+  setApproverDrawer,
+  setCopyerDrawer,
+  // setCondition,
   setCopyerConfig,
-  setConditionsConfig,
+  // setConditionsConfig,
   setUserTaskConfig
 } = store
+// ???
+const  isTried = computed(() => store.isTried) 
 // 审批节点的配置
 const userTaskConfig = computed(() => store.userTaskConfig)
-let isTried = computed(() => store.isTried)
-let approverConfig1 = computed(() => store.approverConfig1)
-let copyerConfig1 = computed(() => store.copyerConfig1)
-let conditionsConfig1 = computed(() => store.conditionsConfig1)
+// 抄送节点的配置
+const copyerConfig = computed(() => store.copyerConfig)
+// let conditionsConfig1 = computed(() => store.conditionsConfig1)
 const showText = computed(() => {
   if (props.nodeConfig.type == 0) return '发起人'
   if (props.nodeConfig.type == 1) {
@@ -186,42 +187,49 @@ const showText = computed(() => {
       return ''
     }
   }
-  return copyerStr(props.nodeConfig)
+  if(props.nodeConfig.type === 2) {
+    if(props.nodeConfig.attributes) {
+      return copyerStr( props.nodeConfig.attributes.candidateStrategy)
+    } else {
+      return ''
+    }
+    
+  }
+  return ''
 })
 watch(userTaskConfig, (approver) => {
   if (approver.flag && approver.id === _uid) {
     emits('update:nodeConfig', approver.value)
   }
 })
-watch(approverConfig1, (approver) => {
-  if (approver.flag && approver.id === _uid) {
-    emits('update:nodeConfig', approver.value)
-  }
-})
-watch(copyerConfig1, (copyer) => {
+watch(copyerConfig, (copyer) => {
+  console.log('copyer',copyer)
   if (copyer.flag && copyer.id === _uid) {
+    console.log('copyer id is equal',copyer)
     emits('update:nodeConfig', copyer.value)
   }
 })
-watch(conditionsConfig1, (condition) => {
-  if (condition.flag && condition.id === _uid) {
-    emits('update:nodeConfig', condition.value)
-  }
-})
+
+// watch(conditionsConfig1, (condition) => {
+//   if (condition.flag && condition.id === _uid) {
+//     emits('update:nodeConfig', condition.value)
+//   }
+// })
 
 const clickEvent = (index) => {
-  if (index || index === 0) {
+  if (index >= 0) {
     isInputList.value[index] = true
   } else {
     isInput.value = true
   }
 }
+
 const blurEvent = (index) => {
-  if (index || index === 0) {
+  if (index >= 0) {
     isInputList.value[index] = false
     // eslint-disable-next-line vue/no-mutating-props
     props.nodeConfig.conditionNodes[index].name =
-      props.nodeConfig.conditionNodes[index].name || '条件'
+    props.nodeConfig.conditionNodes[index].name || '条件'
   } else {
     isInput.value = false
     // eslint-disable-next-line vue/no-mutating-props
@@ -278,42 +286,45 @@ const reData = (data, addData) => {
   }
 }
 const setPerson = (priorityLevel) => {
-  var { type } = props.nodeConfig
+  console.log('priorityLevel',priorityLevel)
+  const { type } = props.nodeConfig
+  console.log('type',type)
   if (type == 0) {
-    setPromoter(true)
+    // setPromoter(true)
   } else if (type == 1) {
-    setApprover(true)
-    let showText = undefined
-    if (_uid === userTaskConfig.value.id) {
-      showText = userTaskConfig.value.showText
-    }
+    setApproverDrawer(true)
+    // if (_uid === userTaskConfig.value.id) {
+    //   showText = userTaskConfig.value.showText
+    // }
     setUserTaskConfig({
       value: {
         ...JSON.parse(JSON.stringify(props.nodeConfig)),
         id: 'Activity_' + _uid
       },
       flag: false,
-      id: _uid,
-      showText
+      id: _uid
     })
   } else if (type == 2) {
-    setCopyer(true)
+    setCopyerDrawer(true)
     setCopyerConfig({
-      value: JSON.parse(JSON.stringify(props.nodeConfig)),
+      value: {
+        ...JSON.parse(JSON.stringify(props.nodeConfig)),
+        id: 'Activity_' + _uid
+      },
       flag: false,
       id: _uid
     })
   } else {
-    setCondition(true)
-    setConditionsConfig({
-      value: {
-        ...JSON.parse(JSON.stringify(props.nodeConfig)),
-        id: 'Gateway_' + _uid
-      },
-      priorityLevel,
-      flag: false,
-      id: _uid
-    })
+    // setCondition(true)
+    // setConditionsConfig({
+    //   value: {
+    //     ...JSON.parse(JSON.stringify(props.nodeConfig)),
+    //     id: 'Gateway_' + _uid
+    //   },
+    //   priorityLevel,
+    //   flag: false,
+    //   id: _uid
+    // })
   }
 }
 // const arrTransfer = (index, type = 1) => {
diff --git a/src/components/SimpleProcessDesigner/src/util.ts b/src/components/SimpleProcessDesigner/src/util.ts
index f910d56b..3e36ec2b 100644
--- a/src/components/SimpleProcessDesigner/src/util.ts
+++ b/src/components/SimpleProcessDesigner/src/util.ts
@@ -80,13 +80,24 @@ export const getApproverShowText = (approveMethod :number, candidateStrategy: nu
   }
 }
 
-export const copyerStr = (nodeConfig: any) => {
-  if (nodeConfig.nodeUserList.length != 0) {
-    return arrToStr(nodeConfig.nodeUserList)
+export const copyerStr = ( candidateStrategy: number) => {
+  // if (nodeConfig.nodeUserList.length != 0) {
+  //   return arrToStr(nodeConfig.nodeUserList)
+  // } else {
+  //   if (nodeConfig.ccSelfSelectFlag == 1) {
+  //     return '发起人自选'
+  //   }
+  // }
+  console.log('candidateStrategy', candidateStrategy);
+  
+  if(candidateStrategy) {
+    const strategyText = getDictLabel(
+      DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY,
+      candidateStrategy
+    )
+    return `抄送人类型：按${strategyText}`
   } else {
-    if (nodeConfig.ccSelfSelectFlag == 1) {
-      return '发起人自选'
-    }
+      return ''
   }
 }
 export const conditionStr = (nodeConfig, index) => {
diff --git a/src/components/SimpleProcessDesigner/theme/workflow.css b/src/components/SimpleProcessDesigner/theme/workflow.css
index 19f1cb84..2b9e0daa 100644
--- a/src/components/SimpleProcessDesigner/theme/workflow.css
+++ b/src/components/SimpleProcessDesigner/theme/workflow.css
@@ -1163,11 +1163,7 @@ html {
     box-shadow: 0 0 6px 0 rgba(50, 150, 250, .3)
 }
 
-.dingflow-design .auto-judge.active .close,
-.dingflow-design .auto-judge:active .close,
-.dingflow-design .auto-judge:hover .close {
-    display: block
-}
+
 
 .dingflow-design .auto-judge.error:after {
     border: 1px solid #f25643;
@@ -1183,6 +1179,7 @@ html {
     line-height: 24px;
     width: 258px;
 } */
+
 .dingflow-design  .title-wrapper {
     display: flex;
     justify-content: space-between;
@@ -1195,18 +1192,39 @@ html {
     line-height: 24px;
     width: 220px;
     color: #fff;
+    padding-right: 10px;
+    padding-left: 10px;
 }
+
 .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 .title-wrapper .close {
+    display: none;
+    position: absolute;
+    right: 10px;
+    top: 2px;
+    width: 20px;
+    height: 20px;
+    font-size: 14px;
+    color:#fff;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 20px;
+    z-index: 2
 }
 
+.dingflow-design .title-wrapper:hover .close {
+    display: block
+}
+/* .dingflow-design  .title-wrapper .close {
+    padding-right: 2px;
+} */
+
 /* .dingflow-design  .title-wrapper .priority-title {
     display: inline-block;
     float: right;
@@ -1233,21 +1251,6 @@ html {
     color: #bfbfbf
 }
 
-.dingflow-design .auto-judge .close {
-    display: none;
-    position: absolute;
-    right: -10px;
-    top: -10px;
-    width: 20px;
-    height: 20px;
-    font-size: 14px;
-    color: rgba(0, 0, 0, .25);
-    border-radius: 50%;
-    text-align: center;
-    line-height: 20px;
-    z-index: 2
-}
-
 .dingflow-design .auto-judge .content {
     font-size: 14px;
     color: #191f25;
diff --git a/src/directives/index.ts b/src/directives/index.ts
index 89cc8ba1..8fb6ff94 100644
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -10,4 +10,16 @@ import { hasPermi } from './permission/hasPermi'
 export const setupAuth = (app: App<Element>) => {
   hasRole(app)
   hasPermi(app)
+ 
+}
+
+/**
+ * 导出指令：v-mountedFoucs
+ */
+export const setupMountedFoucs= (app: App<Element>) => {
+  app.directive('mountedFoucs', {
+    mounted(el) {
+      el.focus();
+    }
+  })
 }
diff --git a/src/main.ts b/src/main.ts
index 76c72473..24666be8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -28,8 +28,8 @@ import '@/plugins/animate.css'
 // 路由
 import router, { setupRouter } from '@/router'
 
-// 权限
-import { setupAuth } from '@/directives'
+// 其它指令 
+import { setupAuth, setupMountedFoucs } from '@/directives'
 
 import { createApp } from 'vue'
 
@@ -60,6 +60,8 @@ const setupAll = async () => {
 
   setupAuth(app)
 
+  setupMountedFoucs(app)
+
   await router.isReady()
 
   app.use(VueDOMPurifyHTML)
diff --git a/src/store/modules/simpleWorkflow.ts b/src/store/modules/simpleWorkflow.ts
index dbeff606..c7c8abd4 100644
--- a/src/store/modules/simpleWorkflow.ts
+++ b/src/store/modules/simpleWorkflow.ts
@@ -6,11 +6,10 @@ export const useWorkFlowStore = defineStore('simpleWorkflow', {
     tableId: '',
     isTried: false,
     promoterDrawer: false,
-    flowPermission1: {},
     approverDrawer: false,
     approverConfig1: {},
     copyerDrawer: false,
-    copyerConfig1: {},
+    copyerConfig: {},
     conditionDrawer: false,
     conditionsConfig1: {
       conditionNodes: []
@@ -27,20 +26,17 @@ export const useWorkFlowStore = defineStore('simpleWorkflow', {
     setPromoter(payload) {
       this.promoterDrawer = payload
     },
-    setFlowPermission(payload) {
-      this.flowPermission1 = payload
-    },
-    setApprover(payload) {
+    setApproverDrawer(payload) {
       this.approverDrawer = payload
     },
     setApproverConfig(payload) {
       this.approverConfig1 = payload
     },
-    setCopyer(payload) {
+    setCopyerDrawer(payload) {
       this.copyerDrawer = payload
     },
     setCopyerConfig(payload) {
-      this.copyerConfig1 = payload
+      this.copyerConfig = payload
     },
     setCondition(payload) {
       this.conditionDrawer = payload
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simpleWorkflow/index.vue
index bf298996..5e215c1b 100644
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
@@ -24,10 +24,12 @@
     </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'

From 556cac81389f172805bccef71f6c1012ce962808 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 5 Apr 2024 22:54:40 +0800
Subject: [PATCH 06/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E6=B5=81=E7=A8=8B=EF=BC=9A=E8=8E=B7=E5=8F=96=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=E7=9A=84=E6=A8=A1=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesigner/src/nodeWrap.vue    |  5 +-
 .../SimpleProcessDesigner/src/util.ts         | 95 ++++++++++---------
 2 files changed, 51 insertions(+), 49 deletions(-)

diff --git a/src/components/SimpleProcessDesigner/src/nodeWrap.vue b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
index 56112e71..085e7b03 100644
--- a/src/components/SimpleProcessDesigner/src/nodeWrap.vue
+++ b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
@@ -86,9 +86,10 @@
                   @click="arrTransfer(index)"
                   >&gt;</div
                 > -->
-                <div class="content" @click="setPerson(item.priorityLevel)">{{
+                <!-- <div class="content" @click="setPerson(item.priorityLevel)">{{
                   conditionStr(nodeConfig, index)
-                }}</div>
+                }}</div> -->
+                <div class="content">{{conditionStr(nodeConfig, index) }}</div>
                 <div class="error_tip" v-if="isTried && item.error">
                   <i class="anticon anticon-exclamation-circle"></i>
                 </div>
diff --git a/src/components/SimpleProcessDesigner/src/util.ts b/src/components/SimpleProcessDesigner/src/util.ts
index 3e36ec2b..465cad23 100644
--- a/src/components/SimpleProcessDesigner/src/util.ts
+++ b/src/components/SimpleProcessDesigner/src/util.ts
@@ -89,7 +89,7 @@ export const copyerStr = ( candidateStrategy: number) => {
   //   }
   // }
   console.log('candidateStrategy', candidateStrategy);
-  
+
   if(candidateStrategy) {
     const strategyText = getDictLabel(
       DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY,
@@ -101,8 +101,8 @@ export const copyerStr = ( candidateStrategy: number) => {
   }
 }
 export const conditionStr = (nodeConfig, index) => {
-  const { conditionList, nodeUserList } = nodeConfig.conditionNodes[index]
-  if (conditionList.length == 0) {
+  // const { conditionList, nodeUserList } = nodeConfig.conditionNodes[index]
+  // if (conditionList.length == 0) {
     // return index == nodeConfig.conditionNodes.length - 1 &&
     //   nodeConfig.conditionNodes[0].conditionList.length != 0
     //   ? '其他条件进入此流程'
@@ -111,56 +111,57 @@ export const conditionStr = (nodeConfig, index) => {
     //   nodeConfig.conditionNodes[0].conditionList.length != 0
     //   ? '其他条件进入此流程'
     //   : '请设置条件'
-    console.log('index===>', index);
-    console.log('nodeConfig.conditionNodes.length===>', nodeConfig.conditionNodes.length);
+    // 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++) {
-      const {
-        columnId,
-        columnType,
-        showType,
-        showName,
-        optType,
-        zdy1,
-        opt1,
-        zdy2,
-        opt2,
-        fixedDownBoxValue
-      } = conditionList[i]
-      if (columnId == 0) {
-        if (nodeUserList.length != 0) {
-          str += '发起人属于：'
-          str +=
-            nodeUserList
-              .map((item) => {
-                return item.name
-              })
-              .join('或') + ' 并且 '
-        }
-      }
-      if (columnType == 'String' && showType == '3') {
-        if (zdy1) {
-          str += showName + '属于：' + dealStr(zdy1, JSON.parse(fixedDownBoxValue)) + ' 并且 '
-        }
-      }
-      if (columnType == 'Double') {
-        if (optType != 6 && zdy1) {
-          const optTypeStr = ['', '<', '>', '≤', '=', '≥'][optType]
-          str += `${showName} ${optTypeStr} ${zdy1} 并且 `
-        } else if (optType == 6 && zdy1 && zdy2) {
-          str += `${zdy1} ${opt1} ${showName} ${opt2} ${zdy2} 并且 `
-        }
-      }
-    }
-    return str ? str.substring(0, str.length - 4) : '请设置条件'
-  }
+  // } else {
+  //   let str = ''
+  //   for (let i = 0; i < conditionList.length; i++) {
+  //     const {
+  //       columnId,
+  //       columnType,
+  //       showType,
+  //       showName,
+  //       optType,
+  //       zdy1,
+  //       opt1,
+  //       zdy2,
+  //       opt2,
+  //       fixedDownBoxValue
+  //     } = conditionList[i]
+  //     if (columnId == 0) {
+  //       if (nodeUserList.length != 0) {
+  //         str += '发起人属于：'
+  //         str +=
+  //           nodeUserList
+  //             .map((item) => {
+  //               return item.name
+  //             })
+  //             .join('或') + ' 并且 '
+  //       }
+  //     }
+  //     if (columnType == 'String' && showType == '3') {
+  //       if (zdy1) {
+  //         str += showName + '属于：' + dealStr(zdy1, JSON.parse(fixedDownBoxValue)) + ' 并且 '
+  //       }
+  //     }
+  //     if (columnType == 'Double') {
+  //       if (optType != 6 && zdy1) {
+  //         const optTypeStr = ['', '<', '>', '≤', '=', '≥'][optType]
+  //         str += `${showName} ${optTypeStr} ${zdy1} 并且 `
+  //       } else if (optType == 6 && zdy1 && zdy2) {
+  //         str += `${zdy1} ${opt1} ${showName} ${opt2} ${zdy2} 并且 `
+  //       }
+  //     }
+  //   }
+  // str ? str.substring(0, str.length - 4) :
+  return '请设置条件'
+  // }
 }
 
 export const dealStr = (str: string, obj) => {

From 32d2eb11f0c89adae6e5d9ca135398c0df049aa3 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 7 Apr 2024 15:53:21 +0800
Subject: [PATCH 07/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E6=B5=81=E7=A8=8B=EF=BC=9A=E5=A2=9E=E5=8A=A0=E5=B9=B6?=
 =?UTF-8?q?=E8=A1=8C=E5=88=86=E6=94=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesigner/src/addNode.vue     | 194 +++++++++++++-----
 .../SimpleProcessDesigner/src/consts.ts       |  12 +-
 .../SimpleProcessDesigner/src/nodeWrap.vue    | 144 +++++++++----
 .../SimpleProcessDesigner/src/util.ts         |   2 +-
 .../SimpleProcessDesigner/theme/iconfont.ttf  | Bin 0 -> 2908 bytes
 .../SimpleProcessDesigner/theme/iconfont.woff | Bin 0 -> 1976 bytes
 .../theme/iconfont.woff2                      | Bin 0 -> 1480 bytes
 .../SimpleProcessDesigner/theme/workflow.css  |  43 +++-
 8 files changed, 300 insertions(+), 95 deletions(-)
 create mode 100644 src/components/SimpleProcessDesigner/theme/iconfont.ttf
 create mode 100644 src/components/SimpleProcessDesigner/theme/iconfont.woff
 create mode 100644 src/components/SimpleProcessDesigner/theme/iconfont.woff2

diff --git a/src/components/SimpleProcessDesigner/src/addNode.vue b/src/components/SimpleProcessDesigner/src/addNode.vue
index d0c7d746..2cbc0f83 100644
--- a/src/components/SimpleProcessDesigner/src/addNode.vue
+++ b/src/components/SimpleProcessDesigner/src/addNode.vue
@@ -6,7 +6,7 @@
         <div class="add-node-popover-body">
           <a class="add-node-popover-item approver" @click="addType(1)">
             <div class="item-wrapper">
-              <span class="iconfont"></span>
+              <span class="iconfont icon-approve"></span>
             </div>
             <p>审批人</p>
           </a>
@@ -26,20 +26,26 @@
           -->
           <a class="add-node-popover-item notifier" @click="addType(2)">
             <div class="item-wrapper">
-              <span class="iconfont"></span>
+              <span class="iconfont icon-copy"></span>
             </div>
             <p>抄送人</p>
           </a>
           <a class="add-node-popover-item condition" @click="addType(4)">
             <div class="item-wrapper">
-              <span class="iconfont"></span>
+              <span class="iconfont icon-exclusive"></span>
             </div>
             <p>条件分支</p>
           </a>
+          <a class="add-node-popover-item condition" @click="addType(5)">
+            <div class="item-wrapper">
+              <span class="iconfont icon-parallel"></span>
+            </div>
+            <p>并行分支</p>
+          </a>
         </div>
         <template #reference>
-          <button class="btn" type="button">
-            <span class="iconfont"></span>
+          <button class="btn" type="button" v-if="showAddButton">
+            <span><Icon icon="ep:plus" class="addIcon" :size="14" /></span>
           </button>
         </template>
       </el-popover>
@@ -47,66 +53,60 @@
   </div>
 </template>
 <script lang="ts" setup>
+import { NodeType } from './consts'
 import { ref } from 'vue'
 import { generateUUID } from '@/utils'
 let props = defineProps({
   childNodeP: {
     type: Object,
     default: () => ({})
+  },
+  showAddButton:{
+    type:Boolean,
+    default:true
   }
 })
 let emits = defineEmits(['update:childNodeP'])
 let visible = ref(false)
-const addType = (type) => {
+const addType = (type: number) => {
   visible.value = false
-  if (type != 4) {
-    var data
-    if (type == 1) {
-      // data = {
-      //   name: '审核人',
-      //   error: true,
-      //   type: 1,
-      //   settype: 1,
-      //   selectMode: 0,
-      //   selectRange: 0,
-      //   directorLevel: 1,
-      //   examineMode: 1,
-      //   noHanderAction: 1,
-      //   examineEndDirectorLevel: 0,
-      //   childNode: props.childNodeP,
-      //   nodeUserList: []
-      // }
-      data = {
-        name: '审核人',
-        error: true,
-        type: 1,
-        // 审批节点配置
-        attributes : {
-          approveMethod : undefined,
-          candidateStrategy: undefined,
-          candidateParam: undefined
-        },
-        childNode: props.childNodeP
-      }
-    } else if (type == 2) {
-      data = {
-        name: '抄送人',
-        type: 2,
-        error: true,
-         // 抄送节点配置
-        attributes : {
-          candidateStrategy: undefined,
-          candidateParam: undefined
-        },
-        childNode: props.childNodeP
-      }
+  // 审核节点
+  if (type === NodeType.APPROVE_USER_NODE) {
+    const data = {
+      name: '审核人',
+      error: true,
+      type: 1,
+      // 审批节点配置
+      attributes: {
+        approveMethod: undefined,
+        candidateStrategy: undefined,
+        candidateParam: undefined
+      },
+      childNode: props.childNodeP
     }
     emits('update:childNodeP', data)
-  } else {
-    emits('update:childNodeP', {
-      name: '路由',
+  }
+  // 抄送节点
+  if (type === NodeType.CC_USER_NODE) {
+    const data = {
+      name: '抄送人',
+      type: 2,
+      error: true,
+      // 抄送节点配置
+      attributes: {
+        candidateStrategy: undefined,
+        candidateParam: undefined
+      },
+      childNode: props.childNodeP
+    }
+    emits('update:childNodeP', data)
+  }
+  // 条件分支
+  if (type === NodeType.EXCLUSIVE_NODE) {
+    const data = {
+      name: '条件分支',
       type: 4,
-      id : 'GateWay_'+ generateUUID(),
+      id: 'GateWay_' + generateUUID(),
       childNode: props.childNodeP,
       conditionNodes: [
         {
@@ -125,8 +125,92 @@ const addType = (type) => {
           childNode: null
         }
       ]
-    })
+    }
+    emits('update:childNodeP', data)
   }
+  // 并行分支 fork
+  if (type === NodeType.PARALLEL_NODE_FORK) {
+    const data = {
+      name: '并行分支_FORK',
+      type: 5,
+      id: 'GateWay_' + generateUUID(),
+      conditionNodes: [
+        {
+          name: '并行1',
+          error: true,
+          type: 3,
+          childNode: null
+        },
+        {
+          name: '并行2',
+          type: 3,
+          childNode: null
+        }
+      ],
+      childNode: {
+        id: 'GateWay_' + generateUUID(),
+        name: '并行分支_JOIN',
+        type: 6,
+        error: true,
+        childNode: props.childNodeP,
+      }
+    }
+    emits('update:childNodeP', data)
+  }
+  // if (type != 4) {
+  //   var data
+  //   if (type == 1) {
+  //     data = {
+  //       name: '审核人',
+  //       error: true,
+  //       type: 1,
+  //       // 审批节点配置
+  //       attributes : {
+  //         approveMethod : undefined,
+  //         candidateStrategy: undefined,
+  //         candidateParam: undefined
+  //       },
+  //       childNode: props.childNodeP
+  //     }
+  //   } else if (type == 2) {
+  //     data = {
+  //       name: '抄送人',
+  //       type: 2,
+  //       error: true,
+  //        // 抄送节点配置
+  //       attributes : {
+  //         candidateStrategy: undefined,
+  //         candidateParam: undefined
+  //       },
+  //       childNode: props.childNodeP
+  //     }
+  //   }
+  //   emits('update:childNodeP', data)
+  // } else {
+  //   emits('update:childNodeP', {
+  //     name: '路由',
+  //     type: 4,
+  //     id : 'GateWay_'+ generateUUID(),
+  //     childNode: props.childNodeP,
+  //     conditionNodes: [
+  //       {
+  //         name: '条件1',
+  //         error: true,
+  //         type: 3,
+  //         priorityLevel: 1,
+  //         conditionList: [],
+  //         childNode: null
+  //       },
+  //       {
+  //         name: '其它情况',
+  //         type: 3,
+  //         priorityLevel: 2,
+  //         conditionList: [],
+  //         childNode: null
+  //       }
+  //     ]
+  //   })
+  // }
 }
 </script>
 <style scoped lang="scss">
@@ -173,9 +257,9 @@ const addType = (type) => {
       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 {
-        font-size: 16px;
+
+      .addIcon {
+        line-height: 30px;
         color: #fff;
       }
 
diff --git a/src/components/SimpleProcessDesigner/src/consts.ts b/src/components/SimpleProcessDesigner/src/consts.ts
index 2a5b2ea8..9c36ff5a 100644
--- a/src/components/SimpleProcessDesigner/src/consts.ts
+++ b/src/components/SimpleProcessDesigner/src/consts.ts
@@ -18,9 +18,17 @@ export enum NodeType {
    */
   CONDITION_NODE = 3,
   /**
-   * 路由节点
+   * 条件分支节点
    */
-  ROUTER_NODE = 4
+  EXCLUSIVE_NODE = 4,
+  /**
+   * 并行分支分叉节点
+   */
+  PARALLEL_NODE_FORK = 5,
+  /**
+   * 并行分支聚合
+   */
+  PARALLEL_NODE_JOIN = 6
 }
 
 export const NODE_BG_COLOR = new Map()
diff --git a/src/components/SimpleProcessDesigner/src/nodeWrap.vue b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
index 085e7b03..1264e42a 100644
--- a/src/components/SimpleProcessDesigner/src/nodeWrap.vue
+++ b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
@@ -7,17 +7,15 @@
 -->
 <template>
   <div class="node-wrap" v-if="nodeConfig.type < 3">
-    <div
-      class="node-wrap-box"
-      :class="
-        (nodeConfig.type == 0 ? 'start-node ' : '') +
-        (isTried && nodeConfig.error ? 'active error' : '')
-      "
-    >
+    <div class="node-wrap-box" :class="isTried && nodeConfig.error ? 'active error' : ''">
       <div class="title" :style="`background: rgb(${bgColors[nodeConfig.type]});`">
         <span v-if="nodeConfig.type == 0">发起人</span>
         <template v-else>
-          <span class="iconfont">{{ nodeConfig.type == 1 ? '' : '' }}</span>
+          <span
+            class="iconfont"
+            :class="nodeConfig.type === NodeType.APPROVE_USER_NODE ? 'icon-approve' : 'icon-copy'"
+          >
+          </span>
           <input
             v-if="isInput"
             type="text"
@@ -37,9 +35,9 @@
           <span class="placeholder" v-if="!showText">请选择{{ defaultText }}</span>
           <span v-html="showText" class="ellipsis-text" v-else></span>
         </div>
-        <div class="icon-box">
+        <!-- <div class="icon-box">
           <i class="anticon anticon-edit" @click="editNode"></i>
-        </div>
+        </div> -->
         <i class="anticon anticon-right arrow"></i>
       </div>
       <div class="error_tip" v-if="isTried && nodeConfig.error">
@@ -51,7 +49,7 @@
   <div class="branch-wrap" v-if="nodeConfig.type == 4">
     <div class="branch-box-wrap">
       <div class="branch-box">
-        <button class="add-branch" @click="addTerm">添加条件</button>
+        <button class="add-branch" @click="addTerm(nodeConfig.type)">添加条件</button>
         <div class="col-box" v-for="(item, index) in nodeConfig.conditionNodes" :key="index">
           <div class="condition-node">
             <div class="condition-node-box">
@@ -89,7 +87,7 @@
                 <!-- <div class="content" @click="setPerson(item.priorityLevel)">{{
                   conditionStr(nodeConfig, index)
                 }}</div> -->
-                <div class="content">{{conditionStr(nodeConfig, index) }}</div>
+                <div class="content">{{ conditionStr(nodeConfig, index) }}</div>
                 <div class="error_tip" v-if="isTried && item.error">
                   <i class="anticon anticon-exclamation-circle"></i>
                 </div>
@@ -111,6 +109,59 @@
       <addNode v-model:childNodeP="nodeConfig.childNode" />
     </div>
   </div>
+  <div class="branch-wrap" v-if="nodeConfig.type == 5">
+    <div class="branch-box-wrap">
+      <div class="branch-box">
+        <button class="add-branch" @click="addTerm(nodeConfig.type)">添加分支</button>
+        <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-mountedFoucs
+                  v-model="item.name"
+                />
+                <span v-else class="editable-title" @click="clickEvent(index)">{{
+                  item.name
+                }}</span>
+                <i class="anticon anticon-close close" @click="delTerm(nodeConfig.type, index)"></i>
+              </div>
+              <div class="auto-judge" :class="isTried && item.error ? 'error active' : ''">
+                <div class="content">并行执行</div>
+                <div class="error_tip" v-if="isTried && item.error">
+                  <i class="anticon anticon-exclamation-circle"></i>
+                </div>
+              </div>
+              <addNode v-model:childNodeP="item.childNode" />
+            </div>
+          </div>
+          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+          <template v-if="index == 0">
+            <div class="top-left-cover-line"></div>
+            <div class="bottom-left-cover-line"></div>
+          </template>
+          <template v-if="index == nodeConfig.conditionNodes.length - 1">
+            <div class="top-right-cover-line"></div>
+            <div class="bottom-right-cover-line"></div>
+          </template>
+        </div>
+      </div>
+      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
+    </div>
+  </div>
+  <div class="node-wrap" v-if="nodeConfig.type === 6">
+    <div class="node-wrap-box">
+      <div class="content">
+        <div class="text">聚合</div>
+      </div>
+    </div>
+    <addNode v-model:childNodeP="nodeConfig.childNode" />
+  </div>
   <nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
 </template>
 <script lang="ts" setup>
@@ -124,7 +175,7 @@ import {
   placeholderList,
   getApproverShowText
 } from './util'
-import { WorkFlowNode } from './consts'
+import { WorkFlowNode, NodeType } from './consts'
 import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
 let _uid = getCurrentInstance().uid
 
@@ -170,7 +221,7 @@ let {
   setUserTaskConfig
 } = store
 // ???
-const  isTried = computed(() => store.isTried) 
+const isTried = computed(() => store.isTried)
 // 审批节点的配置
 const userTaskConfig = computed(() => store.userTaskConfig)
 // 抄送节点的配置
@@ -188,13 +239,12 @@ const showText = computed(() => {
       return ''
     }
   }
-  if(props.nodeConfig.type === 2) {
-    if(props.nodeConfig.attributes) {
-      return copyerStr( props.nodeConfig.attributes.candidateStrategy)
+  if (props.nodeConfig.type === 2) {
+    if (props.nodeConfig.attributes) {
+      return copyerStr(props.nodeConfig.attributes.candidateStrategy)
     } else {
       return ''
     }
-    
   }
   return ''
 })
@@ -204,9 +254,9 @@ watch(userTaskConfig, (approver) => {
   }
 })
 watch(copyerConfig, (copyer) => {
-  console.log('copyer',copyer)
+  console.log('copyer', copyer)
   if (copyer.flag && copyer.id === _uid) {
-    console.log('copyer id is equal',copyer)
+    console.log('copyer id is equal', copyer)
     emits('update:nodeConfig', copyer.value)
   }
 })
@@ -230,7 +280,7 @@ const blurEvent = (index) => {
     isInputList.value[index] = false
     // eslint-disable-next-line vue/no-mutating-props
     props.nodeConfig.conditionNodes[index].name =
-    props.nodeConfig.conditionNodes[index].name || '条件'
+      props.nodeConfig.conditionNodes[index].name || '条件'
   } else {
     isInput.value = false
     // eslint-disable-next-line vue/no-mutating-props
@@ -240,42 +290,66 @@ const blurEvent = (index) => {
 const delNode = () => {
   emits('update:nodeConfig', props.nodeConfig.childNode)
 }
-const addTerm = () => {
+const addTerm = (type:number) => {
   const len = props.nodeConfig.conditionNodes.length
   let lastIndex = props.nodeConfig.conditionNodes.length - 1
+  let nodeName = '条件' + len
+  if(type === NodeType.PARALLEL_NODE_FORK) {
+    nodeName = '并行' + (len+1);
+    lastIndex = props.nodeConfig.conditionNodes.length;
+  }
   // eslint-disable-next-line vue/no-mutating-props
   props.nodeConfig.conditionNodes.splice(lastIndex, 0, {
-    name: '条件' + len,
+    name: nodeName,
     type: 3,
-    priorityLevel: len,
     conditionList: [],
     childNode: null
   })
   resetConditionNodesErr()
   emits('update:nodeConfig', props.nodeConfig)
 }
-const delTerm = (index) => {
+const delTerm = (nodeType: number, index: number) => {
   if (props.nodeConfig.conditionNodes) {
     // eslint-disable-next-line vue/no-mutating-props
     props.nodeConfig.conditionNodes.splice(index, 1)
-    props.nodeConfig.conditionNodes.map((item, index) => {
+    if (nodeType === NodeType.PARALLEL_NODE_FORK) {
+      props.nodeConfig.conditionNodes.map((item, index) => {
+          item.name = `并行${index + 1}`
+      })
+    } else {
+      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
+      if (nodeType === NodeType.PARALLEL_NODE_FORK) {
+        const joinNode = props.nodeConfig.childNode;
+        if (joinNode?.childNode) {
+          if (props.nodeConfig.conditionNodes[0].childNode) {
+            reData(props.nodeConfig.conditionNodes[0].childNode, joinNode?.childNode)
+          } else {
+            // eslint-disable-next-line vue/no-mutating-props
+            props.nodeConfig.conditionNodes[0].childNode = joinNode?.childNode
+          }
         }
+        emits('update:nodeConfig', props.nodeConfig.conditionNodes[0].childNode)
+      } else {
+        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)
     }
   }
 }
@@ -287,9 +361,9 @@ const reData = (data, addData) => {
   }
 }
 const setPerson = (priorityLevel) => {
-  console.log('priorityLevel',priorityLevel)
+  console.log('priorityLevel', priorityLevel)
   const { type } = props.nodeConfig
-  console.log('type',type)
+  console.log('type', type)
   if (type == 0) {
     // setPromoter(true)
   } else if (type == 1) {
diff --git a/src/components/SimpleProcessDesigner/src/util.ts b/src/components/SimpleProcessDesigner/src/util.ts
index 465cad23..b33778b7 100644
--- a/src/components/SimpleProcessDesigner/src/util.ts
+++ b/src/components/SimpleProcessDesigner/src/util.ts
@@ -187,7 +187,7 @@ export const removeEle = (arr, elem, key = 'id') => {
   arr.splice(includesIndex, 1)
 }
 
-export const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250','50, 150, 250','248, 107, 248']
+export const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250','50, 150, 250','248, 107, 248','244, 118, 118']
 export const placeholderList = ['发起人', '审核人', '抄送人']
 export const setTypes = [
   { value: 1, label: '指定成员' },
diff --git a/src/components/SimpleProcessDesigner/theme/iconfont.ttf b/src/components/SimpleProcessDesigner/theme/iconfont.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..c2dcd3f422eda69e3cb3520c32c67528a6f82944
GIT binary patch
literal 2908
zcmd^B|8HAY6+h=)$4+eLy<~aMj!WXc_Z-`G+S<vB?JRAUrcIlWDAPupw9~q+b)6R{
z!Lg0whGvs03)mQJK$lHu(hwD5Lrf|HX-ES>wf!(gk>Cdq8Ul?16U5UxkoW<KADS1=
zwV&J3j=zBGoO?g#bI!S6&b>GH0Rn&rs=#1i>cspJ^_lSF0C+F4a}S(I7^D7~pOF46
z>1VU6nbPPJ`M&`Ot;Ai=<u?}J$9KO7!2S*3cyY<hEJUCEVVHdXOp;zA!gZZJP57rI
zeM_sA3q1rV_Cu<A^2Kb1sSX;8y-#|_YUV--6<8sAH|c62vubvHd-MkYt(R!bT&cKL
zdFCs>zX;%_@n8XH?yR~~g-0Bu(hMlD4sKVjIz#Li&i(T@XQa`8fv4g7UiwE}+^x~>
zR2{%RM`|kwb};YB1&{Ggsc_a!KY$&sQsH(t48Rx&M<-|JK+I<<1=wZ#H|&kr2FCny
zE<^p>8u@W65`*BhS%(Ag61328UlM*v+}9c{-T(tBQh*jl?8lS`7mqE#n_EKdMm-<E
z-i0c;{dYD5KH&cnGSRqn3IO&s-0&$ozDg|bX&<$e0pcAnN4i+gmUBzk>e+g_rqukk
z8#|PpJ9YAG7NnTlKR!Q3Yj2_cD8I<F@c&-C^#nX*r-3rEMVaBkcVLSy4;Q{mTXd_q
z@Uv4>8p3z5=5Gk!=-Q2j+&a?>unAlEFuo(qa{JEn>>q3cybypGjL;Ceh;k5(F-*ph
z>2XYsp%Fw`#5RoRE_BL%^clmLju6(P7)cT~h?51Fy*M*-@kL(ErcWo6r}MnR%hqH5
zL*3Tt?rwag`;Z^MqX;Y3rdRb?&w0IA^r&7ec!d}2ND8;2b|}T81HaYXZJnV&>tR0+
zJ~B?hJft4ywKm&Ad~NmHTcvf}1JEWY!~QPx<6s+hv2aUg7{7|IS@-|xx2Lw%ckuhx
zD|qIO4ePJgudHk6#H_XV$<IC^{KdMoj%Tbd<KyVR2`|5lC%(tGfamBv_69o)LCR1Z
z47wy5<t5cgnHka)O?N7tvTsN;(y7j&PD)gG7{_oo2GNC4*Dx2qi-oqYY9qQnqTzz|
zjX)?A5GDeB<NC;UErhRi7+rH6tlgSfY@fu-qw}%j{Xu<17bYlVJQUcz8tCf_V8*&k
z<g0JtA3Gh=;r57Rsks?HUQ3)BJUUp<!A<riWAF$(N^=b9k^3;2K8UGgB%~=rhOZZ8
z=U%);)5Lr6ZaSGB(o(mAn^B6!k?kECV&B{l6-Cr#(fTkX%Cfk@tB|!V$~re(kYriX
z_t1zRv0}J)4_75*vXm3$mqhuhEH3d#stCSxTf5Q|`=~9}bER%;oco<B`!)Ti_P`*V
zs_#aGPulRw&Zt&j-WVRlNR;*{IVSjng5T$KIbB0^jCl&eT0J9rB$Z4Lk6|h<L?fc0
z$Uc7%71<f$8_KTS+>{hWVg+7v+&k3!f!o-v#b(c@50@qoL;8Nt2gE8jzsvd*$@;sb
z?1=;dIPhR1ax4|>_U-9!uvKNZq6B@LKIwIGA3qp+D3Lrn-G^-QGlvHrjSNf?`?}<t
zeqK_1(t(v&;7B<BDMP?r$zx&dP+<S3@0EOt#LppJ`acM3bOH~;QMjM(YATwHL}_<*
zmq<$!F({1Dx>J-4<(8ruyPK94*{M^if_NKnohObxiS1q`xc&8@;%)CAXgf4NA?=Mh
zT&VOX+~X&Yi2GwGw=(P>aC6hX?U<I(=nu1Y8})Nl!yLXX?Q(Z^x_3!Gb5G45V5#|O
z@omR7&nM?cgyFeq@fVJ_Jd?zy=Vs1QOk79JZ?_MSrpGnD(0kyz{qg|tH@fkP@t3m8
z#sa;}pRh3_UbnG>aKDXP=!_UPb`pP|joq*pj@j5lJ(l?E=4hjFBJg<|BXq#4HWui`
z`mv1}@jth*gYfTc+yXwR+1N?^wvF9z65DO;fe2<N%4ViwE~w`=)a7ikuvjcqn(c8j
zcRrsfH`Qi)(k!nn7YpiOe4t59nFX`l>}G8}XH+VS>SDRLs!mdWW<Fn3OXcE<nXSZ^
zDwWcKM1qgQ`FOUt3KLKU6EaYtdI3~82OCr`Ll%lqfW>-Uxl2Dz-Z?lAd5SFGWxX@{
zBzc!%jr@3@DqYq%eJb7QHAP;9y62s<S%Y;N&7e6}XhteYnR;3!G-=Pzq?zOitF(dK
zwnF`6$vX~9^{5gYfCT-T>uLJO>+4)?e9`gK#=q%4uDDP@Mo&-+y%H|^`f8glWb^0O
mme);3wpiM5E@cV}d9%&DV6(1FiL$<Kww5yGOg?Ys0saH_GT#LN

literal 0
HcmV?d00001

diff --git a/src/components/SimpleProcessDesigner/theme/iconfont.woff b/src/components/SimpleProcessDesigner/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/SimpleProcessDesigner/theme/iconfont.woff2 b/src/components/SimpleProcessDesigner/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/SimpleProcessDesigner/theme/workflow.css b/src/components/SimpleProcessDesigner/theme/workflow.css
index 2b9e0daa..ac711bc2 100644
--- a/src/components/SimpleProcessDesigner/theme/workflow.css
+++ b/src/components/SimpleProcessDesigner/theme/workflow.css
@@ -37,7 +37,7 @@
     font-family: anticon!important
 }
 .anticon-close:before {
-  content: "\E633"
+    content: "\E633"
 }
 .anticon-right:before {
     content: "\E61F"
@@ -486,7 +486,7 @@ html {
     height: 100%
 }
 
-@font-face {
+/* @font-face {
     font-family: IconFont;
     src: url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.eot");
     src: url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.woff") format("woff"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.ttf") format("truetype"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.svg#IconFont") format("svg")
@@ -499,6 +499,45 @@ html {
     -webkit-font-smoothing: antialiased;
     -webkit-text-stroke-width: .2px;
     -moz-osx-font-smoothing: grayscale
+} */
+
+@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";
 }
 
 .fd-nav {

From 11b7cf32ca78fcf616e347060a7de92f0b3c8ca2 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 7 Apr 2024 22:31:56 +0800
Subject: [PATCH 08/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E6=B5=81=E7=A8=8B=EF=BC=9A=E5=A2=9E=E5=8A=A0=E5=8C=85?=
 =?UTF-8?q?=E5=AE=B9=E5=88=86=E6=94=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesigner/src/addNode.vue     | 37 ++++++++-
 .../SimpleProcessDesigner/src/consts.ts       | 14 +++-
 .../SimpleProcessDesigner/src/nodeWrap.vue    | 78 +++++++++++++++----
 .../SimpleProcessDesigner/src/util.ts         | 26 +++----
 4 files changed, 125 insertions(+), 30 deletions(-)

diff --git a/src/components/SimpleProcessDesigner/src/addNode.vue b/src/components/SimpleProcessDesigner/src/addNode.vue
index 2cbc0f83..20148cc9 100644
--- a/src/components/SimpleProcessDesigner/src/addNode.vue
+++ b/src/components/SimpleProcessDesigner/src/addNode.vue
@@ -42,6 +42,12 @@
             </div>
             <p>并行分支</p>
           </a>
+          <a class="add-node-popover-item condition" @click="addType(7)">
+            <div class="item-wrapper">
+              <span class="iconfont icon-Inclusive"></span>
+            </div>
+            <p>包容分支</p>
+          </a>
         </div>
         <template #reference>
           <button class="btn" type="button" v-if="showAddButton">
@@ -110,7 +116,7 @@ const addType = (type: number) => {
       childNode: props.childNodeP,
       conditionNodes: [
         {
-          name: '条件1',
+          name: '分支1',
           error: true,
           type: 3,
           priorityLevel: 1,
@@ -157,6 +163,35 @@ const addType = (type: number) => {
     }
     emits('update:childNodeP', data)
   }
+  // 包容分支 fork
+  if (type === NodeType.INCLUSIVE_NODE_FORK) {
+    const data = {
+      name: '包容分支_FORK',
+      type: 7,
+      id: 'GateWay_' + generateUUID(),
+      conditionNodes: [
+        {
+          name: '分支1',
+          error: true,
+          type: 3,
+          childNode: null
+        },
+        {
+          name: '其它情况',
+          type: 3,
+          childNode: null
+        }
+      ],
+      childNode: {
+        id: 'GateWay_' + generateUUID(),
+        name: '包容分支_JOIN',
+        type: 8,
+        error: true,
+        childNode: props.childNodeP,
+      }
+    }
+    emits('update:childNodeP', data)
+  }
   // if (type != 4) {
   //   var data
   //   if (type == 1) {
diff --git a/src/components/SimpleProcessDesigner/src/consts.ts b/src/components/SimpleProcessDesigner/src/consts.ts
index 9c36ff5a..2d9b585e 100644
--- a/src/components/SimpleProcessDesigner/src/consts.ts
+++ b/src/components/SimpleProcessDesigner/src/consts.ts
@@ -28,7 +28,15 @@ export enum NodeType {
   /**
    * 并行分支聚合
    */
-  PARALLEL_NODE_JOIN = 6
+  PARALLEL_NODE_JOIN = 6,
+  /**
+   * 包容分支分叉节点
+   */
+  INCLUSIVE_NODE_FORK = 7,
+  /**
+   * 包容分支聚合节点
+   */
+  INCLUSIVE_NODE_JOIN = 8
 }
 
 export const NODE_BG_COLOR = new Map()
@@ -48,8 +56,8 @@ export type WorkFlowNode = {
   id: string,
   type: NodeType,
   name: string,
-  attributes: Object | undefined,
+  attributes: any,
   // 操作人
   childNode?: WorkFlowNode | undefined,
-  conditionNodes: WorkFlowNode[] | undefined
+  conditionNodes: WorkFlowNode[]
 }
\ No newline at end of file
diff --git a/src/components/SimpleProcessDesigner/src/nodeWrap.vue b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
index 1264e42a..9f9af39a 100644
--- a/src/components/SimpleProcessDesigner/src/nodeWrap.vue
+++ b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
@@ -71,8 +71,8 @@
                     > -->
                 <i
                   class="anticon anticon-close close"
-                  @click="delTerm(index)"
-                  v-if="index != nodeConfig.conditionNodes?.length - 1"
+                  @click="delTerm(nodeConfig.type,index)"
+                  v-if="nodeConfig.conditionNodes && index != nodeConfig.conditionNodes?.length - 1"
                 ></i>
               </div>
               <div class="auto-judge" :class="isTried && item.error ? 'error active' : ''">
@@ -145,6 +145,55 @@
             <div class="top-left-cover-line"></div>
             <div class="bottom-left-cover-line"></div>
           </template>
+          <template v-if="index === nodeConfig.conditionNodes.length - 1">
+            <div class="top-right-cover-line"></div>
+            <div class="bottom-right-cover-line"></div>
+          </template>
+        </div>
+      </div>
+      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
+    </div>
+  </div>
+  <div class="branch-wrap" v-if="nodeConfig.type == 7">
+    <div class="branch-box-wrap">
+      <div class="branch-box">
+        <button class="add-branch" @click="addTerm(nodeConfig.type)">添加分支</button>
+        <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-mountedFoucs
+                  v-model="item.name"
+                />
+                <span v-else class="editable-title" @click="clickEvent(index)">
+                  {{ item.name }}
+                </span>
+                 <i
+                  class="anticon anticon-close close"
+                  @click="delTerm(nodeConfig.type,index)"
+                  v-if="index != nodeConfig.conditionNodes?.length - 1"
+                  ></i>
+              </div>
+              <div class="auto-judge" :class="isTried && item.error ? 'error active' : ''">
+                <div class="content">{{ conditionStr(nodeConfig, index) }}</div>
+                <div class="error_tip" v-if="isTried && item.error">
+                  <i class="anticon anticon-exclamation-circle"></i>
+                </div>
+              </div>
+              <addNode v-model:childNodeP="item.childNode" />
+            </div>
+          </div>
+          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+          <template v-if="index == 0">
+            <div class="top-left-cover-line"></div>
+            <div class="bottom-left-cover-line"></div>
+          </template>
           <template v-if="index == nodeConfig.conditionNodes.length - 1">
             <div class="top-right-cover-line"></div>
             <div class="bottom-right-cover-line"></div>
@@ -154,7 +203,7 @@
       <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
     </div>
   </div>
-  <div class="node-wrap" v-if="nodeConfig.type === 6">
+  <div class="node-wrap" v-if="nodeConfig.type === NodeType.PARALLEL_NODE_JOIN || nodeConfig.type === NodeType.INCLUSIVE_NODE_JOIN">
     <div class="node-wrap-box">
       <div class="content">
         <div class="text">聚合</div>
@@ -178,7 +227,7 @@ import {
 import { WorkFlowNode, NodeType } from './consts'
 import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
 let _uid = getCurrentInstance().uid
-
+import { generateUUID } from '@/utils'
 let props = defineProps({
   nodeConfig: {
     type: Object as () => WorkFlowNode,
@@ -293,18 +342,21 @@ const delNode = () => {
 const addTerm = (type:number) => {
   const len = props.nodeConfig.conditionNodes.length
   let lastIndex = props.nodeConfig.conditionNodes.length - 1
-  let nodeName = '条件' + len
+  let nodeName = '分支' + len
   if(type === NodeType.PARALLEL_NODE_FORK) {
     nodeName = '并行' + (len+1);
     lastIndex = props.nodeConfig.conditionNodes.length;
   }
-  // eslint-disable-next-line vue/no-mutating-props
-  props.nodeConfig.conditionNodes.splice(lastIndex, 0, {
+  const conditionData = {
+    id: 'SequenceFlow'+ generateUUID(),
     name: nodeName,
-    type: 3,
-    conditionList: [],
-    childNode: null
-  })
+    type: NodeType.CONDITION_NODE,
+    childNode: undefined,
+    conditionNodes:[],
+    attributes : undefined
+  };
+  // eslint-disable-next-line vue/no-mutating-props
+  props.nodeConfig.conditionNodes.splice(lastIndex, 0, conditionData)
   resetConditionNodesErr()
   emits('update:nodeConfig', props.nodeConfig)
 }
@@ -320,7 +372,7 @@ const delTerm = (nodeType: number, index: number) => {
       props.nodeConfig.conditionNodes.map((item, index) => {
       // item.priorityLevel = index + 1
       if (index !== props.nodeConfig.conditionNodes.length - 1) {
-        item.name = `条件${index + 1}`
+        item.name = `分支${index + 1}`
       }
     })
     }
@@ -328,7 +380,7 @@ const delTerm = (nodeType: number, index: number) => {
     resetConditionNodesErr()
     emits('update:nodeConfig', props.nodeConfig)
     if (props.nodeConfig.conditionNodes.length == 1) {
-      if (nodeType === NodeType.PARALLEL_NODE_FORK) {
+      if (nodeType === NodeType.PARALLEL_NODE_FORK || nodeType === NodeType.INCLUSIVE_NODE_FORK) {
         const joinNode = props.nodeConfig.childNode;
         if (joinNode?.childNode) {
           if (props.nodeConfig.conditionNodes[0].childNode) {
diff --git a/src/components/SimpleProcessDesigner/src/util.ts b/src/components/SimpleProcessDesigner/src/util.ts
index b33778b7..6b139366 100644
--- a/src/components/SimpleProcessDesigner/src/util.ts
+++ b/src/components/SimpleProcessDesigner/src/util.ts
@@ -164,18 +164,18 @@ export const conditionStr = (nodeConfig, index) => {
   // }
 }
 
-export const dealStr = (str: string, obj) => {
-  const arr = []
-  const list = str.split(',')
-  for (const elem in obj) {
-    list.map((item) => {
-      if (item == elem) {
-        arr.push(obj[elem].value)
-      }
-    })
-  }
-  return arr.join('或')
-}
+// export const dealStr = (str: string, obj) => {
+//   const arr = []
+//   const list = str.split(',')
+//   for (const elem in obj) {
+//     list.map((item) => {
+//       if (item == elem) {
+//         arr.push(obj[elem].value)
+//       }
+//     })
+//   }
+//   return arr.join('或')
+// }
 
 export const removeEle = (arr, elem, key = 'id') => {
   let includesIndex
@@ -187,7 +187,7 @@ export const removeEle = (arr, elem, key = 'id') => {
   arr.splice(includesIndex, 1)
 }
 
-export const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250','50, 150, 250','248, 107, 248','244, 118, 118']
+export const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250','50, 150, 250','248, 107, 248','244, 118, 118','23, 148, 46','23, 148, 46']
 export const placeholderList = ['发起人', '审核人', '抄送人']
 export const setTypes = [
   { value: 1, label: '指定成员' },

From 4b2ff9f614e3253fe474833defe33d1813f4d479 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 8 Apr 2024 22:51:24 +0800
Subject: [PATCH 09/62] =?UTF-8?q?bpm=EF=BC=9Acode=20review=20=E9=92=89?=
 =?UTF-8?q?=E9=92=89=E6=B5=81=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/directives/index.ts             | 6 +++---
 src/store/modules/simpleWorkflow.ts | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/directives/index.ts b/src/directives/index.ts
index 8fb6ff94..91847ac0 100644
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -10,16 +10,16 @@ import { hasPermi } from './permission/hasPermi'
 export const setupAuth = (app: App<Element>) => {
   hasRole(app)
   hasPermi(app)
- 
 }
 
+// TODO @jason：拼写是不是 Focus 聚焦？
 /**
  * 导出指令：v-mountedFoucs
  */
-export const setupMountedFoucs= (app: App<Element>) => {
+export const setupMountedFoucs = (app: App<Element>) => {
   app.directive('mountedFoucs', {
     mounted(el) {
-      el.focus();
+      el.focus()
     }
   })
 }
diff --git a/src/store/modules/simpleWorkflow.ts b/src/store/modules/simpleWorkflow.ts
index c7c8abd4..6c92a6b6 100644
--- a/src/store/modules/simpleWorkflow.ts
+++ b/src/store/modules/simpleWorkflow.ts
@@ -1,3 +1,4 @@
+// TODO @jason：这个放到 store/modules/bpm/simpleWorkflow.ts
 import { store } from '../index'
 import { defineStore } from 'pinia'
 

From cfc00033889d66aac895ef02b10abfb6d59c05df Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 14 Apr 2024 10:26:42 +0800
Subject: [PATCH 10/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E6=B5=81=E7=A8=8B=EF=BC=9A=E5=A2=9E=E5=8A=A0=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5=E6=9D=83=E9=99=90=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesigner/src/addNode.vue     |   8 +-
 .../src/drawer/approverDrawer.vue             | 462 ++++++++++++------
 .../SimpleProcessDesigner/src/nodeWrap.vue    |  28 +-
 src/views/bpm/simpleWorkflow/index.vue        |  76 +--
 4 files changed, 373 insertions(+), 201 deletions(-)

diff --git a/src/components/SimpleProcessDesigner/src/addNode.vue b/src/components/SimpleProcessDesigner/src/addNode.vue
index 20148cc9..b505f208 100644
--- a/src/components/SimpleProcessDesigner/src/addNode.vue
+++ b/src/components/SimpleProcessDesigner/src/addNode.vue
@@ -70,6 +70,10 @@ let props = defineProps({
   showAddButton:{
     type:Boolean,
     default:true
+  },
+  defaultFieldsPermission : {
+    type: Array,
+    default: () => ([])
   }
 })
 let emits = defineEmits(['update:childNodeP'])
@@ -78,6 +82,7 @@ const addType = (type: number) => {
   visible.value = false
   // 审核节点
   if (type === NodeType.APPROVE_USER_NODE) {
+    console.log("props.defaultFieldsPermission", props.defaultFieldsPermission)
     const data = {
       name: '审核人',
       error: true,
@@ -86,7 +91,8 @@ const addType = (type: number) => {
       attributes: {
         approveMethod: undefined,
         candidateStrategy: undefined,
-        candidateParam: undefined
+        candidateParam: undefined,
+        fieldsPermission: props.defaultFieldsPermission,
       },
       childNode: props.childNodeP
     }
diff --git a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
index cbcec808..fae369d1 100644
--- a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
+++ b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/html-self-closing -->
 <template>
   <el-drawer
     :append-to-body="true"
@@ -5,152 +6,218 @@
     :show-close="false"
     :size="550"
     :before-close="saveConfig"
+    class="justify-start"
   >
     <template #header>
-      <div class="user-task-header">审批设置</div>
+      <div class="w-full flex flex-col">
+        <span class="text-size-2xl">审批设置</span>
+        <el-divider />
+      </div>
     </template>
-    <div>
-      <el-form label-position="top" label-width="100px">
-        <el-form-item label="审批方式" prop="approveMethod">
-          <el-select v-model="candidateConfig.approveMethod" style="width: 100%" clearable>
-            <el-option
-              v-for="dict in approveMethods"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
+    <el-tabs type="border-card">
+      <el-tab-pane label="审批人">
+        <div>
+          <el-form label-position="top" label-width="100px">
+            <el-form-item label="审批方式" prop="approveMethod">
+              <el-select v-model="candidateConfig.approveMethod" style="width: 100%" clearable>
+                <el-option
+                  v-for="dict in approveMethods"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
 
-        <el-form-item label="审批人规则类型" prop="candidateStrategy">
-          <el-select v-model="candidateConfig.candidateStrategy" style="width: 100%" clearable @change="changecandidateStrategy">
-            <el-option
-              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
+            <el-form-item label="审批人规则类型" prop="candidateStrategy">
+              <el-select
+                v-model="candidateConfig.candidateStrategy"
+                style="width: 100%"
+                clearable
+                @change="changecandidateStrategy"
+              >
+                <el-option
+                  v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
 
-        <el-form-item
-          v-if="candidateConfig.candidateStrategy == 10"
-          label="指定角色"
-          prop="candidateParam"
-        >
-          <el-select
-            v-model="candidateConfig.candidateParam"
-            clearable
-            multiple
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in roleOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="candidateConfig.candidateStrategy == 20 || candidateConfig.candidateStrategy == 21"
-          label="指定部门"
-          prop="candidateParam"
-          span="24"
-        >
-          <el-tree-select
-            ref="treeRef"
-            v-model="candidateConfig.candidateParam"
-            :data="deptTreeOptions"
-            :props="defaultProps"
-            empty-text="加载中，请稍后"
-            multiple
-            node-key="id"
-            style="width: 100%"
-            show-checkbox
-          />
-        </el-form-item>
-        <el-form-item
-          v-if="candidateConfig.candidateStrategy == 22"
-          label="指定岗位"
-          prop="candidateParam"
-          span="24"
-        >
-          <el-select
-            v-model="candidateConfig.candidateParam"
-            clearable
-            multiple
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in postOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="
-            candidateConfig.candidateStrategy == 30 ||
-            candidateConfig.candidateStrategy == 31 ||
-            candidateConfig.candidateStrategy == 32
-          "
-          label="指定用户"
-          prop="candidateParam"
-          span="24"
-        >
-          <el-select
-            v-model="candidateConfig.candidateParam"
-            clearable
-            multiple
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in userOptions"
-              :key="item.id"
-              :label="item.nickname"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="candidateConfig.candidateStrategy === 40"
-          label="指定用户组"
-          prop="candidateParam"
-        >
-          <el-select
-            v-model="candidateConfig.candidateParam"
-            clearable
-            multiple
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in userGroupOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="candidateConfig.candidateStrategy === 60"
-          label="流程表达式"
-          prop="candidateParam"
-        >
-          <el-input
-            type="textarea"
-            v-model="candidateConfig.candidateParam[0]"
-            clearable
-            style="width: 100%"
-          />
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="demo-drawer__footer clear">
-      <el-button type="primary" @click="saveConfig">确 定</el-button>
-      <el-button @click="closeDrawer">取 消</el-button>
-    </div>
+            <el-form-item
+              v-if="candidateConfig.candidateStrategy == 10"
+              label="指定角色"
+              prop="candidateParam"
+            >
+              <el-select
+                v-model="candidateConfig.candidateParam"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in roleOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                candidateConfig.candidateStrategy == 20 || candidateConfig.candidateStrategy == 21
+              "
+              label="指定部门"
+              prop="candidateParam"
+              span="24"
+            >
+              <el-tree-select
+                ref="treeRef"
+                v-model="candidateConfig.candidateParam"
+                :data="deptTreeOptions"
+                :props="defaultProps"
+                empty-text="加载中，请稍后"
+                multiple
+                node-key="id"
+                style="width: 100%"
+                show-checkbox
+              />
+            </el-form-item>
+            <el-form-item
+              v-if="candidateConfig.candidateStrategy == 22"
+              label="指定岗位"
+              prop="candidateParam"
+              span="24"
+            >
+              <el-select
+                v-model="candidateConfig.candidateParam"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in postOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                candidateConfig.candidateStrategy == 30 ||
+                candidateConfig.candidateStrategy == 31 ||
+                candidateConfig.candidateStrategy == 32
+              "
+              label="指定用户"
+              prop="candidateParam"
+              span="24"
+            >
+              <el-select
+                v-model="candidateConfig.candidateParam"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="candidateConfig.candidateStrategy === 40"
+              label="指定用户组"
+              prop="candidateParam"
+            >
+              <el-select
+                v-model="candidateConfig.candidateParam"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in userGroupOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="candidateConfig.candidateStrategy === 60"
+              label="流程表达式"
+              prop="candidateParam"
+            >
+              <el-input
+                type="textarea"
+                v-model="candidateConfig.candidateParam[0]"
+                clearable
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="设置字段权限">
+        <div class="field-setting-pane h-full w-full flex flex-col">
+          <div class="field-setting-content mr-2 overflow-auto py-4 pr-2">
+            <div class="field-container flex flex-col flex-items-start">
+              <div class="mb-2 ml-4 font-bold">字段权限</div>
+              <div class="field-body ml-4 mt-2">
+                <div class="field-permit-box text-size--13px">
+                  <div class="field-permit-title">
+                    <span class="setting-title-label">组件名称</span>
+                    <span class="setting-title-label">可编辑</span>
+                    <span class="setting-title-label">只读</span>
+                    <span class="setting-title-label">隐藏</span>
+                  </div>
+                  <div class="field-setting-item">
+                    <span class="field-setting-item-label">全选</span>
+                    <span class="all-checkbox-wrap">
+                      <el-checkbox label="" size="large" />
+                    </span>
+                    <span class="all-checkbox-wrap">
+                      <el-checkbox label="" size="large" />
+                    </span>
+                    <span class="all-checkbox-wrap">
+                      <el-checkbox label="" size="large" />
+                    </span>
+                  </div>
+                  <div class="field-setting-item-check">
+                    <div class="field-setting-item" v-for="(item,index) in candidateConfig.fieldsPermission" :key="index">
+                      <span class="field-setting-item-label"> {{ item.title }}</span>
+                      <el-radio-group v-model="item.permission" >
+                        <div class="item-radio-wrap">
+                            <el-radio value="1"  size="large" label="1"/>
+                        </div>
+                        <div class="item-radio-wrap">
+                            <el-radio value="2"  size="large" label="2"/>
+                        </div>
+                        <div class="item-radio-wrap">
+                            <el-radio value="3"  size="large" label="3"/>
+                        </div>
+                      </el-radio-group>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
   </el-drawer>
 </template>
 <script lang="ts" setup>
@@ -173,12 +240,13 @@ const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
 const candidateConfig = ref({
   candidateStrategy: undefined,
   candidateParam: [],
-  approveMethod: undefined
+  approveMethod: undefined,
+  fieldsPermission:[]
 })
-let approverConfig = ref({})
+// let approverConfig = ref({})
 let store = useWorkFlowStoreWithOut()
 let { setApproverDrawer, setUserTaskConfig } = store
-let approverConfig1 = computed(() => store.approverConfig1)
+// let approverConfig1 = computed(() => store.approverConfig1)
 let approverDrawer = computed(() => store.approverDrawer)
 const userTaskConfig = computed(() => store.userTaskConfig)
 
@@ -192,34 +260,34 @@ let visible = computed({
 })
 watch(userTaskConfig, (val) => {
   if (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) {
+    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)
+      if (candidateParamStr) {
+        candidateConfig.value.candidateParam = candidateParamStr.split(',').map((item) => +item)
       }
     }
-    
-    // candidateConfig.value = val.value.attributes
+    console.log('val.value.attributes.fieldsPermission', val.value.attributes.fieldsPermission)
+    candidateConfig.value.fieldsPermission = val.value.attributes.fieldsPermission
   }
 })
-watch(approverConfig1, (val) => {
-  approverConfig.value = val.value
-})
+// watch(approverConfig1, (val) => {
+//   approverConfig.value = val.value
+// })
 
 const saveConfig = () => {
   const rawConfig = toRaw(userTaskConfig.value)
-  const { approveMethod, candidateStrategy , candidateParam} = toRaw(candidateConfig.value);
+  const { approveMethod, candidateStrategy, candidateParam, fieldsPermission } = toRaw(candidateConfig.value)
   const candidateParamStr = candidateParam.join(',')
   rawConfig.value.attributes = {
     approveMethod,
     candidateStrategy,
-    candidateParam: candidateParamStr
-  } 
+    candidateParam: candidateParamStr,
+    fieldsPermission: fieldsPermission
+  }
   rawConfig.flag = true
   // TODO 进行校验
   // setApproverConfig({
@@ -230,7 +298,7 @@ const saveConfig = () => {
   setUserTaskConfig({
     value: rawConfig.value,
     flag: true,
-    id: userTaskConfig.value.id,
+    id: userTaskConfig.value.id
   })
   closeDrawer()
 }
@@ -253,10 +321,84 @@ onMounted(async () => {
   deptTreeOptions.value = handleTree(deptOptions, 'id')
   // 获得用户组列表
   userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
+
 })
 </script>
 <style lang="scss" scoped>
-.user-task-header {
-  font-size: 16px !important;
+// ::v-deep .el-drawer__header {
+//   margin-bottom: 2px;
+// }
+.field-permit-title {
+  height: 45px;
+  padding: 0 0 0 12px;
+  line-height: 32px;
+  background-color: rgba(248, 250, 252, 0.04);
+  border: 1px solid rgba(31, 56, 88, 0.1);
+
+  .setting-title-label:first-child {
+    text-align: left;
+  }
+
+  .setting-title-label {
+    display: inline-block;
+    width: 110px;
+    padding: 5px 0;
+    font-size: 13px;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.6);
+    text-align: center;
+  }
 }
+
+.field-setting-item {
+  display: flex;
+  align-items: center;
+  height: 38px;
+  padding-bottom: 0;
+  padding-left: 12px;
+  line-height: 38px;
+  border-right: 1px solid rgba(31, 56, 88, 0.1);
+  border-bottom: 1px solid rgba(31, 56, 88, 0.1);
+  border-left: 1px solid rgba(31, 56, 88, 0.1);
+
+  .no-label {
+    font-size: 0;
+  }
+
+  .field-setting-item-label {
+    display: inline-block;
+    width: 110px;
+    min-height: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: text;
+  }
+
+  .all-checkbox-wrap {
+    display: inline-block;
+    width: 110px;
+    text-align: center;
+  }
+
+  .item-radio-wrap {
+    display: inline-block;
+    width: 110px;
+    padding-left: 6px;
+    text-align: center;
+  }
+
+}
+
+::v-deep(.el-radio__label) {  
+  opacity: 0; /* 隐藏标签文本 */  
+}
+
+::v-deep(.el-divider--horizontal) {  
+  display: block;
+  width: 100%;
+  height: 1px;
+  margin: 4px 0;
+  border-top: 1px var(--el-border-color) var(--el-border-style);
+} 
 </style>
diff --git a/src/components/SimpleProcessDesigner/src/nodeWrap.vue b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
index 9f9af39a..b86148ae 100644
--- a/src/components/SimpleProcessDesigner/src/nodeWrap.vue
+++ b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
@@ -44,7 +44,7 @@
         <i class="anticon anticon-exclamation-circle"></i>
       </div>
     </div>
-    <addNode v-model:childNodeP="nodeConfig.childNode" />
+    <addNode v-model:childNodeP="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission" />
   </div>
   <div class="branch-wrap" v-if="nodeConfig.type == 4">
     <div class="branch-box-wrap">
@@ -92,10 +92,10 @@
                   <i class="anticon anticon-exclamation-circle"></i>
                 </div>
               </div>
-              <addNode v-model:childNodeP="item.childNode" />
+              <addNode v-model:childNodeP="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
             </div>
           </div>
-          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
           <template v-if="index == 0">
             <div class="top-left-cover-line"></div>
             <div class="bottom-left-cover-line"></div>
@@ -106,7 +106,7 @@
           </template>
         </div>
       </div>
-      <addNode v-model:childNodeP="nodeConfig.childNode" />
+      <addNode v-model:childNodeP="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
     </div>
   </div>
   <div class="branch-wrap" v-if="nodeConfig.type == 5">
@@ -137,10 +137,10 @@
                   <i class="anticon anticon-exclamation-circle"></i>
                 </div>
               </div>
-              <addNode v-model:childNodeP="item.childNode" />
+              <addNode v-model:childNodeP="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
             </div>
           </div>
-          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" :default-fields-permission="props.defaultFieldsPermission" />
           <template v-if="index == 0">
             <div class="top-left-cover-line"></div>
             <div class="bottom-left-cover-line"></div>
@@ -151,7 +151,7 @@
           </template>
         </div>
       </div>
-      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
+      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" :default-fields-permission="props.defaultFieldsPermission"/>
     </div>
   </div>
   <div class="branch-wrap" v-if="nodeConfig.type == 7">
@@ -186,10 +186,10 @@
                   <i class="anticon anticon-exclamation-circle"></i>
                 </div>
               </div>
-              <addNode v-model:childNodeP="item.childNode" />
+              <addNode v-model:childNodeP="item.childNode"  :default-fields-permission="props.defaultFieldsPermission"/>
             </div>
           </div>
-          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" :default-fields-permission="props.defaultFieldsPermission" />
           <template v-if="index == 0">
             <div class="top-left-cover-line"></div>
             <div class="bottom-left-cover-line"></div>
@@ -200,7 +200,7 @@
           </template>
         </div>
       </div>
-      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
+      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" :default-fields-permission="props.defaultFieldsPermission" />
     </div>
   </div>
   <div class="node-wrap" v-if="nodeConfig.type === NodeType.PARALLEL_NODE_JOIN || nodeConfig.type === NodeType.INCLUSIVE_NODE_JOIN">
@@ -209,9 +209,9 @@
         <div class="text">聚合</div>
       </div>
     </div>
-    <addNode v-model:childNodeP="nodeConfig.childNode" />
+    <addNode v-model:childNodeP="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission" />
   </div>
-  <nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
+  <nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission" />
 </template>
 <script lang="ts" setup>
 import addNode from './addNode.vue'
@@ -232,6 +232,10 @@ let props = defineProps({
   nodeConfig: {
     type: Object as () => WorkFlowNode,
     default: () => ({}) as WorkFlowNode
+  },
+  defaultFieldsPermission : {
+    type: Array,
+    default: () => ([])
   }
 })
 
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simpleWorkflow/index.vue
index 5e215c1b..0a6eabd4 100644
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
@@ -12,7 +12,7 @@
           <div class="start-event-node-circle">开始</div>
         </div>
         <div class="start-event-node-line"></div>
-        <nodeWrap v-model:nodeConfig="nodeConfig" />
+        <nodeWrap v-model:nodeConfig="nodeConfig" :defaultFieldsPermission="defaultFieldsPermission" />
         <!-- <div class="end-node">
           <div class="end-node-circle"></div>
           <div class="end-node-text">流程结束</div>
@@ -23,7 +23,7 @@
       </div>
     </section>
   </div>
-  <approverDrawer />
+  <approverDrawer/>
   <copyerDrawer />
 </template>
 <script lang="ts" setup>
@@ -33,6 +33,8 @@ import copyerDrawer from '@/components/SimpleProcessDesigner/src/drawer/copyerDr
 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: 'SimpleWorkflowDesignEditor' })
 const uid = getCurrentInstance().uid
 const router = useRouter() // 路由
@@ -40,33 +42,33 @@ 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: undefined
-  }
-)
+  name: '发起人',
+  type: 0,
+  id: 'StartEvent_' + uid,
+  childNode: undefined,
+  attributes: undefined,
+  conditionNodes: []
+})
+// 默认的表单字段权限
+const defaultFieldsPermission: any[] = []
 const test = async () => {
   if (!modelId) {
     message.error('缺少模型 modelId 编号')
     return
   }
-  const test = nodeConfig.value;
+  const test = nodeConfig.value
   console.log('test is ', test)
   console.log('nodeConfig.value ', nodeConfig.value)
-  const data = {
+  const data1 = {
     modelId: modelId,
     simpleModelBody: toRaw(nodeConfig.value)
   }
-  const data1 = {
+  const data = {
     modelId: modelId,
     simpleModelBody: nodeConfig.value
   }
-  console.log('request json data is ', data)
   console.log('request json data1 is ', data1)
-  const result = await saveBpmSimpleModel(data1)
+  const result = await saveBpmSimpleModel(data)
   console.log('save the result is ', result)
   if (result) {
     message.success('修改成功')
@@ -74,17 +76,35 @@ const test = async () => {
   } else {
     message.alert('修改失败')
   }
-  
 }
 const close = () => {
   router.push({ path: '/bpm/manager/model' })
 }
 onMounted(async () => {
+  const bpmnModel = await getModel(modelId)
+  if (bpmnModel) {
+    const formType = bpmnModel.formType
+    if (formType === 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){
+  if (result) {
     console.log('get the result is ', result)
-    nodeConfig.value = result;
+    nodeConfig.value = result
   }
 })
 </script>
@@ -104,7 +124,7 @@ onMounted(async () => {
   height: 40px;
   font-size: 14px;
   color: #f8f8fa;
-  background-image: linear-gradient(-30deg,#bbbbc4,#d5d5de),linear-gradient(#bcbcc5,#bcbcc5);
+  background-image: linear-gradient(-30deg, #bbbbc4, #d5d5de), linear-gradient(#bcbcc5, #bcbcc5);
   border-radius: 50%;
   justify-content: center;
   align-items: center;
@@ -130,19 +150,19 @@ onMounted(async () => {
   justify-content: center;
   font-size: 14px;
   color: #f8f8fa;
-  background-image: linear-gradient(90deg,#ff6a00,#f78b3e),linear-gradient(#ff6a00,#ff6a00);
+  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: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  width: 2px;
+  height: 100%;
+  margin: auto;
+  background-color: #cacaca;
+  content: '';
 }
 
 .start-event-node-line {

From 2589fbe5601e5fa0c258eb667178189ab8a31720 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Thu, 18 Apr 2024 15:56:49 +0800
Subject: [PATCH 11/62] =?UTF-8?q?code=20review=20=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesigner/src/addNode.vue     |  9 +--
 .../src/drawer/approverDrawer.vue             | 78 +++++++++++++------
 .../src/drawer/copyerDrawer.vue               |  2 +-
 .../SimpleProcessDesigner/src/nodeWrap.vue    | 38 ++++-----
 src/directives/index.ts                       |  7 +-
 src/main.ts                                   |  4 +-
 src/store/modules/{ => bpm}/simpleWorkflow.ts |  3 +-
 src/views/bpm/simpleWorkflow/index.vue        | 23 +++---
 8 files changed, 91 insertions(+), 73 deletions(-)
 rename src/store/modules/{ => bpm}/simpleWorkflow.ts (92%)

diff --git a/src/components/SimpleProcessDesigner/src/addNode.vue b/src/components/SimpleProcessDesigner/src/addNode.vue
index b505f208..4d8053d9 100644
--- a/src/components/SimpleProcessDesigner/src/addNode.vue
+++ b/src/components/SimpleProcessDesigner/src/addNode.vue
@@ -71,18 +71,15 @@ let props = defineProps({
     type:Boolean,
     default:true
   },
-  defaultFieldsPermission : {
-    type: Array,
-    default: () => ([])
-  }
 })
 let emits = defineEmits(['update:childNodeP'])
 let visible = ref(false)
+const defaultFieldsPermission = inject('defaultFieldsPermission')
+
 const addType = (type: number) => {
   visible.value = false
   // 审核节点
   if (type === NodeType.APPROVE_USER_NODE) {
-    console.log("props.defaultFieldsPermission", props.defaultFieldsPermission)
     const data = {
       name: '审核人',
       error: true,
@@ -92,7 +89,7 @@ const addType = (type: number) => {
         approveMethod: undefined,
         candidateStrategy: undefined,
         candidateParam: undefined,
-        fieldsPermission: props.defaultFieldsPermission,
+        fieldsPermission: defaultFieldsPermission,
       },
       childNode: props.childNodeP
     }
diff --git a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
index fae369d1..f6196daa 100644
--- a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
+++ b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
@@ -162,7 +162,7 @@
           </el-form>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="设置字段权限">
+      <el-tab-pane label="设置字段权限" v-if ="formType === 10">
         <div class="field-setting-pane h-full w-full flex flex-col">
           <div class="field-setting-content mr-2 overflow-auto py-4 pr-2">
             <div class="field-container flex flex-col flex-items-start">
@@ -175,30 +175,43 @@
                     <span class="setting-title-label">只读</span>
                     <span class="setting-title-label">隐藏</span>
                   </div>
-                  <div class="field-setting-item">
+                  <!-- <div class="field-setting-item">
                     <span class="field-setting-item-label">全选</span>
                     <span class="all-checkbox-wrap">
-                      <el-checkbox label="" size="large" />
+                      <el-checkbox
+                        label=""
+                        size="large"
+                      />
                     </span>
                     <span class="all-checkbox-wrap">
-                      <el-checkbox label="" size="large" />
+                      <el-checkbox
+                        label=""
+                        size="large"
+                      />
                     </span>
                     <span class="all-checkbox-wrap">
-                      <el-checkbox label="" size="large" />
+                      <el-checkbox
+                        label=""
+                        size="large"
+                      />
                     </span>
-                  </div>
+                  </div> -->
                   <div class="field-setting-item-check">
-                    <div class="field-setting-item" v-for="(item,index) in candidateConfig.fieldsPermission" :key="index">
+                    <div
+                      class="field-setting-item"
+                      v-for="(item, index) in candidateConfig.fieldsPermission"
+                      :key="index"
+                    >
                       <span class="field-setting-item-label"> {{ item.title }}</span>
-                      <el-radio-group v-model="item.permission" >
+                      <el-radio-group v-model="item.permission">
                         <div class="item-radio-wrap">
-                            <el-radio value="1"  size="large" label="1"/>
+                          <el-radio value="1" size="large" label="1" />
                         </div>
                         <div class="item-radio-wrap">
-                            <el-radio value="2"  size="large" label="2"/>
+                          <el-radio value="2" size="large" label="2" />
                         </div>
                         <div class="item-radio-wrap">
-                            <el-radio value="3"  size="large" label="3"/>
+                          <el-radio value="3" size="large" label="3" />
                         </div>
                       </el-radio-group>
                     </div>
@@ -223,8 +236,8 @@
 <script lang="ts" setup>
 import { ref, watch, computed, toRaw } from 'vue'
 import { approveMethods } from '../util'
-import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
-import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
+import { useWorkFlowStoreWithOut } from '@/store/modules/bpm/simpleWorkflow'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { defaultProps, handleTree } from '@/utils/tree'
 import * as RoleApi from '@/api/system/role'
 import * as DeptApi from '@/api/system/dept'
@@ -241,15 +254,14 @@ const candidateConfig = ref({
   candidateStrategy: undefined,
   candidateParam: [],
   approveMethod: undefined,
-  fieldsPermission:[]
+  fieldsPermission: []
 })
-// let approverConfig = ref({})
-let store = useWorkFlowStoreWithOut()
+const store = useWorkFlowStoreWithOut()
 let { setApproverDrawer, setUserTaskConfig } = store
 // let approverConfig1 = computed(() => store.approverConfig1)
 let approverDrawer = computed(() => store.approverDrawer)
 const userTaskConfig = computed(() => store.userTaskConfig)
-
+const formType = inject('formType')
 let visible = computed({
   get() {
     return approverDrawer.value
@@ -280,7 +292,9 @@ watch(userTaskConfig, (val) => {
 
 const saveConfig = () => {
   const rawConfig = toRaw(userTaskConfig.value)
-  const { approveMethod, candidateStrategy, candidateParam, fieldsPermission } = toRaw(candidateConfig.value)
+  const { approveMethod, candidateStrategy, candidateParam, fieldsPermission } = toRaw(
+    candidateConfig.value
+  )
   const candidateParamStr = candidateParam.join(',')
   rawConfig.value.attributes = {
     approveMethod,
@@ -309,6 +323,24 @@ const closeDrawer = () => {
 const changecandidateStrategy = () => {
   candidateConfig.value.candidateParam = []
 }
+const handleAllCheck = (event, type) => {
+  console.log('event', event);
+  console.log('type', type);
+  event.target.checked = true;  
+  let permission = '1'
+  if (type === 'edit' && editAllChecked.value) {
+    permission = '1'
+  }
+  if (type === 'read' && readAllChecked.value) {
+    permission = '2'
+  }
+  if (type === 'hide' && hideAllChecked.value) {
+    permission = '3'
+  }
+  candidateConfig.value.fieldsPermission.forEach((item) => {
+    item.permission = permission
+  })
+}
 onMounted(async () => {
   // 获得角色列表
   roleOptions.value = await RoleApi.getSimpleRoleList()
@@ -321,7 +353,6 @@ onMounted(async () => {
   deptTreeOptions.value = handleTree(deptOptions, 'id')
   // 获得用户组列表
   userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
-
 })
 </script>
 <style lang="scss" scoped>
@@ -387,18 +418,17 @@ onMounted(async () => {
     padding-left: 6px;
     text-align: center;
   }
-
 }
 
-::v-deep(.el-radio__label) {  
-  opacity: 0; /* 隐藏标签文本 */  
+::v-deep(.el-radio__label) {
+  opacity: 0; /* 隐藏标签文本 */
 }
 
-::v-deep(.el-divider--horizontal) {  
+::v-deep(.el-divider--horizontal) {
   display: block;
   width: 100%;
   height: 1px;
   margin: 4px 0;
   border-top: 1px var(--el-border-color) var(--el-border-style);
-} 
+}
 </style>
diff --git a/src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue b/src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue
index d8bd01b6..4b074ab8 100644
--- a/src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue
+++ b/src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue
@@ -144,7 +144,7 @@
 </template>
 <script lang="ts" setup>
 import { ref, watch, computed, toRaw } from 'vue'
-import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
+import { useWorkFlowStoreWithOut } from '@/store/modules/bpm/simpleWorkflow'
 import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
 import { defaultProps, handleTree } from '@/utils/tree'
 import * as RoleApi from '@/api/system/role'
diff --git a/src/components/SimpleProcessDesigner/src/nodeWrap.vue b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
index b86148ae..18cde05a 100644
--- a/src/components/SimpleProcessDesigner/src/nodeWrap.vue
+++ b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
@@ -22,7 +22,7 @@
             class="ant-input editable-title-input"
             @blur="blurEvent(-1)"
             @focus="$event.currentTarget?.select()"
-            v-mountedFoucs
+            v-mountedFocus
             v-model="nodeConfig.name"
             :placeholder="defaultText"
           />
@@ -44,7 +44,7 @@
         <i class="anticon anticon-exclamation-circle"></i>
       </div>
     </div>
-    <addNode v-model:childNodeP="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission" />
+    <addNode v-model:childNodeP="nodeConfig.childNode" />
   </div>
   <div class="branch-wrap" v-if="nodeConfig.type == 4">
     <div class="branch-box-wrap">
@@ -60,7 +60,7 @@
                   class="ant-input editable-title-input"
                   @blur="blurEvent(index)"
                   @focus="$event.currentTarget?.select()"
-                  v-mountedFoucs
+                  v-mountedFocus
                   v-model="item.name"
                 />
                 <span v-else class="editable-title" @click="clickEvent(index)">{{
@@ -92,10 +92,10 @@
                   <i class="anticon anticon-exclamation-circle"></i>
                 </div>
               </div>
-              <addNode v-model:childNodeP="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
+              <addNode v-model:childNodeP="item.childNode" />
             </div>
           </div>
-          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
+          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
           <template v-if="index == 0">
             <div class="top-left-cover-line"></div>
             <div class="bottom-left-cover-line"></div>
@@ -106,7 +106,7 @@
           </template>
         </div>
       </div>
-      <addNode v-model:childNodeP="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
+      <addNode v-model:childNodeP="nodeConfig.childNode" />
     </div>
   </div>
   <div class="branch-wrap" v-if="nodeConfig.type == 5">
@@ -123,7 +123,7 @@
                   class="ant-input editable-title-input"
                   @blur="blurEvent(index)"
                   @focus="$event.currentTarget?.select()"
-                  v-mountedFoucs
+                  v-mountedFocus
                   v-model="item.name"
                 />
                 <span v-else class="editable-title" @click="clickEvent(index)">{{
@@ -137,10 +137,10 @@
                   <i class="anticon anticon-exclamation-circle"></i>
                 </div>
               </div>
-              <addNode v-model:childNodeP="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
+              <addNode v-model:childNodeP="item.childNode" />
             </div>
           </div>
-          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" :default-fields-permission="props.defaultFieldsPermission" />
+          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
           <template v-if="index == 0">
             <div class="top-left-cover-line"></div>
             <div class="bottom-left-cover-line"></div>
@@ -151,7 +151,7 @@
           </template>
         </div>
       </div>
-      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" :default-fields-permission="props.defaultFieldsPermission"/>
+      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
     </div>
   </div>
   <div class="branch-wrap" v-if="nodeConfig.type == 7">
@@ -168,7 +168,7 @@
                   class="ant-input editable-title-input"
                   @blur="blurEvent(index)"
                   @focus="$event.currentTarget?.select()"
-                  v-mountedFoucs
+                  v-mountedFocus
                   v-model="item.name"
                 />
                 <span v-else class="editable-title" @click="clickEvent(index)">
@@ -186,10 +186,10 @@
                   <i class="anticon anticon-exclamation-circle"></i>
                 </div>
               </div>
-              <addNode v-model:childNodeP="item.childNode"  :default-fields-permission="props.defaultFieldsPermission"/>
+              <addNode v-model:childNodeP="item.childNode" />
             </div>
           </div>
-          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" :default-fields-permission="props.defaultFieldsPermission" />
+          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
           <template v-if="index == 0">
             <div class="top-left-cover-line"></div>
             <div class="bottom-left-cover-line"></div>
@@ -200,7 +200,7 @@
           </template>
         </div>
       </div>
-      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" :default-fields-permission="props.defaultFieldsPermission" />
+      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
     </div>
   </div>
   <div class="node-wrap" v-if="nodeConfig.type === NodeType.PARALLEL_NODE_JOIN || nodeConfig.type === NodeType.INCLUSIVE_NODE_JOIN">
@@ -209,9 +209,9 @@
         <div class="text">聚合</div>
       </div>
     </div>
-    <addNode v-model:childNodeP="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission" />
+    <addNode v-model:childNodeP="nodeConfig.childNode"  />
   </div>
-  <nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission" />
+  <nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
 </template>
 <script lang="ts" setup>
 import addNode from './addNode.vue'
@@ -225,17 +225,13 @@ import {
   getApproverShowText
 } from './util'
 import { WorkFlowNode, NodeType } from './consts'
-import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
+import { useWorkFlowStoreWithOut } from '@/store/modules/bpm/simpleWorkflow'
 let _uid = getCurrentInstance().uid
 import { generateUUID } from '@/utils'
 let props = defineProps({
   nodeConfig: {
     type: Object as () => WorkFlowNode,
     default: () => ({}) as WorkFlowNode
-  },
-  defaultFieldsPermission : {
-    type: Array,
-    default: () => ([])
   }
 })
 
diff --git a/src/directives/index.ts b/src/directives/index.ts
index 91847ac0..1b999880 100644
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -12,12 +12,11 @@ export const setupAuth = (app: App<Element>) => {
   hasPermi(app)
 }
 
-// TODO @jason：拼写是不是 Focus 聚焦？
 /**
- * 导出指令：v-mountedFoucs
+ * 导出指令：v-mountedFocus
  */
-export const setupMountedFoucs = (app: App<Element>) => {
-  app.directive('mountedFoucs', {
+export const setupMountedFocus = (app: App<Element>) => {
+  app.directive('mountedFocus', {
     mounted(el) {
       el.focus()
     }
diff --git a/src/main.ts b/src/main.ts
index 24666be8..af30240d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -29,7 +29,7 @@ import '@/plugins/animate.css'
 import router, { setupRouter } from '@/router'
 
 // 其它指令 
-import { setupAuth, setupMountedFoucs } from '@/directives'
+import { setupAuth, setupMountedFocus } from '@/directives'
 
 import { createApp } from 'vue'
 
@@ -60,7 +60,7 @@ const setupAll = async () => {
 
   setupAuth(app)
 
-  setupMountedFoucs(app)
+  setupMountedFocus(app)
 
   await router.isReady()
 
diff --git a/src/store/modules/simpleWorkflow.ts b/src/store/modules/bpm/simpleWorkflow.ts
similarity index 92%
rename from src/store/modules/simpleWorkflow.ts
rename to src/store/modules/bpm/simpleWorkflow.ts
index 6c92a6b6..2942951d 100644
--- a/src/store/modules/simpleWorkflow.ts
+++ b/src/store/modules/bpm/simpleWorkflow.ts
@@ -1,5 +1,4 @@
-// TODO @jason：这个放到 store/modules/bpm/simpleWorkflow.ts
-import { store } from '../index'
+import { store } from '../../index'
 import { defineStore } from 'pinia'
 
 export const useWorkFlowStore = defineStore('simpleWorkflow', {
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simpleWorkflow/index.vue
index 0a6eabd4..7ac48369 100644
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
@@ -1,22 +1,16 @@
 <template>
   <div>
     <section class="dingflow-design">
-      <el-row>
-        <el-col :span="20" />
-        <el-col :span="4">
-          <el-button type="primary" size="small" @click="test">保存(用于测试，还未完成)</el-button>
-        </el-col>
-      </el-row>
+      <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" :defaultFieldsPermission="defaultFieldsPermission" />
-        <!-- <div class="end-node">
-          <div class="end-node-circle"></div>
-          <div class="end-node-text">流程结束</div>
-        </div> -->
+        <nodeWrap v-model:nodeConfig="nodeConfig"/>
+       
         <div class="end-event">
           <div class="end-event-circle">结束</div>
         </div>
@@ -51,6 +45,9 @@ const nodeConfig = ref<WorkFlowNode>({
 })
 // 默认的表单字段权限
 const defaultFieldsPermission: any[] = []
+const  formType = ref(20);
+provide('defaultFieldsPermission', defaultFieldsPermission)
+provide('formType', formType)
 const test = async () => {
   if (!modelId) {
     message.error('缺少模型 modelId 编号')
@@ -83,8 +80,8 @@ const close = () => {
 onMounted(async () => {
   const bpmnModel = await getModel(modelId)
   if (bpmnModel) {
-    const formType = bpmnModel.formType
-    if (formType === 10) {
+    formType.value = bpmnModel.formType
+    if (formType.value === 10) {
       const bpmnForm = await getForm(bpmnModel.formId) as unknown as FormVO
       const formFields = bpmnForm?.fields
       if (formFields) {

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 12/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E9=87=8D=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
zcmd^B|8HAY6+h=)$4+eLy<~aMj!WXc_Z-`G+S<vB?JRAUrcIlWDAPupw9~q+b)6R{
z!Lg0whGvs03)mQJK$lHu(hwD5Lrf|HX-ES>wf!(gk>Cdq8Ul?16U5UxkoW<KADS1=
zwV&J3j=zBGoO?g#bI!S6&b>GH0Rn&rs=#1i>cspJ^_lSF0C+F4a}S(I7^D7~pOF46
z>1VU6nbPPJ`M&`Ot;Ai=<u?}J$9KO7!2S*3cyY<hEJUCEVVHdXOp;zA!gZZJP57rI
zeM_sA3q1rV_Cu<A^2Kb1sSX;8y-#|_YUV--6<8sAH|c62vubvHd-MkYt(R!bT&cKL
zdFCs>zX;%_@n8XH?yR~~g-0Bu(hMlD4sKVjIz#Li&i(T@XQa`8fv4g7UiwE}+^x~>
zR2{%RM`|kwb};YB1&{Ggsc_a!KY$&sQsH(t48Rx&M<-|JK+I<<1=wZ#H|&kr2FCny
zE<^p>8u@W65`*BhS%(Ag61328UlM*v+}9c{-T(tBQh*jl?8lS`7mqE#n_EKdMm-<E
z-i0c;{dYD5KH&cnGSRqn3IO&s-0&$ozDg|bX&<$e0pcAnN4i+gmUBzk>e+g_rqukk
z8#|PpJ9YAG7NnTlKR!Q3Yj2_cD8I<F@c&-C^#nX*r-3rEMVaBkcVLSy4;Q{mTXd_q
z@Uv4>8p3z5=5Gk!=-Q2j+&a?>unAlEFuo(qa{JEn>>q3cybypGjL;Ceh;k5(F-*ph
z>2XYsp%Fw`#5RoRE_BL%^clmLju6(P7)cT~h?51Fy*M*-@kL(ErcWo6r}MnR%hqH5
zL*3Tt?rwag`;Z^MqX;Y3rdRb?&w0IA^r&7ec!d}2ND8;2b|}T81HaYXZJnV&>tR0+
zJ~B?hJft4ywKm&Ad~NmHTcvf}1JEWY!~QPx<6s+hv2aUg7{7|IS@-|xx2Lw%ckuhx
zD|qIO4ePJgudHk6#H_XV$<IC^{KdMoj%Tbd<KyVR2`|5lC%(tGfamBv_69o)LCR1Z
z47wy5<t5cgnHka)O?N7tvTsN;(y7j&PD)gG7{_oo2GNC4*Dx2qi-oqYY9qQnqTzz|
zjX)?A5GDeB<NC;UErhRi7+rH6tlgSfY@fu-qw}%j{Xu<17bYlVJQUcz8tCf_V8*&k
z<g0JtA3Gh=;r57Rsks?HUQ3)BJUUp<!A<riWAF$(N^=b9k^3;2K8UGgB%~=rhOZZ8
z=U%);)5Lr6ZaSGB(o(mAn^B6!k?kECV&B{l6-Cr#(fTkX%Cfk@tB|!V$~re(kYriX
z_t1zRv0}J)4_75*vXm3$mqhuhEH3d#stCSxTf5Q|`=~9}bER%;oco<B`!)Ti_P`*V
zs_#aGPulRw&Zt&j-WVRlNR;*{IVSjng5T$KIbB0^jCl&eT0J9rB$Z4Lk6|h<L?fc0
z$Uc7%71<f$8_KTS+>{hWVg+7v+&k3!f!o-v#b(c@50@qoL;8Nt2gE8jzsvd*$@;sb
z?1=;dIPhR1ax4|>_U-9!uvKNZq6B@LKIwIGA3qp+D3Lrn-G^-QGlvHrjSNf?`?}<t
zeqK_1(t(v&;7B<BDMP?r$zx&dP+<S3@0EOt#LppJ`acM3bOH~;QMjM(YATwHL}_<*
zmq<$!F({1Dx>J-4<(8ruyPK94*{M^if_NKnohObxiS1q`xc&8@;%)CAXgf4NA?=Mh
zT&VOX+~X&Yi2GwGw=(P>aC6hX?U<I(=nu1Y8})Nl!yLXX?Q(Z^x_3!Gb5G45V5#|O
z@omR7&nM?cgyFeq@fVJ_Jd?zy=Vs1QOk79JZ?_MSrpGnD(0kyz{qg|tH@fkP@t3m8
z#sa;}pRh3_UbnG>aKDXP=!_UPb`pP|joq*pj@j5lJ(l?E=4hjFBJg<|BXq#4HWui`
z`mv1}@jth*gYfTc+yXwR+1N?^wvF9z65DO;fe2<N%4ViwE~w`=)a7ikuvjcqn(c8j
zcRrsfH`Qi)(k!nn7YpiOe4t59nFX`l>}G8}XH+VS>SDRLs!mdWW<Fn3OXcE<nXSZ^
zDwWcKM1qgQ`FOUt3KLKU6EaYtdI3~82OCr`Ll%lqfW>-Uxl2Dz-Z?lAd5SFGWxX@{
zBzc!%jr@3@DqYq%eJb7QHAP;9y62s<S%Y;N&7e6}XhteYnR;3!G-=Pzq?zOitF(dK
zwnF`6$vX~9^{5gYfCT-T>uLJO>+4)?e9`gK#=q%4uDDP@Mo&-+y%H|^`f8glWb^0O
mme);3wpiM5E@cV}d9%&DV6(1FiL$<Kww5yGOg?Ys0saH_GT#LN

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>

From 676ed6bd448c444f532a86832fb5bec6c89b8ab2 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 27 Apr 2024 10:45:53 +0800
Subject: [PATCH 13/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E4=BA=BA=E8=8A=82=E7=82=B9=E6=94=B9=E9=80=A0?=
 =?UTF-8?q?.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |   4 +-
 .../src/ProcessNodeTree.vue                   |  16 +-
 .../src/SimpleProcessDesigner.vue             |  47 ++-
 .../SimpleProcessDesignerV2/src/consts.ts     |  37 ++
 .../src/nodes-config/UserTaskNodeConfig.vue   | 341 ++++++++++++++++++
 .../src/nodes/UserTaskNode.vue                | 122 +++++++
 6 files changed, 540 insertions(+), 27 deletions(-)
 create mode 100644 src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
 create mode 100644 src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index 7ecbacb5..61672c27 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { SimpleFlowNode, NodeType, NODE_DEFAULT_NAME } from './consts'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_NAME, CandidateStrategy, APPROVE_METHODS } from './consts'
 import { generateUUID } from '@/utils'
 defineOptions({
   name: 'NodeHandler'
@@ -57,7 +57,7 @@ const addNode = (type: number) => {
       // 审批节点配置
       attributes: {
         approveMethod: 1,
-        candidateStrategy: 30,
+        candidateStrategy: CandidateStrategy.USER,
         candidateParam: undefined
       },
       childNode: props.childNode
diff --git a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
index 855ca63e..39721c6e 100644
--- a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
+++ b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@@ -1,8 +1,12 @@
 <template>
   <!-- 开始节点 -->
   <StartEventNode v-if="currentNode && currentNode.type === NodeType.START_EVENT_NODE" :flow-node ="currentNode" />
+  <!-- 审批节点 -->
+  <UserTaskNode 
+        v-if="currentNode && currentNode.type === NodeType.USER_TASK_NODE" 
+        :flow-node ="currentNode" @update:model-value="handleModelValueUpdate"/>
 
-  <!-- 递归显示子节点  -->
+  <!-- 递归显示孩子节点  -->
   <ProcessNodeTree v-if="currentNode && currentNode.childNode"  v-model:flow-node="currentNode.childNode"/>
 
   <!-- 结束节点 -->
@@ -11,7 +15,7 @@
 <script setup lang='ts'>
 import StartEventNode from './nodes/StartEventNode.vue';
 import EndEventNode from './nodes/EndEventNode.vue';
-
+import UserTaskNode from './nodes/UserTaskNode.vue';
 import { SimpleFlowNode, NodeType }  from './consts';
 defineOptions({
   name: 'ProcessNodeTree'
@@ -32,10 +36,10 @@ watch(() => props.flowNode, (newValue) => {
   currentNode.value = newValue;  
 });
 
-// const handleModelValueUpdate = (updateValue) => {
-//   console.log('handleModelValueUpdate', updateValue)
-//   emits('update:flowNode', updateValue);
-// } 
+const handleModelValueUpdate = (updateValue) => {
+  console.log('Process Node Tree handleModelValueUpdate', updateValue)
+  emits('update:flowNode', updateValue);
+} 
 </script>
 <style lang='scss' scoped>
 
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index 85cf3e66..741a786c 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -19,8 +19,9 @@
       </div>
     </div>
     <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
-      <div v-for="(item, index) in errorNodes" :key="index">
-          {{ item.name }}
+      <div class="mb-2">以下节点内容不完善，请修改后保存</div>
+      <div class="mb-3 b-rounded-1 bg-gray-100 p-2 line-height-normal" v-for="(item, index) in errorNodes" :key="index">
+          {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
       </div>
       <template #footer>
         <el-button type="primary" @click="errorDialogVisible = false" >知道了</el-button>
@@ -32,7 +33,7 @@
 <script setup lang="ts">
 import ProcessNodeTree from './ProcessNodeTree.vue';
 import { saveBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
-import { SimpleFlowNode, NodeType } from './consts'
+import { SimpleFlowNode, NodeType,NODE_DEFAULT_TEXT } from './consts'
 
 defineOptions({
   name: 'SimpleProcessDesigner'
@@ -67,21 +68,24 @@ const saveSimpleFlowModel = async () => {
   console.log('errorNodes is ', errorNodes)
   if (errorNodes.length > 0) {
     errorDialogVisible.value = true
+    return;
   }
-  // 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 data = {
+    modelId: props.modelId,
+    simpleModelBody: processNodeTree.value
+  }
+
+  const result = await saveBpmSimpleModel(data)
+  console.log('save the result is ', result)
+  if (result) {
+    message.success('修改成功')
+    close()
+  } else {
+    message.alert('修改失败')
+  }
+  
 }
+// 校验节点设置。 暂时以 showText 为空 未节点错误配置
 const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
   if (node) {
     const { type, showText, conditionNodes } = node
@@ -113,23 +117,28 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
     }
   }
 }
+
 const close = () => {
   router.push({ path: '/bpm/manager/model' })
 }
 let scaleValue = ref(100)
-
+const MAX_SCALE_VALUE = 200
+const MIN_SCALE_VALUE = 50
+// 放大
 const zoomOut = () => {
-  if (scaleValue.value == 300) {
+  if (scaleValue.value == MAX_SCALE_VALUE) {
     return
   }
   scaleValue.value += 10
 }
+// 缩小
 const zoomIn = () => {
-  if (scaleValue.value == 50) {
+  if (scaleValue.value == MIN_SCALE_VALUE) {
     return
   }
   scaleValue.value -= 10
 }
+
 onMounted(async () => {
   const result = await getBpmSimpleModel(props.modelId)
   if (result) {
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 72450b72..e3998079 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -42,6 +42,43 @@ export enum NodeType {
   INCLUSIVE_NODE_JOIN = 8
 }
 
+// 候选人策略 （用于审批节点。抄送节点
+export enum CandidateStrategy {
+  /**
+   * 指定角色
+   */
+  ROLE = 10,
+  /**
+   * 指定部门成员
+   */
+  DEPT_MEMBER = 20,
+  /**
+   * 部门的负责人
+   */
+  DEPT_LEADER = 21,
+  /**
+   * 指定岗位
+   */
+  POST = 22,
+  /**
+   * 指定用户
+   */
+  USER = 30,
+  /**
+   * 发起人自选
+   */
+  START_USER_SELECT = 35,
+   /**
+   * 指定用户组
+   */
+   USER_GROUP = 40,
+   /**
+   * 流程表达式
+   */
+   EXPRESSION = 60
+}
+
+
 export type SimpleFlowNode = {
   id: string,
   type: NodeType,
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
new file mode 100644
index 00000000..8716fd92
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -0,0 +1,341 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="settingVisible"
+    :show-close="false"
+    :size="550"
+    :before-close="saveConfig"
+    class="justify-start"
+  >
+    <template #header>
+      <div class="w-full flex flex-col">
+        <div class="mb-2 text-size-2xl">{{ currentNode.name }}</div>
+        <el-divider />
+      </div>
+    </template>
+    <el-tabs type="border-card">
+      <el-tab-pane label="审批人">
+        <div>
+          <el-form label-position="top">
+            <el-form-item label="审批人设置" prop="candidateStrategy">
+              <el-radio-group
+                v-model="currentNode.attributes.candidateStrategy"
+                @change="changeCandidateStrategy"
+              >
+                <el-radio
+                  v-for="(dict, index) in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
+                  :key="index"
+                  :value="dict.value"
+                  :label="dict.value"
+                >
+                  {{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+
+            <el-form-item
+              v-if="currentNode.attributes.candidateStrategy == CandidateStrategy.ROLE"
+              label="指定角色"
+              prop="candidateParam"
+            >
+              <el-select v-model="candidateParamArray" clearable multiple style="width: 100%">
+                <el-option
+                  v-for="item in roleOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                currentNode.attributes.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
+                currentNode.attributes.candidateStrategy == CandidateStrategy.DEPT_LEADER
+              "
+              label="指定部门"
+              prop="candidateParam"
+              span="24"
+            >
+              <el-tree-select
+                ref="treeRef"
+                v-model="candidateParamArray"
+                :data="deptTreeOptions"
+                :props="defaultProps"
+                empty-text="加载中，请稍后"
+                multiple
+                node-key="id"
+                style="width: 100%"
+                show-checkbox
+              />
+            </el-form-item>
+            <el-form-item
+              v-if="currentNode.attributes.candidateStrategy == CandidateStrategy.POST"
+              label="指定岗位"
+              prop="candidateParam"
+              span="24"
+            >
+              <el-select v-model="candidateParamArray" clearable multiple style="width: 100%">
+                <el-option
+                  v-for="item in postOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="currentNode.attributes.candidateStrategy == CandidateStrategy.USER"
+              label="指定用户"
+              prop="candidateParam"
+              span="24"
+            >
+              <el-select
+                v-model="candidateParamArray"
+                clearable
+                multiple
+                style="width: 100%"
+                @change="changedCandidateUsers"
+              >
+                <el-option
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="currentNode.attributes.candidateStrategy === CandidateStrategy.USER_GROUP"
+              label="指定用户组"
+              prop="candidateParam"
+            >
+              <el-select v-model="candidateParamArray" clearable multiple style="width: 100%">
+                <el-option
+                  v-for="item in userGroupOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item
+              v-if="currentNode.attributes.candidateStrategy === CandidateStrategy.EXPRESSION"
+              label="流程表达式"
+              prop="candidateParam"
+            >
+              <el-input
+                type="textarea"
+                v-model="candidateParamArray[0]"
+                clearable
+                style="width: 100%"
+              />
+            </el-form-item>
+
+            <el-form-item label="审批方式" prop="approveMethod">
+              <el-radio-group v-model="currentNode.attributes.approveMethod">
+                <div class="flex-col">
+                  <div v-for="(item, index) in APPROVE_METHODS" :key="index">
+                    <el-radio
+                      :value="item.value"
+                      :label="item.value"
+                      :disabled="item.value !== 1 && notAllowedMultiApprovers"
+                    >
+                      {{ item.label }}
+                    </el-radio>
+                  </div>
+                </div>
+              </el-radio-group>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { SimpleFlowNode, APPROVE_METHODS,CandidateStrategy } from '../consts'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as RoleApi from '@/api/system/role'
+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'
+
+defineOptions({
+  name: 'UserTaskNodeConfig'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+const emits = defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode]
+}>()
+const notAllowedMultiApprovers = ref(false)
+const currentNode = ref<SimpleFlowNode>(props.flowNode)
+const settingVisible = ref(false)
+const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
+const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+let   deptOptions: DeptApi.DeptVO[] = []// 部门列表
+const deptTreeOptions = ref() // 部门树
+const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
+const candidateParamArray = ref<any[]>([])
+
+const closeDrawer = () => {
+  settingVisible.value = false
+}
+const saveConfig = () => {
+  currentNode.value.attributes.candidateParam = candidateParamArray.value?.join(',')
+  currentNode.value.showText = getShowText()
+  console.log('currentNode value is ', currentNode.value)
+  emits('update:modelValue', currentNode.value)
+  settingVisible.value = false
+}
+const getShowText = (): string => {
+  let showText = ''
+  // 指定成员
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER) {
+    if (candidateParamArray.value?.length > 0) {
+      const candidateNames: string[] = []
+      userOptions.value.forEach((item) => {
+        if (candidateParamArray.value.includes(item.id)) {
+          candidateNames.push(item.nickname)
+        }
+      })
+      console.log("candidateNames is ", candidateNames)
+      showText = `指定成员：${candidateNames.join(',')}`
+    }
+  }
+  // 指定角色
+  if (currentNode.value.attributes.candidateStrategy === 10) {
+    if (candidateParamArray.value?.length > 0) {
+      const candidateNames: string[] = []
+      roleOptions.value.forEach((item) => {
+        if (candidateParamArray.value.includes(item.id)) {
+          candidateNames.push(item.name)
+        }
+      })
+      showText = `指定角色：${candidateNames.join(',')}`
+    }
+  }
+   // 指定部门
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_MEMBER 
+      || currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_LEADER ) {
+    if (candidateParamArray.value?.length > 0) {
+      const candidateNames: string[] = []
+      deptOptions.forEach((item) => {
+        if (candidateParamArray.value.includes(item.id)) {
+          candidateNames.push(item.name)
+        }
+      })
+      if(currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_MEMBER){
+        showText = `部门成员：${candidateNames.join(',')}`
+      } else {
+        showText = `部门的负责人：${candidateNames.join(',')}`
+      }
+    }
+  }
+
+   // 指定岗位
+   if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.POST) {
+    if (candidateParamArray.value?.length > 0) {
+      const candidateNames: string[] = []
+      postOptions.value.forEach((item) => {
+        if (candidateParamArray.value.includes(item.id)) {
+          candidateNames.push(item.name)
+        }
+      })
+      showText = `指定岗位: ${candidateNames.join(',')}`
+    }
+  }
+   // 指定用户组
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER_GROUP) {
+    if (candidateParamArray.value?.length > 0) {
+      const candidateNames: string[] = []
+      userGroupOptions.value.forEach((item) => {
+        if (candidateParamArray.value.includes(item.id)) {
+          candidateNames.push(item.name)
+        }
+      })
+      showText = `指定用户组: ${candidateNames.join(',')}`
+    }
+  }
+
+  // 发起人自选
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.START_USER_SELECT ) {
+    showText = `发起人自选`
+  }
+
+   // 流程表达式
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.EXPRESSION) {
+    if (candidateParamArray.value?.length > 0) {
+      showText = `流程表达式：${candidateParamArray.value[0]}`
+    }
+  }
+   return showText
+}
+const open = () => {
+  settingVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+const changeCandidateStrategy = () => {
+  candidateParamArray.value = []
+  currentNode.value.attributes.approveMethod = 1
+  if (currentNode.value.attributes.candidateStrategy === 30) {
+    notAllowedMultiApprovers.value = true
+  } else {
+    notAllowedMultiApprovers.value = false
+  }
+}
+
+const changedCandidateUsers = () => {
+  if (candidateParamArray.value?.length <= 1 && currentNode.value.attributes?.candidateStrategy === 30) {
+    currentNode.value.attributes.approveMethod = 1;
+    notAllowedMultiApprovers.value = true
+  } else {
+    notAllowedMultiApprovers.value = false
+  }
+}
+onMounted(async () => {
+  // 获得角色列表
+  roleOptions.value = await RoleApi.getSimpleRoleList()
+  postOptions.value = await PostApi.getSimplePostList()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+  // 获得部门列表
+  deptOptions = await DeptApi.getSimpleDeptList()
+  deptTreeOptions.value = handleTree(deptOptions, 'id')
+  // 获得用户组列表
+  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
+  console.log('candidateParam', currentNode.value.attributes?.candidateParam)
+  candidateParamArray.value = currentNode.value.attributes?.candidateParam?.split(',').map(item=> +item)
+  console.log('candidateParamArray.value', candidateParamArray.value)
+  if (currentNode.value.attributes?.candidateStrategy === 30 && candidateParamArray.value?.length <= 1) {
+    notAllowedMultiApprovers.value = true
+  } else {
+    notAllowedMultiApprovers.value = false
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+::v-deep(.el-divider--horizontal) {
+  display: block;
+  height: 1px;
+  margin: 0;
+  border-top: 1px var(--el-border-color) var(--el-border-style);
+}
+</style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
new file mode 100644
index 00000000..46d0b85c
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div class="node-box" :class="{'node-config-error': !flowNode.showText}">
+        <div class="node-title-container">
+          <div class="node-title-icon"><Icon icon="ep:avatar" /></div>
+          <input
+            v-if="showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent($event)"
+            @focus="focusEvent($event)"
+            v-mountedFocus
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickEvent">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="commonNodeConfig">
+          <div class="node-text" :title="flowNode.showText" v-if="flowNode.showText">
+            {{ flowNode.showText }}
+          </div>
+          <div class="node-text"  v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.USER_TASK_NODE) }}
+          </div>
+          <Icon icon="ep:arrow-right-bold" />
+        </div>
+        <div class="node-toolbar">
+          <div class="toolbar-icon"><Icon icon="ep:document-copy" @click="copyNode" /></div>
+          <div class="toolbar-icon"><Icon icon="ep:delete" @click="deleteNode" /></div>
+        </div>
+      </div>
+
+      <!-- title="朱文宣妈妈, 许颖嘉, 王禹昊妈妈, 王亦心爸爸, 朱彧兮妈妈, 陈语馨爸爸, 蔡知妤爸爸/蔡知妍爸爸, 蒋昂倬妈妈, 胡恒智爸爸, 杨晞宇妈妈, 赵嘉依妈妈, 罗嘉懿爸爸, 郑辰希妈妈, 周慕然爸爸, 方张霖妈妈, 张若轩妈妈, 王亦心妈妈, 董子夏妈妈, 刘昱君妈妈/刘畅妈妈, 李子琦妈妈, 解宛芙妈妈, 洪栎妈妈, 陈涂晟爸爸, 张泽锴妈妈, 杨晞宇爸爸, 高鸿轩妈妈, 张然妈妈, 景晗亿妈妈, 郑炜彤妈妈, 祝安屹妈妈, 王萧婉妈妈, 朱彧兮爸爸, 李沐辰妈妈, 王元昊爸爸, 罗嘉懿妈妈, 陈语馨妈妈" -->
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
+    </div>
+  </div>
+  <UserTaskNodeConfig
+    v-if="currentNode"
+    ref="nodeSetting"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+  />
+</template>
+<script setup lang="ts">
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts'
+import NodeHandler from '../NodeHandler.vue'
+import UserTaskNodeConfig from '../nodes-config/UserTaskNodeConfig.vue';
+import { generateUUID } from '@/utils'
+defineOptions({
+  name: 'CommonNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+const emits = defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode | undefined]
+}>()
+const nodeSetting = ref()
+const commonNodeConfig = () => {
+  console.log('nodeSetting', nodeSetting)
+  nodeSetting.value.open()
+}
+
+const currentNode = ref<SimpleFlowNode>(props.flowNode)
+console.log('current common node is ', currentNode)
+
+// 不加这个 COPY 会有问题
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    console.log('new value is ', newValue)
+    currentNode.value = newValue
+  }
+)
+const showInput = ref(false)
+const blurEvent = (event) => {
+  console.log('blurEvent', event)
+  showInput.value = false
+  currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string
+}
+const focusEvent = (event: FocusEvent) => {
+  console.log('focusEvent', event)
+}
+const clickEvent = () => {
+  showInput.value = true
+}
+const handleModelValueUpdate = (updateValue) => {
+  emits('update:modelValue', updateValue)
+  console.log('user task node handleModelValueUpdate', updateValue)
+}
+const deleteNode = () => {
+  console.log('the child node is ', currentNode.value.childNode)
+  emits('update:modelValue', currentNode.value.childNode)
+}
+const copyNode = () => {
+  // const oldChildNode = currentNode.value.childNode
+  const newCopyNode: SimpleFlowNode = {
+    id: generateUUID(),
+    name: currentNode.value.name,
+    showText: currentNode.value.showText,
+    type: currentNode.value.type,
+    // 审批节点配置
+    attributes: {
+      approveMethod: currentNode.value.attributes?.approveMethod,
+      candidateStrategy: currentNode.value.attributes?.candidateStrategy,
+      candidateParam: currentNode.value.attributes?.candidateParam
+    },
+    childNode: currentNode.value
+  }
+  currentNode.value = newCopyNode
+  console.log('current node value', currentNode.value)
+  emits('update:modelValue', currentNode.value)
+}
+</script>
+<style lang="scss" scoped></style>

From ee895d07525ba684e976b72d304e45ae6a59f4d8 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 27 Apr 2024 22:17:04 +0800
Subject: [PATCH 14/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=E6=8A=84=E9=80=81?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E6=94=B9=E9=80=A0.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |  27 +-
 .../src/ProcessNodeTree.vue                   |   6 +-
 .../src/SimpleProcessDesigner.vue             |   6 +
 .../SimpleProcessDesignerV2/src/consts.ts     |   9 +-
 .../src/nodes-config/CopyTaskNodeConfig.vue   | 302 ++++++++++++++++++
 .../src/nodes-config/UserTaskNodeConfig.vue   |  10 +-
 .../src/nodes/CopyTaskNode.vue                | 103 ++++++
 .../src/nodes/UserTaskNode.vue                |  31 +-
 .../theme/simple-process-designer.scss        |  18 +-
 src/views/bpm/simpleWorkflow/index.vue        |  25 ++
 10 files changed, 500 insertions(+), 37 deletions(-)
 create mode 100644 src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
 create mode 100644 src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index 61672c27..6824fa1f 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -9,12 +9,12 @@
               </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 class="handler-item" @click="addNode(NodeType.COPY_TASK_NODE)">
+              <div class="handler-item-icon copy">
+                <span class="iconfont icon-size icon-copy"></span>
               </div>
-              <div class="handler-item-text">条件分支</div>
-            </div> -->
+              <div class="handler-item-text">抄送</div>
+            </div>
           </div>
           <template #reference>
             <div class="add-icon"><Icon icon="ep:plus" /></div>
@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { SimpleFlowNode, NodeType, NODE_DEFAULT_NAME, CandidateStrategy, APPROVE_METHODS } from './consts'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_NAME, CandidateStrategy } from './consts'
 import { generateUUID } from '@/utils'
 defineOptions({
   name: 'NodeHandler'
@@ -64,6 +64,21 @@ const addNode = (type: number) => {
     }
     emits('update:childNode', data)
   }
+  if (type === NodeType.COPY_TASK_NODE) {
+    const data: SimpleFlowNode = {
+      id:  generateUUID(),
+      name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
+      showText: '',
+      type: NodeType.COPY_TASK_NODE,
+      // 审批节点配置
+      attributes: {
+        candidateStrategy: CandidateStrategy.USER,
+        candidateParam: undefined
+      },
+      childNode: props.childNode
+    }
+    emits('update:childNode', data)
+  }
 }
 </script>
 
diff --git a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
index 39721c6e..e0b01500 100644
--- a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
+++ b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@@ -5,7 +5,10 @@
   <UserTaskNode 
         v-if="currentNode && currentNode.type === NodeType.USER_TASK_NODE" 
         :flow-node ="currentNode" @update:model-value="handleModelValueUpdate"/>
-
+  <!-- 抄送节点 -->
+  <CopyTaskNode
+        v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE" 
+        :flow-node ="currentNode" @update:model-value="handleModelValueUpdate"/>
   <!-- 递归显示孩子节点  -->
   <ProcessNodeTree v-if="currentNode && currentNode.childNode"  v-model:flow-node="currentNode.childNode"/>
 
@@ -16,6 +19,7 @@
 import StartEventNode from './nodes/StartEventNode.vue';
 import EndEventNode from './nodes/EndEventNode.vue';
 import UserTaskNode from './nodes/UserTaskNode.vue';
+import CopyTaskNode from './nodes/CopyTaskNode.vue';
 import { SimpleFlowNode, NodeType }  from './consts';
 defineOptions({
   name: 'ProcessNodeTree'
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index 741a786c..24006ad7 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -102,6 +102,12 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
       }
       validateNode(node.childNode, errorNodes)
     }
+    if (type === NodeType.COPY_TASK_NODE) {
+      if (!showText) {
+        errorNodes.push(node)
+      }
+      validateNode(node.childNode, errorNodes)
+    }
     if (type === NodeType.CONDITION_NODE) {
       if (!showText) {
         errorNodes.push(node)
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index e3998079..54af0563 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -15,6 +15,11 @@ export enum NodeType {
    * 审批人节点
    */
   USER_TASK_NODE = 1,
+
+  /**
+   * 抄送人节点
+   */
+  COPY_TASK_NODE = 2,
  
   /**
    * 条件节点
@@ -92,11 +97,13 @@ export type SimpleFlowNode = {
 }
 
 export const NODE_DEFAULT_TEXT = new Map<number,string>()
-NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置该节点')
+NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置审批人')
+NODE_DEFAULT_TEXT.set(NodeType.COPY_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.COPY_TASK_NODE, '抄送人')
 NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
 
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
new file mode 100644
index 00000000..8b07dca2
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -0,0 +1,302 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="settingVisible"
+    :show-close="false"
+    :size="550"
+    :before-close="saveConfig"
+    class="justify-start"
+  >
+    <template #header>
+      <div class="w-full flex flex-col">
+        <div class="mb-2 text-size-2xl">{{ currentNode.name }}</div>
+        <el-divider />
+      </div>
+    </template>
+    <el-tabs type="border-card">
+      <el-tab-pane label="抄送人">
+        <div>
+          <el-form label-position="top">
+            <el-form-item label="抄送人设置" prop="candidateStrategy">
+              <el-radio-group
+                v-model="currentNode.attributes.candidateStrategy"
+                @change="changeCandidateStrategy"
+              >
+                <el-radio
+                  v-for="(dict, index) in copyUserStrategies"
+                  :key="index"
+                  :value="dict.value"
+                  :label="dict.value"
+                >
+                  {{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+
+            <el-form-item
+              v-if="currentNode.attributes.candidateStrategy == CandidateStrategy.ROLE"
+              label="指定角色"
+              prop="candidateParam"
+            >
+              <el-select v-model="candidateParamArray" clearable multiple style="width: 100%">
+                <el-option
+                  v-for="item in roleOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                currentNode.attributes.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
+                currentNode.attributes.candidateStrategy == CandidateStrategy.DEPT_LEADER
+              "
+              label="指定部门"
+              prop="candidateParam"
+              span="24"
+            >
+              <el-tree-select
+                ref="treeRef"
+                v-model="candidateParamArray"
+                :data="deptTreeOptions"
+                :props="defaultProps"
+                empty-text="加载中，请稍后"
+                multiple
+                node-key="id"
+                style="width: 100%"
+                show-checkbox
+              />
+            </el-form-item>
+            <el-form-item
+              v-if="currentNode.attributes.candidateStrategy == CandidateStrategy.POST"
+              label="指定岗位"
+              prop="candidateParam"
+              span="24"
+            >
+              <el-select v-model="candidateParamArray" clearable multiple style="width: 100%">
+                <el-option
+                  v-for="item in postOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="currentNode.attributes.candidateStrategy == CandidateStrategy.USER"
+              label="指定用户"
+              prop="candidateParam"
+              span="24"
+            >
+              <el-select
+                v-model="candidateParamArray"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="currentNode.attributes.candidateStrategy === CandidateStrategy.USER_GROUP"
+              label="指定用户组"
+              prop="candidateParam"
+            >
+              <el-select v-model="candidateParamArray" clearable multiple style="width: 100%">
+                <el-option
+                  v-for="item in userGroupOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item
+              v-if="currentNode.attributes.candidateStrategy === CandidateStrategy.EXPRESSION"
+              label="流程表达式"
+              prop="candidateParam"
+            >
+              <el-input
+                type="textarea"
+                v-model="candidateParamArray[0]"
+                clearable
+                style="width: 100%"
+              />
+            </el-form-item>
+
+          </el-form>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang='ts'>
+import { SimpleFlowNode, CandidateStrategy } from '../consts'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as RoleApi from '@/api/system/role'
+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'
+import { defaultProps, handleTree } from '@/utils/tree'
+defineOptions({
+  name: 'CopyTaskNodeConfig'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode]
+}>()
+// 是否可见
+const settingVisible = ref(false)
+// 当前节点信息，保存后，需要更新父组件
+const currentNode = ref<SimpleFlowNode>(props.flowNode)
+const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') // 角色列表
+const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
+const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // 用户列表
+const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList')  // 部门列表
+const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // 用户组列表
+const deptTreeOptions = ref() // 部门树
+deptTreeOptions.value = handleTree(deptOptions?.value as DeptApi.DeptVO[], 'id')
+// 抄送人策略， 去掉发起人自选
+const copyUserStrategies = computed( ()=> {
+  return getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)
+            .filter(item => item.value !== CandidateStrategy.START_USER_SELECT);
+})
+
+// 选中的参数
+const candidateParamArray = ref<any[]>([])
+
+// 关闭
+const closeDrawer = () => {
+  settingVisible.value = false
+}
+// 保存配置
+const saveConfig = () => {
+  currentNode.value.attributes.candidateParam = candidateParamArray.value?.join(',')
+  currentNode.value.showText = getShowText()
+  emits('update:modelValue', currentNode.value)
+  settingVisible.value = false
+}
+
+const open = () => {
+  settingVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开抄送人配置抽屉
+
+const changeCandidateStrategy = () => {
+  candidateParamArray.value = []
+}
+// TODO 貌似可以和 UserTaskNodeConfig 重复了， 如何共用??
+const getShowText = () : string => {
+  let showText = ''
+  // 指定成员
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER) {
+    if (candidateParamArray.value?.length > 0) {
+      const candidateNames: string[] = []
+      userOptions?.value.forEach((item) => {
+        if (candidateParamArray.value.includes(item.id)) {
+          candidateNames.push(item.nickname)
+        }
+      })
+      console.log("candidateNames is ", candidateNames)
+      showText = `指定成员：${candidateNames.join(',')}`
+    }
+  }
+  // 指定角色
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.ROLE) {
+    if (candidateParamArray.value?.length > 0) {
+      const candidateNames: string[] = []
+      roleOptions?.value.forEach((item) => {
+        if (candidateParamArray.value.includes(item.id)) {
+          candidateNames.push(item.name)
+        }
+      })
+      showText = `指定角色：${candidateNames.join(',')}`
+    }
+  }
+   // 指定部门
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_MEMBER 
+      || currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_LEADER ) {
+    if (candidateParamArray.value?.length > 0) {
+      const candidateNames: string[] = []
+      deptOptions?.value.forEach((item) => {
+        if (candidateParamArray.value.includes(item.id)) {
+          candidateNames.push(item.name)
+        }
+      })
+      if(currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_MEMBER){
+        showText = `部门成员：${candidateNames.join(',')}`
+      } else {
+        showText = `部门的负责人：${candidateNames.join(',')}`
+      }
+    }
+  }
+   // 指定岗位
+   if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.POST) {
+    if (candidateParamArray.value?.length > 0) {
+      const candidateNames: string[] = []
+      postOptions?.value.forEach((item) => {
+        if (candidateParamArray.value.includes(item.id)) {
+          candidateNames.push(item.name)
+        }
+      })
+      showText = `指定岗位: ${candidateNames.join(',')}`
+    }
+  }
+   // 指定用户组
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER_GROUP) {
+    if (candidateParamArray.value?.length > 0) {
+      const candidateNames: string[] = []
+      userGroupOptions?.value.forEach((item) => {
+        if (candidateParamArray.value.includes(item.id)) {
+          candidateNames.push(item.name)
+        }
+      })
+      showText = `指定用户组: ${candidateNames.join(',')}`
+    }
+  }
+   // 流程表达式
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.EXPRESSION) {
+    if (candidateParamArray.value?.length > 0) {
+      showText = `流程表达式：${candidateParamArray.value[0]}`
+    }
+  }
+   return showText
+}
+
+onMounted(async () => {
+
+  console.log('candidateParam', currentNode.value.attributes?.candidateParam)
+  candidateParamArray.value = currentNode.value.attributes?.candidateParam?.split(',').map(item=> +item)
+  console.log('candidateParamArray.value', candidateParamArray.value)
+})
+</script>
+
+<style lang="scss" scoped>
+::v-deep(.el-divider--horizontal) {
+  display: block;
+  height: 1px;
+  margin: 0;
+  border-top: 1px var(--el-border-color) var(--el-border-style);
+}
+</style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 8716fd92..7ddb43fa 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -204,7 +204,7 @@ const saveConfig = () => {
   emits('update:modelValue', currentNode.value)
   settingVisible.value = false
 }
-const getShowText = (): string => {
+const getShowText = () : string => {
   let showText = ''
   // 指定成员
   if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER) {
@@ -290,11 +290,11 @@ const getShowText = (): string => {
 const open = () => {
   settingVisible.value = true
 }
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+defineExpose({ open }) // 提供 open 方法，用于打开抽屉
 const changeCandidateStrategy = () => {
   candidateParamArray.value = []
   currentNode.value.attributes.approveMethod = 1
-  if (currentNode.value.attributes.candidateStrategy === 30) {
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER) {
     notAllowedMultiApprovers.value = true
   } else {
     notAllowedMultiApprovers.value = false
@@ -302,7 +302,7 @@ const changeCandidateStrategy = () => {
 }
 
 const changedCandidateUsers = () => {
-  if (candidateParamArray.value?.length <= 1 && currentNode.value.attributes?.candidateStrategy === 30) {
+  if (candidateParamArray.value?.length <= 1 && currentNode.value.attributes?.candidateStrategy === CandidateStrategy.USER) {
     currentNode.value.attributes.approveMethod = 1;
     notAllowedMultiApprovers.value = true
   } else {
@@ -323,7 +323,7 @@ onMounted(async () => {
   console.log('candidateParam', currentNode.value.attributes?.candidateParam)
   candidateParamArray.value = currentNode.value.attributes?.candidateParam?.split(',').map(item=> +item)
   console.log('candidateParamArray.value', candidateParamArray.value)
-  if (currentNode.value.attributes?.candidateStrategy === 30 && candidateParamArray.value?.length <= 1) {
+  if (currentNode.value.attributes?.candidateStrategy === CandidateStrategy.USER && candidateParamArray.value?.length <= 1) {
     notAllowedMultiApprovers.value = true
   } else {
     notAllowedMultiApprovers.value = false
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
new file mode 100644
index 00000000..76266e6c
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div class="node-box" :class="{'node-config-error': !currentNode.showText}">
+        <div class="node-title-container">
+          <div class="node-title-icon copy-task"><span class="iconfont icon-copy"></span></div>
+          <input
+            v-if="showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent($event)"
+            v-mountedFocus
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickEvent">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text"  v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.COPY_TASK_NODE) }}
+          </div>
+          <Icon icon="ep:arrow-right-bold" />
+        </div>
+        <div class="node-toolbar">
+          <!-- <div class="toolbar-icon"><Icon icon="ep:document-copy" @click="copyNode" /></div> -->
+          <div class="toolbar-icon"><Icon icon="ep:delete" @click="deleteNode" /></div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
+    </div>
+    <CopyTaskNodeConfig
+      v-if="currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+      @update:model-value="handleModelValueUpdate"
+     />
+  </div>
+</template>
+<script setup lang='ts'>
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts'
+import NodeHandler from '../NodeHandler.vue'
+import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue';
+defineOptions({
+  name: 'CopyTaskNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode | undefined]
+}>()
+const currentNode = ref<SimpleFlowNode>(props.flowNode)
+
+// 监控当前节点的变化
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue
+  }
+)
+// 显示节点名称输入框
+const showInput = ref(false)
+// 节点名称输入框失去焦点
+const blurEvent = (event) => {
+  showInput.value = false
+  currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string
+}
+// 点击节点标题进行输入
+const clickEvent = () => {
+  showInput.value = true
+}
+const nodeSetting = ref()
+// 打开节点配置
+const openNodeConfig = () => {
+  nodeSetting.value.open()
+}
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  console.log('the child node is ', currentNode.value.childNode)
+  emits('update:modelValue', currentNode.value.childNode)
+}
+// 接收抄送人配置组件传过来的事件，并且更新节点 信息
+const handleModelValueUpdate = (updateValue) => {
+  emits('update:modelValue', updateValue)
+}
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index 46d0b85c..630f1809 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -3,13 +3,12 @@
     <div class="node-container">
       <div class="node-box" :class="{'node-config-error': !flowNode.showText}">
         <div class="node-title-container">
-          <div class="node-title-icon"><Icon icon="ep:avatar" /></div>
+          <div class="node-title-icon user-task"><span class="iconfont icon-approve"></span></div>
           <input
             v-if="showInput"
             type="text"
             class="editable-title-input"
             @blur="blurEvent($event)"
-            @focus="focusEvent($event)"
             v-mountedFocus
             v-model="currentNode.name"
             :placeholder="currentNode.name"
@@ -18,7 +17,7 @@
             {{ currentNode.name }}
           </div>
         </div>
-        <div class="node-content" @click="commonNodeConfig">
+        <div class="node-content" @click="openNodeConfig">
           <div class="node-text" :title="flowNode.showText" v-if="flowNode.showText">
             {{ flowNode.showText }}
           </div>
@@ -32,8 +31,6 @@
           <div class="toolbar-icon"><Icon icon="ep:delete" @click="deleteNode" /></div>
         </div>
       </div>
-
-      <!-- title="朱文宣妈妈, 许颖嘉, 王禹昊妈妈, 王亦心爸爸, 朱彧兮妈妈, 陈语馨爸爸, 蔡知妤爸爸/蔡知妍爸爸, 蒋昂倬妈妈, 胡恒智爸爸, 杨晞宇妈妈, 赵嘉依妈妈, 罗嘉懿爸爸, 郑辰希妈妈, 周慕然爸爸, 方张霖妈妈, 张若轩妈妈, 王亦心妈妈, 董子夏妈妈, 刘昱君妈妈/刘畅妈妈, 李子琦妈妈, 解宛芙妈妈, 洪栎妈妈, 陈涂晟爸爸, 张泽锴妈妈, 杨晞宇爸爸, 高鸿轩妈妈, 张然妈妈, 景晗亿妈妈, 郑炜彤妈妈, 祝安屹妈妈, 王萧婉妈妈, 朱彧兮爸爸, 李沐辰妈妈, 王元昊爸爸, 罗嘉懿妈妈, 陈语馨妈妈" -->
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
       <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
     </div>
@@ -51,7 +48,7 @@ import NodeHandler from '../NodeHandler.vue'
 import UserTaskNodeConfig from '../nodes-config/UserTaskNodeConfig.vue';
 import { generateUUID } from '@/utils'
 defineOptions({
-  name: 'CommonNode'
+  name: 'UserTaskNode'
 })
 const props = defineProps({
   flowNode: {
@@ -62,32 +59,27 @@ const props = defineProps({
 const emits = defineEmits<{
   'update:modelValue': [node: SimpleFlowNode | undefined]
 }>()
-const nodeSetting = ref()
-const commonNodeConfig = () => {
-  console.log('nodeSetting', nodeSetting)
-  nodeSetting.value.open()
-}
 
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
-console.log('current common node is ', currentNode)
-
-// 不加这个 COPY 会有问题
+const nodeSetting = ref()
+// 打开节点配置
+const openNodeConfig = () => {
+  nodeSetting.value.open()
+}
 watch(
   () => props.flowNode,
   (newValue) => {
-    console.log('new value is ', newValue)
     currentNode.value = newValue
   }
 )
+// 显示节点名称输入框
 const showInput = ref(false)
+// 节点名称输入框失去焦点
 const blurEvent = (event) => {
-  console.log('blurEvent', event)
   showInput.value = false
   currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string
 }
-const focusEvent = (event: FocusEvent) => {
-  console.log('focusEvent', event)
-}
+// 点击节点标题进行输入
 const clickEvent = () => {
   showInput.value = true
 }
@@ -115,7 +107,6 @@ const copyNode = () => {
     childNode: currentNode.value
   }
   currentNode.value = newCopyNode
-  console.log('current node value', currentNode.value)
   emits('update:modelValue', currentNode.value)
 }
 </script>
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index 6d2b4130..8b6e96e0 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -108,6 +108,13 @@
           .node-title-icon {
             display: flex;
             align-items: center;
+
+            &.user-task {
+              color: #ff943e;
+            }
+            &.copy-task {
+              color: #3296fa;
+            }
           }
 
           .node-title {
@@ -118,7 +125,7 @@
             overflow: hidden;
             text-overflow: ellipsis;
             color: #1f1f1f;
-            // vertical-align: middle;
+            line-height: 18px;
           }
         }
 
@@ -458,7 +465,7 @@
    text-align: center;
 
    &:hover {
-    background: #3296fa;
+    background: #e2e2e2;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    }
 
@@ -466,11 +473,14 @@
      font-size: 35px;
      line-height: 80px;
    }
- }
+  }
 
  .approve {
    color: #ff943e;
- }
+  }
+  .copy {
+    color: #3296fa;
+  }
 
  .handler-item-text {
    margin-top: 4px;
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simpleWorkflow/index.vue
index 619b9c4a..de5095a0 100644
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
@@ -5,6 +5,11 @@
 import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/';
 import { getModel } from '@/api/bpm/model'
 import { getForm, FormVO } from '@/api/bpm/form'
+import * as RoleApi from '@/api/system/role'
+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'
 defineOptions({
   name: 'SimpleWorkflowDesignEditor'
 })
@@ -12,8 +17,18 @@ const { query } = useRoute() // 路由的查询
 const modelId : string | undefined = query.modelId  as string;
 const formFields = ref<string[]>([])
 const formType = ref(20);
+const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
+const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
+const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
 provide('formFields', formFields)
 provide('formType', formType)
+provide('roleList', roleOptions)
+provide('postList', postOptions)
+provide('userList', userOptions)
+provide('deptList', deptOptions)
+provide('userGroupList', userGroupOptions)
 onMounted( async () => {
   const bpmnModel = await getModel(modelId);
   if (bpmnModel) {
@@ -23,6 +38,16 @@ onMounted( async () => {
       formFields.value = bpmnForm?.fields
     }
   }
+  // 获得角色列表
+  roleOptions.value = await RoleApi.getSimpleRoleList()
+  postOptions.value = await PostApi.getSimplePostList()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+  // 获得部门列表
+  deptOptions.value = await DeptApi.getSimpleDeptList()
+  console.log('index deptOptions value is' , deptOptions.value)
+  // 用户组列表
+  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
 })
 </script>
 <style lang='scss' scoped>

From 0d8d043250e3cf8949e759e1aa2f2815eb8b896d Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 28 Apr 2024 21:53:34 +0800
Subject: [PATCH 15/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=B8=80=E4=BA=9B=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/nodes-config/CopyTaskNodeConfig.vue   |  7 ++--
 .../src/nodes-config/UserTaskNodeConfig.vue   | 42 +++++++++----------
 .../src/nodes/CopyTaskNode.vue                | 21 +++++++++-
 .../src/nodes/UserTaskNode.vue                |  4 +-
 .../theme/simple-process-designer.scss        |  7 ++--
 src/views/bpm/simpleWorkflow/index.vue        |  7 +++-
 6 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index 8b07dca2..1c9e00b6 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -152,7 +152,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'
-import { defaultProps, handleTree } from '@/utils/tree'
+import { defaultProps } from '@/utils/tree'
 defineOptions({
   name: 'CopyTaskNodeConfig'
 })
@@ -175,8 +175,8 @@ const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
 const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // 用户列表
 const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList')  // 部门列表
 const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // 用户组列表
-const deptTreeOptions = ref() // 部门树
-deptTreeOptions.value = handleTree(deptOptions?.value as DeptApi.DeptVO[], 'id')
+const deptTreeOptions = inject('deptTree') // 部门树
+
 // 抄送人策略， 去掉发起人自选
 const copyUserStrategies = computed( ()=> {
   return getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)
@@ -285,7 +285,6 @@ const getShowText = () : string => {
 }
 
 onMounted(async () => {
-
   console.log('candidateParam', currentNode.value.attributes?.candidateParam)
   candidateParamArray.value = currentNode.value.attributes?.candidateParam?.split(',').map(item=> +item)
   console.log('candidateParamArray.value', candidateParamArray.value)
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 7ddb43fa..f793cd68 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -164,7 +164,7 @@
 <script setup lang="ts">
 import { SimpleFlowNode, APPROVE_METHODS,CandidateStrategy } from '../consts'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { defaultProps, handleTree } from '@/utils/tree'
+import { defaultProps } from '@/utils/tree'
 import * as RoleApi from '@/api/system/role'
 import * as DeptApi from '@/api/system/dept'
 import * as PostApi from '@/api/system/post'
@@ -186,12 +186,12 @@ const emits = defineEmits<{
 const notAllowedMultiApprovers = ref(false)
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
 const settingVisible = ref(false)
-const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
-const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
-const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
-let   deptOptions: DeptApi.DeptVO[] = []// 部门列表
-const deptTreeOptions = ref() // 部门树
-const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
+const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') // 角色列表
+const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
+const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // 用户列表
+const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList')  // 部门列表
+const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // 用户组列表
+const deptTreeOptions = inject('deptTree') // 部门树
 const candidateParamArray = ref<any[]>([])
 
 const closeDrawer = () => {
@@ -210,7 +210,7 @@ const getShowText = () : string => {
   if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
-      userOptions.value.forEach((item) => {
+      userOptions?.value.forEach((item) => {
         if (candidateParamArray.value.includes(item.id)) {
           candidateNames.push(item.nickname)
         }
@@ -223,7 +223,7 @@ const getShowText = () : string => {
   if (currentNode.value.attributes.candidateStrategy === 10) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
-      roleOptions.value.forEach((item) => {
+      roleOptions?.value.forEach((item) => {
         if (candidateParamArray.value.includes(item.id)) {
           candidateNames.push(item.name)
         }
@@ -236,7 +236,7 @@ const getShowText = () : string => {
       || currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_LEADER ) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
-      deptOptions.forEach((item) => {
+      deptOptions?.value.forEach((item) => {
         if (candidateParamArray.value.includes(item.id)) {
           candidateNames.push(item.name)
         }
@@ -253,7 +253,7 @@ const getShowText = () : string => {
    if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.POST) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
-      postOptions.value.forEach((item) => {
+      postOptions?.value.forEach((item) => {
         if (candidateParamArray.value.includes(item.id)) {
           candidateNames.push(item.name)
         }
@@ -265,7 +265,7 @@ const getShowText = () : string => {
   if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER_GROUP) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
-      userGroupOptions.value.forEach((item) => {
+      userGroupOptions?.value.forEach((item) => {
         if (candidateParamArray.value.includes(item.id)) {
           candidateNames.push(item.name)
         }
@@ -311,15 +311,15 @@ const changedCandidateUsers = () => {
 }
 onMounted(async () => {
   // 获得角色列表
-  roleOptions.value = await RoleApi.getSimpleRoleList()
-  postOptions.value = await PostApi.getSimplePostList()
-  // 获得用户列表
-  userOptions.value = await UserApi.getSimpleUserList()
-  // 获得部门列表
-  deptOptions = await DeptApi.getSimpleDeptList()
-  deptTreeOptions.value = handleTree(deptOptions, 'id')
-  // 获得用户组列表
-  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
+  // roleOptions.value = await RoleApi.getSimpleRoleList()
+  // postOptions.value = await PostApi.getSimplePostList()
+  // // 获得用户列表
+  // userOptions.value = await UserApi.getSimpleUserList()
+  // // 获得部门列表
+  // deptOptions = await DeptApi.getSimpleDeptList()
+  // deptTreeOptions.value = handleTree(deptOptions, 'id')
+  // // 获得用户组列表
+  // userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
   console.log('candidateParam', currentNode.value.attributes?.candidateParam)
   candidateParamArray.value = currentNode.value.attributes?.candidateParam?.split(',').map(item=> +item)
   console.log('candidateParamArray.value', candidateParamArray.value)
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
index 76266e6c..cac1482f 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -28,7 +28,7 @@
         </div>
         <div class="node-toolbar">
           <!-- <div class="toolbar-icon"><Icon icon="ep:document-copy" @click="copyNode" /></div> -->
-          <div class="toolbar-icon"><Icon icon="ep:delete" @click="deleteNode" /></div>
+          <div class="toolbar-icon"><Icon icon="ep:circle-close" :size="18"  @click="deleteNode" /></div>
         </div>
       </div>
 
@@ -47,6 +47,7 @@
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts'
 import NodeHandler from '../NodeHandler.vue'
 import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue';
+import { generateUUID } from '@/utils'
 defineOptions({
   name: 'CopyTaskNode'
 })
@@ -88,9 +89,25 @@ const openNodeConfig = () => {
 
 // 删除节点。更新当前节点为孩子节点
 const deleteNode = () => {
-  console.log('the child node is ', currentNode.value.childNode)
   emits('update:modelValue', currentNode.value.childNode)
 }
+// 复制节点
+const copyNode = () => {
+  const newCopyNode: SimpleFlowNode = {
+    id: generateUUID(),
+    name: currentNode.value.name,
+    showText: currentNode.value.showText,
+    type: currentNode.value.type,
+    // 抄送节点配置
+    attributes: {
+      candidateStrategy: currentNode.value.attributes?.candidateStrategy,
+      candidateParam: currentNode.value.attributes?.candidateParam
+    },
+    childNode: currentNode.value
+  }
+  currentNode.value = newCopyNode
+  emits('update:modelValue', currentNode.value)
+}
 // 接收抄送人配置组件传过来的事件，并且更新节点 信息
 const handleModelValueUpdate = (updateValue) => {
   emits('update:modelValue', updateValue)
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index 630f1809..a77012d5 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -27,8 +27,8 @@
           <Icon icon="ep:arrow-right-bold" />
         </div>
         <div class="node-toolbar">
-          <div class="toolbar-icon"><Icon icon="ep:document-copy" @click="copyNode" /></div>
-          <div class="toolbar-icon"><Icon icon="ep:delete" @click="deleteNode" /></div>
+          <!-- <div class="toolbar-icon"><Icon icon="ep:document-copy" @click="copyNode" /></div> -->
+          <div class="toolbar-icon"><Icon icon="ep:circle-close"  :size="18" @click="deleteNode" /></div>
         </div>
       </div>
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index 8b6e96e0..5e4c8e03 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -178,15 +178,14 @@
         .node-toolbar {
           opacity: 0;
           position: absolute;
-          top: -26px;
-          right: 10px;
+          top: -5px;
+          right: -8px;
           display: flex;
 
           .toolbar-icon {
             text-align: center;
             vertical-align: middle;
-            color: #000;
-            border-radius: 4px;
+            color: #6d6c6e;
           }
         }
       }
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simpleWorkflow/index.vue
index de5095a0..9d5d2144 100644
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
@@ -5,6 +5,7 @@
 import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/';
 import { getModel } from '@/api/bpm/model'
 import { getForm, FormVO } from '@/api/bpm/form'
+import { handleTree } from '@/utils/tree'
 import * as RoleApi from '@/api/system/role'
 import * as DeptApi from '@/api/system/dept'
 import * as PostApi from '@/api/system/post'
@@ -21,6 +22,7 @@ const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
 const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
+const deptTreeOptions = ref()
 const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
 provide('formFields', formFields)
 provide('formType', formType)
@@ -29,6 +31,7 @@ provide('postList', postOptions)
 provide('userList', userOptions)
 provide('deptList', deptOptions)
 provide('userGroupList', userGroupOptions)
+provide('deptTree', deptTreeOptions)
 onMounted( async () => {
   const bpmnModel = await getModel(modelId);
   if (bpmnModel) {
@@ -45,7 +48,9 @@ onMounted( async () => {
   userOptions.value = await UserApi.getSimpleUserList()
   // 获得部门列表
   deptOptions.value = await DeptApi.getSimpleDeptList()
-  console.log('index deptOptions value is' , deptOptions.value)
+
+  deptTreeOptions.value =  handleTree(deptOptions.value as DeptApi.DeptVO[], 'id');
+
   // 用户组列表
   userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
 })

From 9a2dcf2004fa1f9f505595c058721d48fd3ab266 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Mon, 29 Apr 2024 09:06:03 +0800
Subject: [PATCH 16/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E5=88=86=E6=94=AF=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |  43 ++++-
 .../src/ProcessNodeTree.vue                   |   5 +
 .../SimpleProcessDesignerV2/src/consts.ts     |   8 +-
 .../src/nodes-config/ConditionNodeConfig.vue  | 126 +++++++++++++++
 .../src/nodes-config/CopyTaskNodeConfig.vue   |   1 -
 .../src/nodes/ExclusiveNode.vue               | 147 ++++++++++++++++++
 .../theme/simple-process-designer.scss        |  15 +-
 7 files changed, 338 insertions(+), 7 deletions(-)
 create mode 100644 src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
 create mode 100644 src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index 6824fa1f..b885b1c4 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -15,6 +15,12 @@
               </div>
               <div class="handler-item-text">抄送</div>
             </div>
+            <div class="handler-item" @click="addNode(NodeType.EXCLUSIVE_NODE)">
+              <div class="handler-item-icon condition">
+                <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>
@@ -50,7 +56,7 @@ const addNode = (type: number) => {
   popoverShow.value = false
   if (type === NodeType.USER_TASK_NODE) {
     const data: SimpleFlowNode = {
-      id:  generateUUID(),
+      id:  'Activity_'+ generateUUID(),
       name: NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string,
       showText: '',
       type: NodeType.USER_TASK_NODE,
@@ -66,7 +72,7 @@ const addNode = (type: number) => {
   }
   if (type === NodeType.COPY_TASK_NODE) {
     const data: SimpleFlowNode = {
-      id:  generateUUID(),
+      id:  'Activity_'+ generateUUID(),
       name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
       showText: '',
       type: NodeType.COPY_TASK_NODE,
@@ -79,6 +85,39 @@ const addNode = (type: number) => {
     }
     emits('update:childNode', data)
   }
+  if (type === NodeType.EXCLUSIVE_NODE) {
+    const data : SimpleFlowNode = {
+      name: '条件分支',
+      type: NodeType.EXCLUSIVE_NODE,
+      id: 'GateWay_' + generateUUID(),
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: 'Flow_'+ generateUUID(),
+          name: '条件1',
+          showText: '',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+          attributes: {
+            conditionType: 1,
+            defaultCondition: false
+          }
+        },
+        {
+          id: 'Flow_'+ generateUUID(),
+          name: '其它情况',
+          showText: '其它情况进入此流程',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+          attributes: {
+            conditionType: undefined,
+            defaultCondition: true
+          }
+        }
+      ]
+    }
+    emits('update:childNode', data)
+  }
 }
 </script>
 
diff --git a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
index e0b01500..1d8e612a 100644
--- a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
+++ b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@@ -9,6 +9,10 @@
   <CopyTaskNode
         v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE" 
         :flow-node ="currentNode" @update:model-value="handleModelValueUpdate"/>
+  <!-- 条件节点 -->
+  <ExclusiveNode 
+        v-if="currentNode && currentNode.type === NodeType.EXCLUSIVE_NODE" 
+        :flow-node ="currentNode" @update:model-value="handleModelValueUpdate"/>
   <!-- 递归显示孩子节点  -->
   <ProcessNodeTree v-if="currentNode && currentNode.childNode"  v-model:flow-node="currentNode.childNode"/>
 
@@ -20,6 +24,7 @@ import StartEventNode from './nodes/StartEventNode.vue';
 import EndEventNode from './nodes/EndEventNode.vue';
 import UserTaskNode from './nodes/UserTaskNode.vue';
 import CopyTaskNode from './nodes/CopyTaskNode.vue';
+import ExclusiveNode from './nodes/ExclusiveNode.vue';
 import { SimpleFlowNode, NodeType }  from './consts';
 defineOptions({
   name: 'ProcessNodeTree'
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 54af0563..2648d820 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -112,5 +112,9 @@ export const APPROVE_METHODS: DictDataVO [] = [
   { label: '多人会签(需所有审批人同意)', value: 2 },
   { label: '多人或签(一名审批人同意即可)', value: 3 },
   { label: '依次审批(按顺序依次审批)', value: 4 }
-  // TODO 更多的类型
-]
\ No newline at end of file
+]
+
+export const CONDITION_CONFIG_TYPES: DictDataVO [] = [
+  { label: '条件规则', value: 1 },
+  { label: '条件表达式', value: 2 }
+]
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
new file mode 100644
index 00000000..23e3cc6c
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
@@ -0,0 +1,126 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="settingVisible"
+    :show-close="false"
+    :size="550"
+    :before-close="saveConfig"
+   >
+   <template #header>
+      <div class="w-full flex flex-col">
+        <div class="mb-2 text-size-2xl">{{ currentNode.name }}</div>
+        <el-divider />
+      </div>
+   </template>
+    <div> 
+      <div class="mb-3 text-size-sm" v-if="currentNode.attributes.defaultCondition">其它条件不满足进入此分支（该分支不可编辑和删除）</div>
+      <div v-else>
+          <el-form label-position="top">
+            <el-form-item label="配置方式" prop="conditionType">
+              <el-radio-group
+                v-model="currentNode.attributes.conditionType"
+                @change="changeConditionType"
+              >
+                <el-radio
+                  v-for="(dict, index) in CONDITION_CONFIG_TYPES"
+                  :key="index"
+                  :value="dict.value"
+                  :label="dict.value"
+                >
+                  {{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+              
+            <el-form-item
+              v-if="currentNode.attributes.conditionType === 2"
+              label="条件表达式"
+              prop="conditionExpression"
+            >
+              <el-input
+                type="textarea"
+                v-model="currentNode.attributes.conditionExpression"
+                clearable
+                style="width: 100%"
+              />
+            </el-form-item>
+            <el-form-item
+              v-if="currentNode.attributes.conditionType === 1"
+              label="条件规则"
+              prop="conditionExpression"
+            >
+              <span class="text-red-400">待实现</span>
+            </el-form-item>
+          </el-form>
+      </div>    
+    </div>
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang="ts">
+import { SimpleFlowNode, CONDITION_CONFIG_TYPES } from '../consts'
+defineOptions({
+  name: 'ConditionNode'
+})
+const props = defineProps({
+  conditionNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+const settingVisible = ref(false)
+const open = () => {
+  settingVisible.value = true
+}
+
+watch(() => props.conditionNode, (newValue) => {  
+  currentNode.value = newValue;  
+}); 
+
+const currentNode = ref<SimpleFlowNode>(props.conditionNode)
+// TODO nodeInfo 测试
+defineExpose({ open, nodeInfo: currentNode }) // 提供 open 方法，用于打开弹窗
+
+// 关闭
+const closeDrawer = () => {
+  settingVisible.value = false
+}
+// 保存配置
+const saveConfig = () => {
+  if (!currentNode.value.attributes.defaultCondition) {
+    currentNode.value.showText = getShowText();
+  }
+  settingVisible.value = false
+}
+const getShowText = () : string => {
+  let showText ='';
+  if (currentNode.value.attributes.conditionType === 1) {
+    showText = '待实现'
+  } 
+  if (currentNode.value.attributes.conditionType === 2) {
+    if (currentNode.value.attributes.conditionExpression) {
+      showText = `表达式：${currentNode.value.attributes.conditionExpression}`
+    }
+  }
+  return showText
+}
+// 改变条件配置方式
+const changeConditionType = () => {
+
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep(.el-divider--horizontal) {
+  display: block;
+  height: 1px;
+  margin: 0;
+  border-top: 1px var(--el-border-color) var(--el-border-style);
+}
+</style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index 1c9e00b6..4647d1ef 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -5,7 +5,6 @@
     :show-close="false"
     :size="550"
     :before-close="saveConfig"
-    class="justify-start"
   >
     <template #header>
       <div class="w-full flex flex-col">
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
new file mode 100644
index 00000000..8e5275f9
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div class="branch-node-add" @click="addCondition">添加条件</div>
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index == 0">
+          <div class="branch-line-first-top"></div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 == currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div class="node-box" :class="{'node-config-error': !item.showText}">
+              <div class="branch-node-title-container">
+                <div class="branch-title" v-if="showInputs[index]">
+                  <input
+                    type="text"
+                    class="input-max-width editable-title-input"
+                    @blur="blurEvent(index)"
+                    v-mountedFocus
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)"> {{ item.name }} </div>
+                <div class="branch-priority"> 优先级{{ index + 1 }} </div>
+              </div>
+              <div class="node-content" @click="conditionNodeConfig(item.id)">
+                <div class="node-text" :title="item.showText" v-if ="item.showText">
+                  {{ item.showText }}
+                </div>
+                <div class="node-text" v-else >
+                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                </div>
+                <Icon icon="ep:arrow-right-bold" />
+              </div>
+              <div class="node-toolbar" v-if="index + 1 !== currentNode.conditionNodes?.length">
+                <div class="toolbar-icon"><Icon  icon="ep:circle-close"  @click="deleteCondition(index)"/></div>
+              </div>
+            </div>
+            <NodeHandler v-model:child-node="item.childNode" />
+          </div>
+        </div>
+        <ConditionNodeConfig :condition-node="item" :ref="item.id" />
+        <!-- 递归显示子节点  -->
+        <ProcessNodeTree  v-if="item && item.childNode" v-model:flow-node="item.childNode" />
+      </div>
+    </div>
+    <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import NodeHandler from '../NodeHandler.vue'
+import ProcessNodeTree from '../ProcessNodeTree.vue'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import { generateUUID } from '@/utils'
+import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue'
+const { proxy } = getCurrentInstance() as any
+defineOptions({
+  name: 'ExclusiveNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:modelValue': [node : SimpleFlowNode | undefined]
+}>()
+
+const currentNode = ref<SimpleFlowNode>(props.flowNode)
+// const conditionNodes = computed(() => currentNode.value.conditionNodes);
+
+watch(() => props.flowNode, (newValue) => {  
+  currentNode.value = newValue;  
+});
+// TODO 测试后续去掉
+// watch(() => conditionNodes, (newValue) => {  
+//   console.log('new conditionNodes is ', newValue);
+// },{ deep: true }); 
+
+const showInputs = ref<boolean[]>([])
+// 失去焦点
+const blurEvent = (index:number) => {
+  showInputs.value[index] = false
+  const conditionNode =  currentNode.value.conditionNodes?.at(index) as SimpleFlowNode;
+  conditionNode.name =  conditionNode.name || '条件' + index
+}
+// 点击条件名称
+const clickEvent = (index:number) => {
+  showInputs.value[index] = true
+}
+
+const conditionNodeConfig = (nodeId:string) => {
+  console.log('nodeId', nodeId);
+  console.log("proxy.$refs", proxy.$refs);
+  // TODO 测试后续去掉
+  const conditionNode = proxy.$refs[nodeId][0];
+  console.log("node inf is ", conditionNode.nodeInfo);
+  conditionNode.open()
+}
+
+const addCondition = () => {
+  const conditionNodes =  currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    const len = conditionNodes.length
+    let lastIndex = len - 1
+    const conditionData: SimpleFlowNode = {
+      id:  generateUUID(),
+      name: '条件'+len,
+      showText : '',
+      type: NodeType.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+      attributes: {
+        conditionType: 1,
+        defaultCondition: false
+      }
+    }
+    conditionNodes.splice(lastIndex, 0, conditionData)
+  }
+}
+
+const deleteCondition = (index:number) => {
+  const conditionNodes =  currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1)
+    if (conditionNodes.length == 1) {
+      const childNode = currentNode.value.childNode
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode)
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index 5e4c8e03..3522fa9d 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -132,16 +132,22 @@
         // 条件节点标题
         .branch-node-title-container {
           display: flex;
-          padding: 4px;
+          padding: 4px 0;
           cursor: pointer;
           border-radius: 4px 4px 0 0;
           align-items: center;
           justify-content: space-between;
 
+          .input-max-width {
+            max-width: 115px !important;
+          }
+
           .branch-title {
-            max-width: 120px;
             font-size: 13px;
             font-weight: 600;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
             color: #f60;
           }
 
@@ -425,6 +431,7 @@
       // 可编辑的 title 输入框
       .editable-title-input {
         height: 20px;
+        max-width: 145px;
         line-height: 20px;
         font-size: 12px;
         margin-left: 4px;
@@ -480,6 +487,10 @@
   .copy {
     color: #3296fa;
   }
+  
+  .condition {
+    color: #15bc83;
+  }
 
  .handler-item-text {
    margin-top: 4px;

From e8193a0aa0340bca1bcee4790deb7e8de4586735 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 30 Apr 2024 00:10:17 +0800
Subject: [PATCH 17/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E5=88=86=E6=94=AF=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |  4 +-
 .../SimpleProcessDesignerV2/src/consts.ts     |  3 +-
 .../src/nodes-config/ConditionNodeConfig.vue  | 18 ++--
 .../src/nodes/CopyTaskNode.vue                |  2 +-
 .../src/nodes/ExclusiveNode.vue               | 84 +++++++++++--------
 .../src/nodes/UserTaskNode.vue                |  2 +-
 .../theme/simple-process-designer.scss        | 62 +++++++++++++-
 7 files changed, 123 insertions(+), 52 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index b885b1c4..73183b14 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -100,7 +100,7 @@ const addNode = (type: number) => {
           childNode: undefined,
           attributes: {
             conditionType: 1,
-            defaultCondition: false
+            defaultFlow: false
           }
         },
         {
@@ -111,7 +111,7 @@ const addNode = (type: number) => {
           childNode: undefined,
           attributes: {
             conditionType: undefined,
-            defaultCondition: true
+            defaultFlow: true
           }
         }
       ]
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 2648d820..69afb993 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -115,6 +115,5 @@ export const APPROVE_METHODS: DictDataVO [] = [
 ]
 
 export const CONDITION_CONFIG_TYPES: DictDataVO [] = [
-  { label: '条件规则', value: 1 },
-  { label: '条件表达式', value: 2 }
+  { label: '自定义条件表达式', value: 1 }
 ]
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
index 23e3cc6c..c449af1b 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
@@ -13,10 +13,10 @@
       </div>
    </template>
     <div> 
-      <div class="mb-3 text-size-sm" v-if="currentNode.attributes.defaultCondition">其它条件不满足进入此分支（该分支不可编辑和删除）</div>
+      <div class="mb-3 text-size-sm" v-if="currentNode.attributes.defaultFlow">其它条件不满足进入此分支（该分支不可编辑和删除）</div>
       <div v-else>
           <el-form label-position="top">
-            <el-form-item label="配置方式" prop="conditionType">
+            <el-form-item label="条件类型" prop="conditionType">
               <el-radio-group
                 v-model="currentNode.attributes.conditionType"
                 @change="changeConditionType"
@@ -33,7 +33,7 @@
             </el-form-item>
               
             <el-form-item
-              v-if="currentNode.attributes.conditionType === 2"
+              v-if="currentNode.attributes.conditionType === 1"
               label="条件表达式"
               prop="conditionExpression"
             >
@@ -44,13 +44,13 @@
                 style="width: 100%"
               />
             </el-form-item>
-            <el-form-item
+            <!-- <el-form-item
               v-if="currentNode.attributes.conditionType === 1"
               label="条件规则"
               prop="conditionExpression"
             >
               <span class="text-red-400">待实现</span>
-            </el-form-item>
+            </el-form-item> -->
           </el-form>
       </div>    
     </div>
@@ -93,17 +93,17 @@ const closeDrawer = () => {
 }
 // 保存配置
 const saveConfig = () => {
-  if (!currentNode.value.attributes.defaultCondition) {
+  if (!currentNode.value.attributes.defaultFlow) {
     currentNode.value.showText = getShowText();
   }
   settingVisible.value = false
 }
 const getShowText = () : string => {
   let showText ='';
+  // if (currentNode.value.attributes.conditionType === 1) {
+  //   showText = '待实现'
+  // } 
   if (currentNode.value.attributes.conditionType === 1) {
-    showText = '待实现'
-  } 
-  if (currentNode.value.attributes.conditionType === 2) {
     if (currentNode.value.attributes.conditionExpression) {
       showText = `表达式：${currentNode.value.attributes.conditionExpression}`
     }
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
index cac1482f..3c64aa44 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -28,7 +28,7 @@
         </div>
         <div class="node-toolbar">
           <!-- <div class="toolbar-icon"><Icon icon="ep:document-copy" @click="copyNode" /></div> -->
-          <div class="toolbar-icon"><Icon icon="ep:circle-close" :size="18"  @click="deleteNode" /></div>
+          <div class="toolbar-icon"><Icon icon="ep:delete" :size="16"  @click="deleteNode" /></div>
         </div>
       </div>
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
index 8e5275f9..3a8f330a 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
@@ -2,11 +2,7 @@
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
       <div class="branch-node-add" @click="addCondition">添加条件</div>
-      <div
-        class="branch-node-item"
-        v-for="(item, index) in currentNode.conditionNodes"
-        :key="index"
-      >
+      <div class="branch-node-item" v-for="(item, index) in currentNode.conditionNodes" :key="index">
         <template v-if="index == 0">
           <div class="branch-line-first-top"></div>
           <div class="branch-line-first-bottom"></div>
@@ -17,31 +13,40 @@
         </template>
         <div class="node-wrapper">
           <div class="node-container">
-            <div class="node-box" :class="{'node-config-error': !item.showText}">
+            <div class="node-box" :class="{ 'node-config-error': !item.showText }">
               <div class="branch-node-title-container">
                 <div class="branch-title" v-if="showInputs[index]">
                   <input
-                    type="text"
-                    class="input-max-width editable-title-input"
-                    @blur="blurEvent(index)"
-                    v-mountedFocus
-                    v-model="item.name"
-                  />
+type="text" class="input-max-width editable-title-input" @blur="blurEvent(index)"
+                    v-mountedFocus v-model="item.name" />
                 </div>
                 <div v-else class="branch-title" @click="clickEvent(index)"> {{ item.name }} </div>
                 <div class="branch-priority"> 优先级{{ index + 1 }} </div>
               </div>
-              <div class="node-content" @click="conditionNodeConfig(item.id)">
-                <div class="node-text" :title="item.showText" v-if ="item.showText">
+              <div class="branch-node-content" @click="conditionNodeConfig(item.id)">
+                <div class="branch-node-text" :title="item.showText" v-if="item.showText">
                   {{ item.showText }}
                 </div>
-                <div class="node-text" v-else >
+                <div class="branch-node-text" v-else>
                   {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
                 </div>
-                <Icon icon="ep:arrow-right-bold" />
               </div>
               <div class="node-toolbar" v-if="index + 1 !== currentNode.conditionNodes?.length">
-                <div class="toolbar-icon"><Icon  icon="ep:circle-close"  @click="deleteCondition(index)"/></div>
+                <div class="toolbar-icon">
+                  <Icon icon="ep:delete" :size="16" @click="deleteCondition(index)" />
+                </div>
+              </div>
+              <div 
+                class="branch-node-move move-node-left"
+                v-if="index != 0 && index + 1 !== currentNode.conditionNodes?.length" @click="moveNode(index, -1)">
+                <Icon icon="ep:arrow-left" />
+              </div>
+
+              <div 
+                class="branch-node-move move-node-right"
+                v-if="currentNode.conditionNodes && index < currentNode.conditionNodes.length - 2"
+                @click="moveNode(index, 1)">
+                <Icon icon="ep:arrow-right" />
               </div>
             </div>
             <NodeHandler v-model:child-node="item.childNode" />
@@ -49,7 +54,7 @@
         </div>
         <ConditionNodeConfig :condition-node="item" :ref="item.id" />
         <!-- 递归显示子节点  -->
-        <ProcessNodeTree  v-if="item && item.childNode" v-model:flow-node="item.childNode" />
+        <ProcessNodeTree v-if="item && item.childNode" v-model:flow-node="item.childNode" />
       </div>
     </div>
     <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
@@ -74,14 +79,14 @@ const props = defineProps({
 })
 // 定义事件，更新父组件
 const emits = defineEmits<{
-  'update:modelValue': [node : SimpleFlowNode | undefined]
+  'update:modelValue': [node: SimpleFlowNode | undefined]
 }>()
 
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
 // const conditionNodes = computed(() => currentNode.value.conditionNodes);
 
-watch(() => props.flowNode, (newValue) => {  
-  currentNode.value = newValue;  
+watch(() => props.flowNode, (newValue) => {
+  currentNode.value = newValue;
 });
 // TODO 测试后续去掉
 // watch(() => conditionNodes, (newValue) => {  
@@ -90,17 +95,17 @@ watch(() => props.flowNode, (newValue) => {
 
 const showInputs = ref<boolean[]>([])
 // 失去焦点
-const blurEvent = (index:number) => {
+const blurEvent = (index: number) => {
   showInputs.value[index] = false
-  const conditionNode =  currentNode.value.conditionNodes?.at(index) as SimpleFlowNode;
-  conditionNode.name =  conditionNode.name || '条件' + index
+  const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode;
+  conditionNode.name = conditionNode.name || '条件' + index
 }
 // 点击条件名称
-const clickEvent = (index:number) => {
+const clickEvent = (index: number) => {
   showInputs.value[index] = true
 }
 
-const conditionNodeConfig = (nodeId:string) => {
+const conditionNodeConfig = (nodeId: string) => {
   console.log('nodeId', nodeId);
   console.log("proxy.$refs", proxy.$refs);
   // TODO 测试后续去掉
@@ -109,29 +114,31 @@ const conditionNodeConfig = (nodeId:string) => {
   conditionNode.open()
 }
 
+// 新增条件
 const addCondition = () => {
-  const conditionNodes =  currentNode.value.conditionNodes;
+  const conditionNodes = currentNode.value.conditionNodes;
   if (conditionNodes) {
     const len = conditionNodes.length
     let lastIndex = len - 1
     const conditionData: SimpleFlowNode = {
-      id:  generateUUID(),
-      name: '条件'+len,
-      showText : '',
+      id: 'Flow_' + generateUUID(),
+      name: '条件' + len,
+      showText: '',
       type: NodeType.CONDITION_NODE,
       childNode: undefined,
       conditionNodes: [],
       attributes: {
         conditionType: 1,
-        defaultCondition: false
+        defaultFlow: false
       }
     }
     conditionNodes.splice(lastIndex, 0, conditionData)
   }
 }
 
-const deleteCondition = (index:number) => {
-  const conditionNodes =  currentNode.value.conditionNodes;
+// 删除条件
+const deleteCondition = (index: number) => {
+  const conditionNodes = currentNode.value.conditionNodes;
   if (conditionNodes) {
     conditionNodes.splice(index, 1)
     if (conditionNodes.length == 1) {
@@ -142,6 +149,17 @@ const deleteCondition = (index:number) => {
   }
 }
 
+// 移动节点
+const moveNode = (index: number, to: number) => {
+  // -1 ：向左  1： 向右
+  if (currentNode.value.conditionNodes) {
+    currentNode.value.conditionNodes[index] = currentNode.value.conditionNodes.splice(index + to, 
+      1, currentNode.value.conditionNodes[index])[0]
+  }
+
+}
+
+
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index a77012d5..4cba510a 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -28,7 +28,7 @@
         </div>
         <div class="node-toolbar">
           <!-- <div class="toolbar-icon"><Icon icon="ep:document-copy" @click="copyNode" /></div> -->
-          <div class="toolbar-icon"><Icon icon="ep:circle-close"  :size="18" @click="deleteNode" /></div>
+          <div class="toolbar-icon"><Icon icon="ep:delete"  :size="18" @click="deleteNode" /></div>
         </div>
       </div>
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index 3522fa9d..6cceb074 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -95,6 +95,10 @@
           .node-toolbar {
             opacity: 1;
           }
+
+          .branch-node-move {
+            display: flex;
+          }
         }
 
         // 普通节点标题
@@ -181,24 +185,74 @@
           }
         }
 
+        //条件节点内容
+        .branch-node-content {
+          display: flex;
+          min-height: 32px;
+          padding: 4px 8px;
+          margin-top: 4px;
+          line-height: 32px;
+          align-items: center;
+          color: #111f2c;
+          border-radius: 4px;
+
+          .branch-node-text {
+            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: -5px;
-          right: -8px;
+          top: -25px;
+          right: 0px;
           display: flex;
 
           .toolbar-icon {
             text-align: center;
             vertical-align: middle;
-            color: #6d6c6e;
+            color:  #000;
           }
         }
+
+        // 条件节点左右移动
+        .branch-node-move {
+          position: absolute;
+          width: 10px;
+          cursor: pointer;
+          display: none;
+          align-items: center;
+          height: 100%;
+          justify-content: center;
+        }
+
+        .move-node-left {
+          left: -2px;
+          top: 0px;
+          background: rgba(126, 134, 142, .08);
+          border-top-left-radius: 8px;
+          border-bottom-left-radius: 8px;
+        }
+
+        .move-node-right {
+          right: -2px;
+          top: 0px;
+          background: rgba(126,134,142,.08);
+          border-top-right-radius: 6px;
+          border-bottom-right-radius: 6px;
+        }
       }
 
       
       .node-config-error {
-        border-color: #ff5219;
+        border-color: #ff5219 !important;
       }
       // 普通节点包装
       .node-wrapper {

From 22af2dc2d93174a1815d263a2c96b2cb976d03a6 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 7 May 2024 23:44:01 +0800
Subject: [PATCH 18/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/nodes-config/ConditionNodeConfig.vue  | 45 +++++++++++-----
 .../src/nodes-config/CopyTaskNodeConfig.vue   | 41 +++++++++++----
 .../src/nodes-config/UserTaskNodeConfig.vue   | 46 ++++++++--------
 .../src/nodes/CopyTaskNode.vue                |  3 +-
 .../src/nodes/ExclusiveNode.vue               | 25 +++++----
 .../src/nodes/UserTaskNode.vue                |  3 +-
 .../SimpleProcessDesignerV2/src/utils.ts      |  7 +++
 .../theme/simple-process-designer.scss        | 52 +++++++++++++++++--
 8 files changed, 157 insertions(+), 65 deletions(-)
 create mode 100644 src/components/SimpleProcessDesignerV2/src/utils.ts

diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
index c449af1b..e539604a 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
@@ -7,9 +7,19 @@
     :before-close="saveConfig"
    >
    <template #header>
-      <div class="w-full flex flex-col">
-        <div class="mb-2 text-size-2xl">{{ currentNode.name }}</div>
-        <el-divider />
+      <div class="config-header">
+        <input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-mountedFocus
+          v-model="currentNode.name"
+          :placeholder="currentNode.name"
+          />
+        <div v-else class="node-name" >{{ currentNode.name }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"/></div>
+        
+        <div class="divide-line"></div>
       </div>
    </template>
     <div> 
@@ -65,6 +75,7 @@
 </template>
 <script setup lang="ts">
 import { SimpleFlowNode, CONDITION_CONFIG_TYPES } from '../consts'
+import { getDefaultConditionNodeName } from '../utils';
 defineOptions({
   name: 'ConditionNode'
 })
@@ -72,6 +83,10 @@ const props = defineProps({
   conditionNode: {
     type: Object as () => SimpleFlowNode,
     required: true
+  },
+  nodeIndex : {
+    type: Number,
+    required: true
   }
 })
 const settingVisible = ref(false)
@@ -81,11 +96,22 @@ const open = () => {
 
 watch(() => props.conditionNode, (newValue) => {  
   currentNode.value = newValue;  
-}); 
+});
+// 显示名称输入框
+const showInput = ref(false)
+
+const clickIcon = () => {
+  showInput.value = true;
+}
+// 输入框失去焦点
+const blurEvent = () => {
+  showInput.value = false
+  currentNode.value.name = currentNode.value.name || getDefaultConditionNodeName(props.nodeIndex, currentNode.value.attributes?.defaultFlow)
+}
 
 const currentNode = ref<SimpleFlowNode>(props.conditionNode)
-// TODO nodeInfo 测试
-defineExpose({ open, nodeInfo: currentNode }) // 提供 open 方法，用于打开弹窗
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 // 关闭
 const closeDrawer = () => {
@@ -117,10 +143,5 @@ const changeConditionType = () => {
 </script>
 
 <style lang="scss" scoped>
-::v-deep(.el-divider--horizontal) {
-  display: block;
-  height: 1px;
-  margin: 0;
-  border-top: 1px var(--el-border-color) var(--el-border-style);
-}
+
 </style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index 4647d1ef..3acc2822 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -7,9 +7,19 @@
     :before-close="saveConfig"
   >
     <template #header>
-      <div class="w-full flex flex-col">
-        <div class="mb-2 text-size-2xl">{{ currentNode.name }}</div>
-        <el-divider />
+      <div class="config-header">
+        <input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-mountedFocus
+          v-model="currentNode.name"
+          :placeholder="currentNode.name"
+          />
+        <div v-else class="node-name" >{{ currentNode.name }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"/></div>
+        
+        <div class="divide-line"></div>
       </div>
     </template>
     <el-tabs type="border-card">
@@ -144,7 +154,7 @@
   </el-drawer>
 </template>
 <script setup lang='ts'>
-import { SimpleFlowNode, CandidateStrategy } from '../consts'
+import { SimpleFlowNode, CandidateStrategy,NodeType, NODE_DEFAULT_NAME } from '../consts'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as RoleApi from '@/api/system/role'
 import * as DeptApi from '@/api/system/dept'
@@ -282,6 +292,17 @@ const getShowText = () : string => {
   }
    return showText
 }
+// 显示名称输入框
+const showInput = ref(false)
+
+const clickIcon = () => {
+  showInput.value = true;
+}
+// 输入框失去焦点
+const blurEvent = () => {
+  showInput.value = false
+  currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string
+}
 
 onMounted(async () => {
   console.log('candidateParam', currentNode.value.attributes?.candidateParam)
@@ -291,10 +312,10 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
-::v-deep(.el-divider--horizontal) {
-  display: block;
-  height: 1px;
-  margin: 0;
-  border-top: 1px var(--el-border-color) var(--el-border-style);
-}
+// ::v-deep(.el-divider--horizontal) {
+//   display: block;
+//   height: 1px;
+//   margin: 0;
+//   border-top: 1px var(--el-border-color) var(--el-border-style);
+// }
 </style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index f793cd68..7893b9f8 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -8,9 +8,19 @@
     class="justify-start"
   >
     <template #header>
-      <div class="w-full flex flex-col">
-        <div class="mb-2 text-size-2xl">{{ currentNode.name }}</div>
-        <el-divider />
+      <div class="config-header">
+        <input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-mountedFocus
+          v-model="currentNode.name"
+          :placeholder="currentNode.name"
+          />
+        <div v-else class="node-name" >{{ currentNode.name }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"/></div>
+        
+        <div class="divide-line"></div>
       </div>
     </template>
     <el-tabs type="border-card">
@@ -162,7 +172,7 @@
 </template>
 
 <script setup lang="ts">
-import { SimpleFlowNode, APPROVE_METHODS,CandidateStrategy } from '../consts'
+import { SimpleFlowNode, APPROVE_METHODS, CandidateStrategy, NodeType, NODE_DEFAULT_NAME } from '../consts'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { defaultProps } from '@/utils/tree'
 import * as RoleApi from '@/api/system/role'
@@ -309,18 +319,18 @@ const changedCandidateUsers = () => {
     notAllowedMultiApprovers.value = false
   }
 }
+// 显示名称输入框
+const showInput = ref(false)
+
+const clickIcon = () => {
+  showInput.value = true;
+}
+// 节点名称输入框失去焦点
+const blurEvent = () => {
+  showInput.value = false
+  currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string
+}
 onMounted(async () => {
-  // 获得角色列表
-  // roleOptions.value = await RoleApi.getSimpleRoleList()
-  // postOptions.value = await PostApi.getSimplePostList()
-  // // 获得用户列表
-  // userOptions.value = await UserApi.getSimpleUserList()
-  // // 获得部门列表
-  // deptOptions = await DeptApi.getSimpleDeptList()
-  // deptTreeOptions.value = handleTree(deptOptions, 'id')
-  // // 获得用户组列表
-  // userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
-  console.log('candidateParam', currentNode.value.attributes?.candidateParam)
   candidateParamArray.value = currentNode.value.attributes?.candidateParam?.split(',').map(item=> +item)
   console.log('candidateParamArray.value', candidateParamArray.value)
   if (currentNode.value.attributes?.candidateStrategy === CandidateStrategy.USER && candidateParamArray.value?.length <= 1) {
@@ -332,10 +342,4 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
-::v-deep(.el-divider--horizontal) {
-  display: block;
-  height: 1px;
-  margin: 0;
-  border-top: 1px var(--el-border-color) var(--el-border-style);
-}
 </style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
index 3c64aa44..9e553a13 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -27,8 +27,7 @@
           <Icon icon="ep:arrow-right-bold" />
         </div>
         <div class="node-toolbar">
-          <!-- <div class="toolbar-icon"><Icon icon="ep:document-copy" @click="copyNode" /></div> -->
-          <div class="toolbar-icon"><Icon icon="ep:delete" :size="16"  @click="deleteNode" /></div>
+          <div class="toolbar-icon"><Icon  color="#0089ff"  icon="ep:circle-close-filled" :size="18"  @click="deleteNode" /></div>
         </div>
       </div>
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
index 3a8f330a..b997be09 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
@@ -15,10 +15,13 @@
           <div class="node-container">
             <div class="node-box" :class="{ 'node-config-error': !item.showText }">
               <div class="branch-node-title-container">
-                <div class="branch-title" v-if="showInputs[index]">
+                <div  v-if="showInputs[index]">
                   <input
-type="text" class="input-max-width editable-title-input" @blur="blurEvent(index)"
-                    v-mountedFocus v-model="item.name" />
+                    type="text"
+                    class="input-max-width editable-title-input" 
+                    @blur="blurEvent(index)"
+                    v-mountedFocus 
+                    v-model="item.name" />
                 </div>
                 <div v-else class="branch-title" @click="clickEvent(index)"> {{ item.name }} </div>
                 <div class="branch-priority"> 优先级{{ index + 1 }} </div>
@@ -33,7 +36,7 @@ type="text" class="input-max-width editable-title-input" @blur="blurEvent(index)
               </div>
               <div class="node-toolbar" v-if="index + 1 !== currentNode.conditionNodes?.length">
                 <div class="toolbar-icon">
-                  <Icon icon="ep:delete" :size="16" @click="deleteCondition(index)" />
+                  <Icon color="#0089ff"  icon="ep:circle-close-filled" :size="18"  @click="deleteCondition(index)" />
                 </div>
               </div>
               <div 
@@ -52,7 +55,7 @@ type="text" class="input-max-width editable-title-input" @blur="blurEvent(index)
             <NodeHandler v-model:child-node="item.childNode" />
           </div>
         </div>
-        <ConditionNodeConfig :condition-node="item" :ref="item.id" />
+        <ConditionNodeConfig :node-index="index" :condition-node="item" :ref="item.id" />
         <!-- 递归显示子节点  -->
         <ProcessNodeTree v-if="item && item.childNode" v-model:flow-node="item.childNode" />
       </div>
@@ -65,6 +68,7 @@ type="text" class="input-max-width editable-title-input" @blur="blurEvent(index)
 import NodeHandler from '../NodeHandler.vue'
 import ProcessNodeTree from '../ProcessNodeTree.vue'
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import { getDefaultConditionNodeName } from '../utils'
 import { generateUUID } from '@/utils'
 import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue'
 const { proxy } = getCurrentInstance() as any
@@ -88,29 +92,24 @@ const currentNode = ref<SimpleFlowNode>(props.flowNode)
 watch(() => props.flowNode, (newValue) => {
   currentNode.value = newValue;
 });
-// TODO 测试后续去掉
-// watch(() => conditionNodes, (newValue) => {  
-//   console.log('new conditionNodes is ', newValue);
-// },{ deep: true }); 
+
 
 const showInputs = ref<boolean[]>([])
 // 失去焦点
 const blurEvent = (index: number) => {
   showInputs.value[index] = false
   const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode;
-  conditionNode.name = conditionNode.name || '条件' + index
+  conditionNode.name = conditionNode.name || getDefaultConditionNodeName(index, conditionNode.attributes?.defaultFlow)
 }
+
 // 点击条件名称
 const clickEvent = (index: number) => {
   showInputs.value[index] = true
 }
 
 const conditionNodeConfig = (nodeId: string) => {
-  console.log('nodeId', nodeId);
   console.log("proxy.$refs", proxy.$refs);
-  // TODO 测试后续去掉
   const conditionNode = proxy.$refs[nodeId][0];
-  console.log("node inf is ", conditionNode.nodeInfo);
   conditionNode.open()
 }
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index 4cba510a..9e7387f5 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -27,8 +27,7 @@
           <Icon icon="ep:arrow-right-bold" />
         </div>
         <div class="node-toolbar">
-          <!-- <div class="toolbar-icon"><Icon icon="ep:document-copy" @click="copyNode" /></div> -->
-          <div class="toolbar-icon"><Icon icon="ep:delete"  :size="18" @click="deleteNode" /></div>
+          <div class="toolbar-icon"><Icon color="#0089ff"  icon="ep:circle-close-filled"  :size="18" @click="deleteNode" /></div>
         </div>
       </div>
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
diff --git a/src/components/SimpleProcessDesignerV2/src/utils.ts b/src/components/SimpleProcessDesignerV2/src/utils.ts
new file mode 100644
index 00000000..c68635ae
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/utils.ts
@@ -0,0 +1,7 @@
+// 获取条件节点默认的名称
+export const getDefaultConditionNodeName = (index:number, defaultFlow: boolean) : string => {
+  if ( defaultFlow ){
+    return "其它情况"
+  }
+  return '条件' + (index+1)
+}
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index 6cceb074..8a35345a 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -91,7 +91,7 @@
         transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
 
         &:hover {
-          // border-color: #0089ff;
+          border-color: #0089ff;
           .node-toolbar {
             opacity: 1;
           }
@@ -130,6 +130,9 @@
             text-overflow: ellipsis;
             color: #1f1f1f;
             line-height: 18px;
+            &:hover {
+              border-bottom: 1px dashed #f60;
+            }
           }
         }
 
@@ -153,6 +156,9 @@
             overflow: hidden;
             text-overflow: ellipsis;
             color: #f60;
+            &:hover {
+              border-bottom: 1px dashed #000;
+            }
           }
 
           .branch-priority {
@@ -211,14 +217,13 @@
         .node-toolbar {
           opacity: 0;
           position: absolute;
-          top: -25px;
+          top: -20px;
           right: 0px;
           display: flex;
 
           .toolbar-icon {
             text-align: center;
             vertical-align: middle;
-            color:  #000;
           }
         }
 
@@ -501,10 +506,47 @@
       }
     }
   }
-
-
 }
 
+// 配置节点头部
+.config-header {
+  display: flex;
+  flex-direction: column;
+
+  .node-name {
+    display: flex;
+    height: 24px;
+    line-height: 24px;
+    cursor: pointer;
+    align-items: center;
+  }
+
+  .divide-line {
+    width: 100%;
+    height: 1px;
+    margin-top: 16px;
+    background: #eee;
+  }
+
+  .config-editable-input {
+    height: 24px;
+    max-width: 510px;
+    font-size: 16px;
+    line-height: 24px;
+    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;

From 672db903f37d6efe5675f851b66c5ead3dc0dde6 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 8 May 2024 20:04:25 +0800
Subject: [PATCH 19/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E5=AE=A1=E6=89=B9?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=EF=BC=8C=E6=8A=84=E9=80=81=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=A1=A8=E5=8D=95=E5=AD=97=E6=AE=B5=E6=9D=83?=
 =?UTF-8?q?=E9=99=90=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       | 12 ++-
 .../src/ProcessNodeTree.vue                   | 11 ++-
 .../src/SimpleProcessDesigner.vue             |  4 +-
 .../src/nodes-config/CopyTaskNodeConfig.vue   | 62 +++++++++++----
 .../src/nodes-config/UserTaskNodeConfig.vue   | 72 +++++++++++++-----
 .../src/nodes/CopyTaskNode.vue                | 12 +--
 .../src/nodes/ExclusiveNode.vue               |  1 -
 .../src/nodes/StartEventNode.vue              | 18 +++--
 .../src/nodes/UserTaskNode.vue                | 17 ++---
 .../SimpleProcessDesignerV2/src/utils.ts      | 16 ++++
 .../theme/simple-process-designer.scss        | 76 +++++++++++++++++++
 11 files changed, 237 insertions(+), 64 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index 73183b14..efd7ac41 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -52,11 +52,13 @@ const props = defineProps({
 
 const emits = defineEmits(['update:childNode'])
 
+
 const addNode = (type: number) => {
   popoverShow.value = false
   if (type === NodeType.USER_TASK_NODE) {
+    const id =  'Activity_'+ generateUUID();
     const data: SimpleFlowNode = {
-      id:  'Activity_'+ generateUUID(),
+      id:  id,
       name: NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string,
       showText: '',
       type: NodeType.USER_TASK_NODE,
@@ -64,11 +66,12 @@ const addNode = (type: number) => {
       attributes: {
         approveMethod: 1,
         candidateStrategy: CandidateStrategy.USER,
-        candidateParam: undefined
+        candidateParam: undefined,
+        fieldsPermission: undefined,
       },
       childNode: props.childNode
     }
-    emits('update:childNode', data)
+    emits('update:childNode', data);
   }
   if (type === NodeType.COPY_TASK_NODE) {
     const data: SimpleFlowNode = {
@@ -79,7 +82,8 @@ const addNode = (type: number) => {
       // 审批节点配置
       attributes: {
         candidateStrategy: CandidateStrategy.USER,
-        candidateParam: undefined
+        candidateParam: undefined,
+        fieldsPermission: undefined
       },
       childNode: props.childNode
     }
diff --git a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
index 1d8e612a..a40ebc27 100644
--- a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
+++ b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@@ -1,6 +1,9 @@
 <template>
   <!-- 开始节点 -->
-  <StartEventNode v-if="currentNode && currentNode.type === NodeType.START_EVENT_NODE" :flow-node ="currentNode" />
+  <StartEventNode
+        v-if="currentNode && currentNode.type === NodeType.START_EVENT_NODE" 
+        :flow-node ="currentNode" 
+        @update:model-value="handleModelValueUpdate" />
   <!-- 审批节点 -->
   <UserTaskNode 
         v-if="currentNode && currentNode.type === NodeType.USER_TASK_NODE" 
@@ -39,11 +42,11 @@ 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('Process Node Tree handleModelValueUpdate', updateValue)
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index 24006ad7..76dc9b40 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -65,7 +65,6 @@ const saveSimpleFlowModel = async () => {
   }
   errorNodes = []
   validateNode(processNodeTree.value, errorNodes)
-  console.log('errorNodes is ', errorNodes)
   if (errorNodes.length > 0) {
     errorDialogVisible.value = true
     return;
@@ -76,7 +75,6 @@ const saveSimpleFlowModel = async () => {
   }
 
   const result = await saveBpmSimpleModel(data)
-  console.log('save the result is ', result)
   if (result) {
     message.success('修改成功')
     close()
@@ -148,7 +146,7 @@ const zoomIn = () => {
 onMounted(async () => {
   const result = await getBpmSimpleModel(props.modelId)
   if (result) {
-    console.log('get the result is ', result)
+    console.log('the result is ', result)
     processNodeTree.value = result
   }
 })
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index 3acc2822..3ba56596 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -143,6 +143,39 @@
           </el-form>
         </div>
       </el-tab-pane>
+      <el-tab-pane label="表单字段权限" v-if ="formType === 10">
+        <div class="field-setting-pane">
+          <div class="field-setting-desc">字段权限</div>
+          <div class="field-permit-title">
+            <div class="setting-title-label first-title">
+              字段名称
+            </div>
+            <div class="other-titles">
+              <span class="setting-title-label">可编辑</span>
+              <span class="setting-title-label">只读</span>
+              <span class="setting-title-label">隐藏</span>
+            </div>
+          </div>
+          <div
+            class="field-setting-item"
+            v-for="(item, index) in currentNode.attributes.fieldsPermission"
+            :key="index"
+          >
+            <div class="field-setting-item-label"> {{ item.title }} </div>
+            <el-radio-group class="field-setting-item-group" v-model="item.permission">
+              <div class="item-radio-wrap">
+                <el-radio value="1" size="large" label="1" disabled><span></span></el-radio>
+              </div>
+              <div class="item-radio-wrap">
+                <el-radio value="2" size="large" label="2"><span></span></el-radio>
+              </div>
+              <div class="item-radio-wrap">
+                <el-radio value="3" size="large" label="3"><span></span></el-radio>
+              </div>
+            </el-radio-group>
+          </div>
+        </div>
+      </el-tab-pane>
     </el-tabs>
     <template #footer>
       <el-divider />
@@ -155,6 +188,7 @@
 </template>
 <script setup lang='ts'>
 import { SimpleFlowNode, CandidateStrategy,NodeType, NODE_DEFAULT_NAME } from '../consts'
+import { getDefaultFieldsPermission } from '../utils'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as RoleApi from '@/api/system/role'
 import * as DeptApi from '@/api/system/dept'
@@ -171,13 +205,9 @@ const props = defineProps({
     required: true
   }
 })
-// 定义事件，更新父组件
-const emits = defineEmits<{
-  'update:modelValue': [node: SimpleFlowNode]
-}>()
 // 是否可见
 const settingVisible = ref(false)
-// 当前节点信息，保存后，需要更新父组件
+// 当前节点信息
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
 const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') // 角色列表
 const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
@@ -185,6 +215,8 @@ const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // 用户列表
 const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList')  // 部门列表
 const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // 用户组列表
 const deptTreeOptions = inject('deptTree') // 部门树
+const formType = inject('formType') // 表单类型
+const formFields = inject<Ref<string[]>>('formFields')
 
 // 抄送人策略， 去掉发起人自选
 const copyUserStrategies = computed( ()=> {
@@ -203,14 +235,24 @@ const closeDrawer = () => {
 const saveConfig = () => {
   currentNode.value.attributes.candidateParam = candidateParamArray.value?.join(',')
   currentNode.value.showText = getShowText()
-  emits('update:modelValue', currentNode.value)
   settingVisible.value = false
 }
 
 const open = () => {
   settingVisible.value = true
 }
-defineExpose({ open }) // 提供 open 方法，用于打开抄送人配置抽屉
+//  修改当前编辑的节点， 由父组件传过来
+const setCurrentNode = (node:SimpleFlowNode) => {
+  currentNode.value = node;
+  currentNode.value.attributes.fieldsPermission = node.attributes.fieldsPermission || getDefaultFieldsPermission(formFields?.value) 
+  const strCandidateParam = node.attributes?.candidateParam
+  if(strCandidateParam) {
+    candidateParamArray.value = strCandidateParam.split(',').map(item=> +item)
+  }
+}
+
+defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
+
 
 const changeCandidateStrategy = () => {
   candidateParamArray.value = []
@@ -227,7 +269,6 @@ const getShowText = () : string => {
           candidateNames.push(item.nickname)
         }
       })
-      console.log("candidateNames is ", candidateNames)
       showText = `指定成员：${candidateNames.join(',')}`
     }
   }
@@ -304,11 +345,6 @@ const blurEvent = () => {
   currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string
 }
 
-onMounted(async () => {
-  console.log('candidateParam', currentNode.value.attributes?.candidateParam)
-  candidateParamArray.value = currentNode.value.attributes?.candidateParam?.split(',').map(item=> +item)
-  console.log('candidateParamArray.value', candidateParamArray.value)
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 7893b9f8..d549ebea 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -160,6 +160,39 @@
           </el-form>
         </div>
       </el-tab-pane>
+      <el-tab-pane label="表单字段权限" v-if ="formType === 10">
+        <div class="field-setting-pane">
+          <div class="field-setting-desc">字段权限</div>
+          <div class="field-permit-title">
+            <div class="setting-title-label first-title">
+              字段名称
+            </div>
+            <div class="other-titles">
+              <span class="setting-title-label">可编辑</span>
+              <span class="setting-title-label">只读</span>
+              <span class="setting-title-label">隐藏</span>
+            </div>
+          </div>
+          <div
+            class="field-setting-item"
+            v-for="(item, index) in currentNode.attributes.fieldsPermission"
+            :key="index"
+          >
+            <div class="field-setting-item-label"> {{ item.title }} </div>
+            <el-radio-group class="field-setting-item-group" v-model="item.permission">
+              <div class="item-radio-wrap">
+                <el-radio value="1" size="large" label="1"><span></span></el-radio>
+              </div>
+              <div class="item-radio-wrap">
+                <el-radio value="2" size="large" label="2"><span></span></el-radio>
+              </div>
+              <div class="item-radio-wrap">
+                <el-radio value="3" size="large" label="3"><span></span></el-radio>
+              </div>
+            </el-radio-group>
+          </div>
+        </div>
+      </el-tab-pane>
     </el-tabs>
     <template #footer>
       <el-divider />
@@ -174,6 +207,7 @@
 <script setup lang="ts">
 import { SimpleFlowNode, APPROVE_METHODS, CandidateStrategy, NodeType, NODE_DEFAULT_NAME } from '../consts'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { getDefaultFieldsPermission } from '../utils'
 import { defaultProps } from '@/utils/tree'
 import * as RoleApi from '@/api/system/role'
 import * as DeptApi from '@/api/system/dept'
@@ -190,11 +224,9 @@ const props = defineProps({
     required: true
   }
 })
-const emits = defineEmits<{
-  'update:modelValue': [node: SimpleFlowNode]
-}>()
+
 const notAllowedMultiApprovers = ref(false)
-const currentNode = ref<SimpleFlowNode>(props.flowNode)
+const currentNode = ref<SimpleFlowNode>(props.flowNode);
 const settingVisible = ref(false)
 const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') // 角色列表
 const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
@@ -202,6 +234,8 @@ const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // 用户列表
 const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList')  // 部门列表
 const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // 用户组列表
 const deptTreeOptions = inject('deptTree') // 部门树
+const formType = inject('formType') // 表单类型
+const formFields = inject<Ref<string[]>>('formFields')
 const candidateParamArray = ref<any[]>([])
 
 const closeDrawer = () => {
@@ -210,8 +244,6 @@ const closeDrawer = () => {
 const saveConfig = () => {
   currentNode.value.attributes.candidateParam = candidateParamArray.value?.join(',')
   currentNode.value.showText = getShowText()
-  console.log('currentNode value is ', currentNode.value)
-  emits('update:modelValue', currentNode.value)
   settingVisible.value = false
 }
 const getShowText = () : string => {
@@ -225,7 +257,6 @@ const getShowText = () : string => {
           candidateNames.push(item.nickname)
         }
       })
-      console.log("candidateNames is ", candidateNames)
       showText = `指定成员：${candidateNames.join(',')}`
     }
   }
@@ -300,7 +331,23 @@ const getShowText = () : string => {
 const open = () => {
   settingVisible.value = true
 }
-defineExpose({ open }) // 提供 open 方法，用于打开抽屉
+//  修改当前编辑的节点， 由父组件传过来
+const setCurrentNode = (node:SimpleFlowNode) => {
+  currentNode.value = node;
+  currentNode.value.attributes.fieldsPermission = node.attributes.fieldsPermission || getDefaultFieldsPermission(formFields?.value) 
+  const strCandidateParam = node.attributes?.candidateParam
+  if(strCandidateParam) {
+    candidateParamArray.value = strCandidateParam.split(',').map(item=> +item)
+  }
+  if (currentNode.value.attributes?.candidateStrategy === CandidateStrategy.USER && candidateParamArray.value?.length <= 1) {
+    notAllowedMultiApprovers.value = true
+  } else {
+    notAllowedMultiApprovers.value = false
+  }
+}
+
+defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
+
 const changeCandidateStrategy = () => {
   candidateParamArray.value = []
   currentNode.value.attributes.approveMethod = 1
@@ -330,15 +377,6 @@ const blurEvent = () => {
   showInput.value = false
   currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string
 }
-onMounted(async () => {
-  candidateParamArray.value = currentNode.value.attributes?.candidateParam?.split(',').map(item=> +item)
-  console.log('candidateParamArray.value', candidateParamArray.value)
-  if (currentNode.value.attributes?.candidateStrategy === CandidateStrategy.USER && candidateParamArray.value?.length <= 1) {
-    notAllowedMultiApprovers.value = true
-  } else {
-    notAllowedMultiApprovers.value = false
-  }
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
index 9e553a13..411e7bfa 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -8,7 +8,7 @@
             v-if="showInput"
             type="text"
             class="editable-title-input"
-            @blur="blurEvent($event)"
+            @blur="blurEvent()"
             v-mountedFocus
             v-model="currentNode.name"
             :placeholder="currentNode.name"
@@ -34,11 +34,11 @@
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
       <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
     </div>
+    <!-- 其实只需要一个全局抄送节点配置就行, 不需要多个。点击配置的时候传值.  TODO 后面优化 -->
     <CopyTaskNodeConfig
       v-if="currentNode"
       ref="nodeSetting"
       :flow-node="currentNode"
-      @update:model-value="handleModelValueUpdate"
      />
   </div>
 </template>
@@ -72,7 +72,7 @@ watch(
 // 显示节点名称输入框
 const showInput = ref(false)
 // 节点名称输入框失去焦点
-const blurEvent = (event) => {
+const blurEvent = () => {
   showInput.value = false
   currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string
 }
@@ -83,6 +83,7 @@ const clickEvent = () => {
 const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {
+  nodeSetting.value.setCurrentNode(currentNode.value);
   nodeSetting.value.open()
 }
 
@@ -107,11 +108,6 @@ const copyNode = () => {
   currentNode.value = newCopyNode
   emits('update:modelValue', currentNode.value)
 }
-// 接收抄送人配置组件传过来的事件，并且更新节点 信息
-const handleModelValueUpdate = (updateValue) => {
-  emits('update:modelValue', updateValue)
-}
-
 </script>
 
 <style lang='scss' scoped>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
index b997be09..d25ffc94 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
@@ -108,7 +108,6 @@ const clickEvent = (index: number) => {
 }
 
 const conditionNodeConfig = (nodeId: string) => {
-  console.log("proxy.$refs", proxy.$refs);
   const conditionNode = proxy.$refs[nodeId][0];
   conditionNode.open()
 }
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/StartEventNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/StartEventNode.vue
index 7835c959..a26a4935 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/StartEventNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/StartEventNode.vue
@@ -7,7 +7,7 @@
         <Icon icon="ep:arrow-right-bold" />
       </div>
       <!-- 传递子节点给添加节点组件。会在子节点后面添加节点 -->
-      <node-handler v-if="currentNode" v-model:child-node="currentNode.childNode" />
+      <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
     </div>
   </div>
 </template>
@@ -23,12 +23,20 @@ const props = defineProps({
     default: () => null
   }
 });
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode | undefined]
+}>()
+
 const currentNode = ref<SimpleFlowNode>(props.flowNode);
 
-watch(() => props.flowNode, (newValue) => {  
-  console.log('start node value changed=================>', newValue);
-  currentNode.value = newValue;  
-}); 
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue
+  }
+)
+
 </script>
 <style lang="scss" scoped>
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index 9e7387f5..a27ed53f 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -8,7 +8,7 @@
             v-if="showInput"
             type="text"
             class="editable-title-input"
-            @blur="blurEvent($event)"
+            @blur="blurEvent()"
             v-mountedFocus
             v-model="currentNode.name"
             :placeholder="currentNode.name"
@@ -34,11 +34,11 @@
       <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
     </div>
   </div>
+  <!-- 其实只需要一个全局审批节点配置就行, 不需要多个。点击配置的时候传值.  TODO 后面优化 -->
   <UserTaskNodeConfig
     v-if="currentNode"
     ref="nodeSetting"
     :flow-node="currentNode"
-    @update:model-value="handleModelValueUpdate"
   />
 </template>
 <script setup lang="ts">
@@ -63,8 +63,11 @@ const currentNode = ref<SimpleFlowNode>(props.flowNode)
 const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {
+  // 把当前节点传递给配置组件
+  nodeSetting.value.setCurrentNode(currentNode.value);
   nodeSetting.value.open()
 }
+// 监控节点变化
 watch(
   () => props.flowNode,
   (newValue) => {
@@ -74,7 +77,7 @@ watch(
 // 显示节点名称输入框
 const showInput = ref(false)
 // 节点名称输入框失去焦点
-const blurEvent = (event) => {
+const blurEvent = () => {
   showInput.value = false
   currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string
 }
@@ -82,16 +85,12 @@ const blurEvent = (event) => {
 const clickEvent = () => {
   showInput.value = true
 }
-const handleModelValueUpdate = (updateValue) => {
-  emits('update:modelValue', updateValue)
-  console.log('user task node handleModelValueUpdate', updateValue)
-}
+
 const deleteNode = () => {
-  console.log('the child node is ', currentNode.value.childNode)
   emits('update:modelValue', currentNode.value.childNode)
 }
+
 const copyNode = () => {
-  // const oldChildNode = currentNode.value.childNode
   const newCopyNode: SimpleFlowNode = {
     id: generateUUID(),
     name: currentNode.value.name,
diff --git a/src/components/SimpleProcessDesignerV2/src/utils.ts b/src/components/SimpleProcessDesignerV2/src/utils.ts
index c68635ae..8cc2fb19 100644
--- a/src/components/SimpleProcessDesignerV2/src/utils.ts
+++ b/src/components/SimpleProcessDesignerV2/src/utils.ts
@@ -5,3 +5,19 @@ export const getDefaultConditionNodeName = (index:number, defaultFlow: boolean)
   }
   return '条件' + (index+1)
 }
+
+// 获得默认的表单字段权限.  
+export const getDefaultFieldsPermission = (formFields: string[] | undefined) =>{
+  const defaultFieldsPermission : any[] = [];
+  if(formFields){
+    formFields.forEach((fieldStr: string) => {
+      const { field, title } = JSON.parse(fieldStr)
+      defaultFieldsPermission.push({
+        field,
+        title,
+        permission: '2' // 只读
+      })
+    })
+  }
+  return  defaultFieldsPermission;
+}
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index 8a35345a..3d633b6d 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -517,6 +517,7 @@
     display: flex;
     height: 24px;
     line-height: 24px;
+    font-size: 16px;
     cursor: pointer;
     align-items: center;
   }
@@ -545,7 +546,82 @@
   }
 }
 
+// 表单字段权限
+.field-setting-pane {
+  display: flex;
+  flex-direction: column;
+  padding: 16px 0;
+  font-size: 14px;
 
+  .field-setting-desc {
+    padding-right: 8px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .field-permit-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 45px;
+    padding-left: 12px;
+    line-height: 45px;
+    background-color: #f8fafc0a;
+    border: 1px solid #1f38581a;
+   
+    .first-title {
+      text-align: left !important;
+    }
+
+    .other-titles {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .setting-title-label {
+      display: inline-block;
+      width: 110px;
+      padding: 5px 0;
+      font-size: 13px;
+      font-weight: 700;
+      color: #000;
+      text-align: center;
+    }
+    
+  }
+  
+  .field-setting-item {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    height: 38px;
+    padding-left: 12px;
+    border: 1px solid #1f38581a;
+    border-top: 0;
+
+    .field-setting-item-label {
+      display: inline-block;
+      width: 110px;
+      min-height: 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: text;
+    }
+
+    .field-setting-item-group {
+      display: flex;
+      justify-content: space-between;
+
+      .item-radio-wrap {
+        display: inline-block;
+        width: 110px;
+        text-align: center;
+      }
+    }
+  }
+}
 
 // 节点连线气泡卡片样式
 .handler-item-wrapper {

From 6cf69f04ab4c5477bde4be0e83a82bb3ffd1eb3b Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Mon, 13 May 2024 09:13:23 +0800
Subject: [PATCH 20/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=EF=BC=8C=E6=96=B0=E5=A2=9E=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E8=A7=84=E5=88=99=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/consts.ts     |  73 +++-
 .../src/nodes-config/ConditionNodeConfig.vue  | 322 ++++++++++++++++--
 2 files changed, 363 insertions(+), 32 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 69afb993..e257f726 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -47,7 +47,21 @@ export enum NodeType {
   INCLUSIVE_NODE_JOIN = 8
 }
 
-// 候选人策略 （用于审批节点。抄送节点
+// 条件配置类型 （ 用于条件节点配置 ）
+export enum ConditionConfigType  {
+
+   /**
+   * 条件表达式
+   */
+  EXPRESSION = 1,
+
+   /**
+   * 条件规则
+   */
+  RULE = 2
+}
+
+// 候选人策略 （ 用于审批节点。抄送节点 )
 export enum CandidateStrategy {
   /**
    * 指定角色
@@ -96,6 +110,31 @@ export type SimpleFlowNode = {
   conditionNodes?: SimpleFlowNode[]
 }
 
+// 条件组
+export type ConditionGroup =  {
+  // 条件组的逻辑关系是否为且
+  and : boolean,
+  // 条件数组
+  conditions: Condition[]
+}
+
+// 条件
+export type Condition = {
+  // 条件规则的逻辑关系是否为且
+  and : boolean,
+  rules: ConditionRule[]
+}
+
+// 条件规则
+export type ConditionRule = {
+  type : number,
+  opName: string,
+  opCode: string,
+  leftSide: string,
+  rightSide: string
+}
+
+
 export const NODE_DEFAULT_TEXT = new Map<number,string>()
 NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置审批人')
 NODE_DEFAULT_TEXT.set(NodeType.COPY_TASK_NODE, '请配置抄送人')
@@ -115,5 +154,35 @@ export const APPROVE_METHODS: DictDataVO [] = [
 ]
 
 export const CONDITION_CONFIG_TYPES: DictDataVO [] = [
-  { label: '自定义条件表达式', value: 1 }
+  { label: '条件表达式', value: 1 },
+  { label: '条件规则', value: 2 }
+]
+
+// 比较运算符
+export const COMPARISON_OPERATORS : DictDataVO = [
+  {
+    value: '==',
+    label: '等于',
+  },
+  {
+    value: '!=',
+    label: '不等于',
+  }
+  // 待完善
+  // {
+  //   value: '>',
+  //   label: '大于',
+  // },
+  // {
+  //   value: '>=',
+  //   label: '大于等于',
+  // },
+  // {
+  //   value: '<',
+  //   label: '小于',
+  // },
+  // {
+  //   value: '<=',
+  //   label: '小于等于',
+  // }
 ]
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
index e539604a..424268cc 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
@@ -3,8 +3,8 @@
     :append-to-body="true"
     v-model="settingVisible"
     :show-close="false"
-    :size="550"
-    :before-close="saveConfig"
+    :size="588"
+    :before-close="handleClose"
    >
    <template #header>
       <div class="config-header">
@@ -25,14 +25,18 @@
     <div> 
       <div class="mb-3 text-size-sm" v-if="currentNode.attributes.defaultFlow">其它条件不满足进入此分支（该分支不可编辑和删除）</div>
       <div v-else>
-          <el-form label-position="top">
-            <el-form-item label="条件类型" prop="conditionType">
+          <el-form
+            ref="formRef"
+            :model="currentNode.attributes"
+            :rules="formRules"
+            label-position="top">
+            <el-form-item label="配置方式" prop="conditionType">
               <el-radio-group
                 v-model="currentNode.attributes.conditionType"
                 @change="changeConditionType"
               >
                 <el-radio
-                  v-for="(dict, index) in CONDITION_CONFIG_TYPES"
+                  v-for="(dict, index) in conditionConfigTypes"
                   :key="index"
                   :value="dict.value"
                   :label="dict.value"
@@ -42,25 +46,97 @@
               </el-radio-group>
             </el-form-item>
               
-            <el-form-item
-              v-if="currentNode.attributes.conditionType === 1"
-              label="条件表达式"
-              prop="conditionExpression"
-            >
-              <el-input
-                type="textarea"
-                v-model="currentNode.attributes.conditionExpression"
-                clearable
-                style="width: 100%"
-              />
-            </el-form-item>
-            <!-- <el-form-item
-              v-if="currentNode.attributes.conditionType === 1"
+          <el-form-item
+            v-if="currentNode.attributes.conditionType === 1"
+            label="条件表达式"
+            prop="conditionExpression"
+          >
+            <el-input
+              type="textarea"
+              v-model="currentNode.attributes.conditionExpression"
+              clearable
+              style="width: 100%"
+            />
+          </el-form-item>
+           <el-form-item
+              v-if="currentNode.attributes.conditionType === 2"
               label="条件规则"
-              prop="conditionExpression"
             >
-              <span class="text-red-400">待实现</span>
-            </el-form-item> -->
+              <div class="condition-group-tool">
+                <div class="flex items-center">
+                  <div class="mr-4">条件组关系</div>
+                  <el-switch
+                      v-model="conditionGroups.and"
+                      inline-prompt
+                      active-text="且"
+                      inactive-text="或"/>
+                </div>
+                <!-- <div class="flex items-center"> 
+                  <el-button size="small" type="primary">添加条件组</el-button>
+                </div>  -->
+              </div>
+              <el-space direction="vertical"  :spacer="conditionGroups.and ? '且' : '或' ">
+                <el-card 
+                    class="condition-group"
+                    style="width: 530px"
+                    v-for="(condition, cIdx) in conditionGroups.conditions" 
+                    :key="cIdx">
+                  <div class="condition-group-delete" v-if="conditionGroups.conditions.length > 1">
+                    <Icon color="#0089ff"  icon="ep:circle-close-filled"  :size="18"  @click="deleteConditionGroup(cIdx)"/>
+                  </div>
+                  <template #header>
+                    <div class="flex items-center justify-between">
+                      <div>条件组</div>
+                      <div class="flex">
+                        <div class="mr-4">规则关系</div>
+                        <el-switch
+                            v-model="condition.and"
+                            inline-prompt
+                            active-text="且"
+                            inactive-text="或"/>
+                      </div>
+                    </div>
+                  </template>
+                 
+                  <div class="flex pt-2" v-for="(rule, rIdx) in condition.rules" :key="rIdx">
+                    <div class="mr-2">
+                      <el-select  style="width: 160px" v-model="rule.leftSide">
+                        <el-option
+                          v-for="(item, index) in fieldsInfo"
+                          :key="index"
+                          :label="item.title"
+                          :value="item.field"
+                        />
+                      </el-select>
+                   </div>
+                   <div class="mr-2">
+                      <el-select v-model="rule.opCode" style="width: 100px">
+                        <el-option
+                          v-for="item in COMPARISON_OPERATORS"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </div>
+                    <div class="mr-2">
+                      <el-input v-model="rule.rightSide" style="width: 160px" />
+                    </div>
+                    <div class="mr-1 flex items-center" v-if="condition.rules.length > 1">
+                      <Icon icon="ep:delete" :size="18" @click="deleteConditionRule(condition,rIdx)"/>
+                    </div>
+                    <div class="flex items-center">
+                      <Icon icon="ep:plus" :size="18" @click="addConditionRule(condition,rIdx)"/>
+                    </div>
+                  </div>
+            
+                </el-card>
+              </el-space>
+              <div title="添加条件组" class="mt-4 cursor-pointer">
+                <Icon color="#0089ff"  icon="ep:plus"  :size="24"  @click="addConditionGroup"/>
+              </div>
+            </el-form-item>
+            
           </el-form>
       </div>    
     </div>
@@ -74,11 +150,27 @@
   </el-drawer>
 </template>
 <script setup lang="ts">
-import { SimpleFlowNode, CONDITION_CONFIG_TYPES } from '../consts'
+import { SimpleFlowNode, CONDITION_CONFIG_TYPES, ConditionConfigType } from '../consts'
 import { getDefaultConditionNodeName } from '../utils';
+import { COMPARISON_OPERATORS, ConditionGroup, Condition, ConditionRule } from '../consts';
+const message = useMessage() // 消息弹窗
 defineOptions({
-  name: 'ConditionNode'
+  name: 'ConditionNodeConfig'
 })
+const formFields = inject<Ref<string[]>>('formFields')
+const formType = inject<Ref<number>>('formType') // 表单类型
+
+const conditionConfigTypes = computed( ()=> {
+  return CONDITION_CONFIG_TYPES.filter(item => {
+    // 业务表单暂时去掉条件规则 选项
+    if (formType?.value !== 10 ){
+      return item.value === 1
+    } else {
+      return true;
+    }
+  });
+})
+
 const props = defineProps({
   conditionNode: {
     type: Object as () => SimpleFlowNode,
@@ -91,6 +183,12 @@ const props = defineProps({
 })
 const settingVisible = ref(false)
 const open = () => {
+  getFieldsInfo()
+  if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE) {
+     if (currentNode.value.attributes.conditionGroups) {
+        conditionGroups.value = currentNode.value.attributes.conditionGroups
+     }
+  }
   settingVisible.value = true
 }
 
@@ -117,31 +215,195 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 const closeDrawer = () => {
   settingVisible.value = false
 }
+
+const handleClose = async (done: (cancel?: boolean) => void) => {
+  if( await saveConfig()){
+    done(false); // 传入 false 阻止关闭  
+  }else {
+    done();
+  }
+}
+// 表单校验规则
+const formRules = reactive({
+  conditionType: [{ required: true, message: '配置方式不能为空', trigger: 'blur' }],
+  conditionExpression: [{ required: true, message: '条件表达式不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
 // 保存配置
-const saveConfig = () => {
+const saveConfig = async () => {
   if (!currentNode.value.attributes.defaultFlow) {
-    currentNode.value.showText = getShowText();
+      // 校验表单
+    if (!formRef) return false
+    const valid = await formRef.value.validate()
+    if (!valid) return false
+    
+    const showText = getShowText();
+    if(!showText){
+      return false;
+    }
+    currentNode.value.showText = showText
+    if(currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION ){
+      currentNode.value.attributes.conditionGroups = undefined 
+    }
+    if(currentNode.value.attributes.conditionType === ConditionConfigType.RULE ){
+      currentNode.value.attributes.conditionExpression = undefined
+      currentNode.value.attributes.conditionGroups = conditionGroups.value 
+    }
+    
   }
   settingVisible.value = false
+  return true;
 }
 const getShowText = () : string => {
   let showText ='';
-  // if (currentNode.value.attributes.conditionType === 1) {
-  //   showText = '待实现'
-  // } 
-  if (currentNode.value.attributes.conditionType === 1) {
+  if (currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION) {
     if (currentNode.value.attributes.conditionExpression) {
       showText = `表达式：${currentNode.value.attributes.conditionExpression}`
     }
   }
+  if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE ) {
+    // 条件组是否为与关系
+    const groupAnd = conditionGroups.value.and;
+    let warningMesg : undefined | string = undefined
+    const conditionGroup = conditionGroups.value.conditions.map( item => {
+      return  '(' + item.rules.map( rule => {
+          if ( rule.leftSide  && rule.rightSide) {
+            return getFieldTitle(rule.leftSide) + " " + rule.opName + " " + rule.rightSide 
+          }else {
+            // 又一条规则不完善。提示错误
+            warningMesg = '请完善条件规则'
+            return ''
+          }
+        }).join(item.and ? ' 且 ' : ' 或 ' ) + ' ) '
+      }
+    )
+    if (warningMesg) {
+      message.warning(warningMesg);
+      showText = '';
+    } else {
+      showText = conditionGroup.join( groupAnd ?  ' 且 ' : ' 或 ' );
+    }
+   
+  } 
   return showText
 }
+
+
+
 // 改变条件配置方式
 const changeConditionType = () => {
 
 }
+
+const conditionGroups = ref<ConditionGroup>({
+  and : true,
+  conditions: [
+    {
+      and : true,
+      rules: [
+        {
+          type: 1,
+          opName: "等于",
+          opCode: "==",
+          leftSide: "",
+          rightSide: ""
+        }
+      ]
+    }
+  ]
+})
+// 添加条件组
+const addConditionGroup = () => {
+  const condition = {
+    and : true,
+    rules: [
+      {
+        type: 1,
+        opName: "等于",
+        opCode: "==",
+        leftSide: "",
+        rightSide: ""
+      }
+    ]
+  }
+  conditionGroups.value.conditions.push(condition)
+}
+// 删除条件组
+const deleteConditionGroup = (idx:number) => {
+  conditionGroups.value.conditions.splice(idx, 1)
+}
+
+// 添加条件规则
+const addConditionRule = (condition:Condition, idx:number) => {
+  const rule: ConditionRule = {
+    type: 1,
+    opName: "等于",
+    opCode: "==",
+    leftSide: "",
+    rightSide: ""
+  }
+  condition.rules.splice(idx+1, 0, rule)
+}
+
+const deleteConditionRule = (condition:Condition, idx:number) => {
+  condition.rules.splice(idx, 1)
+}
+
+const fieldsInfo : any[] = [];
+
+const getFieldsInfo = () => {
+  if(formFields){
+    formFields.value.forEach((fieldStr: string) => {
+      const { field, title, type } = JSON.parse(fieldStr)
+      fieldsInfo.push({
+        field,
+        title,
+        type
+      })
+    })
+  }
+}
+const getFieldTitle = (field:string) : string => {
+  const item = fieldsInfo.find( item => item.field === field)
+  return item?.title;
+}
+
 </script>
 
 <style lang="scss" scoped>
 
+.condition-group-tool {
+  display: flex;
+  justify-content: space-between;
+  width: 500px;
+  margin-bottom: 20px;
+}
+
+.condition-group {
+  position: relative;
+
+  &:hover {
+    border-color: #0089ff;
+
+    .condition-group-delete {
+      opacity: 1;
+    }
+  }
+
+  .condition-group-delete {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    cursor: pointer;
+    opacity: 0;
+  }
+}
+
+::v-deep(.el-card__header) {
+  padding: 8px var(--el-card-padding);
+  border-bottom: 1px solid var(--el-card-border-color);
+  box-sizing: border-box;
+}
 </style>

From e1fc9039b2641fa33e99d76d7e67ea3ee819515d Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Mon, 13 May 2024 09:32:32 +0800
Subject: [PATCH 21/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20bug=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/nodes-config/ConditionNodeConfig.vue                 | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
index 424268cc..6cc5482e 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
@@ -162,7 +162,7 @@ const formType = inject<Ref<number>>('formType') // 表单类型
 
 const conditionConfigTypes = computed( ()=> {
   return CONDITION_CONFIG_TYPES.filter(item => {
-    // 业务表单暂时去掉条件规则 选项
+    // 业务表单暂时去掉条件规则选项
     if (formType?.value !== 10 ){
       return item.value === 1
     } else {
@@ -350,9 +350,10 @@ const deleteConditionRule = (condition:Condition, idx:number) => {
   condition.rules.splice(idx, 1)
 }
 
-const fieldsInfo : any[] = [];
+let fieldsInfo : any[] = [];
 
 const getFieldsInfo = () => {
+  fieldsInfo = [];
   if(formFields){
     formFields.value.forEach((fieldStr: string) => {
       const { field, title, type } = JSON.parse(fieldStr)

From 4f24141689739daddd2dd07d4a3395e218e66dad Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Mon, 13 May 2024 20:54:14 +0800
Subject: [PATCH 22/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E8=A7=84=E5=88=99=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/consts.ts     | 33 +++++++++----------
 .../src/nodes-config/ConditionNodeConfig.vue  | 27 ++++++++-------
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index e257f726..db8cca28 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -167,22 +167,21 @@ export const COMPARISON_OPERATORS : DictDataVO = [
   {
     value: '!=',
     label: '不等于',
+  },
+  {
+    value: '>',
+    label: '大于',
+  },
+  {
+    value: '>=',
+    label: '大于等于',
+  },
+  {
+    value: '<',
+    label: '小于',
+  },
+  {
+    value: '<=',
+    label: '小于等于',
   }
-  // 待完善
-  // {
-  //   value: '>',
-  //   label: '大于',
-  // },
-  // {
-  //   value: '>=',
-  //   label: '大于等于',
-  // },
-  // {
-  //   value: '<',
-  //   label: '小于',
-  // },
-  // {
-  //   value: '<=',
-  //   label: '小于等于',
-  // }
 ]
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
index 6cc5482e..679fdbfe 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
@@ -4,7 +4,7 @@
     v-model="settingVisible"
     :show-close="false"
     :size="588"
-    :before-close="handleClose"
+    :before-close=" handleClose"
    >
    <template #header>
       <div class="config-header">
@@ -216,12 +216,13 @@ const closeDrawer = () => {
   settingVisible.value = false
 }
 
-const handleClose = async (done: (cancel?: boolean) => void) => {
-  if( await saveConfig()){
-    done(false); // 传入 false 阻止关闭  
-  }else {
-    done();
-  }
+const handleClose = async  (done: (cancel?: boolean) => void) => {
+  const isSuccess = await saveConfig();
+  if ( !isSuccess) {
+      done(true); // 传入 true 阻止关闭  
+    } else {
+      done();
+    }
 }
 // 表单校验规则
 const formRules = reactive({
@@ -231,13 +232,12 @@ const formRules = reactive({
 const formRef = ref() // 表单 Ref
 
 // 保存配置
-const saveConfig = async () => {
+const saveConfig =  async () => {
   if (!currentNode.value.attributes.defaultFlow) {
-      // 校验表单
+    // 校验表单
     if (!formRef) return false
     const valid = await formRef.value.validate()
     if (!valid) return false
-    
     const showText = getShowText();
     if(!showText){
       return false;
@@ -269,7 +269,7 @@ const getShowText = () : string => {
     const conditionGroup = conditionGroups.value.conditions.map( item => {
       return  '(' + item.rules.map( rule => {
           if ( rule.leftSide  && rule.rightSide) {
-            return getFieldTitle(rule.leftSide) + " " + rule.opName + " " + rule.rightSide 
+            return getFieldTitle(rule.leftSide) + " " + getOpName(rule.opCode) + " " + rule.rightSide 
           }else {
             // 又一条规则不完善。提示错误
             warningMesg = '请完善条件规则'
@@ -370,6 +370,11 @@ const getFieldTitle = (field:string) : string => {
   return item?.title;
 }
 
+const getOpName = (opCode: string) : string => {
+  const opName = COMPARISON_OPERATORS.find( item => item.value === opCode)
+  return opName?.label
+}
+
 </script>
 
 <style lang="scss" scoped>

From f42c6d83759570f31ff851accf36cae3eb63941c Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Mon, 20 May 2024 21:32:12 +0800
Subject: [PATCH 23/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E5=AE=A1=E6=89=B9?=
 =?UTF-8?q?=E4=BA=BA=E8=AE=BE=E7=BD=AE=E6=96=B0=E5=A2=9E=E5=8F=91=E8=B5=B7?=
 =?UTF-8?q?=E4=BA=BA=E8=87=AA=E5=B7=B1=E7=AD=96=E7=95=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |  4 +--
 .../SimpleProcessDesignerV2/src/consts.ts     | 26 +++++++++++++++++++
 .../src/nodes-config/CopyTaskNodeConfig.vue   |  4 +--
 .../src/nodes-config/UserTaskNodeConfig.vue   | 19 +++++++++-----
 4 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index efd7ac41..ebe70c3b 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-import { SimpleFlowNode, NodeType, NODE_DEFAULT_NAME, CandidateStrategy } from './consts'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_NAME, ApproveMethodType, CandidateStrategy } from './consts'
 import { generateUUID } from '@/utils'
 defineOptions({
   name: 'NodeHandler'
@@ -64,7 +64,7 @@ const addNode = (type: number) => {
       type: NodeType.USER_TASK_NODE,
       // 审批节点配置
       attributes: {
-        approveMethod: 1,
+        approveMethod: ApproveMethodType.SINGLE_PERSON_APPROVE,
         candidateStrategy: CandidateStrategy.USER,
         candidateParam: undefined,
         fieldsPermission: undefined,
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index db8cca28..befcc32e 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -60,6 +60,28 @@ export enum ConditionConfigType  {
    */
   RULE = 2
 }
+// 审批方式类型 （ 用于审批节点 ）
+export enum ApproveMethodType  {
+
+  /**
+  * 单人审批
+  */
+  SINGLE_PERSON_APPROVE = 1,
+
+  /**
+  * 多人会签(需所有审批人同意)
+  */
+  ALL_APPROVE = 2,
+  /**
+  * 多人或签(一名审批人同意即可)
+  */
+  ANY_OF_APPROVE = 3,
+   /**
+  * 多人依次审批
+  */
+  SEQUENTIAL_APPROVE = 4
+
+}
 
 // 候选人策略 （ 用于审批节点。抄送节点 )
 export enum CandidateStrategy {
@@ -87,6 +109,10 @@ export enum CandidateStrategy {
    * 发起人自选
    */
   START_USER_SELECT = 35,
+   /**
+   * 发起人自己
+   */
+  START_USER = 36,
    /**
    * 指定用户组
    */
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index 3ba56596..436cdba9 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -218,10 +218,10 @@ const deptTreeOptions = inject('deptTree') // 部门树
 const formType = inject('formType') // 表单类型
 const formFields = inject<Ref<string[]>>('formFields')
 
-// 抄送人策略， 去掉发起人自选
+// 抄送人策略， 去掉发起人自选 和 发起人自己
 const copyUserStrategies = computed( ()=> {
   return getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)
-            .filter(item => item.value !== CandidateStrategy.START_USER_SELECT);
+            .filter(item => item.value !== CandidateStrategy.START_USER_SELECT && item.value !== CandidateStrategy.START_USER );
 })
 
 // 选中的参数
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index d549ebea..cabd6a88 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -149,7 +149,7 @@
                     <el-radio
                       :value="item.value"
                       :label="item.value"
-                      :disabled="item.value !== 1 && notAllowedMultiApprovers"
+                      :disabled="item.value !== ApproveMethodType.SINGLE_PERSON_APPROVE && notAllowedMultiApprovers"
                     >
                       {{ item.label }}
                     </el-radio>
@@ -205,7 +205,7 @@
 </template>
 
 <script setup lang="ts">
-import { SimpleFlowNode, APPROVE_METHODS, CandidateStrategy, NodeType, NODE_DEFAULT_NAME } from '../consts'
+import { SimpleFlowNode, APPROVE_METHODS, CandidateStrategy, NodeType, ApproveMethodType, NODE_DEFAULT_NAME } from '../consts'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { getDefaultFieldsPermission } from '../utils'
 import { defaultProps } from '@/utils/tree'
@@ -261,7 +261,7 @@ const getShowText = () : string => {
     }
   }
   // 指定角色
-  if (currentNode.value.attributes.candidateStrategy === 10) {
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.ROLE) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
       roleOptions?.value.forEach((item) => {
@@ -319,6 +319,10 @@ const getShowText = () : string => {
   if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.START_USER_SELECT ) {
     showText = `发起人自选`
   }
+  // 发起人自己
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.START_USER ) {
+    showText = `发起人自己`
+  }
 
    // 流程表达式
   if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.EXPRESSION) {
@@ -339,7 +343,7 @@ const setCurrentNode = (node:SimpleFlowNode) => {
   if(strCandidateParam) {
     candidateParamArray.value = strCandidateParam.split(',').map(item=> +item)
   }
-  if (currentNode.value.attributes?.candidateStrategy === CandidateStrategy.USER && candidateParamArray.value?.length <= 1) {
+  if (currentNode.value.attributes?.candidateStrategy === CandidateStrategy.START_USER) {
     notAllowedMultiApprovers.value = true
   } else {
     notAllowedMultiApprovers.value = false
@@ -350,8 +354,9 @@ defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
 
 const changeCandidateStrategy = () => {
   candidateParamArray.value = []
-  currentNode.value.attributes.approveMethod = 1
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER) {
+  currentNode.value.attributes.approveMethod = ApproveMethodType.SINGLE_PERSON_APPROVE
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.START_USER 
+        || currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER ) {
     notAllowedMultiApprovers.value = true
   } else {
     notAllowedMultiApprovers.value = false
@@ -360,7 +365,7 @@ const changeCandidateStrategy = () => {
 
 const changedCandidateUsers = () => {
   if (candidateParamArray.value?.length <= 1 && currentNode.value.attributes?.candidateStrategy === CandidateStrategy.USER) {
-    currentNode.value.attributes.approveMethod = 1;
+    currentNode.value.attributes.approveMethod = ApproveMethodType.SINGLE_PERSON_APPROVE
     notAllowedMultiApprovers.value = true
   } else {
     notAllowedMultiApprovers.value = false

From 142b0f7203068db918521e07b5f523d2ad4b40c6 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Thu, 23 May 2024 22:43:22 +0800
Subject: [PATCH 24/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E5=AE=A1=E6=89=B9?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E8=B6=85=E6=97=B6=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |   4 +
 .../SimpleProcessDesignerV2/src/consts.ts     |  33 +++
 .../src/nodes-config/UserTaskNodeConfig.vue   | 225 +++++++++++++++---
 .../src/nodes/CopyTaskNode.vue                |   1 -
 .../src/nodes/UserTaskNode.vue                |   1 -
 5 files changed, 227 insertions(+), 37 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index ebe70c3b..d13b7365 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -68,6 +68,10 @@ const addNode = (type: number) => {
         candidateStrategy: CandidateStrategy.USER,
         candidateParam: undefined,
         fieldsPermission: undefined,
+         // 超时处理
+        timeoutHandler: {
+          enable: false
+        }
       },
       childNode: props.childNode
     }
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index befcc32e..32a9b658 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -46,6 +46,21 @@ export enum NodeType {
    */
   INCLUSIVE_NODE_JOIN = 8
 }
+// 时间单位枚举
+export enum TimeUnitType {
+  /**
+   * 分钟
+   */
+  MINUTE = 1,
+  /**
+   * 小时
+   */
+  HOUR = 2,
+  /**
+   * 天
+   */
+  DAY = 3
+}
 
 // 条件配置类型 （ 用于条件节点配置 ）
 export enum ConditionConfigType  {
@@ -171,6 +186,11 @@ NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人')
 NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人')
 NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
 
+export const TIME_UNIT_MAP = new Map<number,string>()
+NODE_DEFAULT_NAME.set(1, 'M')
+NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人')
+NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
+
 
 export const APPROVE_METHODS: DictDataVO [] = [
   { label: '单人审批', value: 1 },
@@ -184,6 +204,19 @@ export const CONDITION_CONFIG_TYPES: DictDataVO [] = [
   { label: '条件规则', value: 2 }
 ]
 
+// 时间单位类型
+export const TIME_UNIT_TYPES: DictDataVO [] = [
+  { label: '分钟', value: TimeUnitType.MINUTE },
+  { label: '小时', value: TimeUnitType.HOUR },
+  { label: '天', value: TimeUnitType.DAY },
+]
+// 超时处理执行动作类型
+export const TIMEOUT_HANDLER_ACTION_TYPES: DictDataVO [] = [
+  { label: '自动提醒', value: 1 },
+  { label: '自动同意', value: 2 },
+  { label: '自动拒绝', value: 3 },
+]
+
 // 比较运算符
 export const COMPARISON_OPERATORS : DictDataVO = [
   {
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index cabd6a88..49d22874 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -17,9 +17,12 @@
           v-mountedFocus
           v-model="currentNode.name"
           :placeholder="currentNode.name"
-          />
-        <div v-else class="node-name" >{{ currentNode.name }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"/></div>
-        
+        />
+        <div v-else class="node-name"
+          >{{ currentNode.name }}
+          <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"
+        /></div>
+
         <div class="divide-line"></div>
       </div>
     </template>
@@ -149,7 +152,10 @@
                     <el-radio
                       :value="item.value"
                       :label="item.value"
-                      :disabled="item.value !== ApproveMethodType.SINGLE_PERSON_APPROVE && notAllowedMultiApprovers"
+                      :disabled="
+                        item.value !== ApproveMethodType.SINGLE_PERSON_APPROVE &&
+                        notAllowedMultiApprovers
+                      "
                     >
                       {{ item.label }}
                     </el-radio>
@@ -157,16 +163,79 @@
                 </div>
               </el-radio-group>
             </el-form-item>
+
+            <el-form-item label="超时处理" prop="timeoutHandlerEnable">
+              <el-switch
+                v-model="currentNode.attributes.timeoutHandler.enable"
+                active-text="开启"
+                inactive-text="关闭"
+                @change="timeoutHandlerChange"
+              />
+            </el-form-item>
+            <el-form-item
+              label="执行动作"
+              prop="timeoutHandlerAction"
+              v-if="currentNode.attributes.timeoutHandler.enable"
+            >
+              <el-radio-group v-model="currentNode.attributes.timeoutHandler.action">
+                <el-radio-button
+                  v-for="item in TIMEOUT_HANDLER_ACTION_TYPES"
+                  :key="item.value"
+                  :value="item.value"
+                  :label="item.label"
+                />
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              label="超时时间设置"
+              prop="timeoutHandlerTimeDuration"
+              v-if="currentNode.attributes.timeoutHandler.enable"
+            >
+              <span class="mr-2">当超过</span>
+              <el-input-number
+                class="mr-2"
+                :style="{ width: '100px' }"
+                v-model="timeDuration"
+                :min="1"
+                controls-position="right"
+              />
+              <el-select
+                v-model="timeUnit"
+                class="mr-2"
+                :style="{ width: '100px' }"
+                @change="timeUnitChange"
+              >
+                <el-option
+                  v-for="item in TIME_UNIT_TYPES"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+              未处理
+            </el-form-item>
+            <el-form-item
+              label="最大提醒次数"
+              prop="timeoutHandlerMaxRemindCount"
+              v-if="
+                currentNode.attributes.timeoutHandler.enable &&
+                currentNode.attributes.timeoutHandler.action === 1
+              "
+            >
+              <el-input-number
+                v-model="currentNode.attributes.timeoutHandler.maxRemindCount"
+                :min="1"
+                :max="10"
+              />
+            </el-form-item>
           </el-form>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="表单字段权限" v-if ="formType === 10">
+      <el-tab-pane label="表单字段权限" v-if="formType === 10">
         <div class="field-setting-pane">
           <div class="field-setting-desc">字段权限</div>
           <div class="field-permit-title">
-            <div class="setting-title-label first-title">
-              字段名称
-            </div>
+            <div class="setting-title-label first-title"> 字段名称 </div>
             <div class="other-titles">
               <span class="setting-title-label">可编辑</span>
               <span class="setting-title-label">只读</span>
@@ -205,7 +274,17 @@
 </template>
 
 <script setup lang="ts">
-import { SimpleFlowNode, APPROVE_METHODS, CandidateStrategy, NodeType, ApproveMethodType, NODE_DEFAULT_NAME } from '../consts'
+import {
+  SimpleFlowNode,
+  APPROVE_METHODS,
+  CandidateStrategy,
+  NodeType,
+  ApproveMethodType,
+  TimeUnitType,
+  TIMEOUT_HANDLER_ACTION_TYPES,
+  TIME_UNIT_TYPES,
+  NODE_DEFAULT_NAME
+} from '../consts'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { getDefaultFieldsPermission } from '../utils'
 import { defaultProps } from '@/utils/tree'
@@ -226,12 +305,12 @@ const props = defineProps({
 })
 
 const notAllowedMultiApprovers = ref(false)
-const currentNode = ref<SimpleFlowNode>(props.flowNode);
+const currentNode = ref<SimpleFlowNode>(props.flowNode)
 const settingVisible = ref(false)
 const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') // 角色列表
 const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
 const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // 用户列表
-const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList')  // 部门列表
+const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList') // 部门列表
 const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // 用户组列表
 const deptTreeOptions = inject('deptTree') // 部门树
 const formType = inject('formType') // 表单类型
@@ -243,10 +322,13 @@ const closeDrawer = () => {
 }
 const saveConfig = () => {
   currentNode.value.attributes.candidateParam = candidateParamArray.value?.join(',')
+  if (currentNode.value.attributes.timeoutHandler.enable) {
+    currentNode.value.attributes.timeoutHandler.timeDuration = isoTimeDuration.value
+  }
   currentNode.value.showText = getShowText()
   settingVisible.value = false
 }
-const getShowText = () : string => {
+const getShowText = (): string => {
   let showText = ''
   // 指定成员
   if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER) {
@@ -272,9 +354,11 @@ const getShowText = () : string => {
       showText = `指定角色：${candidateNames.join(',')}`
     }
   }
-   // 指定部门
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_MEMBER 
-      || currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_LEADER ) {
+  // 指定部门
+  if (
+    currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
+    currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_LEADER
+  ) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
       deptOptions?.value.forEach((item) => {
@@ -282,7 +366,7 @@ const getShowText = () : string => {
           candidateNames.push(item.name)
         }
       })
-      if(currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_MEMBER){
+      if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_MEMBER) {
         showText = `部门成员：${candidateNames.join(',')}`
       } else {
         showText = `部门的负责人：${candidateNames.join(',')}`
@@ -290,8 +374,8 @@ const getShowText = () : string => {
     }
   }
 
-   // 指定岗位
-   if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.POST) {
+  // 指定岗位
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.POST) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
       postOptions?.value.forEach((item) => {
@@ -302,7 +386,7 @@ const getShowText = () : string => {
       showText = `指定岗位: ${candidateNames.join(',')}`
     }
   }
-   // 指定用户组
+  // 指定用户组
   if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER_GROUP) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
@@ -316,38 +400,49 @@ const getShowText = () : string => {
   }
 
   // 发起人自选
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.START_USER_SELECT ) {
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.START_USER_SELECT) {
     showText = `发起人自选`
   }
   // 发起人自己
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.START_USER ) {
+  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.START_USER) {
     showText = `发起人自己`
   }
 
-   // 流程表达式
+  // 流程表达式
   if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.EXPRESSION) {
     if (candidateParamArray.value?.length > 0) {
       showText = `流程表达式：${candidateParamArray.value[0]}`
     }
   }
-   return showText
+  return showText
 }
 const open = () => {
   settingVisible.value = true
 }
 //  修改当前编辑的节点， 由父组件传过来
-const setCurrentNode = (node:SimpleFlowNode) => {
-  currentNode.value = node;
-  currentNode.value.attributes.fieldsPermission = node.attributes.fieldsPermission || getDefaultFieldsPermission(formFields?.value) 
+const setCurrentNode = (node: SimpleFlowNode) => {
+  currentNode.value = node
+  currentNode.value.attributes.fieldsPermission =
+    node.attributes.fieldsPermission || getDefaultFieldsPermission(formFields?.value)
   const strCandidateParam = node.attributes?.candidateParam
-  if(strCandidateParam) {
-    candidateParamArray.value = strCandidateParam.split(',').map(item=> +item)
+  if (strCandidateParam) {
+    candidateParamArray.value = strCandidateParam.split(',').map((item) => +item)
   }
   if (currentNode.value.attributes?.candidateStrategy === CandidateStrategy.START_USER) {
     notAllowedMultiApprovers.value = true
   } else {
     notAllowedMultiApprovers.value = false
   }
+  if (
+    currentNode.value.attributes?.timeoutHandler?.enable &&
+    currentNode.value.attributes?.timeoutHandler?.timeDuration
+  ) {
+    const strTimeDuration = currentNode.value.attributes.timeoutHandler.timeDuration
+    let parseTime = strTimeDuration.slice(2, strTimeDuration.length - 1)
+    let parseTimeUnit = strTimeDuration.slice(strTimeDuration.length - 1)
+    timeDuration.value = parseInt(parseTime)
+    timeUnit.value = convertTimeUnit(parseTimeUnit)
+  }
 }
 
 defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
@@ -355,8 +450,10 @@ defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
 const changeCandidateStrategy = () => {
   candidateParamArray.value = []
   currentNode.value.attributes.approveMethod = ApproveMethodType.SINGLE_PERSON_APPROVE
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.START_USER 
-        || currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER ) {
+  if (
+    currentNode.value.attributes.candidateStrategy === CandidateStrategy.START_USER ||
+    currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER
+  ) {
     notAllowedMultiApprovers.value = true
   } else {
     notAllowedMultiApprovers.value = false
@@ -364,7 +461,10 @@ const changeCandidateStrategy = () => {
 }
 
 const changedCandidateUsers = () => {
-  if (candidateParamArray.value?.length <= 1 && currentNode.value.attributes?.candidateStrategy === CandidateStrategy.USER) {
+  if (
+    candidateParamArray.value?.length <= 1 &&
+    currentNode.value.attributes?.candidateStrategy === CandidateStrategy.USER
+  ) {
     currentNode.value.attributes.approveMethod = ApproveMethodType.SINGLE_PERSON_APPROVE
     notAllowedMultiApprovers.value = true
   } else {
@@ -375,14 +475,69 @@ const changedCandidateUsers = () => {
 const showInput = ref(false)
 
 const clickIcon = () => {
-  showInput.value = true;
+  showInput.value = true
 }
 // 节点名称输入框失去焦点
 const blurEvent = () => {
   showInput.value = false
-  currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string
+  currentNode.value.name =
+    currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
+}
+// 默认 6小时
+const timeDuration = ref(6)
+const timeUnit = ref(TimeUnitType.HOUR)
+
+const isoTimeDuration = computed(() => {
+  let strTimeDuration = 'PT'
+  if (timeUnit.value === TimeUnitType.MINUTE) {
+    strTimeDuration += timeDuration.value + 'M'
+  }
+  if (timeUnit.value === TimeUnitType.HOUR) {
+    strTimeDuration += timeDuration.value + 'H'
+  }
+  if (timeUnit.value === TimeUnitType.DAY) {
+    strTimeDuration += timeDuration.value + 'D'
+  }
+  return strTimeDuration
+})
+// 超时开关改变
+const timeoutHandlerChange = () => {
+  if (currentNode.value.attributes.timeoutHandler.enable) {
+    timeUnit.value = 2
+    timeDuration.value = 6
+    currentNode.value.attributes.timeoutHandler.action = 1
+    currentNode.value.attributes.timeoutHandler.maxRemindCount = 1
+  }
+}
+
+// 时间单位改变
+const timeUnitChange = () => {
+  // 分钟，默认是 60 分钟
+  if (timeUnit.value === TimeUnitType.MINUTE) {
+    timeDuration.value = 60
+  }
+  // 小时，默认是 6 个小时
+  if (timeUnit.value === TimeUnitType.HOUR) {
+    timeDuration.value = 6
+  }
+  // 天， 默认 1天
+  if (timeUnit.value === TimeUnitType.DAY) {
+    timeDuration.value = 1
+  }
+}
+
+const convertTimeUnit = (strTimeUnit: string) => {
+  if (strTimeUnit === 'M') {
+    return TimeUnitType.MINUTE
+  }
+  if (strTimeUnit === 'H') {
+    return TimeUnitType.HOUR
+  }
+  if (strTimeUnit === 'D') {
+    return TimeUnitType.DAY
+  }
+  return TimeUnitType.HOUR
 }
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
index 411e7bfa..ca9ff0ea 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -34,7 +34,6 @@
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
       <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
     </div>
-    <!-- 其实只需要一个全局抄送节点配置就行, 不需要多个。点击配置的时候传值.  TODO 后面优化 -->
     <CopyTaskNodeConfig
       v-if="currentNode"
       ref="nodeSetting"
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index a27ed53f..c0b678a6 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -34,7 +34,6 @@
       <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
     </div>
   </div>
-  <!-- 其实只需要一个全局审批节点配置就行, 不需要多个。点击配置的时候传值.  TODO 后面优化 -->
   <UserTaskNodeConfig
     v-if="currentNode"
     ref="nodeSetting"

From 0e7dbbb04d354332dfb543a0fbbd0b2d62fff153 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 26 May 2024 11:02:04 +0800
Subject: [PATCH 25/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E5=AE=A1=E6=89=B9?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E9=85=8D=E7=BD=AE=E6=96=B0=E5=A2=9E=E6=8B=92?=
 =?UTF-8?q?=E7=BB=9D=E5=A4=84=E7=90=86=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |  54 +++++----
 .../src/ProcessNodeTree.vue                   | 111 ++++++++++++------
 .../src/SimpleProcessDesigner.vue             |  16 ++-
 .../SimpleProcessDesignerV2/src/consts.ts     |  21 +++-
 .../src/nodes-config/UserTaskNodeConfig.vue   |  50 +++++++-
 .../src/nodes/ExclusiveNode.vue               |  30 ++++-
 .../src/nodes/UserTaskNode.vue                |  11 +-
 7 files changed, 221 insertions(+), 72 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index d13b7365..e751dbd5 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -1,37 +1,42 @@
 <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.COPY_TASK_NODE)">
-              <div class="handler-item-icon copy">
-                <span class="iconfont icon-size icon-copy"></span>
-              </div>
-              <div class="handler-item-text">抄送</div>
-            </div>
-            <div class="handler-item" @click="addNode(NodeType.EXCLUSIVE_NODE)">
-              <div class="handler-item-icon condition">
-                <span class="iconfont icon-size icon-exclusive"></span>
-              </div>
-              <div class="handler-item-text">条件分支</div>
+      <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>
-          <template #reference>
-            <div class="add-icon"><Icon icon="ep:plus" /></div>
-          </template>
+          <div class="handler-item" @click="addNode(NodeType.COPY_TASK_NODE)">
+            <div class="handler-item-icon copy">
+              <span class="iconfont icon-size icon-copy"></span>
+            </div>
+            <div class="handler-item-text">抄送</div>
+          </div>
+          <div class="handler-item" @click="addNode(NodeType.EXCLUSIVE_NODE)">
+            <div class="handler-item-icon condition">
+              <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, ApproveMethodType, CandidateStrategy } from './consts'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_NAME, ApproveMethodType, RejectHandlerType, CandidateStrategy } from './consts'
 import { generateUUID } from '@/utils'
 defineOptions({
   name: 'NodeHandler'
@@ -71,6 +76,9 @@ const addNode = (type: number) => {
          // 超时处理
         timeoutHandler: {
           enable: false
+        },
+        rejectHandler: {
+          type: RejectHandlerType.TERMINATION
         }
       },
       childNode: props.childNode
diff --git a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
index a40ebc27..e21670fa 100644
--- a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
+++ b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@@ -1,58 +1,103 @@
 <template>
   <!-- 开始节点 -->
   <StartEventNode
-        v-if="currentNode && currentNode.type === NodeType.START_EVENT_NODE" 
-        :flow-node ="currentNode" 
-        @update:model-value="handleModelValueUpdate" />
+    v-if="currentNode && currentNode.type === NodeType.START_EVENT_NODE"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+  />
   <!-- 审批节点 -->
-  <UserTaskNode 
-        v-if="currentNode && currentNode.type === NodeType.USER_TASK_NODE" 
-        :flow-node ="currentNode" @update:model-value="handleModelValueUpdate"/>
+  <UserTaskNode
+    v-if="currentNode && currentNode.type === NodeType.USER_TASK_NODE"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
+  />
   <!-- 抄送节点 -->
   <CopyTaskNode
-        v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE" 
-        :flow-node ="currentNode" @update:model-value="handleModelValueUpdate"/>
+    v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+  />
   <!-- 条件节点 -->
-  <ExclusiveNode 
-        v-if="currentNode && currentNode.type === NodeType.EXCLUSIVE_NODE" 
-        :flow-node ="currentNode" @update:model-value="handleModelValueUpdate"/>
+  <ExclusiveNode
+    v-if="currentNode && currentNode.type === NodeType.EXCLUSIVE_NODE"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
+  />
   <!-- 递归显示孩子节点  -->
-  <ProcessNodeTree v-if="currentNode && currentNode.childNode"  v-model:flow-node="currentNode.childNode"/>
+  <ProcessNodeTree
+    v-if="currentNode && currentNode.childNode"
+    v-model:flow-node="currentNode.childNode"
+    :parent-node= "currentNode"
+    @find:recursive-find-parent-node="recursiveFindParentNode"
+  />
 
   <!-- 结束节点 -->
-  <EndEventNode v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE"/>
+  <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 UserTaskNode from './nodes/UserTaskNode.vue';
-import CopyTaskNode from './nodes/CopyTaskNode.vue';
-import ExclusiveNode from './nodes/ExclusiveNode.vue';
-import { SimpleFlowNode, NodeType }  from './consts';
+<script setup lang="ts">
+import StartEventNode from './nodes/StartEventNode.vue'
+import EndEventNode from './nodes/EndEventNode.vue'
+import UserTaskNode from './nodes/UserTaskNode.vue'
+import CopyTaskNode from './nodes/CopyTaskNode.vue'
+import ExclusiveNode from './nodes/ExclusiveNode.vue'
+import { SimpleFlowNode, NodeType } from './consts'
 defineOptions({
   name: 'ProcessNodeTree'
 })
 const props = defineProps({
-  flowNode : {
+  parentNode: {
     type: Object as () => SimpleFlowNode,
-    default: () => null 
+    default: () => null
+  },
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null
   }
 })
-const emits = defineEmits(['update:flowNode'])
+const emits = defineEmits<{
+  'update:flowNode',
+  'find:recursiveFindParentNode': [nodeList: SimpleFlowNode[], curentNode: SimpleFlowNode, nodeType: number]
+}>()
 
-const currentNode = ref<SimpleFlowNode>(props.flowNode);
+
+const currentNode = ref<SimpleFlowNode>(props.flowNode)
 
 // 重要：监控节点变化. 重新绘制节点
-watch(() => props.flowNode, (newValue) => {  
-  currentNode.value = newValue;  
-}
-);
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue
+  }
+)
 
 const handleModelValueUpdate = (updateValue) => {
   console.log('Process Node Tree handleModelValueUpdate', updateValue)
-  emits('update:flowNode', updateValue);
-} 
-</script>
-<style lang='scss' scoped>
+  emits('update:flowNode', updateValue)
+}
 
-</style>
+const findFromParentNode = (
+  nodeList: SimpleFlowNode[],
+  nodeType: number
+) => {
+  emits('find:recursiveFindParentNode', nodeList, props.parentNode, nodeType)
+}
+
+// 递归从父节点中查询匹配的节点
+const recursiveFindParentNode = (
+  nodeList: SimpleFlowNode[],
+  findNode: SimpleFlowNode,
+  nodeType: number
+) => {
+  if (!findNode || findNode.type === NodeType.START_EVENT_NODE) {
+    return
+  }
+
+  if (findNode.type === nodeType) {
+    nodeList.push(findNode)
+  }
+  emits('find:recursiveFindParentNode', nodeList, props.parentNode, nodeType)
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index 76dc9b40..a9cf18d1 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -15,7 +15,7 @@
         </div>
       </div>
       <div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
-        <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
+        <ProcessNodeTree v-if="processNodeTree"  v-model:flow-node="processNodeTree" />
       </div>
     </div>
     <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
@@ -55,6 +55,18 @@ const processNodeTree = ref<SimpleFlowNode>({
   }
 })
 
+// const rootNode = ref<SimpleFlowNode>({
+//   name: '开始',
+//   type: NodeType.START_EVENT_NODE,
+//   id: 'StartEvent_1'
+// })
+
+// const childNode = ref<SimpleFlowNode>({
+//   id: 'EndEvent_1',
+//   name: '结束',
+//   type: NodeType.END_EVENT_NODE
+// })
+
 const errorDialogVisible = ref(false)
 let errorNodes: SimpleFlowNode[] = []
 const saveSimpleFlowModel = async () => {
@@ -148,6 +160,8 @@ onMounted(async () => {
   if (result) {
     console.log('the result is ', result)
     processNodeTree.value = result
+    // rootNode.value = result
+    // childNode.value = result.childNode
   }
 })
 </script>
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 32a9b658..70b201f0 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -62,6 +62,17 @@ export enum TimeUnitType {
   DAY = 3
 }
 
+export enum RejectHandlerType {
+  /**
+   * 结束流程
+   */
+  TERMINATION = 1,
+  /**
+   * 驳回到指定节点
+   */
+  RETURN_PRE_USER_TASK = 2
+}
+
 // 条件配置类型 （ 用于条件节点配置 ）
 export enum ConditionConfigType  {
 
@@ -186,12 +197,6 @@ NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人')
 NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人')
 NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
 
-export const TIME_UNIT_MAP = new Map<number,string>()
-NODE_DEFAULT_NAME.set(1, 'M')
-NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人')
-NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
-
-
 export const APPROVE_METHODS: DictDataVO [] = [
   { label: '单人审批', value: 1 },
   { label: '多人会签(需所有审批人同意)', value: 2 },
@@ -216,6 +221,10 @@ export const TIMEOUT_HANDLER_ACTION_TYPES: DictDataVO [] = [
   { label: '自动同意', value: 2 },
   { label: '自动拒绝', value: 3 },
 ]
+export const REJECT_HANDLER_TYPES: DictDataVO [] = [
+  { label: '结束流程', value: RejectHandlerType.TERMINATION },
+  { label: '驳回到指定节点', value: RejectHandlerType.RETURN_PRE_USER_TASK }
+]
 
 // 比较运算符
 export const COMPARISON_OPERATORS : DictDataVO = [
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 49d22874..5815d176 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -131,7 +131,6 @@
                 />
               </el-select>
             </el-form-item>
-
             <el-form-item
               v-if="currentNode.attributes.candidateStrategy === CandidateStrategy.EXPRESSION"
               label="流程表达式"
@@ -144,7 +143,6 @@
                 style="width: 100%"
               />
             </el-form-item>
-
             <el-form-item label="审批方式" prop="approveMethod">
               <el-radio-group v-model="currentNode.attributes.approveMethod">
                 <div class="flex-col">
@@ -163,8 +161,35 @@
                 </div>
               </el-radio-group>
             </el-form-item>
-
-            <el-form-item label="超时处理" prop="timeoutHandlerEnable">
+            <el-divider content-position="left">审批人拒绝时</el-divider>
+            <el-form-item label="处理方式" prop="rejectHandler">
+              <el-radio-group v-model="currentNode.attributes.rejectHandler.type" @change="rejectHandlerTypeChange">
+                <el-radio
+                  :border="true"
+                  v-for="item in REJECT_HANDLER_TYPES"
+                  :key="item.value"
+                  :value="item.value"
+                  :label="item.label"
+                />
+              </el-radio-group>
+            </el-form-item>
+            
+            <el-form-item
+              v-if="currentNode.attributes.rejectHandler.type == RejectHandlerType.RETURN_PRE_USER_TASK"
+              label="驳回节点"
+              prop="rejectHandlerNode"
+            >
+              <el-select v-model="currentNode.attributes.rejectHandler.returnNodeId" clearable style="width: 100%">
+                <el-option
+                  v-for="item in returnTaskList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-divider content-position="left">审批人超时未处理时</el-divider>
+            <el-form-item label="启用开关" prop="timeoutHandlerEnable">
               <el-switch
                 v-model="currentNode.attributes.timeoutHandler.enable"
                 active-text="开启"
@@ -281,8 +306,10 @@ import {
   NodeType,
   ApproveMethodType,
   TimeUnitType,
+  RejectHandlerType,
   TIMEOUT_HANDLER_ACTION_TYPES,
   TIME_UNIT_TYPES,
+  REJECT_HANDLER_TYPES,
   NODE_DEFAULT_NAME
 } from '../consts'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
@@ -303,6 +330,9 @@ const props = defineProps({
     required: true
   }
 })
+const emits = defineEmits<{
+  'find:returnTaskNodes': [nodeList: SimpleFlowNode[]]
+}>()
 
 const notAllowedMultiApprovers = ref(false)
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
@@ -316,7 +346,7 @@ const deptTreeOptions = inject('deptTree') // 部门树
 const formType = inject('formType') // 表单类型
 const formFields = inject<Ref<string[]>>('formFields')
 const candidateParamArray = ref<any[]>([])
-
+const returnTaskList = ref<SimpleFlowNode[]>([])
 const closeDrawer = () => {
   settingVisible.value = false
 }
@@ -443,6 +473,10 @@ const setCurrentNode = (node: SimpleFlowNode) => {
     timeDuration.value = parseInt(parseTime)
     timeUnit.value = convertTimeUnit(parseTimeUnit)
   }
+  // 查找可以驳回的用户节点
+  const matchNodeList = [];
+  emits('find:returnTaskNodes', matchNodeList);
+  returnTaskList.value = matchNodeList;
 }
 
 defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
@@ -483,6 +517,12 @@ const blurEvent = () => {
   currentNode.value.name =
     currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
 }
+const rejectHandlerTypeChange = () => {
+  if (currentNode.value.attributes?.rejectHandler.type === RejectHandlerType.RETURN_PRE_USER_TASK) {
+    
+    console.log('nodeList is {}', returnTaskList.value);
+  }
+}
 // 默认 6小时
 const timeDuration = ref(6)
 const timeUnit = ref(TimeUnitType.HOUR)
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
index d25ffc94..e2e5a92c 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
@@ -57,7 +57,11 @@
         </div>
         <ConditionNodeConfig :node-index="index" :condition-node="item" :ref="item.id" />
         <!-- 递归显示子节点  -->
-        <ProcessNodeTree v-if="item && item.childNode" v-model:flow-node="item.childNode" />
+        <ProcessNodeTree 
+            v-if="item && item.childNode" 
+            :parent-node="item" 
+            v-model:flow-node="item.childNode" 
+            @find:recursive-find-parent-node="recursiveFindParentNode"/>
       </div>
     </div>
     <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
@@ -76,6 +80,10 @@ defineOptions({
   name: 'ExclusiveNode'
 })
 const props = defineProps({
+  // parentNode : {
+  //   type: Object as () => SimpleFlowNode,
+  //   required: true
+  // },
   flowNode: {
     type: Object as () => SimpleFlowNode,
     required: true
@@ -83,7 +91,9 @@ const props = defineProps({
 })
 // 定义事件，更新父组件
 const emits = defineEmits<{
-  'update:modelValue': [node: SimpleFlowNode | undefined]
+  'update:modelValue': [node: SimpleFlowNode | undefined],
+  'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: number],
+  'find:recursiveFindParentNode': [nodeList: SimpleFlowNode[], curentNode: SimpleFlowNode, nodeType: number]
 }>()
 
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
@@ -156,7 +166,21 @@ const moveNode = (index: number, to: number) => {
   }
 
 }
-
+// 递归从父节点中查询匹配的节点
+const recursiveFindParentNode = (
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number
+) => {
+  if (!node || node.type === NodeType.START_EVENT_NODE) {
+    return
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node)
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.EXCLUSIVE_NODE) 继续查找
+  emits('find:parentNode', nodeList, nodeType)
+}
 
 </script>
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index c0b678a6..bf2027fb 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -38,6 +38,7 @@
     v-if="currentNode"
     ref="nodeSetting"
     :flow-node="currentNode"
+    @find:return-task-nodes="findReturnTaskNodes"
   />
 </template>
 <script setup lang="ts">
@@ -55,7 +56,8 @@ const props = defineProps({
   }
 })
 const emits = defineEmits<{
-  'update:modelValue': [node: SimpleFlowNode | undefined]
+  'update:modelValue': [node: SimpleFlowNode | undefined],
+  'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: NodeType]
 }>()
 
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
@@ -106,5 +108,12 @@ const copyNode = () => {
   currentNode.value = newCopyNode
   emits('update:modelValue', currentNode.value)
 }
+// 查找可以驳回用户节点
+const findReturnTaskNodes = (
+  matchNodeList: SimpleFlowNode[], // 匹配的节点
+) => {
+  // 从父节点查找
+  emits('find:parentNode', matchNodeList, NodeType.USER_TASK_NODE);
+}
 </script>
 <style lang="scss" scoped></style>

From b768632b0c5f3a7cbd73cb92b9f7311404d80241 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Mon, 27 May 2024 21:20:18 +0800
Subject: [PATCH 26/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E5=90=8E=E7=AB=AF?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/simple/index.ts                               | 8 ++++----
 .../SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/api/bpm/simple/index.ts b/src/api/bpm/simple/index.ts
index b977dea0..28808565 100644
--- a/src/api/bpm/simple/index.ts
+++ b/src/api/bpm/simple/index.ts
@@ -1,15 +1,15 @@
 import request from '@/config/axios'
 
 
-export const saveBpmSimpleModel = async (data) => {
+export const updateBpmSimpleModel = async (data) => {
   return await request.post({
-    url: '/bpm/simple/save',
+    url: '/bpm/model/simple/update',
     data: data
   })
 }
 
 export const getBpmSimpleModel = async (modelId) => {
   return await request.get({
-    url: '/bpm/simple/get?modelId=' + modelId
+    url: '/bpm/model/simple/get?modelId=' + modelId
   })
-}
\ No newline at end of file
+}
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index a9cf18d1..cd47e896 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -32,7 +32,7 @@
 
 <script setup lang="ts">
 import ProcessNodeTree from './ProcessNodeTree.vue';
-import { saveBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
+import { updateBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
 import { SimpleFlowNode, NodeType,NODE_DEFAULT_TEXT } from './consts'
 
 defineOptions({
@@ -86,7 +86,7 @@ const saveSimpleFlowModel = async () => {
     simpleModelBody: processNodeTree.value
   }
 
-  const result = await saveBpmSimpleModel(data)
+  const result = await updateBpmSimpleModel(data)
   if (result) {
     message.success('修改成功')
     close()

From 94cdb2ed29f1e9d27a6be0cd53691d7de8724763 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 31 May 2024 09:00:25 +0800
Subject: [PATCH 27/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E5=90=8E=E7=AB=AF?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue     | 2 +-
 src/views/bpm/simpleWorkflow/index1.vue                       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index cd47e896..8b7efff4 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -83,7 +83,7 @@ const saveSimpleFlowModel = async () => {
   }
   const data = {
     modelId: props.modelId,
-    simpleModelBody: processNodeTree.value
+    simpleModel: processNodeTree.value
   }
 
   const result = await updateBpmSimpleModel(data)
diff --git a/src/views/bpm/simpleWorkflow/index1.vue b/src/views/bpm/simpleWorkflow/index1.vue
index 6ee5b4e3..04eb8d89 100644
--- a/src/views/bpm/simpleWorkflow/index1.vue
+++ b/src/views/bpm/simpleWorkflow/index1.vue
@@ -26,7 +26,7 @@ import approverDrawer from '@/components/SimpleProcessDesigner/src/drawer/approv
 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 { updateBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
 import { getModel } from '@/api/bpm/model'
 import { getForm, FormVO } from '@/api/bpm/form'
 defineOptions({ name: 'SimpleWorkflowDesignEditor2' })
@@ -65,7 +65,7 @@ const test = async () => {
     simpleModelBody: nodeConfig.value
   }
   console.log('request json data1 is ', data1)
-  const result = await saveBpmSimpleModel(data)
+  const result = await updateBpmSimpleModel(data)
   console.log('save the result is ', result)
   if (result) {
     message.success('修改成功')

From e8d06c314e81586bcdf4cb22c61f98dab247b5d7 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 2 Jun 2024 18:18:55 +0800
Subject: [PATCH 28/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=B9=B6=E8=A1=8C=E5=88=86=E6=94=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |  31 ++++
 .../src/ProcessNodeTree.vue                   |   8 +
 .../src/nodes/ParallelNode.vue                | 165 ++++++++++++++++++
 3 files changed, 204 insertions(+)
 create mode 100644 src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index e751dbd5..40b7a02f 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -26,6 +26,12 @@
             </div>
             <div class="handler-item-text">条件分支</div>
           </div>
+          <div class="handler-item" @click="addNode(NodeType.PARALLEL_NODE_FORK)">
+            <div class="handler-item-icon condition">
+              <span class="iconfont icon-size icon-parallel"></span>
+            </div>
+            <div class="handler-item-text">并行分支</div>
+          </div>
         </div>
         <template #reference>
           <div class="add-icon"><Icon icon="ep:plus" /></div>
@@ -134,6 +140,31 @@ const addNode = (type: number) => {
     }
     emits('update:childNode', data)
   }
+  if (type === NodeType.PARALLEL_NODE_FORK) {
+    const data : SimpleFlowNode = {
+      name: '并行分支',
+      type: NodeType.PARALLEL_NODE_FORK,
+      id: 'GateWay_' + generateUUID(),
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: 'Flow_'+ generateUUID(),
+          name: '并行1',
+          showText: '无需配置条件同时执行',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+        },
+        {
+          id: 'Flow_'+ generateUUID(),
+          name: '并行2',
+          showText: '无需配置条件同时执行',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+        }
+      ]
+    }
+    emits('update:childNode', data)
+  }
 }
 </script>
 
diff --git a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
index e21670fa..c7589089 100644
--- a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
+++ b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@@ -24,6 +24,13 @@
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
     @find:parent-node="findFromParentNode"
+  />
+   <!-- 并行节点 -->
+   <ParallelNode
+    v-if="currentNode && currentNode.type === NodeType.PARALLEL_NODE_FORK"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
   />
   <!-- 递归显示孩子节点  -->
   <ProcessNodeTree
@@ -42,6 +49,7 @@ import EndEventNode from './nodes/EndEventNode.vue'
 import UserTaskNode from './nodes/UserTaskNode.vue'
 import CopyTaskNode from './nodes/CopyTaskNode.vue'
 import ExclusiveNode from './nodes/ExclusiveNode.vue'
+import ParallelNode from './nodes/ParallelNode.vue'
 import { SimpleFlowNode, NodeType } from './consts'
 defineOptions({
   name: 'ProcessNodeTree'
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
new file mode 100644
index 00000000..769ab888
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div class="branch-node-add" @click="addCondition">添加分支</div>
+      <div class="branch-node-item" v-for="(item, index) in currentNode.conditionNodes" :key="index">
+        <template v-if="index == 0">
+          <div class="branch-line-first-top"></div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 == currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div class="node-box">
+              <div class="branch-node-title-container">
+                <div  v-if="showInputs[index]">
+                  <input
+                    type="text"
+                    class="input-max-width editable-title-input" 
+                    @blur="blurEvent(index)"
+                    v-mountedFocus 
+                    v-model="item.name" />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)"> {{ item.name }} </div>
+                <div class="branch-priority">无优先级</div>
+              </div>
+              <div class="branch-node-content" @click="conditionNodeConfig(item.id)">
+                <div class="branch-node-text" :title="item.showText" v-if="item.showText">
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div class="node-toolbar">
+                <div class="toolbar-icon">
+                  <Icon color="#0089ff"  icon="ep:circle-close-filled" :size="18"  @click="deleteCondition(index)" />
+                </div>
+              </div>
+              <!-- <div 
+                class="branch-node-move move-node-left"
+                v-if="index != 0 && index + 1 !== currentNode.conditionNodes?.length" @click="moveNode(index, -1)">
+                <Icon icon="ep:arrow-left" />
+              </div> -->
+
+              <!-- <div 
+                class="branch-node-move move-node-right"
+                v-if="currentNode.conditionNodes && index < currentNode.conditionNodes.length - 2"
+                @click="moveNode(index, 1)">
+                <Icon icon="ep:arrow-right" />
+              </div> -->
+            </div>
+            <NodeHandler v-model:child-node="item.childNode" />
+          </div>
+        </div>
+        <!-- 递归显示子节点  -->
+        <ProcessNodeTree 
+            v-if="item && item.childNode" 
+            :parent-node="item" 
+            v-model:flow-node="item.childNode" 
+            @find:recursive-find-parent-node="recursiveFindParentNode"/>
+      </div>
+    </div>
+    <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import NodeHandler from '../NodeHandler.vue'
+import ProcessNodeTree from '../ProcessNodeTree.vue'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import { generateUUID } from '@/utils'
+
+const { proxy } = getCurrentInstance() as any
+defineOptions({
+  name: 'ParallelNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode | undefined],
+  'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: number],
+  'find:recursiveFindParentNode': [nodeList: SimpleFlowNode[], curentNode: SimpleFlowNode, nodeType: number]
+}>()
+
+const currentNode = ref<SimpleFlowNode>(props.flowNode)
+
+watch(() => props.flowNode, (newValue) => {
+  currentNode.value = newValue;
+});
+
+
+const showInputs = ref<boolean[]>([])
+// 失去焦点
+const blurEvent = (index: number) => {
+  showInputs.value[index] = false
+  const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode;
+  conditionNode.name = conditionNode.name || `并行${index+1}`
+}
+
+// 点击条件名称
+const clickEvent = (index: number) => {
+  showInputs.value[index] = true
+}
+
+const conditionNodeConfig = (nodeId: string) => {
+  const conditionNode = proxy.$refs[nodeId][0];
+  conditionNode.open()
+}
+
+// 新增条件
+const addCondition = () => {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    const len = conditionNodes.length
+    let lastIndex = len - 1
+    const conditionData: SimpleFlowNode = {
+      id: 'Flow_' + generateUUID(),
+      name: '并行' + len,
+      showText: '无需配置条件同时执行',
+      type: NodeType.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+    }
+    conditionNodes.splice(lastIndex, 0, conditionData)
+  }
+}
+
+// 删除条件
+const deleteCondition = (index: number) => {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1)
+    if (conditionNodes.length == 1) {
+      const childNode = currentNode.value.childNode
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode)
+    }
+  }
+}
+
+// 递归从父节点中查询匹配的节点
+const recursiveFindParentNode = (
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number
+) => {
+  if (!node || node.type === NodeType.START_EVENT_NODE) {
+    return
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node)
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点并行节点（NodeType.PARALLEL_NODE) 继续查找
+  emits('find:parentNode', nodeList, nodeType)
+}
+
+</script>

From 632bcb9944c4b51cb5f379313c549616566cab52 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Thu, 6 Jun 2024 10:05:34 +0800
Subject: [PATCH 29/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E9=80=9A=E8=BF=87?=
 =?UTF-8?q?=E5=8F=AA=E9=9C=80=E4=B8=80=E4=BA=BA,=E6=8B=92=E7=BB=9D?=
 =?UTF-8?q?=E9=9C=80=E8=A6=81=E5=85=A8=E5=91=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |  2 +-
 .../SimpleProcessDesignerV2/src/consts.ts     | 44 +++++++++---
 .../src/nodes-config/UserTaskNodeConfig.vue   | 71 +++++++++++++------
 3 files changed, 85 insertions(+), 32 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index 40b7a02f..5e1db576 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -84,7 +84,7 @@ const addNode = (type: number) => {
           enable: false
         },
         rejectHandler: {
-          type: RejectHandlerType.TERMINATION
+          type: RejectHandlerType.FINISH_PROCESS
         }
       },
       childNode: props.childNode
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 70b201f0..a3638415 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -66,11 +66,20 @@ export enum RejectHandlerType {
   /**
    * 结束流程
    */
-  TERMINATION = 1,
+  FINISH_PROCESS = 1,
   /**
    * 驳回到指定节点
    */
-  RETURN_PRE_USER_TASK = 2
+  RETURN_PRE_USER_TASK = 2,
+  /**
+   * 按拒绝人数比例终止流程
+   */
+  FINISH_PROCESS_BY_REJECT_RATIO = 3,
+   /**
+   * 结束任务
+   */
+  FINISH_TASK = 4
+  
 }
 
 // 条件配置类型 （ 用于条件节点配置 ）
@@ -99,13 +108,22 @@ export enum ApproveMethodType  {
   */
   ALL_APPROVE = 2,
   /**
-  * 多人或签(一名审批人同意即可)
+  * 多人会签(按比例投票)
   */
-  ANY_OF_APPROVE = 3,
+  APPROVE_BY_RATIO = 3,
+  /**
+  * 多人会签(通过只需一人，拒绝需要全员)
+  */
+  ANY_APPROVE_ALL_REJECT = 4,
+
+  /**
+  * 多人或签(一名审批人通过即可)
+  */
+  ANY_APPROVE = 5,
    /**
   * 多人依次审批
   */
-  SEQUENTIAL_APPROVE = 4
+  SEQUENTIAL_APPROVE = 6
 
 }
 
@@ -198,10 +216,12 @@ NODE_DEFAULT_NAME.set(NodeType.COPY_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 }
+  { label: '单人审批', value: ApproveMethodType.SINGLE_PERSON_APPROVE },
+  { label: '多人会签(需所有审批人同意)', value: ApproveMethodType.ALL_APPROVE },
+  // { label: '多人会签(按比例投票)', value: ApproveMethodType.APPROVE_BY_RATIO },
+  { label: '多人会签(通过只需一人,拒绝需要全员)', value: ApproveMethodType.ANY_APPROVE_ALL_REJECT },
+  { label: '多人或签(一名审批人通过即可)', value: ApproveMethodType.ANY_APPROVE },
+  { label: '依次审批(按顺序依次审批)', value: ApproveMethodType.SEQUENTIAL_APPROVE }
 ]
 
 export const CONDITION_CONFIG_TYPES: DictDataVO [] = [
@@ -222,8 +242,10 @@ export const TIMEOUT_HANDLER_ACTION_TYPES: DictDataVO [] = [
   { label: '自动拒绝', value: 3 },
 ]
 export const REJECT_HANDLER_TYPES: DictDataVO [] = [
-  { label: '结束流程', value: RejectHandlerType.TERMINATION },
-  { label: '驳回到指定节点', value: RejectHandlerType.RETURN_PRE_USER_TASK }
+  { label: '终止流程', value: RejectHandlerType.FINISH_PROCESS },
+  { label: '驳回到指定节点', value: RejectHandlerType.RETURN_PRE_USER_TASK },
+  { label: '按拒绝人数终止流程(用于会签)', value: RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO }
+  // { label: '结束任务', value: RejectHandlerType.FINISH_TASK }
 ]
 
 // 比较运算符
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 5815d176..71fb5411 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -144,7 +144,10 @@
               />
             </el-form-item>
             <el-form-item label="审批方式" prop="approveMethod">
-              <el-radio-group v-model="currentNode.attributes.approveMethod">
+              <el-radio-group
+                v-model="currentNode.attributes.approveMethod"
+                @change="approveMethodChanged"
+              >
                 <div class="flex-col">
                   <div v-for="(item, index) in APPROVE_METHODS" :key="index">
                     <el-radio
@@ -162,24 +165,33 @@
               </el-radio-group>
             </el-form-item>
             <el-divider content-position="left">审批人拒绝时</el-divider>
-            <el-form-item label="处理方式" prop="rejectHandler">
-              <el-radio-group v-model="currentNode.attributes.rejectHandler.type" @change="rejectHandlerTypeChange">
-                <el-radio
-                  :border="true"
-                  v-for="item in REJECT_HANDLER_TYPES"
-                  :key="item.value"
-                  :value="item.value"
-                  :label="item.label"
-                />
+            <el-form-item prop="rejectHandler">
+              <el-radio-group v-model="currentNode.attributes.rejectHandler.type">
+                <div class="flex-col">
+                  <div v-for="(item, index) in REJECT_HANDLER_TYPES" :key="index">
+                    <el-radio
+                      :key="item.value"
+                      :value="item.value"
+                      :label="item.label"
+                      :disabled="rejectHandlerOptionDisabled(item.value)"
+                    />
+                  </div>
+                </div>
               </el-radio-group>
             </el-form-item>
-            
+
             <el-form-item
-              v-if="currentNode.attributes.rejectHandler.type == RejectHandlerType.RETURN_PRE_USER_TASK"
+              v-if="
+                currentNode.attributes.rejectHandler.type == RejectHandlerType.RETURN_PRE_USER_TASK
+              "
               label="驳回节点"
               prop="rejectHandlerNode"
             >
-              <el-select v-model="currentNode.attributes.rejectHandler.returnNodeId" clearable style="width: 100%">
+              <el-select
+                v-model="currentNode.attributes.rejectHandler.returnNodeId"
+                clearable
+                style="width: 100%"
+              >
                 <el-option
                   v-for="item in returnTaskList"
                   :key="item.id"
@@ -474,9 +486,9 @@ const setCurrentNode = (node: SimpleFlowNode) => {
     timeUnit.value = convertTimeUnit(parseTimeUnit)
   }
   // 查找可以驳回的用户节点
-  const matchNodeList = [];
-  emits('find:returnTaskNodes', matchNodeList);
-  returnTaskList.value = matchNodeList;
+  const matchNodeList = []
+  emits('find:returnTaskNodes', matchNodeList)
+  returnTaskList.value = matchNodeList
 }
 
 defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
@@ -517,12 +529,30 @@ const blurEvent = () => {
   currentNode.value.name =
     currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
 }
-const rejectHandlerTypeChange = () => {
-  if (currentNode.value.attributes?.rejectHandler.type === RejectHandlerType.RETURN_PRE_USER_TASK) {
-    
-    console.log('nodeList is {}', returnTaskList.value);
+const approveMethodChanged = () => {
+  const approveMethod =  currentNode.value.attributes?.approveMethod
+  if (approveMethod === ApproveMethodType.ANY_APPROVE_ALL_REJECT || approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    currentNode.value.attributes.rejectHandler.type =RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO
+  } else {
+    currentNode.value.attributes.rejectHandler.type = RejectHandlerType.FINISH_PROCESS
   }
 }
+const rejectHandlerOptionDisabled = computed(() => {
+  return (val: number) => {
+    const approveMethod =  currentNode.value.attributes?.approveMethod
+    if (val === RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO && approveMethod !== ApproveMethodType.APPROVE_BY_RATIO
+        && approveMethod !== ApproveMethodType.ANY_APPROVE_ALL_REJECT) {
+      return true
+    }
+    if ( approveMethod === ApproveMethodType.ANY_APPROVE_ALL_REJECT && 
+        val === RejectHandlerType.FINISH_PROCESS
+    ) {
+      return true
+    }
+  
+    return false
+  }
+})
 // 默认 6小时
 const timeDuration = ref(6)
 const timeUnit = ref(TimeUnitType.HOUR)
@@ -540,6 +570,7 @@ const isoTimeDuration = computed(() => {
   }
   return strTimeDuration
 })
+
 // 超时开关改变
 const timeoutHandlerChange = () => {
   if (currentNode.value.attributes.timeoutHandler.enable) {

From cab9553235650f73ac878f08721535b946d3699f Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Thu, 13 Jun 2024 08:24:54 +0800
Subject: [PATCH 30/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8=20-=E4=BC=9A=E7=AD=BE?=
 =?UTF-8?q?=E6=8C=89=E9=80=9A=E8=BF=87=E6=AF=94=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/consts.ts     |  4 +-
 .../src/nodes-config/UserTaskNodeConfig.vue   | 43 +++++++++++++------
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index a3638415..575bfa3f 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -108,7 +108,7 @@ export enum ApproveMethodType  {
   */
   ALL_APPROVE = 2,
   /**
-  * 多人会签(按比例投票)
+  * 多人会签(按通过比例)
   */
   APPROVE_BY_RATIO = 3,
   /**
@@ -218,7 +218,7 @@ NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
 export const APPROVE_METHODS: DictDataVO [] = [
   { label: '单人审批', value: ApproveMethodType.SINGLE_PERSON_APPROVE },
   { label: '多人会签(需所有审批人同意)', value: ApproveMethodType.ALL_APPROVE },
-  // { label: '多人会签(按比例投票)', value: ApproveMethodType.APPROVE_BY_RATIO },
+  { label: '多人会签(按通过比例%)', value: ApproveMethodType.APPROVE_BY_RATIO },
   { label: '多人会签(通过只需一人,拒绝需要全员)', value: ApproveMethodType.ANY_APPROVE_ALL_REJECT },
   { label: '多人或签(一名审批人通过即可)', value: ApproveMethodType.ANY_APPROVE },
   { label: '依次审批(按顺序依次审批)', value: ApproveMethodType.SEQUENTIAL_APPROVE }
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 71fb5411..65af2755 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -149,7 +149,7 @@
                 @change="approveMethodChanged"
               >
                 <div class="flex-col">
-                  <div v-for="(item, index) in APPROVE_METHODS" :key="index">
+                  <div v-for="(item, index) in APPROVE_METHODS" :key="index" class="flex items-center">
                     <el-radio
                       :value="item.value"
                       :label="item.value"
@@ -160,6 +160,14 @@
                     >
                       {{ item.label }}
                     </el-radio>
+                    <el-input-number
+                      v-model="currentNode.attributes.approveRatio"
+                      :min="10"
+                      :max="99"
+                      :step="10"
+                      size="small"
+                      v-if="item.value === ApproveMethodType.APPROVE_BY_RATIO && currentNode.attributes.approveMethod === ApproveMethodType.APPROVE_BY_RATIO"
+                    />
                   </div>
                 </div>
               </el-radio-group>
@@ -175,6 +183,7 @@
                       :label="item.label"
                       :disabled="rejectHandlerOptionDisabled(item.value)"
                     />
+                   
                   </div>
                 </div>
               </el-radio-group>
@@ -512,6 +521,7 @@ const changedCandidateUsers = () => {
     currentNode.value.attributes?.candidateStrategy === CandidateStrategy.USER
   ) {
     currentNode.value.attributes.approveMethod = ApproveMethodType.SINGLE_PERSON_APPROVE
+    currentNode.value.attributes.rejectHandler.type = RejectHandlerType.FINISH_PROCESS
     notAllowedMultiApprovers.value = true
   } else {
     notAllowedMultiApprovers.value = false
@@ -530,26 +540,35 @@ const blurEvent = () => {
     currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
 }
 const approveMethodChanged = () => {
-  const approveMethod =  currentNode.value.attributes?.approveMethod
-  if (approveMethod === ApproveMethodType.ANY_APPROVE_ALL_REJECT || approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
-    currentNode.value.attributes.rejectHandler.type =RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO
+  const approveMethod = currentNode.value.attributes?.approveMethod
+  if ( approveMethod === ApproveMethodType.ANY_APPROVE_ALL_REJECT || approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    currentNode.value.attributes.rejectHandler.type =
+    RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO
   } else {
     currentNode.value.attributes.rejectHandler.type = RejectHandlerType.FINISH_PROCESS
   }
+
+  if (approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    currentNode.value.attributes.approveRatio = 50;
+  }
 }
 const rejectHandlerOptionDisabled = computed(() => {
   return (val: number) => {
-    const approveMethod =  currentNode.value.attributes?.approveMethod
-    if (val === RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO && approveMethod !== ApproveMethodType.APPROVE_BY_RATIO
-        && approveMethod !== ApproveMethodType.ANY_APPROVE_ALL_REJECT) {
-      return true
-    }
-    if ( approveMethod === ApproveMethodType.ANY_APPROVE_ALL_REJECT && 
-        val === RejectHandlerType.FINISH_PROCESS
+    const approveMethod = currentNode.value.attributes?.approveMethod
+    if (
+      val === RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO &&
+      approveMethod !== ApproveMethodType.APPROVE_BY_RATIO &&
+      approveMethod !== ApproveMethodType.ANY_APPROVE_ALL_REJECT
     ) {
       return true
     }
-  
+    if (
+      approveMethod === ApproveMethodType.ANY_APPROVE_ALL_REJECT &&
+      val === RejectHandlerType.FINISH_PROCESS
+    ) {
+      return true
+    }
+
     return false
   }
 })

From d5a7ae186517e1c50474d0d46524e90ff08310fd Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 14 Jun 2024 11:10:25 +0800
Subject: [PATCH 31/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E7=AE=80=E5=8C=96?=
 =?UTF-8?q?=E5=A4=9A=E4=BA=BA=E5=AE=A1=E6=89=B9=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |  2 +-
 .../SimpleProcessDesignerV2/src/consts.ts     | 30 +++++++------------
 .../src/nodes-config/UserTaskNodeConfig.vue   | 23 +++++++-------
 3 files changed, 21 insertions(+), 34 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index 5e1db576..e28ef7c9 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -75,7 +75,7 @@ const addNode = (type: number) => {
       type: NodeType.USER_TASK_NODE,
       // 审批节点配置
       attributes: {
-        approveMethod: ApproveMethodType.SINGLE_PERSON_APPROVE,
+        approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
         candidateStrategy: CandidateStrategy.USER,
         candidateParam: undefined,
         fieldsPermission: undefined,
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 575bfa3f..784e3315 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -95,35 +95,27 @@ export enum ConditionConfigType  {
    */
   RULE = 2
 }
-// 审批方式类型 （ 用于审批节点 ）
+// 多人审批方式类型 （ 用于审批节点 ）
 export enum ApproveMethodType  {
 
   /**
-  * 单人审批
+  * 随机挑选一人审批
   */
-  SINGLE_PERSON_APPROVE = 1,
+  RRANDOM_SELECT_ONE_APPROVE = 1,
 
-  /**
-  * 多人会签(需所有审批人同意)
-  */
-  ALL_APPROVE = 2,
   /**
   * 多人会签(按通过比例)
   */
-  APPROVE_BY_RATIO = 3,
+  APPROVE_BY_RATIO = 2,
+  
   /**
-  * 多人会签(通过只需一人，拒绝需要全员)
+  * 多人或签(通过只需一人，拒绝只需一人)
   */
-  ANY_APPROVE_ALL_REJECT = 4,
-
-  /**
-  * 多人或签(一名审批人通过即可)
-  */
-  ANY_APPROVE = 5,
+  ANY_APPROVE = 3,
    /**
   * 多人依次审批
   */
-  SEQUENTIAL_APPROVE = 6
+  SEQUENTIAL_APPROVE = 4
 
 }
 
@@ -216,11 +208,9 @@ NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人')
 NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
 
 export const APPROVE_METHODS: DictDataVO [] = [
-  { label: '单人审批', value: ApproveMethodType.SINGLE_PERSON_APPROVE },
-  { label: '多人会签(需所有审批人同意)', value: ApproveMethodType.ALL_APPROVE },
+  { label: '随机挑选一人审批', value: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE },
   { label: '多人会签(按通过比例%)', value: ApproveMethodType.APPROVE_BY_RATIO },
-  { label: '多人会签(通过只需一人,拒绝需要全员)', value: ApproveMethodType.ANY_APPROVE_ALL_REJECT },
-  { label: '多人或签(一名审批人通过即可)', value: ApproveMethodType.ANY_APPROVE },
+  { label: '多人或签(一人通过或拒绝)', value: ApproveMethodType.ANY_APPROVE },
   { label: '依次审批(按顺序依次审批)', value: ApproveMethodType.SEQUENTIAL_APPROVE }
 ]
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 65af2755..4ee0d310 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -143,7 +143,7 @@
                 style="width: 100%"
               />
             </el-form-item>
-            <el-form-item label="审批方式" prop="approveMethod">
+            <el-form-item label="多人审批方式" prop="approveMethod">
               <el-radio-group
                 v-model="currentNode.attributes.approveMethod"
                 @change="approveMethodChanged"
@@ -154,7 +154,7 @@
                       :value="item.value"
                       :label="item.value"
                       :disabled="
-                        item.value !== ApproveMethodType.SINGLE_PERSON_APPROVE &&
+                        item.value !== ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE &&
                         notAllowedMultiApprovers
                       "
                     >
@@ -163,7 +163,7 @@
                     <el-input-number
                       v-model="currentNode.attributes.approveRatio"
                       :min="10"
-                      :max="99"
+                      :max="100"
                       :step="10"
                       size="small"
                       v-if="item.value === ApproveMethodType.APPROVE_BY_RATIO && currentNode.attributes.approveMethod === ApproveMethodType.APPROVE_BY_RATIO"
@@ -504,7 +504,7 @@ defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
 
 const changeCandidateStrategy = () => {
   candidateParamArray.value = []
-  currentNode.value.attributes.approveMethod = ApproveMethodType.SINGLE_PERSON_APPROVE
+  currentNode.value.attributes.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
   if (
     currentNode.value.attributes.candidateStrategy === CandidateStrategy.START_USER ||
     currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER
@@ -520,7 +520,7 @@ const changedCandidateUsers = () => {
     candidateParamArray.value?.length <= 1 &&
     currentNode.value.attributes?.candidateStrategy === CandidateStrategy.USER
   ) {
-    currentNode.value.attributes.approveMethod = ApproveMethodType.SINGLE_PERSON_APPROVE
+    currentNode.value.attributes.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
     currentNode.value.attributes.rejectHandler.type = RejectHandlerType.FINISH_PROCESS
     notAllowedMultiApprovers.value = true
   } else {
@@ -541,7 +541,7 @@ const blurEvent = () => {
 }
 const approveMethodChanged = () => {
   const approveMethod = currentNode.value.attributes?.approveMethod
-  if ( approveMethod === ApproveMethodType.ANY_APPROVE_ALL_REJECT || approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+  if ( approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
     currentNode.value.attributes.rejectHandler.type =
     RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO
   } else {
@@ -549,7 +549,7 @@ const approveMethodChanged = () => {
   }
 
   if (approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
-    currentNode.value.attributes.approveRatio = 50;
+    currentNode.value.attributes.approveRatio = 100;
   }
 }
 const rejectHandlerOptionDisabled = computed(() => {
@@ -557,15 +557,12 @@ const rejectHandlerOptionDisabled = computed(() => {
     const approveMethod = currentNode.value.attributes?.approveMethod
     if (
       val === RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO &&
-      approveMethod !== ApproveMethodType.APPROVE_BY_RATIO &&
-      approveMethod !== ApproveMethodType.ANY_APPROVE_ALL_REJECT
+      approveMethod !== ApproveMethodType.APPROVE_BY_RATIO 
     ) {
       return true
     }
-    if (
-      approveMethod === ApproveMethodType.ANY_APPROVE_ALL_REJECT &&
-      val === RejectHandlerType.FINISH_PROCESS
-    ) {
+    if ( approveMethod === ApproveMethodType.APPROVE_BY_RATIO 
+    && val !== RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO) {
       return true
     }
 

From 5ee0a7b946a39c9f69009aa52bbf3e0768101d98 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 18 Jun 2024 00:06:52 +0800
Subject: [PATCH 32/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E7=AE=80=E5=8C=96?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E6=8B=92=E7=BB=9D=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/simple/index.ts                   |  4 +--
 .../src/SimpleProcessDesigner.vue             |  2 +-
 .../SimpleProcessDesignerV2/src/consts.ts     | 13 ++-------
 .../src/nodes-config/UserTaskNodeConfig.vue   | 28 ++-----------------
 src/views/bpm/simpleWorkflow/index.vue        |  1 -
 src/views/bpm/simpleWorkflow/index1.vue       | 12 +++-----
 6 files changed, 11 insertions(+), 49 deletions(-)

diff --git a/src/api/bpm/simple/index.ts b/src/api/bpm/simple/index.ts
index 28808565..6e1e995a 100644
--- a/src/api/bpm/simple/index.ts
+++ b/src/api/bpm/simple/index.ts
@@ -8,8 +8,8 @@ export const updateBpmSimpleModel = async (data) => {
   })
 }
 
-export const getBpmSimpleModel = async (modelId) => {
+export const getBpmSimpleModel = async (id) => {
   return await request.get({
-    url: '/bpm/model/simple/get?modelId=' + modelId
+    url: '/bpm/model/simple/get?id=' + id
   })
 }
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index 8b7efff4..d3d0b44c 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -82,7 +82,7 @@ const saveSimpleFlowModel = async () => {
     return;
   }
   const data = {
-    modelId: props.modelId,
+    id: props.modelId,
     simpleModel: processNodeTree.value
   }
 
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 784e3315..eb897d47 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -70,15 +70,7 @@ export enum RejectHandlerType {
   /**
    * 驳回到指定节点
    */
-  RETURN_PRE_USER_TASK = 2,
-  /**
-   * 按拒绝人数比例终止流程
-   */
-  FINISH_PROCESS_BY_REJECT_RATIO = 3,
-   /**
-   * 结束任务
-   */
-  FINISH_TASK = 4
+  RETURN_USER_TASK = 2
   
 }
 
@@ -233,8 +225,7 @@ export const TIMEOUT_HANDLER_ACTION_TYPES: DictDataVO [] = [
 ]
 export const REJECT_HANDLER_TYPES: DictDataVO [] = [
   { label: '终止流程', value: RejectHandlerType.FINISH_PROCESS },
-  { label: '驳回到指定节点', value: RejectHandlerType.RETURN_PRE_USER_TASK },
-  { label: '按拒绝人数终止流程(用于会签)', value: RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO }
+  { label: '驳回到指定节点', value: RejectHandlerType.RETURN_USER_TASK }
   // { label: '结束任务', value: RejectHandlerType.FINISH_TASK }
 ]
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 4ee0d310..7bb245eb 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -181,7 +181,6 @@
                       :key="item.value"
                       :value="item.value"
                       :label="item.label"
-                      :disabled="rejectHandlerOptionDisabled(item.value)"
                     />
                    
                   </div>
@@ -191,7 +190,7 @@
 
             <el-form-item
               v-if="
-                currentNode.attributes.rejectHandler.type == RejectHandlerType.RETURN_PRE_USER_TASK
+                currentNode.attributes.rejectHandler.type == RejectHandlerType.RETURN_USER_TASK
               "
               label="驳回节点"
               prop="rejectHandlerNode"
@@ -540,35 +539,12 @@ const blurEvent = () => {
     currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
 }
 const approveMethodChanged = () => {
+  currentNode.value.attributes.rejectHandler.type = RejectHandlerType.FINISH_PROCESS
   const approveMethod = currentNode.value.attributes?.approveMethod
-  if ( approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
-    currentNode.value.attributes.rejectHandler.type =
-    RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO
-  } else {
-    currentNode.value.attributes.rejectHandler.type = RejectHandlerType.FINISH_PROCESS
-  }
-
   if (approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
     currentNode.value.attributes.approveRatio = 100;
   }
 }
-const rejectHandlerOptionDisabled = computed(() => {
-  return (val: number) => {
-    const approveMethod = currentNode.value.attributes?.approveMethod
-    if (
-      val === RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO &&
-      approveMethod !== ApproveMethodType.APPROVE_BY_RATIO 
-    ) {
-      return true
-    }
-    if ( approveMethod === ApproveMethodType.APPROVE_BY_RATIO 
-    && val !== RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO) {
-      return true
-    }
-
-    return false
-  }
-})
 // 默认 6小时
 const timeDuration = ref(6)
 const timeUnit = ref(TimeUnitType.HOUR)
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simpleWorkflow/index.vue
index 9d5d2144..dac9aa82 100644
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
@@ -56,5 +56,4 @@ onMounted( async () => {
 })
 </script>
 <style lang='scss' scoped>
-
 </style>
diff --git a/src/views/bpm/simpleWorkflow/index1.vue b/src/views/bpm/simpleWorkflow/index1.vue
index 04eb8d89..4d612ff0 100644
--- a/src/views/bpm/simpleWorkflow/index1.vue
+++ b/src/views/bpm/simpleWorkflow/index1.vue
@@ -53,18 +53,14 @@ const test = async () => {
     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,
+    id: modelId,
     simpleModelBody: nodeConfig.value
   }
-  console.log('request json data1 is ', data1)
+
   const result = await updateBpmSimpleModel(data)
   console.log('save the result is ', result)
   if (result) {

From 58fc91b8107634ebcea1393431dd3ea0479ab224 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 19 Jun 2024 20:39:16 +0800
Subject: [PATCH 33/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E5=99=A8-=E5=AD=97=E6=AE=B5=E6=9D=83=E9=99=90?=
 =?UTF-8?q?=E9=A1=BA=E5=BA=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/nodes-config/UserTaskNodeConfig.vue   | 26 +++++++++----------
 .../SimpleProcessDesignerV2/src/utils.ts      | 20 +++++++-------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 7bb245eb..86ee6717 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -149,7 +149,11 @@
                 @change="approveMethodChanged"
               >
                 <div class="flex-col">
-                  <div v-for="(item, index) in APPROVE_METHODS" :key="index" class="flex items-center">
+                  <div
+                    v-for="(item, index) in APPROVE_METHODS"
+                    :key="index"
+                    class="flex items-center"
+                  >
                     <el-radio
                       :value="item.value"
                       :label="item.value"
@@ -166,7 +170,10 @@
                       :max="100"
                       :step="10"
                       size="small"
-                      v-if="item.value === ApproveMethodType.APPROVE_BY_RATIO && currentNode.attributes.approveMethod === ApproveMethodType.APPROVE_BY_RATIO"
+                      v-if="
+                        item.value === ApproveMethodType.APPROVE_BY_RATIO &&
+                        currentNode.attributes.approveMethod === ApproveMethodType.APPROVE_BY_RATIO
+                      "
                     />
                   </div>
                 </div>
@@ -177,21 +184,14 @@
               <el-radio-group v-model="currentNode.attributes.rejectHandler.type">
                 <div class="flex-col">
                   <div v-for="(item, index) in REJECT_HANDLER_TYPES" :key="index">
-                    <el-radio
-                      :key="item.value"
-                      :value="item.value"
-                      :label="item.label"
-                    />
-                   
+                    <el-radio :key="item.value" :value="item.value" :label="item.label" />
                   </div>
                 </div>
               </el-radio-group>
             </el-form-item>
 
             <el-form-item
-              v-if="
-                currentNode.attributes.rejectHandler.type == RejectHandlerType.RETURN_USER_TASK
-              "
+              v-if="currentNode.attributes.rejectHandler.type == RejectHandlerType.RETURN_USER_TASK"
               label="驳回节点"
               prop="rejectHandlerNode"
             >
@@ -282,8 +282,8 @@
           <div class="field-permit-title">
             <div class="setting-title-label first-title"> 字段名称 </div>
             <div class="other-titles">
-              <span class="setting-title-label">可编辑</span>
               <span class="setting-title-label">只读</span>
+              <span class="setting-title-label">可编辑</span>
               <span class="setting-title-label">隐藏</span>
             </div>
           </div>
@@ -542,7 +542,7 @@ const approveMethodChanged = () => {
   currentNode.value.attributes.rejectHandler.type = RejectHandlerType.FINISH_PROCESS
   const approveMethod = currentNode.value.attributes?.approveMethod
   if (approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
-    currentNode.value.attributes.approveRatio = 100;
+    currentNode.value.attributes.approveRatio = 100
   }
 }
 // 默认 6小时
diff --git a/src/components/SimpleProcessDesignerV2/src/utils.ts b/src/components/SimpleProcessDesignerV2/src/utils.ts
index 8cc2fb19..55bb1ab4 100644
--- a/src/components/SimpleProcessDesignerV2/src/utils.ts
+++ b/src/components/SimpleProcessDesignerV2/src/utils.ts
@@ -1,23 +1,23 @@
 // 获取条件节点默认的名称
-export const getDefaultConditionNodeName = (index:number, defaultFlow: boolean) : string => {
-  if ( defaultFlow ){
-    return "其它情况"
+export const getDefaultConditionNodeName = (index: number, defaultFlow: boolean): string => {
+  if (defaultFlow) {
+    return '其它情况'
   }
-  return '条件' + (index+1)
+  return '条件' + (index + 1)
 }
 
-// 获得默认的表单字段权限.  
-export const getDefaultFieldsPermission = (formFields: string[] | undefined) =>{
-  const defaultFieldsPermission : any[] = [];
-  if(formFields){
+// 获得默认的表单字段权限.
+export const getDefaultFieldsPermission = (formFields: string[] | undefined) => {
+  const defaultFieldsPermission: any[] = []
+  if (formFields) {
     formFields.forEach((fieldStr: string) => {
       const { field, title } = JSON.parse(fieldStr)
       defaultFieldsPermission.push({
         field,
         title,
-        permission: '2' // 只读
+        permission: '1' // 只读
       })
     })
   }
-  return  defaultFieldsPermission;
+  return defaultFieldsPermission
 }

From ea1e51a6558cbbe6743d41222369e9c07093c08c Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 19 Jun 2024 23:54:46 +0800
Subject: [PATCH 34/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E5=99=A8-=20=E5=AE=A1=E6=89=B9=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E7=BB=93=E6=9E=84=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |  71 +++++----
 .../SimpleProcessDesignerV2/src/consts.ts     | 137 +++++++++++-------
 .../src/nodes-config/UserTaskNodeConfig.vue   | 117 +++++++--------
 3 files changed, 181 insertions(+), 144 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index e28ef7c9..26aed76c 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -42,7 +42,14 @@
 </template>
 
 <script setup lang="ts">
-import { SimpleFlowNode, NodeType, NODE_DEFAULT_NAME, ApproveMethodType, RejectHandlerType, CandidateStrategy } from './consts'
+import {
+  SimpleFlowNode,
+  NodeType,
+  NODE_DEFAULT_NAME,
+  ApproveMethodType,
+  RejectHandlerType,
+  CandidateStrategy
+} from './consts'
 import { generateUUID } from '@/utils'
 defineOptions({
   name: 'NodeHandler'
@@ -63,37 +70,47 @@ const props = defineProps({
 
 const emits = defineEmits(['update:childNode'])
 
-
 const addNode = (type: number) => {
   popoverShow.value = false
   if (type === NodeType.USER_TASK_NODE) {
-    const id =  'Activity_'+ generateUUID();
+    const id = 'Activity_' + generateUUID()
     const data: SimpleFlowNode = {
-      id:  id,
+      id: id,
       name: NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string,
       showText: '',
       type: NodeType.USER_TASK_NODE,
-      // 审批节点配置
-      attributes: {
-        approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
-        candidateStrategy: CandidateStrategy.USER,
-        candidateParam: undefined,
-        fieldsPermission: undefined,
-         // 超时处理
-        timeoutHandler: {
-          enable: false
-        },
-        rejectHandler: {
-          type: RejectHandlerType.FINISH_PROCESS
-        }
+      approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
+      candidateStrategy: CandidateStrategy.USER,
+      candidateParam: undefined,
+      fieldsPermission: undefined,
+      // 超时处理
+      timeoutHandler: {
+        enable: false
+      },
+      rejectHandler: {
+        type: RejectHandlerType.FINISH_PROCESS
       },
       childNode: props.childNode
+      // 审批节点配置
+      // attributes: {
+      //   approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
+      //   candidateStrategy: CandidateStrategy.USER,
+      //   candidateParam: undefined,
+      //   fieldsPermission: undefined,
+      //    // 超时处理
+      //   timeoutHandler: {
+      //     enable: false
+      //   },
+      //   rejectHandler: {
+      //     type: RejectHandlerType.FINISH_PROCESS
+      //   }
+      // },
     }
-    emits('update:childNode', data);
+    emits('update:childNode', data)
   }
   if (type === NodeType.COPY_TASK_NODE) {
     const data: SimpleFlowNode = {
-      id:  'Activity_'+ generateUUID(),
+      id: 'Activity_' + generateUUID(),
       name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
       showText: '',
       type: NodeType.COPY_TASK_NODE,
@@ -108,14 +125,14 @@ const addNode = (type: number) => {
     emits('update:childNode', data)
   }
   if (type === NodeType.EXCLUSIVE_NODE) {
-    const data : SimpleFlowNode = {
+    const data: SimpleFlowNode = {
       name: '条件分支',
       type: NodeType.EXCLUSIVE_NODE,
       id: 'GateWay_' + generateUUID(),
       childNode: props.childNode,
       conditionNodes: [
         {
-          id: 'Flow_'+ generateUUID(),
+          id: 'Flow_' + generateUUID(),
           name: '条件1',
           showText: '',
           type: NodeType.CONDITION_NODE,
@@ -126,7 +143,7 @@ const addNode = (type: number) => {
           }
         },
         {
-          id: 'Flow_'+ generateUUID(),
+          id: 'Flow_' + generateUUID(),
           name: '其它情况',
           showText: '其它情况进入此流程',
           type: NodeType.CONDITION_NODE,
@@ -141,25 +158,25 @@ const addNode = (type: number) => {
     emits('update:childNode', data)
   }
   if (type === NodeType.PARALLEL_NODE_FORK) {
-    const data : SimpleFlowNode = {
+    const data: SimpleFlowNode = {
       name: '并行分支',
       type: NodeType.PARALLEL_NODE_FORK,
       id: 'GateWay_' + generateUUID(),
       childNode: props.childNode,
       conditionNodes: [
         {
-          id: 'Flow_'+ generateUUID(),
+          id: 'Flow_' + generateUUID(),
           name: '并行1',
           showText: '无需配置条件同时执行',
           type: NodeType.CONDITION_NODE,
-          childNode: undefined,
+          childNode: undefined
         },
         {
-          id: 'Flow_'+ generateUUID(),
+          id: 'Flow_' + generateUUID(),
           name: '并行2',
           showText: '无需配置条件同时执行',
           type: NodeType.CONDITION_NODE,
-          childNode: undefined,
+          childNode: undefined
         }
       ]
     }
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index eb897d47..6534d4e3 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -20,7 +20,7 @@ export enum NodeType {
    * 抄送人节点
    */
   COPY_TASK_NODE = 2,
- 
+
   /**
    * 条件节点
    */
@@ -71,44 +71,40 @@ export enum RejectHandlerType {
    * 驳回到指定节点
    */
   RETURN_USER_TASK = 2
-  
 }
 
 // 条件配置类型 （ 用于条件节点配置 ）
-export enum ConditionConfigType  {
-
-   /**
+export enum ConditionConfigType {
+  /**
    * 条件表达式
    */
   EXPRESSION = 1,
 
-   /**
+  /**
    * 条件规则
    */
   RULE = 2
 }
 // 多人审批方式类型 （ 用于审批节点 ）
-export enum ApproveMethodType  {
-
+export enum ApproveMethodType {
   /**
-  * 随机挑选一人审批
-  */
+   * 随机挑选一人审批
+   */
   RRANDOM_SELECT_ONE_APPROVE = 1,
 
   /**
-  * 多人会签(按通过比例)
-  */
+   * 多人会签(按通过比例)
+   */
   APPROVE_BY_RATIO = 2,
-  
-  /**
-  * 多人或签(通过只需一人，拒绝只需一人)
-  */
-  ANY_APPROVE = 3,
-   /**
-  * 多人依次审批
-  */
-  SEQUENTIAL_APPROVE = 4
 
+  /**
+   * 多人或签(通过只需一人，拒绝只需一人)
+   */
+  ANY_APPROVE = 3,
+  /**
+   * 多人依次审批
+   */
+  SEQUENTIAL_APPROVE = 4
 }
 
 // 候选人策略 （ 用于审批节点。抄送节点 )
@@ -137,37 +133,67 @@ export enum CandidateStrategy {
    * 发起人自选
    */
   START_USER_SELECT = 35,
-   /**
+  /**
    * 发起人自己
    */
   START_USER = 36,
-   /**
+  /**
    * 指定用户组
    */
-   USER_GROUP = 40,
-   /**
+  USER_GROUP = 40,
+  /**
    * 流程表达式
    */
-   EXPRESSION = 60
+  EXPRESSION = 60
 }
 
+export type RejectHandler = {
+  type: RejectHandlerType
+
+  returnNodeId?: string
+}
+
+export type TimeoutHandler = {
+  //是否开启超时处理
+  enable: boolean
+  // 超时执行的动作
+  action?: number
+  // 超时时间设置
+  timeDuration?: string
+  // 执行动作是自动提醒, 最大提醒次数
+  maxRemindCount?: number
+}
 
 export type SimpleFlowNode = {
-  id: string,
-  type: NodeType,
-  name: string,
-  showText?: string,
-  attributes?: any,
+  id: string
+  type: NodeType
+  name: string
+  showText?: string
+  attributes?: any
   // 孩子节点
-  childNode?: SimpleFlowNode,
+  childNode?: SimpleFlowNode
   // 条件节点
   conditionNodes?: SimpleFlowNode[]
+  // 候选人策略
+  candidateStrategy?: number
+  // 候选人参数
+  candidateParam?: string
+  // 多人审批方式
+  approveMethod?: ApproveMethodType
+  //通过比例
+  approveRatio: number
+  // 表单权限
+  fieldsPermission?: any[]
+  // 审批任务超时处理
+  timeoutHandler?: TimeoutHandler
+  // 审批任务拒绝处理
+  rejectHandler?: RejectHandler
 }
 
 // 条件组
-export type ConditionGroup =  {
+export type ConditionGroup = {
   // 条件组的逻辑关系是否为且
-  and : boolean,
+  and: boolean
   // 条件数组
   conditions: Condition[]
 }
@@ -175,84 +201,83 @@ export type ConditionGroup =  {
 // 条件
 export type Condition = {
   // 条件规则的逻辑关系是否为且
-  and : boolean,
+  and: boolean
   rules: ConditionRule[]
 }
 
 // 条件规则
 export type ConditionRule = {
-  type : number,
-  opName: string,
-  opCode: string,
-  leftSide: string,
+  type: number
+  opName: string
+  opCode: string
+  leftSide: string
   rightSide: string
 }
 
-
-export const NODE_DEFAULT_TEXT = new Map<number,string>()
+export const NODE_DEFAULT_TEXT = new Map<number, string>()
 NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置审批人')
 NODE_DEFAULT_TEXT.set(NodeType.COPY_TASK_NODE, '请配置抄送人')
 NODE_DEFAULT_TEXT.set(NodeType.CONDITION_NODE, '请设置条件')
 
-export const NODE_DEFAULT_NAME = new Map<number,string>()
+export const NODE_DEFAULT_NAME = new Map<number, string>()
 NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人')
 NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人')
 NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
 
-export const APPROVE_METHODS: DictDataVO [] = [
+export const APPROVE_METHODS: DictDataVO[] = [
   { label: '随机挑选一人审批', value: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE },
   { label: '多人会签(按通过比例%)', value: ApproveMethodType.APPROVE_BY_RATIO },
   { label: '多人或签(一人通过或拒绝)', value: ApproveMethodType.ANY_APPROVE },
   { label: '依次审批(按顺序依次审批)', value: ApproveMethodType.SEQUENTIAL_APPROVE }
 ]
 
-export const CONDITION_CONFIG_TYPES: DictDataVO [] = [
+export const CONDITION_CONFIG_TYPES: DictDataVO[] = [
   { label: '条件表达式', value: 1 },
   { label: '条件规则', value: 2 }
 ]
 
 // 时间单位类型
-export const TIME_UNIT_TYPES: DictDataVO [] = [
+export const TIME_UNIT_TYPES: DictDataVO[] = [
   { label: '分钟', value: TimeUnitType.MINUTE },
   { label: '小时', value: TimeUnitType.HOUR },
-  { label: '天', value: TimeUnitType.DAY },
+  { label: '天', value: TimeUnitType.DAY }
 ]
 // 超时处理执行动作类型
-export const TIMEOUT_HANDLER_ACTION_TYPES: DictDataVO [] = [
+export const TIMEOUT_HANDLER_ACTION_TYPES: DictDataVO[] = [
   { label: '自动提醒', value: 1 },
   { label: '自动同意', value: 2 },
-  { label: '自动拒绝', value: 3 },
+  { label: '自动拒绝', value: 3 }
 ]
-export const REJECT_HANDLER_TYPES: DictDataVO [] = [
+export const REJECT_HANDLER_TYPES: DictDataVO[] = [
   { label: '终止流程', value: RejectHandlerType.FINISH_PROCESS },
   { label: '驳回到指定节点', value: RejectHandlerType.RETURN_USER_TASK }
   // { label: '结束任务', value: RejectHandlerType.FINISH_TASK }
 ]
 
 // 比较运算符
-export const COMPARISON_OPERATORS : DictDataVO = [
+export const COMPARISON_OPERATORS: DictDataVO = [
   {
     value: '==',
-    label: '等于',
+    label: '等于'
   },
   {
     value: '!=',
-    label: '不等于',
+    label: '不等于'
   },
   {
     value: '>',
-    label: '大于',
+    label: '大于'
   },
   {
     value: '>=',
-    label: '大于等于',
+    label: '大于等于'
   },
   {
     value: '<',
-    label: '小于',
+    label: '小于'
   },
   {
     value: '<=',
-    label: '小于等于',
+    label: '小于等于'
   }
 ]
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 86ee6717..1f6fe00a 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -32,7 +32,7 @@
           <el-form label-position="top">
             <el-form-item label="审批人设置" prop="candidateStrategy">
               <el-radio-group
-                v-model="currentNode.attributes.candidateStrategy"
+                v-model="currentNode.candidateStrategy"
                 @change="changeCandidateStrategy"
               >
                 <el-radio
@@ -47,7 +47,7 @@
             </el-form-item>
 
             <el-form-item
-              v-if="currentNode.attributes.candidateStrategy == CandidateStrategy.ROLE"
+              v-if="currentNode.candidateStrategy == CandidateStrategy.ROLE"
               label="指定角色"
               prop="candidateParam"
             >
@@ -62,8 +62,8 @@
             </el-form-item>
             <el-form-item
               v-if="
-                currentNode.attributes.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
-                currentNode.attributes.candidateStrategy == CandidateStrategy.DEPT_LEADER
+                currentNode.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
+                currentNode.candidateStrategy == CandidateStrategy.DEPT_LEADER
               "
               label="指定部门"
               prop="candidateParam"
@@ -82,7 +82,7 @@
               />
             </el-form-item>
             <el-form-item
-              v-if="currentNode.attributes.candidateStrategy == CandidateStrategy.POST"
+              v-if="currentNode.candidateStrategy == CandidateStrategy.POST"
               label="指定岗位"
               prop="candidateParam"
               span="24"
@@ -97,7 +97,7 @@
               </el-select>
             </el-form-item>
             <el-form-item
-              v-if="currentNode.attributes.candidateStrategy == CandidateStrategy.USER"
+              v-if="currentNode.candidateStrategy == CandidateStrategy.USER"
               label="指定用户"
               prop="candidateParam"
               span="24"
@@ -118,7 +118,7 @@
               </el-select>
             </el-form-item>
             <el-form-item
-              v-if="currentNode.attributes.candidateStrategy === CandidateStrategy.USER_GROUP"
+              v-if="currentNode.candidateStrategy === CandidateStrategy.USER_GROUP"
               label="指定用户组"
               prop="candidateParam"
             >
@@ -132,7 +132,7 @@
               </el-select>
             </el-form-item>
             <el-form-item
-              v-if="currentNode.attributes.candidateStrategy === CandidateStrategy.EXPRESSION"
+              v-if="currentNode.candidateStrategy === CandidateStrategy.EXPRESSION"
               label="流程表达式"
               prop="candidateParam"
             >
@@ -144,10 +144,7 @@
               />
             </el-form-item>
             <el-form-item label="多人审批方式" prop="approveMethod">
-              <el-radio-group
-                v-model="currentNode.attributes.approveMethod"
-                @change="approveMethodChanged"
-              >
+              <el-radio-group v-model="currentNode.approveMethod" @change="approveMethodChanged">
                 <div class="flex-col">
                   <div
                     v-for="(item, index) in APPROVE_METHODS"
@@ -165,14 +162,14 @@
                       {{ item.label }}
                     </el-radio>
                     <el-input-number
-                      v-model="currentNode.attributes.approveRatio"
+                      v-model="currentNode.approveRatio"
                       :min="10"
                       :max="100"
                       :step="10"
                       size="small"
                       v-if="
                         item.value === ApproveMethodType.APPROVE_BY_RATIO &&
-                        currentNode.attributes.approveMethod === ApproveMethodType.APPROVE_BY_RATIO
+                        currentNode.approveMethod === ApproveMethodType.APPROVE_BY_RATIO
                       "
                     />
                   </div>
@@ -181,7 +178,7 @@
             </el-form-item>
             <el-divider content-position="left">审批人拒绝时</el-divider>
             <el-form-item prop="rejectHandler">
-              <el-radio-group v-model="currentNode.attributes.rejectHandler.type">
+              <el-radio-group v-model="currentNode.rejectHandler!.type">
                 <div class="flex-col">
                   <div v-for="(item, index) in REJECT_HANDLER_TYPES" :key="index">
                     <el-radio :key="item.value" :value="item.value" :label="item.label" />
@@ -191,12 +188,12 @@
             </el-form-item>
 
             <el-form-item
-              v-if="currentNode.attributes.rejectHandler.type == RejectHandlerType.RETURN_USER_TASK"
+              v-if="currentNode.rejectHandler!.type == RejectHandlerType.RETURN_USER_TASK"
               label="驳回节点"
               prop="rejectHandlerNode"
             >
               <el-select
-                v-model="currentNode.attributes.rejectHandler.returnNodeId"
+                v-model="currentNode.rejectHandler!.returnNodeId"
                 clearable
                 style="width: 100%"
               >
@@ -211,7 +208,7 @@
             <el-divider content-position="left">审批人超时未处理时</el-divider>
             <el-form-item label="启用开关" prop="timeoutHandlerEnable">
               <el-switch
-                v-model="currentNode.attributes.timeoutHandler.enable"
+                v-model="currentNode.timeoutHandler!.enable"
                 active-text="开启"
                 inactive-text="关闭"
                 @change="timeoutHandlerChange"
@@ -220,9 +217,9 @@
             <el-form-item
               label="执行动作"
               prop="timeoutHandlerAction"
-              v-if="currentNode.attributes.timeoutHandler.enable"
+              v-if="currentNode.timeoutHandler?.enable"
             >
-              <el-radio-group v-model="currentNode.attributes.timeoutHandler.action">
+              <el-radio-group v-model="currentNode.timeoutHandler!.action">
                 <el-radio-button
                   v-for="item in TIMEOUT_HANDLER_ACTION_TYPES"
                   :key="item.value"
@@ -234,7 +231,7 @@
             <el-form-item
               label="超时时间设置"
               prop="timeoutHandlerTimeDuration"
-              v-if="currentNode.attributes.timeoutHandler.enable"
+              v-if="currentNode.timeoutHandler?.enable"
             >
               <span class="mr-2">当超过</span>
               <el-input-number
@@ -262,13 +259,10 @@
             <el-form-item
               label="最大提醒次数"
               prop="timeoutHandlerMaxRemindCount"
-              v-if="
-                currentNode.attributes.timeoutHandler.enable &&
-                currentNode.attributes.timeoutHandler.action === 1
-              "
+              v-if="currentNode.timeoutHandler?.enable && currentNode.timeoutHandler?.action === 1"
             >
               <el-input-number
-                v-model="currentNode.attributes.timeoutHandler.maxRemindCount"
+                v-model="currentNode.timeoutHandler!.maxRemindCount"
                 :min="1"
                 :max="10"
               />
@@ -289,7 +283,7 @@
           </div>
           <div
             class="field-setting-item"
-            v-for="(item, index) in currentNode.attributes.fieldsPermission"
+            v-for="(item, index) in currentNode.fieldsPermission"
             :key="index"
           >
             <div class="field-setting-item-label"> {{ item.title }} </div>
@@ -371,9 +365,9 @@ const closeDrawer = () => {
   settingVisible.value = false
 }
 const saveConfig = () => {
-  currentNode.value.attributes.candidateParam = candidateParamArray.value?.join(',')
-  if (currentNode.value.attributes.timeoutHandler.enable) {
-    currentNode.value.attributes.timeoutHandler.timeDuration = isoTimeDuration.value
+  currentNode.value.candidateParam = candidateParamArray.value?.join(',')
+  if (currentNode.value.timeoutHandler?.enable) {
+    currentNode.value.timeoutHandler.timeDuration = isoTimeDuration.value
   }
   currentNode.value.showText = getShowText()
   settingVisible.value = false
@@ -381,7 +375,7 @@ const saveConfig = () => {
 const getShowText = (): string => {
   let showText = ''
   // 指定成员
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER) {
+  if (currentNode.value.candidateStrategy === CandidateStrategy.USER) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
       userOptions?.value.forEach((item) => {
@@ -393,7 +387,7 @@ const getShowText = (): string => {
     }
   }
   // 指定角色
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.ROLE) {
+  if (currentNode.value.candidateStrategy === CandidateStrategy.ROLE) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
       roleOptions?.value.forEach((item) => {
@@ -406,8 +400,8 @@ const getShowText = (): string => {
   }
   // 指定部门
   if (
-    currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
-    currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_LEADER
+    currentNode.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
+    currentNode.value.candidateStrategy === CandidateStrategy.DEPT_LEADER
   ) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
@@ -416,7 +410,7 @@ const getShowText = (): string => {
           candidateNames.push(item.name)
         }
       })
-      if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_MEMBER) {
+      if (currentNode.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER) {
         showText = `部门成员：${candidateNames.join(',')}`
       } else {
         showText = `部门的负责人：${candidateNames.join(',')}`
@@ -425,7 +419,7 @@ const getShowText = (): string => {
   }
 
   // 指定岗位
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.POST) {
+  if (currentNode.value.candidateStrategy === CandidateStrategy.POST) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
       postOptions?.value.forEach((item) => {
@@ -437,7 +431,7 @@ const getShowText = (): string => {
     }
   }
   // 指定用户组
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER_GROUP) {
+  if (currentNode.value.candidateStrategy === CandidateStrategy.USER_GROUP) {
     if (candidateParamArray.value?.length > 0) {
       const candidateNames: string[] = []
       userGroupOptions?.value.forEach((item) => {
@@ -450,16 +444,16 @@ const getShowText = (): string => {
   }
 
   // 发起人自选
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.START_USER_SELECT) {
+  if (currentNode.value.candidateStrategy === CandidateStrategy.START_USER_SELECT) {
     showText = `发起人自选`
   }
   // 发起人自己
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.START_USER) {
+  if (currentNode.value.candidateStrategy === CandidateStrategy.START_USER) {
     showText = `发起人自己`
   }
 
   // 流程表达式
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.EXPRESSION) {
+  if (currentNode.value.candidateStrategy === CandidateStrategy.EXPRESSION) {
     if (candidateParamArray.value?.length > 0) {
       showText = `流程表达式：${candidateParamArray.value[0]}`
     }
@@ -472,22 +466,23 @@ const open = () => {
 //  修改当前编辑的节点， 由父组件传过来
 const setCurrentNode = (node: SimpleFlowNode) => {
   currentNode.value = node
-  currentNode.value.attributes.fieldsPermission =
-    node.attributes.fieldsPermission || getDefaultFieldsPermission(formFields?.value)
-  const strCandidateParam = node.attributes?.candidateParam
+  currentNode.value.fieldsPermission =
+    node.fieldsPermission || getDefaultFieldsPermission(formFields?.value)
+  const strCandidateParam = node?.candidateParam
   if (strCandidateParam) {
     candidateParamArray.value = strCandidateParam.split(',').map((item) => +item)
   }
-  if (currentNode.value.attributes?.candidateStrategy === CandidateStrategy.START_USER) {
+  if (
+    (candidateParamArray.value.length <= 1 &&
+      currentNode.value.candidateStrategy === CandidateStrategy.USER) ||
+    currentNode.value.candidateStrategy === CandidateStrategy.START_USER
+  ) {
     notAllowedMultiApprovers.value = true
   } else {
     notAllowedMultiApprovers.value = false
   }
-  if (
-    currentNode.value.attributes?.timeoutHandler?.enable &&
-    currentNode.value.attributes?.timeoutHandler?.timeDuration
-  ) {
-    const strTimeDuration = currentNode.value.attributes.timeoutHandler.timeDuration
+  if (currentNode.value.timeoutHandler?.enable && currentNode.value.timeoutHandler?.timeDuration) {
+    const strTimeDuration = currentNode.value.timeoutHandler.timeDuration
     let parseTime = strTimeDuration.slice(2, strTimeDuration.length - 1)
     let parseTimeUnit = strTimeDuration.slice(strTimeDuration.length - 1)
     timeDuration.value = parseInt(parseTime)
@@ -503,10 +498,10 @@ defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
 
 const changeCandidateStrategy = () => {
   candidateParamArray.value = []
-  currentNode.value.attributes.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
+  currentNode.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
   if (
-    currentNode.value.attributes.candidateStrategy === CandidateStrategy.START_USER ||
-    currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER
+    currentNode.value.candidateStrategy === CandidateStrategy.START_USER ||
+    currentNode.value.candidateStrategy === CandidateStrategy.USER
   ) {
     notAllowedMultiApprovers.value = true
   } else {
@@ -517,10 +512,10 @@ const changeCandidateStrategy = () => {
 const changedCandidateUsers = () => {
   if (
     candidateParamArray.value?.length <= 1 &&
-    currentNode.value.attributes?.candidateStrategy === CandidateStrategy.USER
+    currentNode.value.candidateStrategy === CandidateStrategy.USER
   ) {
-    currentNode.value.attributes.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
-    currentNode.value.attributes.rejectHandler.type = RejectHandlerType.FINISH_PROCESS
+    currentNode.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
+    currentNode.value.rejectHandler!.type = RejectHandlerType.FINISH_PROCESS
     notAllowedMultiApprovers.value = true
   } else {
     notAllowedMultiApprovers.value = false
@@ -539,10 +534,10 @@ const blurEvent = () => {
     currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
 }
 const approveMethodChanged = () => {
-  currentNode.value.attributes.rejectHandler.type = RejectHandlerType.FINISH_PROCESS
-  const approveMethod = currentNode.value.attributes?.approveMethod
+  currentNode.value.rejectHandler!.type = RejectHandlerType.FINISH_PROCESS
+  const approveMethod = currentNode.value?.approveMethod
   if (approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
-    currentNode.value.attributes.approveRatio = 100
+    currentNode.value.approveRatio = 100
   }
 }
 // 默认 6小时
@@ -565,11 +560,11 @@ const isoTimeDuration = computed(() => {
 
 // 超时开关改变
 const timeoutHandlerChange = () => {
-  if (currentNode.value.attributes.timeoutHandler.enable) {
+  if (currentNode.value.timeoutHandler?.enable) {
     timeUnit.value = 2
     timeDuration.value = 6
-    currentNode.value.attributes.timeoutHandler.action = 1
-    currentNode.value.attributes.timeoutHandler.maxRemindCount = 1
+    currentNode.value.timeoutHandler.action = 1
+    currentNode.value.timeoutHandler.maxRemindCount = 1
   }
 }
 

From 88356c7b2ad7488c44840b8a8c4934972f612fde Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 21 Jun 2024 09:59:16 +0800
Subject: [PATCH 35/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E5=99=A8-=20=E8=8A=82=E7=82=B9=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |  24 +-
 .../SimpleProcessDesignerV2/src/consts.ts     |   2 +-
 .../src/nodes-config/CopyTaskNodeConfig.vue   | 215 ++++++-----
 .../src/nodes-config/UserTaskNodeConfig.vue   | 357 +++++++++++-------
 4 files changed, 372 insertions(+), 226 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index 26aed76c..136b0a54 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -81,15 +81,16 @@ const addNode = (type: number) => {
       type: NodeType.USER_TASK_NODE,
       approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
       candidateStrategy: CandidateStrategy.USER,
-      candidateParam: undefined,
-      fieldsPermission: undefined,
+      // candidateParam: undefined,
+      // fieldsPermission: undefined,
       // 超时处理
-      timeoutHandler: {
-        enable: false
-      },
       rejectHandler: {
         type: RejectHandlerType.FINISH_PROCESS
       },
+      timeoutHandler: {
+        enable: false
+      },
+
       childNode: props.childNode
       // 审批节点配置
       // attributes: {
@@ -114,12 +115,15 @@ const addNode = (type: number) => {
       name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
       showText: '',
       type: NodeType.COPY_TASK_NODE,
+      candidateStrategy: CandidateStrategy.USER,
+      candidateParam: undefined,
+      fieldsPermission: undefined,
       // 审批节点配置
-      attributes: {
-        candidateStrategy: CandidateStrategy.USER,
-        candidateParam: undefined,
-        fieldsPermission: undefined
-      },
+      // attributes: {
+      //   candidateStrategy: CandidateStrategy.USER,
+      //   candidateParam: undefined,
+      //   fieldsPermission: undefined
+      // },
       childNode: props.childNode
     }
     emits('update:childNode', data)
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 6534d4e3..0b0411cf 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -181,7 +181,7 @@ export type SimpleFlowNode = {
   // 多人审批方式
   approveMethod?: ApproveMethodType
   //通过比例
-  approveRatio: number
+  approveRatio?: number
   // 表单权限
   fieldsPermission?: any[]
   // 审批任务超时处理
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index 436cdba9..ee863c99 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -16,19 +16,22 @@
           v-mountedFocus
           v-model="currentNode.name"
           :placeholder="currentNode.name"
-          />
-        <div v-else class="node-name" >{{ currentNode.name }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"/></div>
-        
+        />
+        <div v-else class="node-name"
+          >{{ currentNode.name }}
+          <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"
+        /></div>
+
         <div class="divide-line"></div>
       </div>
     </template>
-    <el-tabs type="border-card">
-      <el-tab-pane label="抄送人">
+    <el-tabs type="border-card" v-model="activeTabName">
+      <el-tab-pane label="抄送人" name="user">
         <div>
-          <el-form label-position="top">
+          <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
             <el-form-item label="抄送人设置" prop="candidateStrategy">
               <el-radio-group
-                v-model="currentNode.attributes.candidateStrategy"
+                v-model="configForm.candidateStrategy"
                 @change="changeCandidateStrategy"
               >
                 <el-radio
@@ -43,11 +46,16 @@
             </el-form-item>
 
             <el-form-item
-              v-if="currentNode.attributes.candidateStrategy == CandidateStrategy.ROLE"
+              v-if="configForm.candidateStrategy == CandidateStrategy.ROLE"
               label="指定角色"
-              prop="candidateParam"
+              prop="candidateParamArray"
             >
-              <el-select v-model="candidateParamArray" clearable multiple style="width: 100%">
+              <el-select
+                v-model="configForm.candidateParamArray"
+                clearable
+                multiple
+                style="width: 100%"
+              >
                 <el-option
                   v-for="item in roleOptions"
                   :key="item.id"
@@ -58,16 +66,16 @@
             </el-form-item>
             <el-form-item
               v-if="
-                currentNode.attributes.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
-                currentNode.attributes.candidateStrategy == CandidateStrategy.DEPT_LEADER
+                configForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
+                configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER
               "
               label="指定部门"
-              prop="candidateParam"
+              prop="candidateParamArray"
               span="24"
             >
               <el-tree-select
                 ref="treeRef"
-                v-model="candidateParamArray"
+                v-model="configForm.candidateParamArray"
                 :data="deptTreeOptions"
                 :props="defaultProps"
                 empty-text="加载中，请稍后"
@@ -78,28 +86,33 @@
               />
             </el-form-item>
             <el-form-item
-              v-if="currentNode.attributes.candidateStrategy == CandidateStrategy.POST"
+              v-if="configForm.candidateStrategy == CandidateStrategy.POST"
               label="指定岗位"
-              prop="candidateParam"
+              prop="candidateParamArray"
               span="24"
             >
-              <el-select v-model="candidateParamArray" clearable multiple style="width: 100%">
+              <el-select
+                v-model="configForm.candidateParamArray"
+                clearable
+                multiple
+                style="width: 100%"
+              >
                 <el-option
                   v-for="item in postOptions"
                   :key="item.id"
                   :label="item.name"
-                  :value="item.id"
+                  :value="item.id!"
                 />
               </el-select>
             </el-form-item>
             <el-form-item
-              v-if="currentNode.attributes.candidateStrategy == CandidateStrategy.USER"
+              v-if="configForm.candidateStrategy == CandidateStrategy.USER"
               label="指定用户"
-              prop="candidateParam"
+              prop="candidateParamArray"
               span="24"
             >
               <el-select
-                v-model="candidateParamArray"
+                v-model="configForm.candidateParamArray"
                 clearable
                 multiple
                 style="width: 100%"
@@ -113,11 +126,16 @@
               </el-select>
             </el-form-item>
             <el-form-item
-              v-if="currentNode.attributes.candidateStrategy === CandidateStrategy.USER_GROUP"
+              v-if="configForm.candidateStrategy === CandidateStrategy.USER_GROUP"
               label="指定用户组"
-              prop="candidateParam"
+              prop="candidateParamArray"
             >
-              <el-select v-model="candidateParamArray" clearable multiple style="width: 100%">
+              <el-select
+                v-model="configForm.candidateParamArray"
+                clearable
+                multiple
+                style="width: 100%"
+              >
                 <el-option
                   v-for="item in userGroupOptions"
                   :key="item.id"
@@ -128,46 +146,43 @@
             </el-form-item>
 
             <el-form-item
-              v-if="currentNode.attributes.candidateStrategy === CandidateStrategy.EXPRESSION"
+              v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
               label="流程表达式"
-              prop="candidateParam"
+              prop="candidateParamArray"
             >
               <el-input
                 type="textarea"
-                v-model="candidateParamArray[0]"
+                v-model="configForm.candidateParamArray[0]"
                 clearable
                 style="width: 100%"
               />
             </el-form-item>
-
           </el-form>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="表单字段权限" v-if ="formType === 10">
+      <el-tab-pane label="表单字段权限" name="fields" v-if="formType === 10">
         <div class="field-setting-pane">
           <div class="field-setting-desc">字段权限</div>
           <div class="field-permit-title">
-            <div class="setting-title-label first-title">
-              字段名称
-            </div>
+            <div class="setting-title-label first-title"> 字段名称 </div>
             <div class="other-titles">
-              <span class="setting-title-label">可编辑</span>
               <span class="setting-title-label">只读</span>
+              <span class="setting-title-label">可编辑</span>
               <span class="setting-title-label">隐藏</span>
             </div>
           </div>
           <div
             class="field-setting-item"
-            v-for="(item, index) in currentNode.attributes.fieldsPermission"
+            v-for="(item, index) in configForm.fieldsPermission"
             :key="index"
           >
             <div class="field-setting-item-label"> {{ item.title }} </div>
             <el-radio-group class="field-setting-item-group" v-model="item.permission">
               <div class="item-radio-wrap">
-                <el-radio value="1" size="large" label="1" disabled><span></span></el-radio>
+                <el-radio value="1" size="large" label="1"><span></span></el-radio>
               </div>
               <div class="item-radio-wrap">
-                <el-radio value="2" size="large" label="2"><span></span></el-radio>
+                <el-radio value="2" size="large" label="2" disabled><span></span></el-radio>
               </div>
               <div class="item-radio-wrap">
                 <el-radio value="3" size="large" label="3"><span></span></el-radio>
@@ -186,8 +201,8 @@
     </template>
   </el-drawer>
 </template>
-<script setup lang='ts'>
-import { SimpleFlowNode, CandidateStrategy,NodeType, NODE_DEFAULT_NAME } from '../consts'
+<script setup lang="ts">
+import { SimpleFlowNode, CandidateStrategy, NodeType, NODE_DEFAULT_NAME } from '../consts'
 import { getDefaultFieldsPermission } from '../utils'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as RoleApi from '@/api/system/role'
@@ -196,6 +211,7 @@ import * as PostApi from '@/api/system/post'
 import * as UserApi from '@/api/system/user'
 import * as UserGroupApi from '@/api/bpm/userGroup'
 import { defaultProps } from '@/utils/tree'
+import { cloneDeep } from 'lodash-es'
 defineOptions({
   name: 'CopyTaskNodeConfig'
 })
@@ -212,60 +228,87 @@ const currentNode = ref<SimpleFlowNode>(props.flowNode)
 const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') // 角色列表
 const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
 const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // 用户列表
-const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList')  // 部门列表
+const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList') // 部门列表
 const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // 用户组列表
 const deptTreeOptions = inject('deptTree') // 部门树
 const formType = inject('formType') // 表单类型
 const formFields = inject<Ref<string[]>>('formFields')
 
 // 抄送人策略， 去掉发起人自选 和 发起人自己
-const copyUserStrategies = computed( ()=> {
-  return getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)
-            .filter(item => item.value !== CandidateStrategy.START_USER_SELECT && item.value !== CandidateStrategy.START_USER );
+const copyUserStrategies = computed(() => {
+  return getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY).filter(
+    (item) =>
+      item.value !== CandidateStrategy.START_USER_SELECT &&
+      item.value !== CandidateStrategy.START_USER
+  )
 })
+// 激活的 Tab 标签页
+const activeTabName = ref('user')
+const formRef = ref() // 表单 Ref
 
-// 选中的参数
-const candidateParamArray = ref<any[]>([])
+const configForm = ref<any>({
+  candidateParamArray: [],
+  candidateStrategy: CandidateStrategy.USER,
+  fieldsPermission: []
+})
+// 表单校验规则
+const formRules = reactive({
+  candidateStrategy: [{ required: true }],
+  candidateParamArray: [{ required: true, message: '选项不能为空', trigger: 'blur' }]
+})
 
 // 关闭
 const closeDrawer = () => {
   settingVisible.value = false
 }
 // 保存配置
-const saveConfig = () => {
-  currentNode.value.attributes.candidateParam = candidateParamArray.value?.join(',')
-  currentNode.value.showText = getShowText()
+const saveConfig = async () => {
+  activeTabName.value = 'user'
+  if (!formRef) return false
+  const valid = await formRef.value.validate()
+  if (!valid) return false
+  const showText = getShowText()
+  if (!showText) return false
+  currentNode.value.candidateParam = configForm.value.candidateParamArray?.join(',')
+  currentNode.value.candidateStrategy = configForm.value.candidateStrategy
+  currentNode.value.showText = showText
+  currentNode.value.fieldsPermission = configForm.value.fieldsPermission
   settingVisible.value = false
+  return true
 }
 
 const open = () => {
   settingVisible.value = true
 }
 //  修改当前编辑的节点， 由父组件传过来
-const setCurrentNode = (node:SimpleFlowNode) => {
-  currentNode.value = node;
-  currentNode.value.attributes.fieldsPermission = node.attributes.fieldsPermission || getDefaultFieldsPermission(formFields?.value) 
-  const strCandidateParam = node.attributes?.candidateParam
-  if(strCandidateParam) {
-    candidateParamArray.value = strCandidateParam.split(',').map(item=> +item)
+const setCurrentNode = (node: SimpleFlowNode) => {
+  currentNode.value = node
+  configForm.value.fieldsPermission =
+    cloneDeep(node.fieldsPermission) || getDefaultFieldsPermission(formFields?.value)
+  configForm.value.candidateStrategy = node.candidateStrategy
+  const strCandidateParam = node?.candidateParam
+  if (node.candidateStrategy === CandidateStrategy.EXPRESSION) {
+    configForm.value.candidateParamArray[0] = strCandidateParam
+  } else {
+    if (strCandidateParam) {
+      configForm.value.candidateParamArray = strCandidateParam.split(',').map((item) => +item)
+    }
   }
 }
 
 defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
-
-
 const changeCandidateStrategy = () => {
-  candidateParamArray.value = []
+  configForm.value.candidateParamArray = []
 }
 // TODO 貌似可以和 UserTaskNodeConfig 重复了， 如何共用??
-const getShowText = () : string => {
+const getShowText = (): string => {
   let showText = ''
   // 指定成员
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER) {
-    if (candidateParamArray.value?.length > 0) {
+  if (configForm.value.candidateStrategy === CandidateStrategy.USER) {
+    if (configForm.value.candidateParamArray?.length > 0) {
       const candidateNames: string[] = []
       userOptions?.value.forEach((item) => {
-        if (candidateParamArray.value.includes(item.id)) {
+        if (configForm.value.candidateParamArray.includes(item.id)) {
           candidateNames.push(item.nickname)
         }
       })
@@ -273,78 +316,80 @@ const getShowText = () : string => {
     }
   }
   // 指定角色
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.ROLE) {
-    if (candidateParamArray.value?.length > 0) {
+  if (configForm.value.candidateStrategy === CandidateStrategy.ROLE) {
+    if (configForm.value.candidateParamArray?.length > 0) {
       const candidateNames: string[] = []
       roleOptions?.value.forEach((item) => {
-        if (candidateParamArray.value.includes(item.id)) {
+        if (configForm.value.candidateParamArray.includes(item.id)) {
           candidateNames.push(item.name)
         }
       })
       showText = `指定角色：${candidateNames.join(',')}`
     }
   }
-   // 指定部门
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_MEMBER 
-      || currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_LEADER ) {
-    if (candidateParamArray.value?.length > 0) {
+  // 指定部门
+  if (
+    configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
+    configForm.value.candidateStrategy === CandidateStrategy.DEPT_LEADER
+  ) {
+    if (configForm.value.candidateParamArray?.length > 0) {
       const candidateNames: string[] = []
       deptOptions?.value.forEach((item) => {
-        if (candidateParamArray.value.includes(item.id)) {
+        if (configForm.value.candidateParamArray.includes(item.id)) {
           candidateNames.push(item.name)
         }
       })
-      if(currentNode.value.attributes.candidateStrategy === CandidateStrategy.DEPT_MEMBER){
+      if (currentNode.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER) {
         showText = `部门成员：${candidateNames.join(',')}`
       } else {
         showText = `部门的负责人：${candidateNames.join(',')}`
       }
     }
   }
-   // 指定岗位
-   if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.POST) {
-    if (candidateParamArray.value?.length > 0) {
+  // 指定岗位
+  if (configForm.value.candidateStrategy === CandidateStrategy.POST) {
+    if (configForm.value.candidateParamArray?.length > 0) {
       const candidateNames: string[] = []
       postOptions?.value.forEach((item) => {
-        if (candidateParamArray.value.includes(item.id)) {
+        if (configForm.value.candidateParamArray.includes(item.id)) {
           candidateNames.push(item.name)
         }
       })
       showText = `指定岗位: ${candidateNames.join(',')}`
     }
   }
-   // 指定用户组
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.USER_GROUP) {
-    if (candidateParamArray.value?.length > 0) {
+  // 指定用户组
+  if (configForm.value.candidateStrategy === CandidateStrategy.USER_GROUP) {
+    if (configForm.value.candidateParamArray?.length > 0) {
       const candidateNames: string[] = []
       userGroupOptions?.value.forEach((item) => {
-        if (candidateParamArray.value.includes(item.id)) {
+        if (configForm.value.candidateParamArray.includes(item.id)) {
           candidateNames.push(item.name)
         }
       })
       showText = `指定用户组: ${candidateNames.join(',')}`
     }
   }
-   // 流程表达式
-  if (currentNode.value.attributes.candidateStrategy === CandidateStrategy.EXPRESSION) {
-    if (candidateParamArray.value?.length > 0) {
-      showText = `流程表达式：${candidateParamArray.value[0]}`
+  // 流程表达式
+  if (configForm.value.candidateStrategy === CandidateStrategy.EXPRESSION) {
+    if (configForm.value.candidateParamArray?.length > 0) {
+      showText = `流程表达式：${configForm.value.candidateParamArray[0]}`
     }
   }
-   return showText
+  return showText
 }
 // 显示名称输入框
 const showInput = ref(false)
 
 const clickIcon = () => {
-  showInput.value = true;
+  showInput.value = true
 }
 // 输入框失去焦点
 const blurEvent = () => {
   showInput.value = false
-  currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string
+  currentNode.value.name =
+    currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string)
 }
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 1f6fe00a..0acb648d 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -26,13 +26,13 @@
         <div class="divide-line"></div>
       </div>
     </template>
-    <el-tabs type="border-card">
-      <el-tab-pane label="审批人">
+    <el-tabs type="border-card" v-model="activeTabName">
+      <el-tab-pane label="审批人" name="user">
         <div>
-          <el-form label-position="top">
+          <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
             <el-form-item label="审批人设置" prop="candidateStrategy">
               <el-radio-group
-                v-model="currentNode.candidateStrategy"
+                v-model="configForm.candidateStrategy"
                 @change="changeCandidateStrategy"
               >
                 <el-radio
@@ -47,11 +47,16 @@
             </el-form-item>
 
             <el-form-item
-              v-if="currentNode.candidateStrategy == CandidateStrategy.ROLE"
+              v-if="configForm.candidateStrategy == CandidateStrategy.ROLE"
               label="指定角色"
-              prop="candidateParam"
+              prop="candidateParamArray"
             >
-              <el-select v-model="candidateParamArray" clearable multiple style="width: 100%">
+              <el-select
+                v-model="configForm.candidateParamArray"
+                clearable
+                multiple
+                style="width: 100%"
+              >
                 <el-option
                   v-for="item in roleOptions"
                   :key="item.id"
@@ -62,16 +67,16 @@
             </el-form-item>
             <el-form-item
               v-if="
-                currentNode.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
-                currentNode.candidateStrategy == CandidateStrategy.DEPT_LEADER
+                configForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
+                configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER
               "
               label="指定部门"
-              prop="candidateParam"
+              prop="candidateParamArray"
               span="24"
             >
               <el-tree-select
                 ref="treeRef"
-                v-model="candidateParamArray"
+                v-model="configForm.candidateParamArray"
                 :data="deptTreeOptions"
                 :props="defaultProps"
                 empty-text="加载中，请稍后"
@@ -82,28 +87,33 @@
               />
             </el-form-item>
             <el-form-item
-              v-if="currentNode.candidateStrategy == CandidateStrategy.POST"
+              v-if="configForm.candidateStrategy == CandidateStrategy.POST"
               label="指定岗位"
-              prop="candidateParam"
+              prop="candidateParamArray"
               span="24"
             >
-              <el-select v-model="candidateParamArray" clearable multiple style="width: 100%">
+              <el-select
+                v-model="configForm.candidateParamArray"
+                clearable
+                multiple
+                style="width: 100%"
+              >
                 <el-option
                   v-for="item in postOptions"
                   :key="item.id"
                   :label="item.name"
-                  :value="item.id"
+                  :value="item.id!"
                 />
               </el-select>
             </el-form-item>
             <el-form-item
-              v-if="currentNode.candidateStrategy == CandidateStrategy.USER"
+              v-if="configForm.candidateStrategy == CandidateStrategy.USER"
               label="指定用户"
-              prop="candidateParam"
+              prop="candidateParamArray"
               span="24"
             >
               <el-select
-                v-model="candidateParamArray"
+                v-model="configForm.candidateParamArray"
                 clearable
                 multiple
                 style="width: 100%"
@@ -118,11 +128,16 @@
               </el-select>
             </el-form-item>
             <el-form-item
-              v-if="currentNode.candidateStrategy === CandidateStrategy.USER_GROUP"
+              v-if="configForm.candidateStrategy === CandidateStrategy.USER_GROUP"
               label="指定用户组"
-              prop="candidateParam"
+              prop="candidateParamArray"
             >
-              <el-select v-model="candidateParamArray" clearable multiple style="width: 100%">
+              <el-select
+                v-model="configForm.candidateParamArray"
+                clearable
+                multiple
+                style="width: 100%"
+              >
                 <el-option
                   v-for="item in userGroupOptions"
                   :key="item.id"
@@ -132,19 +147,19 @@
               </el-select>
             </el-form-item>
             <el-form-item
-              v-if="currentNode.candidateStrategy === CandidateStrategy.EXPRESSION"
+              v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
               label="流程表达式"
-              prop="candidateParam"
+              prop="candidateParamArray"
             >
               <el-input
                 type="textarea"
-                v-model="candidateParamArray[0]"
+                v-model="configForm.candidateParamArray[0]"
                 clearable
                 style="width: 100%"
               />
             </el-form-item>
             <el-form-item label="多人审批方式" prop="approveMethod">
-              <el-radio-group v-model="currentNode.approveMethod" @change="approveMethodChanged">
+              <el-radio-group v-model="configForm.approveMethod" @change="approveMethodChanged">
                 <div class="flex-col">
                   <div
                     v-for="(item, index) in APPROVE_METHODS"
@@ -161,24 +176,26 @@
                     >
                       {{ item.label }}
                     </el-radio>
-                    <el-input-number
-                      v-model="currentNode.approveRatio"
-                      :min="10"
-                      :max="100"
-                      :step="10"
-                      size="small"
-                      v-if="
-                        item.value === ApproveMethodType.APPROVE_BY_RATIO &&
-                        currentNode.approveMethod === ApproveMethodType.APPROVE_BY_RATIO
-                      "
-                    />
+                    <el-form-item prop="approveRatio">
+                      <el-input-number
+                        v-model="configForm.approveRatio"
+                        :min="10"
+                        :max="100"
+                        :step="10"
+                        size="small"
+                        v-if="
+                          item.value === ApproveMethodType.APPROVE_BY_RATIO &&
+                          configForm.approveMethod === ApproveMethodType.APPROVE_BY_RATIO
+                        "
+                      />
+                    </el-form-item>
                   </div>
                 </div>
               </el-radio-group>
             </el-form-item>
             <el-divider content-position="left">审批人拒绝时</el-divider>
-            <el-form-item prop="rejectHandler">
-              <el-radio-group v-model="currentNode.rejectHandler!.type">
+            <el-form-item prop="rejectHandlerType">
+              <el-radio-group v-model="configForm.rejectHandlerType">
                 <div class="flex-col">
                   <div v-for="(item, index) in REJECT_HANDLER_TYPES" :key="index">
                     <el-radio :key="item.value" :value="item.value" :label="item.label" />
@@ -188,15 +205,11 @@
             </el-form-item>
 
             <el-form-item
-              v-if="currentNode.rejectHandler!.type == RejectHandlerType.RETURN_USER_TASK"
+              v-if="configForm.rejectHandlerType == RejectHandlerType.RETURN_USER_TASK"
               label="驳回节点"
-              prop="rejectHandlerNode"
+              prop="returnNodeId"
             >
-              <el-select
-                v-model="currentNode.rejectHandler!.returnNodeId"
-                clearable
-                style="width: 100%"
-              >
+              <el-select v-model="configForm.returnNodeId" clearable style="width: 100%">
                 <el-option
                   v-for="item in returnTaskList"
                   :key="item.id"
@@ -208,7 +221,7 @@
             <el-divider content-position="left">审批人超时未处理时</el-divider>
             <el-form-item label="启用开关" prop="timeoutHandlerEnable">
               <el-switch
-                v-model="currentNode.timeoutHandler!.enable"
+                v-model="configForm.timeoutHandlerEnable"
                 active-text="开启"
                 inactive-text="关闭"
                 @change="timeoutHandlerChange"
@@ -217,9 +230,12 @@
             <el-form-item
               label="执行动作"
               prop="timeoutHandlerAction"
-              v-if="currentNode.timeoutHandler?.enable"
+              v-if="configForm.timeoutHandlerEnable"
             >
-              <el-radio-group v-model="currentNode.timeoutHandler!.action">
+              <el-radio-group
+                v-model="configForm.timeoutHandlerAction"
+                @change="timeoutActionChanged"
+              >
                 <el-radio-button
                   v-for="item in TIMEOUT_HANDLER_ACTION_TYPES"
                   :key="item.value"
@@ -228,19 +244,17 @@
                 />
               </el-radio-group>
             </el-form-item>
-            <el-form-item
-              label="超时时间设置"
-              prop="timeoutHandlerTimeDuration"
-              v-if="currentNode.timeoutHandler?.enable"
-            >
+            <el-form-item label="超时时间设置" v-if="configForm.timeoutHandlerEnable">
               <span class="mr-2">当超过</span>
-              <el-input-number
-                class="mr-2"
-                :style="{ width: '100px' }"
-                v-model="timeDuration"
-                :min="1"
-                controls-position="right"
-              />
+              <el-form-item prop="timeDuration">
+                <el-input-number
+                  class="mr-2"
+                  :style="{ width: '100px' }"
+                  v-model="configForm.timeDuration"
+                  :min="1"
+                  controls-position="right"
+                />
+              </el-form-item>
               <el-select
                 v-model="timeUnit"
                 class="mr-2"
@@ -258,19 +272,15 @@
             </el-form-item>
             <el-form-item
               label="最大提醒次数"
-              prop="timeoutHandlerMaxRemindCount"
-              v-if="currentNode.timeoutHandler?.enable && currentNode.timeoutHandler?.action === 1"
+              prop="maxRemindCount"
+              v-if="configForm.timeoutHandlerEnable && configForm.timeoutHandlerAction === 1"
             >
-              <el-input-number
-                v-model="currentNode.timeoutHandler!.maxRemindCount"
-                :min="1"
-                :max="10"
-              />
+              <el-input-number v-model="configForm.maxRemindCount" :min="1" :max="10" />
             </el-form-item>
           </el-form>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="表单字段权限" v-if="formType === 10">
+      <el-tab-pane label="表单字段权限" name="fields" v-if="formType === 10">
         <div class="field-setting-pane">
           <div class="field-setting-desc">字段权限</div>
           <div class="field-permit-title">
@@ -283,7 +293,7 @@
           </div>
           <div
             class="field-setting-item"
-            v-for="(item, index) in currentNode.fieldsPermission"
+            v-for="(item, index) in configForm.fieldsPermission"
             :key="index"
           >
             <div class="field-setting-item-label"> {{ item.title }} </div>
@@ -334,6 +344,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'
+import { cloneDeep } from 'lodash-es'
 
 defineOptions({
   name: 'UserTaskNodeConfig'
@@ -359,27 +370,76 @@ const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList'
 const deptTreeOptions = inject('deptTree') // 部门树
 const formType = inject('formType') // 表单类型
 const formFields = inject<Ref<string[]>>('formFields')
-const candidateParamArray = ref<any[]>([])
 const returnTaskList = ref<SimpleFlowNode[]>([])
+
+const formRef = ref() // 表单 Ref
+const activeTabName = ref('user') // 激活的 Tab 标签页
+const configForm = ref<any>({
+  candidateParamArray: [],
+  candidateStrategy: CandidateStrategy.USER,
+  approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
+  approveRatio: 100,
+  rejectHandlerType: RejectHandlerType.FINISH_PROCESS,
+  returnNodeId: '',
+  timeoutHandlerEnable: false,
+  timeoutHandlerAction: 1,
+  timeDuration: 6, // 默认 6小时
+  maxRemindCount: 1, // 默认 提醒 1次
+  fieldsPermission: []
+})
+// 表单校验规则
+const formRules = reactive({
+  candidateStrategy: [{ required: true }],
+  candidateParamArray: [{ required: true, message: '该选项不能为空', trigger: 'change' }],
+  approveMethod: [{ required: true, message: '多人审批方式不能为空', trigger: 'change' }],
+  approveRatio: [{ required: true, message: '通过比例不能为空', trigger: 'blur' }],
+  returnNodeId: [{ required: true, message: '驳回节点不能为空', trigger: 'change' }],
+  timeoutHandlerEnable: [{ required: true }],
+  timeoutHandlerAction: [{ required: true }],
+  timeDuration: [{ required: true, message: '超时时间不能为空', trigger: 'blur' }],
+  maxRemindCount: [{ required: true, message: '提醒次数不能为空', trigger: 'blur' }]
+})
+// 关闭
 const closeDrawer = () => {
   settingVisible.value = false
 }
-const saveConfig = () => {
-  currentNode.value.candidateParam = candidateParamArray.value?.join(',')
-  if (currentNode.value.timeoutHandler?.enable) {
-    currentNode.value.timeoutHandler.timeDuration = isoTimeDuration.value
+// 保存配置
+const saveConfig = async () => {
+  activeTabName.value = 'user'
+  if (!formRef) return false
+  const valid = await formRef.value.validate()
+  if (!valid) return false
+  const showText = getShowText()
+  if (!showText) return false
+  currentNode.value.candidateStrategy = configForm.value.candidateStrategy
+  currentNode.value.candidateParam = configForm.value.candidateParamArray?.join(',')
+  // 设置拒绝处理
+  currentNode.value.rejectHandler = {
+    type: configForm.value.rejectHandlerType,
+    returnNodeId: configForm.value.returnNodeId
   }
+  // 设置超时处理
+  currentNode.value.timeoutHandler = {
+    enable: configForm.value.timeoutHandlerEnable,
+    action: cTimeoutAction.value,
+    timeDuration: isoTimeDuration.value,
+    maxRemindCount: cTimeoutMaxRemindCount.value
+  }
+  // 设置表单权限
+  currentNode.value.fieldsPermission = configForm.value.fieldsPermission
+
   currentNode.value.showText = getShowText()
   settingVisible.value = false
+  return true
 }
 const getShowText = (): string => {
   let showText = ''
   // 指定成员
-  if (currentNode.value.candidateStrategy === CandidateStrategy.USER) {
-    if (candidateParamArray.value?.length > 0) {
+  if (configForm.value.candidateStrategy === CandidateStrategy.USER) {
+    if (configForm.value.candidateParamArray?.length > 0) {
       const candidateNames: string[] = []
       userOptions?.value.forEach((item) => {
-        if (candidateParamArray.value.includes(item.id)) {
+        if (configForm.value.candidateParamArray.includes(item.id)) {
           candidateNames.push(item.nickname)
         }
       })
@@ -387,11 +447,11 @@ const getShowText = (): string => {
     }
   }
   // 指定角色
-  if (currentNode.value.candidateStrategy === CandidateStrategy.ROLE) {
-    if (candidateParamArray.value?.length > 0) {
+  if (configForm.value.candidateStrategy === CandidateStrategy.ROLE) {
+    if (configForm.value.candidateParamArray?.length > 0) {
       const candidateNames: string[] = []
       roleOptions?.value.forEach((item) => {
-        if (candidateParamArray.value.includes(item.id)) {
+        if (configForm.value.candidateParamArray.includes(item.id)) {
           candidateNames.push(item.name)
         }
       })
@@ -400,17 +460,17 @@ const getShowText = (): string => {
   }
   // 指定部门
   if (
-    currentNode.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
-    currentNode.value.candidateStrategy === CandidateStrategy.DEPT_LEADER
+    configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
+    configForm.value.candidateStrategy === CandidateStrategy.DEPT_LEADER
   ) {
-    if (candidateParamArray.value?.length > 0) {
+    if (configForm.value.candidateParamArray?.length > 0) {
       const candidateNames: string[] = []
       deptOptions?.value.forEach((item) => {
-        if (candidateParamArray.value.includes(item.id)) {
+        if (configForm.value.candidateParamArray.includes(item.id)) {
           candidateNames.push(item.name)
         }
       })
-      if (currentNode.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER) {
+      if (configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER) {
         showText = `部门成员：${candidateNames.join(',')}`
       } else {
         showText = `部门的负责人：${candidateNames.join(',')}`
@@ -419,11 +479,11 @@ const getShowText = (): string => {
   }
 
   // 指定岗位
-  if (currentNode.value.candidateStrategy === CandidateStrategy.POST) {
-    if (candidateParamArray.value?.length > 0) {
+  if (configForm.value.candidateStrategy === CandidateStrategy.POST) {
+    if (configForm.value.candidateParamArray?.length > 0) {
       const candidateNames: string[] = []
       postOptions?.value.forEach((item) => {
-        if (candidateParamArray.value.includes(item.id)) {
+        if (configForm.value.candidateParamArray.includes(item.id)) {
           candidateNames.push(item.name)
         }
       })
@@ -431,11 +491,11 @@ const getShowText = (): string => {
     }
   }
   // 指定用户组
-  if (currentNode.value.candidateStrategy === CandidateStrategy.USER_GROUP) {
-    if (candidateParamArray.value?.length > 0) {
+  if (configForm.value.candidateStrategy === CandidateStrategy.USER_GROUP) {
+    if (configForm.value.candidateParamArray?.length > 0) {
       const candidateNames: string[] = []
       userGroupOptions?.value.forEach((item) => {
-        if (candidateParamArray.value.includes(item.id)) {
+        if (configForm.value.candidateParamArray.includes(item.id)) {
           candidateNames.push(item.name)
         }
       })
@@ -444,18 +504,18 @@ const getShowText = (): string => {
   }
 
   // 发起人自选
-  if (currentNode.value.candidateStrategy === CandidateStrategy.START_USER_SELECT) {
+  if (configForm.value.candidateStrategy === CandidateStrategy.START_USER_SELECT) {
     showText = `发起人自选`
   }
   // 发起人自己
-  if (currentNode.value.candidateStrategy === CandidateStrategy.START_USER) {
+  if (configForm.value.candidateStrategy === CandidateStrategy.START_USER) {
     showText = `发起人自己`
   }
 
   // 流程表达式
-  if (currentNode.value.candidateStrategy === CandidateStrategy.EXPRESSION) {
-    if (candidateParamArray.value?.length > 0) {
-      showText = `流程表达式：${candidateParamArray.value[0]}`
+  if (configForm.value.candidateStrategy === CandidateStrategy.EXPRESSION) {
+    if (configForm.value.candidateParamArray?.length > 0) {
+      showText = `流程表达式：${configForm.value.candidateParamArray[0]}`
     }
   }
   return showText
@@ -466,28 +526,39 @@ const open = () => {
 //  修改当前编辑的节点， 由父组件传过来
 const setCurrentNode = (node: SimpleFlowNode) => {
   currentNode.value = node
-  currentNode.value.fieldsPermission =
-    node.fieldsPermission || getDefaultFieldsPermission(formFields?.value)
+  configForm.value.fieldsPermission =
+    cloneDeep(node.fieldsPermission) || getDefaultFieldsPermission(formFields?.value)
+  configForm.value.candidateStrategy = node.candidateStrategy
   const strCandidateParam = node?.candidateParam
-  if (strCandidateParam) {
-    candidateParamArray.value = strCandidateParam.split(',').map((item) => +item)
+  if (node.candidateStrategy === CandidateStrategy.EXPRESSION) {
+    configForm.value.candidateParamArray[0] = strCandidateParam
+  } else {
+    if (strCandidateParam) {
+      configForm.value.candidateParamArray = strCandidateParam.split(',').map((item) => +item)
+    }
+    configForm.value.candidateStrategy = node.candidateStrategy
   }
   if (
-    (candidateParamArray.value.length <= 1 &&
-      currentNode.value.candidateStrategy === CandidateStrategy.USER) ||
-    currentNode.value.candidateStrategy === CandidateStrategy.START_USER
+    (configForm.value.candidateParamArray?.length <= 1 &&
+      node.candidateStrategy === CandidateStrategy.USER) ||
+    node.candidateStrategy === CandidateStrategy.START_USER
   ) {
     notAllowedMultiApprovers.value = true
   } else {
     notAllowedMultiApprovers.value = false
   }
-  if (currentNode.value.timeoutHandler?.enable && currentNode.value.timeoutHandler?.timeDuration) {
-    const strTimeDuration = currentNode.value.timeoutHandler.timeDuration
+  configForm.value.rejectHandlerType = node.rejectHandler?.type
+  configForm.value.returnNodeId = node.rejectHandler?.returnNodeId
+  configForm.value.timeoutHandlerEnable = node.timeoutHandler?.enable
+  if (node.timeoutHandler?.enable && node.timeoutHandler?.timeDuration) {
+    const strTimeDuration = node.timeoutHandler.timeDuration
     let parseTime = strTimeDuration.slice(2, strTimeDuration.length - 1)
     let parseTimeUnit = strTimeDuration.slice(strTimeDuration.length - 1)
-    timeDuration.value = parseInt(parseTime)
+    configForm.value.timeDuration = parseInt(parseTime)
     timeUnit.value = convertTimeUnit(parseTimeUnit)
   }
+  configForm.value.timeoutHandlerAction = node.timeoutHandler?.action
+  configForm.value.maxRemindCount = node.timeoutHandler?.maxRemindCount
   // 查找可以驳回的用户节点
   const matchNodeList = []
   emits('find:returnTaskNodes', matchNodeList)
@@ -497,11 +568,11 @@ const setCurrentNode = (node: SimpleFlowNode) => {
 defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
 
 const changeCandidateStrategy = () => {
-  candidateParamArray.value = []
-  currentNode.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
+  configForm.value.candidateParamArray = []
+  configForm.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
   if (
-    currentNode.value.candidateStrategy === CandidateStrategy.START_USER ||
-    currentNode.value.candidateStrategy === CandidateStrategy.USER
+    configForm.value.candidateStrategy === CandidateStrategy.START_USER ||
+    configForm.value.candidateStrategy === CandidateStrategy.USER
   ) {
     notAllowedMultiApprovers.value = true
   } else {
@@ -511,11 +582,11 @@ const changeCandidateStrategy = () => {
 
 const changedCandidateUsers = () => {
   if (
-    candidateParamArray.value?.length <= 1 &&
-    currentNode.value.candidateStrategy === CandidateStrategy.USER
+    configForm.value.candidateParamArray?.length <= 1 &&
+    configForm.value.candidateStrategy === CandidateStrategy.USER
   ) {
-    currentNode.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
-    currentNode.value.rejectHandler!.type = RejectHandlerType.FINISH_PROCESS
+    configForm.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
+    configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS
     notAllowedMultiApprovers.value = true
   } else {
     notAllowedMultiApprovers.value = false
@@ -534,37 +605,63 @@ const blurEvent = () => {
     currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
 }
 const approveMethodChanged = () => {
-  currentNode.value.rejectHandler!.type = RejectHandlerType.FINISH_PROCESS
-  const approveMethod = currentNode.value?.approveMethod
-  if (approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
-    currentNode.value.approveRatio = 100
+  configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS
+  if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    configForm.value.approveRatio = 100
   }
+  formRef.value.clearValidate('approveRatio')
 }
-// 默认 6小时
-const timeDuration = ref(6)
+
 const timeUnit = ref(TimeUnitType.HOUR)
 
+// 超时时间的 ISO 表示
 const isoTimeDuration = computed(() => {
+  if (!configForm.value.timeoutHandlerEnable) {
+    return undefined
+  }
   let strTimeDuration = 'PT'
   if (timeUnit.value === TimeUnitType.MINUTE) {
-    strTimeDuration += timeDuration.value + 'M'
+    strTimeDuration += configForm.value.timeDuration + 'M'
   }
   if (timeUnit.value === TimeUnitType.HOUR) {
-    strTimeDuration += timeDuration.value + 'H'
+    strTimeDuration += configForm.value.timeDuration + 'H'
   }
   if (timeUnit.value === TimeUnitType.DAY) {
-    strTimeDuration += timeDuration.value + 'D'
+    strTimeDuration += configForm.value.timeDuration + 'D'
   }
   return strTimeDuration
 })
+// 超时执行的动作
+const cTimeoutAction = computed(() => {
+  if (!configForm.value.timeoutHandlerEnable) {
+    return undefined
+  }
+  return configForm.value.timeoutHandlerAction
+})
+// 超时最大提醒次数
+const cTimeoutMaxRemindCount = computed(() => {
+  if (!configForm.value.timeoutHandlerEnable) {
+    return undefined
+  }
+  if (configForm.value.timeoutHandlerAction !== 1) {
+    return undefined
+  }
+  return configForm.value.maxRemindCount
+})
 
 // 超时开关改变
 const timeoutHandlerChange = () => {
-  if (currentNode.value.timeoutHandler?.enable) {
+  if (configForm.value.timeoutHandlerEnable) {
     timeUnit.value = 2
-    timeDuration.value = 6
-    currentNode.value.timeoutHandler.action = 1
-    currentNode.value.timeoutHandler.maxRemindCount = 1
+    configForm.value.timeDuration = 6
+    configForm.value.timeoutHandlerAction = 1
+    configForm.value.maxRemindCount = 1
+  }
+}
+// 超时处理动作改变
+const timeoutActionChanged = () => {
+  if (configForm.value.timeoutHandlerAction === 1) {
+    configForm.value.maxRemindCount = 1 // 超时提醒次数，默认为1
   }
 }
 
@@ -572,15 +669,15 @@ const timeoutHandlerChange = () => {
 const timeUnitChange = () => {
   // 分钟，默认是 60 分钟
   if (timeUnit.value === TimeUnitType.MINUTE) {
-    timeDuration.value = 60
+    configForm.value.timeDuration = 60
   }
   // 小时，默认是 6 个小时
   if (timeUnit.value === TimeUnitType.HOUR) {
-    timeDuration.value = 6
+    configForm.value.timeDuration = 6
   }
   // 天， 默认 1天
   if (timeUnit.value === TimeUnitType.DAY) {
-    timeDuration.value = 1
+    configForm.value.timeDuration = 1
   }
 }
 

From fae712b9d4899682662024098a77fa9384012647 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Thu, 27 Jun 2024 09:30:02 +0800
Subject: [PATCH 36/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1-=20=E8=A1=A8=E5=8D=95=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5=E6=9D=83=E9=99=90=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/nodes-config/UserTaskNodeConfig.vue   | 10 ++++
 .../bpm/processInstance/detail/index.vue      | 56 +++++++++++++++++--
 2 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 0acb648d..11b5efc5 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -413,6 +413,11 @@ const saveConfig = async () => {
   if (!showText) return false
   currentNode.value.candidateStrategy = configForm.value.candidateStrategy
   currentNode.value.candidateParam = configForm.value.candidateParamArray?.join(',')
+  // 设置审批方式
+  currentNode.value.approveMethod = configForm.value.approveMethod
+  if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    currentNode.value.approveRatio = configForm.value.approveRatio
+  }
   // 设置拒绝处理
   currentNode.value.rejectHandler = {
     type: configForm.value.rejectHandlerType,
@@ -547,6 +552,11 @@ const setCurrentNode = (node: SimpleFlowNode) => {
   } else {
     notAllowedMultiApprovers.value = false
   }
+  // 设置审批方式
+  configForm.value.approveMethod = node.approveMethod
+  if (node.approveMethod == ApproveMethodType.APPROVE_BY_RATIO) {
+    configForm.value.approveRatio = node.approveRatio
+  }
   configForm.value.rejectHandlerType = node.rejectHandler?.type
   configForm.value.returnNodeId = node.rejectHandler?.returnNodeId
   configForm.value.timeoutHandlerEnable = node.timeoutHandler?.enable
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index da54769d..94475647 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -200,7 +200,11 @@ const handleAudit = async (task, pass) => {
   // 1.2 校验表单
   const elForm = unref(auditFormRef)
   if (!elForm) return
-  const valid = await elForm.validate()
+  let valid = await elForm.validate()
+  if (!valid) return
+  // 校验申请表单
+  if (!fApi.value) return
+  valid = await fApi.value.validate()
   if (!valid) return
 
   // 2.1 提交审批
@@ -216,6 +220,9 @@ const handleAudit = async (task, pass) => {
       await formCreateApi.validate()
       data.variables = approveForms.value[index].value
     }
+    // 获取表单可编辑字段的值
+    data.variables = getWritableValueOfForm(task.fieldsPermission)
+
     await TaskApi.approveTask(data)
     message.success('审批通过成功')
   } else {
@@ -251,11 +258,11 @@ const handleSign = async (task: any) => {
 }
 
 /** 获得详情 */
-const getDetail = () => {
-  // 1. 获得流程实例相关
+const getDetail = async () => {
+  // 1. 获得流程任务列表（审批记录）。 需要先获取任务，表单的权限设置需要根据任务来设置
+  await getTaskList()
+  // 2. 获得流程实例相关
   getProcessInstance()
-  // 2. 获得流程任务列表（审批记录）
-  getTaskList()
 }
 
 /** 加载流程实例 */
@@ -283,6 +290,15 @@ const getProcessInstance = async () => {
         fApi.value?.btn.show(false)
         fApi.value?.resetBtn.show(false)
         fApi.value?.disabled(true)
+        // 设置表单权限。后续需要改造成。只处理一个运行中的任务
+        if (runningTasks.value.length > 0) {
+          const task = runningTasks.value.at(0)
+          if (task.fieldsPermission) {
+            Object.keys(task.fieldsPermission).forEach((item) => {
+              setFieldPermission(item, task.fieldsPermission[item])
+            })
+          }
+        }
       })
     } else {
       // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
@@ -353,6 +369,7 @@ const loadRunningTask = (tasks) => {
     if (!task.assigneeUser || task.assigneeUser.id !== userId) {
       return
     }
+
     // 2.3 添加到处理任务
     runningTasks.value.push({ ...task })
     auditForms.value.push({
@@ -371,6 +388,35 @@ const loadRunningTask = (tasks) => {
   })
 }
 
+/**
+ * 设置表单权限
+ */
+const setFieldPermission = (field: string, permission: string) => {
+  if (permission === '1') {
+    fApi.value?.disabled(true, field)
+  }
+  if (permission === '2') {
+    fApi.value?.disabled(false, field)
+  }
+  if (permission === '3') {
+    fApi.value?.hidden(true, field)
+  }
+}
+/**
+ * 获取可以编辑字段的值
+ */
+const getWritableValueOfForm = (fieldsPermission: Object) => {
+  const fieldsValue = {}
+  if (fieldsPermission && fApi.value) {
+    Object.keys(fieldsPermission).forEach((item) => {
+      if (fieldsPermission[item] === '2') {
+        fieldsValue[item] = fApi.value.getValue(item)
+      }
+    })
+  }
+  return fieldsValue
+}
+
 /** 初始化 */
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 onMounted(async () => {

From 538ad86b034e4f89830931eff69004148fdf1a12 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 13 Jul 2024 15:00:25 +0800
Subject: [PATCH 37/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |  22 ---
 .../SimpleProcessDesignerV2/src/consts.ts     |  54 +++++++
 .../src/nodes-config/UserTaskNodeConfig.vue   | 141 +++++++++++++++++-
 .../theme/simple-process-designer.scss        | 106 +++++++------
 .../bpm/processInstance/detail/index.vue      |  86 ++++++++---
 5 files changed, 309 insertions(+), 100 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index 136b0a54..3e56e793 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -81,8 +81,6 @@ const addNode = (type: number) => {
       type: NodeType.USER_TASK_NODE,
       approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
       candidateStrategy: CandidateStrategy.USER,
-      // candidateParam: undefined,
-      // fieldsPermission: undefined,
       // 超时处理
       rejectHandler: {
         type: RejectHandlerType.FINISH_PROCESS
@@ -92,20 +90,6 @@ const addNode = (type: number) => {
       },
 
       childNode: props.childNode
-      // 审批节点配置
-      // attributes: {
-      //   approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
-      //   candidateStrategy: CandidateStrategy.USER,
-      //   candidateParam: undefined,
-      //   fieldsPermission: undefined,
-      //    // 超时处理
-      //   timeoutHandler: {
-      //     enable: false
-      //   },
-      //   rejectHandler: {
-      //     type: RejectHandlerType.FINISH_PROCESS
-      //   }
-      // },
     }
     emits('update:childNode', data)
   }
@@ -118,12 +102,6 @@ const addNode = (type: number) => {
       candidateStrategy: CandidateStrategy.USER,
       candidateParam: undefined,
       fieldsPermission: undefined,
-      // 审批节点配置
-      // attributes: {
-      //   candidateStrategy: CandidateStrategy.USER,
-      //   candidateParam: undefined,
-      //   fieldsPermission: undefined
-      // },
       childNode: props.childNode
     }
     emits('update:childNode', data)
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 0b0411cf..4525ce67 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -182,6 +182,8 @@ export type SimpleFlowNode = {
   approveMethod?: ApproveMethodType
   //通过比例
   approveRatio?: number
+  // 审批按钮设置
+  buttonsSetting?: any[]
   // 表单权限
   fieldsPermission?: any[]
   // 审批任务超时处理
@@ -214,6 +216,40 @@ export type ConditionRule = {
   rightSide: string
 }
 
+// 审批操作按钮类型
+export enum OpsButtonType {
+  /**
+   * 通过
+   */
+  APPROVE = 1,
+  /**
+   * 拒绝
+   */
+  REJECT = 2,
+  /**
+   * 转办
+   */
+  TRANSFER = 3,
+  /**
+   * 委派
+   */
+  DELEGATE = 4,
+  /**
+   * 加签
+   */
+  ADD_SIGN = 5,
+  /**
+   * 回退
+   */
+  RETURN = 6
+}
+
+export type ButtonSetting = {
+  id: OpsButtonType
+  displayName: string
+  enable: boolean
+}
+
 export const NODE_DEFAULT_TEXT = new Map<number, string>()
 NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置审批人')
 NODE_DEFAULT_TEXT.set(NodeType.COPY_TASK_NODE, '请配置抄送人')
@@ -281,3 +317,21 @@ export const COMPARISON_OPERATORS: DictDataVO = [
     label: '小于等于'
   }
 ]
+// 审批操作按钮名称
+export const OPERATION_BUTTON_NAME = new Map<number, string>()
+OPERATION_BUTTON_NAME.set(OpsButtonType.APPROVE, '通过')
+OPERATION_BUTTON_NAME.set(OpsButtonType.REJECT, '拒绝')
+OPERATION_BUTTON_NAME.set(OpsButtonType.TRANSFER, '转办')
+OPERATION_BUTTON_NAME.set(OpsButtonType.DELEGATE, '委派')
+OPERATION_BUTTON_NAME.set(OpsButtonType.ADD_SIGN, '加签')
+OPERATION_BUTTON_NAME.set(OpsButtonType.RETURN, '回退')
+
+// 默认的按钮权限设置
+export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OpsButtonType.APPROVE, displayName: '通过', enable: true },
+  { id: OpsButtonType.REJECT, displayName: '拒绝', enable: true },
+  { id: OpsButtonType.TRANSFER, displayName: '转办', enable: false },
+  { id: OpsButtonType.DELEGATE, displayName: '委派', enable: false },
+  { id: OpsButtonType.ADD_SIGN, displayName: '加签', enable: false },
+  { id: OpsButtonType.RETURN, displayName: '回退', enable: false }
+]
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 11b5efc5..6254ebeb 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -280,6 +280,40 @@
           </el-form>
         </div>
       </el-tab-pane>
+      <el-tab-pane label="操作按钮设置" name="buttons" v-if="formType === 10">
+        <div class="button-setting-pane">
+          <div class="button-setting-desc">操作按钮</div>
+          <div class="button-setting-title">
+            <div class="button-title-label">操作按钮</div>
+            <div class="pl-4 button-title-label">显示名称</div>
+            <div class="button-title-label">启用</div>
+          </div>
+          <div
+            class="button-setting-item"
+            v-for="(item, index) in configForm.buttonsSetting"
+            :key="index"
+          >
+            <div class="button-setting-item-label"> {{ OPERATION_BUTTON_NAME.get(item.id) }} </div>
+            <div class="button-setting-item-label">
+              <input
+                type="text"
+                class="editable-title-input"
+                @blur="btnDisplayNameBlurEvent(index)"
+                v-mountedFocus
+                v-model="item.displayName"
+                :placeholder="item.displayName"
+                v-if="btnDisplayNameEdit[index]"
+              />
+              <el-button v-else text @click="changeBtnDisplayName(index)"
+                >{{ item.displayName }} &nbsp;<Icon icon="ep:edit"
+              /></el-button>
+            </div>
+            <div class="button-setting-item-label">
+              <el-switch v-model="item.enable" />
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
       <el-tab-pane label="表单字段权限" name="fields" v-if="formType === 10">
         <div class="field-setting-pane">
           <div class="field-setting-desc">字段权限</div>
@@ -334,7 +368,9 @@ import {
   TIMEOUT_HANDLER_ACTION_TYPES,
   TIME_UNIT_TYPES,
   REJECT_HANDLER_TYPES,
-  NODE_DEFAULT_NAME
+  NODE_DEFAULT_NAME,
+  DEFAULT_BUTTON_SETTING,
+  OPERATION_BUTTON_NAME
 } from '../consts'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { getDefaultFieldsPermission } from '../utils'
@@ -345,7 +381,6 @@ import * as PostApi from '@/api/system/post'
 import * as UserApi from '@/api/system/user'
 import * as UserGroupApi from '@/api/bpm/userGroup'
 import { cloneDeep } from 'lodash-es'
-
 defineOptions({
   name: 'UserTaskNodeConfig'
 })
@@ -385,7 +420,8 @@ const configForm = ref<any>({
   timeoutHandlerAction: 1,
   timeDuration: 6, // 默认 6小时
   maxRemindCount: 1, // 默认 提醒 1次
-  fieldsPermission: []
+  fieldsPermission: [],
+  buttonsSetting: []
 })
 // 表单校验规则
 const formRules = reactive({
@@ -432,6 +468,8 @@ const saveConfig = async () => {
   }
   // 设置表单权限
   currentNode.value.fieldsPermission = configForm.value.fieldsPermission
+  // 设置按钮权限
+  currentNode.value.buttonsSetting = configForm.value.buttonsSetting
 
   currentNode.value.showText = getShowText()
   settingVisible.value = false
@@ -533,6 +571,7 @@ const setCurrentNode = (node: SimpleFlowNode) => {
   currentNode.value = node
   configForm.value.fieldsPermission =
     cloneDeep(node.fieldsPermission) || getDefaultFieldsPermission(formFields?.value)
+  configForm.value.buttonsSetting = cloneDeep(node.buttonsSetting) || DEFAULT_BUTTON_SETTING
   configForm.value.candidateStrategy = node.candidateStrategy
   const strCandidateParam = node?.candidateParam
   if (node.candidateStrategy === CandidateStrategy.EXPRESSION) {
@@ -614,6 +653,7 @@ const blurEvent = () => {
   currentNode.value.name =
     currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
 }
+
 const approveMethodChanged = () => {
   configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS
   if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
@@ -703,6 +743,99 @@ const convertTimeUnit = (strTimeUnit: string) => {
   }
   return TimeUnitType.HOUR
 }
+
+// 操作按钮显示名称可编辑
+const btnDisplayNameEdit = ref<boolean[]>([])
+const changeBtnDisplayName = (index: number) => {
+  btnDisplayNameEdit.value[index] = true
+}
+const btnDisplayNameBlurEvent = (index: number) => {
+  btnDisplayNameEdit.value[index] = false
+  const buttonItem = configForm.value.buttonPermission[index]
+  buttonItem.displayName = buttonItem.displayName || OPERATION_BUTTON_NAME.get(buttonItem.id)
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.button-setting-pane {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+
+  .button-setting-desc {
+    padding-right: 8px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .button-setting-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 45px;
+    padding-left: 12px;
+    background-color: #f8fafc0a;
+    border: 1px solid #1f38581a;
+
+    & > :first-child {
+      width: 100px !important;
+      text-align: left !important;
+    }
+
+    & > :last-child {
+      text-align: center !important;
+    }
+
+    .button-title-label {
+      width: 150px;
+      font-size: 13px;
+      font-weight: 700;
+      color: #000;
+      text-align: left;
+    }
+  }
+
+  .button-setting-item {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    height: 38px;
+    padding-left: 12px;
+    border: 1px solid #1f38581a;
+    border-top: 0;
+
+    & > :first-child {
+      width: 100px !important;
+    }
+
+    & > :last-child {
+      text-align: center !important;
+    }
+
+    .button-setting-item-label {
+      width: 150px;
+      overflow: hidden;
+      text-align: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .editable-title-input {
+      height: 24px;
+      max-width: 130px;
+      margin-left: 4px;
+      line-height: 24px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      transition: all 0.3s;
+
+      &:focus {
+        border-color: #40a9ff;
+        outline: 0;
+        box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index 3d633b6d..ecf4250a 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -241,7 +241,7 @@
         .move-node-left {
           left: -2px;
           top: 0px;
-          background: rgba(126, 134, 142, .08);
+          background: rgba(126, 134, 142, 0.08);
           border-top-left-radius: 8px;
           border-bottom-left-radius: 8px;
         }
@@ -249,13 +249,12 @@
         .move-node-right {
           right: -2px;
           top: 0px;
-          background: rgba(126,134,142,.08);
+          background: rgba(126, 134, 142, 0.08);
           border-top-right-radius: 6px;
           border-bottom-right-radius: 6px;
         }
       }
 
-      
       .node-config-error {
         border-color: #ff5219 !important;
       }
@@ -306,12 +305,10 @@
             background-color: #0089ff;
             border-radius: 50%;
 
-            &:hover{
+            &:hover {
               transform: scale(1.1);
-              
             }
           }
-          
         }
 
         .node-handler-arrow {
@@ -323,7 +320,6 @@
         }
       }
 
-      
       // 条件节点包装
       .branch-node-wrapper {
         position: relative;
@@ -341,8 +337,8 @@
             position: absolute;
             height: 100%;
             width: 4px;
-            background-color:  #fafafa;
-            content: "";
+            background-color: #fafafa;
+            content: '';
             left: 50%;
             transform: translate(-50%);
           }
@@ -498,10 +494,10 @@
         border-radius: 4px;
         transition: all 0.3s;
 
-        &:focus   {
+        &:focus {
           border-color: #40a9ff;
           outline: 0;
-          box-shadow: 0 0 0 2px rgba(24, 144, 255, .2)
+          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
         }
       }
     }
@@ -537,11 +533,11 @@
     border: 1px solid #d9d9d9;
     border-radius: 4px;
     transition: all 0.3s;
-  
-    &:focus   {
+
+    &:focus {
       border-color: #40a9ff;
       outline: 0;
-      box-shadow: 0 0 0 2px rgba(24, 144, 255, .2)
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
     }
   }
 }
@@ -550,7 +546,6 @@
 .field-setting-pane {
   display: flex;
   flex-direction: column;
-  padding: 16px 0;
   font-size: 14px;
 
   .field-setting-desc {
@@ -569,7 +564,7 @@
     line-height: 45px;
     background-color: #f8fafc0a;
     border: 1px solid #1f38581a;
-   
+
     .first-title {
       text-align: left !important;
     }
@@ -588,9 +583,8 @@
       color: #000;
       text-align: center;
     }
-    
   }
-  
+
   .field-setting-item {
     align-items: center;
     display: flex;
@@ -632,56 +626,56 @@
     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;
+  .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: #e2e2e2;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-   }
+    &:hover {
+      background: #e2e2e2;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+    }
 
-   .icon-size {
-     font-size: 35px;
-     line-height: 80px;
-   }
+    .icon-size {
+      font-size: 35px;
+      line-height: 80px;
+    }
   }
 
- .approve {
-   color: #ff943e;
+  .approve {
+    color: #ff943e;
   }
   .copy {
     color: #3296fa;
   }
-  
+
   .condition {
     color: #15bc83;
   }
 
- .handler-item-text {
-   margin-top: 4px;
-   width: 80px;
-   text-align: center;
- }
-
+  .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');
+  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-family: 'iconfont' !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
@@ -689,25 +683,25 @@
 }
 
 .icon-Inclusive:before {
-  content: "\e602";
+  content: '\e602';
 }
 
 .icon-copy:before {
-  content: "\e7eb";
+  content: '\e7eb';
 }
 
 .icon-handle:before {
-  content: "\e61c";
+  content: '\e61c';
 }
 
 .icon-exclusive:before {
-  content: "\e717";
+  content: '\e717';
 }
 
 .icon-approve:before {
-  content: "\e715";
+  content: '\e715';
 }
 
 .icon-parallel:before {
-  content: "\e688";
-}
\ No newline at end of file
+  content: '\e688';
+}
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 94475647..0a9f96a3 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -56,29 +56,71 @@
           </el-form-item>
         </el-form>
         <div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
-          <el-button type="success" @click="handleAudit(item, true)">
+          <el-button
+            type="success"
+            v-if="!item.buttonsSetting || item.buttonsSetting[OpsButtonType.APPROVE]?.enable"
+            @click="handleAudit(item, true)"
+          >
             <Icon icon="ep:select" />
-            通过
+            {{
+              item.buttonsSetting?.[OpsButtonType.APPROVE]?.displayName ||
+              OPERATION_BUTTON_NAME.get(OpsButtonType.APPROVE)
+            }}
           </el-button>
-          <el-button type="danger" @click="handleAudit(item, false)">
+          <el-button
+            v-if="!item.buttonsSetting || item.buttonsSetting[OpsButtonType.REJECT]?.enable"
+            type="danger"
+            @click="handleAudit(item, false)"
+          >
             <Icon icon="ep:close" />
-            不通过
+            {{
+              item.buttonsSetting?.[OpsButtonType.REJECT].displayName ||
+              OPERATION_BUTTON_NAME.get(OpsButtonType.REJECT)
+            }}
           </el-button>
-          <el-button type="primary" @click="openTaskUpdateAssigneeForm(item.id)">
+          <el-button
+            v-if="!item.buttonsSetting || item.buttonsSetting[OpsButtonType.TRANSFER]?.enable"
+            type="primary"
+            @click="openTaskUpdateAssigneeForm(item.id)"
+          >
             <Icon icon="ep:edit" />
-            转办
+            {{
+              item.buttonsSetting?.[OpsButtonType.TRANSFER]?.displayName ||
+              OPERATION_BUTTON_NAME.get(OpsButtonType.TRANSFER)
+            }}
           </el-button>
-          <el-button type="primary" @click="handleDelegate(item)">
+          <el-button
+            v-if="!item.buttonsSetting || item.buttonsSetting[OpsButtonType.DELEGATE]?.enable"
+            type="primary"
+            @click="handleDelegate(item)"
+          >
             <Icon icon="ep:position" />
-            委派
+            {{
+              item.buttonsSetting?.[OpsButtonType.DELEGATE]?.displayName ||
+              OPERATION_BUTTON_NAME.get(OpsButtonType.DELEGATE)
+            }}
           </el-button>
-          <el-button type="primary" @click="handleSign(item)">
+          <el-button
+            v-if="!item.buttonsSetting || item.buttonsSetting[OpsButtonType.ADD_SIGN]?.enable"
+            type="primary"
+            @click="handleSign(item)"
+          >
             <Icon icon="ep:plus" />
-            加签
+            {{
+              item.buttonsSetting?.[OpsButtonType.ADD_SIGN]?.displayName ||
+              OPERATION_BUTTON_NAME.get(OpsButtonType.ADD_SIGN)
+            }}
           </el-button>
-          <el-button type="warning" @click="handleBack(item)">
+          <el-button
+            v-if="!item.buttonsSetting || item.buttonsSetting[OpsButtonType.RETURN]?.enable"
+            type="warning"
+            @click="handleBack(item)"
+          >
             <Icon icon="ep:back" />
-            回退
+            {{
+              item.buttonsSetting?.[OpsButtonType.RETURN]?.displayName ||
+              OPERATION_BUTTON_NAME.get(OpsButtonType.RETURN)
+            }}
           </el-button>
         </div>
       </el-col>
@@ -147,6 +189,10 @@ import TaskSignCreateForm from './dialog/TaskSignCreateForm.vue'
 import { registerComponent } from '@/utils/routerHelper'
 import { isEmpty } from '@/utils/is'
 import * as UserApi from '@/api/system/user'
+import {
+  OpsButtonType,
+  OPERATION_BUTTON_NAME
+} from '@/components/SimpleProcessDesignerV2/src/consts'
 
 defineOptions({ name: 'BpmProcessInstanceDetail' })
 
@@ -280,12 +326,16 @@ const getProcessInstance = async () => {
     // 设置表单信息
     const processDefinition = data.processDefinition
     if (processDefinition.formType === 10) {
-      setConfAndFields2(
-        detailForm,
-        processDefinition.formConf,
-        processDefinition.formFields,
-        data.formVariables
-      )
+      if (detailForm.value.rule.length > 0) {
+        detailForm.value.value = data.formVariables
+      } else {
+        setConfAndFields2(
+          detailForm,
+          processDefinition.formConf,
+          processDefinition.formFields,
+          data.formVariables
+        )
+      }
       nextTick().then(() => {
         fApi.value?.btn.show(false)
         fApi.value?.resetBtn.show(false)

From 2c11228f55bacf43f9a9269b898cc40be9558205 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 20 Jul 2024 14:50:05 +0800
Subject: [PATCH 38/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1-=20=20bug=20=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |   8 +-
 .../src/ProcessNodeTree.vue                   |  28 ++-
 .../src/SimpleProcessDesigner.vue             |  58 +++---
 .../src/nodes-config/CopyTaskNodeConfig.vue   |  42 +++--
 .../src/nodes-config/UserTaskNodeConfig.vue   |  48 +++--
 .../src/nodes/CopyTaskNode.vue                |  48 ++---
 .../src/nodes/ExclusiveNode.vue               |  86 +++++----
 .../src/nodes/ParallelNode.vue                |  66 ++++---
 .../src/nodes/UserTaskNode.vue                |  45 ++---
 src/views/bpm/simpleWorkflow/index1.vue       | 165 ------------------
 10 files changed, 215 insertions(+), 379 deletions(-)
 delete mode 100644 src/views/bpm/simpleWorkflow/index1.vue

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index 3e56e793..b5ba51bf 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -47,8 +47,7 @@ import {
   NodeType,
   NODE_DEFAULT_NAME,
   ApproveMethodType,
-  RejectHandlerType,
-  CandidateStrategy
+  RejectHandlerType
 } from './consts'
 import { generateUUID } from '@/utils'
 defineOptions({
@@ -80,7 +79,6 @@ const addNode = (type: number) => {
       showText: '',
       type: NodeType.USER_TASK_NODE,
       approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
-      candidateStrategy: CandidateStrategy.USER,
       // 超时处理
       rejectHandler: {
         type: RejectHandlerType.FINISH_PROCESS
@@ -88,7 +86,6 @@ const addNode = (type: number) => {
       timeoutHandler: {
         enable: false
       },
-
       childNode: props.childNode
     }
     emits('update:childNode', data)
@@ -99,9 +96,6 @@ const addNode = (type: number) => {
       name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
       showText: '',
       type: NodeType.COPY_TASK_NODE,
-      candidateStrategy: CandidateStrategy.USER,
-      candidateParam: undefined,
-      fieldsPermission: undefined,
       childNode: props.childNode
     }
     emits('update:childNode', data)
diff --git a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
index c7589089..d11e67cc 100644
--- a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
+++ b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@@ -3,20 +3,19 @@
   <StartEventNode
     v-if="currentNode && currentNode.type === NodeType.START_EVENT_NODE"
     :flow-node="currentNode"
-    @update:model-value="handleModelValueUpdate"
   />
   <!-- 审批节点 -->
   <UserTaskNode
     v-if="currentNode && currentNode.type === NodeType.USER_TASK_NODE"
     :flow-node="currentNode"
-    @update:model-value="handleModelValueUpdate"
+    @update:flow-node="handleModelValueUpdate"
     @find:parent-node="findFromParentNode"
   />
   <!-- 抄送节点 -->
   <CopyTaskNode
     v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE"
     :flow-node="currentNode"
-    @update:model-value="handleModelValueUpdate"
+    @update:flow-node="handleModelValueUpdate"
   />
   <!-- 条件节点 -->
   <ExclusiveNode
@@ -25,8 +24,8 @@
     @update:model-value="handleModelValueUpdate"
     @find:parent-node="findFromParentNode"
   />
-   <!-- 并行节点 -->
-   <ParallelNode
+  <!-- 并行节点 -->
+  <ParallelNode
     v-if="currentNode && currentNode.type === NodeType.PARALLEL_NODE_FORK"
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
@@ -36,7 +35,7 @@
   <ProcessNodeTree
     v-if="currentNode && currentNode.childNode"
     v-model:flow-node="currentNode.childNode"
-    :parent-node= "currentNode"
+    :parent-node="currentNode"
     @find:recursive-find-parent-node="recursiveFindParentNode"
   />
 
@@ -65,11 +64,14 @@ const props = defineProps({
   }
 })
 const emits = defineEmits<{
-  'update:flowNode',
-  'find:recursiveFindParentNode': [nodeList: SimpleFlowNode[], curentNode: SimpleFlowNode, nodeType: number]
+  'update:flowNode': [node: SimpleFlowNode | undefined]
+  'find:recursiveFindParentNode': [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number
+  ]
 }>()
 
-
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
 
 // 重要：监控节点变化. 重新绘制节点
@@ -79,16 +81,12 @@ watch(
     currentNode.value = newValue
   }
 )
-
+// 用于删除节点
 const handleModelValueUpdate = (updateValue) => {
-  console.log('Process Node Tree handleModelValueUpdate', updateValue)
   emits('update:flowNode', updateValue)
 }
 
-const findFromParentNode = (
-  nodeList: SimpleFlowNode[],
-  nodeType: number
-) => {
+const findFromParentNode = (nodeList: SimpleFlowNode[], nodeType: number) => {
   emits('find:recursiveFindParentNode', nodeList, props.parentNode, nodeType)
 }
 
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index d3d0b44c..b26c2fea 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -15,25 +15,29 @@
         </div>
       </div>
       <div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
-        <ProcessNodeTree v-if="processNodeTree"  v-model:flow-node="processNodeTree" />
+        <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
       </div>
     </div>
     <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
       <div class="mb-2">以下节点内容不完善，请修改后保存</div>
-      <div class="mb-3 b-rounded-1 bg-gray-100 p-2 line-height-normal" v-for="(item, index) in errorNodes" :key="index">
-          {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
+      <div
+        class="mb-3 b-rounded-1 bg-gray-100 p-2 line-height-normal"
+        v-for="(item, index) in errorNodes"
+        :key="index"
+      >
+        {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
       </div>
       <template #footer>
-        <el-button type="primary" @click="errorDialogVisible = false" >知道了</el-button>
+        <el-button type="primary" @click="errorDialogVisible = false">知道了</el-button>
       </template>
     </Dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import ProcessNodeTree from './ProcessNodeTree.vue';
+import ProcessNodeTree from './ProcessNodeTree.vue'
 import { updateBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
-import { SimpleFlowNode, NodeType,NODE_DEFAULT_TEXT } from './consts'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from './consts'
 
 defineOptions({
   name: 'SimpleProcessDesigner'
@@ -44,33 +48,11 @@ 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 rootNode = ref<SimpleFlowNode>({
-//   name: '开始',
-//   type: NodeType.START_EVENT_NODE,
-//   id: 'StartEvent_1'
-// })
-
-// const childNode = ref<SimpleFlowNode>({
-//   id: 'EndEvent_1',
-//   name: '结束',
-//   type: NodeType.END_EVENT_NODE
-// })
+const processNodeTree = ref<SimpleFlowNode | undefined>()
 
 const errorDialogVisible = ref(false)
 let errorNodes: SimpleFlowNode[] = []
 const saveSimpleFlowModel = async () => {
-  console.log('processNodeTree===>', processNodeTree.value)
   if (!props.modelId) {
     message.error('缺少模型 modelId 编号')
     return
@@ -79,7 +61,7 @@ const saveSimpleFlowModel = async () => {
   validateNode(processNodeTree.value, errorNodes)
   if (errorNodes.length > 0) {
     errorDialogVisible.value = true
-    return;
+    return
   }
   const data = {
     id: props.modelId,
@@ -93,7 +75,6 @@ const saveSimpleFlowModel = async () => {
   } else {
     message.alert('修改失败')
   }
-  
 }
 // 校验节点设置。 暂时以 showText 为空 未节点错误配置
 const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
@@ -158,10 +139,19 @@ const zoomIn = () => {
 onMounted(async () => {
   const result = await getBpmSimpleModel(props.modelId)
   if (result) {
-    console.log('the result is ', result)
     processNodeTree.value = result
-    // rootNode.value = result
-    // childNode.value = result.childNode
+  } else {
+    // 初始值
+    processNodeTree.value = {
+      name: '开始',
+      type: NodeType.START_EVENT_NODE,
+      id: 'StartEvent_1',
+      childNode: {
+        id: 'EndEvent_1',
+        name: '结束',
+        type: NodeType.END_EVENT_NODE
+      }
+    }
   }
 })
 </script>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index ee863c99..b1ee7e1f 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -14,11 +14,11 @@
           class="config-editable-input"
           @blur="blurEvent()"
           v-mountedFocus
-          v-model="currentNode.name"
-          :placeholder="currentNode.name"
+          v-model="configForm.name"
+          :placeholder="configForm.name"
         />
         <div v-else class="node-name"
-          >{{ currentNode.name }}
+          >{{ configForm.name }}
           <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"
         /></div>
 
@@ -223,8 +223,15 @@ const props = defineProps({
 })
 // 是否可见
 const settingVisible = ref(false)
-// 当前节点信息
+// 当前节点
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
+// 监控节点变化
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue
+  }
+)
 const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') // 角色列表
 const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
 const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // 用户列表
@@ -247,13 +254,14 @@ const activeTabName = ref('user')
 const formRef = ref() // 表单 Ref
 
 const configForm = ref<any>({
+  name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE),
   candidateParamArray: [],
   candidateStrategy: CandidateStrategy.USER,
   fieldsPermission: []
 })
 // 表单校验规则
 const formRules = reactive({
-  candidateStrategy: [{ required: true }],
+  candidateStrategy: [{ required: true, message: '抄送人设置不能为空', trigger: 'change' }],
   candidateParamArray: [{ required: true, message: '选项不能为空', trigger: 'blur' }]
 })
 
@@ -269,6 +277,7 @@ const saveConfig = async () => {
   if (!valid) return false
   const showText = getShowText()
   if (!showText) return false
+  currentNode.value.name = configForm.value.name
   currentNode.value.candidateParam = configForm.value.candidateParamArray?.join(',')
   currentNode.value.candidateStrategy = configForm.value.candidateStrategy
   currentNode.value.showText = showText
@@ -280,11 +289,10 @@ const saveConfig = async () => {
 const open = () => {
   settingVisible.value = true
 }
-//  修改当前编辑的节点， 由父组件传过来
+// 设置抄送节点
 const setCurrentNode = (node: SimpleFlowNode) => {
-  currentNode.value = node
-  configForm.value.fieldsPermission =
-    cloneDeep(node.fieldsPermission) || getDefaultFieldsPermission(formFields?.value)
+  configForm.value.name = node.name
+  // 抄送人设置
   configForm.value.candidateStrategy = node.candidateStrategy
   const strCandidateParam = node?.candidateParam
   if (node.candidateStrategy === CandidateStrategy.EXPRESSION) {
@@ -294,6 +302,9 @@ const setCurrentNode = (node: SimpleFlowNode) => {
       configForm.value.candidateParamArray = strCandidateParam.split(',').map((item) => +item)
     }
   }
+  // 表单字段权限
+  configForm.value.fieldsPermission =
+    cloneDeep(node.fieldsPermission) || getDefaultFieldsPermission(formFields?.value)
 }
 
 defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
@@ -387,16 +398,9 @@ const clickIcon = () => {
 // 输入框失去焦点
 const blurEvent = () => {
   showInput.value = false
-  currentNode.value.name =
-    currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string)
+  configForm.value.name =
+    configForm.value.name || (NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string)
 }
 </script>
 
-<style lang="scss" scoped>
-// ::v-deep(.el-divider--horizontal) {
-//   display: block;
-//   height: 1px;
-//   margin: 0;
-//   border-top: 1px var(--el-border-color) var(--el-border-style);
-// }
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 6254ebeb..cb55341e 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -15,11 +15,11 @@
           class="config-editable-input"
           @blur="blurEvent()"
           v-mountedFocus
-          v-model="currentNode.name"
-          :placeholder="currentNode.name"
+          v-model="configForm.name"
+          :placeholder="configForm.name"
         />
         <div v-else class="node-name"
-          >{{ currentNode.name }}
+          >{{ configForm.name }}
           <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"
         /></div>
 
@@ -394,8 +394,15 @@ const emits = defineEmits<{
   'find:returnTaskNodes': [nodeList: SimpleFlowNode[]]
 }>()
 
-const notAllowedMultiApprovers = ref(false)
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
+// 监控节点变化
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue
+  }
+)
+const notAllowedMultiApprovers = ref(false)
 const settingVisible = ref(false)
 const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') // 角色列表
 const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
@@ -410,6 +417,7 @@ const returnTaskList = ref<SimpleFlowNode[]>([])
 const formRef = ref() // 表单 Ref
 const activeTabName = ref('user') // 激活的 Tab 标签页
 const configForm = ref<any>({
+  name: NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE),
   candidateParamArray: [],
   candidateStrategy: CandidateStrategy.USER,
   approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
@@ -425,7 +433,7 @@ const configForm = ref<any>({
 })
 // 表单校验规则
 const formRules = reactive({
-  candidateStrategy: [{ required: true }],
+  candidateStrategy: [{ required: true, message: '审批人设置不能为空', trigger: 'change' }],
   candidateParamArray: [{ required: true, message: '该选项不能为空', trigger: 'change' }],
   approveMethod: [{ required: true, message: '多人审批方式不能为空', trigger: 'change' }],
   approveRatio: [{ required: true, message: '通过比例不能为空', trigger: 'blur' }],
@@ -447,6 +455,7 @@ const saveConfig = async () => {
   if (!valid) return false
   const showText = getShowText()
   if (!showText) return false
+  currentNode.value.name = configForm.value.name
   currentNode.value.candidateStrategy = configForm.value.candidateStrategy
   currentNode.value.candidateParam = configForm.value.candidateParamArray?.join(',')
   // 设置审批方式
@@ -566,12 +575,10 @@ const getShowText = (): string => {
 const open = () => {
   settingVisible.value = true
 }
-//  修改当前编辑的节点， 由父组件传过来
+// 配置审批节点， 由父组件传过来
 const setCurrentNode = (node: SimpleFlowNode) => {
-  currentNode.value = node
-  configForm.value.fieldsPermission =
-    cloneDeep(node.fieldsPermission) || getDefaultFieldsPermission(formFields?.value)
-  configForm.value.buttonsSetting = cloneDeep(node.buttonsSetting) || DEFAULT_BUTTON_SETTING
+  configForm.value.name = node.name
+  //1.1 审批人设置
   configForm.value.candidateStrategy = node.candidateStrategy
   const strCandidateParam = node?.candidateParam
   if (node.candidateStrategy === CandidateStrategy.EXPRESSION) {
@@ -580,7 +587,6 @@ const setCurrentNode = (node: SimpleFlowNode) => {
     if (strCandidateParam) {
       configForm.value.candidateParamArray = strCandidateParam.split(',').map((item) => +item)
     }
-    configForm.value.candidateStrategy = node.candidateStrategy
   }
   if (
     (configForm.value.candidateParamArray?.length <= 1 &&
@@ -591,13 +597,18 @@ const setCurrentNode = (node: SimpleFlowNode) => {
   } else {
     notAllowedMultiApprovers.value = false
   }
-  // 设置审批方式
+  //1.2 设置审批方式
   configForm.value.approveMethod = node.approveMethod
   if (node.approveMethod == ApproveMethodType.APPROVE_BY_RATIO) {
     configForm.value.approveRatio = node.approveRatio
   }
+  // 1.3 设置审批拒绝处理
   configForm.value.rejectHandlerType = node.rejectHandler?.type
   configForm.value.returnNodeId = node.rejectHandler?.returnNodeId
+  const matchNodeList = []
+  emits('find:returnTaskNodes', matchNodeList)
+  returnTaskList.value = matchNodeList
+  // 1.4 设置审批超时处理
   configForm.value.timeoutHandlerEnable = node.timeoutHandler?.enable
   if (node.timeoutHandler?.enable && node.timeoutHandler?.timeDuration) {
     const strTimeDuration = node.timeoutHandler.timeDuration
@@ -608,10 +619,11 @@ const setCurrentNode = (node: SimpleFlowNode) => {
   }
   configForm.value.timeoutHandlerAction = node.timeoutHandler?.action
   configForm.value.maxRemindCount = node.timeoutHandler?.maxRemindCount
-  // 查找可以驳回的用户节点
-  const matchNodeList = []
-  emits('find:returnTaskNodes', matchNodeList)
-  returnTaskList.value = matchNodeList
+  // 2. 操作按钮设置
+  configForm.value.buttonsSetting = cloneDeep(node.buttonsSetting) || DEFAULT_BUTTON_SETTING
+  // 3. 表单字段权限配置
+  configForm.value.fieldsPermission =
+    cloneDeep(node.fieldsPermission) || getDefaultFieldsPermission(formFields?.value)
 }
 
 defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
@@ -650,8 +662,8 @@ const clickIcon = () => {
 // 节点名称输入框失去焦点
 const blurEvent = () => {
   showInput.value = false
-  currentNode.value.name =
-    currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
+  configForm.value.name =
+    configForm.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
 }
 
 const approveMethodChanged = () => {
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
index ca9ff0ea..9448174d 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="node-wrapper">
     <div class="node-container">
-      <div class="node-box" :class="{'node-config-error': !currentNode.showText}">
+      <div class="node-box" :class="{ 'node-config-error': !currentNode.showText }">
         <div class="node-title-container">
           <div class="node-title-icon copy-task"><span class="iconfont icon-copy"></span></div>
           <input
@@ -21,30 +21,28 @@
           <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
             {{ currentNode.showText }}
           </div>
-          <div class="node-text"  v-else>
+          <div class="node-text" v-else>
             {{ NODE_DEFAULT_TEXT.get(NodeType.COPY_TASK_NODE) }}
           </div>
           <Icon icon="ep:arrow-right-bold" />
         </div>
         <div class="node-toolbar">
-          <div class="toolbar-icon"><Icon  color="#0089ff"  icon="ep:circle-close-filled" :size="18"  @click="deleteNode" /></div>
+          <div class="toolbar-icon"
+            ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
+          /></div>
         </div>
       </div>
 
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
       <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
     </div>
-    <CopyTaskNodeConfig
-      v-if="currentNode"
-      ref="nodeSetting"
-      :flow-node="currentNode"
-     />
+    <CopyTaskNodeConfig v-if="currentNode" ref="nodeSetting" :flow-node="currentNode" />
   </div>
 </template>
-<script setup lang='ts'>
+<script setup lang="ts">
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts'
 import NodeHandler from '../NodeHandler.vue'
-import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue';
+import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue'
 import { generateUUID } from '@/utils'
 defineOptions({
   name: 'CopyTaskNode'
@@ -57,7 +55,7 @@ const props = defineProps({
 })
 // 定义事件，更新父组件。
 const emits = defineEmits<{
-  'update:modelValue': [node: SimpleFlowNode | undefined]
+  'update:flowNode': [node: SimpleFlowNode | undefined]
 }>()
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
 
@@ -73,7 +71,8 @@ const showInput = ref(false)
 // 节点名称输入框失去焦点
 const blurEvent = () => {
   showInput.value = false
-  currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string
+  currentNode.value.name =
+    currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
 }
 // 点击节点标题进行输入
 const clickEvent = () => {
@@ -82,33 +81,14 @@ const clickEvent = () => {
 const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {
-  nodeSetting.value.setCurrentNode(currentNode.value);
+  nodeSetting.value.setCurrentNode(currentNode.value)
   nodeSetting.value.open()
 }
 
 // 删除节点。更新当前节点为孩子节点
 const deleteNode = () => {
-  emits('update:modelValue', currentNode.value.childNode)
-}
-// 复制节点
-const copyNode = () => {
-  const newCopyNode: SimpleFlowNode = {
-    id: generateUUID(),
-    name: currentNode.value.name,
-    showText: currentNode.value.showText,
-    type: currentNode.value.type,
-    // 抄送节点配置
-    attributes: {
-      candidateStrategy: currentNode.value.attributes?.candidateStrategy,
-      candidateParam: currentNode.value.attributes?.candidateParam
-    },
-    childNode: currentNode.value
-  }
-  currentNode.value = newCopyNode
-  emits('update:modelValue', currentNode.value)
+  emits('update:flowNode', currentNode.value.childNode)
 }
 </script>
 
-<style lang='scss' scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
index e2e5a92c..568afa28 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
@@ -2,9 +2,13 @@
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
       <div class="branch-node-add" @click="addCondition">添加条件</div>
-      <div class="branch-node-item" v-for="(item, index) in currentNode.conditionNodes" :key="index">
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
         <template v-if="index == 0">
-          <div class="branch-line-first-top"></div>
+          <div class="branch-line-first-top"> </div>
           <div class="branch-line-first-bottom"></div>
         </template>
         <template v-if="index + 1 == currentNode.conditionNodes?.length">
@@ -15,13 +19,14 @@
           <div class="node-container">
             <div class="node-box" :class="{ 'node-config-error': !item.showText }">
               <div class="branch-node-title-container">
-                <div  v-if="showInputs[index]">
+                <div v-if="showInputs[index]">
                   <input
                     type="text"
-                    class="input-max-width editable-title-input" 
+                    class="input-max-width editable-title-input"
                     @blur="blurEvent(index)"
-                    v-mountedFocus 
-                    v-model="item.name" />
+                    v-mountedFocus
+                    v-model="item.name"
+                  />
                 </div>
                 <div v-else class="branch-title" @click="clickEvent(index)"> {{ item.name }} </div>
                 <div class="branch-priority"> 优先级{{ index + 1 }} </div>
@@ -36,19 +41,27 @@
               </div>
               <div class="node-toolbar" v-if="index + 1 !== currentNode.conditionNodes?.length">
                 <div class="toolbar-icon">
-                  <Icon color="#0089ff"  icon="ep:circle-close-filled" :size="18"  @click="deleteCondition(index)" />
+                  <Icon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    :size="18"
+                    @click="deleteCondition(index)"
+                  />
                 </div>
               </div>
-              <div 
+              <div
                 class="branch-node-move move-node-left"
-                v-if="index != 0 && index + 1 !== currentNode.conditionNodes?.length" @click="moveNode(index, -1)">
+                v-if="index != 0 && index + 1 !== currentNode.conditionNodes?.length"
+                @click="moveNode(index, -1)"
+              >
                 <Icon icon="ep:arrow-left" />
               </div>
 
-              <div 
+              <div
                 class="branch-node-move move-node-right"
                 v-if="currentNode.conditionNodes && index < currentNode.conditionNodes.length - 2"
-                @click="moveNode(index, 1)">
+                @click="moveNode(index, 1)"
+              >
                 <Icon icon="ep:arrow-right" />
               </div>
             </div>
@@ -57,11 +70,12 @@
         </div>
         <ConditionNodeConfig :node-index="index" :condition-node="item" :ref="item.id" />
         <!-- 递归显示子节点  -->
-        <ProcessNodeTree 
-            v-if="item && item.childNode" 
-            :parent-node="item" 
-            v-model:flow-node="item.childNode" 
-            @find:recursive-find-parent-node="recursiveFindParentNode"/>
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @find:recursive-find-parent-node="recursiveFindParentNode"
+        />
       </div>
     </div>
     <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
@@ -91,25 +105,32 @@ const props = defineProps({
 })
 // 定义事件，更新父组件
 const emits = defineEmits<{
-  'update:modelValue': [node: SimpleFlowNode | undefined],
-  'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: number],
-  'find:recursiveFindParentNode': [nodeList: SimpleFlowNode[], curentNode: SimpleFlowNode, nodeType: number]
+  'update:modelValue': [node: SimpleFlowNode | undefined]
+  'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: number]
+  'find:recursiveFindParentNode': [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number
+  ]
 }>()
 
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
 // const conditionNodes = computed(() => currentNode.value.conditionNodes);
 
-watch(() => props.flowNode, (newValue) => {
-  currentNode.value = newValue;
-});
-
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue
+  }
+)
 
 const showInputs = ref<boolean[]>([])
 // 失去焦点
 const blurEvent = (index: number) => {
   showInputs.value[index] = false
-  const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode;
-  conditionNode.name = conditionNode.name || getDefaultConditionNodeName(index, conditionNode.attributes?.defaultFlow)
+  const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode
+  conditionNode.name =
+    conditionNode.name || getDefaultConditionNodeName(index, conditionNode.attributes?.defaultFlow)
 }
 
 // 点击条件名称
@@ -118,13 +139,13 @@ const clickEvent = (index: number) => {
 }
 
 const conditionNodeConfig = (nodeId: string) => {
-  const conditionNode = proxy.$refs[nodeId][0];
+  const conditionNode = proxy.$refs[nodeId][0]
   conditionNode.open()
 }
 
 // 新增条件
 const addCondition = () => {
-  const conditionNodes = currentNode.value.conditionNodes;
+  const conditionNodes = currentNode.value.conditionNodes
   if (conditionNodes) {
     const len = conditionNodes.length
     let lastIndex = len - 1
@@ -146,7 +167,7 @@ const addCondition = () => {
 
 // 删除条件
 const deleteCondition = (index: number) => {
-  const conditionNodes = currentNode.value.conditionNodes;
+  const conditionNodes = currentNode.value.conditionNodes
   if (conditionNodes) {
     conditionNodes.splice(index, 1)
     if (conditionNodes.length == 1) {
@@ -161,10 +182,12 @@ const deleteCondition = (index: number) => {
 const moveNode = (index: number, to: number) => {
   // -1 ：向左  1： 向右
   if (currentNode.value.conditionNodes) {
-    currentNode.value.conditionNodes[index] = currentNode.value.conditionNodes.splice(index + to, 
-      1, currentNode.value.conditionNodes[index])[0]
+    currentNode.value.conditionNodes[index] = currentNode.value.conditionNodes.splice(
+      index + to,
+      1,
+      currentNode.value.conditionNodes[index]
+    )[0]
   }
-
 }
 // 递归从父节点中查询匹配的节点
 const recursiveFindParentNode = (
@@ -181,7 +204,6 @@ const recursiveFindParentNode = (
   // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.EXCLUSIVE_NODE) 继续查找
   emits('find:parentNode', nodeList, nodeType)
 }
-
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
index 769ab888..3cdd8f8f 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
@@ -2,7 +2,11 @@
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
       <div class="branch-node-add" @click="addCondition">添加分支</div>
-      <div class="branch-node-item" v-for="(item, index) in currentNode.conditionNodes" :key="index">
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
         <template v-if="index == 0">
           <div class="branch-line-first-top"></div>
           <div class="branch-line-first-bottom"></div>
@@ -15,13 +19,14 @@
           <div class="node-container">
             <div class="node-box">
               <div class="branch-node-title-container">
-                <div  v-if="showInputs[index]">
+                <div v-if="showInputs[index]">
                   <input
                     type="text"
-                    class="input-max-width editable-title-input" 
+                    class="input-max-width editable-title-input"
                     @blur="blurEvent(index)"
-                    v-mountedFocus 
-                    v-model="item.name" />
+                    v-mountedFocus
+                    v-model="item.name"
+                  />
                 </div>
                 <div v-else class="branch-title" @click="clickEvent(index)"> {{ item.name }} </div>
                 <div class="branch-priority">无优先级</div>
@@ -36,7 +41,12 @@
               </div>
               <div class="node-toolbar">
                 <div class="toolbar-icon">
-                  <Icon color="#0089ff"  icon="ep:circle-close-filled" :size="18"  @click="deleteCondition(index)" />
+                  <Icon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    :size="18"
+                    @click="deleteCondition(index)"
+                  />
                 </div>
               </div>
               <!-- <div 
@@ -56,11 +66,12 @@
           </div>
         </div>
         <!-- 递归显示子节点  -->
-        <ProcessNodeTree 
-            v-if="item && item.childNode" 
-            :parent-node="item" 
-            v-model:flow-node="item.childNode" 
-            @find:recursive-find-parent-node="recursiveFindParentNode"/>
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @find:recursive-find-parent-node="recursiveFindParentNode"
+        />
       </div>
     </div>
     <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
@@ -85,24 +96,30 @@ const props = defineProps({
 })
 // 定义事件，更新父组件
 const emits = defineEmits<{
-  'update:modelValue': [node: SimpleFlowNode | undefined],
-  'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: number],
-  'find:recursiveFindParentNode': [nodeList: SimpleFlowNode[], curentNode: SimpleFlowNode, nodeType: number]
+  'update:modelValue': [node: SimpleFlowNode | undefined]
+  'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: number]
+  'find:recursiveFindParentNode': [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number
+  ]
 }>()
 
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
 
-watch(() => props.flowNode, (newValue) => {
-  currentNode.value = newValue;
-});
-
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue
+  }
+)
 
 const showInputs = ref<boolean[]>([])
 // 失去焦点
 const blurEvent = (index: number) => {
   showInputs.value[index] = false
-  const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode;
-  conditionNode.name = conditionNode.name || `并行${index+1}`
+  const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode
+  conditionNode.name = conditionNode.name || `并行${index + 1}`
 }
 
 // 点击条件名称
@@ -111,13 +128,13 @@ const clickEvent = (index: number) => {
 }
 
 const conditionNodeConfig = (nodeId: string) => {
-  const conditionNode = proxy.$refs[nodeId][0];
+  const conditionNode = proxy.$refs[nodeId][0]
   conditionNode.open()
 }
 
 // 新增条件
 const addCondition = () => {
-  const conditionNodes = currentNode.value.conditionNodes;
+  const conditionNodes = currentNode.value.conditionNodes
   if (conditionNodes) {
     const len = conditionNodes.length
     let lastIndex = len - 1
@@ -127,7 +144,7 @@ const addCondition = () => {
       showText: '无需配置条件同时执行',
       type: NodeType.CONDITION_NODE,
       childNode: undefined,
-      conditionNodes: [],
+      conditionNodes: []
     }
     conditionNodes.splice(lastIndex, 0, conditionData)
   }
@@ -135,7 +152,7 @@ const addCondition = () => {
 
 // 删除条件
 const deleteCondition = (index: number) => {
-  const conditionNodes = currentNode.value.conditionNodes;
+  const conditionNodes = currentNode.value.conditionNodes
   if (conditionNodes) {
     conditionNodes.splice(index, 1)
     if (conditionNodes.length == 1) {
@@ -161,5 +178,4 @@ const recursiveFindParentNode = (
   // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点并行节点（NodeType.PARALLEL_NODE) 继续查找
   emits('find:parentNode', nodeList, nodeType)
 }
-
 </script>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index bf2027fb..3ecfbb83 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="node-wrapper">
     <div class="node-container">
-      <div class="node-box" :class="{'node-config-error': !flowNode.showText}">
+      <div class="node-box" :class="{ 'node-config-error': !currentNode.showText }">
         <div class="node-title-container">
           <div class="node-title-icon user-task"><span class="iconfont icon-approve"></span></div>
           <input
@@ -18,16 +18,18 @@
           </div>
         </div>
         <div class="node-content" @click="openNodeConfig">
-          <div class="node-text" :title="flowNode.showText" v-if="flowNode.showText">
-            {{ flowNode.showText }}
+          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
+            {{ currentNode.showText }}
           </div>
-          <div class="node-text"  v-else>
+          <div class="node-text" v-else>
             {{ NODE_DEFAULT_TEXT.get(NodeType.USER_TASK_NODE) }}
           </div>
           <Icon icon="ep:arrow-right-bold" />
         </div>
         <div class="node-toolbar">
-          <div class="toolbar-icon"><Icon color="#0089ff"  icon="ep:circle-close-filled"  :size="18" @click="deleteNode" /></div>
+          <div class="toolbar-icon"
+            ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
+          /></div>
         </div>
       </div>
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
@@ -44,8 +46,7 @@
 <script setup lang="ts">
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts'
 import NodeHandler from '../NodeHandler.vue'
-import UserTaskNodeConfig from '../nodes-config/UserTaskNodeConfig.vue';
-import { generateUUID } from '@/utils'
+import UserTaskNodeConfig from '../nodes-config/UserTaskNodeConfig.vue'
 defineOptions({
   name: 'UserTaskNode'
 })
@@ -56,7 +57,7 @@ const props = defineProps({
   }
 })
 const emits = defineEmits<{
-  'update:modelValue': [node: SimpleFlowNode | undefined],
+  'update:flowNode': [node: SimpleFlowNode | undefined]
   'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: NodeType]
 }>()
 
@@ -65,7 +66,7 @@ const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {
   // 把当前节点传递给配置组件
-  nodeSetting.value.setCurrentNode(currentNode.value);
+  nodeSetting.value.setCurrentNode(currentNode.value)
   nodeSetting.value.open()
 }
 // 监控节点变化
@@ -80,7 +81,8 @@ const showInput = ref(false)
 // 节点名称输入框失去焦点
 const blurEvent = () => {
   showInput.value = false
-  currentNode.value.name = currentNode.value.name || NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string
+  currentNode.value.name =
+    currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
 }
 // 点击节点标题进行输入
 const clickEvent = () => {
@@ -88,32 +90,15 @@ const clickEvent = () => {
 }
 
 const deleteNode = () => {
-  emits('update:modelValue', currentNode.value.childNode)
+  emits('update:flowNode', currentNode.value.childNode)
 }
 
-const copyNode = () => {
-  const newCopyNode: SimpleFlowNode = {
-    id: generateUUID(),
-    name: currentNode.value.name,
-    showText: currentNode.value.showText,
-    type: currentNode.value.type,
-    // 审批节点配置
-    attributes: {
-      approveMethod: currentNode.value.attributes?.approveMethod,
-      candidateStrategy: currentNode.value.attributes?.candidateStrategy,
-      candidateParam: currentNode.value.attributes?.candidateParam
-    },
-    childNode: currentNode.value
-  }
-  currentNode.value = newCopyNode
-  emits('update:modelValue', currentNode.value)
-}
 // 查找可以驳回用户节点
 const findReturnTaskNodes = (
-  matchNodeList: SimpleFlowNode[], // 匹配的节点
+  matchNodeList: SimpleFlowNode[] // 匹配的节点
 ) => {
   // 从父节点查找
-  emits('find:parentNode', matchNodeList, NodeType.USER_TASK_NODE);
+  emits('find:parentNode', matchNodeList, NodeType.USER_TASK_NODE)
 }
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/views/bpm/simpleWorkflow/index1.vue b/src/views/bpm/simpleWorkflow/index1.vue
deleted file mode 100644
index 4d612ff0..00000000
--- a/src/views/bpm/simpleWorkflow/index1.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<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 { updateBpmSimpleModel, 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
-  }
-
-  console.log('nodeConfig.value ', nodeConfig.value)
-
-  const data = {
-    id: modelId,
-    simpleModelBody: nodeConfig.value
-  }
-
-  const result = await updateBpmSimpleModel(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>

From 3a5c93fa84d34a1d19330397bf01caee63a72bd5 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 23 Jul 2024 22:39:06 +0800
Subject: [PATCH 39/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ProcessNodeTree.vue                   |  10 +-
 .../src/SimpleProcessDesigner.vue             |   1 +
 .../SimpleProcessDesignerV2/src/consts.ts     | 248 +++++----
 .../SimpleProcessDesignerV2/src/node.ts       | 260 +++++++++
 .../src/nodes-config/CopyTaskNodeConfig.vue   | 211 ++------
 .../src/nodes-config/UserTaskNodeConfig.vue   | 502 +++++++-----------
 .../src/nodes/CopyTaskNode.vue                |   5 +-
 .../src/nodes/UserTaskNode.vue                |  16 +-
 .../SimpleProcessDesignerV2/src/utils.ts      |  25 +-
 9 files changed, 675 insertions(+), 603 deletions(-)
 create mode 100644 src/components/SimpleProcessDesignerV2/src/node.ts

diff --git a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
index d11e67cc..440e574a 100644
--- a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
+++ b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@@ -50,6 +50,7 @@ import CopyTaskNode from './nodes/CopyTaskNode.vue'
 import ExclusiveNode from './nodes/ExclusiveNode.vue'
 import ParallelNode from './nodes/ParallelNode.vue'
 import { SimpleFlowNode, NodeType } from './consts'
+import { useWatchNode } from './node'
 defineOptions({
   name: 'ProcessNodeTree'
 })
@@ -72,15 +73,8 @@ const emits = defineEmits<{
   ]
 }>()
 
-const currentNode = ref<SimpleFlowNode>(props.flowNode)
+const currentNode = useWatchNode(props)
 
-// 重要：监控节点变化. 重新绘制节点
-watch(
-  () => props.flowNode,
-  (newValue) => {
-    currentNode.value = newValue
-  }
-)
 // 用于删除节点
 const handleModelValueUpdate = (updateValue) => {
   emits('update:flowNode', updateValue)
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index b26c2fea..60369120 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -138,6 +138,7 @@ const zoomIn = () => {
 
 onMounted(async () => {
   const result = await getBpmSimpleModel(props.modelId)
+  console.log('the result is :', result)
   if (result) {
     processNodeTree.value = result
   } else {
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 4525ce67..70188590 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -1,6 +1,8 @@
 // @ts-ignore
 import { DictDataVO } from '@/api/system/dict/types'
-
+/**
+ * 节点类型
+ */
 export enum NodeType {
   /**
    * 发起人节点
@@ -46,68 +48,37 @@ export enum NodeType {
    */
   INCLUSIVE_NODE_JOIN = 8
 }
-// 时间单位枚举
-export enum TimeUnitType {
-  /**
-   * 分钟
-   */
-  MINUTE = 1,
-  /**
-   * 小时
-   */
-  HOUR = 2,
-  /**
-   * 天
-   */
-  DAY = 3
+/**
+ *  节点结构定义
+ */
+export interface SimpleFlowNode {
+  id: string
+  type: NodeType
+  name: string
+  showText?: string
+  attributes?: any
+  // 孩子节点
+  childNode?: SimpleFlowNode
+  // 条件节点
+  conditionNodes?: SimpleFlowNode[]
+  // 候选人策略
+  candidateStrategy?: number
+  // 候选人参数
+  candidateParam?: string
+  // 多人审批方式
+  approveMethod?: ApproveMethodType
+  //通过比例
+  approveRatio?: number
+  // 审批按钮设置
+  buttonsSetting?: any[]
+  // 表单权限
+  fieldsPermission?: Array<Record<string, string>>
+  // 审批任务超时处理
+  timeoutHandler?: TimeoutHandler
+  // 审批任务拒绝处理
+  rejectHandler?: RejectHandler
 }
-
-export enum RejectHandlerType {
-  /**
-   * 结束流程
-   */
-  FINISH_PROCESS = 1,
-  /**
-   * 驳回到指定节点
-   */
-  RETURN_USER_TASK = 2
-}
-
-// 条件配置类型 （ 用于条件节点配置 ）
-export enum ConditionConfigType {
-  /**
-   * 条件表达式
-   */
-  EXPRESSION = 1,
-
-  /**
-   * 条件规则
-   */
-  RULE = 2
-}
-// 多人审批方式类型 （ 用于审批节点 ）
-export enum ApproveMethodType {
-  /**
-   * 随机挑选一人审批
-   */
-  RRANDOM_SELECT_ONE_APPROVE = 1,
-
-  /**
-   * 多人会签(按通过比例)
-   */
-  APPROVE_BY_RATIO = 2,
-
-  /**
-   * 多人或签(通过只需一人，拒绝只需一人)
-   */
-  ANY_APPROVE = 3,
-  /**
-   * 多人依次审批
-   */
-  SEQUENTIAL_APPROVE = 4
-}
-
-// 候选人策略 （ 用于审批节点。抄送节点 )
+// 候选人策略枚举 （ 用于审批节点。抄送节点 )
 export enum CandidateStrategy {
   /**
    * 指定角色
@@ -147,12 +118,41 @@ export enum CandidateStrategy {
   EXPRESSION = 60
 }
 
-export type RejectHandler = {
-  type: RejectHandlerType
+// 多人审批方式类型枚举 （ 用于审批节点 ）
+export enum ApproveMethodType {
+  /**
+   * 随机挑选一人审批
+   */
+  RRANDOM_SELECT_ONE_APPROVE = 1,
 
+  /**
+   * 多人会签(按通过比例)
+   */
+  APPROVE_BY_RATIO = 2,
+
+  /**
+   * 多人或签(通过只需一人，拒绝只需一人)
+   */
+  ANY_APPROVE = 3,
+  /**
+   * 多人依次审批
+   */
+  SEQUENTIAL_APPROVE = 4
+}
+
+/**
+ * 审批拒绝结构定义
+ */
+export type RejectHandler = {
+  // 审批拒绝类型
+  type: RejectHandlerType
+  // 回退节点 Id
   returnNodeId?: string
 }
 
+/**
+ * 审批超时结构定义
+ */
 export type TimeoutHandler = {
   //是否开启超时处理
   enable: boolean
@@ -163,60 +163,57 @@ export type TimeoutHandler = {
   // 执行动作是自动提醒, 最大提醒次数
   maxRemindCount?: number
 }
-
-export type SimpleFlowNode = {
-  id: string
-  type: NodeType
-  name: string
-  showText?: string
-  attributes?: any
-  // 孩子节点
-  childNode?: SimpleFlowNode
-  // 条件节点
-  conditionNodes?: SimpleFlowNode[]
-  // 候选人策略
-  candidateStrategy?: number
-  // 候选人参数
-  candidateParam?: string
-  // 多人审批方式
-  approveMethod?: ApproveMethodType
-  //通过比例
-  approveRatio?: number
-  // 审批按钮设置
-  buttonsSetting?: any[]
-  // 表单权限
-  fieldsPermission?: any[]
-  // 审批任务超时处理
-  timeoutHandler?: TimeoutHandler
-  // 审批任务拒绝处理
-  rejectHandler?: RejectHandler
+// 审批拒绝类型枚举
+export enum RejectHandlerType {
+  /**
+   * 结束流程
+   */
+  FINISH_PROCESS = 1,
+  /**
+   * 驳回到指定节点
+   */
+  RETURN_USER_TASK = 2
 }
 
-// 条件组
-export type ConditionGroup = {
-  // 条件组的逻辑关系是否为且
-  and: boolean
-  // 条件数组
-  conditions: Condition[]
+// 时间单位枚举
+export enum TimeUnitType {
+  /**
+   * 分钟
+   */
+  MINUTE = 1,
+  /**
+   * 小时
+   */
+  HOUR = 2,
+  /**
+   * 天
+   */
+  DAY = 3
 }
 
-// 条件
-export type Condition = {
-  // 条件规则的逻辑关系是否为且
-  and: boolean
-  rules: ConditionRule[]
+// 条件配置类型 （ 用于条件节点配置 ）
+export enum ConditionConfigType {
+  /**
+   * 条件表达式
+   */
+  EXPRESSION = 1,
+
+  /**
+   * 条件规则
+   */
+  RULE = 2
 }
 
-// 条件规则
-export type ConditionRule = {
-  type: number
-  opName: string
-  opCode: string
-  leftSide: string
-  rightSide: string
+/**
+ * 操作按钮权限结构定义
+ */
+export type ButtonSetting = {
+  id: OpsButtonType
+  displayName: string
+  enable: boolean
 }
 
-// 审批操作按钮类型
+// 操作按钮类型枚举 (用于审批节点)
 export enum OpsButtonType {
   /**
    * 通过
@@ -243,11 +240,34 @@ export enum OpsButtonType {
    */
   RETURN = 6
 }
+/**
+ * 条件规则结构定义
+ */
+export type ConditionRule = {
+  type: number
+  opName: string
+  opCode: string
+  leftSide: string
+  rightSide: string
+}
 
-export type ButtonSetting = {
-  id: OpsButtonType
-  displayName: string
-  enable: boolean
+/**
+ * 条件组结构定义
+ */
+export type ConditionGroup = {
+  // 条件组的逻辑关系是否为且
+  and: boolean
+  // 条件数组
+  conditions: Condition[]
+}
+
+/**
+ * 条件结构定义
+ */
+export type Condition = {
+  // 条件规则的逻辑关系是否为且
+  and: boolean
+  rules: ConditionRule[]
 }
 
 export const NODE_DEFAULT_TEXT = new Map<number, string>()
diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
new file mode 100644
index 00000000..a2c47b1e
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -0,0 +1,260 @@
+import { cloneDeep } from 'lodash-es'
+import * as RoleApi from '@/api/system/role'
+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'
+import {
+  SimpleFlowNode,
+  CandidateStrategy,
+  NodeType,
+  ApproveMethodType,
+  RejectHandlerType,
+  NODE_DEFAULT_NAME
+} from './consts'
+export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlowNode> {
+  const node = ref<SimpleFlowNode>(props.flowNode)
+  watch(
+    () => props.flowNode,
+    (newValue) => {
+      node.value = newValue
+    }
+  )
+  return node
+}
+
+/**
+ * @description 表单数据权限配置，用于审批节点、抄送节点
+ */
+export function useFormFieldsPermission() {
+  // 字段权限配置. 需要有 field, title,  permissioin 属性
+  const fieldsPermissionConfig = ref<Array<Record<string, string>>>([])
+
+  const formType = inject<Ref<number>>('formType') // 表单类型
+
+  const formFields = inject<Ref<string[]>>('formFields') // 流程表单字段
+
+  const getNodeConfigFormFields = (nodeFormFields?: Array<Record<string, string>>) => {
+    nodeFormFields = toRaw(nodeFormFields)
+    fieldsPermissionConfig.value =
+      cloneDeep(nodeFormFields) || getDefaultFieldsPermission(unref(formFields))
+  }
+  // 获取默认的表单权限。 所有字段只读
+  const getDefaultFieldsPermission = (formFields?: string[]) => {
+    const defaultFieldsPermission: Array<Record<string, string>> = []
+    if (formFields) {
+      formFields.forEach((fieldStr: string) => {
+        const { field, title } = JSON.parse(fieldStr)
+        defaultFieldsPermission.push({
+          field,
+          title,
+          permission: '1' // 只读
+        })
+      })
+    }
+    return defaultFieldsPermission
+  }
+
+  return {
+    formType,
+    fieldsPermissionConfig,
+    getNodeConfigFormFields
+  }
+}
+
+export type UserTaskFormType = {
+  candidateParamArray: any[]
+  candidateStrategy: CandidateStrategy
+  approveMethod: ApproveMethodType
+  approveRatio?: number
+  rejectHandlerType?: RejectHandlerType
+  returnNodeId?: string
+  timeoutHandlerEnable?: boolean
+  timeoutHandlerAction?: number
+  timeDuration?: number
+  maxRemindCount?: number
+  buttonsSetting: any[]
+}
+
+export type CopyTaskFormType = {
+  candidateParamArray: any[]
+  candidateStrategy: CandidateStrategy
+}
+
+/**
+ * @description 节点表单数据。 用于审批节点、抄送节点
+ */
+export function useNodeForm(nodeType: NodeType) {
+  const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') // 角色列表
+  const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
+  const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // 用户列表
+  const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList') // 部门列表
+  const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // 用户组列表
+  const deptTreeOptions = inject('deptTree') // 部门树
+  const configForm = ref<UserTaskFormType | CopyTaskFormType>()
+  if (nodeType === NodeType.USER_TASK_NODE) {
+    configForm.value = {
+      candidateParamArray: [],
+      candidateStrategy: CandidateStrategy.USER,
+      approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
+      approveRatio: 100,
+      rejectHandlerType: RejectHandlerType.FINISH_PROCESS,
+      returnNodeId: '',
+      timeoutHandlerEnable: false,
+      timeoutHandlerAction: 1,
+      timeDuration: 6, // 默认 6小时
+      maxRemindCount: 1, // 默认 提醒 1次
+      buttonsSetting: []
+    }
+  } else {
+    configForm.value = {
+      candidateParamArray: [],
+      candidateStrategy: CandidateStrategy.USER
+    }
+  }
+
+  const getShowText = (): string => {
+    let showText = ''
+    // 指定成员
+    if (configForm.value?.candidateStrategy === CandidateStrategy.USER) {
+      if (configForm.value.candidateParamArray?.length > 0) {
+        const candidateNames: string[] = []
+        userOptions?.value.forEach((item) => {
+          if (configForm.value?.candidateParamArray.includes(item.id)) {
+            candidateNames.push(item.nickname)
+          }
+        })
+        showText = `指定成员：${candidateNames.join(',')}`
+      }
+    }
+    // 指定角色
+    if (configForm.value?.candidateStrategy === CandidateStrategy.ROLE) {
+      if (configForm.value.candidateParamArray?.length > 0) {
+        const candidateNames: string[] = []
+        roleOptions?.value.forEach((item) => {
+          if (configForm.value?.candidateParamArray.includes(item.id)) {
+            candidateNames.push(item.name)
+          }
+        })
+        showText = `指定角色：${candidateNames.join(',')}`
+      }
+    }
+    // 指定部门
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
+      configForm.value?.candidateStrategy === CandidateStrategy.DEPT_LEADER
+    ) {
+      if (configForm.value?.candidateParamArray?.length > 0) {
+        const candidateNames: string[] = []
+        deptOptions?.value.forEach((item) => {
+          if (configForm.value?.candidateParamArray.includes(item.id)) {
+            candidateNames.push(item.name)
+          }
+        })
+        if (configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER) {
+          showText = `部门成员：${candidateNames.join(',')}`
+        } else {
+          showText = `部门的负责人：${candidateNames.join(',')}`
+        }
+      }
+    }
+
+    // 指定岗位
+    if (configForm.value?.candidateStrategy === CandidateStrategy.POST) {
+      if (configForm.value.candidateParamArray?.length > 0) {
+        const candidateNames: string[] = []
+        postOptions?.value.forEach((item) => {
+          if (configForm.value?.candidateParamArray.includes(item.id)) {
+            candidateNames.push(item.name)
+          }
+        })
+        showText = `指定岗位: ${candidateNames.join(',')}`
+      }
+    }
+    // 指定用户组
+    if (configForm.value?.candidateStrategy === CandidateStrategy.USER_GROUP) {
+      if (configForm.value?.candidateParamArray?.length > 0) {
+        const candidateNames: string[] = []
+        userGroupOptions?.value.forEach((item) => {
+          if (configForm.value?.candidateParamArray.includes(item.id)) {
+            candidateNames.push(item.name)
+          }
+        })
+        showText = `指定用户组: ${candidateNames.join(',')}`
+      }
+    }
+
+    // 发起人自选
+    if (configForm.value?.candidateStrategy === CandidateStrategy.START_USER_SELECT) {
+      showText = `发起人自选`
+    }
+    // 发起人自己
+    if (configForm.value?.candidateStrategy === CandidateStrategy.START_USER) {
+      showText = `发起人自己`
+    }
+
+    // 流程表达式
+    if (configForm.value?.candidateStrategy === CandidateStrategy.EXPRESSION) {
+      if (configForm.value.candidateParamArray?.length > 0) {
+        showText = `流程表达式：${configForm.value.candidateParamArray[0]}`
+      }
+    }
+    return showText
+  }
+
+  return {
+    configForm,
+    roleOptions,
+    postOptions,
+    userOptions,
+    userGroupOptions,
+    deptTreeOptions,
+    getShowText
+  }
+}
+
+/**
+ * @description 抽屉配置
+ */
+export function useDrawer() {
+  // 抽屉配置是否可见
+  const settingVisible = ref(false)
+  // 关闭配置抽屉
+  const closeDrawer = () => {
+    settingVisible.value = false
+  }
+  // 打开配置抽屉
+  const openDrawer = () => {
+    settingVisible.value = true
+  }
+  return {
+    settingVisible,
+    closeDrawer,
+    openDrawer
+  }
+}
+
+/**
+ * @description 节点名称配置
+ */
+export function useNodeName(nodeType: NodeType) {
+  // 节点名称
+  const nodeName = ref<string>()
+  // 节点名称输入框
+  const showInput = ref(false)
+  // 点击节点名称编辑图标
+  const clickIcon = () => {
+    showInput.value = true
+  }
+  // 节点名称输入框失去焦点
+  const blurEvent = () => {
+    showInput.value = false
+    nodeName.value = nodeName.value || (NODE_DEFAULT_NAME.get(nodeType) as string)
+  }
+  return {
+    nodeName,
+    showInput,
+    clickIcon,
+    blurEvent
+  }
+}
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index b1ee7e1f..807f08b5 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -14,14 +14,12 @@
           class="config-editable-input"
           @blur="blurEvent()"
           v-mountedFocus
-          v-model="configForm.name"
-          :placeholder="configForm.name"
+          v-model="nodeName"
+          :placeholder="nodeName"
         />
-        <div v-else class="node-name"
-          >{{ configForm.name }}
-          <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"
-        /></div>
-
+        <div v-else class="node-name">
+          {{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
+        </div>
         <div class="divide-line"></div>
       </div>
     </template>
@@ -173,7 +171,7 @@
           </div>
           <div
             class="field-setting-item"
-            v-for="(item, index) in configForm.fieldsPermission"
+            v-for="(item, index) in fieldsPermissionConfig"
             :key="index"
           >
             <div class="field-setting-item-label"> {{ item.title }} </div>
@@ -202,16 +200,17 @@
   </el-drawer>
 </template>
 <script setup lang="ts">
-import { SimpleFlowNode, CandidateStrategy, NodeType, NODE_DEFAULT_NAME } from '../consts'
-import { getDefaultFieldsPermission } from '../utils'
+import { SimpleFlowNode, CandidateStrategy, NodeType } from '../consts'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import * as RoleApi from '@/api/system/role'
-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'
+import {
+  useWatchNode,
+  useDrawer,
+  useNodeName,
+  useFormFieldsPermission,
+  useNodeForm,
+  CopyTaskFormType
+} from '../node'
 import { defaultProps } from '@/utils/tree'
-import { cloneDeep } from 'lodash-es'
 defineOptions({
   name: 'CopyTaskNodeConfig'
 })
@@ -221,26 +220,34 @@ const props = defineProps({
     required: true
   }
 })
-// 是否可见
-const settingVisible = ref(false)
+// 抽屉配置
+const { settingVisible, closeDrawer, openDrawer } = useDrawer()
 // 当前节点
-const currentNode = ref<SimpleFlowNode>(props.flowNode)
-// 监控节点变化
-watch(
-  () => props.flowNode,
-  (newValue) => {
-    currentNode.value = newValue
-  }
-)
-const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') // 角色列表
-const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
-const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // 用户列表
-const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList') // 部门列表
-const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // 用户组列表
-const deptTreeOptions = inject('deptTree') // 部门树
-const formType = inject('formType') // 表单类型
-const formFields = inject<Ref<string[]>>('formFields')
+const currentNode = useWatchNode(props)
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.COPY_TASK_NODE)
+// 激活的 Tab 标签页
+const activeTabName = ref('user')
+// 表单字段权限配置
+const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission()
+// 抄送人表单配置
+const formRef = ref() // 表单 Ref
+// 表单校验规则
+const formRules = reactive({
+  candidateStrategy: [{ required: true, message: '抄送人设置不能为空', trigger: 'change' }],
+  candidateParamArray: [{ required: true, message: '选项不能为空', trigger: 'blur' }]
+})
 
+const {
+  configForm: tempConfigForm,
+  roleOptions,
+  postOptions,
+  userOptions,
+  userGroupOptions,
+  deptTreeOptions,
+  getShowText
+} = useNodeForm(NodeType.COPY_TASK_NODE)
+const configForm = tempConfigForm as Ref<CopyTaskFormType>
 // 抄送人策略， 去掉发起人自选 和 发起人自己
 const copyUserStrategies = computed(() => {
   return getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY).filter(
@@ -249,25 +256,9 @@ const copyUserStrategies = computed(() => {
       item.value !== CandidateStrategy.START_USER
   )
 })
-// 激活的 Tab 标签页
-const activeTabName = ref('user')
-const formRef = ref() // 表单 Ref
-
-const configForm = ref<any>({
-  name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE),
-  candidateParamArray: [],
-  candidateStrategy: CandidateStrategy.USER,
-  fieldsPermission: []
-})
-// 表单校验规则
-const formRules = reactive({
-  candidateStrategy: [{ required: true, message: '抄送人设置不能为空', trigger: 'change' }],
-  candidateParamArray: [{ required: true, message: '选项不能为空', trigger: 'blur' }]
-})
-
-// 关闭
-const closeDrawer = () => {
-  settingVisible.value = false
+// 改变抄送人设置策略
+const changeCandidateStrategy = () => {
+  configForm.value.candidateParamArray = []
 }
 // 保存配置
 const saveConfig = async () => {
@@ -277,23 +268,19 @@ const saveConfig = async () => {
   if (!valid) return false
   const showText = getShowText()
   if (!showText) return false
-  currentNode.value.name = configForm.value.name
+  currentNode.value.name = nodeName.value!
   currentNode.value.candidateParam = configForm.value.candidateParamArray?.join(',')
   currentNode.value.candidateStrategy = configForm.value.candidateStrategy
   currentNode.value.showText = showText
-  currentNode.value.fieldsPermission = configForm.value.fieldsPermission
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value
   settingVisible.value = false
   return true
 }
-
-const open = () => {
-  settingVisible.value = true
-}
-// 设置抄送节点
-const setCurrentNode = (node: SimpleFlowNode) => {
-  configForm.value.name = node.name
+// 显示抄送节点配置， 由父组件传过来
+const showCopyTaskNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name
   // 抄送人设置
-  configForm.value.candidateStrategy = node.candidateStrategy
+  configForm.value.candidateStrategy = node.candidateStrategy!
   const strCandidateParam = node?.candidateParam
   if (node.candidateStrategy === CandidateStrategy.EXPRESSION) {
     configForm.value.candidateParamArray[0] = strCandidateParam
@@ -303,104 +290,10 @@ const setCurrentNode = (node: SimpleFlowNode) => {
     }
   }
   // 表单字段权限
-  configForm.value.fieldsPermission =
-    cloneDeep(node.fieldsPermission) || getDefaultFieldsPermission(formFields?.value)
+  getNodeConfigFormFields(node.fieldsPermission)
 }
 
-defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
-const changeCandidateStrategy = () => {
-  configForm.value.candidateParamArray = []
-}
-// TODO 貌似可以和 UserTaskNodeConfig 重复了， 如何共用??
-const getShowText = (): string => {
-  let showText = ''
-  // 指定成员
-  if (configForm.value.candidateStrategy === CandidateStrategy.USER) {
-    if (configForm.value.candidateParamArray?.length > 0) {
-      const candidateNames: string[] = []
-      userOptions?.value.forEach((item) => {
-        if (configForm.value.candidateParamArray.includes(item.id)) {
-          candidateNames.push(item.nickname)
-        }
-      })
-      showText = `指定成员：${candidateNames.join(',')}`
-    }
-  }
-  // 指定角色
-  if (configForm.value.candidateStrategy === CandidateStrategy.ROLE) {
-    if (configForm.value.candidateParamArray?.length > 0) {
-      const candidateNames: string[] = []
-      roleOptions?.value.forEach((item) => {
-        if (configForm.value.candidateParamArray.includes(item.id)) {
-          candidateNames.push(item.name)
-        }
-      })
-      showText = `指定角色：${candidateNames.join(',')}`
-    }
-  }
-  // 指定部门
-  if (
-    configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
-    configForm.value.candidateStrategy === CandidateStrategy.DEPT_LEADER
-  ) {
-    if (configForm.value.candidateParamArray?.length > 0) {
-      const candidateNames: string[] = []
-      deptOptions?.value.forEach((item) => {
-        if (configForm.value.candidateParamArray.includes(item.id)) {
-          candidateNames.push(item.name)
-        }
-      })
-      if (currentNode.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER) {
-        showText = `部门成员：${candidateNames.join(',')}`
-      } else {
-        showText = `部门的负责人：${candidateNames.join(',')}`
-      }
-    }
-  }
-  // 指定岗位
-  if (configForm.value.candidateStrategy === CandidateStrategy.POST) {
-    if (configForm.value.candidateParamArray?.length > 0) {
-      const candidateNames: string[] = []
-      postOptions?.value.forEach((item) => {
-        if (configForm.value.candidateParamArray.includes(item.id)) {
-          candidateNames.push(item.name)
-        }
-      })
-      showText = `指定岗位: ${candidateNames.join(',')}`
-    }
-  }
-  // 指定用户组
-  if (configForm.value.candidateStrategy === CandidateStrategy.USER_GROUP) {
-    if (configForm.value.candidateParamArray?.length > 0) {
-      const candidateNames: string[] = []
-      userGroupOptions?.value.forEach((item) => {
-        if (configForm.value.candidateParamArray.includes(item.id)) {
-          candidateNames.push(item.name)
-        }
-      })
-      showText = `指定用户组: ${candidateNames.join(',')}`
-    }
-  }
-  // 流程表达式
-  if (configForm.value.candidateStrategy === CandidateStrategy.EXPRESSION) {
-    if (configForm.value.candidateParamArray?.length > 0) {
-      showText = `流程表达式：${configForm.value.candidateParamArray[0]}`
-    }
-  }
-  return showText
-}
-// 显示名称输入框
-const showInput = ref(false)
-
-const clickIcon = () => {
-  showInput.value = true
-}
-// 输入框失去焦点
-const blurEvent = () => {
-  showInput.value = false
-  configForm.value.name =
-    configForm.value.name || (NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string)
-}
+defineExpose({ openDrawer, showCopyTaskNodeConfig }) // 暴露方法给父组件
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index cb55341e..75af7ba7 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -15,14 +15,12 @@
           class="config-editable-input"
           @blur="blurEvent()"
           v-mountedFocus
-          v-model="configForm.name"
-          :placeholder="configForm.name"
+          v-model="nodeName"
+          :placeholder="nodeName"
         />
-        <div v-else class="node-name"
-          >{{ configForm.name }}
-          <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"
-        /></div>
-
+        <div v-else class="node-name">
+          {{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
+        </div>
         <div class="divide-line"></div>
       </div>
     </template>
@@ -280,7 +278,7 @@
           </el-form>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="操作按钮设置" name="buttons" v-if="formType === 10">
+      <el-tab-pane label="操作按钮设置" name="buttons">
         <div class="button-setting-pane">
           <div class="button-setting-desc">操作按钮</div>
           <div class="button-setting-title">
@@ -288,11 +286,7 @@
             <div class="pl-4 button-title-label">显示名称</div>
             <div class="button-title-label">启用</div>
           </div>
-          <div
-            class="button-setting-item"
-            v-for="(item, index) in configForm.buttonsSetting"
-            :key="index"
-          >
+          <div class="button-setting-item" v-for="(item, index) in buttonsSetting" :key="index">
             <div class="button-setting-item-label"> {{ OPERATION_BUTTON_NAME.get(item.id) }} </div>
             <div class="button-setting-item-label">
               <input
@@ -327,7 +321,7 @@
           </div>
           <div
             class="field-setting-item"
-            v-for="(item, index) in configForm.fieldsPermission"
+            v-for="(item, index) in fieldsPermissionConfig"
             :key="index"
           >
             <div class="field-setting-item-label"> {{ item.title }} </div>
@@ -368,19 +362,22 @@ import {
   TIMEOUT_HANDLER_ACTION_TYPES,
   TIME_UNIT_TYPES,
   REJECT_HANDLER_TYPES,
-  NODE_DEFAULT_NAME,
   DEFAULT_BUTTON_SETTING,
-  OPERATION_BUTTON_NAME
+  OPERATION_BUTTON_NAME,
+  ButtonSetting
 } from '../consts'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { getDefaultFieldsPermission } from '../utils'
+import {
+  useWatchNode,
+  useNodeName,
+  useFormFieldsPermission,
+  useNodeForm,
+  UserTaskFormType,
+  useDrawer
+} from '../node'
 import { defaultProps } from '@/utils/tree'
-import * as RoleApi from '@/api/system/role'
-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'
 import { cloneDeep } from 'lodash-es'
+import { convertTimeUnit } from '../utils'
 defineOptions({
   name: 'UserTaskNodeConfig'
 })
@@ -393,44 +390,22 @@ const props = defineProps({
 const emits = defineEmits<{
   'find:returnTaskNodes': [nodeList: SimpleFlowNode[]]
 }>()
+// 监控节点的变化
+const currentNode = useWatchNode(props)
+// 抽屉配置
+const { settingVisible, closeDrawer, openDrawer } = useDrawer()
+// 节点名称配置
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.USER_TASK_NODE)
+// 激活的 Tab 标签页
+const activeTabName = ref('user')
+// 表单字段权限设置
+const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission()
+// 操作按钮设置
+const { buttonsSetting, btnDisplayNameEdit, changeBtnDisplayName, btnDisplayNameBlurEvent } =
+  useButtonsSetting()
 
-const currentNode = ref<SimpleFlowNode>(props.flowNode)
-// 监控节点变化
-watch(
-  () => props.flowNode,
-  (newValue) => {
-    currentNode.value = newValue
-  }
-)
-const notAllowedMultiApprovers = ref(false)
-const settingVisible = ref(false)
-const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') // 角色列表
-const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
-const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // 用户列表
-const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList') // 部门列表
-const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // 用户组列表
-const deptTreeOptions = inject('deptTree') // 部门树
-const formType = inject('formType') // 表单类型
-const formFields = inject<Ref<string[]>>('formFields')
-const returnTaskList = ref<SimpleFlowNode[]>([])
-
+// 审批人表单设置
 const formRef = ref() // 表单 Ref
-const activeTabName = ref('user') // 激活的 Tab 标签页
-const configForm = ref<any>({
-  name: NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE),
-  candidateParamArray: [],
-  candidateStrategy: CandidateStrategy.USER,
-  approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
-  approveRatio: 100,
-  rejectHandlerType: RejectHandlerType.FINISH_PROCESS,
-  returnNodeId: '',
-  timeoutHandlerEnable: false,
-  timeoutHandlerAction: 1,
-  timeDuration: 6, // 默认 6小时
-  maxRemindCount: 1, // 默认 提醒 1次
-  fieldsPermission: [],
-  buttonsSetting: []
-})
 // 表单校验规则
 const formRules = reactive({
   candidateStrategy: [{ required: true, message: '审批人设置不能为空', trigger: 'change' }],
@@ -443,10 +418,66 @@ const formRules = reactive({
   timeDuration: [{ required: true, message: '超时时间不能为空', trigger: 'blur' }],
   maxRemindCount: [{ required: true, message: '提醒次数不能为空', trigger: 'blur' }]
 })
-// 关闭
-const closeDrawer = () => {
-  settingVisible.value = false
+
+const {
+  configForm: tempConfigForm,
+  roleOptions,
+  postOptions,
+  userOptions,
+  userGroupOptions,
+  deptTreeOptions,
+  getShowText
+} = useNodeForm(NodeType.USER_TASK_NODE)
+const configForm = tempConfigForm as Ref<UserTaskFormType>
+// 不允许多人审批
+const notAllowedMultiApprovers = ref(false)
+// 改变审批人设置策略
+const changeCandidateStrategy = () => {
+  configForm.value.candidateParamArray = []
+  configForm.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
+  if (
+    configForm.value.candidateStrategy === CandidateStrategy.START_USER ||
+    configForm.value.candidateStrategy === CandidateStrategy.USER
+  ) {
+    notAllowedMultiApprovers.value = true
+  } else {
+    notAllowedMultiApprovers.value = false
+  }
 }
+// 改变审批候选人
+const changedCandidateUsers = () => {
+  if (
+    configForm.value.candidateParamArray?.length <= 1 &&
+    configForm.value.candidateStrategy === CandidateStrategy.USER
+  ) {
+    configForm.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
+    configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS
+    notAllowedMultiApprovers.value = true
+  } else {
+    notAllowedMultiApprovers.value = false
+  }
+}
+// 审批方式改变
+const approveMethodChanged = () => {
+  configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS
+  if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    configForm.value.approveRatio = 100
+  }
+  formRef.value.clearValidate('approveRatio')
+}
+// 审批拒绝 可回退的节点
+const returnTaskList = ref<SimpleFlowNode[]>([])
+// 审批人超时未处理设置
+const {
+  timeoutHandlerChange,
+  cTimeoutAction,
+  timeoutActionChanged,
+  timeUnit,
+  timeUnitChange,
+  isoTimeDuration,
+  cTimeoutMaxRemindCount
+} = useTimeoutHandler()
+
 // 保存配置
 const saveConfig = async () => {
   activeTabName.value = 'user'
@@ -455,7 +486,7 @@ const saveConfig = async () => {
   if (!valid) return false
   const showText = getShowText()
   if (!showText) return false
-  currentNode.value.name = configForm.value.name
+  currentNode.value.name = nodeName.value!
   currentNode.value.candidateStrategy = configForm.value.candidateStrategy
   currentNode.value.candidateParam = configForm.value.candidateParamArray?.join(',')
   // 设置审批方式
@@ -465,121 +496,31 @@ const saveConfig = async () => {
   }
   // 设置拒绝处理
   currentNode.value.rejectHandler = {
-    type: configForm.value.rejectHandlerType,
+    type: configForm.value.rejectHandlerType!,
     returnNodeId: configForm.value.returnNodeId
   }
   // 设置超时处理
   currentNode.value.timeoutHandler = {
-    enable: configForm.value.timeoutHandlerEnable,
+    enable: configForm.value.timeoutHandlerEnable!,
     action: cTimeoutAction.value,
     timeDuration: isoTimeDuration.value,
     maxRemindCount: cTimeoutMaxRemindCount.value
   }
   // 设置表单权限
-  currentNode.value.fieldsPermission = configForm.value.fieldsPermission
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value
   // 设置按钮权限
-  currentNode.value.buttonsSetting = configForm.value.buttonsSetting
+  currentNode.value.buttonsSetting = buttonsSetting.value
 
-  currentNode.value.showText = getShowText()
+  currentNode.value.showText = showText
   settingVisible.value = false
   return true
 }
-const getShowText = (): string => {
-  let showText = ''
-  // 指定成员
-  if (configForm.value.candidateStrategy === CandidateStrategy.USER) {
-    if (configForm.value.candidateParamArray?.length > 0) {
-      const candidateNames: string[] = []
-      userOptions?.value.forEach((item) => {
-        if (configForm.value.candidateParamArray.includes(item.id)) {
-          candidateNames.push(item.nickname)
-        }
-      })
-      showText = `指定成员：${candidateNames.join(',')}`
-    }
-  }
-  // 指定角色
-  if (configForm.value.candidateStrategy === CandidateStrategy.ROLE) {
-    if (configForm.value.candidateParamArray?.length > 0) {
-      const candidateNames: string[] = []
-      roleOptions?.value.forEach((item) => {
-        if (configForm.value.candidateParamArray.includes(item.id)) {
-          candidateNames.push(item.name)
-        }
-      })
-      showText = `指定角色：${candidateNames.join(',')}`
-    }
-  }
-  // 指定部门
-  if (
-    configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
-    configForm.value.candidateStrategy === CandidateStrategy.DEPT_LEADER
-  ) {
-    if (configForm.value.candidateParamArray?.length > 0) {
-      const candidateNames: string[] = []
-      deptOptions?.value.forEach((item) => {
-        if (configForm.value.candidateParamArray.includes(item.id)) {
-          candidateNames.push(item.name)
-        }
-      })
-      if (configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER) {
-        showText = `部门成员：${candidateNames.join(',')}`
-      } else {
-        showText = `部门的负责人：${candidateNames.join(',')}`
-      }
-    }
-  }
 
-  // 指定岗位
-  if (configForm.value.candidateStrategy === CandidateStrategy.POST) {
-    if (configForm.value.candidateParamArray?.length > 0) {
-      const candidateNames: string[] = []
-      postOptions?.value.forEach((item) => {
-        if (configForm.value.candidateParamArray.includes(item.id)) {
-          candidateNames.push(item.name)
-        }
-      })
-      showText = `指定岗位: ${candidateNames.join(',')}`
-    }
-  }
-  // 指定用户组
-  if (configForm.value.candidateStrategy === CandidateStrategy.USER_GROUP) {
-    if (configForm.value.candidateParamArray?.length > 0) {
-      const candidateNames: string[] = []
-      userGroupOptions?.value.forEach((item) => {
-        if (configForm.value.candidateParamArray.includes(item.id)) {
-          candidateNames.push(item.name)
-        }
-      })
-      showText = `指定用户组: ${candidateNames.join(',')}`
-    }
-  }
-
-  // 发起人自选
-  if (configForm.value.candidateStrategy === CandidateStrategy.START_USER_SELECT) {
-    showText = `发起人自选`
-  }
-  // 发起人自己
-  if (configForm.value.candidateStrategy === CandidateStrategy.START_USER) {
-    showText = `发起人自己`
-  }
-
-  // 流程表达式
-  if (configForm.value.candidateStrategy === CandidateStrategy.EXPRESSION) {
-    if (configForm.value.candidateParamArray?.length > 0) {
-      showText = `流程表达式：${configForm.value.candidateParamArray[0]}`
-    }
-  }
-  return showText
-}
-const open = () => {
-  settingVisible.value = true
-}
-// 配置审批节点， 由父组件传过来
-const setCurrentNode = (node: SimpleFlowNode) => {
-  configForm.value.name = node.name
+// 显示审批节点配置， 由父组件传过来
+const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name
   //1.1 审批人设置
-  configForm.value.candidateStrategy = node.candidateStrategy
+  configForm.value.candidateStrategy = node.candidateStrategy!
   const strCandidateParam = node?.candidateParam
   if (node.candidateStrategy === CandidateStrategy.EXPRESSION) {
     configForm.value.candidateParamArray[0] = strCandidateParam
@@ -598,18 +539,18 @@ const setCurrentNode = (node: SimpleFlowNode) => {
     notAllowedMultiApprovers.value = false
   }
   //1.2 设置审批方式
-  configForm.value.approveMethod = node.approveMethod
+  configForm.value.approveMethod = node.approveMethod!
   if (node.approveMethod == ApproveMethodType.APPROVE_BY_RATIO) {
-    configForm.value.approveRatio = node.approveRatio
+    configForm.value.approveRatio = node.approveRatio!
   }
   // 1.3 设置审批拒绝处理
-  configForm.value.rejectHandlerType = node.rejectHandler?.type
+  configForm.value.rejectHandlerType = node.rejectHandler!.type
   configForm.value.returnNodeId = node.rejectHandler?.returnNodeId
   const matchNodeList = []
   emits('find:returnTaskNodes', matchNodeList)
   returnTaskList.value = matchNodeList
   // 1.4 设置审批超时处理
-  configForm.value.timeoutHandlerEnable = node.timeoutHandler?.enable
+  configForm.value.timeoutHandlerEnable = node.timeoutHandler!.enable
   if (node.timeoutHandler?.enable && node.timeoutHandler?.timeDuration) {
     const strTimeDuration = node.timeoutHandler.timeDuration
     let parseTime = strTimeDuration.slice(2, strTimeDuration.length - 1)
@@ -620,152 +561,121 @@ const setCurrentNode = (node: SimpleFlowNode) => {
   configForm.value.timeoutHandlerAction = node.timeoutHandler?.action
   configForm.value.maxRemindCount = node.timeoutHandler?.maxRemindCount
   // 2. 操作按钮设置
-  configForm.value.buttonsSetting = cloneDeep(node.buttonsSetting) || DEFAULT_BUTTON_SETTING
+  buttonsSetting.value = cloneDeep(node.buttonsSetting) || DEFAULT_BUTTON_SETTING
   // 3. 表单字段权限配置
-  configForm.value.fieldsPermission =
-    cloneDeep(node.fieldsPermission) || getDefaultFieldsPermission(formFields?.value)
+  getNodeConfigFormFields(node.fieldsPermission)
 }
 
-defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
+defineExpose({ openDrawer, showUserTaskNodeConfig }) // 暴露方法给父组件
 
-const changeCandidateStrategy = () => {
-  configForm.value.candidateParamArray = []
-  configForm.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
-  if (
-    configForm.value.candidateStrategy === CandidateStrategy.START_USER ||
-    configForm.value.candidateStrategy === CandidateStrategy.USER
-  ) {
-    notAllowedMultiApprovers.value = true
-  } else {
-    notAllowedMultiApprovers.value = false
+/**
+ * @description 操作按钮设置
+ */
+function useButtonsSetting() {
+  const buttonsSetting = ref<ButtonSetting[]>()
+  // 操作按钮显示名称可编辑
+  const btnDisplayNameEdit = ref<boolean[]>([])
+  const changeBtnDisplayName = (index: number) => {
+    btnDisplayNameEdit.value[index] = true
+  }
+  const btnDisplayNameBlurEvent = (index: number) => {
+    btnDisplayNameEdit.value[index] = false
+    const buttonItem = buttonsSetting.value![index]
+    buttonItem.displayName = buttonItem.displayName || OPERATION_BUTTON_NAME.get(buttonItem.id)!
+  }
+  return {
+    buttonsSetting,
+    btnDisplayNameEdit,
+    changeBtnDisplayName,
+    btnDisplayNameBlurEvent
   }
 }
 
-const changedCandidateUsers = () => {
-  if (
-    configForm.value.candidateParamArray?.length <= 1 &&
-    configForm.value.candidateStrategy === CandidateStrategy.USER
-  ) {
-    configForm.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
-    configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS
-    notAllowedMultiApprovers.value = true
-  } else {
-    notAllowedMultiApprovers.value = false
-  }
-}
-// 显示名称输入框
-const showInput = ref(false)
+/**
+ * @description 审批人超时未处理配置
+ */
+function useTimeoutHandler() {
+  // 时间单位
+  const timeUnit = ref(TimeUnitType.HOUR)
 
-const clickIcon = () => {
-  showInput.value = true
-}
-// 节点名称输入框失去焦点
-const blurEvent = () => {
-  showInput.value = false
-  configForm.value.name =
-    configForm.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
-}
+  // 超时开关改变
+  const timeoutHandlerChange = () => {
+    if (configForm.value.timeoutHandlerEnable) {
+      timeUnit.value = 2
+      configForm.value.timeDuration = 6
+      configForm.value.timeoutHandlerAction = 1
+      configForm.value.maxRemindCount = 1
+    }
+  }
+  // 超时执行的动作
+  const cTimeoutAction = computed(() => {
+    if (!configForm.value.timeoutHandlerEnable) {
+      return undefined
+    }
+    return configForm.value.timeoutHandlerAction
+  })
 
-const approveMethodChanged = () => {
-  configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS
-  if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
-    configForm.value.approveRatio = 100
+  // 超时处理动作改变
+  const timeoutActionChanged = () => {
+    if (configForm.value.timeoutHandlerAction === 1) {
+      configForm.value.maxRemindCount = 1 // 超时提醒次数，默认为1
+    }
   }
-  formRef.value.clearValidate('approveRatio')
-}
 
-const timeUnit = ref(TimeUnitType.HOUR)
+  // 时间单位改变
+  const timeUnitChange = () => {
+    // 分钟，默认是 60 分钟
+    if (timeUnit.value === TimeUnitType.MINUTE) {
+      configForm.value.timeDuration = 60
+    }
+    // 小时，默认是 6 个小时
+    if (timeUnit.value === TimeUnitType.HOUR) {
+      configForm.value.timeDuration = 6
+    }
+    // 天， 默认 1天
+    if (timeUnit.value === TimeUnitType.DAY) {
+      configForm.value.timeDuration = 1
+    }
+  }
+  // 超时时间的 ISO 表示
+  const isoTimeDuration = computed(() => {
+    if (!configForm.value.timeoutHandlerEnable) {
+      return undefined
+    }
+    let strTimeDuration = 'PT'
+    if (timeUnit.value === TimeUnitType.MINUTE) {
+      strTimeDuration += configForm.value.timeDuration + 'M'
+    }
+    if (timeUnit.value === TimeUnitType.HOUR) {
+      strTimeDuration += configForm.value.timeDuration + 'H'
+    }
+    if (timeUnit.value === TimeUnitType.DAY) {
+      strTimeDuration += configForm.value.timeDuration + 'D'
+    }
+    return strTimeDuration
+  })
 
-// 超时时间的 ISO 表示
-const isoTimeDuration = computed(() => {
-  if (!configForm.value.timeoutHandlerEnable) {
-    return undefined
-  }
-  let strTimeDuration = 'PT'
-  if (timeUnit.value === TimeUnitType.MINUTE) {
-    strTimeDuration += configForm.value.timeDuration + 'M'
-  }
-  if (timeUnit.value === TimeUnitType.HOUR) {
-    strTimeDuration += configForm.value.timeDuration + 'H'
-  }
-  if (timeUnit.value === TimeUnitType.DAY) {
-    strTimeDuration += configForm.value.timeDuration + 'D'
-  }
-  return strTimeDuration
-})
-// 超时执行的动作
-const cTimeoutAction = computed(() => {
-  if (!configForm.value.timeoutHandlerEnable) {
-    return undefined
-  }
-  return configForm.value.timeoutHandlerAction
-})
-// 超时最大提醒次数
-const cTimeoutMaxRemindCount = computed(() => {
-  if (!configForm.value.timeoutHandlerEnable) {
-    return undefined
-  }
-  if (configForm.value.timeoutHandlerAction !== 1) {
-    return undefined
-  }
-  return configForm.value.maxRemindCount
-})
+  // 超时最大提醒次数
+  const cTimeoutMaxRemindCount = computed(() => {
+    if (!configForm.value.timeoutHandlerEnable) {
+      return undefined
+    }
+    if (configForm.value.timeoutHandlerAction !== 1) {
+      return undefined
+    }
+    return configForm.value.maxRemindCount
+  })
 
-// 超时开关改变
-const timeoutHandlerChange = () => {
-  if (configForm.value.timeoutHandlerEnable) {
-    timeUnit.value = 2
-    configForm.value.timeDuration = 6
-    configForm.value.timeoutHandlerAction = 1
-    configForm.value.maxRemindCount = 1
+  return {
+    timeoutHandlerChange,
+    cTimeoutAction,
+    timeoutActionChanged,
+    timeUnit,
+    timeUnitChange,
+    isoTimeDuration,
+    cTimeoutMaxRemindCount
   }
 }
-// 超时处理动作改变
-const timeoutActionChanged = () => {
-  if (configForm.value.timeoutHandlerAction === 1) {
-    configForm.value.maxRemindCount = 1 // 超时提醒次数，默认为1
-  }
-}
-
-// 时间单位改变
-const timeUnitChange = () => {
-  // 分钟，默认是 60 分钟
-  if (timeUnit.value === TimeUnitType.MINUTE) {
-    configForm.value.timeDuration = 60
-  }
-  // 小时，默认是 6 个小时
-  if (timeUnit.value === TimeUnitType.HOUR) {
-    configForm.value.timeDuration = 6
-  }
-  // 天， 默认 1天
-  if (timeUnit.value === TimeUnitType.DAY) {
-    configForm.value.timeDuration = 1
-  }
-}
-
-const convertTimeUnit = (strTimeUnit: string) => {
-  if (strTimeUnit === 'M') {
-    return TimeUnitType.MINUTE
-  }
-  if (strTimeUnit === 'H') {
-    return TimeUnitType.HOUR
-  }
-  if (strTimeUnit === 'D') {
-    return TimeUnitType.DAY
-  }
-  return TimeUnitType.HOUR
-}
-
-// 操作按钮显示名称可编辑
-const btnDisplayNameEdit = ref<boolean[]>([])
-const changeBtnDisplayName = (index: number) => {
-  btnDisplayNameEdit.value[index] = true
-}
-const btnDisplayNameBlurEvent = (index: number) => {
-  btnDisplayNameEdit.value[index] = false
-  const buttonItem = configForm.value.buttonPermission[index]
-  buttonItem.displayName = buttonItem.displayName || OPERATION_BUTTON_NAME.get(buttonItem.id)
-}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
index 9448174d..3e3e0f7f 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -43,7 +43,6 @@
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts'
 import NodeHandler from '../NodeHandler.vue'
 import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue'
-import { generateUUID } from '@/utils'
 defineOptions({
   name: 'CopyTaskNode'
 })
@@ -81,8 +80,8 @@ const clickEvent = () => {
 const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {
-  nodeSetting.value.setCurrentNode(currentNode.value)
-  nodeSetting.value.open()
+  nodeSetting.value.showCopyTaskNodeConfig(currentNode.value)
+  nodeSetting.value.openDrawer()
 }
 
 // 删除节点。更新当前节点为孩子节点
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index 3ecfbb83..a7fe1b6d 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -45,6 +45,7 @@
 </template>
 <script setup lang="ts">
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts'
+import { useWatchNode } from '../node'
 import NodeHandler from '../NodeHandler.vue'
 import UserTaskNodeConfig from '../nodes-config/UserTaskNodeConfig.vue'
 defineOptions({
@@ -61,21 +62,16 @@ const emits = defineEmits<{
   'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: NodeType]
 }>()
 
-const currentNode = ref<SimpleFlowNode>(props.flowNode)
+const currentNode = useWatchNode(props)
+
 const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {
   // 把当前节点传递给配置组件
-  nodeSetting.value.setCurrentNode(currentNode.value)
-  nodeSetting.value.open()
+  nodeSetting.value.showUserTaskNodeConfig(currentNode.value)
+  nodeSetting.value.openDrawer()
 }
-// 监控节点变化
-watch(
-  () => props.flowNode,
-  (newValue) => {
-    currentNode.value = newValue
-  }
-)
+
 // 显示节点名称输入框
 const showInput = ref(false)
 // 节点名称输入框失去焦点
diff --git a/src/components/SimpleProcessDesignerV2/src/utils.ts b/src/components/SimpleProcessDesignerV2/src/utils.ts
index 55bb1ab4..8ed7b307 100644
--- a/src/components/SimpleProcessDesignerV2/src/utils.ts
+++ b/src/components/SimpleProcessDesignerV2/src/utils.ts
@@ -1,3 +1,5 @@
+import { TimeUnitType } from './consts'
+
 // 获取条件节点默认的名称
 export const getDefaultConditionNodeName = (index: number, defaultFlow: boolean): string => {
   if (defaultFlow) {
@@ -6,18 +8,15 @@ export const getDefaultConditionNodeName = (index: number, defaultFlow: boolean)
   return '条件' + (index + 1)
 }
 
-// 获得默认的表单字段权限.
-export const getDefaultFieldsPermission = (formFields: string[] | undefined) => {
-  const defaultFieldsPermission: any[] = []
-  if (formFields) {
-    formFields.forEach((fieldStr: string) => {
-      const { field, title } = JSON.parse(fieldStr)
-      defaultFieldsPermission.push({
-        field,
-        title,
-        permission: '1' // 只读
-      })
-    })
+export const convertTimeUnit = (strTimeUnit: string) => {
+  if (strTimeUnit === 'M') {
+    return TimeUnitType.MINUTE
   }
-  return defaultFieldsPermission
+  if (strTimeUnit === 'H') {
+    return TimeUnitType.HOUR
+  }
+  if (strTimeUnit === 'D') {
+    return TimeUnitType.DAY
+  }
+  return TimeUnitType.HOUR
 }

From 7cb68da5b0ef11ea6221f51c33e3327917b12b3b Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 26 Jul 2024 21:17:17 +0800
Subject: [PATCH 40/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E5=A4=8D=E6=9D=82?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E5=AD=97=E6=AE=B5=E8=A7=A3=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/node.ts       | 40 +++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index a2c47b1e..e41c9b83 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -39,21 +39,47 @@ export function useFormFieldsPermission() {
     fieldsPermissionConfig.value =
       cloneDeep(nodeFormFields) || getDefaultFieldsPermission(unref(formFields))
   }
-  // 获取默认的表单权限。 所有字段只读
+  // 默认的表单权限： 获取表单的所有字段，设置字段默认权限为只读
   const getDefaultFieldsPermission = (formFields?: string[]) => {
     const defaultFieldsPermission: Array<Record<string, string>> = []
     if (formFields) {
       formFields.forEach((fieldStr: string) => {
-        const { field, title } = JSON.parse(fieldStr)
-        defaultFieldsPermission.push({
-          field,
-          title,
-          permission: '1' // 只读
-        })
+        parseFieldsSetDefaultPermission(JSON.parse(fieldStr), defaultFieldsPermission)
       })
     }
     return defaultFieldsPermission
   }
+  // 解析字段。赋给默认权限
+  const parseFieldsSetDefaultPermission = (
+    rule: Record<string, any>,
+    fieldsPermission: Array<Record<string, string>>,
+    parentTitle: string = ''
+  ) => {
+    const { type, field, title: tempTitle, children } = rule
+    if (field && tempTitle) {
+      let title = tempTitle
+      if (parentTitle) {
+        title = `${parentTitle}.${tempTitle}`
+      }
+      fieldsPermission.push({
+        field,
+        title,
+        permission: '1' // 只读
+      })
+      // TODO 子表单 需要处理子表单字段
+      // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
+      //   // 解析子表单的字段
+      //   rule.props.rule.forEach((item) => {
+      //     parseFieldsSetDefaultPermission(item, fieldsPermission, title)
+      //   })
+      // }
+    }
+    if (children && Array.isArray(children)) {
+      children.forEach((rule) => {
+        parseFieldsSetDefaultPermission(rule, fieldsPermission)
+      })
+    }
+  }
 
   return {
     formType,

From fd13eb7f8f1b011f1e2e4007ae70db4f11ea51ab Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 11 Aug 2024 00:48:07 +0800
Subject: [PATCH 41/62] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E5=BF=AB?=
 =?UTF-8?q?=E6=90=AD=E9=83=A8=E5=88=86=E7=9A=84=20code=20review?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesigner/src/addNode.vue     | 16 +++++-----
 .../src/drawer/approverDrawer.vue             | 12 ++++----
 .../src/drawer/copyerDrawer.vue               | 30 +++++++++++--------
 .../src/SimpleProcessDesigner.vue             |  2 +-
 .../SimpleProcessDesignerV2/src/consts.ts     |  2 +-
 src/main.ts                                   |  4 +--
 .../bpm/processInstance/detail/index.vue      |  2 ++
 src/views/bpm/simpleWorkflow/index.vue        | 22 +++++++-------
 8 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/src/components/SimpleProcessDesigner/src/addNode.vue b/src/components/SimpleProcessDesigner/src/addNode.vue
index 4d8053d9..1fe66ab5 100644
--- a/src/components/SimpleProcessDesigner/src/addNode.vue
+++ b/src/components/SimpleProcessDesigner/src/addNode.vue
@@ -67,10 +67,10 @@ let props = defineProps({
     type: Object,
     default: () => ({})
   },
-  showAddButton:{
-    type:Boolean,
-    default:true
-  },
+  showAddButton: {
+    type: Boolean,
+    default: true
+  }
 })
 let emits = defineEmits(['update:childNodeP'])
 let visible = ref(false)
@@ -89,7 +89,7 @@ const addType = (type: number) => {
         approveMethod: undefined,
         candidateStrategy: undefined,
         candidateParam: undefined,
-        fieldsPermission: defaultFieldsPermission,
+        fieldsPermission: defaultFieldsPermission
       },
       childNode: props.childNodeP
     }
@@ -99,7 +99,7 @@ const addType = (type: number) => {
   if (type === NodeType.CC_USER_NODE) {
     const data = {
       name: '抄送人',
-      type: 2,
+      type: 2, // TODO @jason：这个要不要搞成枚举？NodeType 里貌似有枚举
       error: true,
       // 抄送节点配置
       attributes: {
@@ -161,7 +161,7 @@ const addType = (type: number) => {
         name: '并行分支_JOIN',
         type: 6,
         error: true,
-        childNode: props.childNodeP,
+        childNode: props.childNodeP
       }
     }
     emits('update:childNodeP', data)
@@ -190,7 +190,7 @@ const addType = (type: number) => {
         name: '包容分支_JOIN',
         type: 8,
         error: true,
-        childNode: props.childNodeP,
+        childNode: props.childNodeP
       }
     }
     emits('update:childNodeP', data)
diff --git a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
index f6196daa..d6ad5c2c 100644
--- a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
+++ b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
@@ -162,7 +162,7 @@
           </el-form>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="设置字段权限" v-if ="formType === 10">
+      <el-tab-pane label="设置字段权限" v-if="formType === 10">
         <div class="field-setting-pane h-full w-full flex flex-col">
           <div class="field-setting-content mr-2 overflow-auto py-4 pr-2">
             <div class="field-container flex flex-col flex-items-start">
@@ -324,12 +324,12 @@ const changecandidateStrategy = () => {
   candidateConfig.value.candidateParam = []
 }
 const handleAllCheck = (event, type) => {
-  console.log('event', event);
-  console.log('type', type);
-  event.target.checked = true;  
+  console.log('event', event)
+  console.log('type', type)
+  event.target.checked = true
   let permission = '1'
   if (type === 'edit' && editAllChecked.value) {
-    permission = '1'
+    permission = '1' // TODO @jaosn：这个要不要用枚举里的哈
   }
   if (type === 'read' && readAllChecked.value) {
     permission = '2'
@@ -344,7 +344,7 @@ const handleAllCheck = (event, type) => {
 onMounted(async () => {
   // 获得角色列表
   roleOptions.value = await RoleApi.getSimpleRoleList()
-
+  // 获得岗位列表
   postOptions.value = await PostApi.getSimplePostList()
   // 获得用户列表
   userOptions.value = await UserApi.getSimpleUserList()
diff --git a/src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue b/src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue
index 4b074ab8..70b1fc5b 100644
--- a/src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue
+++ b/src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue
@@ -12,7 +12,12 @@
     <div>
       <el-form label-position="top" label-width="100px">
         <el-form-item label="选择抄送人" prop="candidateStrategy">
-          <el-select v-model="candidateConfig.candidateStrategy" style="width: 100%" clearable @change="changecandidateStrategy">
+          <el-select
+            v-model="candidateConfig.candidateStrategy"
+            style="width: 100%"
+            clearable
+            @change="changecandidateStrategy"
+          >
             <el-option
               v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
               :key="dict.value"
@@ -160,7 +165,7 @@ const deptTreeOptions = ref() // 部门树
 const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
 const candidateConfig = ref({
   candidateStrategy: undefined,
-  candidateParam: [],
+  candidateParam: []
 })
 const store = useWorkFlowStoreWithOut()
 const { setCopyerDrawer, setCopyerConfig } = store
@@ -178,30 +183,29 @@ const visible = computed({
 })
 watch(copyerConfig, (val) => {
   if (val.value.attributes) {
-    console.log('val.value.attributes', val.value.attributes);
+    console.log('val.value.attributes', val.value.attributes)
     candidateConfig.value.candidateStrategy = val.value.attributes.candidateStrategy
-    const candidateParamStr =  val.value.attributes.candidateParam;
-    if(val.value.attributes.candidateStrategy === 60) {
+    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)
+      if (candidateParamStr) {
+        candidateConfig.value.candidateParam = candidateParamStr.split(',').map((item) => +item)
       }
     }
-    
+
     // candidateConfig.value = val.value.attributes
   }
 })
 
-
 const saveConfig = () => {
   const rawConfig = toRaw(copyerConfig.value)
-  const { candidateStrategy , candidateParam} = toRaw(candidateConfig.value);
+  const { candidateStrategy, candidateParam } = toRaw(candidateConfig.value)
   const candidateParamStr = candidateParam.join(',')
   rawConfig.value.attributes = {
     candidateStrategy,
     candidateParam: candidateParamStr
-  } 
+  }
   rawConfig.flag = true
   // TODO 进行校验
   // setApproverConfig({
@@ -213,7 +217,7 @@ const saveConfig = () => {
   setCopyerConfig({
     value: rawConfig.value,
     flag: true,
-    id: copyerConfig.value.id,
+    id: copyerConfig.value.id
   })
   console.log('after is copyerConfig', copyerConfig.value)
   closeDrawer()
@@ -228,7 +232,7 @@ const changecandidateStrategy = () => {
 onMounted(async () => {
   // 获得角色列表
   roleOptions.value = await RoleApi.getSimpleRoleList()
-
+  // 获得岗位列表
   postOptions.value = await PostApi.getSimplePostList()
   // 获得用户列表
   userOptions.value = await UserApi.getSimpleUserList()
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index 60369120..d112cf5b 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -146,7 +146,7 @@ onMounted(async () => {
     processNodeTree.value = {
       name: '开始',
       type: NodeType.START_EVENT_NODE,
-      id: 'StartEvent_1',
+      id: 'StartEvent_1', // TODO @jason：这个我们要不要 StartEvent 哈？
       childNode: {
         id: 'EndEvent_1',
         name: '结束',
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 70188590..449e193e 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -213,7 +213,7 @@ export type ButtonSetting = {
   enable: boolean
 }
 
-// 操作按钮类型枚举 (用于审批节点)
+// 操作按钮类型枚举 (用于审批节点) // TODO @jason：建议不缩写哈
 export enum OpsButtonType {
   /**
    * 通过
diff --git a/src/main.ts b/src/main.ts
index af30240d..874f7668 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -28,7 +28,7 @@ import '@/plugins/animate.css'
 // 路由
 import router, { setupRouter } from '@/router'
 
-// 其它指令 
+// 指令
 import { setupAuth, setupMountedFocus } from '@/directives'
 
 import { createApp } from 'vue'
@@ -58,8 +58,8 @@ const setupAll = async () => {
 
   setupRouter(app)
 
+  // directives 指令
   setupAuth(app)
-
   setupMountedFocus(app)
 
   await router.isReady()
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 128ddf6f..332499ef 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -56,12 +56,14 @@
           </el-form-item>
         </el-form>
         <div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
+          <!-- TODO @jason：建议搞个 if 来判断，替代现有的 !item.buttonsSetting || item.buttonsSetting[OpsButtonType.APPROVE]?.enable -->
           <el-button
             type="success"
             v-if="!item.buttonsSetting || item.buttonsSetting[OpsButtonType.APPROVE]?.enable"
             @click="handleAudit(item, true)"
           >
             <Icon icon="ep:select" />
+            <!-- TODO @jason：这个也是类似哈，搞个方法来生成名字 -->
             {{
               item.buttonsSetting?.[OpsButtonType.APPROVE]?.displayName ||
               OPERATION_BUTTON_NAME.get(OpsButtonType.APPROVE)
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simpleWorkflow/index.vue
index dac9aa82..fe73971c 100644
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <SimpleProcessDesigner :model-id="modelId"/>
+  <SimpleProcessDesigner :model-id="modelId" />
 </template>
-<script setup lang='ts'>
-import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/';
+<script setup lang="ts">
+import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/'
 import { getModel } from '@/api/bpm/model'
 import { getForm, FormVO } from '@/api/bpm/form'
 import { handleTree } from '@/utils/tree'
@@ -15,9 +15,9 @@ defineOptions({
   name: 'SimpleWorkflowDesignEditor'
 })
 const { query } = useRoute() // 路由的查询
-const modelId : string | undefined = query.modelId  as string;
+const modelId: string | undefined = query.modelId as string
 const formFields = ref<string[]>([])
-const formType = ref(20);
+const formType = ref(20)
 const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
 const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
@@ -32,28 +32,28 @@ provide('userList', userOptions)
 provide('deptList', deptOptions)
 provide('userGroupList', userGroupOptions)
 provide('deptTree', deptTreeOptions)
-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 bpmnForm = (await getForm(bpmnModel.formId)) as unknown as FormVO
       formFields.value = bpmnForm?.fields
     }
   }
   // 获得角色列表
   roleOptions.value = await RoleApi.getSimpleRoleList()
+  // 获得岗位列表
   postOptions.value = await PostApi.getSimplePostList()
   // 获得用户列表
   userOptions.value = await UserApi.getSimpleUserList()
   // 获得部门列表
   deptOptions.value = await DeptApi.getSimpleDeptList()
 
-  deptTreeOptions.value =  handleTree(deptOptions.value as DeptApi.DeptVO[], 'id');
+  deptTreeOptions.value = handleTree(deptOptions.value as DeptApi.DeptVO[], 'id')
 
   // 用户组列表
   userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
 })
 </script>
-<style lang='scss' scoped>
-</style>
+<style lang="scss" scoped></style>

From 2dae231afc74952a28cdf79171350b09fd3a91d0 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 17 Aug 2024 10:18:50 +0800
Subject: [PATCH 42/62] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E3=80=91=E5=AE=A1=E6=89=B9=E8=8A=82=E7=82=B9=E7=9A=84?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E4=BA=BA=E4=B8=8E=E5=8F=91=E8=B5=B7=E4=BA=BA?=
 =?UTF-8?q?=E7=9B=B8=E5=90=8C=E6=97=B6=EF=BC=8C=E5=AF=B9=E5=BA=94=E7=9A=84?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E7=B1=BB=E5=9E=8B=E7=9A=84=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/consts.ts     | 22 +++++++++++++++++++
 .../SimpleProcessDesignerV2/src/node.ts       |  6 ++++-
 .../src/nodes-config/UserTaskNodeConfig.vue   | 18 ++++++++++++++-
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 449e193e..9265d8b6 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -77,6 +77,8 @@ export interface SimpleFlowNode {
   timeoutHandler?: TimeoutHandler
   // 审批任务拒绝处理
   rejectHandler?: RejectHandler
+  // 审批节点的审批人与发起人相同时，对应的处理类型
+  assignStartUserHandlerType?: number
 }
 // 候选人策略枚举 （ 用于审批节点。抄送节点 )
 export enum CandidateStrategy {
@@ -174,6 +176,21 @@ export enum RejectHandlerType {
    */
   RETURN_USER_TASK = 2
 }
+// 用户任务的审批人与发起人相同时，处理类型枚举
+export enum AssignStartUserHandlerType {
+  /**
+   * 由发起人对自己审批
+   */
+  START_USER_AUDIT = 1,
+  /**
+   * 自动跳过【参考飞书】：1）如果当前节点还有其他审批人，则交由其他审批人进行审批；2）如果当前节点没有其他审批人，则该节点自动通过
+   */
+  SKIP = 2,
+  /**
+   * 转交给部门负责人审批
+   */
+  ASSIGN_DEPT_LEADER
+}
 
 // 时间单位枚举
 export enum TimeUnitType {
@@ -309,6 +326,11 @@ export const REJECT_HANDLER_TYPES: DictDataVO[] = [
   { label: '驳回到指定节点', value: RejectHandlerType.RETURN_USER_TASK }
   // { label: '结束任务', value: RejectHandlerType.FINISH_TASK }
 ]
+export const ASSIGN_START_USER_HANDLER_TYPES: DictDataVO[] = [
+  { label: '由发起人对自己审批', value: 1 },
+  { label: '自动跳过', value: 2 },
+  { label: '转交给部门负责人审批', value: 3 }
+]
 
 // 比较运算符
 export const COMPARISON_OPERATORS: DictDataVO = [
diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index e41c9b83..abb3510e 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -10,7 +10,9 @@ import {
   NodeType,
   ApproveMethodType,
   RejectHandlerType,
-  NODE_DEFAULT_NAME
+  NODE_DEFAULT_NAME,
+  AssignStartUserHandlerType,
+  ASSIGN_START_USER_HANDLER_TYPES
 } from './consts'
 export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlowNode> {
   const node = ref<SimpleFlowNode>(props.flowNode)
@@ -97,6 +99,7 @@ export type UserTaskFormType = {
   returnNodeId?: string
   timeoutHandlerEnable?: boolean
   timeoutHandlerAction?: number
+  assignStartUserHandlerType?: AssignStartUserHandlerType
   timeDuration?: number
   maxRemindCount?: number
   buttonsSetting: any[]
@@ -125,6 +128,7 @@ export function useNodeForm(nodeType: NodeType) {
       approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
       approveRatio: 100,
       rejectHandlerType: RejectHandlerType.FINISH_PROCESS,
+      assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
       returnNodeId: '',
       timeoutHandlerEnable: false,
       timeoutHandlerAction: 1,
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 75af7ba7..77497e7f 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -275,6 +275,17 @@
             >
               <el-input-number v-model="configForm.maxRemindCount" :min="1" :max="10" />
             </el-form-item>
+
+            <el-divider content-position="left">审批人与提交人为同一人时</el-divider>
+            <el-form-item prop="assignStartUserHandlerType">
+              <el-radio-group v-model="configForm.assignStartUserHandlerType">
+                <div class="flex-col">
+                  <div v-for="(item, index) in ASSIGN_START_USER_HANDLER_TYPES" :key="index">
+                    <el-radio :key="item.value" :value="item.value" :label="item.label" />
+                  </div>
+                </div>
+              </el-radio-group>
+            </el-form-item>
           </el-form>
         </div>
       </el-tab-pane>
@@ -364,7 +375,8 @@ import {
   REJECT_HANDLER_TYPES,
   DEFAULT_BUTTON_SETTING,
   OPERATION_BUTTON_NAME,
-  ButtonSetting
+  ButtonSetting,
+  ASSIGN_START_USER_HANDLER_TYPES
 } from '../consts'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import {
@@ -506,6 +518,8 @@ const saveConfig = async () => {
     timeDuration: isoTimeDuration.value,
     maxRemindCount: cTimeoutMaxRemindCount.value
   }
+  // 设置用户任务的审批人与发起人相同时
+  currentNode.value.assignStartUserHandlerType = configForm.value.assignStartUserHandlerType
   // 设置表单权限
   currentNode.value.fieldsPermission = fieldsPermissionConfig.value
   // 设置按钮权限
@@ -560,6 +574,8 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
   }
   configForm.value.timeoutHandlerAction = node.timeoutHandler?.action
   configForm.value.maxRemindCount = node.timeoutHandler?.maxRemindCount
+  // 1.5 设置用户任务的审批人与发起人相同时
+  configForm.value.assignStartUserHandlerType = node.assignStartUserHandlerType
   // 2. 操作按钮设置
   buttonsSetting.value = cloneDeep(node.buttonsSetting) || DEFAULT_BUTTON_SETTING
   // 3. 表单字段权限配置

From 0ce9ececc614a0b5b1fd486f79d72ffa64ddc774 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 17 Aug 2024 12:09:47 +0800
Subject: [PATCH 43/62] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E3=80=91=E5=B0=86=E5=AE=A1=E6=89=B9=E8=B6=85=E6=97=B6?=
 =?UTF-8?q?=E7=9A=84=20action=20=E7=BB=9F=E4=B8=80=E6=8D=A2=E6=88=90=20han?=
 =?UTF-8?q?dlerType=EF=BC=8C=E4=BF=9D=E6=8C=81=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/consts.ts     | 19 ++++++++-
 .../SimpleProcessDesignerV2/src/node.ts       |  4 +-
 .../src/nodes-config/UserTaskNodeConfig.vue   | 41 ++++++++++---------
 3 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 9265d8b6..17ea37d2 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -159,7 +159,7 @@ export type TimeoutHandler = {
   //是否开启超时处理
   enable: boolean
   // 超时执行的动作
-  action?: number
+  type?: number
   // 超时时间设置
   timeDuration?: string
   // 执行动作是自动提醒, 最大提醒次数
@@ -176,6 +176,21 @@ export enum RejectHandlerType {
    */
   RETURN_USER_TASK = 2
 }
+// 用户任务超时处理类型枚举
+export enum TimeoutHandlerType {
+  /**
+   * 自动提醒
+   */
+  REMINDER = 1,
+  /**
+   * 自动同意
+   */
+  APPROVE = 2,
+  /**
+   * 自动拒绝
+   */
+  REJECT = 3
+}
 // 用户任务的审批人与发起人相同时，处理类型枚举
 export enum AssignStartUserHandlerType {
   /**
@@ -316,7 +331,7 @@ export const TIME_UNIT_TYPES: DictDataVO[] = [
   { label: '天', value: TimeUnitType.DAY }
 ]
 // 超时处理执行动作类型
-export const TIMEOUT_HANDLER_ACTION_TYPES: DictDataVO[] = [
+export const TIMEOUT_HANDLER_TYPES: DictDataVO[] = [
   { label: '自动提醒', value: 1 },
   { label: '自动同意', value: 2 },
   { label: '自动拒绝', value: 3 }
diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index abb3510e..b4b3b37d 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -98,7 +98,7 @@ export type UserTaskFormType = {
   rejectHandlerType?: RejectHandlerType
   returnNodeId?: string
   timeoutHandlerEnable?: boolean
-  timeoutHandlerAction?: number
+  timeoutHandlerType?: number
   assignStartUserHandlerType?: AssignStartUserHandlerType
   timeDuration?: number
   maxRemindCount?: number
@@ -131,7 +131,7 @@ export function useNodeForm(nodeType: NodeType) {
       assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
       returnNodeId: '',
       timeoutHandlerEnable: false,
-      timeoutHandlerAction: 1,
+      timeoutHandlerType: 1,
       timeDuration: 6, // 默认 6小时
       maxRemindCount: 1, // 默认 提醒 1次
       buttonsSetting: []
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 77497e7f..b565fd37 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -227,15 +227,15 @@
             </el-form-item>
             <el-form-item
               label="执行动作"
-              prop="timeoutHandlerAction"
+              prop="timeoutHandlerType"
               v-if="configForm.timeoutHandlerEnable"
             >
               <el-radio-group
-                v-model="configForm.timeoutHandlerAction"
-                @change="timeoutActionChanged"
+                v-model="configForm.timeoutHandlerType"
+                @change="timeoutHandlerTypeChanged"
               >
                 <el-radio-button
-                  v-for="item in TIMEOUT_HANDLER_ACTION_TYPES"
+                  v-for="item in TIMEOUT_HANDLER_TYPES"
                   :key="item.value"
                   :value="item.value"
                   :label="item.label"
@@ -271,7 +271,7 @@
             <el-form-item
               label="最大提醒次数"
               prop="maxRemindCount"
-              v-if="configForm.timeoutHandlerEnable && configForm.timeoutHandlerAction === 1"
+              v-if="configForm.timeoutHandlerEnable && configForm.timeoutHandlerType === 1"
             >
               <el-input-number v-model="configForm.maxRemindCount" :min="1" :max="10" />
             </el-form-item>
@@ -370,13 +370,14 @@ import {
   ApproveMethodType,
   TimeUnitType,
   RejectHandlerType,
-  TIMEOUT_HANDLER_ACTION_TYPES,
+  TIMEOUT_HANDLER_TYPES,
   TIME_UNIT_TYPES,
   REJECT_HANDLER_TYPES,
   DEFAULT_BUTTON_SETTING,
   OPERATION_BUTTON_NAME,
   ButtonSetting,
-  ASSIGN_START_USER_HANDLER_TYPES
+  ASSIGN_START_USER_HANDLER_TYPES,
+  TimeoutHandlerType
 } from '../consts'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import {
@@ -426,7 +427,7 @@ const formRules = reactive({
   approveRatio: [{ required: true, message: '通过比例不能为空', trigger: 'blur' }],
   returnNodeId: [{ required: true, message: '驳回节点不能为空', trigger: 'change' }],
   timeoutHandlerEnable: [{ required: true }],
-  timeoutHandlerAction: [{ required: true }],
+  timeoutHandlerType: [{ required: true }],
   timeDuration: [{ required: true, message: '超时时间不能为空', trigger: 'blur' }],
   maxRemindCount: [{ required: true, message: '提醒次数不能为空', trigger: 'blur' }]
 })
@@ -482,8 +483,8 @@ const returnTaskList = ref<SimpleFlowNode[]>([])
 // 审批人超时未处理设置
 const {
   timeoutHandlerChange,
-  cTimeoutAction,
-  timeoutActionChanged,
+  cTimeoutType,
+  timeoutHandlerTypeChanged,
   timeUnit,
   timeUnitChange,
   isoTimeDuration,
@@ -514,7 +515,7 @@ const saveConfig = async () => {
   // 设置超时处理
   currentNode.value.timeoutHandler = {
     enable: configForm.value.timeoutHandlerEnable!,
-    action: cTimeoutAction.value,
+    type: cTimeoutType.value,
     timeDuration: isoTimeDuration.value,
     maxRemindCount: cTimeoutMaxRemindCount.value
   }
@@ -572,7 +573,7 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
     configForm.value.timeDuration = parseInt(parseTime)
     timeUnit.value = convertTimeUnit(parseTimeUnit)
   }
-  configForm.value.timeoutHandlerAction = node.timeoutHandler?.action
+  configForm.value.timeoutHandlerType = node.timeoutHandler?.type
   configForm.value.maxRemindCount = node.timeoutHandler?.maxRemindCount
   // 1.5 设置用户任务的审批人与发起人相同时
   configForm.value.assignStartUserHandlerType = node.assignStartUserHandlerType
@@ -619,21 +620,21 @@ function useTimeoutHandler() {
     if (configForm.value.timeoutHandlerEnable) {
       timeUnit.value = 2
       configForm.value.timeDuration = 6
-      configForm.value.timeoutHandlerAction = 1
+      configForm.value.timeoutHandlerType = 1
       configForm.value.maxRemindCount = 1
     }
   }
   // 超时执行的动作
-  const cTimeoutAction = computed(() => {
+  const cTimeoutType = computed(() => {
     if (!configForm.value.timeoutHandlerEnable) {
       return undefined
     }
-    return configForm.value.timeoutHandlerAction
+    return configForm.value.timeoutHandlerType
   })
 
   // 超时处理动作改变
-  const timeoutActionChanged = () => {
-    if (configForm.value.timeoutHandlerAction === 1) {
+  const timeoutHandlerTypeChanged = () => {
+    if (configForm.value.timeoutHandlerType === TimeoutHandlerType.REMINDER) {
       configForm.value.maxRemindCount = 1 // 超时提醒次数，默认为1
     }
   }
@@ -676,7 +677,7 @@ function useTimeoutHandler() {
     if (!configForm.value.timeoutHandlerEnable) {
       return undefined
     }
-    if (configForm.value.timeoutHandlerAction !== 1) {
+    if (configForm.value.timeoutHandlerType !== TimeoutHandlerType.REMINDER) {
       return undefined
     }
     return configForm.value.maxRemindCount
@@ -684,8 +685,8 @@ function useTimeoutHandler() {
 
   return {
     timeoutHandlerChange,
-    cTimeoutAction,
-    timeoutActionChanged,
+    cTimeoutType,
+    timeoutHandlerTypeChanged,
     timeUnit,
     timeUnitChange,
     isoTimeDuration,

From ab9ce936a36cffbb7bac92855e501eb76af4e624 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 17 Aug 2024 12:19:13 +0800
Subject: [PATCH 44/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E7=AC=AC1=E7=89=88=EF=BC=8C=E6=96=B0=E5=A2=9E=E8=BF=9E?=
 =?UTF-8?q?=E7=BB=AD=E5=A4=9A=E7=BA=A7=E9=83=A8=E5=88=86=E8=B4=9F=E8=B4=A3?=
 =?UTF-8?q?=E4=BA=BA=E7=AD=96=E7=95=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesigner/src/addNode.vue     |  386 -----
 .../SimpleProcessDesigner/src/consts.ts       |   63 -
 .../src/drawer/approverDrawer.vue             |  434 ------
 .../src/drawer/copyerDrawer.vue               |  250 ---
 .../SimpleProcessDesigner/src/nodeWrap.vue    |  504 ------
 .../SimpleProcessDesigner/src/util.ts         |  218 ---
 .../SimpleProcessDesigner/theme/iconfont.ttf  |  Bin 2908 -> 0 bytes
 .../SimpleProcessDesigner/theme/iconfont.woff |  Bin 1976 -> 0 bytes
 .../theme/iconfont.woff2                      |  Bin 1480 -> 0 bytes
 .../SimpleProcessDesigner/theme/workflow.css  | 1366 -----------------
 .../src/SimpleProcessDesigner.vue             |    4 +-
 .../SimpleProcessDesignerV2/src/consts.ts     |   48 +-
 .../SimpleProcessDesignerV2/src/node.ts       |  159 +-
 .../src/nodes-config/CopyTaskNodeConfig.vue   |   77 +-
 .../src/nodes-config/UserTaskNodeConfig.vue   |  120 +-
 15 files changed, 289 insertions(+), 3340 deletions(-)
 delete mode 100644 src/components/SimpleProcessDesigner/src/addNode.vue
 delete mode 100644 src/components/SimpleProcessDesigner/src/consts.ts
 delete mode 100644 src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
 delete mode 100644 src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue
 delete mode 100644 src/components/SimpleProcessDesigner/src/nodeWrap.vue
 delete mode 100644 src/components/SimpleProcessDesigner/src/util.ts
 delete mode 100644 src/components/SimpleProcessDesigner/theme/iconfont.ttf
 delete mode 100644 src/components/SimpleProcessDesigner/theme/iconfont.woff
 delete mode 100644 src/components/SimpleProcessDesigner/theme/iconfont.woff2
 delete mode 100644 src/components/SimpleProcessDesigner/theme/workflow.css

diff --git a/src/components/SimpleProcessDesigner/src/addNode.vue b/src/components/SimpleProcessDesigner/src/addNode.vue
deleted file mode 100644
index 1fe66ab5..00000000
--- a/src/components/SimpleProcessDesigner/src/addNode.vue
+++ /dev/null
@@ -1,386 +0,0 @@
-/* stylelint-disable order/properties-order */
-<template>
-  <div class="add-node-btn-box">
-    <div class="add-node-btn">
-      <el-popover placement="right-start" v-model="visible" 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 icon-approve"></span>
-            </div>
-            <p>审批人</p>
-          </a>
-          <!--  TODO 暂时去掉未完成
-          <a class="add-node-popover-item notifier" @click="addType(2)">
-            <div class="item-wrapper">
-              <span class="iconfont"></span>
-            </div>
-            <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>
-          -->
-          <a class="add-node-popover-item notifier" @click="addType(2)">
-            <div class="item-wrapper">
-              <span class="iconfont icon-copy"></span>
-            </div>
-            <p>抄送人</p>
-          </a>
-          <a class="add-node-popover-item condition" @click="addType(4)">
-            <div class="item-wrapper">
-              <span class="iconfont icon-exclusive"></span>
-            </div>
-            <p>条件分支</p>
-          </a>
-          <a class="add-node-popover-item condition" @click="addType(5)">
-            <div class="item-wrapper">
-              <span class="iconfont icon-parallel"></span>
-            </div>
-            <p>并行分支</p>
-          </a>
-          <a class="add-node-popover-item condition" @click="addType(7)">
-            <div class="item-wrapper">
-              <span class="iconfont icon-Inclusive"></span>
-            </div>
-            <p>包容分支</p>
-          </a>
-        </div>
-        <template #reference>
-          <button class="btn" type="button" v-if="showAddButton">
-            <span><Icon icon="ep:plus" class="addIcon" :size="14" /></span>
-          </button>
-        </template>
-      </el-popover>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { NodeType } from './consts'
-import { ref } from 'vue'
-import { generateUUID } from '@/utils'
-let props = defineProps({
-  childNodeP: {
-    type: Object,
-    default: () => ({})
-  },
-  showAddButton: {
-    type: Boolean,
-    default: true
-  }
-})
-let emits = defineEmits(['update:childNodeP'])
-let visible = ref(false)
-const defaultFieldsPermission = inject('defaultFieldsPermission')
-
-const addType = (type: number) => {
-  visible.value = false
-  // 审核节点
-  if (type === NodeType.APPROVE_USER_NODE) {
-    const data = {
-      name: '审核人',
-      error: true,
-      type: 1,
-      // 审批节点配置
-      attributes: {
-        approveMethod: undefined,
-        candidateStrategy: undefined,
-        candidateParam: undefined,
-        fieldsPermission: defaultFieldsPermission
-      },
-      childNode: props.childNodeP
-    }
-    emits('update:childNodeP', data)
-  }
-  // 抄送节点
-  if (type === NodeType.CC_USER_NODE) {
-    const data = {
-      name: '抄送人',
-      type: 2, // TODO @jason：这个要不要搞成枚举？NodeType 里貌似有枚举
-      error: true,
-      // 抄送节点配置
-      attributes: {
-        candidateStrategy: undefined,
-        candidateParam: undefined
-      },
-      childNode: props.childNodeP
-    }
-    emits('update:childNodeP', data)
-  }
-  // 条件分支
-  if (type === NodeType.EXCLUSIVE_NODE) {
-    const data = {
-      name: '条件分支',
-      type: 4,
-      id: 'GateWay_' + generateUUID(),
-      childNode: props.childNodeP,
-      conditionNodes: [
-        {
-          name: '分支1',
-          error: true,
-          type: 3,
-          priorityLevel: 1,
-          conditionList: [],
-          childNode: null
-        },
-        {
-          name: '其它情况',
-          type: 3,
-          priorityLevel: 2,
-          conditionList: [],
-          childNode: null
-        }
-      ]
-    }
-    emits('update:childNodeP', data)
-  }
-  // 并行分支 fork
-  if (type === NodeType.PARALLEL_NODE_FORK) {
-    const data = {
-      name: '并行分支_FORK',
-      type: 5,
-      id: 'GateWay_' + generateUUID(),
-      conditionNodes: [
-        {
-          name: '并行1',
-          error: true,
-          type: 3,
-          childNode: null
-        },
-        {
-          name: '并行2',
-          type: 3,
-          childNode: null
-        }
-      ],
-      childNode: {
-        id: 'GateWay_' + generateUUID(),
-        name: '并行分支_JOIN',
-        type: 6,
-        error: true,
-        childNode: props.childNodeP
-      }
-    }
-    emits('update:childNodeP', data)
-  }
-  // 包容分支 fork
-  if (type === NodeType.INCLUSIVE_NODE_FORK) {
-    const data = {
-      name: '包容分支_FORK',
-      type: 7,
-      id: 'GateWay_' + generateUUID(),
-      conditionNodes: [
-        {
-          name: '分支1',
-          error: true,
-          type: 3,
-          childNode: null
-        },
-        {
-          name: '其它情况',
-          type: 3,
-          childNode: null
-        }
-      ],
-      childNode: {
-        id: 'GateWay_' + generateUUID(),
-        name: '包容分支_JOIN',
-        type: 8,
-        error: true,
-        childNode: props.childNodeP
-      }
-    }
-    emits('update:childNodeP', data)
-  }
-  // if (type != 4) {
-  //   var data
-  //   if (type == 1) {
-  //     data = {
-  //       name: '审核人',
-  //       error: true,
-  //       type: 1,
-  //       // 审批节点配置
-  //       attributes : {
-  //         approveMethod : undefined,
-  //         candidateStrategy: undefined,
-  //         candidateParam: undefined
-  //       },
-  //       childNode: props.childNodeP
-  //     }
-  //   } else if (type == 2) {
-  //     data = {
-  //       name: '抄送人',
-  //       type: 2,
-  //       error: true,
-  //        // 抄送节点配置
-  //       attributes : {
-  //         candidateStrategy: undefined,
-  //         candidateParam: undefined
-  //       },
-  //       childNode: props.childNodeP
-  //     }
-  //   }
-  //   emits('update:childNodeP', data)
-  // } else {
-  //   emits('update:childNodeP', {
-  //     name: '路由',
-  //     type: 4,
-  //     id : 'GateWay_'+ generateUUID(),
-  //     childNode: props.childNodeP,
-  //     conditionNodes: [
-  //       {
-  //         name: '条件1',
-  //         error: true,
-  //         type: 3,
-  //         priorityLevel: 1,
-  //         conditionList: [],
-  //         childNode: null
-  //       },
-  //       {
-  //         name: '其它情况',
-  //         type: 3,
-  //         priorityLevel: 2,
-  //         conditionList: [],
-  //         childNode: null
-  //       }
-  //     ]
-  //   })
-  // }
-}
-</script>
-<style scoped lang="scss">
-.add-node-btn-box {
-  position: relative;
-  display: inline-flex;
-  width: 240px;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-
-  &::before {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    width: 2px;
-    height: 100%;
-    margin: auto;
-    background-color: #cacaca;
-    content: '';
-  }
-
-  .add-node-btn {
-    display: flex;
-    width: 240px;
-    padding: 20px 0 32px;
-    justify-content: center;
-    flex-shrink: 0;
-    -webkit-box-flex: 1;
-    -webkit-box-pack: center;
-    user-select: none;
-    flex-grow: 1;
-
-    .btn {
-      position: relative;
-      width: 30px;
-      height: 30px;
-      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);
-
-      .addIcon {
-        line-height: 30px;
-        color: #fff;
-      }
-
-      &:hover {
-        transform: scale(1.3);
-        box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
-      }
-
-      &:active {
-        background: #1e83e9;
-        transform: none;
-        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-      }
-    }
-  }
-}
-
-.add-node-popover-body {
-  display: flex;
-
-  .add-node-popover-item {
-    margin-right: 10px;
-    cursor: pointer;
-    text-align: center;
-    flex: 1;
-    color: #191f25 !important;
-
-    .item-wrapper {
-      display: inline-block;
-      width: 80px;
-      height: 80px;
-      margin-bottom: 5px;
-      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;
-
-      .iconfont {
-        font-size: 35px;
-        line-height: 80px;
-      }
-    }
-
-    &.approver {
-      .item-wrapper {
-        color: #ff943e;
-      }
-    }
-
-    &.notifier {
-      .item-wrapper {
-        color: #3296fa;
-      }
-    }
-
-    &.condition {
-      .item-wrapper {
-        color: #15bc83;
-      }
-    }
-
-    &:hover {
-      .item-wrapper {
-        background: #3296fa;
-        box-shadow: 0 10px 20px 0 rgba(50, 150, 250, 0.4);
-      }
-
-      .iconfont {
-        color: #fff;
-      }
-    }
-
-    &:active {
-      .item-wrapper {
-        background: #eaeaea;
-        box-shadow: none;
-      }
-
-      .iconfont {
-        color: inherit;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/SimpleProcessDesigner/src/consts.ts b/src/components/SimpleProcessDesigner/src/consts.ts
deleted file mode 100644
index 2d9b585e..00000000
--- a/src/components/SimpleProcessDesigner/src/consts.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-export enum NodeType {
-  //// -1 根节点流程开始节点 0 发起人 1审批 2抄送 3条件 4路由
-  ROOT_NODE = -1,
-  /**
-   * 发起人节点
-   */
-  START_USER_NODE = 0,
-  /**
-   * 审批人节点
-   */
-  APPROVE_USER_NODE = 1,
-  /**
-   * 抄送人节点
-   */
-  CC_USER_NODE = 2,
-  /**
-   * 条件节点
-   */
-  CONDITION_NODE = 3,
-  /**
-   * 条件分支节点
-   */
-  EXCLUSIVE_NODE = 4,
-  /**
-   * 并行分支分叉节点
-   */
-  PARALLEL_NODE_FORK = 5,
-  /**
-   * 并行分支聚合
-   */
-  PARALLEL_NODE_JOIN = 6,
-  /**
-   * 包容分支分叉节点
-   */
-  INCLUSIVE_NODE_FORK = 7,
-  /**
-   * 包容分支聚合节点
-   */
-  INCLUSIVE_NODE_JOIN = 8
-}
-
-export const NODE_BG_COLOR = new Map()
-NODE_BG_COLOR.set(NodeType.START_USER_NODE, '#87, 106, 149')
-NODE_BG_COLOR.set(NodeType.APPROVE_USER_NODE, '#255, 148, 62')
-NODE_BG_COLOR.set(NodeType.CC_USER_NODE, '#50, 150, 250')
-
-/**
- * 节点的标题
- */
-export const NODE_TITLE = new Map()
-NODE_TITLE.set(NodeType.START_USER_NODE, '发起人')
-NODE_TITLE.set(NodeType.APPROVE_USER_NODE, '审批人')
-NODE_TITLE.set(NodeType.CC_USER_NODE, '抄送人')
-
-export type WorkFlowNode = {
-  id: string,
-  type: NodeType,
-  name: string,
-  attributes: any,
-  // 操作人
-  childNode?: WorkFlowNode | undefined,
-  conditionNodes: WorkFlowNode[]
-}
\ No newline at end of file
diff --git a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
deleted file mode 100644
index d6ad5c2c..00000000
--- a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
+++ /dev/null
@@ -1,434 +0,0 @@
-<!-- eslint-disable vue/html-self-closing -->
-<template>
-  <el-drawer
-    :append-to-body="true"
-    v-model="visible"
-    :show-close="false"
-    :size="550"
-    :before-close="saveConfig"
-    class="justify-start"
-  >
-    <template #header>
-      <div class="w-full flex flex-col">
-        <span class="text-size-2xl">审批设置</span>
-        <el-divider />
-      </div>
-    </template>
-    <el-tabs type="border-card">
-      <el-tab-pane label="审批人">
-        <div>
-          <el-form label-position="top" label-width="100px">
-            <el-form-item label="审批方式" prop="approveMethod">
-              <el-select v-model="candidateConfig.approveMethod" style="width: 100%" clearable>
-                <el-option
-                  v-for="dict in approveMethods"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                />
-              </el-select>
-            </el-form-item>
-
-            <el-form-item label="审批人规则类型" prop="candidateStrategy">
-              <el-select
-                v-model="candidateConfig.candidateStrategy"
-                style="width: 100%"
-                clearable
-                @change="changecandidateStrategy"
-              >
-                <el-option
-                  v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                />
-              </el-select>
-            </el-form-item>
-
-            <el-form-item
-              v-if="candidateConfig.candidateStrategy == 10"
-              label="指定角色"
-              prop="candidateParam"
-            >
-              <el-select
-                v-model="candidateConfig.candidateParam"
-                clearable
-                multiple
-                style="width: 100%"
-              >
-                <el-option
-                  v-for="item in roleOptions"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item
-              v-if="
-                candidateConfig.candidateStrategy == 20 || candidateConfig.candidateStrategy == 21
-              "
-              label="指定部门"
-              prop="candidateParam"
-              span="24"
-            >
-              <el-tree-select
-                ref="treeRef"
-                v-model="candidateConfig.candidateParam"
-                :data="deptTreeOptions"
-                :props="defaultProps"
-                empty-text="加载中，请稍后"
-                multiple
-                node-key="id"
-                style="width: 100%"
-                show-checkbox
-              />
-            </el-form-item>
-            <el-form-item
-              v-if="candidateConfig.candidateStrategy == 22"
-              label="指定岗位"
-              prop="candidateParam"
-              span="24"
-            >
-              <el-select
-                v-model="candidateConfig.candidateParam"
-                clearable
-                multiple
-                style="width: 100%"
-              >
-                <el-option
-                  v-for="item in postOptions"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item
-              v-if="
-                candidateConfig.candidateStrategy == 30 ||
-                candidateConfig.candidateStrategy == 31 ||
-                candidateConfig.candidateStrategy == 32
-              "
-              label="指定用户"
-              prop="candidateParam"
-              span="24"
-            >
-              <el-select
-                v-model="candidateConfig.candidateParam"
-                clearable
-                multiple
-                style="width: 100%"
-              >
-                <el-option
-                  v-for="item in userOptions"
-                  :key="item.id"
-                  :label="item.nickname"
-                  :value="item.id"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item
-              v-if="candidateConfig.candidateStrategy === 40"
-              label="指定用户组"
-              prop="candidateParam"
-            >
-              <el-select
-                v-model="candidateConfig.candidateParam"
-                clearable
-                multiple
-                style="width: 100%"
-              >
-                <el-option
-                  v-for="item in userGroupOptions"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item
-              v-if="candidateConfig.candidateStrategy === 60"
-              label="流程表达式"
-              prop="candidateParam"
-            >
-              <el-input
-                type="textarea"
-                v-model="candidateConfig.candidateParam[0]"
-                clearable
-                style="width: 100%"
-              />
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-tab-pane>
-      <el-tab-pane label="设置字段权限" v-if="formType === 10">
-        <div class="field-setting-pane h-full w-full flex flex-col">
-          <div class="field-setting-content mr-2 overflow-auto py-4 pr-2">
-            <div class="field-container flex flex-col flex-items-start">
-              <div class="mb-2 ml-4 font-bold">字段权限</div>
-              <div class="field-body ml-4 mt-2">
-                <div class="field-permit-box text-size--13px">
-                  <div class="field-permit-title">
-                    <span class="setting-title-label">组件名称</span>
-                    <span class="setting-title-label">可编辑</span>
-                    <span class="setting-title-label">只读</span>
-                    <span class="setting-title-label">隐藏</span>
-                  </div>
-                  <!-- <div class="field-setting-item">
-                    <span class="field-setting-item-label">全选</span>
-                    <span class="all-checkbox-wrap">
-                      <el-checkbox
-                        label=""
-                        size="large"
-                      />
-                    </span>
-                    <span class="all-checkbox-wrap">
-                      <el-checkbox
-                        label=""
-                        size="large"
-                      />
-                    </span>
-                    <span class="all-checkbox-wrap">
-                      <el-checkbox
-                        label=""
-                        size="large"
-                      />
-                    </span>
-                  </div> -->
-                  <div class="field-setting-item-check">
-                    <div
-                      class="field-setting-item"
-                      v-for="(item, index) in candidateConfig.fieldsPermission"
-                      :key="index"
-                    >
-                      <span class="field-setting-item-label"> {{ item.title }}</span>
-                      <el-radio-group v-model="item.permission">
-                        <div class="item-radio-wrap">
-                          <el-radio value="1" size="large" label="1" />
-                        </div>
-                        <div class="item-radio-wrap">
-                          <el-radio value="2" size="large" label="2" />
-                        </div>
-                        <div class="item-radio-wrap">
-                          <el-radio value="3" size="large" label="3" />
-                        </div>
-                      </el-radio-group>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </el-tab-pane>
-    </el-tabs>
-
-    <template #footer>
-      <el-divider />
-      <div>
-        <el-button type="primary" @click="saveConfig">确 定</el-button>
-        <el-button @click="closeDrawer">取 消</el-button>
-      </div>
-    </template>
-  </el-drawer>
-</template>
-<script lang="ts" setup>
-import { ref, watch, computed, toRaw } from 'vue'
-import { approveMethods } from '../util'
-import { useWorkFlowStoreWithOut } from '@/store/modules/bpm/simpleWorkflow'
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { defaultProps, handleTree } from '@/utils/tree'
-import * as RoleApi from '@/api/system/role'
-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'
-
-const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
-const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
-const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
-const deptTreeOptions = ref() // 部门树
-const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
-const candidateConfig = ref({
-  candidateStrategy: undefined,
-  candidateParam: [],
-  approveMethod: undefined,
-  fieldsPermission: []
-})
-const store = useWorkFlowStoreWithOut()
-let { setApproverDrawer, setUserTaskConfig } = store
-// let approverConfig1 = computed(() => store.approverConfig1)
-let approverDrawer = computed(() => store.approverDrawer)
-const userTaskConfig = computed(() => store.userTaskConfig)
-const formType = inject('formType')
-let visible = computed({
-  get() {
-    return approverDrawer.value
-  },
-  set() {
-    closeDrawer()
-  }
-})
-watch(userTaskConfig, (val) => {
-  if (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)
-      }
-    }
-    console.log('val.value.attributes.fieldsPermission', val.value.attributes.fieldsPermission)
-    candidateConfig.value.fieldsPermission = val.value.attributes.fieldsPermission
-  }
-})
-// watch(approverConfig1, (val) => {
-//   approverConfig.value = val.value
-// })
-
-const saveConfig = () => {
-  const rawConfig = toRaw(userTaskConfig.value)
-  const { approveMethod, candidateStrategy, candidateParam, fieldsPermission } = toRaw(
-    candidateConfig.value
-  )
-  const candidateParamStr = candidateParam.join(',')
-  rawConfig.value.attributes = {
-    approveMethod,
-    candidateStrategy,
-    candidateParam: candidateParamStr,
-    fieldsPermission: fieldsPermission
-  }
-  rawConfig.flag = true
-  // TODO 进行校验
-  // setApproverConfig({
-  //     value: approverConfig.value,
-  //     flag: true,
-  //     id: approverConfig1.value.id
-  // })
-  setUserTaskConfig({
-    value: rawConfig.value,
-    flag: true,
-    id: userTaskConfig.value.id
-  })
-  closeDrawer()
-}
-
-const closeDrawer = () => {
-  setApproverDrawer(false)
-}
-const changecandidateStrategy = () => {
-  candidateConfig.value.candidateParam = []
-}
-const handleAllCheck = (event, type) => {
-  console.log('event', event)
-  console.log('type', type)
-  event.target.checked = true
-  let permission = '1'
-  if (type === 'edit' && editAllChecked.value) {
-    permission = '1' // TODO @jaosn：这个要不要用枚举里的哈
-  }
-  if (type === 'read' && readAllChecked.value) {
-    permission = '2'
-  }
-  if (type === 'hide' && hideAllChecked.value) {
-    permission = '3'
-  }
-  candidateConfig.value.fieldsPermission.forEach((item) => {
-    item.permission = permission
-  })
-}
-onMounted(async () => {
-  // 获得角色列表
-  roleOptions.value = await RoleApi.getSimpleRoleList()
-  // 获得岗位列表
-  postOptions.value = await PostApi.getSimplePostList()
-  // 获得用户列表
-  userOptions.value = await UserApi.getSimpleUserList()
-  // 获得部门列表
-  const deptOptions = await DeptApi.getSimpleDeptList()
-  deptTreeOptions.value = handleTree(deptOptions, 'id')
-  // 获得用户组列表
-  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
-})
-</script>
-<style lang="scss" scoped>
-// ::v-deep .el-drawer__header {
-//   margin-bottom: 2px;
-// }
-.field-permit-title {
-  height: 45px;
-  padding: 0 0 0 12px;
-  line-height: 32px;
-  background-color: rgba(248, 250, 252, 0.04);
-  border: 1px solid rgba(31, 56, 88, 0.1);
-
-  .setting-title-label:first-child {
-    text-align: left;
-  }
-
-  .setting-title-label {
-    display: inline-block;
-    width: 110px;
-    padding: 5px 0;
-    font-size: 13px;
-    font-weight: 700;
-    color: rgba(0, 0, 0, 0.6);
-    text-align: center;
-  }
-}
-
-.field-setting-item {
-  display: flex;
-  align-items: center;
-  height: 38px;
-  padding-bottom: 0;
-  padding-left: 12px;
-  line-height: 38px;
-  border-right: 1px solid rgba(31, 56, 88, 0.1);
-  border-bottom: 1px solid rgba(31, 56, 88, 0.1);
-  border-left: 1px solid rgba(31, 56, 88, 0.1);
-
-  .no-label {
-    font-size: 0;
-  }
-
-  .field-setting-item-label {
-    display: inline-block;
-    width: 110px;
-    min-height: 16px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: text;
-  }
-
-  .all-checkbox-wrap {
-    display: inline-block;
-    width: 110px;
-    text-align: center;
-  }
-
-  .item-radio-wrap {
-    display: inline-block;
-    width: 110px;
-    padding-left: 6px;
-    text-align: center;
-  }
-}
-
-::v-deep(.el-radio__label) {
-  opacity: 0; /* 隐藏标签文本 */
-}
-
-::v-deep(.el-divider--horizontal) {
-  display: block;
-  width: 100%;
-  height: 1px;
-  margin: 4px 0;
-  border-top: 1px var(--el-border-color) var(--el-border-style);
-}
-</style>
diff --git a/src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue b/src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue
deleted file mode 100644
index 70b1fc5b..00000000
--- a/src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<template>
-  <el-drawer
-    :append-to-body="true"
-    v-model="visible"
-    :show-close="false"
-    :size="550"
-    :before-close="saveConfig"
-  >
-    <template #header>
-      <div class="copy-task-header">抄送人设置</div>
-    </template>
-    <div>
-      <el-form label-position="top" label-width="100px">
-        <el-form-item label="选择抄送人" prop="candidateStrategy">
-          <el-select
-            v-model="candidateConfig.candidateStrategy"
-            style="width: 100%"
-            clearable
-            @change="changecandidateStrategy"
-          >
-            <el-option
-              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item
-          v-if="candidateConfig.candidateStrategy == 10"
-          label="指定角色"
-          prop="candidateParam"
-        >
-          <el-select
-            v-model="candidateConfig.candidateParam"
-            clearable
-            multiple
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in roleOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="candidateConfig.candidateStrategy == 20 || candidateConfig.candidateStrategy == 21"
-          label="指定部门"
-          prop="candidateParam"
-          span="24"
-        >
-          <el-tree-select
-            ref="treeRef"
-            v-model="candidateConfig.candidateParam"
-            :data="deptTreeOptions"
-            :props="defaultProps"
-            empty-text="加载中，请稍后"
-            multiple
-            node-key="id"
-            style="width: 100%"
-            show-checkbox
-          />
-        </el-form-item>
-        <el-form-item
-          v-if="candidateConfig.candidateStrategy == 22"
-          label="指定岗位"
-          prop="candidateParam"
-          span="24"
-        >
-          <el-select
-            v-model="candidateConfig.candidateParam"
-            clearable
-            multiple
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in postOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="
-            candidateConfig.candidateStrategy == 30 ||
-            candidateConfig.candidateStrategy == 31 ||
-            candidateConfig.candidateStrategy == 32
-          "
-          label="指定用户"
-          prop="candidateParam"
-          span="24"
-        >
-          <el-select
-            v-model="candidateConfig.candidateParam"
-            clearable
-            multiple
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in userOptions"
-              :key="item.id"
-              :label="item.nickname"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="candidateConfig.candidateStrategy === 40"
-          label="指定用户组"
-          prop="candidateParam"
-        >
-          <el-select
-            v-model="candidateConfig.candidateParam"
-            clearable
-            multiple
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in userGroupOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="candidateConfig.candidateStrategy === 60"
-          label="流程表达式"
-          prop="candidateParam"
-        >
-          <el-input
-            type="textarea"
-            v-model="candidateConfig.candidateParam[0]"
-            clearable
-            style="width: 100%"
-          />
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="demo-drawer__footer clear">
-      <el-button type="primary" @click="saveConfig">确 定</el-button>
-      <el-button @click="closeDrawer">取 消</el-button>
-    </div>
-  </el-drawer>
-</template>
-<script lang="ts" setup>
-import { ref, watch, computed, toRaw } from 'vue'
-import { useWorkFlowStoreWithOut } from '@/store/modules/bpm/simpleWorkflow'
-import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
-import { defaultProps, handleTree } from '@/utils/tree'
-import * as RoleApi from '@/api/system/role'
-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'
-
-const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
-const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
-const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
-const deptTreeOptions = ref() // 部门树
-const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
-const candidateConfig = ref({
-  candidateStrategy: undefined,
-  candidateParam: []
-})
-const store = useWorkFlowStoreWithOut()
-const { setCopyerDrawer, setCopyerConfig } = store
-
-const copyerDrawer = computed(() => store.copyerDrawer)
-const copyerConfig = computed(() => store.copyerConfig)
-
-const visible = computed({
-  get() {
-    return copyerDrawer.value
-  },
-  set() {
-    closeDrawer()
-  }
-})
-watch(copyerConfig, (val) => {
-  if (val.value.attributes) {
-    console.log('val.value.attributes', val.value.attributes)
-    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
-  }
-})
-
-const saveConfig = () => {
-  const rawConfig = toRaw(copyerConfig.value)
-  const { candidateStrategy, candidateParam } = toRaw(candidateConfig.value)
-  const candidateParamStr = candidateParam.join(',')
-  rawConfig.value.attributes = {
-    candidateStrategy,
-    candidateParam: candidateParamStr
-  }
-  rawConfig.flag = true
-  // TODO 进行校验
-  // setApproverConfig({
-  //     value: approverConfig.value,
-  //     flag: true,
-  //     id: approverConfig1.value.id
-  // })
-
-  setCopyerConfig({
-    value: rawConfig.value,
-    flag: true,
-    id: copyerConfig.value.id
-  })
-  console.log('after is copyerConfig', copyerConfig.value)
-  closeDrawer()
-}
-
-const closeDrawer = () => {
-  setCopyerDrawer(false)
-}
-const changecandidateStrategy = () => {
-  candidateConfig.value.candidateParam = []
-}
-onMounted(async () => {
-  // 获得角色列表
-  roleOptions.value = await RoleApi.getSimpleRoleList()
-  // 获得岗位列表
-  postOptions.value = await PostApi.getSimplePostList()
-  // 获得用户列表
-  userOptions.value = await UserApi.getSimpleUserList()
-  // 获得部门列表
-  const deptOptions = await DeptApi.getSimpleDeptList()
-  deptTreeOptions.value = handleTree(deptOptions, 'id')
-  // 获得用户组列表
-  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
-})
-</script>
-<style lang="scss" scoped>
-.copy-task-header {
-  font-size: 16px !important;
-}
-</style>
diff --git a/src/components/SimpleProcessDesigner/src/nodeWrap.vue b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
deleted file mode 100644
index 18cde05a..00000000
--- a/src/components/SimpleProcessDesigner/src/nodeWrap.vue
+++ /dev/null
@@ -1,504 +0,0 @@
-<!-- eslint-disable vue/no-mutating-props -->
-<!--
- * @Date: 2022-09-21 14:41:53
- * @LastEditors: StavinLi 495727881@qq.com
- * @LastEditTime: 2023-05-24 15:20:24
- * @FilePath: /Workflow-Vue3/src/components/nodeWrap.vue
--->
-<template>
-  <div class="node-wrap" v-if="nodeConfig.type < 3">
-    <div class="node-wrap-box" :class="isTried && nodeConfig.error ? 'active error' : ''">
-      <div class="title" :style="`background: rgb(${bgColors[nodeConfig.type]});`">
-        <span v-if="nodeConfig.type == 0">发起人</span>
-        <template v-else>
-          <span
-            class="iconfont"
-            :class="nodeConfig.type === NodeType.APPROVE_USER_NODE ? 'icon-approve' : 'icon-copy'"
-          >
-          </span>
-          <input
-            v-if="isInput"
-            type="text"
-            class="ant-input editable-title-input"
-            @blur="blurEvent(-1)"
-            @focus="$event.currentTarget?.select()"
-            v-mountedFocus
-            v-model="nodeConfig.name"
-            :placeholder="defaultText"
-          />
-          <span v-else class="editable-title" @click="clickEvent(-1)">{{ nodeConfig.name }}</span>
-          <i class="anticon anticon-close close" @click="delNode"></i>
-        </template>
-      </div>
-      <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>
-        </div>
-        <!-- <div class="icon-box">
-          <i class="anticon anticon-edit" @click="editNode"></i>
-        </div> -->
-        <i class="anticon anticon-right arrow"></i>
-      </div>
-      <div class="error_tip" v-if="isTried && nodeConfig.error">
-        <i class="anticon anticon-exclamation-circle"></i>
-      </div>
-    </div>
-    <addNode v-model:childNodeP="nodeConfig.childNode" />
-  </div>
-  <div class="branch-wrap" v-if="nodeConfig.type == 4">
-    <div class="branch-box-wrap">
-      <div class="branch-box">
-        <button class="add-branch" @click="addTerm(nodeConfig.type)">添加条件</button>
-        <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-mountedFocus
-                  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(nodeConfig.type,index)"
-                  v-if="nodeConfig.conditionNodes && 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="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> -->
-                <div class="content">{{ conditionStr(nodeConfig, index) }}</div>
-                <div class="error_tip" v-if="isTried && item.error">
-                  <i class="anticon anticon-exclamation-circle"></i>
-                </div>
-              </div>
-              <addNode v-model:childNodeP="item.childNode" />
-            </div>
-          </div>
-          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
-          <template v-if="index == 0">
-            <div class="top-left-cover-line"></div>
-            <div class="bottom-left-cover-line"></div>
-          </template>
-          <template v-if="index == nodeConfig.conditionNodes.length - 1">
-            <div class="top-right-cover-line"></div>
-            <div class="bottom-right-cover-line"></div>
-          </template>
-        </div>
-      </div>
-      <addNode v-model:childNodeP="nodeConfig.childNode" />
-    </div>
-  </div>
-  <div class="branch-wrap" v-if="nodeConfig.type == 5">
-    <div class="branch-box-wrap">
-      <div class="branch-box">
-        <button class="add-branch" @click="addTerm(nodeConfig.type)">添加分支</button>
-        <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-mountedFocus
-                  v-model="item.name"
-                />
-                <span v-else class="editable-title" @click="clickEvent(index)">{{
-                  item.name
-                }}</span>
-                <i class="anticon anticon-close close" @click="delTerm(nodeConfig.type, index)"></i>
-              </div>
-              <div class="auto-judge" :class="isTried && item.error ? 'error active' : ''">
-                <div class="content">并行执行</div>
-                <div class="error_tip" v-if="isTried && item.error">
-                  <i class="anticon anticon-exclamation-circle"></i>
-                </div>
-              </div>
-              <addNode v-model:childNodeP="item.childNode" />
-            </div>
-          </div>
-          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
-          <template v-if="index == 0">
-            <div class="top-left-cover-line"></div>
-            <div class="bottom-left-cover-line"></div>
-          </template>
-          <template v-if="index === nodeConfig.conditionNodes.length - 1">
-            <div class="top-right-cover-line"></div>
-            <div class="bottom-right-cover-line"></div>
-          </template>
-        </div>
-      </div>
-      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
-    </div>
-  </div>
-  <div class="branch-wrap" v-if="nodeConfig.type == 7">
-    <div class="branch-box-wrap">
-      <div class="branch-box">
-        <button class="add-branch" @click="addTerm(nodeConfig.type)">添加分支</button>
-        <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-mountedFocus
-                  v-model="item.name"
-                />
-                <span v-else class="editable-title" @click="clickEvent(index)">
-                  {{ item.name }}
-                </span>
-                 <i
-                  class="anticon anticon-close close"
-                  @click="delTerm(nodeConfig.type,index)"
-                  v-if="index != nodeConfig.conditionNodes?.length - 1"
-                  ></i>
-              </div>
-              <div class="auto-judge" :class="isTried && item.error ? 'error active' : ''">
-                <div class="content">{{ conditionStr(nodeConfig, index) }}</div>
-                <div class="error_tip" v-if="isTried && item.error">
-                  <i class="anticon anticon-exclamation-circle"></i>
-                </div>
-              </div>
-              <addNode v-model:childNodeP="item.childNode" />
-            </div>
-          </div>
-          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
-          <template v-if="index == 0">
-            <div class="top-left-cover-line"></div>
-            <div class="bottom-left-cover-line"></div>
-          </template>
-          <template v-if="index == nodeConfig.conditionNodes.length - 1">
-            <div class="top-right-cover-line"></div>
-            <div class="bottom-right-cover-line"></div>
-          </template>
-        </div>
-      </div>
-      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
-    </div>
-  </div>
-  <div class="node-wrap" v-if="nodeConfig.type === NodeType.PARALLEL_NODE_JOIN || nodeConfig.type === NodeType.INCLUSIVE_NODE_JOIN">
-    <div class="node-wrap-box">
-      <div class="content">
-        <div class="text">聚合</div>
-      </div>
-    </div>
-    <addNode v-model:childNodeP="nodeConfig.childNode"  />
-  </div>
-  <nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
-</template>
-<script lang="ts" setup>
-import addNode from './addNode.vue'
-import { onMounted, ref, watch, getCurrentInstance, computed } from 'vue'
-import {
-  conditionStr,
-  setApproverStr,
-  copyerStr,
-  bgColors,
-  placeholderList,
-  getApproverShowText
-} from './util'
-import { WorkFlowNode, NodeType } from './consts'
-import { useWorkFlowStoreWithOut } from '@/store/modules/bpm/simpleWorkflow'
-let _uid = getCurrentInstance().uid
-import { generateUUID } from '@/utils'
-let props = defineProps({
-  nodeConfig: {
-    type: Object as () => WorkFlowNode,
-    default: () => ({}) as WorkFlowNode
-  }
-})
-
-let defaultText = computed(() => {
-  return placeholderList[props.nodeConfig.type]
-})
-const isInputList = ref<boolean[]>([])
-const isInput = ref<boolean>(false)
-const resetConditionNodesErr = () => {
-  for (var i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
-    // eslint-disable-next-line vue/no-mutating-props
-    props.nodeConfig.conditionNodes[i].error =
-      conditionStr(props.nodeConfig, i) == '请设置条件' &&
-      i != props.nodeConfig.conditionNodes.length - 1
-  }
-}
-onMounted(() => {
-  if (props.nodeConfig.type == 1) {
-    // eslint-disable-next-line vue/no-mutating-props
-    props.nodeConfig.error = !setApproverStr(props.nodeConfig)
-  } else if (props.nodeConfig.type == 2) {
-    // eslint-disable-next-line vue/no-mutating-props
-    props.nodeConfig.error = !copyerStr(props.nodeConfig)
-  } else if (props.nodeConfig.type == 4) {
-    resetConditionNodesErr()
-  }
-})
-let emits = defineEmits(['update:nodeConfig'])
-let store = useWorkFlowStoreWithOut()
-let {
-  setApproverDrawer,
-  setCopyerDrawer,
-  // setCondition,
-  setCopyerConfig,
-  // setConditionsConfig,
-  setUserTaskConfig
-} = store
-// ???
-const isTried = computed(() => store.isTried)
-// 审批节点的配置
-const userTaskConfig = computed(() => store.userTaskConfig)
-// 抄送节点的配置
-const copyerConfig = computed(() => store.copyerConfig)
-// 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
-      )
-    } else {
-      return ''
-    }
-  }
-  if (props.nodeConfig.type === 2) {
-    if (props.nodeConfig.attributes) {
-      return copyerStr(props.nodeConfig.attributes.candidateStrategy)
-    } else {
-      return ''
-    }
-  }
-  return ''
-})
-watch(userTaskConfig, (approver) => {
-  if (approver.flag && approver.id === _uid) {
-    emits('update:nodeConfig', approver.value)
-  }
-})
-watch(copyerConfig, (copyer) => {
-  console.log('copyer', copyer)
-  if (copyer.flag && copyer.id === _uid) {
-    console.log('copyer id is equal', copyer)
-    emits('update:nodeConfig', copyer.value)
-  }
-})
-
-// watch(conditionsConfig1, (condition) => {
-//   if (condition.flag && condition.id === _uid) {
-//     emits('update:nodeConfig', condition.value)
-//   }
-// })
-
-const clickEvent = (index) => {
-  if (index >= 0) {
-    isInputList.value[index] = true
-  } else {
-    isInput.value = true
-  }
-}
-
-const blurEvent = (index) => {
-  if (index >= 0) {
-    isInputList.value[index] = false
-    // eslint-disable-next-line vue/no-mutating-props
-    props.nodeConfig.conditionNodes[index].name =
-      props.nodeConfig.conditionNodes[index].name || '条件'
-  } else {
-    isInput.value = false
-    // eslint-disable-next-line vue/no-mutating-props
-    props.nodeConfig.name = props.nodeConfig.name || defaultText
-  }
-}
-const delNode = () => {
-  emits('update:nodeConfig', props.nodeConfig.childNode)
-}
-const addTerm = (type:number) => {
-  const len = props.nodeConfig.conditionNodes.length
-  let lastIndex = props.nodeConfig.conditionNodes.length - 1
-  let nodeName = '分支' + len
-  if(type === NodeType.PARALLEL_NODE_FORK) {
-    nodeName = '并行' + (len+1);
-    lastIndex = props.nodeConfig.conditionNodes.length;
-  }
-  const conditionData = {
-    id: 'SequenceFlow'+ generateUUID(),
-    name: nodeName,
-    type: NodeType.CONDITION_NODE,
-    childNode: undefined,
-    conditionNodes:[],
-    attributes : undefined
-  };
-  // eslint-disable-next-line vue/no-mutating-props
-  props.nodeConfig.conditionNodes.splice(lastIndex, 0, conditionData)
-  resetConditionNodesErr()
-  emits('update:nodeConfig', props.nodeConfig)
-}
-const delTerm = (nodeType: number, index: number) => {
-  if (props.nodeConfig.conditionNodes) {
-    // eslint-disable-next-line vue/no-mutating-props
-    props.nodeConfig.conditionNodes.splice(index, 1)
-    if (nodeType === NodeType.PARALLEL_NODE_FORK) {
-      props.nodeConfig.conditionNodes.map((item, index) => {
-          item.name = `并行${index + 1}`
-      })
-    } else {
-      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 (nodeType === NodeType.PARALLEL_NODE_FORK || nodeType === NodeType.INCLUSIVE_NODE_FORK) {
-        const joinNode = props.nodeConfig.childNode;
-        if (joinNode?.childNode) {
-          if (props.nodeConfig.conditionNodes[0].childNode) {
-            reData(props.nodeConfig.conditionNodes[0].childNode, joinNode?.childNode)
-          } else {
-            // eslint-disable-next-line vue/no-mutating-props
-            props.nodeConfig.conditionNodes[0].childNode = joinNode?.childNode
-          }
-        }
-        emits('update:nodeConfig', props.nodeConfig.conditionNodes[0].childNode)
-      } else {
-        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)
-      }
-    }
-  }
-}
-const reData = (data, addData) => {
-  if (!data.childNode) {
-    data.childNode = addData
-  } else {
-    reData(data.childNode, addData)
-  }
-}
-const setPerson = (priorityLevel) => {
-  console.log('priorityLevel', priorityLevel)
-  const { type } = props.nodeConfig
-  console.log('type', type)
-  if (type == 0) {
-    // setPromoter(true)
-  } else if (type == 1) {
-    setApproverDrawer(true)
-    // if (_uid === userTaskConfig.value.id) {
-    //   showText = userTaskConfig.value.showText
-    // }
-    setUserTaskConfig({
-      value: {
-        ...JSON.parse(JSON.stringify(props.nodeConfig)),
-        id: 'Activity_' + _uid
-      },
-      flag: false,
-      id: _uid
-    })
-  } else if (type == 2) {
-    setCopyerDrawer(true)
-    setCopyerConfig({
-      value: {
-        ...JSON.parse(JSON.stringify(props.nodeConfig)),
-        id: 'Activity_' + _uid
-      },
-      flag: false,
-      id: _uid
-    })
-  } else {
-    // setCondition(true)
-    // setConditionsConfig({
-    //   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)
-// }
-</script>
-<style lang="scss" scoped>
-.ellipsis-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.start-event-node {
-  color: #191f2566;
-  text-align: left;
-  border-radius: 50%;
-}
-
-.start-event-node-circle {
-  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%;
-}
-
-.start-event-node-text {
-  margin-top: 5px;
-  font-size: 14px;
-  text-align: center;
-}
-</style>
diff --git a/src/components/SimpleProcessDesigner/src/util.ts b/src/components/SimpleProcessDesigner/src/util.ts
deleted file mode 100644
index 6b139366..00000000
--- a/src/components/SimpleProcessDesigner/src/util.ts
+++ /dev/null
@@ -1,218 +0,0 @@
-// @ts-ignore
-import { DictDataVO } from '@/api/system/dict/types'
-import { DICT_TYPE,  getDictLabel } from '@/utils/dict'
-/**
- * todo
- */
-export const arrToStr = (arr?: [{ name: string }]) => {
-  if (arr) {
-    return arr
-      .map((item) => {
-        return item.name
-      })
-      .toString()
-  }
-}
-
-export const setApproverStr = (nodeConfig: any) => {
-  if (nodeConfig.settype == 1) {
-    if (nodeConfig.nodeUserList.length == 1) {
-      return nodeConfig.nodeUserList[0].name
-    } else if (nodeConfig.nodeUserList.length > 1) {
-      if (nodeConfig.examineMode == 1) {
-        return arrToStr(nodeConfig.nodeUserList)
-      } else if (nodeConfig.examineMode == 2) {
-        return nodeConfig.nodeUserList.length + '人会签'
-      }
-    }
-  } else if (nodeConfig.settype == 2) {
-    const level =
-      nodeConfig.directorLevel == 1 ? '直接主管' : '第' + nodeConfig.directorLevel + '级主管'
-    if (nodeConfig.examineMode == 1) {
-      return level
-    } else if (nodeConfig.examineMode == 2) {
-      return level + '会签'
-    }
-  } else if (nodeConfig.settype == 4) {
-    if (nodeConfig.selectRange == 1) {
-      return '发起人自选'
-    } else {
-      if (nodeConfig.nodeUserList.length > 0) {
-        if (nodeConfig.selectRange == 2) {
-          return '发起人自选'
-        } else {
-          return '发起人从' + nodeConfig.nodeUserList[0].name + '中自选'
-        }
-      } else {
-        return ''
-      }
-    }
-  } else if (nodeConfig.settype == 5) {
-    return '发起人自己'
-  } else if (nodeConfig.settype == 7) {
-    return '从直接主管到通讯录中级别最高的第' + nodeConfig.examineEndDirectorLevel + '个层级主管'
-  }
-}
-
-
-export const approveMethods: DictDataVO [] = [
-  { label: '单人审批', value: 1 }
-  // { label: '多人审批(所有人审批通过)', value: 2 }
-  // TODO 更多的类型
-];
-
-export const getApproverShowText = (approveMethod :number, candidateStrategy: number) => {
-  let appoveMethodText = '单人审批'
-  if(candidateStrategy) {
-    approveMethods.forEach((item) => {
-      if (item.value == approveMethod) {
-        appoveMethodText = item.label
-      }
-    })
-    const strategyText = getDictLabel(
-      DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY,
-      candidateStrategy
-    )
-    return `审批方式：${appoveMethodText} <br/>
-            审批人规则类型：按${strategyText}`
-  } else {
-      return ''
-  }
-}
-
-export const copyerStr = ( candidateStrategy: number) => {
-  // if (nodeConfig.nodeUserList.length != 0) {
-  //   return arrToStr(nodeConfig.nodeUserList)
-  // } else {
-  //   if (nodeConfig.ccSelfSelectFlag == 1) {
-  //     return '发起人自选'
-  //   }
-  // }
-  console.log('candidateStrategy', candidateStrategy);
-
-  if(candidateStrategy) {
-    const strategyText = getDictLabel(
-      DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY,
-      candidateStrategy
-    )
-    return `抄送人类型：按${strategyText}`
-  } else {
-      return ''
-  }
-}
-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
-    //   ? '其他条件进入此流程'
-    //   : '请设置条件'
-    // 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++) {
-  //     const {
-  //       columnId,
-  //       columnType,
-  //       showType,
-  //       showName,
-  //       optType,
-  //       zdy1,
-  //       opt1,
-  //       zdy2,
-  //       opt2,
-  //       fixedDownBoxValue
-  //     } = conditionList[i]
-  //     if (columnId == 0) {
-  //       if (nodeUserList.length != 0) {
-  //         str += '发起人属于：'
-  //         str +=
-  //           nodeUserList
-  //             .map((item) => {
-  //               return item.name
-  //             })
-  //             .join('或') + ' 并且 '
-  //       }
-  //     }
-  //     if (columnType == 'String' && showType == '3') {
-  //       if (zdy1) {
-  //         str += showName + '属于：' + dealStr(zdy1, JSON.parse(fixedDownBoxValue)) + ' 并且 '
-  //       }
-  //     }
-  //     if (columnType == 'Double') {
-  //       if (optType != 6 && zdy1) {
-  //         const optTypeStr = ['', '<', '>', '≤', '=', '≥'][optType]
-  //         str += `${showName} ${optTypeStr} ${zdy1} 并且 `
-  //       } else if (optType == 6 && zdy1 && zdy2) {
-  //         str += `${zdy1} ${opt1} ${showName} ${opt2} ${zdy2} 并且 `
-  //       }
-  //     }
-  //   }
-  // str ? str.substring(0, str.length - 4) :
-  return '请设置条件'
-  // }
-}
-
-// export const dealStr = (str: string, obj) => {
-//   const arr = []
-//   const list = str.split(',')
-//   for (const elem in obj) {
-//     list.map((item) => {
-//       if (item == elem) {
-//         arr.push(obj[elem].value)
-//       }
-//     })
-//   }
-//   return arr.join('或')
-// }
-
-export const removeEle = (arr, elem, key = 'id') => {
-  let includesIndex
-  arr.map((item, index) => {
-    if (item[key] == elem[key]) {
-      includesIndex = index
-    }
-  })
-  arr.splice(includesIndex, 1)
-}
-
-export const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250','50, 150, 250','248, 107, 248','244, 118, 118','23, 148, 46','23, 148, 46']
-export const placeholderList = ['发起人', '审核人', '抄送人']
-export const setTypes = [
-  { value: 1, label: '指定成员' },
-  { value: 2, label: '主管' },
-  { value: 4, label: '发起人自选' },
-  { value: 5, label: '发起人自己' },
-  { value: 7, label: '连续多级主管' }
-]
-
-export const selectModes = [
-  { value: 1, label: '选一个人' },
-  { value: 2, label: '选多个人' }
-]
-
-export const selectRanges = [
-  { value: 1, label: '全公司' },
-  { value: 2, label: '指定成员' },
-  { value: 3, label: '指定角色' }
-]
-
-export const optTypes = [
-  { value: '1', label: '小于' },
-  { value: '2', label: '大于' },
-  { value: '3', label: '小于等于' },
-  { value: '4', label: '等于' },
-  { value: '5', label: '大于等于' },
-  { value: '6', label: '介于两个数之间' }
-]
diff --git a/src/components/SimpleProcessDesigner/theme/iconfont.ttf b/src/components/SimpleProcessDesigner/theme/iconfont.ttf
deleted file mode 100644
index c2dcd3f422eda69e3cb3520c32c67528a6f82944..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2908
zcmd^B|8HAY6+h=)$4+eLy<~aMj!WXc_Z-`G+S<vB?JRAUrcIlWDAPupw9~q+b)6R{
z!Lg0whGvs03)mQJK$lHu(hwD5Lrf|HX-ES>wf!(gk>Cdq8Ul?16U5UxkoW<KADS1=
zwV&J3j=zBGoO?g#bI!S6&b>GH0Rn&rs=#1i>cspJ^_lSF0C+F4a}S(I7^D7~pOF46
z>1VU6nbPPJ`M&`Ot;Ai=<u?}J$9KO7!2S*3cyY<hEJUCEVVHdXOp;zA!gZZJP57rI
zeM_sA3q1rV_Cu<A^2Kb1sSX;8y-#|_YUV--6<8sAH|c62vubvHd-MkYt(R!bT&cKL
zdFCs>zX;%_@n8XH?yR~~g-0Bu(hMlD4sKVjIz#Li&i(T@XQa`8fv4g7UiwE}+^x~>
zR2{%RM`|kwb};YB1&{Ggsc_a!KY$&sQsH(t48Rx&M<-|JK+I<<1=wZ#H|&kr2FCny
zE<^p>8u@W65`*BhS%(Ag61328UlM*v+}9c{-T(tBQh*jl?8lS`7mqE#n_EKdMm-<E
z-i0c;{dYD5KH&cnGSRqn3IO&s-0&$ozDg|bX&<$e0pcAnN4i+gmUBzk>e+g_rqukk
z8#|PpJ9YAG7NnTlKR!Q3Yj2_cD8I<F@c&-C^#nX*r-3rEMVaBkcVLSy4;Q{mTXd_q
z@Uv4>8p3z5=5Gk!=-Q2j+&a?>unAlEFuo(qa{JEn>>q3cybypGjL;Ceh;k5(F-*ph
z>2XYsp%Fw`#5RoRE_BL%^clmLju6(P7)cT~h?51Fy*M*-@kL(ErcWo6r}MnR%hqH5
zL*3Tt?rwag`;Z^MqX;Y3rdRb?&w0IA^r&7ec!d}2ND8;2b|}T81HaYXZJnV&>tR0+
zJ~B?hJft4ywKm&Ad~NmHTcvf}1JEWY!~QPx<6s+hv2aUg7{7|IS@-|xx2Lw%ckuhx
zD|qIO4ePJgudHk6#H_XV$<IC^{KdMoj%Tbd<KyVR2`|5lC%(tGfamBv_69o)LCR1Z
z47wy5<t5cgnHka)O?N7tvTsN;(y7j&PD)gG7{_oo2GNC4*Dx2qi-oqYY9qQnqTzz|
zjX)?A5GDeB<NC;UErhRi7+rH6tlgSfY@fu-qw}%j{Xu<17bYlVJQUcz8tCf_V8*&k
z<g0JtA3Gh=;r57Rsks?HUQ3)BJUUp<!A<riWAF$(N^=b9k^3;2K8UGgB%~=rhOZZ8
z=U%);)5Lr6ZaSGB(o(mAn^B6!k?kECV&B{l6-Cr#(fTkX%Cfk@tB|!V$~re(kYriX
z_t1zRv0}J)4_75*vXm3$mqhuhEH3d#stCSxTf5Q|`=~9}bER%;oco<B`!)Ti_P`*V
zs_#aGPulRw&Zt&j-WVRlNR;*{IVSjng5T$KIbB0^jCl&eT0J9rB$Z4Lk6|h<L?fc0
z$Uc7%71<f$8_KTS+>{hWVg+7v+&k3!f!o-v#b(c@50@qoL;8Nt2gE8jzsvd*$@;sb
z?1=;dIPhR1ax4|>_U-9!uvKNZq6B@LKIwIGA3qp+D3Lrn-G^-QGlvHrjSNf?`?}<t
zeqK_1(t(v&;7B<BDMP?r$zx&dP+<S3@0EOt#LppJ`acM3bOH~;QMjM(YATwHL}_<*
zmq<$!F({1Dx>J-4<(8ruyPK94*{M^if_NKnohObxiS1q`xc&8@;%)CAXgf4NA?=Mh
zT&VOX+~X&Yi2GwGw=(P>aC6hX?U<I(=nu1Y8})Nl!yLXX?Q(Z^x_3!Gb5G45V5#|O
z@omR7&nM?cgyFeq@fVJ_Jd?zy=Vs1QOk79JZ?_MSrpGnD(0kyz{qg|tH@fkP@t3m8
z#sa;}pRh3_UbnG>aKDXP=!_UPb`pP|joq*pj@j5lJ(l?E=4hjFBJg<|BXq#4HWui`
z`mv1}@jth*gYfTc+yXwR+1N?^wvF9z65DO;fe2<N%4ViwE~w`=)a7ikuvjcqn(c8j
zcRrsfH`Qi)(k!nn7YpiOe4t59nFX`l>}G8}XH+VS>SDRLs!mdWW<Fn3OXcE<nXSZ^
zDwWcKM1qgQ`FOUt3KLKU6EaYtdI3~82OCr`Ll%lqfW>-Uxl2Dz-Z?lAd5SFGWxX@{
zBzc!%jr@3@DqYq%eJb7QHAP;9y62s<S%Y;N&7e6}XhteYnR;3!G-=Pzq?zOitF(dK
zwnF`6$vX~9^{5gYfCT-T>uLJO>+4)?e9`gK#=q%4uDDP@Mo&-+y%H|^`f8glWb^0O
mme);3wpiM5E@cV}d9%&DV6(1FiL$<Kww5yGOg?Ys0saH_GT#LN

diff --git a/src/components/SimpleProcessDesigner/theme/iconfont.woff b/src/components/SimpleProcessDesigner/theme/iconfont.woff
deleted file mode 100644
index e20cfa28ccfb331b1598919902c25269ed71c7d7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

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

diff --git a/src/components/SimpleProcessDesigner/theme/iconfont.woff2 b/src/components/SimpleProcessDesigner/theme/iconfont.woff2
deleted file mode 100644
index 77bbd1b3621996d06b22ff96ebc4d03180784a64..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

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

diff --git a/src/components/SimpleProcessDesigner/theme/workflow.css b/src/components/SimpleProcessDesigner/theme/workflow.css
deleted file mode 100644
index ac711bc2..00000000
--- a/src/components/SimpleProcessDesigner/theme/workflow.css
+++ /dev/null
@@ -1,1366 +0,0 @@
-
-.clearfix {
-    zoom: 1
-}
-
-.clearfix:after,
-.clearfix:before {
-    content: "";
-    display: table
-}
-
-.clearfix:after {
-    clear: both
-}
-
-@font-face {
-    font-family: anticon;
-    font-display: fallback;
-    src: url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.eot");
-    src: url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.woff") format("woff"), url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.ttf") format("truetype"), url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.svg#iconfont") format("svg")
-}
-
-.anticon {
-    display: inline-block;
-    font-style: normal;
-    vertical-align: baseline;
-    text-align: center;
-    text-transform: none;
-    line-height: 1;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-
-.anticon:before {
-    display: block;
-    font-family: anticon!important
-}
-.anticon-close:before {
-    content: "\E633"
-}
-.anticon-right:before {
-    content: "\E61F"
-}
-.anticon-exclamation-circle{
-    color: rgb(242, 86, 67)
-}
-.anticon-exclamation-circle:before {
-    content: "\E62C"
-}
-
-.anticon-left:before {
-    content: "\E620"
-}
-
-.anticon-close-circle:before {
-    content: "\E62E"
-}
-  
-.ant-btn {
-    line-height: 1.5;
-    display: inline-block;
-    font-weight: 400;
-    text-align: center;
-    touch-action: manipulation;
-    cursor: pointer;
-    background-image: none;
-    border: 1px solid transparent;
-    white-space: nowrap;
-    padding: 0 15px;
-    font-size: 14px;
-    border-radius: 4px;
-    height: 32px;
-    user-select: none;
-    transition: all .3s cubic-bezier(.645, .045, .355, 1);
-    position: relative;
-    color: rgba(0, 0, 0, .65);
-    background-color: #fff;
-    border-color: #d9d9d9
-}
-
-.ant-btn>.anticon {
-    line-height: 1
-}
-
-.ant-btn,
-.ant-btn:active,
-.ant-btn:focus {
-    outline: 0
-}
-
-.ant-btn>a:only-child {
-    color: currentColor
-}
-
-.ant-btn>a:only-child:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background: transparent
-}
-
-.ant-btn:focus,
-.ant-btn:hover {
-    color: #40a9ff;
-    background-color: #fff;
-    border-color: #40a9ff
-}
-
-.ant-btn:focus>a:only-child,
-.ant-btn:hover>a:only-child {
-    color: currentColor
-}
-
-.ant-btn:focus>a:only-child:after,
-.ant-btn:hover>a:only-child:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background: transparent
-}
-
-.ant-btn.active,
-.ant-btn:active {
-    color: #096dd9;
-    background-color: #fff;
-    border-color: #096dd9
-}
-
-.ant-btn.active>a:only-child,
-.ant-btn:active>a:only-child {
-    color: currentColor
-}
-
-.ant-btn.active>a:only-child:after,
-.ant-btn:active>a:only-child:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background: transparent
-}
-
-.ant-btn.active,
-.ant-btn:active,
-.ant-btn:focus,
-.ant-btn:hover {
-    background: #fff;
-    text-decoration: none
-}
-
-.ant-btn>i,
-.ant-btn>span {
-    pointer-events: none
-}
-
-.ant-btn:before {
-    position: absolute;
-    top: -1px;
-    left: -1px;
-    bottom: -1px;
-    right: -1px;
-    background: #fff;
-    opacity: .35;
-    content: "";
-    border-radius: inherit;
-    z-index: 1;
-    transition: opacity .2s;
-    pointer-events: none;
-    display: none
-}
-
-.ant-btn .anticon {
-    transition: margin-left .3s cubic-bezier(.645, .045, .355, 1)
-}
-
-.ant-btn:active>span,
-.ant-btn:focus>span {
-    position: relative
-}
-
-.ant-btn>.anticon+span,
-.ant-btn>span+.anticon {
-    margin-left: 8px
-}
-
-.ant-input {
-    font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
-    font-variant: tabular-nums;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    position: relative;
-    display: inline-block;
-    padding: 4px 11px;
-    width: 100%;
-    height: 32px;
-    font-size: 14px;
-    line-height: 1.5;
-    color: rgba(0, 0, 0, .65);
-    background-color: #fff;
-    background-image: none;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    transition: all .3s
-}
-
-.ant-input::-moz-placeholder {
-    color: #bfbfbf;
-    opacity: 1
-}
-
-.ant-input:-ms-input-placeholder {
-    color: #bfbfbf
-}
-
-.ant-input::-webkit-input-placeholder {
-    color: #bfbfbf
-}
-
-.ant-input:focus,
-.ant-input:hover {
-    border-color: #40a9ff;
-    border-right-width: 1px!important
-}
-
-.ant-input:focus {
-    outline: 0;
-    box-shadow: 0 0 0 2px rgba(24, 144, 255, .2)
-}
-
-textarea.ant-input {
-    max-width: 100%;
-    height: auto;
-    vertical-align: bottom;
-    transition: all .3s, height 0s;
-    min-height: 32px
-}
-
-a,
-abbr,
-acronym,
-address,
-applet,
-article,
-aside,
-audio,
-b,
-big,
-blockquote,
-body,
-canvas,
-caption,
-center,
-cite,
-code,
-dd,
-del,
-details,
-dfn,
-div,
-dl,
-dt,
-em,
-fieldset,
-figcaption,
-figure,
-footer,
-form,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-header,
-hgroup,
-html,
-i,
-iframe,
-img,
-ins,
-kbd,
-label,
-legend,
-li,
-mark,
-menu,
-nav,
-object,
-ol,
-p,
-pre,
-q,
-s,
-samp,
-section,
-small,
-span,
-strike,
-strong,
-sub,
-summary,
-sup,
-table,
-tbody,
-td,
-tfoot,
-th,
-thead,
-time,
-tr,
-tt,
-u,
-ul,
-var,
-video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline
-}
-
-*,
-:after,
-:before {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box
-}
-
-html {
-    font-family: sans-serif;
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%
-}
-
-body,
-html {
-    font-size: 14px
-}
-
-body {
-    font-family: Microsoft Yahei, Lucida Grande, Lucida Sans Unicode, Helvetica, Arial, Verdana, sans-serif;
-    line-height: 1.6;
-    background-color: #fff;
-    position: static!important;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
-}
-
-ol,
-ul {
-    list-style-type: none
-}
-
-b,
-strong {
-    font-weight: 700
-}
-
-img {
-    border: 0
-}
-
-button,
-input,
-select,
-textarea {
-    font-family: inherit;
-    font-size: 100%;
-    margin: 0
-}
-
-textarea {
-    overflow: auto;
-    vertical-align: top;
-    -webkit-appearance: none
-}
-
-button,
-input {
-    line-height: normal
-}
-
-button,
-select {
-    text-transform: none
-}
-
-button,
-html input[type=button],
-input[type=reset],
-input[type=submit] {
-    -webkit-appearance: button;
-    cursor: pointer
-}
-
-input[type=search] {
-    -webkit-appearance: textfield;
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box;
-    box-sizing: content-box
-}
-
-input[type=search]::-webkit-search-cancel-button,
-input[type=search]::-webkit-search-decoration {
-    -webkit-appearance: none
-}
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-    border: 0;
-    padding: 0
-}
-
-table {
-    width: 100%;
-    border-spacing: 0;
-    border-collapse: collapse
-}
-
-table,
-td,
-th {
-    border: 0
-}
-
-td,
-th {
-    padding: 0;
-    vertical-align: top
-}
-
-th {
-    font-weight: 700;
-    text-align: left
-}
-
-thead th {
-    white-space: nowrap
-}
-
-a {
-    text-decoration: none;
-    cursor: pointer;
-    color: #3296fa
-}
-
-a:active,
-a:hover {
-    outline: 0;
-    color: #3296fa
-}
-
-small {
-    font-size: 80%
-}
-
-body,
-html {
-    font-size: 12px!important;
-    color: #191f25!important;
-    background: #f6f6f6!important
-}
-
-.wrap {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    height: 100%
-}
-
-/* @font-face {
-    font-family: IconFont;
-    src: url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.eot");
-    src: url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.woff") format("woff"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.ttf") format("truetype"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.svg#IconFont") format("svg")
-}
-
-.iconfont {
-    font-family: IconFont!important;
-    font-size: 16px;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
-    -webkit-text-stroke-width: .2px;
-    -moz-osx-font-smoothing: grayscale
-} */
-
-@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";
-}
-
-.fd-nav {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 997;
-    width: 100%;
-    height: 60px;
-    font-size: 14px;
-    color: #fff;
-    background: #3296fa;
-    display: flex;
-    align-items: center
-}
-
-.fd-nav>* {
-    flex: 1;
-    width: 100%
-}
-
-.fd-nav .fd-nav-left {
-    display: -webkit-box;
-    display: flex;
-    align-items: center
-}
-
-.fd-nav .fd-nav-center {
-    flex: none;
-    width: 600px;
-    text-align: center
-}
-
-.fd-nav .fd-nav-right {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    text-align: right
-}
-
-.fd-nav .fd-nav-back {
-    display: inline-block;
-    width: 60px;
-    height: 60px;
-    font-size: 22px;
-    border-right: 1px solid #1583f2;
-    text-align: center;
-    cursor: pointer
-}
-
-.fd-nav .fd-nav-back:hover {
-    background: #5af
-}
-
-.fd-nav .fd-nav-back:active {
-    background: #1583f2
-}
-
-.fd-nav .fd-nav-back .anticon {
-    line-height: 60px
-}
-
-.fd-nav .fd-nav-title {
-    width: 0;
-    flex: 1;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    padding: 0 15px
-}
-
-.fd-nav a {
-    color: #fff;
-    margin-left: 12px
-}
-
-.fd-nav .button-publish {
-    min-width: 80px;
-    margin-left: 4px;
-    margin-right: 15px;
-    color: #3296fa;
-    border-color: #fff
-}
-
-.fd-nav .button-publish.ant-btn:focus,
-.fd-nav .button-publish.ant-btn:hover {
-    color: #3296fa;
-    border-color: #fff;
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .3)
-}
-
-.fd-nav .button-publish.ant-btn:active {
-    color: #3296fa;
-    background: #d6eaff;
-    box-shadow: none
-}
-
-.fd-nav .button-preview {
-    min-width: 80px;
-    margin-left: 16px;
-    margin-right: 4px;
-    color: #fff;
-    border-color: #fff;
-    background: transparent
-}
-
-.fd-nav .button-preview.ant-btn:focus,
-.fd-nav .button-preview.ant-btn:hover {
-    color: #fff;
-    border-color: #fff;
-    background: #59acfc
-}
-
-.fd-nav .button-preview.ant-btn:active {
-    color: #fff;
-    border-color: #fff;
-    background: #2186ef
-}
-
-.fd-nav-content {
-    position: fixed;
-    top: 60px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1;
-    overflow-x: hidden;
-    overflow-y: auto;
-    padding-bottom: 30px
-}
-
-.error-modal-desc {
-    font-size: 13px;
-    color: rgba(25, 31, 37, .56);
-    line-height: 22px;
-    margin-bottom: 14px
-}
-
-.error-modal-list {
-    height: 200px;
-    overflow-y: auto;
-    margin-right: -25px;
-    padding-right: 25px
-}
-
-.error-modal-item {
-    padding: 10px 20px;
-    line-height: 21px;
-    background: #f6f6f6;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-    border-radius: 4px
-}
-
-.error-modal-item-label {
-    flex: none;
-    font-size: 15px;
-    color: rgba(25, 31, 37, .56);
-    padding-right: 10px
-}
-
-.error-modal-item-content {
-    text-align: right;
-    flex: 1;
-    font-size: 13px;
-    color: #191f25
-}
-
-#body.blur {
-    -webkit-filter: blur(3px);
-    filter: blur(3px)
-}
-
-.zoom {
-    display: flex;
-    position: fixed;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    height: 40px;
-    width: 125px;
-    right: 40px;
-    margin-top: 30px;
-    z-index: 10
-}
-
-.zoom .zoom-in,
-.zoom .zoom-out {
-    width: 30px;
-    height: 30px;
-    background: #fff;
-    color: #c1c1cd;
-    cursor: pointer;
-    background-size: 100%;
-    background-repeat: no-repeat
-}
-
-.zoom .zoom-out {
-    background-image: url(https://gw.alicdn.com/tfs/TB1s0qhBHGYBuNjy0FoXXciBFXa-90-90.png)
-}
-
-.zoom .zoom-out.disabled {
-    opacity: .5
-}
-
-.zoom .zoom-in {
-    background-image: url(https://gw.alicdn.com/tfs/TB1UIgJBTtYBeNjy1XdXXXXyVXa-90-90.png)
-}
-
-.zoom .zoom-in.disabled {
-    opacity: .5
-}
-
-.auto-judge:hover .editable-title,
-.node-wrap-box:hover .editable-title {
-    border-bottom: 1px dashed #fff
-}
-
-.auto-judge:hover .editable-title.editing,
-.node-wrap-box:hover .editable-title.editing {
-    text-decoration: none;
-    border: 1px solid #d9d9d9
-}
-
-.auto-judge:hover .editable-title {
-    border-color: #15bc83
-}
-
-.editable-title {
-    line-height: 15px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    border-bottom: 1px dashed transparent
-}
-
-.editable-title:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 40px
-}
-
-.editable-title:hover {
-    border-bottom: 1px dashed #fff
-}
-
-.editable-title-input {
-    flex: none;
-    height: 18px;
-    padding-left: 4px;
-    text-indent: 0;
-    font-size: 12px;
-    line-height: 18px;
-    z-index: 1
-}
-
-.editable-title-input:hover {
-    text-decoration: none
-}
-
-.ant-btn {
-    position: relative
-}
-
-.node-wrap-box {
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    position: relative;
-    width: 220px;
-    min-height: 72px;
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-    background: #fff;
-    border-radius: 4px;
-    cursor: pointer
-}
-
-.node-wrap-box:after {
-    pointer-events: none;
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-    border-radius: 4px;
-    border: 1px solid transparent;
-    transition: all .1s cubic-bezier(.645, .045, .355, 1);
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1)
-}
-
-.node-wrap-box.active:after,
-.node-wrap-box:active:after,
-.node-wrap-box:hover:after {
-    border: 1px solid #3296fa;
-    box-shadow: 0 0 6px 0 rgba(50, 150, 250, .3)
-}
-
-.node-wrap-box.active .close,
-.node-wrap-box:active .close,
-.node-wrap-box:hover .close {
-    display: block
-}
-
-.node-wrap-box.error:after {
-    border: 1px solid #f25643;
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1)
-}
-
-.node-wrap-box .title {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding-left: 16px;
-    padding-right: 30px;
-    width: 100%;
-    height: 24px;
-    line-height: 24px;
-    font-size: 12px;
-    color: #fff;
-    text-align: left;
-    background: #576a95;
-    border-radius: 4px 4px 0 0
-}
-
-.node-wrap-box .title .iconfont {
-    font-size: 12px;
-    margin-right: 5px
-}
-
-.node-wrap-box .placeholder {
-    color: #bfbfbf
-}
-
-.node-wrap-box .close {
-    display: none;
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 20px;
-    height: 20px;
-    font-size: 14px;
-    color: #fff;
-    border-radius: 50%;
-    text-align: center;
-    line-height: 20px
-}
-
-.node-wrap-box .content {
-    position: relative;
-    font-size: 14px;
-    padding: 16px;
-    padding-right: 30px
-}
-
-.node-wrap-box .content .text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical
-}
-
-.node-wrap-box .content .arrow {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 20px;
-    height: 14px;
-    font-size: 14px;
-    color: #979797
-}
-
-.start-node.node-wrap-box .content .text {
-    display: block;
-    white-space: nowrap
-}
-
-.node-wrap-box:before {
-    content: "";
-    position: absolute;
-    top: -12px;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-    width: 0;
-    height: 4px;
-    border-style: solid;
-    border-width: 8px 6px 4px;
-    border-color: #cacaca transparent transparent;
-    background: #f5f5f7
-}
-
-.node-wrap-box.start-node:before {
-    content: none
-}
-
-.top-left-cover-line {
-    left: -1px
-}
-
-.top-left-cover-line,
-.top-right-cover-line {
-    position: absolute;
-    height: 8px;
-    width: 50%;
-    background-color: #f5f5f7;
-    top: -4px
-}
-
-.top-right-cover-line {
-    right: -1px
-}
-
-.bottom-left-cover-line {
-    left: -1px
-}
-
-.bottom-left-cover-line,
-.bottom-right-cover-line {
-    position: absolute;
-    height: 8px;
-    width: 50%;
-    background-color: #f5f5f7;
-    bottom: -4px
-}
-
-.bottom-right-cover-line {
-    right: -1px
-}
-
-.dingflow-design {
-    width: 100%;
-    background-color: #f5f5f7;
-    overflow: auto;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    top: 0
-}
-
-.dingflow-design .box-scale {
-    transform: scale(1);
-    display: inline-block;
-    position: relative;
-    width: 100%;
-    padding: 54.5px 0;
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    align-items: flex-start;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    min-width: -webkit-min-content;
-    min-width: -moz-min-content;
-    min-width: min-content;
-    background-color: #f5f5f7;
-    transform-origin: 50% 0px 0px;
-}
-
-.dingflow-design .node-wrap {
-    flex-direction: column;
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-box-flex: 1;
-    -ms-flex-positive: 1;
-    padding: 0 50px;
-    position: relative
-}
-
-.dingflow-design .branch-wrap,
-.dingflow-design .node-wrap {
-    display: inline-flex;
-    width: 100%
-}
-
-.dingflow-design .branch-box-wrap {
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    min-height: 270px;
-    width: 100%;
-    -ms-flex-negative: 0;
-    flex-shrink: 0
-}
-
-.dingflow-design .branch-box {
-    display: flex;
-    overflow: visible;
-    min-height: 180px;
-    height: auto;
-    border-bottom: 2px solid #ccc;
-    border-top: 2px solid #ccc;
-    position: relative;
-    margin-top: 15px
-}
-
-.dingflow-design .branch-box .col-box {
-    background: #f5f5f7
-}
-
-.dingflow-design .branch-box .col-box:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 0;
-    margin: auto;
-    width: 2px;
-    height: 100%;
-    background-color: #cacaca
-}
-
-.dingflow-design .add-branch {
-    border: none;
-    outline: none;
-    user-select: none;
-    justify-content: center;
-    font-size: 12px;
-    padding: 0 10px;
-    height: 30px;
-    line-height: 30px;
-    border-radius: 15px;
-    color: #3296fa;
-    background: #fff;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
-    position: absolute;
-    top: -16px;
-    left: 50%;
-    transform: translateX(-50%);
-    transform-origin: center center;
-    cursor: pointer;
-    z-index: 1;
-    display: inline-flex;
-    align-items: center;
-    -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
-    transition: all .3s cubic-bezier(.645, .045, .355, 1)
-}
-
-.dingflow-design .add-branch:hover {
-    transform: translateX(-50%) scale(1.1);
-    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .1)
-}
-
-.dingflow-design .add-branch:active {
-    transform: translateX(-50%);
-    box-shadow: none
-}
-
-.dingflow-design .col-box {
-    display: inline-flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    flex-direction: column;
-    -webkit-box-align: center;
-    align-items: center;
-    position: relative
-}
-
-.dingflow-design .condition-node {
-    min-height: 220px
-}
-
-.dingflow-design .condition-node,
-.dingflow-design .condition-node-box {
-    display: inline-flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    flex-direction: column;
-    -webkit-box-flex: 1
-}
-
-.dingflow-design .condition-node-box {
-    padding-top: 30px;
-    padding-right: 50px;
-    padding-left: 50px;
-    -webkit-box-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    align-items: center;
-    flex-grow: 1;
-    position: relative
-}
-
-.dingflow-design .condition-node-box:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-    width: 2px;
-    height: 100%;
-    background-color: #cacaca
-}
-
-.dingflow-design .auto-judge {
-    position: relative;
-    width: 220px;
-    min-height: 72px;
-    background: #fff;
-    border-radius: 4px;
-    padding: 14px 19px;
-    cursor: pointer
-}
-
-.dingflow-design .auto-judge:after {
-    pointer-events: none;
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-    border-radius: 4px;
-    border: 1px solid transparent;
-    transition: all .1s cubic-bezier(.645, .045, .355, 1);
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1)
-}
-
-.dingflow-design .auto-judge.active:after,
-.dingflow-design .auto-judge:active:after,
-.dingflow-design .auto-judge:hover:after {
-    border: 1px solid #3296fa;
-    box-shadow: 0 0 6px 0 rgba(50, 150, 250, .3)
-}
-
-
-
-.dingflow-design .auto-judge.error:after {
-    border: 1px solid #f25643;
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1)
-}
-
-/* .dingflow-design .auto-judge .title-wrapper {
-    position: relative;
-    font-size: 12px;
-    color: #15bc83;
-    text-align: left;
-    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;
-    padding-right: 10px;
-    padding-left: 10px;
-}
-
-.dingflow-design  .title-wrapper .editable-title {
-    max-width: 120px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis
-}
-
-.dingflow-design .title-wrapper .close {
-    display: none;
-    position: absolute;
-    right: 10px;
-    top: 2px;
-    width: 20px;
-    height: 20px;
-    font-size: 14px;
-    color:#fff;
-    border-radius: 50%;
-    text-align: center;
-    line-height: 20px;
-    z-index: 2
-}
-
-.dingflow-design .title-wrapper:hover .close {
-    display: block
-}
-/* .dingflow-design  .title-wrapper .close {
-    padding-right: 2px;
-} */
-
-/* .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;
-    white-space: nowrap;
-    text-overflow: ellipsis
-}
-
-.dingflow-design .auto-judge .title-wrapper .priority-title {
-    display: inline-block;
-    float: right;
-    margin-right: 10px;
-    color: rgba(25, 31, 37, .56)
-} */
-
-.dingflow-design .auto-judge .placeholder {
-    color: #bfbfbf
-}
-
-.dingflow-design .auto-judge .content {
-    font-size: 14px;
-    color: #191f25;
-    text-align: left;
-    margin-top: 6px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical
-}
-
-.dingflow-design .auto-judge .sort-left,
-.dingflow-design .auto-judge .sort-right {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    display: none;
-    z-index: 1
-}
-
-.dingflow-design .auto-judge .sort-left {
-    left: 0;
-    border-right: 1px solid #f6f6f6
-}
-
-.dingflow-design .auto-judge .sort-right {
-    right: 0;
-    border-left: 1px solid #f6f6f6
-}
-
-.dingflow-design .auto-judge:hover .sort-left,
-.dingflow-design .auto-judge:hover .sort-right {
-    display: flex;
-    align-items: center
-}
-
-.dingflow-design .auto-judge .sort-left:hover,
-.dingflow-design .auto-judge .sort-right:hover {
-    background: #efefef
-}
-
-.dingflow-design .end-node {
-    border-radius: 50%;
-    font-size: 14px;
-    color: rgba(25, 31, 37, .4);
-    text-align: left
-}
-
-.dingflow-design .end-node .end-node-circle {
-    width: 10px;
-    height: 10px;
-    margin: auto;
-    border-radius: 50%;
-    background: #dbdcdc
-}
-
-.dingflow-design .end-node .end-node-text {
-    margin-top: 5px;
-    text-align: center
-}
-
-.approval-setting {
-    border-radius: 2px;
-    margin: 20px 0;
-    position: relative;
-    background: #fff
-}
-
-.ant-btn {
-    position: relative
-}
-
-
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index d112cf5b..a913fdf0 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -146,9 +146,9 @@ onMounted(async () => {
     processNodeTree.value = {
       name: '开始',
       type: NodeType.START_EVENT_NODE,
-      id: 'StartEvent_1', // TODO @jason：这个我们要不要 StartEvent 哈？
+      id: 'StartEvent', 
       childNode: {
-        id: 'EndEvent_1',
+        id: 'EndEvent',
         name: '结束',
         type: NodeType.END_EVENT_NODE
       }
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 449e193e..6411237d 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { DictDataVO } from '@/api/system/dict/types'
+
 /**
  * 节点类型
  */
@@ -85,13 +86,17 @@ export enum CandidateStrategy {
    */
   ROLE = 10,
   /**
-   * 指定部门成员
+   * 部门成员
    */
   DEPT_MEMBER = 20,
   /**
    * 部门的负责人
    */
   DEPT_LEADER = 21,
+  /**
+   * 连续多级部门的负责人
+   */
+  MULTI_LEVEL_DEPT_LEADER = 23,
   /**
    * 指定岗位
    */
@@ -108,6 +113,14 @@ export enum CandidateStrategy {
    * 发起人自己
    */
   START_USER = 36,
+  /**
+   * 发起人部门负责人
+   */
+  START_USER_DEPT_LEADER = 37,
+  /**
+   * 发起人连续多级部门的负责人
+   */
+  START_USER_MULTI_LEVEL_DEPT_LEADER = 38,
   /**
    * 指定用户组
    */
@@ -280,6 +293,21 @@ NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人')
 NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人')
 NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
 
+// 候选人策略。暂时不从字典中取。 后续可能调整。控制显示顺序
+export const CANDIDATE_STRATEGY: DictDataVO[] = [
+  { label: '指定成员', value: CandidateStrategy.USER },
+  { label: '指定角色', value: CandidateStrategy.ROLE },
+  { label: '部门成员', value: CandidateStrategy.DEPT_MEMBER },
+  { label: '部门负责人', value: CandidateStrategy.DEPT_LEADER },
+  { label: '连续多级部门负责人', value: CandidateStrategy.MULTI_LEVEL_DEPT_LEADER },
+  { label: '发起人自选', value: CandidateStrategy.START_USER_SELECT },
+  { label: '发起人本人', value: CandidateStrategy.START_USER },
+  { label: '发起人部门负责人', value: CandidateStrategy.START_USER_DEPT_LEADER },
+  { label: '发起人连续部门负责人', value: CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER },
+  { label: '用户组', value: CandidateStrategy.USER_GROUP },
+  { label: '流程表达式', value: CandidateStrategy.EXPRESSION }
+]
+
 export const APPROVE_METHODS: DictDataVO[] = [
   { label: '随机挑选一人审批', value: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE },
   { label: '多人会签(按通过比例%)', value: ApproveMethodType.APPROVE_BY_RATIO },
@@ -355,3 +383,21 @@ export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
   { id: OpsButtonType.ADD_SIGN, displayName: '加签', enable: false },
   { id: OpsButtonType.RETURN, displayName: '回退', enable: false }
 ]
+
+export const MULTI_LEVEL_DEPT: DictDataVO = [
+  { label: '第1级部门', value: 1 },
+  { label: '第2级部门', value: 2 },
+  { label: '第3级部门', value: 3 },
+  { label: '第4级部门', value: 4 },
+  { label: '第5级部门', value: 5 },
+  { label: '第6级部门', value: 6 },
+  { label: '第7级部门', value: 7 },
+  { label: '第8级部门', value: 8 },
+  { label: '第9级部门', value: 9 },
+  { label: '第10级部门', value: 10 },
+  { label: '第11级部门', value: 11 },
+  { label: '第12级部门', value: 12 },
+  { label: '第13级部门', value: 13 },
+  { label: '第14级部门', value: 14 },
+  { label: '第15级部门', value: 15 }
+]
diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index e41c9b83..e9831d81 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -89,9 +89,16 @@ export function useFormFieldsPermission() {
 }
 
 export type UserTaskFormType = {
-  candidateParamArray: any[]
+  //candidateParamArray: any[]
   candidateStrategy: CandidateStrategy
   approveMethod: ApproveMethodType
+  roleIds?: number[] // 角色
+  deptIds?: number[] // 部门
+  deptLevel?: number // 部门层级
+  userIds?: number[] // 用户
+  userGroups?: number[] // 用户组
+  postIds?: number[] // 岗位
+  expression?: string // 流程表达式
   approveRatio?: number
   rejectHandlerType?: RejectHandlerType
   returnNodeId?: string
@@ -103,8 +110,15 @@ export type UserTaskFormType = {
 }
 
 export type CopyTaskFormType = {
-  candidateParamArray: any[]
+  // candidateParamArray: any[]
   candidateStrategy: CandidateStrategy
+  roleIds?: number[] // 角色
+  deptIds?: number[] // 部门
+  deptLevel?: number // 部门层级
+  userIds?: number[] // 用户
+  userGroups?: number[] // 用户组
+  postIds?: number[] // 岗位
+  expression?: string // 流程表达式
 }
 
 /**
@@ -120,7 +134,7 @@ export function useNodeForm(nodeType: NodeType) {
   const configForm = ref<UserTaskFormType | CopyTaskFormType>()
   if (nodeType === NodeType.USER_TASK_NODE) {
     configForm.value = {
-      candidateParamArray: [],
+      //candidateParamArray: [],
       candidateStrategy: CandidateStrategy.USER,
       approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
       approveRatio: 100,
@@ -134,7 +148,7 @@ export function useNodeForm(nodeType: NodeType) {
     }
   } else {
     configForm.value = {
-      candidateParamArray: [],
+      //candidateParamArray: [],
       candidateStrategy: CandidateStrategy.USER
     }
   }
@@ -143,10 +157,10 @@ export function useNodeForm(nodeType: NodeType) {
     let showText = ''
     // 指定成员
     if (configForm.value?.candidateStrategy === CandidateStrategy.USER) {
-      if (configForm.value.candidateParamArray?.length > 0) {
+      if (configForm.value?.userIds!.length > 0) {
         const candidateNames: string[] = []
         userOptions?.value.forEach((item) => {
-          if (configForm.value?.candidateParamArray.includes(item.id)) {
+          if (configForm.value?.userIds!.includes(item.id)) {
             candidateNames.push(item.nickname)
           }
         })
@@ -155,10 +169,10 @@ export function useNodeForm(nodeType: NodeType) {
     }
     // 指定角色
     if (configForm.value?.candidateStrategy === CandidateStrategy.ROLE) {
-      if (configForm.value.candidateParamArray?.length > 0) {
+      if (configForm.value.roleIds!.length > 0) {
         const candidateNames: string[] = []
         roleOptions?.value.forEach((item) => {
-          if (configForm.value?.candidateParamArray.includes(item.id)) {
+          if (configForm.value?.roleIds!.includes(item.id)) {
             candidateNames.push(item.name)
           }
         })
@@ -168,29 +182,32 @@ export function useNodeForm(nodeType: NodeType) {
     // 指定部门
     if (
       configForm.value?.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
-      configForm.value?.candidateStrategy === CandidateStrategy.DEPT_LEADER
+      configForm.value?.candidateStrategy === CandidateStrategy.DEPT_LEADER ||
+      configForm.value?.candidateStrategy === CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
     ) {
-      if (configForm.value?.candidateParamArray?.length > 0) {
+      if (configForm.value?.deptIds!.length > 0) {
         const candidateNames: string[] = []
         deptOptions?.value.forEach((item) => {
-          if (configForm.value?.candidateParamArray.includes(item.id)) {
+          if (configForm.value?.deptIds!.includes(item.id!)) {
             candidateNames.push(item.name)
           }
         })
         if (configForm.value.candidateStrategy === CandidateStrategy.DEPT_MEMBER) {
           showText = `部门成员：${candidateNames.join(',')}`
-        } else {
+        } else if (configForm.value.candidateStrategy === CandidateStrategy.DEPT_LEADER) {
           showText = `部门的负责人：${candidateNames.join(',')}`
+        } else {
+          showText = `多级部门的负责人：${candidateNames.join(',')}`
         }
       }
     }
 
     // 指定岗位
     if (configForm.value?.candidateStrategy === CandidateStrategy.POST) {
-      if (configForm.value.candidateParamArray?.length > 0) {
+      if (configForm.value.postIds!.length > 0) {
         const candidateNames: string[] = []
         postOptions?.value.forEach((item) => {
-          if (configForm.value?.candidateParamArray.includes(item.id)) {
+          if (configForm.value?.postIds!.includes(item.id!)) {
             candidateNames.push(item.name)
           }
         })
@@ -199,10 +216,10 @@ export function useNodeForm(nodeType: NodeType) {
     }
     // 指定用户组
     if (configForm.value?.candidateStrategy === CandidateStrategy.USER_GROUP) {
-      if (configForm.value?.candidateParamArray?.length > 0) {
+      if (configForm.value?.userGroups!.length > 0) {
         const candidateNames: string[] = []
         userGroupOptions?.value.forEach((item) => {
-          if (configForm.value?.candidateParamArray.includes(item.id)) {
+          if (configForm.value?.userGroups!.includes(item.id)) {
             candidateNames.push(item.name)
           }
         })
@@ -218,16 +235,116 @@ export function useNodeForm(nodeType: NodeType) {
     if (configForm.value?.candidateStrategy === CandidateStrategy.START_USER) {
       showText = `发起人自己`
     }
-
+    // 发起人的部门负责人
+    if (configForm.value?.candidateStrategy === CandidateStrategy.START_USER_DEPT_LEADER) {
+      showText = `发起人的部门负责人`
+    }
+    // 发起人的部门负责人
+    if (
+      configForm.value?.candidateStrategy === CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
+    ) {
+      showText = `发起人连续部门负责人`
+    }
     // 流程表达式
     if (configForm.value?.candidateStrategy === CandidateStrategy.EXPRESSION) {
-      if (configForm.value.candidateParamArray?.length > 0) {
-        showText = `流程表达式：${configForm.value.candidateParamArray[0]}`
-      }
+      showText = `流程表达式：${configForm.value.expression}`
     }
     return showText
   }
 
+  /**
+   *  处理候选人参数的赋值
+   */
+  const handleCandidateParam = () => {
+    let candidateParam: undefined | string = undefined
+    if (!configForm.value) {
+      return candidateParam
+    }
+    switch (configForm.value.candidateStrategy) {
+      case CandidateStrategy.USER:
+        candidateParam = configForm.value.userIds!.join(',')
+        break
+      case CandidateStrategy.ROLE:
+        candidateParam = configForm.value.roleIds!.join(',')
+        break
+      case CandidateStrategy.POST:
+        candidateParam = configForm.value.postIds!.join(',')
+        break
+      case CandidateStrategy.USER_GROUP:
+        candidateParam = configForm.value.userGroups!.join(',')
+        break
+      case CandidateStrategy.EXPRESSION:
+        candidateParam = configForm.value.expression!
+        break
+      case CandidateStrategy.DEPT_MEMBER:
+      case CandidateStrategy.DEPT_LEADER:
+        candidateParam = configForm.value.deptIds!.join(',')
+        break
+      // 发起人部门负责人
+      case CandidateStrategy.START_USER_DEPT_LEADER:
+      case CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER:
+        candidateParam = configForm.value.deptLevel + ''
+        break
+      // 指定连续多级部门的负责人
+      case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
+        // TODO 是否允许选多个部门
+        const deptIds = configForm.value.deptIds!.join(',')
+        candidateParam = deptIds.concat(',' + configForm.value.deptLevel + '')
+        break
+      }
+      default:
+        break
+    }
+    return candidateParam
+  }
+  /**
+   *  解析候选人参数
+   */
+  const parseCandidateParam = (
+    candidateStrategy: CandidateStrategy,
+    candidateParam: string | undefined
+  ) => {
+    if (!configForm.value || !candidateParam) {
+      return
+    }
+    switch (candidateStrategy) {
+      case CandidateStrategy.USER: {
+        configForm.value.userIds = candidateParam.split(',').map((item) => +item)
+        break
+      }
+      case CandidateStrategy.ROLE:
+        configForm.value.roleIds = candidateParam.split(',').map((item) => +item)
+        break
+      case CandidateStrategy.POST:
+        configForm.value.postIds = candidateParam.split(',').map((item) => +item)
+        break
+      case CandidateStrategy.USER_GROUP:
+        configForm.value.userGroups = candidateParam.split(',').map((item) => +item)
+        break
+      case CandidateStrategy.EXPRESSION:
+        configForm.value.expression = candidateParam
+        break
+      case CandidateStrategy.DEPT_MEMBER:
+      case CandidateStrategy.DEPT_LEADER:
+        configForm.value.deptIds = candidateParam.split(',').map((item) => +item)
+        break
+      // 发起人部门负责人
+      case CandidateStrategy.START_USER_DEPT_LEADER:
+      case CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER:
+        configForm.value.deptLevel = +candidateParam
+        break
+      // 指定连续多级部门的负责人
+      case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
+        // 暂时只能选一个部门
+        const paramArray = candidateParam.split(',')
+        configForm.value.deptIds = [+paramArray[0]]
+        configForm.value.deptLevel = +paramArray[1]
+        break
+      }
+      default:
+        break
+    }
+  }
   return {
     configForm,
     roleOptions,
@@ -235,6 +352,8 @@ export function useNodeForm(nodeType: NodeType) {
     userOptions,
     userGroupOptions,
     deptTreeOptions,
+    handleCandidateParam,
+    parseCandidateParam,
     getShowText
   }
 }
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index 807f08b5..aa1bb51b 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -46,14 +46,9 @@
             <el-form-item
               v-if="configForm.candidateStrategy == CandidateStrategy.ROLE"
               label="指定角色"
-              prop="candidateParamArray"
+              prop="roleIds"
             >
-              <el-select
-                v-model="configForm.candidateParamArray"
-                clearable
-                multiple
-                style="width: 100%"
-              >
+              <el-select v-model="configForm.roleIds" clearable multiple style="width: 100%">
                 <el-option
                   v-for="item in roleOptions"
                   :key="item.id"
@@ -68,12 +63,12 @@
                 configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER
               "
               label="指定部门"
-              prop="candidateParamArray"
+              prop="deptIds"
               span="24"
             >
               <el-tree-select
                 ref="treeRef"
-                v-model="configForm.candidateParamArray"
+                v-model="configForm.deptIds"
                 :data="deptTreeOptions"
                 :props="defaultProps"
                 empty-text="加载中，请稍后"
@@ -86,15 +81,10 @@
             <el-form-item
               v-if="configForm.candidateStrategy == CandidateStrategy.POST"
               label="指定岗位"
-              prop="candidateParamArray"
+              prop="postIds"
               span="24"
             >
-              <el-select
-                v-model="configForm.candidateParamArray"
-                clearable
-                multiple
-                style="width: 100%"
-              >
+              <el-select v-model="configForm.postIds" clearable multiple style="width: 100%">
                 <el-option
                   v-for="item in postOptions"
                   :key="item.id"
@@ -106,15 +96,10 @@
             <el-form-item
               v-if="configForm.candidateStrategy == CandidateStrategy.USER"
               label="指定用户"
-              prop="candidateParamArray"
+              prop="userIds"
               span="24"
             >
-              <el-select
-                v-model="configForm.candidateParamArray"
-                clearable
-                multiple
-                style="width: 100%"
-              >
+              <el-select v-model="configForm.userIds" clearable multiple style="width: 100%">
                 <el-option
                   v-for="item in userOptions"
                   :key="item.id"
@@ -126,14 +111,9 @@
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.USER_GROUP"
               label="指定用户组"
-              prop="candidateParamArray"
+              prop="userGroups"
             >
-              <el-select
-                v-model="configForm.candidateParamArray"
-                clearable
-                multiple
-                style="width: 100%"
-              >
+              <el-select v-model="configForm.userGroups" clearable multiple style="width: 100%">
                 <el-option
                   v-for="item in userGroupOptions"
                   :key="item.id"
@@ -146,11 +126,11 @@
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
               label="流程表达式"
-              prop="candidateParamArray"
+              prop="expression"
             >
               <el-input
                 type="textarea"
-                v-model="configForm.candidateParamArray[0]"
+                v-model="configForm.expression"
                 clearable
                 style="width: 100%"
               />
@@ -200,7 +180,7 @@
   </el-drawer>
 </template>
 <script setup lang="ts">
-import { SimpleFlowNode, CandidateStrategy, NodeType } from '../consts'
+import { SimpleFlowNode, CandidateStrategy, NodeType, CANDIDATE_STRATEGY } from '../consts'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import {
   useWatchNode,
@@ -235,7 +215,12 @@ const formRef = ref() // 表单 Ref
 // 表单校验规则
 const formRules = reactive({
   candidateStrategy: [{ required: true, message: '抄送人设置不能为空', trigger: 'change' }],
-  candidateParamArray: [{ required: true, message: '选项不能为空', trigger: 'blur' }]
+  userIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
+  roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
+  deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
+  userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }],
+  postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
+  expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }]
 })
 
 const {
@@ -245,12 +230,14 @@ const {
   userOptions,
   userGroupOptions,
   deptTreeOptions,
-  getShowText
+  getShowText,
+  handleCandidateParam,
+  parseCandidateParam
 } = useNodeForm(NodeType.COPY_TASK_NODE)
 const configForm = tempConfigForm as Ref<CopyTaskFormType>
 // 抄送人策略， 去掉发起人自选 和 发起人自己
 const copyUserStrategies = computed(() => {
-  return getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY).filter(
+  return CANDIDATE_STRATEGY.filter(
     (item) =>
       item.value !== CandidateStrategy.START_USER_SELECT &&
       item.value !== CandidateStrategy.START_USER
@@ -258,7 +245,12 @@ const copyUserStrategies = computed(() => {
 })
 // 改变抄送人设置策略
 const changeCandidateStrategy = () => {
-  configForm.value.candidateParamArray = []
+  configForm.value.userIds = []
+  configForm.value.deptIds = []
+  configForm.value.roleIds = []
+  configForm.value.postIds = []
+  configForm.value.userGroups = []
+  configForm.value.deptLevel = 1
 }
 // 保存配置
 const saveConfig = async () => {
@@ -269,7 +261,7 @@ const saveConfig = async () => {
   const showText = getShowText()
   if (!showText) return false
   currentNode.value.name = nodeName.value!
-  currentNode.value.candidateParam = configForm.value.candidateParamArray?.join(',')
+  handleCandidateParam()
   currentNode.value.candidateStrategy = configForm.value.candidateStrategy
   currentNode.value.showText = showText
   currentNode.value.fieldsPermission = fieldsPermissionConfig.value
@@ -281,14 +273,7 @@ const showCopyTaskNodeConfig = (node: SimpleFlowNode) => {
   nodeName.value = node.name
   // 抄送人设置
   configForm.value.candidateStrategy = node.candidateStrategy!
-  const strCandidateParam = node?.candidateParam
-  if (node.candidateStrategy === CandidateStrategy.EXPRESSION) {
-    configForm.value.candidateParamArray[0] = strCandidateParam
-  } else {
-    if (strCandidateParam) {
-      configForm.value.candidateParamArray = strCandidateParam.split(',').map((item) => +item)
-    }
-  }
+  parseCandidateParam(node.candidateStrategy!, node?.candidateParam)
   // 表单字段权限
   getNodeConfigFormFields(node.fieldsPermission)
 }
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 75af7ba7..9eae2359 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -34,7 +34,7 @@
                 @change="changeCandidateStrategy"
               >
                 <el-radio
-                  v-for="(dict, index) in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
+                  v-for="(dict, index) in CANDIDATE_STRATEGY"
                   :key="index"
                   :value="dict.value"
                   :label="dict.value"
@@ -47,14 +47,9 @@
             <el-form-item
               v-if="configForm.candidateStrategy == CandidateStrategy.ROLE"
               label="指定角色"
-              prop="candidateParamArray"
+              prop="roleIds"
             >
-              <el-select
-                v-model="configForm.candidateParamArray"
-                clearable
-                multiple
-                style="width: 100%"
-              >
+              <el-select v-model="configForm.roleIds" clearable multiple style="width: 100%">
                 <el-option
                   v-for="item in roleOptions"
                   :key="item.id"
@@ -66,15 +61,16 @@
             <el-form-item
               v-if="
                 configForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
-                configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER
+                configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
               "
               label="指定部门"
-              prop="candidateParamArray"
+              prop="deptIds"
               span="24"
             >
               <el-tree-select
                 ref="treeRef"
-                v-model="configForm.candidateParamArray"
+                v-model="configForm.deptIds"
                 :data="deptTreeOptions"
                 :props="defaultProps"
                 empty-text="加载中，请稍后"
@@ -85,17 +81,31 @@
               />
             </el-form-item>
             <el-form-item
-              v-if="configForm.candidateStrategy == CandidateStrategy.POST"
-              label="指定岗位"
-              prop="candidateParamArray"
+              v-if="
+                configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
+              "
+              :label="deptLevelLabel!"
+              prop="deptLevel"
               span="24"
             >
-              <el-select
-                v-model="configForm.candidateParamArray"
-                clearable
-                multiple
-                style="width: 100%"
-              >
+              <el-select v-model="configForm.deptLevel" clearable>
+                <el-option
+                  v-for="(item, index) in MULTI_LEVEL_DEPT"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy == CandidateStrategy.POST"
+              label="指定岗位"
+              prop="postIds"
+              span="24"
+            >
+              <el-select v-model="configForm.postIds" clearable multiple style="width: 100%">
                 <el-option
                   v-for="item in postOptions"
                   :key="item.id"
@@ -107,11 +117,11 @@
             <el-form-item
               v-if="configForm.candidateStrategy == CandidateStrategy.USER"
               label="指定用户"
-              prop="candidateParamArray"
+              prop="userIds"
               span="24"
             >
               <el-select
-                v-model="configForm.candidateParamArray"
+                v-model="configForm.userIds"
                 clearable
                 multiple
                 style="width: 100%"
@@ -128,14 +138,9 @@
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.USER_GROUP"
               label="指定用户组"
-              prop="candidateParamArray"
+              prop="userGroups"
             >
-              <el-select
-                v-model="configForm.candidateParamArray"
-                clearable
-                multiple
-                style="width: 100%"
-              >
+              <el-select v-model="configForm.userGroups" clearable multiple style="width: 100%">
                 <el-option
                   v-for="item in userGroupOptions"
                   :key="item.id"
@@ -147,11 +152,11 @@
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
               label="流程表达式"
-              prop="candidateParamArray"
+              prop="expression"
             >
               <el-input
                 type="textarea"
-                v-model="configForm.candidateParamArray[0]"
+                v-model="configForm.expression"
                 clearable
                 style="width: 100%"
               />
@@ -364,9 +369,11 @@ import {
   REJECT_HANDLER_TYPES,
   DEFAULT_BUTTON_SETTING,
   OPERATION_BUTTON_NAME,
-  ButtonSetting
+  ButtonSetting,
+  MULTI_LEVEL_DEPT,
+  CANDIDATE_STRATEGY
 } from '../consts'
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+
 import {
   useWatchNode,
   useNodeName,
@@ -390,6 +397,15 @@ const props = defineProps({
 const emits = defineEmits<{
   'find:returnTaskNodes': [nodeList: SimpleFlowNode[]]
 }>()
+const deptLevelLabel = computed(() => {
+  let label = '部门负责人来源'
+  if (configForm.value.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) {
+    label = label + '(指定部门向上)'
+  } else {
+    label = label + '(发起人部门向上)'
+  }
+  return label
+})
 // 监控节点的变化
 const currentNode = useWatchNode(props)
 // 抽屉配置
@@ -409,7 +425,12 @@ const formRef = ref() // 表单 Ref
 // 表单校验规则
 const formRules = reactive({
   candidateStrategy: [{ required: true, message: '审批人设置不能为空', trigger: 'change' }],
-  candidateParamArray: [{ required: true, message: '该选项不能为空', trigger: 'change' }],
+  userIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
+  roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
+  deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
+  userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }],
+  postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
+  expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }],
   approveMethod: [{ required: true, message: '多人审批方式不能为空', trigger: 'change' }],
   approveRatio: [{ required: true, message: '通过比例不能为空', trigger: 'blur' }],
   returnNodeId: [{ required: true, message: '驳回节点不能为空', trigger: 'change' }],
@@ -426,6 +447,8 @@ const {
   userOptions,
   userGroupOptions,
   deptTreeOptions,
+  handleCandidateParam,
+  parseCandidateParam,
   getShowText
 } = useNodeForm(NodeType.USER_TASK_NODE)
 const configForm = tempConfigForm as Ref<UserTaskFormType>
@@ -433,7 +456,12 @@ const configForm = tempConfigForm as Ref<UserTaskFormType>
 const notAllowedMultiApprovers = ref(false)
 // 改变审批人设置策略
 const changeCandidateStrategy = () => {
-  configForm.value.candidateParamArray = []
+  configForm.value.userIds = []
+  configForm.value.deptIds = []
+  configForm.value.roleIds = []
+  configForm.value.postIds = []
+  configForm.value.userGroups = []
+  configForm.value.deptLevel = 1
   configForm.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
   if (
     configForm.value.candidateStrategy === CandidateStrategy.START_USER ||
@@ -447,7 +475,8 @@ const changeCandidateStrategy = () => {
 // 改变审批候选人
 const changedCandidateUsers = () => {
   if (
-    configForm.value.candidateParamArray?.length <= 1 &&
+    configForm.value.userIds &&
+    configForm.value.userIds?.length <= 1 &&
     configForm.value.candidateStrategy === CandidateStrategy.USER
   ) {
     configForm.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
@@ -488,7 +517,8 @@ const saveConfig = async () => {
   if (!showText) return false
   currentNode.value.name = nodeName.value!
   currentNode.value.candidateStrategy = configForm.value.candidateStrategy
-  currentNode.value.candidateParam = configForm.value.candidateParamArray?.join(',')
+  // 处理 candidateParam 参数
+  currentNode.value.candidateParam = handleCandidateParam()
   // 设置审批方式
   currentNode.value.approveMethod = configForm.value.approveMethod
   if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
@@ -521,19 +551,9 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
   nodeName.value = node.name
   //1.1 审批人设置
   configForm.value.candidateStrategy = node.candidateStrategy!
-  const strCandidateParam = node?.candidateParam
-  if (node.candidateStrategy === CandidateStrategy.EXPRESSION) {
-    configForm.value.candidateParamArray[0] = strCandidateParam
-  } else {
-    if (strCandidateParam) {
-      configForm.value.candidateParamArray = strCandidateParam.split(',').map((item) => +item)
-    }
-  }
-  if (
-    (configForm.value.candidateParamArray?.length <= 1 &&
-      node.candidateStrategy === CandidateStrategy.USER) ||
-    node.candidateStrategy === CandidateStrategy.START_USER
-  ) {
+  // 解析候选人参数
+  parseCandidateParam(node.candidateStrategy!, node?.candidateParam)
+  if (configForm.value.deptIds && configForm.value.deptIds.length > 1) {
     notAllowedMultiApprovers.value = true
   } else {
     notAllowedMultiApprovers.value = false

From 8b3c294e5c9d59641c2789195de784339dde5bd1 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 17 Aug 2024 17:03:58 +0800
Subject: [PATCH 45/62] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=AE=A1=E6=89=B9=E4=BA=BA=E4=B8=BA=E7=A9=BA=E6=97=B6?=
 =?UTF-8?q?=EF=BC=8C=E6=A0=B9=E6=8D=AE=E9=85=8D=E7=BD=AE=E8=BF=9B=E8=A1=8C?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E9=80=9A=E8=BF=87=E3=80=81=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E6=8B=92=E7=BB=9D=E3=80=81=E6=8C=87=E5=AE=9A=E4=BA=BA=E5=AE=A1?=
 =?UTF-8?q?=E6=89=B9=E7=9A=84=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       | 15 +++--
 .../SimpleProcessDesignerV2/src/consts.ts     | 40 ++++++++++++-
 .../SimpleProcessDesignerV2/src/node.ts       |  6 +-
 .../src/nodes-config/UserTaskNodeConfig.vue   | 60 +++++++++++++++++--
 4 files changed, 108 insertions(+), 13 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index b5ba51bf..c330c261 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -43,13 +43,16 @@
 
 <script setup lang="ts">
 import {
-  SimpleFlowNode,
-  NodeType,
-  NODE_DEFAULT_NAME,
   ApproveMethodType,
-  RejectHandlerType
+  AssignEmptyHandlerType,
+  AssignStartUserHandlerType,
+  NODE_DEFAULT_NAME,
+  NodeType,
+  RejectHandlerType,
+  SimpleFlowNode
 } from './consts'
 import { generateUUID } from '@/utils'
+
 defineOptions({
   name: 'NodeHandler'
 })
@@ -86,6 +89,10 @@ const addNode = (type: number) => {
       timeoutHandler: {
         enable: false
       },
+      assignEmptyHandler: {
+        type: AssignEmptyHandlerType.APPROVE
+      },
+      assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
       childNode: props.childNode
     }
     emits('update:childNode', data)
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index b0858308..5fd82961 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -78,6 +78,8 @@ export interface SimpleFlowNode {
   timeoutHandler?: TimeoutHandler
   // 审批任务拒绝处理
   rejectHandler?: RejectHandler
+  // 审批人为空的处理
+  assignEmptyHandler?: AssignEmptyHandler
   // 审批节点的审批人与发起人相同时，对应的处理类型
   assignStartUserHandlerType?: number
 }
@@ -169,7 +171,7 @@ export type RejectHandler = {
  * 审批超时结构定义
  */
 export type TimeoutHandler = {
-  //是否开启超时处理
+  // 是否开启超时处理
   enable: boolean
   // 超时执行的动作
   type?: number
@@ -178,6 +180,17 @@ export type TimeoutHandler = {
   // 执行动作是自动提醒, 最大提醒次数
   maxRemindCount?: number
 }
+
+/**
+ * 审批人为空的结构定义
+ */
+export type AssignEmptyHandler = {
+  // 审批人为空的处理类型
+  type: AssignEmptyHandlerType
+  // 指定用户的编号数组
+  userIds?: number[]
+}
+
 // 审批拒绝类型枚举
 export enum RejectHandlerType {
   /**
@@ -204,6 +217,25 @@ export enum TimeoutHandlerType {
    */
   REJECT = 3
 }
+// 用户任务的审批人为空时，处理类型枚举
+export enum AssignEmptyHandlerType {
+  /**
+   * 自动通过
+   */
+  APPROVE = 1,
+  /**
+   * 自动拒绝
+   */
+  REJECT = 2,
+  /**
+   * 指定人员审批
+   */
+  ASSIGN_USER,
+  /**
+   * 转交给流程管理员
+   */
+  ASSIGN_ADMIN = 4
+}
 // 用户任务的审批人与发起人相同时，处理类型枚举
 export enum AssignStartUserHandlerType {
   /**
@@ -369,6 +401,12 @@ export const REJECT_HANDLER_TYPES: DictDataVO[] = [
   { label: '驳回到指定节点', value: RejectHandlerType.RETURN_USER_TASK }
   // { label: '结束任务', value: RejectHandlerType.FINISH_TASK }
 ]
+export const ASSIGN_EMPTY_HANDLER_TYPES: DictDataVO[] = [
+  { label: '自动通过', value: 1 },
+  { label: '自动拒绝', value: 2 },
+  { label: '指定成员审批', value: 3 },
+  { label: '转交给流程管理员', value: 4 }
+]
 export const ASSIGN_START_USER_HANDLER_TYPES: DictDataVO[] = [
   { label: '由发起人对自己审批', value: 1 },
   { label: '自动跳过', value: 2 },
diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index 33321307..2b0c7583 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -12,7 +12,7 @@ import {
   RejectHandlerType,
   NODE_DEFAULT_NAME,
   AssignStartUserHandlerType,
-  ASSIGN_START_USER_HANDLER_TYPES
+  AssignEmptyHandlerType
 } from './consts'
 export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlowNode> {
   const node = ref<SimpleFlowNode>(props.flowNode)
@@ -57,7 +57,7 @@ export function useFormFieldsPermission() {
     fieldsPermission: Array<Record<string, string>>,
     parentTitle: string = ''
   ) => {
-    const { type, field, title: tempTitle, children } = rule
+    const { /**type,*/ field, title: tempTitle, children } = rule
     if (field && tempTitle) {
       let title = tempTitle
       if (parentTitle) {
@@ -106,6 +106,8 @@ export type UserTaskFormType = {
   returnNodeId?: string
   timeoutHandlerEnable?: boolean
   timeoutHandlerType?: number
+  assignEmptyHandlerType?: AssignEmptyHandlerType
+  assignEmptyHandlerUserIds?: number[]
   assignStartUserHandlerType?: AssignStartUserHandlerType
   timeDuration?: number
   maxRemindCount?: number
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 55a0d517..1ee99fbb 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -196,6 +196,7 @@
                 </div>
               </el-radio-group>
             </el-form-item>
+
             <el-divider content-position="left">审批人拒绝时</el-divider>
             <el-form-item prop="rejectHandlerType">
               <el-radio-group v-model="configForm.rejectHandlerType">
@@ -206,7 +207,6 @@
                 </div>
               </el-radio-group>
             </el-form-item>
-
             <el-form-item
               v-if="configForm.rejectHandlerType == RejectHandlerType.RETURN_USER_TASK"
               label="驳回节点"
@@ -221,6 +221,7 @@
                 />
               </el-select>
             </el-form-item>
+
             <el-divider content-position="left">审批人超时未处理时</el-divider>
             <el-form-item label="启用开关" prop="timeoutHandlerEnable">
               <el-switch
@@ -281,6 +282,37 @@
               <el-input-number v-model="configForm.maxRemindCount" :min="1" :max="10" />
             </el-form-item>
 
+            <el-divider content-position="left">审批人为空时</el-divider>
+            <el-form-item prop="assignEmptyHandlerType">
+              <el-radio-group v-model="configForm.assignEmptyHandlerType">
+                <div class="flex-col">
+                  <div v-for="(item, index) in ASSIGN_EMPTY_HANDLER_TYPES" :key="index">
+                    <el-radio :key="item.value" :value="item.value" :label="item.label" />
+                  </div>
+                </div>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="configForm.assignEmptyHandlerType == AssignEmptyHandlerType.ASSIGN_USER"
+              label="指定用户"
+              prop="assignEmptyHandlerUserIds"
+              span="24"
+            >
+              <el-select
+                v-model="configForm.assignEmptyHandlerUserIds"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+
             <el-divider content-position="left">审批人与提交人为同一人时</el-divider>
             <el-form-item prop="assignStartUserHandlerType">
               <el-radio-group v-model="configForm.assignStartUserHandlerType">
@@ -384,7 +416,9 @@ import {
   MULTI_LEVEL_DEPT,
   CANDIDATE_STRATEGY,
   ASSIGN_START_USER_HANDLER_TYPES,
-  TimeoutHandlerType
+  TimeoutHandlerType,
+  ASSIGN_EMPTY_HANDLER_TYPES,
+  AssignEmptyHandlerType
 } from '../consts'
 
 import {
@@ -450,7 +484,10 @@ const formRules = reactive({
   timeoutHandlerEnable: [{ required: true }],
   timeoutHandlerType: [{ required: true }],
   timeDuration: [{ required: true, message: '超时时间不能为空', trigger: 'blur' }],
-  maxRemindCount: [{ required: true, message: '提醒次数不能为空', trigger: 'blur' }]
+  maxRemindCount: [{ required: true, message: '提醒次数不能为空', trigger: 'blur' }],
+  assignEmptyHandlerType: [{ required: true }],
+  assignEmptyHandlerUserIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
+  assignStartUserHandlerType: [{ required: true }]
 })
 
 const {
@@ -549,7 +586,15 @@ const saveConfig = async () => {
     timeDuration: isoTimeDuration.value,
     maxRemindCount: cTimeoutMaxRemindCount.value
   }
-  // 设置用户任务的审批人与发起人相同时
+  // 设置审批人为空时
+  currentNode.value.assignEmptyHandler = {
+    type: configForm.value.assignEmptyHandlerType!,
+    userIds:
+      configForm.value.assignEmptyHandlerType === AssignEmptyHandlerType.ASSIGN_USER
+        ? configForm.value.assignEmptyHandlerUserIds
+        : undefined
+  }
+  // 设置审批人与发起人相同时
   currentNode.value.assignStartUserHandlerType = configForm.value.assignStartUserHandlerType
   // 设置表单权限
   currentNode.value.fieldsPermission = fieldsPermissionConfig.value
@@ -573,7 +618,7 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
   } else {
     notAllowedMultiApprovers.value = false
   }
-  //1.2 设置审批方式
+  // 1.2 设置审批方式
   configForm.value.approveMethod = node.approveMethod!
   if (node.approveMethod == ApproveMethodType.APPROVE_BY_RATIO) {
     configForm.value.approveRatio = node.approveRatio!
@@ -595,7 +640,10 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
   }
   configForm.value.timeoutHandlerType = node.timeoutHandler?.type
   configForm.value.maxRemindCount = node.timeoutHandler?.maxRemindCount
-  // 1.5 设置用户任务的审批人与发起人相同时
+  // 1.5 设置审批人为空时
+  configForm.value.assignEmptyHandlerType = node.assignEmptyHandler?.type
+  configForm.value.assignEmptyHandlerUserIds = node.assignEmptyHandler?.userIds
+  // 1.6 设置用户任务的审批人与发起人相同时
   configForm.value.assignStartUserHandlerType = node.assignStartUserHandlerType
   // 2. 操作按钮设置
   buttonsSetting.value = cloneDeep(node.buttonsSetting) || DEFAULT_BUTTON_SETTING

From 92ee6d639d67226822c2dc7738f32cf25895193f Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 17 Aug 2024 18:48:05 +0800
Subject: [PATCH 46/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E8=BF=9E=E7=BB=AD?=
 =?UTF-8?q?=E5=A4=9A=E7=BA=A7=E9=83=A8=E9=97=A8=E8=B4=9F=E8=B4=A3=E4=BA=BA?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E9=80=89=E5=A4=9A=E4=B8=AA=E9=83=A8=E9=97=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SimpleProcessDesignerV2/src/node.ts    | 11 +++++++----
 .../src/nodes-config/UserTaskNodeConfig.vue           |  1 +
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index 2b0c7583..899ebe6c 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -293,7 +293,7 @@ export function useNodeForm(nodeType: NodeType) {
         break
       // 指定连续多级部门的负责人
       case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
-        // TODO 是否允许选多个部门
+        // 候选人参数格式 ,分隔。 被分隔的最后一个为部门层级
         const deptIds = configForm.value.deptIds!.join(',')
         candidateParam = deptIds.concat(',' + configForm.value.deptLevel + '')
         break
@@ -341,10 +341,13 @@ export function useNodeForm(nodeType: NodeType) {
         break
       // 指定连续多级部门的负责人
       case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
-        // 暂时只能选一个部门
+        // 候选人参数格式 ,分隔。 被分隔的最后一个为部门层级
         const paramArray = candidateParam.split(',')
-        configForm.value.deptIds = [+paramArray[0]]
-        configForm.value.deptLevel = +paramArray[1]
+        configForm.value.deptIds = []
+        for (let i = 0; i < paramArray.length - 1; i++) {
+          configForm.value.deptIds.push(+paramArray[i])
+        }
+        configForm.value.deptLevel = +paramArray[paramArray.length - 1]
         break
       }
       default:
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 1ee99fbb..11b5f47e 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -76,6 +76,7 @@
                 empty-text="加载中，请稍后"
                 multiple
                 node-key="id"
+                check-strictly
                 style="width: 100%"
                 show-checkbox
               />

From 9d9f7ad7f78f0e4df5d4ecfecda857c16975a27a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 17 Aug 2024 20:37:01 +0800
Subject: [PATCH 47/62] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E8=BF=9E?=
 =?UTF-8?q?=E7=BB=AD=E5=A4=9A=E7=BA=A7=E9=83=A8=E9=97=A8=E8=B4=9F=E8=B4=A3?=
 =?UTF-8?q?=E4=BA=BA=E7=9A=84=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/consts.ts     | 30 +++++++++----------
 .../src/nodes-config/UserTaskNodeConfig.vue   |  2 ++
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 5fd82961..2f84e263 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -460,19 +460,19 @@ export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
 ]
 
 export const MULTI_LEVEL_DEPT: DictDataVO = [
-  { label: '第1级部门', value: 1 },
-  { label: '第2级部门', value: 2 },
-  { label: '第3级部门', value: 3 },
-  { label: '第4级部门', value: 4 },
-  { label: '第5级部门', value: 5 },
-  { label: '第6级部门', value: 6 },
-  { label: '第7级部门', value: 7 },
-  { label: '第8级部门', value: 8 },
-  { label: '第9级部门', value: 9 },
-  { label: '第10级部门', value: 10 },
-  { label: '第11级部门', value: 11 },
-  { label: '第12级部门', value: 12 },
-  { label: '第13级部门', value: 13 },
-  { label: '第14级部门', value: 14 },
-  { label: '第15级部门', value: 15 }
+  { label: '第 1 级部门', value: 1 },
+  { label: '第 2 级部门', value: 2 },
+  { label: '第 3 级部门', value: 3 },
+  { label: '第 4 级部门', value: 4 },
+  { label: '第 5 级部门', value: 5 },
+  { label: '第 6 级部门', value: 6 },
+  { label: '第 7 级部门', value: 7 },
+  { label: '第 8 级部门', value: 8 },
+  { label: '第 9 级部门', value: 9 },
+  { label: '第 10 级部门', value: 10 },
+  { label: '第 11 级部门', value: 11 },
+  { label: '第 12 级部门', value: 12 },
+  { label: '第 13 级部门', value: 13 },
+  { label: '第 14 级部门', value: 14 },
+  { label: '第 15 级部门', value: 15 }
 ]
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 1ee99fbb..b696cc35 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -58,6 +58,7 @@
                 />
               </el-select>
             </el-form-item>
+            <!-- TODO @jason：指定部门的选择，不用联动父子。例如说：可能就是想某个比较高级别的部门审批。 -->
             <el-form-item
               v-if="
                 configForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
@@ -149,6 +150,7 @@
                 />
               </el-select>
             </el-form-item>
+            <!-- TODO @jason：后续要支持选择已经存好的表达式 -->
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
               label="流程表达式"

From eb7e9397f5567471b05ee893e729fbca846e91b6 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 17 Aug 2024 22:49:04 +0800
Subject: [PATCH 48/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/consts.ts     | 56 ++++++++++++-----
 .../SimpleProcessDesignerV2/src/node.ts       | 15 ++---
 .../src/nodes-config/CopyTaskNodeConfig.vue   |  3 +-
 .../src/nodes-config/UserTaskNodeConfig.vue   | 60 ++++++++++++++-----
 .../SimpleProcessDesignerV2/src/utils.ts      | 13 +++-
 .../bpm/processInstance/detail/index.vue      | 38 ++++++------
 6 files changed, 124 insertions(+), 61 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 2f84e263..c2322bce 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -62,6 +62,8 @@ export interface SimpleFlowNode {
   childNode?: SimpleFlowNode
   // 条件节点
   conditionNodes?: SimpleFlowNode[]
+  // 审批类型
+  approveType?: ApproveType
   // 候选人策略
   candidateStrategy?: number
   // 候选人参数
@@ -249,7 +251,23 @@ export enum AssignStartUserHandlerType {
   /**
    * 转交给部门负责人审批
    */
-  ASSIGN_DEPT_LEADER
+  ASSIGN_DEPT_LEADER = 3
+}
+
+// 用户任务的审批类型。 【参考飞书】
+export enum ApproveType {
+  /**
+   * 人工审批
+   */
+  USER = 1,
+  /**
+   * 自动通过
+   */
+  AUTO_APPROVE = 2,
+  /**
+   * 自动拒绝
+   */
+  AUTO_REJECT = 3
 }
 
 // 时间单位枚举
@@ -285,13 +303,13 @@ export enum ConditionConfigType {
  * 操作按钮权限结构定义
  */
 export type ButtonSetting = {
-  id: OpsButtonType
+  id: OperationButtonType
   displayName: string
   enable: boolean
 }
 
-// 操作按钮类型枚举 (用于审批节点) // TODO @jason：建议不缩写哈
-export enum OpsButtonType {
+// 操作按钮类型枚举 (用于审批节点)
+export enum OperationButtonType {
   /**
    * 通过
    */
@@ -371,6 +389,12 @@ export const CANDIDATE_STRATEGY: DictDataVO[] = [
   { label: '用户组', value: CandidateStrategy.USER_GROUP },
   { label: '流程表达式', value: CandidateStrategy.EXPRESSION }
 ]
+// 审批节点 的审批类型
+export const APPROVE_TYPE: DictDataVO[] = [
+  { label: '人工审批', value: ApproveType.USER },
+  { label: '自动通过', value: ApproveType.AUTO_APPROVE },
+  { label: '自动拒绝', value: ApproveType.AUTO_REJECT }
+]
 
 export const APPROVE_METHODS: DictDataVO[] = [
   { label: '随机挑选一人审批', value: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE },
@@ -442,21 +466,21 @@ export const COMPARISON_OPERATORS: DictDataVO = [
 ]
 // 审批操作按钮名称
 export const OPERATION_BUTTON_NAME = new Map<number, string>()
-OPERATION_BUTTON_NAME.set(OpsButtonType.APPROVE, '通过')
-OPERATION_BUTTON_NAME.set(OpsButtonType.REJECT, '拒绝')
-OPERATION_BUTTON_NAME.set(OpsButtonType.TRANSFER, '转办')
-OPERATION_BUTTON_NAME.set(OpsButtonType.DELEGATE, '委派')
-OPERATION_BUTTON_NAME.set(OpsButtonType.ADD_SIGN, '加签')
-OPERATION_BUTTON_NAME.set(OpsButtonType.RETURN, '回退')
+OPERATION_BUTTON_NAME.set(OperationButtonType.APPROVE, '通过')
+OPERATION_BUTTON_NAME.set(OperationButtonType.REJECT, '拒绝')
+OPERATION_BUTTON_NAME.set(OperationButtonType.TRANSFER, '转办')
+OPERATION_BUTTON_NAME.set(OperationButtonType.DELEGATE, '委派')
+OPERATION_BUTTON_NAME.set(OperationButtonType.ADD_SIGN, '加签')
+OPERATION_BUTTON_NAME.set(OperationButtonType.RETURN, '回退')
 
 // 默认的按钮权限设置
 export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
-  { id: OpsButtonType.APPROVE, displayName: '通过', enable: true },
-  { id: OpsButtonType.REJECT, displayName: '拒绝', enable: true },
-  { id: OpsButtonType.TRANSFER, displayName: '转办', enable: false },
-  { id: OpsButtonType.DELEGATE, displayName: '委派', enable: false },
-  { id: OpsButtonType.ADD_SIGN, displayName: '加签', enable: false },
-  { id: OpsButtonType.RETURN, displayName: '回退', enable: false }
+  { id: OperationButtonType.APPROVE, displayName: '通过', enable: true },
+  { id: OperationButtonType.REJECT, displayName: '拒绝', enable: true },
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: false },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: false },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: false },
+  { id: OperationButtonType.RETURN, displayName: '回退', enable: false }
 ]
 
 export const MULTI_LEVEL_DEPT: DictDataVO = [
diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index 899ebe6c..de20feb9 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -293,9 +293,9 @@ export function useNodeForm(nodeType: NodeType) {
         break
       // 指定连续多级部门的负责人
       case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
-        // 候选人参数格式 ,分隔。 被分隔的最后一个为部门层级
+        // 候选人参数格式: | 分隔 。左边为部门（多个部门用 , 分隔）。 右边为部门层级
         const deptIds = configForm.value.deptIds!.join(',')
-        candidateParam = deptIds.concat(',' + configForm.value.deptLevel + '')
+        candidateParam = deptIds.concat('|' + configForm.value.deptLevel + '')
         break
       }
       default:
@@ -341,13 +341,10 @@ export function useNodeForm(nodeType: NodeType) {
         break
       // 指定连续多级部门的负责人
       case CandidateStrategy.MULTI_LEVEL_DEPT_LEADER: {
-        // 候选人参数格式 ,分隔。 被分隔的最后一个为部门层级
-        const paramArray = candidateParam.split(',')
-        configForm.value.deptIds = []
-        for (let i = 0; i < paramArray.length - 1; i++) {
-          configForm.value.deptIds.push(+paramArray[i])
-        }
-        configForm.value.deptLevel = +paramArray[paramArray.length - 1]
+        // 候选人参数格式: | 分隔 。左边为部门（多个部门用 , 分隔）。 右边为部门层级
+        const paramArray = candidateParam.split('|')
+        configForm.value.deptIds = paramArray[0].split(',').map((item) => +item)
+        configForm.value.deptLevel = +paramArray[1]
         break
       }
       default:
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index aa1bb51b..689c113b 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -181,7 +181,6 @@
 </template>
 <script setup lang="ts">
 import { SimpleFlowNode, CandidateStrategy, NodeType, CANDIDATE_STRATEGY } from '../consts'
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import {
   useWatchNode,
   useDrawer,
@@ -261,7 +260,7 @@ const saveConfig = async () => {
   const showText = getShowText()
   if (!showText) return false
   currentNode.value.name = nodeName.value!
-  handleCandidateParam()
+  currentNode.value.candidateParam = handleCandidateParam()
   currentNode.value.candidateStrategy = configForm.value.candidateStrategy
   currentNode.value.showText = showText
   currentNode.value.fieldsPermission = fieldsPermissionConfig.value
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index eab99889..01ed75ce 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -24,7 +24,20 @@
         <div class="divide-line"></div>
       </div>
     </template>
-    <el-tabs type="border-card" v-model="activeTabName">
+    <div class="flex flex-items-center mb-3">
+      <span class="font-size-4 mr-3">审批类型 :</span>
+      <el-radio-group v-model="approveType">
+        <el-radio
+          v-for="(item, index) in APPROVE_TYPE"
+          :key="index"
+          :value="item.value"
+          :label="item.value"
+        >
+          {{ item.label }}
+        </el-radio>
+      </el-radio-group>
+    </div>
+    <el-tabs type="border-card" v-model="activeTabName" v-if="approveType === ApproveType.USER">
       <el-tab-pane label="审批人" name="user">
         <div>
           <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
@@ -58,7 +71,6 @@
                 />
               </el-select>
             </el-form-item>
-            <!-- TODO @jason：指定部门的选择，不用联动父子。例如说：可能就是想某个比较高级别的部门审批。 -->
             <el-form-item
               v-if="
                 configForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
@@ -77,7 +89,7 @@
                 empty-text="加载中，请稍后"
                 multiple
                 node-key="id"
-                check-strictly
+                :check-strictly="true"
                 style="width: 100%"
                 show-checkbox
               />
@@ -404,6 +416,8 @@
 <script setup lang="ts">
 import {
   SimpleFlowNode,
+  APPROVE_TYPE,
+  ApproveType,
   APPROVE_METHODS,
   CandidateStrategy,
   NodeType,
@@ -434,7 +448,7 @@ import {
 } from '../node'
 import { defaultProps } from '@/utils/tree'
 import { cloneDeep } from 'lodash-es'
-import { convertTimeUnit } from '../utils'
+import { convertTimeUnit, getApproveTypeText } from '../utils'
 defineOptions({
   name: 'UserTaskNodeConfig'
 })
@@ -469,7 +483,7 @@ const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFie
 // 操作按钮设置
 const { buttonsSetting, btnDisplayNameEdit, changeBtnDisplayName, btnDisplayNameBlurEvent } =
   useButtonsSetting()
-
+const approveType = ref(ApproveType.USER)
 // 审批人表单设置
 const formRef = ref() // 表单 Ref
 // 表单校验规则
@@ -563,12 +577,23 @@ const {
 // 保存配置
 const saveConfig = async () => {
   activeTabName.value = 'user'
+  // 设置审批节点名称
+  currentNode.value.name = nodeName.value!
+  // 设置审批类型
+  currentNode.value.approveType = approveType.value
+  // 如果不是人工审批。返回
+  if (approveType.value !== ApproveType.USER) {
+    currentNode.value.showText = getApproveTypeText(approveType.value)
+    settingVisible.value = false
+    return true
+  }
+
   if (!formRef) return false
   const valid = await formRef.value.validate()
   if (!valid) return false
   const showText = getShowText()
   if (!showText) return false
-  currentNode.value.name = nodeName.value!
+
   currentNode.value.candidateStrategy = configForm.value.candidateStrategy
   // 处理 candidateParam 参数
   currentNode.value.candidateParam = handleCandidateParam()
@@ -612,7 +637,14 @@ const saveConfig = async () => {
 // 显示审批节点配置， 由父组件传过来
 const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
   nodeName.value = node.name
-  //1.1 审批人设置
+  // 1 审批类型
+  approveType.value = node.approveType ? node.approveType : ApproveType.USER
+  // 如果审批类型不是人工审批返回
+  if (approveType.value !== ApproveType.USER) {
+    return
+  }
+
+  //2.1 审批人设置
   configForm.value.candidateStrategy = node.candidateStrategy!
   // 解析候选人参数
   parseCandidateParam(node.candidateStrategy!, node?.candidateParam)
@@ -621,18 +653,18 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
   } else {
     notAllowedMultiApprovers.value = false
   }
-  // 1.2 设置审批方式
+  // 2.2 设置审批方式
   configForm.value.approveMethod = node.approveMethod!
   if (node.approveMethod == ApproveMethodType.APPROVE_BY_RATIO) {
     configForm.value.approveRatio = node.approveRatio!
   }
-  // 1.3 设置审批拒绝处理
+  // 2.3 设置审批拒绝处理
   configForm.value.rejectHandlerType = node.rejectHandler!.type
   configForm.value.returnNodeId = node.rejectHandler?.returnNodeId
   const matchNodeList = []
   emits('find:returnTaskNodes', matchNodeList)
   returnTaskList.value = matchNodeList
-  // 1.4 设置审批超时处理
+  // 2.4 设置审批超时处理
   configForm.value.timeoutHandlerEnable = node.timeoutHandler!.enable
   if (node.timeoutHandler?.enable && node.timeoutHandler?.timeDuration) {
     const strTimeDuration = node.timeoutHandler.timeDuration
@@ -643,14 +675,14 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
   }
   configForm.value.timeoutHandlerType = node.timeoutHandler?.type
   configForm.value.maxRemindCount = node.timeoutHandler?.maxRemindCount
-  // 1.5 设置审批人为空时
+  // 2.5 设置审批人为空时
   configForm.value.assignEmptyHandlerType = node.assignEmptyHandler?.type
   configForm.value.assignEmptyHandlerUserIds = node.assignEmptyHandler?.userIds
-  // 1.6 设置用户任务的审批人与发起人相同时
+  // 2.6 设置用户任务的审批人与发起人相同时
   configForm.value.assignStartUserHandlerType = node.assignStartUserHandlerType
-  // 2. 操作按钮设置
+  // 3. 操作按钮设置
   buttonsSetting.value = cloneDeep(node.buttonsSetting) || DEFAULT_BUTTON_SETTING
-  // 3. 表单字段权限配置
+  // 4. 表单字段权限配置
   getNodeConfigFormFields(node.fieldsPermission)
 }
 
diff --git a/src/components/SimpleProcessDesignerV2/src/utils.ts b/src/components/SimpleProcessDesignerV2/src/utils.ts
index 8ed7b307..e71f74dc 100644
--- a/src/components/SimpleProcessDesignerV2/src/utils.ts
+++ b/src/components/SimpleProcessDesignerV2/src/utils.ts
@@ -1,4 +1,4 @@
-import { TimeUnitType } from './consts'
+import { TimeUnitType, ApproveType, APPROVE_TYPE } from './consts'
 
 // 获取条件节点默认的名称
 export const getDefaultConditionNodeName = (index: number, defaultFlow: boolean): string => {
@@ -20,3 +20,14 @@ export const convertTimeUnit = (strTimeUnit: string) => {
   }
   return TimeUnitType.HOUR
 }
+
+export const getApproveTypeText = (approveType: ApproveType): string => {
+  let approveTypeText = ''
+  APPROVE_TYPE.forEach((item) => {
+    if (item.value === approveType) {
+      approveTypeText = item.label
+      return
+    }
+  })
+  return approveTypeText
+}
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 332499ef..96ac4889 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -59,69 +59,69 @@
           <!-- TODO @jason：建议搞个 if 来判断，替代现有的 !item.buttonsSetting || item.buttonsSetting[OpsButtonType.APPROVE]?.enable -->
           <el-button
             type="success"
-            v-if="!item.buttonsSetting || item.buttonsSetting[OpsButtonType.APPROVE]?.enable"
+            v-if="!item.buttonsSetting || item.buttonsSetting[OperationButtonType.APPROVE]?.enable"
             @click="handleAudit(item, true)"
           >
             <Icon icon="ep:select" />
             <!-- TODO @jason：这个也是类似哈，搞个方法来生成名字 -->
             {{
-              item.buttonsSetting?.[OpsButtonType.APPROVE]?.displayName ||
-              OPERATION_BUTTON_NAME.get(OpsButtonType.APPROVE)
+              item.buttonsSetting?.[OperationButtonType.APPROVE]?.displayName ||
+              OPERATION_BUTTON_NAME.get(OperationButtonType.APPROVE)
             }}
           </el-button>
           <el-button
-            v-if="!item.buttonsSetting || item.buttonsSetting[OpsButtonType.REJECT]?.enable"
+            v-if="!item.buttonsSetting || item.buttonsSetting[OperationButtonType.REJECT]?.enable"
             type="danger"
             @click="handleAudit(item, false)"
           >
             <Icon icon="ep:close" />
             {{
-              item.buttonsSetting?.[OpsButtonType.REJECT].displayName ||
-              OPERATION_BUTTON_NAME.get(OpsButtonType.REJECT)
+              item.buttonsSetting?.[OperationButtonType.REJECT].displayName ||
+              OPERATION_BUTTON_NAME.get(OperationButtonType.REJECT)
             }}
           </el-button>
           <el-button
-            v-if="!item.buttonsSetting || item.buttonsSetting[OpsButtonType.TRANSFER]?.enable"
+            v-if="!item.buttonsSetting || item.buttonsSetting[OperationButtonType.TRANSFER]?.enable"
             type="primary"
             @click="openTaskUpdateAssigneeForm(item.id)"
           >
             <Icon icon="ep:edit" />
             {{
-              item.buttonsSetting?.[OpsButtonType.TRANSFER]?.displayName ||
-              OPERATION_BUTTON_NAME.get(OpsButtonType.TRANSFER)
+              item.buttonsSetting?.[OperationButtonType.TRANSFER]?.displayName ||
+              OPERATION_BUTTON_NAME.get(OperationButtonType.TRANSFER)
             }}
           </el-button>
           <el-button
-            v-if="!item.buttonsSetting || item.buttonsSetting[OpsButtonType.DELEGATE]?.enable"
+            v-if="!item.buttonsSetting || item.buttonsSetting[OperationButtonType.DELEGATE]?.enable"
             type="primary"
             @click="handleDelegate(item)"
           >
             <Icon icon="ep:position" />
             {{
-              item.buttonsSetting?.[OpsButtonType.DELEGATE]?.displayName ||
-              OPERATION_BUTTON_NAME.get(OpsButtonType.DELEGATE)
+              item.buttonsSetting?.[OperationButtonType.DELEGATE]?.displayName ||
+              OPERATION_BUTTON_NAME.get(OperationButtonType.DELEGATE)
             }}
           </el-button>
           <el-button
-            v-if="!item.buttonsSetting || item.buttonsSetting[OpsButtonType.ADD_SIGN]?.enable"
+            v-if="!item.buttonsSetting || item.buttonsSetting[OperationButtonType.ADD_SIGN]?.enable"
             type="primary"
             @click="handleSign(item)"
           >
             <Icon icon="ep:plus" />
             {{
-              item.buttonsSetting?.[OpsButtonType.ADD_SIGN]?.displayName ||
-              OPERATION_BUTTON_NAME.get(OpsButtonType.ADD_SIGN)
+              item.buttonsSetting?.[OperationButtonType.ADD_SIGN]?.displayName ||
+              OPERATION_BUTTON_NAME.get(OperationButtonType.ADD_SIGN)
             }}
           </el-button>
           <el-button
-            v-if="!item.buttonsSetting || item.buttonsSetting[OpsButtonType.RETURN]?.enable"
+            v-if="!item.buttonsSetting || item.buttonsSetting[OperationButtonType.RETURN]?.enable"
             type="warning"
             @click="handleBack(item)"
           >
             <Icon icon="ep:back" />
             {{
-              item.buttonsSetting?.[OpsButtonType.RETURN]?.displayName ||
-              OPERATION_BUTTON_NAME.get(OpsButtonType.RETURN)
+              item.buttonsSetting?.[OperationButtonType.RETURN]?.displayName ||
+              OPERATION_BUTTON_NAME.get(OperationButtonType.RETURN)
             }}
           </el-button>
         </div>
@@ -192,7 +192,7 @@ import { registerComponent } from '@/utils/routerHelper'
 import { isEmpty } from '@/utils/is'
 import * as UserApi from '@/api/system/user'
 import {
-  OpsButtonType,
+  OperationButtonType,
   OPERATION_BUTTON_NAME
 } from '@/components/SimpleProcessDesignerV2/src/consts'
 

From eb79ee1b77353185c1dd9e429542dba6a9fee71b Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 21 Aug 2024 21:00:38 +0800
Subject: [PATCH 49/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8-=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=8F=91=E8=B5=B7=E4=BA=BA=E8=8A=82=E7=82=B9=EF=BC=8C=E5=8E=BB?=
 =?UTF-8?q?=E6=8E=89=E5=BC=80=E5=A7=8B=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |  12 +-
 .../src/ProcessNodeTree.vue                   |  18 ++-
 .../src/SimpleProcessDesigner.vue             |  15 +-
 .../SimpleProcessDesignerV2/src/consts.ts     |  82 +++++++----
 .../SimpleProcessDesignerV2/src/node.ts       |  11 +-
 .../src/nodes-config/CopyTaskNodeConfig.vue   |  34 ++++-
 .../src/nodes-config/StartUserNodeConfig.vue  | 136 ++++++++++++++++++
 .../src/nodes-config/UserTaskNodeConfig.vue   |  30 +++-
 .../src/nodes/StartEventNode.vue              |  43 ------
 .../src/nodes/StartUserNode.vue               |  79 ++++++++++
 10 files changed, 355 insertions(+), 105 deletions(-)
 create mode 100644 src/components/SimpleProcessDesignerV2/src/nodes-config/StartUserNodeConfig.vue
 delete mode 100644 src/components/SimpleProcessDesignerV2/src/nodes/StartEventNode.vue
 create mode 100644 src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index c330c261..dd0f001b 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -20,13 +20,13 @@
             </div>
             <div class="handler-item-text">抄送</div>
           </div>
-          <div class="handler-item" @click="addNode(NodeType.EXCLUSIVE_NODE)">
+          <div class="handler-item" @click="addNode(NodeType.CONDITION_BRANCH_NODE)">
             <div class="handler-item-icon condition">
               <span class="iconfont icon-size icon-exclusive"></span>
             </div>
             <div class="handler-item-text">条件分支</div>
           </div>
-          <div class="handler-item" @click="addNode(NodeType.PARALLEL_NODE_FORK)">
+          <div class="handler-item" @click="addNode(NodeType.PARALLEL_BRANCH_NODE)">
             <div class="handler-item-icon condition">
               <span class="iconfont icon-size icon-parallel"></span>
             </div>
@@ -107,10 +107,10 @@ const addNode = (type: number) => {
     }
     emits('update:childNode', data)
   }
-  if (type === NodeType.EXCLUSIVE_NODE) {
+  if (type === NodeType.CONDITION_BRANCH_NODE) {
     const data: SimpleFlowNode = {
       name: '条件分支',
-      type: NodeType.EXCLUSIVE_NODE,
+      type: NodeType.CONDITION_BRANCH_NODE,
       id: 'GateWay_' + generateUUID(),
       childNode: props.childNode,
       conditionNodes: [
@@ -140,10 +140,10 @@ const addNode = (type: number) => {
     }
     emits('update:childNode', data)
   }
-  if (type === NodeType.PARALLEL_NODE_FORK) {
+  if (type === NodeType.PARALLEL_BRANCH_NODE) {
     const data: SimpleFlowNode = {
       name: '并行分支',
-      type: NodeType.PARALLEL_NODE_FORK,
+      type: NodeType.PARALLEL_BRANCH_NODE,
       id: 'GateWay_' + generateUUID(),
       childNode: props.childNode,
       conditionNodes: [
diff --git a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
index 440e574a..be2bc955 100644
--- a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
+++ b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@@ -1,7 +1,7 @@
 <template>
-  <!-- 开始节点 -->
-  <StartEventNode
-    v-if="currentNode && currentNode.type === NodeType.START_EVENT_NODE"
+  <!-- 发起人节点 -->
+  <StartUserNode
+    v-if="currentNode && currentNode.type === NodeType.START_USER_NODE"
     :flow-node="currentNode"
   />
   <!-- 审批节点 -->
@@ -19,14 +19,14 @@
   />
   <!-- 条件节点 -->
   <ExclusiveNode
-    v-if="currentNode && currentNode.type === NodeType.EXCLUSIVE_NODE"
+    v-if="currentNode && currentNode.type === NodeType.CONDITION_BRANCH_NODE"
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
     @find:parent-node="findFromParentNode"
   />
   <!-- 并行节点 -->
   <ParallelNode
-    v-if="currentNode && currentNode.type === NodeType.PARALLEL_NODE_FORK"
+    v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
     @find:parent-node="findFromParentNode"
@@ -43,7 +43,7 @@
   <EndEventNode v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE" />
 </template>
 <script setup lang="ts">
-import StartEventNode from './nodes/StartEventNode.vue'
+import StartUserNode from './nodes/StartUserNode.vue'
 import EndEventNode from './nodes/EndEventNode.vue'
 import UserTaskNode from './nodes/UserTaskNode.vue'
 import CopyTaskNode from './nodes/CopyTaskNode.vue'
@@ -90,7 +90,11 @@ const recursiveFindParentNode = (
   findNode: SimpleFlowNode,
   nodeType: number
 ) => {
-  if (!findNode || findNode.type === NodeType.START_EVENT_NODE) {
+  if (!findNode) {
+    return
+  }
+  if (findNode.type === NodeType.START_USER_NODE) {
+    nodeList.push(findNode)
     return
   }
 
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index a913fdf0..7e9b3a3b 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import ProcessNodeTree from './ProcessNodeTree.vue'
 import { updateBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
-import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from './consts'
+import { SimpleFlowNode, NodeType, NodeId, NODE_DEFAULT_TEXT } from './consts'
 
 defineOptions({
   name: 'SimpleProcessDesigner'
@@ -83,7 +83,7 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
     if (type == NodeType.END_EVENT_NODE) {
       return
     }
-    if (type == NodeType.START_EVENT_NODE) {
+    if (type == NodeType.START_USER_NODE) {
       validateNode(node.childNode, errorNodes)
     }
 
@@ -106,7 +106,7 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
       validateNode(node.childNode, errorNodes)
     }
 
-    if (type == NodeType.EXCLUSIVE_NODE) {
+    if (type == NodeType.CONDITION_BRANCH_NODE) {
       conditionNodes?.forEach((item) => {
         validateNode(item, errorNodes)
       })
@@ -138,17 +138,16 @@ const zoomIn = () => {
 
 onMounted(async () => {
   const result = await getBpmSimpleModel(props.modelId)
-  console.log('the result is :', result)
   if (result) {
     processNodeTree.value = result
   } else {
     // 初始值
     processNodeTree.value = {
-      name: '开始',
-      type: NodeType.START_EVENT_NODE,
-      id: 'StartEvent', 
+      name: '发起人',
+      type: NodeType.START_USER_NODE,
+      id: NodeId.START_USER_NODE_ID,
       childNode: {
-        id: 'EndEvent',
+        id: NodeId.END_EVENT_NODE_ID,
         name: '结束',
         type: NodeType.END_EVENT_NODE
       }
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index c2322bce..ca8e5577 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -5,50 +5,55 @@ import { DictDataVO } from '@/api/system/dict/types'
  * 节点类型
  */
 export enum NodeType {
-  /**
-   * 发起人节点
-   */
-  START_EVENT_NODE = 0,
   /**
    * 结束节点
    */
-  END_EVENT_NODE = -2,
-
+  END_EVENT_NODE = 1,
+  /**
+   * 发起人节点
+   */
+  START_USER_NODE = 10,
   /**
    * 审批人节点
    */
-  USER_TASK_NODE = 1,
+  USER_TASK_NODE = 11,
 
   /**
    * 抄送人节点
    */
-  COPY_TASK_NODE = 2,
+  COPY_TASK_NODE = 12,
 
   /**
    * 条件节点
    */
-  CONDITION_NODE = 3,
+  CONDITION_NODE = 50,
   /**
-   * 条件分支节点
+   * 条件分支节点 (对应排他网关)
    */
-  EXCLUSIVE_NODE = 4,
+  CONDITION_BRANCH_NODE = 51,
   /**
-   * 并行分支分叉节点
+   * 并行分支节点 (对应并行网关)
    */
-  PARALLEL_NODE_FORK = 5,
+  PARALLEL_BRANCH_NODE = 52,
+
   /**
-   * 并行分支聚合
+   * 包容分支节点 (对应包容网关)
    */
-  PARALLEL_NODE_JOIN = 6,
-  /**
-   * 包容分支分叉节点
-   */
-  INCLUSIVE_NODE_FORK = 7,
-  /**
-   * 包容分支聚合节点
-   */
-  INCLUSIVE_NODE_JOIN = 8
+  INCLUSIVE_BRANCH_NODE = 53
 }
+
+export enum NodeId {
+  /**
+   * 发起人节点 Id
+   */
+  START_USER_NODE_ID = 'StartUserNode',
+
+  /**
+   * 发起人节点 Id
+   */
+  END_EVENT_NODE_ID = 'EndEvent'
+}
+
 /**
  *  节点结构定义
  */
@@ -298,7 +303,23 @@ export enum ConditionConfigType {
    */
   RULE = 2
 }
-
+/**
+ * 表单权限的枚举
+ */
+export enum FieldPermissionType {
+  /**
+   * 只读
+   */
+  READ = '1',
+  /**
+   * 编辑
+   */
+  WRITE = '2',
+  /**
+   * 隐藏
+   */
+  NONE = '3'
+}
 /**
  * 操作按钮权限结构定义
  */
@@ -335,6 +356,7 @@ export enum OperationButtonType {
    */
   RETURN = 6
 }
+
 /**
  * 条件规则结构定义
  */
@@ -369,11 +391,13 @@ export const NODE_DEFAULT_TEXT = new Map<number, string>()
 NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置审批人')
 NODE_DEFAULT_TEXT.set(NodeType.COPY_TASK_NODE, '请配置抄送人')
 NODE_DEFAULT_TEXT.set(NodeType.CONDITION_NODE, '请设置条件')
+NODE_DEFAULT_TEXT.set(NodeType.START_USER_NODE, '请设置发起人')
 
 export const NODE_DEFAULT_NAME = new Map<number, string>()
 NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人')
 NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人')
 NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
+NODE_DEFAULT_NAME.set(NodeType.START_USER_NODE, '发起人')
 
 // 候选人策略。暂时不从字典中取。 后续可能调整。控制显示顺序
 export const CANDIDATE_STRATEGY: DictDataVO[] = [
@@ -483,6 +507,16 @@ export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
   { id: OperationButtonType.RETURN, displayName: '回退', enable: false }
 ]
 
+// 发起人的按钮权限。暂时定死，不可以编辑
+export const START_USER_BUTTON_SETTING: ButtonSetting[] = [
+  { id: OperationButtonType.APPROVE, displayName: '提交', enable: true },
+  { id: OperationButtonType.REJECT, displayName: '拒绝', enable: false },
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: false },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: false },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: false },
+  { id: OperationButtonType.RETURN, displayName: '回退', enable: false }
+]
+
 export const MULTI_LEVEL_DEPT: DictDataVO = [
   { label: '第 1 级部门', value: 1 },
   { label: '第 2 级部门', value: 2 },
diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index de20feb9..d0fb0866 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -12,7 +12,8 @@ import {
   RejectHandlerType,
   NODE_DEFAULT_NAME,
   AssignStartUserHandlerType,
-  AssignEmptyHandlerType
+  AssignEmptyHandlerType,
+  FieldPermissionType
 } from './consts'
 export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlowNode> {
   const node = ref<SimpleFlowNode>(props.flowNode)
@@ -26,9 +27,9 @@ export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlo
 }
 
 /**
- * @description 表单数据权限配置，用于审批节点、抄送节点
+ * @description 表单数据权限配置，用于发起人节点 、审批节点、抄送节点
  */
-export function useFormFieldsPermission() {
+export function useFormFieldsPermission(defaultPermission: FieldPermissionType) {
   // 字段权限配置. 需要有 field, title,  permissioin 属性
   const fieldsPermissionConfig = ref<Array<Record<string, string>>>([])
 
@@ -66,7 +67,7 @@ export function useFormFieldsPermission() {
       fieldsPermission.push({
         field,
         title,
-        permission: '1' // 只读
+        permission: defaultPermission
       })
       // TODO 子表单 需要处理子表单字段
       // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
@@ -139,7 +140,6 @@ export function useNodeForm(nodeType: NodeType) {
   const configForm = ref<UserTaskFormType | CopyTaskFormType>()
   if (nodeType === NodeType.USER_TASK_NODE) {
     configForm.value = {
-      //candidateParamArray: [],
       candidateStrategy: CandidateStrategy.USER,
       approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
       approveRatio: 100,
@@ -154,7 +154,6 @@ export function useNodeForm(nodeType: NodeType) {
     }
   } else {
     configForm.value = {
-      //candidateParamArray: [],
       candidateStrategy: CandidateStrategy.USER
     }
   }
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index 689c113b..af2d4989 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -157,13 +157,29 @@
             <div class="field-setting-item-label"> {{ item.title }} </div>
             <el-radio-group class="field-setting-item-group" v-model="item.permission">
               <div class="item-radio-wrap">
-                <el-radio value="1" size="large" label="1"><span></span></el-radio>
+                <el-radio
+                  :value="FieldPermissionType.READ"
+                  size="large"
+                  :label="FieldPermissionType.WRITE"
+                  ><span></span
+                ></el-radio>
               </div>
               <div class="item-radio-wrap">
-                <el-radio value="2" size="large" label="2" disabled><span></span></el-radio>
+                <el-radio
+                  :value="FieldPermissionType.WRITE"
+                  size="large"
+                  :label="FieldPermissionType.WRITE"
+                  disabled
+                  ><span></span
+                ></el-radio>
               </div>
               <div class="item-radio-wrap">
-                <el-radio value="3" size="large" label="3"><span></span></el-radio>
+                <el-radio
+                  :value="FieldPermissionType.NONE"
+                  size="large"
+                  :label="FieldPermissionType.NONE"
+                  ><span></span
+                ></el-radio>
               </div>
             </el-radio-group>
           </div>
@@ -180,7 +196,13 @@
   </el-drawer>
 </template>
 <script setup lang="ts">
-import { SimpleFlowNode, CandidateStrategy, NodeType, CANDIDATE_STRATEGY } from '../consts'
+import {
+  SimpleFlowNode,
+  CandidateStrategy,
+  NodeType,
+  CANDIDATE_STRATEGY,
+  FieldPermissionType
+} from '../consts'
 import {
   useWatchNode,
   useDrawer,
@@ -208,7 +230,9 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.COPY_
 // 激活的 Tab 标签页
 const activeTabName = ref('user')
 // 表单字段权限配置
-const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission()
+const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission(
+  FieldPermissionType.READ
+)
 // 抄送人表单配置
 const formRef = ref() // 表单 Ref
 // 表单校验规则
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/StartUserNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/StartUserNodeConfig.vue
new file mode 100644
index 00000000..5bf64b4a
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/StartUserNodeConfig.vue
@@ -0,0 +1,136 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="settingVisible"
+    :show-close="false"
+    :size="550"
+    :before-close="saveConfig"
+  >
+    <template #header>
+      <div class="config-header">
+        <input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-mountedFocus
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
+        </div>
+        <div class="divide-line"></div>
+      </div>
+    </template>
+    <el-tabs type="border-card" v-model="activeTabName">
+      <el-tab-pane label="权限" name="user">
+        <div> 待实现 </div>
+      </el-tab-pane>
+      <el-tab-pane label="表单字段权限" name="fields" v-if="formType === 10">
+        <div class="field-setting-pane">
+          <div class="field-setting-desc">字段权限</div>
+          <div class="field-permit-title">
+            <div class="setting-title-label first-title"> 字段名称 </div>
+            <div class="other-titles">
+              <span class="setting-title-label">只读</span>
+              <span class="setting-title-label">可编辑</span>
+              <span class="setting-title-label">隐藏</span>
+            </div>
+          </div>
+          <div
+            class="field-setting-item"
+            v-for="(item, index) in fieldsPermissionConfig"
+            :key="index"
+          >
+            <div class="field-setting-item-label"> {{ item.title }} </div>
+            <el-radio-group class="field-setting-item-group" v-model="item.permission">
+              <div class="item-radio-wrap">
+                <el-radio
+                  :value="FieldPermissionType.READ"
+                  size="large"
+                  :label="FieldPermissionType.READ"
+                  ><span></span
+                ></el-radio>
+              </div>
+              <div class="item-radio-wrap">
+                <el-radio
+                  :value="FieldPermissionType.WRITE"
+                  size="large"
+                  :label="FieldPermissionType.WRITE"
+                  ><span></span
+                ></el-radio>
+              </div>
+              <div class="item-radio-wrap">
+                <el-radio
+                  :value="FieldPermissionType.NONE"
+                  size="large"
+                  :label="FieldPermissionType.NONE"
+                  ><span></span
+                ></el-radio>
+              </div>
+            </el-radio-group>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang="ts">
+import { SimpleFlowNode, NodeType, FieldPermissionType, START_USER_BUTTON_SETTING } from '../consts'
+import { useWatchNode, useDrawer, useNodeName, useFormFieldsPermission } from '../node'
+
+defineOptions({
+  name: 'StartUserNodeConfig'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 抽屉配置
+const { settingVisible, closeDrawer, openDrawer } = useDrawer()
+// 当前节点
+const currentNode = useWatchNode(props)
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.COPY_TASK_NODE)
+// 激活的 Tab 标签页
+const activeTabName = ref('user')
+// 表单字段权限配置
+const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission(
+  FieldPermissionType.WRITE
+)
+
+// 保存配置
+const saveConfig = async () => {
+  activeTabName.value = 'user'
+  currentNode.value.name = nodeName.value!
+  // TODO 暂时写死。后续可以显示谁有权限可以发起
+  currentNode.value.showText = '已设置'
+  // 设置表单权限
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value
+  // 设置发起人的按钮权限
+  currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING
+  console.log('currentNode.value.buttonsSetting==>', currentNode.value.buttonsSetting)
+  settingVisible.value = false
+  return true
+}
+// 显示发起人节点配置， 由父组件传过来
+const showStartUserNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name
+  // 表单字段权限
+  getNodeConfigFormFields(node.fieldsPermission)
+}
+
+defineExpose({ openDrawer, showStartUserNodeConfig }) // 暴露方法给父组件
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 01ed75ce..e72b1117 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -25,7 +25,7 @@
       </div>
     </template>
     <div class="flex flex-items-center mb-3">
-      <span class="font-size-4 mr-3">审批类型 :</span>
+      <span class="font-size-16px mr-3">审批类型 :</span>
       <el-radio-group v-model="approveType">
         <el-radio
           v-for="(item, index) in APPROVE_TYPE"
@@ -390,13 +390,28 @@
             <div class="field-setting-item-label"> {{ item.title }} </div>
             <el-radio-group class="field-setting-item-group" v-model="item.permission">
               <div class="item-radio-wrap">
-                <el-radio value="1" size="large" label="1"><span></span></el-radio>
+                <el-radio
+                  :value="FieldPermissionType.READ"
+                  size="large"
+                  :label="FieldPermissionType.READ"
+                  ><span></span
+                ></el-radio>
               </div>
               <div class="item-radio-wrap">
-                <el-radio value="2" size="large" label="2"><span></span></el-radio>
+                <el-radio
+                  :value="FieldPermissionType.WRITE"
+                  size="large"
+                  :label="FieldPermissionType.WRITE"
+                  ><span></span
+                ></el-radio>
               </div>
               <div class="item-radio-wrap">
-                <el-radio value="3" size="large" label="3"><span></span></el-radio>
+                <el-radio
+                  :value="FieldPermissionType.NONE"
+                  size="large"
+                  :label="FieldPermissionType.NONE"
+                  ><span></span
+                ></el-radio>
               </div>
             </el-radio-group>
           </div>
@@ -435,7 +450,8 @@ import {
   ASSIGN_START_USER_HANDLER_TYPES,
   TimeoutHandlerType,
   ASSIGN_EMPTY_HANDLER_TYPES,
-  AssignEmptyHandlerType
+  AssignEmptyHandlerType,
+  FieldPermissionType
 } from '../consts'
 
 import {
@@ -479,7 +495,9 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.USER_
 // 激活的 Tab 标签页
 const activeTabName = ref('user')
 // 表单字段权限设置
-const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission()
+const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission(
+  FieldPermissionType.READ
+)
 // 操作按钮设置
 const { buttonsSetting, btnDisplayNameEdit, changeBtnDisplayName, btnDisplayNameBlurEvent } =
   useButtonsSetting()
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/StartEventNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/StartEventNode.vue
deleted file mode 100644
index a26a4935..00000000
--- a/src/components/SimpleProcessDesignerV2/src/nodes/StartEventNode.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<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>
-      <!-- 传递子节点给添加节点组件。会在子节点后面添加节点 -->
-      <NodeHandler 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 emits = defineEmits<{
-  'update:modelValue': [node: SimpleFlowNode | undefined]
-}>()
-
-const currentNode = ref<SimpleFlowNode>(props.flowNode);
-
-watch(
-  () => props.flowNode,
-  (newValue) => {
-    currentNode.value = newValue
-  }
-)
-
-</script>
-<style lang="scss" scoped>
-
-</style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
new file mode 100644
index 00000000..23e1dd3e
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div class="node-box" :class="{ 'node-config-error': !currentNode.showText }">
+        <div class="node-title-container">
+          <div class="node-title-icon start-user"
+            ><span class="iconfont icon-start-user"></span
+          ></div>
+          <input
+            v-if="showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-mountedFocus
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickEvent">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.START_USER_NODE) }}
+          </div>
+          <Icon icon="ep:arrow-right-bold" />
+        </div>
+      </div>
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
+    </div>
+  </div>
+  <StartUserNodeConfig v-if="currentNode" ref="nodeSetting" :flow-node="currentNode" />
+</template>
+<script setup lang="ts">
+import NodeHandler from '../NodeHandler.vue'
+import { useWatchNode } from '../node'
+import { SimpleFlowNode, NODE_DEFAULT_NAME, NODE_DEFAULT_TEXT, NodeType } from '../consts'
+import StartUserNodeConfig from '../nodes-config/StartUserNodeConfig.vue'
+defineOptions({
+  name: 'StartEventNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null
+  }
+})
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode | undefined]
+}>()
+
+const currentNode = useWatchNode(props)
+
+// 显示节点名称输入框
+const showInput = ref(false)
+// 节点名称输入框失去焦点
+const blurEvent = () => {
+  showInput.value = false
+  currentNode.value.name =
+    currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.START_USER_NODE) as string)
+}
+// 点击节点标题进行输入
+const clickEvent = () => {
+  showInput.value = true
+}
+const nodeSetting = ref()
+// 打开节点配置
+const openNodeConfig = () => {
+  // 把当前节点传递给配置组件
+  nodeSetting.value.showStartUserNodeConfig(currentNode.value)
+  nodeSetting.value.openDrawer()
+}
+</script>
+<style lang="scss" scoped></style>

From e75f9544953a2bcd1638942115ef8b7197fb87df Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Thu, 22 Aug 2024 23:23:06 +0800
Subject: [PATCH 50/62] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96,=20b?=
 =?UTF-8?q?ug=20=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/node.ts       |  68 +++
 .../src/nodes-config/ConditionNodeConfig.vue  | 429 +++++++++---------
 .../src/nodes/CopyTaskNode.vue                |  30 +-
 .../src/nodes/StartUserNode.vue               |  22 +-
 .../src/nodes/UserTaskNode.vue                |  24 +-
 .../theme/iconfont.ttf                        | Bin 2908 -> 3128 bytes
 .../theme/iconfont.woff                       | Bin 1976 -> 2116 bytes
 .../theme/iconfont.woff2                      | Bin 1480 -> 1616 bytes
 .../theme/simple-process-designer.scss        |  15 +-
 9 files changed, 318 insertions(+), 270 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index d0fb0866..282600a3 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -90,6 +90,55 @@ export function useFormFieldsPermission(defaultPermission: FieldPermissionType)
     getNodeConfigFormFields
   }
 }
+/**
+ * @description 获取表单的字段
+ */
+export function useFormFields() {
+  // 解析后的表单字段
+  const formFields = inject<Ref<string[]>>('formFields') // 流程表单字段
+  const parseFormFields = () => {
+    const parsedFormFields: Array<Record<string, string>> = []
+    if (formFields) {
+      formFields.value.forEach((fieldStr: string) => {
+        parseField(JSON.parse(fieldStr), parsedFormFields)
+      })
+    }
+    return parsedFormFields
+  }
+  // 解析字段。
+  const parseField = (
+    rule: Record<string, any>,
+    parsedFormFields: Array<Record<string, string>>,
+    parentTitle: string = ''
+  ) => {
+    const { field, title: tempTitle, children, type } = rule
+    if (field && tempTitle) {
+      let title = tempTitle
+      if (parentTitle) {
+        title = `${parentTitle}.${tempTitle}`
+      }
+      parsedFormFields.push({
+        field,
+        title,
+        type
+      })
+      // TODO 子表单 需要处理子表单字段
+      // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
+      //   // 解析子表单的字段
+      //   rule.props.rule.forEach((item) => {
+      //     parseFieldsSetDefaultPermission(item, fieldsPermission, title)
+      //   })
+      // }
+    }
+    if (children && Array.isArray(children)) {
+      children.forEach((rule) => {
+        parseField(rule, parsedFormFields)
+      })
+    }
+  }
+
+  return parseFormFields()
+}
 
 export type UserTaskFormType = {
   //candidateParamArray: any[]
@@ -408,3 +457,22 @@ export function useNodeName(nodeType: NodeType) {
     blurEvent
   }
 }
+
+export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
+  // 显示节点名称输入框
+  const showInput = ref(false)
+  // 节点名称输入框失去焦点
+  const blurEvent = () => {
+    showInput.value = false
+    node.value.name = node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string)
+  }
+  // 点击节点标题进行输入
+  const clickTitle = () => {
+    showInput.value = true
+  }
+  return {
+    showInput,
+    clickTitle,
+    blurEvent
+  }
+}
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
index 679fdbfe..4ffcd4c5 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
@@ -4,9 +4,9 @@
     v-model="settingVisible"
     :show-close="false"
     :size="588"
-    :before-close=" handleClose"
-   >
-   <template #header>
+    :before-close="handleClose"
+  >
+    <template #header>
       <div class="config-header">
         <input
           v-if="showInput"
@@ -16,36 +16,42 @@
           v-mountedFocus
           v-model="currentNode.name"
           :placeholder="currentNode.name"
-          />
-        <div v-else class="node-name" >{{ currentNode.name }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"/></div>
-        
+        />
+        <div v-else class="node-name"
+          >{{ currentNode.name }}
+          <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()"
+        /></div>
+
         <div class="divide-line"></div>
       </div>
-   </template>
-    <div> 
-      <div class="mb-3 text-size-sm" v-if="currentNode.attributes.defaultFlow">其它条件不满足进入此分支（该分支不可编辑和删除）</div>
+    </template>
+    <div>
+      <div class="mb-3 text-size-sm" v-if="currentNode.attributes.defaultFlow"
+        >其它条件不满足进入此分支（该分支不可编辑和删除）</div
+      >
       <div v-else>
-          <el-form
-            ref="formRef"
-            :model="currentNode.attributes"
-            :rules="formRules"
-            label-position="top">
-            <el-form-item label="配置方式" prop="conditionType">
-              <el-radio-group
-                v-model="currentNode.attributes.conditionType"
-                @change="changeConditionType"
+        <el-form
+          ref="formRef"
+          :model="currentNode.attributes"
+          :rules="formRules"
+          label-position="top"
+        >
+          <el-form-item label="配置方式" prop="conditionType">
+            <el-radio-group
+              v-model="currentNode.attributes.conditionType"
+              @change="changeConditionType"
+            >
+              <el-radio
+                v-for="(dict, index) in conditionConfigTypes"
+                :key="index"
+                :value="dict.value"
+                :label="dict.value"
               >
-                <el-radio
-                  v-for="(dict, index) in conditionConfigTypes"
-                  :key="index"
-                  :value="dict.value"
-                  :label="dict.value"
-                >
-                  {{ dict.label }}
-                </el-radio>
-              </el-radio-group>
-            </el-form-item>
-              
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+
           <el-form-item
             v-if="currentNode.attributes.conditionType === 1"
             label="条件表达式"
@@ -58,87 +64,94 @@
               style="width: 100%"
             />
           </el-form-item>
-           <el-form-item
-              v-if="currentNode.attributes.conditionType === 2"
-              label="条件规则"
-            >
-              <div class="condition-group-tool">
-                <div class="flex items-center">
-                  <div class="mr-4">条件组关系</div>
-                  <el-switch
-                      v-model="conditionGroups.and"
-                      inline-prompt
-                      active-text="且"
-                      inactive-text="或"/>
-                </div>
-                <!-- <div class="flex items-center"> 
+          <el-form-item v-if="currentNode.attributes.conditionType === 2" label="条件规则">
+            <div class="condition-group-tool">
+              <div class="flex items-center">
+                <div class="mr-4">条件组关系</div>
+                <el-switch
+                  v-model="conditionGroups.and"
+                  inline-prompt
+                  active-text="且"
+                  inactive-text="或"
+                />
+              </div>
+              <!-- <div class="flex items-center"> 
                   <el-button size="small" type="primary">添加条件组</el-button>
                 </div>  -->
-              </div>
-              <el-space direction="vertical"  :spacer="conditionGroups.and ? '且' : '或' ">
-                <el-card 
-                    class="condition-group"
-                    style="width: 530px"
-                    v-for="(condition, cIdx) in conditionGroups.conditions" 
-                    :key="cIdx">
-                  <div class="condition-group-delete" v-if="conditionGroups.conditions.length > 1">
-                    <Icon color="#0089ff"  icon="ep:circle-close-filled"  :size="18"  @click="deleteConditionGroup(cIdx)"/>
-                  </div>
-                  <template #header>
-                    <div class="flex items-center justify-between">
-                      <div>条件组</div>
-                      <div class="flex">
-                        <div class="mr-4">规则关系</div>
-                        <el-switch
-                            v-model="condition.and"
-                            inline-prompt
-                            active-text="且"
-                            inactive-text="或"/>
-                      </div>
-                    </div>
-                  </template>
-                 
-                  <div class="flex pt-2" v-for="(rule, rIdx) in condition.rules" :key="rIdx">
-                    <div class="mr-2">
-                      <el-select  style="width: 160px" v-model="rule.leftSide">
-                        <el-option
-                          v-for="(item, index) in fieldsInfo"
-                          :key="index"
-                          :label="item.title"
-                          :value="item.field"
-                        />
-                      </el-select>
-                   </div>
-                   <div class="mr-2">
-                      <el-select v-model="rule.opCode" style="width: 100px">
-                        <el-option
-                          v-for="item in COMPARISON_OPERATORS"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value"
-                        />
-                      </el-select>
-                    </div>
-                    <div class="mr-2">
-                      <el-input v-model="rule.rightSide" style="width: 160px" />
-                    </div>
-                    <div class="mr-1 flex items-center" v-if="condition.rules.length > 1">
-                      <Icon icon="ep:delete" :size="18" @click="deleteConditionRule(condition,rIdx)"/>
-                    </div>
-                    <div class="flex items-center">
-                      <Icon icon="ep:plus" :size="18" @click="addConditionRule(condition,rIdx)"/>
+            </div>
+            <el-space direction="vertical" :spacer="conditionGroups.and ? '且' : '或'">
+              <el-card
+                class="condition-group"
+                style="width: 530px"
+                v-for="(condition, cIdx) in conditionGroups.conditions"
+                :key="cIdx"
+              >
+                <div class="condition-group-delete" v-if="conditionGroups.conditions.length > 1">
+                  <Icon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    :size="18"
+                    @click="deleteConditionGroup(cIdx)"
+                  />
+                </div>
+                <template #header>
+                  <div class="flex items-center justify-between">
+                    <div>条件组</div>
+                    <div class="flex">
+                      <div class="mr-4">规则关系</div>
+                      <el-switch
+                        v-model="condition.and"
+                        inline-prompt
+                        active-text="且"
+                        inactive-text="或"
+                      />
                     </div>
                   </div>
-            
-                </el-card>
-              </el-space>
-              <div title="添加条件组" class="mt-4 cursor-pointer">
-                <Icon color="#0089ff"  icon="ep:plus"  :size="24"  @click="addConditionGroup"/>
-              </div>
-            </el-form-item>
-            
-          </el-form>
-      </div>    
+                </template>
+
+                <div class="flex pt-2" v-for="(rule, rIdx) in condition.rules" :key="rIdx">
+                  <div class="mr-2">
+                    <el-select style="width: 160px" v-model="rule.leftSide">
+                      <el-option
+                        v-for="(item, index) in fieldsInfo"
+                        :key="index"
+                        :label="item.title"
+                        :value="item.field"
+                      />
+                    </el-select>
+                  </div>
+                  <div class="mr-2">
+                    <el-select v-model="rule.opCode" style="width: 100px">
+                      <el-option
+                        v-for="item in COMPARISON_OPERATORS"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </div>
+                  <div class="mr-2">
+                    <el-input v-model="rule.rightSide" style="width: 160px" />
+                  </div>
+                  <div class="mr-1 flex items-center" v-if="condition.rules.length > 1">
+                    <Icon
+                      icon="ep:delete"
+                      :size="18"
+                      @click="deleteConditionRule(condition, rIdx)"
+                    />
+                  </div>
+                  <div class="flex items-center">
+                    <Icon icon="ep:plus" :size="18" @click="addConditionRule(condition, rIdx)" />
+                  </div>
+                </div>
+              </el-card>
+            </el-space>
+            <div title="添加条件组" class="mt-4 cursor-pointer">
+              <Icon color="#0089ff" icon="ep:plus" :size="24" @click="addConditionGroup" />
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
     </div>
     <template #footer>
       <el-divider />
@@ -150,25 +163,31 @@
   </el-drawer>
 </template>
 <script setup lang="ts">
-import { SimpleFlowNode, CONDITION_CONFIG_TYPES, ConditionConfigType } from '../consts'
-import { getDefaultConditionNodeName } from '../utils';
-import { COMPARISON_OPERATORS, ConditionGroup, Condition, ConditionRule } from '../consts';
+import {
+  SimpleFlowNode,
+  CONDITION_CONFIG_TYPES,
+  ConditionConfigType,
+  COMPARISON_OPERATORS,
+  ConditionGroup,
+  Condition,
+  ConditionRule
+} from '../consts'
+import { getDefaultConditionNodeName } from '../utils'
+import { useFormFields } from '../node'
 const message = useMessage() // 消息弹窗
 defineOptions({
   name: 'ConditionNodeConfig'
 })
-const formFields = inject<Ref<string[]>>('formFields')
 const formType = inject<Ref<number>>('formType') // 表单类型
-
-const conditionConfigTypes = computed( ()=> {
-  return CONDITION_CONFIG_TYPES.filter(item => {
+const conditionConfigTypes = computed(() => {
+  return CONDITION_CONFIG_TYPES.filter((item) => {
     // 业务表单暂时去掉条件规则选项
-    if (formType?.value !== 10 ){
+    if (formType?.value !== 10) {
       return item.value === 1
     } else {
-      return true;
+      return true
     }
-  });
+  })
 })
 
 const props = defineProps({
@@ -176,35 +195,39 @@ const props = defineProps({
     type: Object as () => SimpleFlowNode,
     required: true
   },
-  nodeIndex : {
+  nodeIndex: {
     type: Number,
     required: true
   }
 })
 const settingVisible = ref(false)
 const open = () => {
-  getFieldsInfo()
   if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE) {
-     if (currentNode.value.attributes.conditionGroups) {
-        conditionGroups.value = currentNode.value.attributes.conditionGroups
-     }
+    if (currentNode.value.attributes.conditionGroups) {
+      conditionGroups.value = currentNode.value.attributes.conditionGroups
+    }
   }
   settingVisible.value = true
 }
 
-watch(() => props.conditionNode, (newValue) => {  
-  currentNode.value = newValue;  
-});
+watch(
+  () => props.conditionNode,
+  (newValue) => {
+    currentNode.value = newValue
+  }
+)
 // 显示名称输入框
 const showInput = ref(false)
 
 const clickIcon = () => {
-  showInput.value = true;
+  showInput.value = true
 }
 // 输入框失去焦点
 const blurEvent = () => {
   showInput.value = false
-  currentNode.value.name = currentNode.value.name || getDefaultConditionNodeName(props.nodeIndex, currentNode.value.attributes?.defaultFlow)
+  currentNode.value.name =
+    currentNode.value.name ||
+    getDefaultConditionNodeName(props.nodeIndex, currentNode.value.attributes?.defaultFlow)
 }
 
 const currentNode = ref<SimpleFlowNode>(props.conditionNode)
@@ -216,13 +239,13 @@ const closeDrawer = () => {
   settingVisible.value = false
 }
 
-const handleClose = async  (done: (cancel?: boolean) => void) => {
-  const isSuccess = await saveConfig();
-  if ( !isSuccess) {
-      done(true); // 传入 true 阻止关闭  
-    } else {
-      done();
-    }
+const handleClose = async (done: (cancel?: boolean) => void) => {
+  const isSuccess = await saveConfig()
+  if (!isSuccess) {
+    done(true) // 传入 true 阻止关闭
+  } else {
+    done()
+  }
 }
 // 表单校验规则
 const formRules = reactive({
@@ -232,82 +255,83 @@ const formRules = reactive({
 const formRef = ref() // 表单 Ref
 
 // 保存配置
-const saveConfig =  async () => {
+const saveConfig = async () => {
   if (!currentNode.value.attributes.defaultFlow) {
     // 校验表单
     if (!formRef) return false
     const valid = await formRef.value.validate()
     if (!valid) return false
-    const showText = getShowText();
-    if(!showText){
-      return false;
+    const showText = getShowText()
+    if (!showText) {
+      return false
     }
     currentNode.value.showText = showText
-    if(currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION ){
-      currentNode.value.attributes.conditionGroups = undefined 
+    if (currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION) {
+      currentNode.value.attributes.conditionGroups = undefined
     }
-    if(currentNode.value.attributes.conditionType === ConditionConfigType.RULE ){
+    if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE) {
       currentNode.value.attributes.conditionExpression = undefined
-      currentNode.value.attributes.conditionGroups = conditionGroups.value 
+      currentNode.value.attributes.conditionGroups = conditionGroups.value
     }
-    
   }
   settingVisible.value = false
-  return true;
+  return true
 }
-const getShowText = () : string => {
-  let showText ='';
+const getShowText = (): string => {
+  let showText = ''
   if (currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION) {
     if (currentNode.value.attributes.conditionExpression) {
       showText = `表达式：${currentNode.value.attributes.conditionExpression}`
     }
   }
-  if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE ) {
+  if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE) {
     // 条件组是否为与关系
-    const groupAnd = conditionGroups.value.and;
-    let warningMesg : undefined | string = undefined
-    const conditionGroup = conditionGroups.value.conditions.map( item => {
-      return  '(' + item.rules.map( rule => {
-          if ( rule.leftSide  && rule.rightSide) {
-            return getFieldTitle(rule.leftSide) + " " + getOpName(rule.opCode) + " " + rule.rightSide 
-          }else {
-            // 又一条规则不完善。提示错误
-            warningMesg = '请完善条件规则'
-            return ''
-          }
-        }).join(item.and ? ' 且 ' : ' 或 ' ) + ' ) '
-      }
-    )
+    const groupAnd = conditionGroups.value.and
+    let warningMesg: undefined | string = undefined
+    const conditionGroup = conditionGroups.value.conditions.map((item) => {
+      return (
+        '(' +
+        item.rules
+          .map((rule) => {
+            if (rule.leftSide && rule.rightSide) {
+              return (
+                getFieldTitle(rule.leftSide) + ' ' + getOpName(rule.opCode) + ' ' + rule.rightSide
+              )
+            } else {
+              // 又一条规则不完善。提示错误
+              warningMesg = '请完善条件规则'
+              return ''
+            }
+          })
+          .join(item.and ? ' 且 ' : ' 或 ') +
+        ' ) '
+      )
+    })
     if (warningMesg) {
-      message.warning(warningMesg);
-      showText = '';
+      message.warning(warningMesg)
+      showText = ''
     } else {
-      showText = conditionGroup.join( groupAnd ?  ' 且 ' : ' 或 ' );
+      showText = conditionGroup.join(groupAnd ? ' 且 ' : ' 或 ')
     }
-   
-  } 
+  }
   return showText
 }
 
-
-
 // 改变条件配置方式
-const changeConditionType = () => {
-
-}
+const changeConditionType = () => {}
 
 const conditionGroups = ref<ConditionGroup>({
-  and : true,
+  and: true,
   conditions: [
     {
-      and : true,
+      and: true,
       rules: [
         {
           type: 1,
-          opName: "等于",
-          opCode: "==",
-          leftSide: "",
-          rightSide: ""
+          opName: '等于',
+          opCode: '==',
+          leftSide: '',
+          rightSide: ''
         }
       ]
     }
@@ -316,69 +340,54 @@ const conditionGroups = ref<ConditionGroup>({
 // 添加条件组
 const addConditionGroup = () => {
   const condition = {
-    and : true,
+    and: true,
     rules: [
       {
         type: 1,
-        opName: "等于",
-        opCode: "==",
-        leftSide: "",
-        rightSide: ""
+        opName: '等于',
+        opCode: '==',
+        leftSide: '',
+        rightSide: ''
       }
     ]
   }
   conditionGroups.value.conditions.push(condition)
 }
 // 删除条件组
-const deleteConditionGroup = (idx:number) => {
+const deleteConditionGroup = (idx: number) => {
   conditionGroups.value.conditions.splice(idx, 1)
 }
 
 // 添加条件规则
-const addConditionRule = (condition:Condition, idx:number) => {
+const addConditionRule = (condition: Condition, idx: number) => {
   const rule: ConditionRule = {
     type: 1,
-    opName: "等于",
-    opCode: "==",
-    leftSide: "",
-    rightSide: ""
+    opName: '等于',
+    opCode: '==',
+    leftSide: '',
+    rightSide: ''
   }
-  condition.rules.splice(idx+1, 0, rule)
+  condition.rules.splice(idx + 1, 0, rule)
 }
 
-const deleteConditionRule = (condition:Condition, idx:number) => {
+const deleteConditionRule = (condition: Condition, idx: number) => {
   condition.rules.splice(idx, 1)
 }
 
-let fieldsInfo : any[] = [];
+const fieldsInfo = useFormFields()
 
-const getFieldsInfo = () => {
-  fieldsInfo = [];
-  if(formFields){
-    formFields.value.forEach((fieldStr: string) => {
-      const { field, title, type } = JSON.parse(fieldStr)
-      fieldsInfo.push({
-        field,
-        title,
-        type
-      })
-    })
-  }
-}
-const getFieldTitle = (field:string) : string => {
-  const item = fieldsInfo.find( item => item.field === field)
-  return item?.title;
+const getFieldTitle = (field: string) => {
+  const item = fieldsInfo.find((item) => item.field === field)
+  return item?.title
 }
 
-const getOpName = (opCode: string) : string => {
-  const opName = COMPARISON_OPERATORS.find( item => item.value === opCode)
+const getOpName = (opCode: string): string => {
+  const opName = COMPARISON_OPERATORS.find((item) => item.value === opCode)
   return opName?.label
 }
-
 </script>
 
 <style lang="scss" scoped>
-
 .condition-group-tool {
   display: flex;
   justify-content: space-between;
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
index 3e3e0f7f..14a85a29 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -13,7 +13,7 @@
             v-model="currentNode.name"
             :placeholder="currentNode.name"
           />
-          <div v-else class="node-title" @click="clickEvent">
+          <div v-else class="node-title" @click="clickTitle">
             {{ currentNode.name }}
           </div>
         </div>
@@ -40,8 +40,9 @@
   </div>
 </template>
 <script setup lang="ts">
-import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
 import NodeHandler from '../NodeHandler.vue'
+import { useNodeName2, useWatchNode } from '../node'
 import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue'
 defineOptions({
   name: 'CopyTaskNode'
@@ -56,27 +57,12 @@ const props = defineProps({
 const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined]
 }>()
-const currentNode = ref<SimpleFlowNode>(props.flowNode)
 
-// 监控当前节点的变化
-watch(
-  () => props.flowNode,
-  (newValue) => {
-    currentNode.value = newValue
-  }
-)
-// 显示节点名称输入框
-const showInput = ref(false)
-// 节点名称输入框失去焦点
-const blurEvent = () => {
-  showInput.value = false
-  currentNode.value.name =
-    currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
-}
-// 点击节点标题进行输入
-const clickEvent = () => {
-  showInput.value = true
-}
+// 监控节点的变化
+const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.COPY_TASK_NODE)
+
 const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
index 23e1dd3e..51116781 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
@@ -15,7 +15,7 @@
             v-model="currentNode.name"
             :placeholder="currentNode.name"
           />
-          <div v-else class="node-title" @click="clickEvent">
+          <div v-else class="node-title" @click="clickTitle">
             {{ currentNode.name }}
           </div>
         </div>
@@ -37,8 +37,8 @@
 </template>
 <script setup lang="ts">
 import NodeHandler from '../NodeHandler.vue'
-import { useWatchNode } from '../node'
-import { SimpleFlowNode, NODE_DEFAULT_NAME, NODE_DEFAULT_TEXT, NodeType } from '../consts'
+import { useWatchNode, useNodeName2 } from '../node'
+import { SimpleFlowNode, NODE_DEFAULT_TEXT, NodeType } from '../consts'
 import StartUserNodeConfig from '../nodes-config/StartUserNodeConfig.vue'
 defineOptions({
   name: 'StartEventNode'
@@ -53,21 +53,11 @@ const props = defineProps({
 const emits = defineEmits<{
   'update:modelValue': [node: SimpleFlowNode | undefined]
 }>()
-
+// 监控节点变化
 const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 
-// 显示节点名称输入框
-const showInput = ref(false)
-// 节点名称输入框失去焦点
-const blurEvent = () => {
-  showInput.value = false
-  currentNode.value.name =
-    currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.START_USER_NODE) as string)
-}
-// 点击节点标题进行输入
-const clickEvent = () => {
-  showInput.value = true
-}
 const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index a7fe1b6d..c817cbe2 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -13,7 +13,7 @@
             v-model="currentNode.name"
             :placeholder="currentNode.name"
           />
-          <div v-else class="node-title" @click="clickEvent">
+          <div v-else class="node-title" @click="clickTitle">
             {{ currentNode.name }}
           </div>
         </div>
@@ -44,8 +44,8 @@
   />
 </template>
 <script setup lang="ts">
-import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts'
-import { useWatchNode } from '../node'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import { useWatchNode, useNodeName2 } from '../node'
 import NodeHandler from '../NodeHandler.vue'
 import UserTaskNodeConfig from '../nodes-config/UserTaskNodeConfig.vue'
 defineOptions({
@@ -61,9 +61,10 @@ const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined]
   'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: NodeType]
 }>()
-
+// 监控节点变化
 const currentNode = useWatchNode(props)
-
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {
@@ -72,19 +73,6 @@ const openNodeConfig = () => {
   nodeSetting.value.openDrawer()
 }
 
-// 显示节点名称输入框
-const showInput = ref(false)
-// 节点名称输入框失去焦点
-const blurEvent = () => {
-  showInput.value = false
-  currentNode.value.name =
-    currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
-}
-// 点击节点标题进行输入
-const clickEvent = () => {
-  showInput.value = true
-}
-
 const deleteNode = () => {
   emits('update:flowNode', currentNode.value.childNode)
 }
diff --git a/src/components/SimpleProcessDesignerV2/theme/iconfont.ttf b/src/components/SimpleProcessDesignerV2/theme/iconfont.ttf
index c2dcd3f422eda69e3cb3520c32c67528a6f82944..bb85b35fc9a288c272108219197ba72fc40ccce9 100644
GIT binary patch
delta 724
zcmZuuO=uHA6n<|un{1kr7TvTFl9*&g3P}T2F@kkNLB#Gwu{{We=-S36lGxa!(p<WD
zt5Gy&5$x4^7SW5)fC?TwdR8goVHd1kv;`|-e6w3TIm7qnz3=_b%*UY@;da6ZYwG}b
z2LLY3RQ1}~*WZ5tuzupU<|@rAmFUhp0FMkHo-P&j*^!+y3dMdR94!&y+YoM%-X$C;
zRU1ojQYiN;iFjpxMi(D?Mkt??d#d_U4Ts<=`NQ0QO|KRsgKOhY0sMJtI#-*oH(tIy
zwFMA(Ljl+Cca@w3NGjpO1#|o2!1y)<oNDm-n|PNzyJyevfN+~k2^eQ-@jS_l;X2+l
z-(#l3Jf_6<8g0h`&;r5H(scGwbepCuP|6@}0l;Eb#A;eAcE}#KH+#MRF}%yag-#~V
zb~jy!DkAv63nH(GULI>cV86^)D4O>KuQ9uu?c>#5@bRsP3;u3a(*>W^T5&-&!4A2g
z>R=DMpgv%4y5JpYou{w)f+{{^8TOcLVta<rrKjqLeFhw-v62~7SqwvR5QStA<rt2s
zcqD_EJa~eiN`lxZ%3jA-+2O=k%&{3vwQ}*rwblIOvUaSH%@%50;N<~1rKSFyBOym+
zWny|1pQvS3#zKDe(T#YnHKi?2;zqWhIPoNYpOk~0w3bR~=}u54Ju^L_sO20P&wmOD
k-+l=h3g|%*z34*;{m@r$=nIX}#d>kUUp7;LL;Svf0Y)^O8vp<R

delta 504
zcmYLF&nrYx7(L&;&%D8eOk=3YZ%IknOk~QMEG=Y#$6(S7Q!Gd^NhlQF##a6T#X|8{
zSSXUDyr)Q6C<`^tohk0^-1~jsJ?A_3-pksDnuDhG=-?F~djKY;GEO$JntlOPkhRCz
z^vcYuJZuB{8?cU3(@wH|@1l*|CnBC=!G6>`jIW8-RAy;8#(>&)F0u5&l%pH19_nA2
zS7n^#tVA%!^IGPO^G;?uR&|;<1A+%Moy{&RF758$tpQ~;MDp;urQe1yBsM2MZ^kPV
zUnsX&0G{KQ;r~6Kv!FMa2cb-r!{}_cUalnP-b<GoQsKU>LKVnC7otw?Wu$Jw!Z7(2
z1%1F%Ud-F^BYxC>%jW@;yJITaAY}Yc<Dn5i3DtC!fP12T+%sjbhs*^qQdmI-I}~AD
zJ${k_wea|R28QEDieNwZ(IVIx{#y}$FH7PGo{Y+^8Zzg3SAXaggiwbL^zt6f=l52*
VU2TgJEtZr>Kx_%3bilPj-M>Z2Wvc)H

diff --git a/src/components/SimpleProcessDesignerV2/theme/iconfont.woff b/src/components/SimpleProcessDesignerV2/theme/iconfont.woff
index e20cfa28ccfb331b1598919902c25269ed71c7d7..94befbd1898e85a0687043275b23b0667e74fd29 100644
GIT binary patch
delta 1632
zcmXw(dpOg39LK+#nTVON;}qGBAtX-fD6QObzfIIB!iLG?uuYT57@0D)<Syb+9m(aK
zQljLz*2tMyWH_-9YN}0Xb2&OcfAo2t_xJOBUeEjad_RA^o7KC~T4#NnodFC$wdpX}
zywO$n<!Bvb>A1Iq#gOR$z%n6r5$a!v9gCk&MJGl807nCWfXs@n(R#}RkrZ+`07zZP
zX94M#9m_rjkr0HKCp2$xywZdMCo(230b-HRjDm#4LQga;Y{Lg}uw_Gv#fTj-<OKRY
z2wsMOJ|rv*1EQ$p7z)JdphN7S15TlD67JGzj5q+479h`2NU?1_&R_C2!5Az@17fj;
zlZGZp_EGamxc(u>UM1a5)hR@`mUuGGfJ$(9F;i0{K?(|Pdt$bC8s#~deA(ocU^SDc
z?0AR{%VL}jxT=SndROD$O0PfHH?_onx!O2*;@8*F4|=bBUi*WYF;w(B`<b!I!Ln~1
z#_l}Z3+E0^9Muo>%1rX^G!DvRNnD%oD>0tTT46q$7mv^Xfl+QU0uruM{9n+vIcb$Q
zO$)o@<A2+IU(9{aJ!>7zi=D!Y8-uJ#JhzfiGwlI9B4>}XR?fqUBkUcBTWH+U7CeHQ
zQJs~Uib>NF4LDl(za`etMXBt4SQs3KJK7$CR{y7&x|K8hQI^6tX0^&@Tb*<&Ss}cT
zH`cy7?;;VnySs_GsuhQk(Y<!6bPo{)?3}a5#pET0*{ylC;3-}skz-p*CU)>bR^(F-
zXX@ig_lU;{2B7?i>*K-*m;G0D?wMIBNSxk<bK0jmpJw+z>)ZCSvC(u*VAD@Nb-rh5
zJ-{YN{8t}aeC=8mE6C==EOJrGd@;?EL|IL0nPy#<g>w>Df|V283E$%BbwJKR)&!<L
z={jSke1&(WXf=~v^(v~dQHJn*J9m(_z8`kC7t?q;pYL*$ZW!=Nq-k0fx<n^*Pbgn}
zvrHtY-tH1)VDc0^9#-qNE9pDmjOJ*LYL;NLxu+W{_9U{%$7oGC-Qwdi+>?HBvwmef
z2lK#tfYhvK6MMrvH?>J*dSFqk&fv<kC5A0<59?#2`U?jhs-^7f7t95xc&%_-lQD%t
z<P()K)MMt4Rkki`8V6VOCfl{cB`C_(OT^ON)!a*x{&26TfRwE`)3#>ju3WCf*-(Xe
zo@$8&tX?~NW&jxHiX#RavWy7)iIJGVqGwCxzO_R6%L}!u|Mp)?ZcZOAe^<=rD@FLZ
ztg6;Vx=ml-9VO<9&-rAdd>Xtyt}Pg?=}JusP%dO?K?!m^ozbP)#oxXl`s-)s&GR}h
z2C3fuDTveMVWoS-HKBEayW&|6PxOsy@%vsDqh+Rr9Hml!W~_fo{TRiaa;ay*BG7ZV
z29)j%59PF*so=7P`_w;i9DaIb=Ba4udo294o6!h|>Co-HXV^nlSO4Fg)_X(i^;Mmp
z92bN(>)YGX93pl2dud%7ZY`!#WB!38gn<aZtS99PRNegkgR!vVV|DD&h0M2-Bb!-<
zJ(OFw3_S9yON4%H=DW0LABMEuwV44G17V}W4;AAvRaJ$b3#_KW!@cOo{MNWRzkeOI
zzcx7}=>=V^bU~Im?l-9U`t`N+&zDqpwZ=b9N958$ja8{V?a`P*!eYkrfuB#!Tgrm{
zhTbP;)I9I-GfCc=lQ>jR(RU!<vTvoGbze!Vz%&$<D7AI7SX9=v*PP!pIeb#U$h}dR
zD(Cc&Tn&TIUa?O9xV36L*;-(fVii1*nv{jU5i8e?W8WD}7^!%3<?qU`iwn)U-pg>i
zRb=|jY;LcD306j)-=>m9WEoIUC2JYe=GTVUmSjb$Nl=F?Uib%7lR!v9&qc6m7tJT*
z=PO5V_!r-KKDk1@VD!k=)-Q1O`entcSGnqp2fK|{)R8mlrBEh>k-|wNFf~4y*Y@o5
zIFllZAcHg)+KE;4mv84V$XP13C_POXuL68$HhX>dQ{|KG=&nuxx693eX+tUPf`Z3F
zyT~LGsUsZ^gOdObO2myi4xWJbutTs0_%8S@@O^=Zl&68zRH%cc-8V)$!TjA&saRFe
zj`1yQlUE~4T?K%AX?-Gnd)ajA`J#&~jP|bT*r#f00db<h+hel9=Eue7FJp|wSNmGa
c@=;{oNYe%PJBbbE{%&kV5o|_?xexvPKR`O%qyPW_

delta 1505
zcmV<71s?ju5V#K%cTYw}00961000NL01E&B000YIkrX|D7fQQhZDDW#00D>q004df
z00G`Sdu-)rY<Xq?00IaA00WW$00fxm0o;dZWnp9h00o=?001ul001^8jI<?aXk}pl
z00qnd000~S001Nh-UEneZFG1500rm(000gE000~u0001NZ)0Hq00sB}000mG000mJ
zAOtvVVR&#j000IE0000V0000W0TlphZeeX@000Ik0003%0007K5TiV>aBp*T000MQ
z0000@0001Fi;dZSlL!HGe*=(YU_?>G1OR<J4NiER?U6wW0x=9lU)owk#N9BPIfBP=
z;c;BaoHSX?A;zQ;6wlx<ukb%j3;n<WsLs`CAWwwQ!&4b~<uvlf&HaTVg|0;xU2U@2
zwta_R|0VI6&kA4Z{%-Sokj`J{vESdW$8RRlfG$b2q-zpqY)Ya*f18tN(6)r~0_4^s
z_W%HRoMltrYaCS+zGv=c*ZnoOYwn%d3EfHV%<gP<V|F*Qv%7Ain@!TDW=Zi^)`+nt
zQZc1URRlE(B?x`-K{OQ+Dh8nyg_J(@p--Vc)Dj<j5X1*TL=l9d{sq~q_pWJLaF{vw
z-0$2E&i9==D1^{Ie;4rIcpW8>g$k&N5I8ze8~hdoCBRMzf)@BTP#vP+IS~j`6AZrr
zbx-C_9=t&2zQm}87S44#=RQ$kp}rgh%P*?{TjDu$DlL}NX}Fx8GT{rRoe`Ufk+}FU
zk$_j?BMCU0&_3E{${_OlR2d)ypQqDeMH0m`rXtU@C0SAWf4qd)jJimZIyOQGZ%7^Y
zBNWwG!yE(?CZaHia|5XyybssJiC=zL>W%yeSH)#mxv?&O7vG6p2*W8ccK*$Gv|q&s
zZ@`Lp58eiI4_&$hPhLUtQ6Bw<Z{TTUONUCxM`(acUur4oOqDb4gjtFjRqoeoscK3Z
zm1{r?hQWpif8-+#^_dau_I7yFahe=n5T9DEYiYAqw(T@~f4Fe%kUzM12q#77#pE1p
zJ=85cQM8?=qs>Z6+qHT-RyJ$F^I}VaU)_YCQz0^)^oST)>zJ@xUYa;M(f42ve~mGE
z7M+wmx{miS1ocU%1)j@U)i*Lg!((s&%f>VCe>kXDe|hbIe5cH~%JxsYRs7ky&Y12{
zUHs|ll<Mm$xT2?1M-|>8loDrD9=@jvxy-2A62O$K>GYybcc^|^)lT=*i+6Y1hYR=C
z3WvA*iJS*kv&P@!cTpTopr!saJk_*s&~Tpj8*jlRczHRaprx6%W*Xs0I8v3@SaqM{
zeMcNme@bn%pjOiIo~|)!m^LseP7M@q?`;ys2tKQ#$}`o>?U+Bz3k$3D=~rg~TxUFf
zTcT|5OPpmy{6*NPXIW5rtn3}D*=b|6_#e8#h8eSsO@myQ$J>+c)8$}wJ_~s6wdu-9
zuX0?X*NHKIfiQy{Ia9D^a;3+84TgeaIX-2Lf4}q~F&I(zP>TOadtKhZNpuvQkpF5e
zA9#7CC8A4dI@nrE>aIyM*ujST!*?nJG_0($;clW9WgI>a$po`|AKNUEELNgZ-B~hL
z2t|Mu%dz%TGx~S|=zSQ9m6$3$&@1pVmoJ>!U-PC~IIO`fG89XtVngJc*zxWWT<gy3
zf44%r@khE%t+6<-e;c|PpObifv9l^UB?q{<zdkCXQ{w1f7Ypg4004NLV_;-pU;yHl
zq>q>4`E9;3aI-Lgz$3FA!U+0*0}BIl6OhZnzyuNn05vEIG5~m-V_;-pU~c%|z!1a2
z00KagkpUI30{}-20&sYoV_{%mV8MX_H38fJ9RL6T00000WB`%?<^fs()&fj;oMT{Q
zU|?Wph+|-300AZ-<^n<nhW}tb0{{|{0f4is21Nl(K?;B%5CzcrW~tq*V+=M>Fz8?;
zb^8{z>@6QTdd>7Nz+r&LhzS9a(o(XX$KJ)~YWK8pSyhr;-v%~owM#T^tSU<M0Pa2#
HWB>pF&fkf}

diff --git a/src/components/SimpleProcessDesignerV2/theme/iconfont.woff2 b/src/components/SimpleProcessDesignerV2/theme/iconfont.woff2
index 77bbd1b3621996d06b22ff96ebc4d03180784a64..e8f95c8c307663dec7a55cd4775adfc07a72de70 100644
GIT binary patch
delta 1607
zcmV-N2Dtgi3(yQ0cTYw#00961000J101E&B000a)000I7kr*C-bP9?{i4Orb0we<<
z3labXAO(bH2XPyy3K12gsgnInux;UFSL)FW-QXi>O+Gws+WYx|Qi4?tDkfANDidW*
zr@}Ps9A;{jsUv6Fo;%<Uz~+XTHVa_Wsb~(%wDdjpif?^n8d;$LxHweJJP%0rTP%hl
z*=tZV)&-OTjk&OYwSxBwv_-ut!%4cE08`Cf?*jrriewamDXXZ{K{09ctSRsZ3q4JM
zG@ncw&yR*=r~%u8Baq0&?7l3>Du@8)E#?t`mErr7Z;(nP00R+)zED$FxdHtH%-}av
za0&o@AExa!VSNUG2ml2Te`KsZaoa6s&^Qtg3Ta&`ixB{SROT~MV1OA2954>NIp{U$
zGx&|uS!#uZtkr~n@c;%a2wWhB2oxY<Xo*a)hNufLz_?<B(m<%dLTZEx1kyJ_0~cV>
zO9e5cK2Sjf={Jz#SwTzoQ33D<NI$?dL(9?~3k7?3#7u0I%hh%}l}auS;Y93kB8!Yn
zbJaxNY_~gqiflFrR_hS6yMth}SsV_N-EK4=AtY2uWi=i^IFx5`CQfb{vkD^<A?nx&
ztA#aU$y?{Uj+mnjhlH4Mhb?jZQM=Bt&g|W_!Q{hlw0MnMFYvqp?fQ|^^gJ=}L+6bd
zMaLKw<|j9Z$aM25Cx^^@4Xn_^DJ^}3a*WXbXi7VOzx8f}e*Jb&Lz^zmY|xeJwMOaT
zta_B=i0Oz_2F`N$kcOmHjAZ6RNSOLKImz;y=0I-gAxWH3Wj-QwgGV^jrkYfoeaLZp
zT29z6fwJ7DSJ7{`=3mosmiwo9&3w0GV0Al{$x(FFL3Y^fnHQ|jtPoDe^w>7YK9)aS
zK-x@yTfC1*73S!5n}Bmx+jE=4Vb3HRIe88*w|MEdm?T^?_nP|7_l%C%fzr~Gy{>b3
z>svz$H-+q;HG5CUroy3bwboQET2xj2LH6*>%;D24QxwzU?YuSDlxd1J@v+s_v2iEj
zJZ2P%U!zD1D({r2Zq;gA)d?pGy9)}si-yI2aIUReR9(GjlVt{qO>t4}+nGbs(uPbD
zrYI)K4R_GpyZEBH`*zJOnzL{JoT9G%`^!l2_@c>^uZA9-;vudgjxw{)eo2GnqBCR8
zSYP{a&dd32AAdB}Hv7Z~44FN`*z4`G4gq^p_qJvoLuztxX_(1ZjTL=OVFs<iPwiKK
z>Zfs^J<V^lcC^~p<a<bc^UV7{dL*`L|BZNZ{-beSvg&g09d~<mZ9;SDD&%}jjfzqw
zuSyl_t%@{-XOG4gbwg$hO`0Ams;%l)QMaR+r(7&ksXi7sFNlmq1kDRPR<)v%Ah%zb
zqAUw3Q~J)}a>eTYE0rrR2Hl7c`g*5-|EHntN$JreYpX_TnzYQ+@{(!LD%Hcho=Pje
z4vN1KbWvHJAykL2RhB6|R=H7b)cB4!eTyUHNllF@pEQ;El?IhXge~q^7&9TeN#xPx
zMUdUh6WmtbzpM?O5Ujm?UwM0TQiVkKm5wP%SLkA^mfuNp@w&GqvC>udr=AplXUbdS
z%WK^ClxT2sOH#S({O}A#Yh1N`qz{siNIu3G@7NUC;1lkgL=u6i008F_dW~8XX)XPp
z8cCnhK3Yurm-bV-u|S{Gr2s(RWoG{P*2BZ0YkwQ5%>T{Y|8dTz--%X;+qs0r_Oc)W
z1JInGnsgXBmYsV630v2l%b~4*5{$@jwkeXD3E;QoaL0!t^Pna8J<B{&VBmrPppZa~
zWU;Xz0*6!(LxKX3A`ayTbMU}4P!QG?KqOvKK%l~5V4%Qdpitp1lEpee1aAz27%Kb+
zQnV5I@i;^h#n`ie6&>9_G@2N!m1{WbH~NQTsS5r>@(4dQWnGMaAwV{Nu|t0Lt*Rv}
z(bKJeF*p|~Nt|G`98}Y(s%+hfOB4O#EMP@P_m59Mni%YO&40Xa^bf~EBL7X29k$F)
zO<5DjFG--<9!Y6__N|J^k}DF4dAbdm5V=7lQmPM4Ff&UztPx75%8awDq};#EKg>&z
zexaYi%OEM5VKJxA%A&<4BSVg3FfO{l_{7G<^w|v@I)@|PHKskMtH1gahs46p!7Ua5
F005BL0k{AF

delta 1470
zcmV;v1ws1I49E)@cTYw#00961000HZ01E&B000YI000Gikr*C-UJ8jAhid^g0we<*
z3lIPVAO(bH2V@)F2~m_#P6yc!Ns<yN5+NV}++h?%003Zt1snhjgn0OGzyIwsGgtn{
zOq!`hRu@muB82XhMY8ws2K8Mn-G)|WQ>&2oDURAzwS3$Al52CnX^!F)MiGa@;usXs
zjA!`w(w9Q%B_;2FDk66klx$84V=#ijf7{nSq5uD0)y(4o$-ef`LbB$fIqXv~u?ds_
zt&Y9G>OBR|si^h=o?)Q6c^iR#OYIule0qHcOSdC7ux>)o8`QaRyT~G#(GAKBCA8{V
zx@!?HRHSF=HSj$D`S_(7GbB|O9A*F2lN5%XH2RgFdN}!ile9;`<p~us79N=?9?v`O
z%B5^!uIL~8o5f*ZuvSuc((lC1)2?cFO!rr>N4qiT4uivg@CaG0QY4~=ih)c%o~-Gl
z7!h<PA~Kz)h??#wL`8QDqR{<SCV?j1WiUp7cu4%ms)f0uNPMWQ3>q|a=;G9r0h8rS
zZDIE8)+}v*cI$N{P2&thaU8+2$s~Rog5xNL!D+gvaFaC4U&qZ0HYm%YEf&ikCe;c@
z3H72eO0{4FFDl9hNy4mZVG)#Hl-8V^EuPzgkWX$vlElrYFb~L+mw*I*8AhqAkT@)c
zUwc%UR5W$hSU57Hk}tyQ)x=<dLcbO{aub4xEf|J>h)p?p08<+P;OlZjoaD)MkRh(Z
zJjfSM^#LArS;&A}6v$1fA_nkvk%Cox@*xZ_ChW4%Nm{vJCYU3fp}j6)Fm?a9+|a6c
z47_E>A~@eI4w_|ImoxM;8sNvxFEbnDAInPHAQ3UCwkd~@X2atEoT8cM49Br9&=|~X
zQF)Yqs&IpH{1SPExO)0>PQlN#)a7Qu|Do%S@bHfDh)bIBvLN!6ORA$|YB_O9Q%+Z$
z6<?Sy@@-n4Z}M$iUTO3#Tv-W%{7ZZ*DlQsqRVKKLxGiq;(a#A$kK~Em6ZF9kjW1h8
zpFUPG4ZE2jwIQ?RikkE=&|Y#_N_5=@4t9Effrf+zA7^S1hWUQ^ntaVbO+ozVj+!}s
zIeZO5W1WBV#Jle!M55mx<ImF{3kv1KgVkp5Ucp3od|*Ft|0Ldm1foSyjPR!rM?~ea
zAe9xPswKAxE{l_Hia#qWW<xXTO^Ncib((dBDP!Gco$aBSC<HvN;gx8Reh`{^^@5Rq
z0riW5(X+ZYtaQK4X?-zBvUM`ciVVvV#QBL;1qW0EKa`)Y`cy9Do37Oj-Lq)0Gaha<
zga)C?t6a&$v?Te6hQBe-HZIowb6k*Spl*<{VP|r?d8yl!OnJ$t0Jr!e2;4^RpZC)%
z)$==lAH6+c8zO^!#l!-f5X>U1=Z>R)wCcS{n^0NohcNtIc!^g11@~2C1mNbRZLqAn
zzcZ3(8O~;DwgLeWKjP7)ZDa3BzI6}+oCW9&<-d6Vj4$~;Z(#h%!#ut=o<HOl$RAVn
z`&j1A#lIJi%iI6j`M*rx=hZJqP@snwa#j0ba0I^w<!K>iaf38vtbHsXXX9*tL$Ezr
zf7rpt-!t4dsYZwuesHQ0H6)D*khP}c3wb_N23QWY)*9%yz{%bNjNpum(udhz0m4vk
zkPP+;vY|fkh5QAT(MC`k>L2<Yjm5(aFgubXPZ3j!@c@g&8X2iMpY(>Zj*9$H^nrX;
zU>F;s-c6s8A-{<&s&3X~mMFb{)p)9&jg+$Jye%nVku$r^Adq7(A`+|Nh({ufq)==C
z6%v*qQ*3Vkz8fUdp+vk8|6ubf=F{Y;L8uGxX9^=~c_hV^u1phCOhQu2wls9Qo{gw5
zVIeoZs6-M>$k&KDn*zd;Qia&RN<YYB&@XtqCQ{@mQAHh1wEA|KM0KhiqDvErb%Uuq
YGO40j>W|o_BX_~)cWK5&K2nMl03lesG5`Po

diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index ecf4250a..fd2ab0ed 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -119,6 +119,9 @@
             &.copy-task {
               color: #3296fa;
             }
+            &.start-user {
+              color: #676565;
+            }
           }
 
           .node-title {
@@ -669,9 +672,9 @@
 @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');
+    url('iconfont.woff2?t=1724339470412') format('woff2'),
+    url('iconfont.woff?t=1724339470412') format('woff'),
+    url('iconfont.ttf?t=1724339470412') format('truetype');
 }
 
 .iconfont {
@@ -682,7 +685,11 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-Inclusive:before {
+.icon-start-user:before {
+  content: '\e679';
+}
+
+.icon-inclusive:before {
   content: '\e602';
 }
 

From 8f748edd96ce45c51059bd3f4ddb0d41889645b6 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 24 Aug 2024 18:08:10 +0800
Subject: [PATCH 51/62] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E5=A4=9A=E4=BA=BA=E5=AE=A1=E6=89=B9=E7=9A=84=E6=96=87?=
 =?UTF-8?q?=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/NodeHandler.vue        |  2 +-
 src/components/SimpleProcessDesignerV2/src/consts.ts   | 10 +++++-----
 src/components/SimpleProcessDesignerV2/src/node.ts     |  2 +-
 .../src/nodes-config/UserTaskNodeConfig.vue            |  6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index dd0f001b..81b78852 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -81,7 +81,7 @@ const addNode = (type: number) => {
       name: NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string,
       showText: '',
       type: NodeType.USER_TASK_NODE,
-      approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
+      approveMethod: ApproveMethodType.SEQUENTIAL_APPROVE,
       // 超时处理
       rejectHandler: {
         type: RejectHandlerType.FINISH_PROCESS
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index ca8e5577..d0e59558 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -147,7 +147,7 @@ export enum ApproveMethodType {
   /**
    * 随机挑选一人审批
    */
-  RRANDOM_SELECT_ONE_APPROVE = 1,
+  RANDOM_SELECT_ONE_APPROVE = 1,
 
   /**
    * 多人会签(按通过比例)
@@ -421,10 +421,10 @@ export const APPROVE_TYPE: DictDataVO[] = [
 ]
 
 export const APPROVE_METHODS: DictDataVO[] = [
-  { label: '随机挑选一人审批', value: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE },
-  { label: '多人会签(按通过比例%)', value: ApproveMethodType.APPROVE_BY_RATIO },
-  { label: '多人或签(一人通过或拒绝)', value: ApproveMethodType.ANY_APPROVE },
-  { label: '依次审批(按顺序依次审批)', value: ApproveMethodType.SEQUENTIAL_APPROVE }
+  { label: '按顺序依次审批', value: ApproveMethodType.SEQUENTIAL_APPROVE },
+  { label: '会签（可同时审批，至少 % 人必须审批通过）', value: ApproveMethodType.APPROVE_BY_RATIO },
+  { label: '或签(可同时审批，有一人通过即可)', value: ApproveMethodType.ANY_APPROVE },
+  { label: '随机挑选一人审批', value: ApproveMethodType.RANDOM_SELECT_ONE_APPROVE }
 ]
 
 export const CONDITION_CONFIG_TYPES: DictDataVO[] = [
diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index 282600a3..816d9b19 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -190,7 +190,7 @@ export function useNodeForm(nodeType: NodeType) {
   if (nodeType === NodeType.USER_TASK_NODE) {
     configForm.value = {
       candidateStrategy: CandidateStrategy.USER,
-      approveMethod: ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE,
+      approveMethod: ApproveMethodType.SEQUENTIAL_APPROVE,
       approveRatio: 100,
       rejectHandlerType: RejectHandlerType.FINISH_PROCESS,
       assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index e72b1117..969cf48b 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -188,7 +188,7 @@
                       :value="item.value"
                       :label="item.value"
                       :disabled="
-                        item.value !== ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE &&
+                        item.value !== ApproveMethodType.RANDOM_SELECT_ONE_APPROVE &&
                         notAllowedMultiApprovers
                       "
                     >
@@ -547,7 +547,7 @@ const changeCandidateStrategy = () => {
   configForm.value.postIds = []
   configForm.value.userGroups = []
   configForm.value.deptLevel = 1
-  configForm.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
+  configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE
   if (
     configForm.value.candidateStrategy === CandidateStrategy.START_USER ||
     configForm.value.candidateStrategy === CandidateStrategy.USER
@@ -564,7 +564,7 @@ const changedCandidateUsers = () => {
     configForm.value.userIds?.length <= 1 &&
     configForm.value.candidateStrategy === CandidateStrategy.USER
   ) {
-    configForm.value.approveMethod = ApproveMethodType.RRANDOM_SELECT_ONE_APPROVE
+    configForm.value.approveMethod = ApproveMethodType.RANDOM_SELECT_ONE_APPROVE
     configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS
     notAllowedMultiApprovers.value = true
   } else {

From ce0f6edba6606e12cfde5e995915dbd71d58b418 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 26 Aug 2024 13:07:33 +0800
Subject: [PATCH 52/62] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E7=AE=80?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E2=80=9C=E5=AF=BC=E5=85=A5=E2=80=9D=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=8E=9F=E7=94=9F=20bpmn?=
 =?UTF-8?q?=20=E8=AE=BE=E8=AE=A1=E5=99=A8=EF=BC=8C=E5=B7=B2=E7=BB=8F?=
 =?UTF-8?q?=E6=8F=90=E4=BE=9B=E5=AF=BC=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/ModelImportForm.vue | 141 ------------------------
 src/views/bpm/model/index.vue           |  13 ---
 2 files changed, 154 deletions(-)
 delete mode 100644 src/views/bpm/model/ModelImportForm.vue

diff --git a/src/views/bpm/model/ModelImportForm.vue b/src/views/bpm/model/ModelImportForm.vue
deleted file mode 100644
index 9a91e1d5..00000000
--- a/src/views/bpm/model/ModelImportForm.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="导入流程" width="400">
-    <div>
-      <el-upload
-        ref="uploadRef"
-        v-model:file-list="fileList"
-        :action="importUrl"
-        :auto-upload="false"
-        :data="formData"
-        :disabled="formLoading"
-        :headers="uploadHeaders"
-        :limit="1"
-        :on-error="submitFormError"
-        :on-exceed="handleExceed"
-        :on-success="submitFormSuccess"
-        accept=".bpmn, .xml"
-        drag
-        name="bpmnFile"
-      >
-        <Icon class="el-icon--upload" icon="ep:upload-filled" />
-        <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em></div>
-        <template #tip>
-          <div class="el-upload__tip" style="color: red">
-            提示：仅允许导入“bpm”或“xml”格式文件！
-          </div>
-          <div>
-            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
-              <el-form-item label="流程标识" prop="key">
-                <el-input
-                  v-model="formData.key"
-                  placeholder="请输入流标标识"
-                  style="width: 250px"
-                />
-              </el-form-item>
-              <el-form-item label="流程名称" prop="name">
-                <el-input v-model="formData.name" clearable placeholder="请输入流程名称" />
-              </el-form-item>
-              <el-form-item label="流程描述" prop="description">
-                <el-input v-model="formData.description" clearable type="textarea" />
-              </el-form-item>
-            </el-form>
-          </div>
-        </template>
-      </el-upload>
-    </div>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import { getAccessToken, getTenantId } from '@/utils/auth'
-
-defineOptions({ name: 'ModelImportForm' })
-
-const message = useMessage() // 消息弹窗
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  key: '',
-  name: '',
-  description: ''
-})
-const formRules = reactive({
-  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
-  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-const uploadRef = ref() // 上传 Ref
-const importUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/bpm/model/import'
-const uploadHeaders = ref() // 上传 Header 头
-const fileList = ref([]) // 文件列表
-
-/** 打开弹窗 */
-const open = async () => {
-  dialogVisible.value = true
-  resetForm()
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  if (fileList.value.length == 0) {
-    message.error('请上传文件')
-    return
-  }
-  // 提交请求
-  uploadHeaders.value = {
-    Authorization: 'Bearer ' + getAccessToken(),
-    'tenant-id': getTenantId()
-  }
-  formLoading.value = true
-  uploadRef.value!.submit()
-}
-
-/** 文件上传成功 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitFormSuccess = async (response: any) => {
-  if (response.code !== 0) {
-    message.error(response.msg)
-    formLoading.value = false
-    return
-  }
-  // 提示成功
-  message.success('导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】')
-  dialogVisible.value = false
-  // 发送操作成功的事件
-  emit('success')
-}
-
-/** 上传错误提示 */
-const submitFormError = (): void => {
-  message.error('导入流程失败，请您重新上传！')
-  formLoading.value = false
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  // 重置上传状态和文件
-  formLoading.value = false
-  uploadRef.value?.clearFiles()
-  // 重置表单
-  formData.value = {
-    key: '',
-    name: '',
-    description: ''
-  }
-  formRef.value?.resetFields()
-}
-
-/** 文件数超出提示 */
-const handleExceed = (): void => {
-  message.error('最多只能上传一个文件！')
-}
-</script>
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index eec116fc..d827a439 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -60,9 +60,6 @@
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新建流程
         </el-button>
-        <el-button type="success" plain @click="openImportForm" v-hasPermi="['bpm:model:import']">
-          <Icon icon="ep:upload" class="mr-5px" /> 导入流程
-        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -215,9 +212,6 @@
   <!-- 表单弹窗：添加/修改流程 -->
   <ModelForm ref="formRef" @success="getList" />
 
-  <!-- 表单弹窗：导入流程 -->
-  <ModelImportForm ref="importFormRef" @success="getList" />
-
   <!-- 弹窗：表单详情 -->
   <Dialog title="表单详情" v-model="formDetailVisible" width="800">
     <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
@@ -241,7 +235,6 @@ import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
 import ModelForm from './ModelForm.vue'
-import ModelImportForm from '@/views/bpm/model/ModelImportForm.vue'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import { CategoryApi } from '@/api/bpm/category'
 
@@ -294,12 +287,6 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
-/** 添加/修改操作 */
-const importFormRef = ref()
-const openImportForm = () => {
-  importFormRef.value.open()
-}
-
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {

From 898593696c536876e4a77206a7694a563d19681c Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 26 Aug 2024 18:38:24 +0800
Subject: [PATCH 53/62] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9ABPM=20Mod?=
 =?UTF-8?q?el=20=E5=A2=9E=E5=8A=A0=20type=20=E6=A0=87=E8=AE=B0=E6=98=AF=20?=
 =?UTF-8?q?BPMN=20=E8=AE=BE=E8=AE=A1=E5=99=A8=EF=BC=8C=E8=BF=98=E6=98=AF?=
 =?UTF-8?q?=20SIMPLE=20=E9=92=89=E9=92=89=E8=AE=BE=E8=AE=A1=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/model/index.ts           |   4 +
 src/utils/constants.ts               |  12 ++
 src/utils/dict.ts                    |   1 +
 src/views/bpm/model/ModelForm.vue    | 166 +++++++++++++++------------
 src/views/bpm/model/editor/index.vue |   6 +-
 src/views/bpm/model/index.vue        |  51 ++++----
 6 files changed, 135 insertions(+), 105 deletions(-)

diff --git a/src/api/bpm/model/index.ts b/src/api/bpm/model/index.ts
index 7e9a3614..46728637 100644
--- a/src/api/bpm/model/index.ts
+++ b/src/api/bpm/model/index.ts
@@ -38,6 +38,10 @@ export const updateModel = async (data: ModelVO) => {
   return await request.put({ url: '/bpm/model/update', data: data })
 }
 
+export const updateModelBpmn = async (data: ModelVO) => {
+  return await request.put({ url: '/bpm/model/update-bpmn', data: data })
+}
+
 // 任务状态修改
 export const updateModelState = async (id: number, state: number) => {
   const data = {
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index cfa785b0..874f5da0 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -437,3 +437,15 @@ export const ErpBizType = {
   SALE_OUT: 21,
   SALE_RETURN: 22
 }
+
+// ========== BPM 模块 ==========
+
+export const BpmModelType = {
+  BPMN: 10, // BPMN 设计器
+  SIMPLE: 20 // 简易设计器
+}
+
+export const BpmModelFormType = {
+  NORMAL: 10, // 流程表单
+  CUSTOM: 20 // 业务表单
+}
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 7fbcfebc..611c6b2d 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -143,6 +143,7 @@ export enum DICT_TYPE {
   INFRA_OPERATE_TYPE = 'infra_operate_type',
 
   // ========== BPM 模块 ==========
+  BPM_MODEL_TYPE = 'bpm_model_type',
   BPM_MODEL_FORM_TYPE = 'bpm_model_form_type',
   BPM_TASK_CANDIDATE_STRATEGY = 'bpm_task_candidate_strategy',
   BPM_PROCESS_INSTANCE_STATUS = 'bpm_process_instance_status',
diff --git a/src/views/bpm/model/ModelForm.vue b/src/views/bpm/model/ModelForm.vue
index ce60edca..9c31172a 100644
--- a/src/views/bpm/model/ModelForm.vue
+++ b/src/views/bpm/model/ModelForm.vue
@@ -35,7 +35,7 @@
           placeholder="请输入流程名称"
         />
       </el-form-item>
-      <el-form-item v-if="formData.id" label="流程分类" prop="category">
+      <el-form-item label="流程分类" prop="category">
         <el-select
           v-model="formData.category"
           clearable
@@ -50,73 +50,84 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item v-if="formData.id" label="流程图标" prop="icon">
-        <UploadImg v-model="formData.icon" :limit="1" height="128px" width="128px" />
+      <el-form-item label="流程图标" prop="icon">
+        <UploadImg v-model="formData.icon" :limit="1" height="64px" width="64px" />
       </el-form-item>
       <el-form-item label="流程描述" prop="description">
         <el-input v-model="formData.description" clearable type="textarea" />
       </el-form-item>
-      <div v-if="formData.id">
-        <el-form-item label="表单类型" prop="formType">
-          <el-radio-group v-model="formData.formType">
-            <el-radio
-              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
-              :key="dict.value"
-              :label="dict.value"
-            >
-              {{ dict.label }}
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
-          <el-select v-model="formData.formId" clearable style="width: 100%">
-            <el-option
-              v-for="form in formList"
-              :key="form.id"
-              :label="form.name"
-              :value="form.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="formData.formType === 20"
-          label="表单提交路由"
-          prop="formCustomCreatePath"
-        >
-          <el-input
-            v-model="formData.formCustomCreatePath"
-            placeholder="请输入表单提交路由"
-            style="width: 330px"
-          />
-          <el-tooltip
-            class="item"
-            content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create"
-            effect="light"
-            placement="top"
+      <el-form-item label="流程类型" prop="type">
+        <el-radio-group v-model="formData.type">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
+            :key="dict.value"
+            :label="dict.value"
           >
-            <i class="el-icon-question" style="padding-left: 5px"></i>
-          </el-tooltip>
-        </el-form-item>
-        <el-form-item
-          v-if="formData.formType === 20"
-          label="表单查看地址"
-          prop="formCustomViewPath"
-        >
-          <el-input
-            v-model="formData.formCustomViewPath"
-            placeholder="请输入表单查看的组件地址"
-            style="width: 330px"
-          />
-          <el-tooltip
-            class="item"
-            content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail"
-            effect="light"
-            placement="top"
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="表单类型" prop="formType">
+        <el-radio-group v-model="formData.formType">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
+            :key="dict.value"
+            :label="dict.value"
           >
-            <i class="el-icon-question" style="padding-left: 5px"></i>
-          </el-tooltip>
-        </el-form-item>
-      </div>
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
+        <el-select v-model="formData.formId" clearable style="width: 100%">
+          <el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="formData.formType === 20"
+        label="表单提交路由"
+        prop="formCustomCreatePath"
+      >
+        <el-input
+          v-model="formData.formCustomCreatePath"
+          placeholder="请输入表单提交路由"
+          style="width: 330px"
+        />
+        <el-tooltip
+          class="item"
+          content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create.vue"
+          effect="light"
+          placement="top"
+        >
+          <i class="el-icon-question" style="padding-left: 5px"></i>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item v-if="formData.formType === 20" label="表单查看地址" prop="formCustomViewPath">
+        <el-input
+          v-model="formData.formCustomViewPath"
+          placeholder="请输入表单查看的组件地址"
+          style="width: 330px"
+        />
+        <el-tooltip
+          class="item"
+          content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail.vue"
+          effect="light"
+          placement="top"
+        >
+          <i class="el-icon-question" style="padding-left: 5px"></i>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item label="是否可见" prop="visible">
+        <el-radio-group v-model="formData.visible">
+          <el-radio
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :key="dict.value as string"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
@@ -125,11 +136,12 @@
   </Dialog>
 </template>
 <script lang="ts" setup>
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
 import { ElMessageBox } from 'element-plus'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
 import { CategoryApi } from '@/api/bpm/category'
+import { BpmModelFormType, BpmModelType } from '@/utils/constants'
 
 defineOptions({ name: 'ModelForm' })
 
@@ -141,21 +153,27 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
-  formType: 10,
   name: '',
   category: undefined,
   icon: undefined,
   description: '',
+  type: BpmModelType.BPMN,
+  formType: BpmModelFormType.NORMAL,
   formId: '',
   formCustomCreatePath: '',
-  formCustomViewPath: ''
+  formCustomViewPath: '',
+  visible: true
 })
 const formRules = reactive({
-  name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
-  key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
-  category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
-  icon: [{ required: true, message: '参数图标不能为空', trigger: 'blur' }],
-  value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
+  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
+  icon: [{ required: true, message: '流程图标不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
+  formType: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
+  formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
+  formCustomCreatePath: [{ required: true, message: '表单提交路由不能为空', trigger: 'blur' }],
+  formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }],
   visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
@@ -225,14 +243,16 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    formType: 10,
     name: '',
     category: undefined,
-    icon: '',
+    icon: undefined,
     description: '',
+    type: BpmModelType.BPMN,
+    formType: BpmModelFormType.NORMAL,
     formId: '',
     formCustomCreatePath: '',
-    formCustomViewPath: ''
+    formCustomViewPath: '',
+    visible: true
   }
   formRef.value?.resetFields()
 }
diff --git a/src/views/bpm/model/editor/index.vue b/src/views/bpm/model/editor/index.vue
index 29bca71c..3e773691 100644
--- a/src/views/bpm/model/editor/index.vue
+++ b/src/views/bpm/model/editor/index.vue
@@ -58,17 +58,17 @@ const initModeler = (item) => {
 }
 
 /** 添加/修改模型 */
-const save = async (bpmnXml) => {
+const save = async (bpmnXml: string) => {
   const data = {
     ...model.value,
     bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
   } as unknown as ModelApi.ModelVO
   // 提交
   if (data.id) {
-    await ModelApi.updateModel(data)
+    await ModelApi.updateModelBpmn(data)
     message.success('修改成功')
   } else {
-    await ModelApi.createModel(data)
+    await ModelApi.updateModelBpmn(data)
     message.success('新增成功')
   }
   // 跳转回去
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index d827a439..8ae3032f 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -58,7 +58,7 @@
           @click="openForm('create')"
           v-hasPermi="['bpm:model:create']"
         >
-          <Icon icon="ep:plus" class="mr-5px" /> 新建流程
+          <Icon icon="ep:plus" class="mr-5px" /> 新建
         </el-button>
       </el-form-item>
     </el-form>
@@ -147,7 +147,7 @@
           </template>
         </el-table-column>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="240" fixed="right">
+      <el-table-column label="操作" align="center" width="250" fixed="right">
         <template #default="scope">
           <el-button
             link
@@ -155,7 +155,7 @@
             @click="openForm('update', scope.row.id)"
             v-hasPermi="['bpm:model:update']"
           >
-            修改流程
+            修改
           </el-button>
           <el-button
             link
@@ -163,15 +163,7 @@
             @click="handleDesign(scope.row)"
             v-hasPermi="['bpm:model:update']"
           >
-            设计流程
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="handleSimpleDesign(scope.row)"
-            v-hasPermi="['bpm:model:update']"
-          >
-            仿钉钉设计流程
+            设计
           </el-button>
           <el-button
             link
@@ -179,7 +171,7 @@
             @click="handleDeploy(scope.row)"
             v-hasPermi="['bpm:model:deploy']"
           >
-            发布流程
+            发布
           </el-button>
           <el-button
             link
@@ -187,7 +179,7 @@
             v-hasPermi="['bpm:process-definition:query']"
             @click="handleDefinitionList(scope.row)"
           >
-            流程定义
+            历史
           </el-button>
           <el-button
             link
@@ -237,6 +229,7 @@ import * as FormApi from '@/api/bpm/form'
 import ModelForm from './ModelForm.vue'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import { CategoryApi } from '@/api/bpm/category'
+import { BpmModelType } from '@/utils/constants'
 
 defineOptions({ name: 'BpmModel' })
 
@@ -321,21 +314,21 @@ const handleChangeState = async (row) => {
 
 /** 设计流程 */
 const handleDesign = (row) => {
-  push({
-    name: 'BpmModelEditor',
-    query: {
-      modelId: row.id
-    }
-  })
-}
-
-const handleSimpleDesign = (row) => {
-  push({
-    name: 'SimpleWorkflowDesignEditor',
-    query: {
-      modelId: row.id
-    }
-  })
+  if (row.type == BpmModelType.BPMN) {
+    push({
+      name: 'BpmModelEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  } else {
+    push({
+      name: 'SimpleWorkflowDesignEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  }
 }
 
 /** 发布流程 */

From 4a2a7b760aee8b1eac3e921775d703c4322b608c Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 20 Sep 2024 22:11:19 +0800
Subject: [PATCH 54/62] =?UTF-8?q?=E3=80=90=E9=97=AE=E9=A2=98=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E3=80=91=E4=BB=BF=E9=92=89=E9=92=89=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E5=99=A8=EF=BC=8C=E6=9D=A1=E4=BB=B6=E8=8A=82=E7=82=B9=EF=BC=8C?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E5=AD=97=E6=AE=B5=E4=B8=8D=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/SimpleProcessDesigner.vue             | 57 +++++++++++++++++--
 src/views/bpm/simpleWorkflow/index.vue        | 50 +---------------
 2 files changed, 55 insertions(+), 52 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index 7e9b3a3b..589672d9 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -38,18 +38,44 @@
 import ProcessNodeTree from './ProcessNodeTree.vue'
 import { updateBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
 import { SimpleFlowNode, NodeType, NodeId, NODE_DEFAULT_TEXT } from './consts'
-
+import { getModel } from '@/api/bpm/model'
+import { getForm, FormVO } from '@/api/bpm/form'
+import { handleTree } from '@/utils/tree'
+import * as RoleApi from '@/api/system/role'
+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'
 defineOptions({
   name: 'SimpleProcessDesigner'
 })
-
 const router = useRouter() // 路由
 const props = defineProps({
-  modelId: String
+  modelId: {
+    type: String,
+    required: true
+  }
 })
+
+const formFields = ref<string[]>([])
+const formType = ref(20)
+const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
+const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
+const deptTreeOptions = ref()
+const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
+provide('formFields', formFields)
+provide('formType', formType)
+provide('roleList', roleOptions)
+provide('postList', postOptions)
+provide('userList', userOptions)
+provide('deptList', deptOptions)
+provide('userGroupList', userGroupOptions)
+provide('deptTree', deptTreeOptions)
+
 const message = useMessage() // 国际化
 const processNodeTree = ref<SimpleFlowNode | undefined>()
-
 const errorDialogVisible = ref(false)
 let errorNodes: SimpleFlowNode[] = []
 const saveSimpleFlowModel = async () => {
@@ -137,6 +163,29 @@ const zoomIn = () => {
 }
 
 onMounted(async () => {
+  // 获取表单字段
+  const bpmnModel = await getModel(props.modelId)
+  if (bpmnModel) {
+    formType.value = bpmnModel.formType
+    if (formType.value === 10) {
+      const bpmnForm = (await getForm(bpmnModel.formId)) as unknown as FormVO
+      formFields.value = bpmnForm?.fields
+    }
+  }
+  // 获得角色列表
+  roleOptions.value = await RoleApi.getSimpleRoleList()
+  // 获得岗位列表
+  postOptions.value = await PostApi.getSimplePostList()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+  // 获得部门列表
+  deptOptions.value = await DeptApi.getSimpleDeptList()
+
+  deptTreeOptions.value = handleTree(deptOptions.value as DeptApi.DeptVO[], 'id')
+  // 获取用户组列表
+  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
+
+  // 获取 SIMPLE 设计器模型
   const result = await getBpmSimpleModel(props.modelId)
   if (result) {
     processNodeTree.value = result
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simpleWorkflow/index.vue
index fe73971c..691cf2e5 100644
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
@@ -3,57 +3,11 @@
 </template>
 <script setup lang="ts">
 import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/'
-import { getModel } from '@/api/bpm/model'
-import { getForm, FormVO } from '@/api/bpm/form'
-import { handleTree } from '@/utils/tree'
-import * as RoleApi from '@/api/system/role'
-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'
+
 defineOptions({
   name: 'SimpleWorkflowDesignEditor'
 })
 const { query } = useRoute() // 路由的查询
-const modelId: string | undefined = query.modelId as string
-const formFields = ref<string[]>([])
-const formType = ref(20)
-const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
-const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
-const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
-const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
-const deptTreeOptions = ref()
-const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
-provide('formFields', formFields)
-provide('formType', formType)
-provide('roleList', roleOptions)
-provide('postList', postOptions)
-provide('userList', userOptions)
-provide('deptList', deptOptions)
-provide('userGroupList', userGroupOptions)
-provide('deptTree', deptTreeOptions)
-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
-      formFields.value = bpmnForm?.fields
-    }
-  }
-  // 获得角色列表
-  roleOptions.value = await RoleApi.getSimpleRoleList()
-  // 获得岗位列表
-  postOptions.value = await PostApi.getSimplePostList()
-  // 获得用户列表
-  userOptions.value = await UserApi.getSimpleUserList()
-  // 获得部门列表
-  deptOptions.value = await DeptApi.getSimpleDeptList()
-
-  deptTreeOptions.value = handleTree(deptOptions.value as DeptApi.DeptVO[], 'id')
-
-  // 用户组列表
-  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
-})
+const modelId = query.modelId as string
 </script>
 <style lang="scss" scoped></style>

From 4680a7dcfd135643fd13f5c3099250b27cbb1a60 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 21 Sep 2024 11:01:56 +0800
Subject: [PATCH 55/62] =?UTF-8?q?=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8,=20=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       | 13 ++---
 .../SimpleProcessDesignerV2/src/consts.ts     | 16 ++++--
 .../src/nodes-config/ConditionNodeConfig.vue  | 51 +++++++++----------
 .../src/nodes/ExclusiveNode.vue               |  8 ++-
 .../SimpleProcessDesignerV2/src/utils.ts      |  2 +-
 5 files changed, 44 insertions(+), 46 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index 81b78852..629031b8 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -120,10 +120,9 @@ const addNode = (type: number) => {
           showText: '',
           type: NodeType.CONDITION_NODE,
           childNode: undefined,
-          attributes: {
-            conditionType: 1,
-            defaultFlow: false
-          }
+          conditionType: 1,
+          defaultFlow: false
+          
         },
         {
           id: 'Flow_' + generateUUID(),
@@ -131,10 +130,8 @@ const addNode = (type: number) => {
           showText: '其它情况进入此流程',
           type: NodeType.CONDITION_NODE,
           childNode: undefined,
-          attributes: {
-            conditionType: undefined,
-            defaultFlow: true
-          }
+          conditionType: undefined,
+          defaultFlow: true
         }
       ]
     }
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index d0e59558..0364c5e6 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -62,7 +62,6 @@ export interface SimpleFlowNode {
   type: NodeType
   name: string
   showText?: string
-  attributes?: any
   // 孩子节点
   childNode?: SimpleFlowNode
   // 条件节点
@@ -89,6 +88,15 @@ export interface SimpleFlowNode {
   assignEmptyHandler?: AssignEmptyHandler
   // 审批节点的审批人与发起人相同时，对应的处理类型
   assignStartUserHandlerType?: number
+  // 条件类型
+  conditionType?: ConditionType
+  // 条件表达式
+  conditionExpression?: string
+  // 条件组
+  conditionGroups?: ConditionGroup
+  // 是否默认的条件
+  defaultFlow?: boolean
+
 }
 // 候选人策略枚举 （ 用于审批节点。抄送节点 )
 export enum CandidateStrategy {
@@ -292,7 +300,7 @@ export enum TimeUnitType {
 }
 
 // 条件配置类型 （ 用于条件节点配置 ）
-export enum ConditionConfigType {
+export enum ConditionType {
   /**
    * 条件表达式
    */
@@ -428,8 +436,8 @@ export const APPROVE_METHODS: DictDataVO[] = [
 ]
 
 export const CONDITION_CONFIG_TYPES: DictDataVO[] = [
-  { label: '条件表达式', value: 1 },
-  { label: '条件规则', value: 2 }
+  { label: '条件表达式', value: ConditionType.EXPRESSION },
+  { label: '条件规则', value: ConditionType.RULE }
 ]
 
 // 时间单位类型
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
index 4ffcd4c5..3a193d0f 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
@@ -26,19 +26,17 @@
       </div>
     </template>
     <div>
-      <div class="mb-3 text-size-sm" v-if="currentNode.attributes.defaultFlow"
-        >其它条件不满足进入此分支（该分支不可编辑和删除）</div
-      >
+      <div class="mb-3 font-size-16px" v-if="currentNode.defaultFlow">其它条件不满足进入此分支（该分支不可编辑和删除）</div>
       <div v-else>
         <el-form
           ref="formRef"
-          :model="currentNode.attributes"
+          :model="currentNode"
           :rules="formRules"
           label-position="top"
         >
           <el-form-item label="配置方式" prop="conditionType">
             <el-radio-group
-              v-model="currentNode.attributes.conditionType"
+              v-model="currentNode.conditionType"
               @change="changeConditionType"
             >
               <el-radio
@@ -53,18 +51,18 @@
           </el-form-item>
 
           <el-form-item
-            v-if="currentNode.attributes.conditionType === 1"
+            v-if="currentNode.conditionType === 1"
             label="条件表达式"
             prop="conditionExpression"
           >
             <el-input
               type="textarea"
-              v-model="currentNode.attributes.conditionExpression"
+              v-model="currentNode.conditionExpression"
               clearable
               style="width: 100%"
             />
           </el-form-item>
-          <el-form-item v-if="currentNode.attributes.conditionType === 2" label="条件规则">
+          <el-form-item v-if="currentNode.conditionType === 2" label="条件规则">
             <div class="condition-group-tool">
               <div class="flex items-center">
                 <div class="mr-4">条件组关系</div>
@@ -75,9 +73,6 @@
                   inactive-text="或"
                 />
               </div>
-              <!-- <div class="flex items-center"> 
-                  <el-button size="small" type="primary">添加条件组</el-button>
-                </div>  -->
             </div>
             <el-space direction="vertical" :spacer="conditionGroups.and ? '且' : '或'">
               <el-card
@@ -166,7 +161,7 @@
 import {
   SimpleFlowNode,
   CONDITION_CONFIG_TYPES,
-  ConditionConfigType,
+  ConditionType,
   COMPARISON_OPERATORS,
   ConditionGroup,
   Condition,
@@ -183,7 +178,7 @@ const conditionConfigTypes = computed(() => {
   return CONDITION_CONFIG_TYPES.filter((item) => {
     // 业务表单暂时去掉条件规则选项
     if (formType?.value !== 10) {
-      return item.value === 1
+      return item.value === ConditionType.RULE
     } else {
       return true
     }
@@ -202,9 +197,9 @@ const props = defineProps({
 })
 const settingVisible = ref(false)
 const open = () => {
-  if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE) {
-    if (currentNode.value.attributes.conditionGroups) {
-      conditionGroups.value = currentNode.value.attributes.conditionGroups
+  if (currentNode.value.conditionType === ConditionType.RULE) {
+    if (currentNode.value.conditionGroups) {
+      conditionGroups.value = currentNode.value.conditionGroups
     }
   }
   settingVisible.value = true
@@ -227,7 +222,7 @@ const blurEvent = () => {
   showInput.value = false
   currentNode.value.name =
     currentNode.value.name ||
-    getDefaultConditionNodeName(props.nodeIndex, currentNode.value.attributes?.defaultFlow)
+    getDefaultConditionNodeName(props.nodeIndex, currentNode.value?.defaultFlow)
 }
 
 const currentNode = ref<SimpleFlowNode>(props.conditionNode)
@@ -256,7 +251,7 @@ const formRef = ref() // 表单 Ref
 
 // 保存配置
 const saveConfig = async () => {
-  if (!currentNode.value.attributes.defaultFlow) {
+  if (!currentNode.value.defaultFlow) {
     // 校验表单
     if (!formRef) return false
     const valid = await formRef.value.validate()
@@ -266,12 +261,12 @@ const saveConfig = async () => {
       return false
     }
     currentNode.value.showText = showText
-    if (currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION) {
-      currentNode.value.attributes.conditionGroups = undefined
+    if (currentNode.value.conditionType === ConditionType.EXPRESSION) {
+      currentNode.value.conditionGroups = undefined
     }
-    if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE) {
-      currentNode.value.attributes.conditionExpression = undefined
-      currentNode.value.attributes.conditionGroups = conditionGroups.value
+    if (currentNode.value.conditionType === ConditionType.RULE) {
+      currentNode.value.conditionExpression = undefined
+      currentNode.value.conditionGroups = conditionGroups.value
     }
   }
   settingVisible.value = false
@@ -279,12 +274,12 @@ const saveConfig = async () => {
 }
 const getShowText = (): string => {
   let showText = ''
-  if (currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION) {
-    if (currentNode.value.attributes.conditionExpression) {
-      showText = `表达式：${currentNode.value.attributes.conditionExpression}`
+  if (currentNode.value.conditionType === ConditionType.EXPRESSION) {
+    if (currentNode.value.conditionExpression) {
+      showText = `表达式：${currentNode.value.conditionExpression}`
     }
   }
-  if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE) {
+  if (currentNode.value.conditionType === ConditionType.RULE) {
     // 条件组是否为与关系
     const groupAnd = conditionGroups.value.and
     let warningMesg: undefined | string = undefined
@@ -298,7 +293,7 @@ const getShowText = (): string => {
                 getFieldTitle(rule.leftSide) + ' ' + getOpName(rule.opCode) + ' ' + rule.rightSide
               )
             } else {
-              // 又一条规则不完善。提示错误
+              // 有一条规则不完善。提示错误
               warningMesg = '请完善条件规则'
               return ''
             }
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
index 568afa28..385a81ff 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
@@ -130,7 +130,7 @@ const blurEvent = (index: number) => {
   showInputs.value[index] = false
   const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode
   conditionNode.name =
-    conditionNode.name || getDefaultConditionNodeName(index, conditionNode.attributes?.defaultFlow)
+    conditionNode.name || getDefaultConditionNodeName(index, conditionNode.defaultFlow)
 }
 
 // 点击条件名称
@@ -156,10 +156,8 @@ const addCondition = () => {
       type: NodeType.CONDITION_NODE,
       childNode: undefined,
       conditionNodes: [],
-      attributes: {
-        conditionType: 1,
-        defaultFlow: false
-      }
+      conditionType: 1,
+      defaultFlow: false
     }
     conditionNodes.splice(lastIndex, 0, conditionData)
   }
diff --git a/src/components/SimpleProcessDesignerV2/src/utils.ts b/src/components/SimpleProcessDesignerV2/src/utils.ts
index e71f74dc..854d7032 100644
--- a/src/components/SimpleProcessDesignerV2/src/utils.ts
+++ b/src/components/SimpleProcessDesignerV2/src/utils.ts
@@ -1,7 +1,7 @@
 import { TimeUnitType, ApproveType, APPROVE_TYPE } from './consts'
 
 // 获取条件节点默认的名称
-export const getDefaultConditionNodeName = (index: number, defaultFlow: boolean): string => {
+export const getDefaultConditionNodeName = (index: number, defaultFlow: boolean | undefined): string => {
   if (defaultFlow) {
     return '其它情况'
   }

From 27d24cd02d8598287591e58de9e5057bbfb75986 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 1 Oct 2024 23:35:11 +0800
Subject: [PATCH 56/62] =?UTF-8?q?=E3=80=90=E5=B7=A5=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?=E3=80=91-=20=E6=B5=81=E7=A8=8B=E5=AE=9E=E4=BE=8B=E6=96=B0?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/processInstance/index.ts          |  36 ++-
 src/api/bpm/task/index.ts                     |  46 +++
 .../src/SimpleProcessDesigner.vue             |  89 +++---
 src/router/modules/remaining.ts               |   2 +-
 .../detail/ProcessInstanceOperationButton.vue |   6 +-
 .../detail/ProcessInstanceTimeline.vue        | 282 ++++++++++++++++--
 .../bpm/processInstance/detail/index_new.vue  | 195 +++++++-----
 7 files changed, 501 insertions(+), 155 deletions(-)

diff --git a/src/api/bpm/processInstance/index.ts b/src/api/bpm/processInstance/index.ts
index 9122b2b9..df348d62 100644
--- a/src/api/bpm/processInstance/index.ts
+++ b/src/api/bpm/processInstance/index.ts
@@ -1,6 +1,6 @@
 import request from '@/config/axios'
 import { ProcessDefinitionVO } from '@/api/bpm/model'
-
+import { NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
 export type Task = {
   id: string
   name: string
@@ -22,6 +22,35 @@ export type ProcessInstanceVO = {
   processDefinition?: ProcessDefinitionVO
 }
 
+// 用户信息
+export type User = {
+  id: number,
+  nickname: string,
+  avatar: string
+}
+
+// 审批任务信息
+export type ApprovalTaskInfo = {
+  id: number,
+  ownerUser: User,
+  assigneeUser: User,
+  status: number,
+  reason: string
+
+}
+
+// 审批节点信息
+export type ApprovalNodeInfo = {
+  id : number
+  name: string
+  nodeType: NodeType
+  status: number
+  startTime?: Date
+  endTime?: Date
+  candidateUserList?: User[]
+  tasks: ApprovalTaskInfo[]
+}
+
 export const getProcessInstanceMyPage = async (params: any) => {
   return await request.get({ url: '/bpm/process-instance/my-page', params })
 }
@@ -57,3 +86,8 @@ export const getProcessInstance = async (id: string) => {
 export const getProcessInstanceCopyPage = async (params: any) => {
   return await request.get({ url: '/bpm/process-instance/copy/page', params })
 }
+
+export const getApprovalDetail = async (processInstanceId?:string, processDefinitionId?:string) => {
+  const param = processInstanceId ? '?processInstanceId='+ processInstanceId : '?processDefinitionId='+ processDefinitionId
+  return await request.get({ url: 'bpm/process-instance/get-approval-detail'+ param })
+}
diff --git a/src/api/bpm/task/index.ts b/src/api/bpm/task/index.ts
index f3cda9f7..d32b2e14 100644
--- a/src/api/bpm/task/index.ts
+++ b/src/api/bpm/task/index.ts
@@ -1,5 +1,51 @@
 import request from '@/config/axios'
 
+/**
+ * 任务状态枚举
+ */
+export enum TaskStatusEnum {
+  /**
+   * 未开始
+   */
+  NOT_START = -1,
+
+   /**
+   * 待审批
+   */
+   WAIT = 0,
+  /**
+   * 审批中
+   */
+  RUNNING = 1,
+  /**
+   * 审批通过
+   */
+  APPROVE = 2,
+
+  /**
+   * 审批不通过
+   */
+  REJECT = 3,
+  
+  /**
+   * 已取消
+   */
+  CANCEL = 4,
+  /**
+   * 已退回
+   */
+  RETURN = 5,
+  /**
+   * 委派中
+   */
+  DELEGATE = 6,
+  /**
+   * 审批通过中
+   */
+  APPROVING = 7,
+
+}
+
 export type TaskVO = {
   id: number
 }
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index 589672d9..4da5deb2 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="simple-flow-canvas">
-    <div class="simple-flow-container">
+  <div class="simple-flow-canvas" v-loading="loading">
+    <div class="simple-flow-container" >
       <div class="top-area-container">
         <div class="top-actions">
           <div class="canvas-control">
@@ -15,7 +15,10 @@
         </div>
       </div>
       <div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
-        <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
+        <ProcessNodeTree
+          v-if="processNodeTree"
+          v-model:flow-node="processNodeTree"
+        />
       </div>
     </div>
     <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
@@ -46,6 +49,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'
+import { fa } from 'element-plus/es/locale'
 defineOptions({
   name: 'SimpleProcessDesigner'
 })
@@ -56,7 +60,7 @@ const props = defineProps({
     required: true
   }
 })
-
+const loading = ref(true)
 const formFields = ref<string[]>([])
 const formType = ref(20)
 const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
@@ -163,44 +167,49 @@ const zoomIn = () => {
 }
 
 onMounted(async () => {
-  // 获取表单字段
-  const bpmnModel = await getModel(props.modelId)
-  if (bpmnModel) {
-    formType.value = bpmnModel.formType
-    if (formType.value === 10) {
-      const bpmnForm = (await getForm(bpmnModel.formId)) as unknown as FormVO
-      formFields.value = bpmnForm?.fields
-    }
-  }
-  // 获得角色列表
-  roleOptions.value = await RoleApi.getSimpleRoleList()
-  // 获得岗位列表
-  postOptions.value = await PostApi.getSimplePostList()
-  // 获得用户列表
-  userOptions.value = await UserApi.getSimpleUserList()
-  // 获得部门列表
-  deptOptions.value = await DeptApi.getSimpleDeptList()
-
-  deptTreeOptions.value = handleTree(deptOptions.value as DeptApi.DeptVO[], 'id')
-  // 获取用户组列表
-  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
-
-  // 获取 SIMPLE 设计器模型
-  const result = await getBpmSimpleModel(props.modelId)
-  if (result) {
-    processNodeTree.value = result
-  } else {
-    // 初始值
-    processNodeTree.value = {
-      name: '发起人',
-      type: NodeType.START_USER_NODE,
-      id: NodeId.START_USER_NODE_ID,
-      childNode: {
-        id: NodeId.END_EVENT_NODE_ID,
-        name: '结束',
-        type: NodeType.END_EVENT_NODE
+  try {
+    loading.value = true
+    // 获取表单字段
+    const bpmnModel = await getModel(props.modelId)
+    if (bpmnModel) {
+      formType.value = bpmnModel.formType
+      if (formType.value === 10) {
+        const bpmnForm = (await getForm(bpmnModel.formId)) as unknown as FormVO
+        formFields.value = bpmnForm?.fields
       }
     }
+    // 获得角色列表
+    roleOptions.value = await RoleApi.getSimpleRoleList()
+    // 获得岗位列表
+    postOptions.value = await PostApi.getSimplePostList()
+    // 获得用户列表
+    userOptions.value = await UserApi.getSimpleUserList()
+    // 获得部门列表
+    deptOptions.value = await DeptApi.getSimpleDeptList()
+
+    deptTreeOptions.value = handleTree(deptOptions.value as DeptApi.DeptVO[], 'id')
+    // 获取用户组列表
+    userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
+
+    // 获取 SIMPLE 设计器模型
+    const result = await getBpmSimpleModel(props.modelId)
+    if (result) {
+      processNodeTree.value = result
+    } else {
+      // 初始值
+      processNodeTree.value = {
+        name: '发起人',
+        type: NodeType.START_USER_NODE,
+        id: NodeId.START_USER_NODE_ID,
+        childNode: {
+          id: NodeId.END_EVENT_NODE_ID,
+          name: '结束',
+          type: NodeType.END_EVENT_NODE
+        }
+      }
+    }
+  } finally {
+    loading.value = false
   }
 })
 </script>
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index bf2ba2bb..8e7c731d 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -292,7 +292,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       },
       {
         path: 'process-instance/detail',
-        component: () => import('@/views/bpm/processInstance/detail/index.vue'),
+        component: () => import('@/views/bpm/processInstance/detail/index_new.vue'),
         name: 'BpmProcessInstanceDetail',
         meta: {
           noCache: true,
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index 799a8ae9..e0801dd5 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="h-50px position-fixed bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
+    class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
   >
     <el-popover :visible="passVisible" placement="top-end" :width="500" trigger="click">
       <template #reference>
@@ -120,6 +120,7 @@
     <div @click="handleSign"> <Icon :size="14" icon="ep:plus" />&nbsp;加签 </div>
     <div @click="handleBack"> <Icon :size="14" icon="fa:mail-reply" />&nbsp;退回 </div>
   </div>
+  <!-- </div> -->
   <!-- 弹窗：转派审批人 -->
   <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
   <!-- 弹窗：回退节点 -->
@@ -299,10 +300,11 @@ defineExpose({ loadRunningTask })
 
 .btn-container {
   > div {
+    display: flex;
     margin: 0 15px;
     cursor: pointer;
-    display: flex;
     align-items: center;
+
     &:hover {
       color: #6db5ff;
     }
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 17b858bc..646542db 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -1,9 +1,94 @@
 <template>
   <el-timeline class="pt-20px">
-    <el-timeline-item v-for="(activity, index) in mockData" :key="index" size="large">
+    <el-timeline-item
+      v-for="(activity, index) in approveNodes"
+      :key="index"
+      size="large"
+      :icon="getApprovalNodeIcon(activity.status, activity.nodeType)"
+      :color="getApprovalNodeColor(activity.status)"
+    >
       <div class="flex flex-col items-start">
         <div class="font-bold"> {{ activity.name }}</div>
-        <div class="color-#a1a6ae text-12px mb-10px"> {{ activity.assigneeUser.nickname }}</div>
+        <div class="flex items-center mt-1">
+          <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
+            <div class="flex items-center flex-col pr-2">
+              <div class="position-relative" v-if="task.assigneeUser || task.ownerUser">
+                <el-avatar
+                  :size="36"
+                  v-if="task.assigneeUser && task.assigneeUser.avatar"
+                  :src="task.assigneeUser.avatar"
+                />
+                <el-avatar v-else-if="task.assigneeUser && task.assigneeUser.nickname">
+                  {{ task.assigneeUser.nickname.substring(0, 1) }}</el-avatar
+                >
+                <el-avatar
+                  v-else-if="task.ownerUser && task.ownerUser.avatar"
+                  :src="task.ownerUser.avatar"
+                />
+                <el-avatar v-else-if="task.ownerUser && task.ownerUser.nickname">
+                  {{ task.ownerUser.nickname.substring(0, 1) }}</el-avatar
+                >
+                <div 
+                  class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
+                >
+                  <Icon
+                    :size="12"
+                    :icon="statusIconMap2[task.status]?.icon"
+                    :color="statusIconMap2[task.status]?.color"
+                  />
+                </div>
+              </div>
+              <div class="flex flex-col mt-1">
+                <div
+                  v-if="task.assigneeUser && task.assigneeUser.nickname"
+                  class="text-10px text-align-center"
+                  >{{ task.assigneeUser.nickname }}</div
+                >
+                <div
+                  v-else-if="task.ownerUser && task.ownerUser.nickname"
+                  class="text-10px text-align-center"
+                >
+                  {{ task.ownerUser.nickname }}</div
+                >
+                <!-- <div v-if="task.reason" :title="task.reason" class="text-13px text-truncate w-150px mt-1"> 审批意见: {{ task.reason }}</div> -->
+              </div>
+            </div>
+          </div>
+          <div
+            v-for="(user, idx1) in activity.candidateUserList"
+            :key="idx1"
+            class="flex items-center"
+          >
+            <div class="flex items-center flex-col pr-2">
+              <div class="position-relative">
+                <el-avatar :size="36" v-if="user.avatar" :src="user.avatar" />
+                <el-avatar v-else-if="user.nickname && user.nickname">
+                  {{ user.nickname.substring(0, 1) }}</el-avatar
+                >
+                <div
+                  class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
+                >
+                  <Icon
+                    :size="12"
+                    :icon="statusIconMap2['-1']?.icon"
+                    :color="statusIconMap2['-1']?.color"
+                  />
+                </div>
+              </div>
+              <div class="flex flex-col mt-1">
+                <div v-if="user.nickname" class="text-10px text-align-center">{{
+                  user.nickname
+                }}</div>
+                <!-- <div v-if="task.reason" :title="task.reason" class="text-13px text-truncate w-150px mt-1"> 审批意见: {{ task.reason }}</div> -->
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="activity.status !== TaskStatusEnum.NOT_START" class="text-#a5a5a5 text-13px mt-1">
+          {{ getApprovalNodeTime(activity) }}
+        </div>
+        
+        <!-- <div class="color-#a1a6ae text-12px mb-10px"> {{ activity.assigneeUser.nickname }}</div>
         <div v-if="activity.opinion" class="text-#a5a5a5 text-12px w-100%">
           <div class="mb-5px">审批意见：</div>
           <div
@@ -14,50 +99,113 @@
         </div>
         <div v-if="activity.createTime" class="text-#a5a5a5 text-13px">
           {{ formatDate(activity.createTime) }}
-        </div>
+        </div> -->
       </div>
-      <!-- 该节点用户的头像 -->
-      <template #dot>
-        <div class="w-35px h-35px position-relative">
-          <img
-            src="@/assets/imgs/avatar.jpg"
-            class="rounded-full w-full h-full position-absolute bottom-6px right-12px"
-            alt=""
-          />
-          <div
-            class="position-absolute top-16px left-8px bg-#fff rounded-full flex items-center content-center p-2px"
-          >
-            <Icon
-              :size="12"
-              :icon="optIconMap[activity.status]?.icon"
-              :color="optIconMap[activity.status]?.color"
-            />
-          </div>
-        </div>
-      </template>
     </el-timeline-item>
   </el-timeline>
 </template>
 
 <script lang="ts" setup>
 import { formatDate } from '@/utils/formatTime'
-import { propTypes } from '@/utils/propTypes'
-
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import { TaskStatusEnum } from '@/api/bpm/task'
+import { NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { Check, Close, Loading, Clock, Minus, Delete } from '@element-plus/icons-vue'
 defineOptions({ name: 'BpmProcessInstanceTimeline' })
-defineProps({
-  tasks: propTypes.array // 流程任务的数组
+const props = defineProps({
+  // 流程实例编号
+  processInstanceId: {
+    type: String,
+    required: false,
+    default: ''
+  },
+  // 流程定义编号
+  processDefinitionId: {
+    type: String,
+    required: false,
+    default: ''
+  }
 })
 
-const optIconMap = {
+// 审批节点
+const approveNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
+
+const statusIconMap2 = {
+  // 未开始
+  '-1': { color: '#e5e7ec', icon: 'ep-clock' },
+  // 待审批
+  '0': { color: '#e5e7ec', icon: 'ep:loading' },
   // 审批中
-  '1': {
-    color: '#00b32a',
-    icon: 'fa-solid:clock'
-  },
+  '1': { color: '#448ef7', icon: 'ep:loading'},
   // 审批通过
-  '2': { color: '#00b32a', icon: 'fa-solid:check-circle' },
+  '2': { color: '#00b32a', icon: 'ep:circle-check-filled' },
   // 审批不通过
-  '3': { color: '#f46b6c', icon: 'fa-solid:times-circle' }
+  '3': { color: '#f46b6c', icon: 'fa-solid:times-circle' },
+  // 取消
+  '4': { color: '#cccccc', icon: 'ep:delete-filled' },
+  // 回退
+  '5': { color: '#f46b6c', icon: 'ep:remove-filled' },
+  // 委派中
+  '6': { color: '#448ef7', icon: 'ep:loading' },
+  // 审批通过中
+  '7': { color: '#00b32a', icon: 'ep:circle-check-filled' },
+ 
+}
+
+const statusIconMap = {
+  // 审批未开始
+  '-1': { color: '#e5e7ec', icon: Clock },
+  '0': { color: '#e5e7ec', icon: Clock },
+  // 审批中
+  '1': { color: '#448ef7', icon: Loading },
+  // 审批通过
+  '2': { color: '#00b32a', icon: Check },
+  // 审批不通过
+  '3': { color: '#f46b6c', icon: Close },
+  // 已取消
+  '4': { color: '#cccccc', icon: Delete },
+  // 回退
+  '5' : { color: '#f46b6c', icon: Minus },
+  // 委派中
+  '6': { color: '#448ef7', icon: Loading },
+  // 审批通过中
+  '7': { color: '#00b32a', icon: Check },
+}
+
+/** 获得审批详情 */
+const getApprovalDetail = async () => {
+  const data = await ProcessInstanceApi.getApprovalDetail(
+    props.processInstanceId,
+    props.processDefinitionId
+  )
+  console.log('approveNodes is []', data)
+  approveNodes.value = data.approveNodes
+}
+
+const getApprovalNodeIcon = (taskStatus: number , nodeType: NodeType) => {
+
+  if(taskStatus == TaskStatusEnum.NOT_START) {
+    return statusIconMap[taskStatus]?.icon
+  }
+
+  if (nodeType === NodeType.START_USER_NODE || nodeType === NodeType.USER_TASK_NODE) {
+    return statusIconMap[taskStatus]?.icon
+  }
+
+}
+
+const getApprovalNodeColor = (taskStatus: number) => {
+  return statusIconMap[taskStatus]?.color
+}
+
+const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
+
+  if(node.endTime) {
+    return `结束时间：${formatDate(node.endTime)}`
+  }
+  if(node.startTime) {
+    return `创建时间：${formatDate(node.startTime)}`
+  }
 }
 
 const mockData: any = [
@@ -125,6 +273,70 @@ const mockData: any = [
     formFields: null,
     formVariables: null
   },
+  {
+    id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
+    name: '财务总监审核',
+    createTime: 1725237646192,
+    endTime: null,
+    durationInMillis: null,
+    status: 3,
+    reason: null,
+    ownerUser: null,
+    assigneeUser: {
+      id: 104,
+      nickname: '财务总监',
+      deptId: 107,
+      deptName: '运维部门'
+    },
+    taskDefinitionKey: 'task-01',
+    processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
+    processInstance: {
+      id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
+      name: 'oa_leave',
+      createTime: null,
+      processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
+      startUser: null
+    },
+    parentTaskId: null,
+    children: null,
+    formId: null,
+    formName: null,
+    formConf: null,
+    formFields: null,
+    formVariables: null
+  },
+  {
+    id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
+    name: '领导审批',
+    createTime: 1725237646192,
+    endTime: null,
+    durationInMillis: null,
+    status: 2,
+    reason: null,
+    ownerUser: null,
+    assigneeUser: {
+      id: 104,
+      nickname: '领导',
+      deptId: 107,
+      deptName: '运维部门'
+    },
+    taskDefinitionKey: 'task-01',
+    processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
+    processInstance: {
+      id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
+      name: 'oa_leave',
+      createTime: null,
+      processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
+      startUser: null
+    },
+    parentTaskId: null,
+    children: null,
+    formId: null,
+    formName: null,
+    formConf: null,
+    formFields: null,
+    formVariables: null
+  },
   {
     id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
     name: '财务总监审核',
@@ -158,4 +370,8 @@ const mockData: any = [
     formVariables: null
   }
 ]
+
+onMounted(async () => {
+  getApprovalDetail()
+})
 </script>
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index 4529c355..75d8db3f 100644
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -1,88 +1,104 @@
 <template>
   <ContentWrap :bodyStyle="{ padding: '10px 20px' }" class="position-relative">
-    <img
-      class="position-absolute right-20px"
-      width="150"
-      :src="auditIcons[processInstance.status]"
-      alt=""
-    />
-    <div class="text-#878c93">编号：{{ id }}</div>
-    <el-divider class="!my-8px" />
-    <div class="flex items-center gap-5 mb-10px">
-      <div class="text-26px font-bold mb-5px">{{ processInstance.name }}</div>
-      <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="processInstance.status" />
-    </div>
+    <div class="processInstance-wrap-main">
+      <el-scrollbar>
+        <img
+          class="position-absolute right-20px"
+          width="150"
+          :src="auditIcons[processInstance.status]"
+          alt=""
+        />
+        <div class="text-#878c93 h-15px">编号：{{ id }}</div>
+        <el-divider class="!my-8px" />
+        <div class="flex items-center gap-5 mb-10px h-40px">
+          <div class="text-26px font-bold mb-5px">{{ processInstance.name }}</div>
+          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="processInstance.status" />
+        </div>
 
-    <div class="flex items-center gap-5 mb-10px text-13px">
-      <div class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600">
-        <img class="rounded-full h-28px" src="@/assets/imgs/avatar.jpg" alt="" />
-        {{ processInstance?.startUser?.nickname }}
-      </div>
-      <div class="text-#878c93"> {{ formatDate(processInstance.startTime) }} 提交 </div>
-    </div>
+        <div class="flex items-center gap-5 mb-10px text-13px h-35px">
+          <div
+            class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600"
+          >
+            <img class="rounded-full h-28px" src="@/assets/imgs/avatar.jpg" alt="" />
+            {{ processInstance?.startUser?.nickname }}
+          </div>
+          <div class="text-#878c93"> {{ formatDate(processInstance.startTime) }} 提交 </div>
+        </div>
 
-    <el-tabs>
-      <!-- 表单信息 -->
-      <el-tab-pane label="表单信息">
-        <el-row :gutter="10">
-          <el-col :span="18" class="!flex !flex-col formCol">
-            <!-- 表单信息 -->
-            <div v-loading="processInstanceLoading" class="form-box flex flex-col mb-30px flex-1">
-              <!-- 情况一：流程表单 -->
-              <el-col
-                v-if="processInstance?.processDefinition?.formType === 10"
-                :offset="6"
-                :span="16"
-              >
-                <form-create
-                  v-model="detailForm.value"
-                  v-model:api="fApi"
-                  :option="detailForm.option"
-                  :rule="detailForm.rule"
-                />
-              </el-col>
-              <!-- 情况二：业务表单 -->
-              <div v-if="processInstance?.processDefinition?.formType === 20">
-                <BusinessFormComponent :id="processInstance.businessKey" />
-              </div>
+        <el-tabs v-model="activeTab">
+          <!-- 表单信息 -->
+          <el-tab-pane label="表单信息" name="form">
+            <div class="form-scoll-area">
+              <el-scrollbar>
+                <el-row :gutter="10">
+                  <el-col :span="18" class="!flex !flex-col formCol">
+                    <!-- 表单信息 -->
+                    <div
+                      v-loading="processInstanceLoading"
+                      class="form-box flex flex-col mb-30px flex-1"
+                    >
+                      <!-- 情况一：流程表单 -->
+                      <el-col
+                        v-if="processInstance?.processDefinition?.formType === 10"
+                        :offset="6"
+                        :span="16"
+                      >
+                        <form-create
+                          v-model="detailForm.value"
+                          v-model:api="fApi"
+                          :option="detailForm.option"
+                          :rule="detailForm.rule"
+                        />
+                      </el-col>
+                      <!-- 情况二：业务表单 -->
+                      <div v-if="processInstance?.processDefinition?.formType === 20">
+                        <BusinessFormComponent :id="processInstance.businessKey" />
+                      </div>
+                    </div>
+                  </el-col>
+                  <el-col :span="6">
+                    <!-- 审批记录时间线 -->
+                    <ProcessInstanceTimeline :process-instance-id="id" />
+                  </el-col>
+                </el-row>
+              </el-scrollbar>
             </div>
+          </el-tab-pane>
 
-            <!-- 操作栏按钮 -->
-            <ProcessInstanceOperationButton
-              ref="operationButtonRef"
-              :processInstance="processInstance"
-              :userOptions="userOptions"
-              @success="getDetail"
+          <!-- 流程图 -->
+          <el-tab-pane label="流程图" name="diagram">
+            <ProcessInstanceBpmnViewer
+              :id="`${id}`"
+              :bpmn-xml="bpmnXml"
+              :loading="processInstanceLoading"
+              :process-instance="processInstance"
+              :tasks="tasks"
             />
-          </el-col>
-          <el-col :span="6">
-            <!-- 审批记录时间线 -->
-            <ProcessInstanceTimeline :process-instance="processInstance" :tasks="tasks" />
-          </el-col>
-        </el-row>
-      </el-tab-pane>
-      <!-- 流程图 -->
-      <el-tab-pane label="流程图">
-        <ProcessInstanceBpmnViewer
-          :id="`${id}`"
-          :bpmn-xml="bpmnXml"
-          :loading="processInstanceLoading"
-          :process-instance="processInstance"
-          :tasks="tasks"
-        />
-      </el-tab-pane>
-      <!-- 流转记录 -->
-      <el-tab-pane label="流转记录">
-        <ProcessInstanceTaskList
-          :loading="tasksLoad"
-          :process-instance="processInstance"
-          :tasks="tasks"
-          @refresh="getTaskList"
-        />
-      </el-tab-pane>
-      <!-- 流转评论 -->
-      <el-tab-pane label="流转评论"> 流转评论 </el-tab-pane>
-    </el-tabs>
+          </el-tab-pane>
+          <!-- 流转记录 -->
+          <el-tab-pane label="流转记录" name="record">
+            <ProcessInstanceTaskList
+              :loading="tasksLoad"
+              :process-instance="processInstance"
+              :tasks="tasks"
+              @refresh="getTaskList"
+            />
+          </el-tab-pane>
+          <!-- 流转评论 -->
+          <el-tab-pane label="流转评论" name="comment"> 流转评论 </el-tab-pane>
+        </el-tabs>
+
+        <div class=" b-t-solid border-t-1px border-[var(--el-border-color)]" v-if="activeTab === 'form'">
+          <!-- 操作栏按钮 -->
+          <ProcessInstanceOperationButton
+            ref="operationButtonRef"
+            :processInstance="processInstance"
+            :userOptions="userOptions"
+            @success="getDetail"
+          />
+        </div>
+      </el-scrollbar>
+    </div>
   </ContentWrap>
 </template>
 <script lang="ts" setup>
@@ -209,6 +225,9 @@ const getTaskList = async () => {
   }
 }
 
+/** 当前的Tab */
+const activeTab = ref('form')
+
 /** 初始化 */
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 onMounted(async () => {
@@ -219,9 +238,29 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
+$wrap-padding-height: 30px ;
+$wrap-margin-height: 15px;
+$button-height: 51px;
+$process-header-height: 194px;
+
+.processInstance-wrap-main {
+  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px);
+  max-height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px);
+  overflow: auto;
+
+  .form-scoll-area {
+    height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px - $process-header-height - 40px);
+    max-height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px - $process-header-height - 40px);
+    overflow: auto;
+  }
+}
+
 .form-box {
   :deep(.el-card) {
     border: none;
   }
 }
+
+
+
 </style>

From 2d16816f3f40f217b08a7223560a68569a8e6f9d Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 2 Oct 2024 09:49:07 +0800
Subject: [PATCH 57/62] =?UTF-8?q?=E3=80=90=E5=B7=A5=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?=E3=80=91-=20=E5=AF=B9=E6=8E=A5=E6=96=B0=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E5=AD=97=E6=AE=B5=E6=9D=83=E9=99=90=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/processInstance/index.ts          |  6 ++
 src/router/modules/remaining.ts               |  9 ++-
 .../detail/ProcessInstanceTimeline.vue        |  1 -
 .../bpm/processInstance/detail/index_new.vue  | 70 +++++++++++++++----
 src/views/bpm/task/copy/index.vue             | 11 ++-
 src/views/bpm/task/done/index.vue             |  3 +-
 src/views/bpm/task/todo/index.vue             |  3 +-
 7 files changed, 82 insertions(+), 21 deletions(-)

diff --git a/src/api/bpm/processInstance/index.ts b/src/api/bpm/processInstance/index.ts
index df348d62..3d6330a8 100644
--- a/src/api/bpm/processInstance/index.ts
+++ b/src/api/bpm/processInstance/index.ts
@@ -87,7 +87,13 @@ export const getProcessInstanceCopyPage = async (params: any) => {
   return await request.get({ url: '/bpm/process-instance/copy/page', params })
 }
 
+// 获取审批详情
 export const getApprovalDetail = async (processInstanceId?:string, processDefinitionId?:string) => {
   const param = processInstanceId ? '?processInstanceId='+ processInstanceId : '?processDefinitionId='+ processDefinitionId
   return await request.get({ url: 'bpm/process-instance/get-approval-detail'+ param })
 }
+
+// 获取表单字段权限
+export const getFormFieldsPermission = async (params: any) => {
+  return await request.get({ url: '/bpm/process-instance/get-form-fields-permission', params })
+}
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 8e7c731d..ad9cd225 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -300,7 +300,14 @@ const remainingRouter: AppRouteRecordRaw[] = [
           canTo: true,
           title: '流程详情',
           activeMenu: '/bpm/task/my'
-        }
+        },
+        props: route => (
+          { 
+            id: route.query.id,
+            taskId: route.query.taskId,
+            activityId: route.query.activityId
+          }
+        )
       },
       {
         path: 'oa/leave/create',
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 646542db..2c1cad37 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -178,7 +178,6 @@ const getApprovalDetail = async () => {
     props.processInstanceId,
     props.processDefinitionId
   )
-  console.log('approveNodes is []', data)
   approveNodes.value = data.approveNodes
 }
 
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index 75d8db3f..660bf4d7 100644
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -88,7 +88,10 @@
           <el-tab-pane label="流转评论" name="comment"> 流转评论 </el-tab-pane>
         </el-tabs>
 
-        <div class=" b-t-solid border-t-1px border-[var(--el-border-color)]" v-if="activeTab === 'form'">
+        <div
+          class="b-t-solid border-t-1px border-[var(--el-border-color)]"
+          v-if="activeTab === 'form'"
+        >
           <!-- 操作栏按钮 -->
           <ProcessInstanceOperationButton
             ref="operationButtonRef"
@@ -115,15 +118,18 @@ import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue
 import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
 import { registerComponent } from '@/utils/routerHelper'
 import * as UserApi from '@/api/system/user'
+import { FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
 import audit1 from '@/assets/svgs/bpm/audit1.svg'
 import audit2 from '@/assets/svgs/bpm/audit2.svg'
 import audit3 from '@/assets/svgs/bpm/audit3.svg'
 
 defineOptions({ name: 'BpmProcessInstanceDetail' })
-
-const { query } = useRoute() // 查询参数
+const props = defineProps<{
+  id: string   // 流程实例的编号
+  taskId?: string  // 任务编号
+  activityId?: string  //流程活动编号，用于抄送查看
+}>()
 const message = useMessage() // 消息弹窗
-const id = query.id as unknown as string // 流程实例的编号
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
 const operationButtonRef = ref()
@@ -157,7 +163,7 @@ const BusinessFormComponent = ref<any>(null) // 异步组件
 const getProcessInstance = async () => {
   try {
     processInstanceLoading.value = true
-    const data = await ProcessInstanceApi.getProcessInstance(id)
+    const data = await ProcessInstanceApi.getProcessInstance(props.id)
     if (!data) {
       message.error('查询不到流程信息！')
       return
@@ -167,6 +173,15 @@ const getProcessInstance = async () => {
     // 设置表单信息
     const processDefinition = data.processDefinition
     if (processDefinition.formType === 10) {
+      // 获取表单字段权限
+      let fieldsPermission = undefined
+      if (props.taskId || props.activityId) {
+        fieldsPermission = await ProcessInstanceApi.getFormFieldsPermission({
+          processInstanceId: props.id,
+          taskId: props.taskId,
+          activityId: props.activityId
+        })
+      }
       setConfAndFields2(
         detailForm,
         processDefinition.formConf,
@@ -177,6 +192,11 @@ const getProcessInstance = async () => {
         fApi.value?.btn.show(false)
         fApi.value?.resetBtn.show(false)
         fApi.value?.disabled(true)
+        if (fieldsPermission) {
+          Object.keys(fieldsPermission).forEach((item) => {
+            setFieldPermission(item, fieldsPermission[item])
+          })
+        }
       })
     } else {
       // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
@@ -190,12 +210,27 @@ const getProcessInstance = async () => {
   }
 }
 
+/**
+ * 设置表单权限
+ */
+const setFieldPermission = (field: string, permission: string) => {
+  if (permission === FieldPermissionType.READ) {
+    fApi.value?.disabled(true, field)
+  }
+  if (permission === FieldPermissionType.WRITE) {
+    fApi.value?.disabled(false, field)
+  }
+  if (permission === FieldPermissionType.NONE) {
+    fApi.value?.hidden(true, field)
+  }
+}
+
 /** 加载任务列表 */
 const getTaskList = async () => {
   try {
     // 获得未取消的任务
     tasksLoad.value = true
-    const data = await TaskApi.getTaskListByProcessInstanceId(id)
+    const data = await TaskApi.getTaskListByProcessInstanceId(props.id)
     tasks.value = []
     // 1.1 移除已取消的审批
     data.forEach((task) => {
@@ -238,19 +273,29 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
-$wrap-padding-height: 30px ;
+$wrap-padding-height: 30px;
 $wrap-margin-height: 15px;
 $button-height: 51px;
 $process-header-height: 194px;
 
 .processInstance-wrap-main {
-  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px);
-  max-height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px);
+  height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px
+  );
+  max-height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px
+  );
   overflow: auto;
 
   .form-scoll-area {
-    height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px - $process-header-height - 40px);
-    max-height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px - $process-header-height - 40px);
+    height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px -
+        $process-header-height - 40px
+    );
+    max-height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px -
+        $process-header-height - 40px
+    );
     overflow: auto;
   }
 }
@@ -260,7 +305,4 @@ $process-header-height: 194px;
     border: none;
   }
 }
-
-
-
 </style>
diff --git a/src/views/bpm/task/copy/index.vue b/src/views/bpm/task/copy/index.vue
index 93f55c68..045e2074 100644
--- a/src/views/bpm/task/copy/index.vue
+++ b/src/views/bpm/task/copy/index.vue
@@ -111,11 +111,16 @@ const getList = async () => {
 
 /** 处理审批按钮 */
 const handleAudit = (row: any) => {
+  const query = {
+    id: row.processInstanceId,
+    activityId: undefined
+  }
+  if (row.activityId) {
+    query.activityId = row.activityId
+  }
   push({
     name: 'BpmProcessInstanceDetail',
-    query: {
-      id: row.processInstanceId
-    }
+    query: query
   })
 }
 
diff --git a/src/views/bpm/task/done/index.vue b/src/views/bpm/task/done/index.vue
index a5137199..98768212 100644
--- a/src/views/bpm/task/done/index.vue
+++ b/src/views/bpm/task/done/index.vue
@@ -158,7 +158,8 @@ const handleAudit = (row: any) => {
   push({
     name: 'BpmProcessInstanceDetail',
     query: {
-      id: row.processInstance.id
+      id: row.processInstance.id,
+      taskId: row.id
     }
   })
 }
diff --git a/src/views/bpm/task/todo/index.vue b/src/views/bpm/task/todo/index.vue
index 670fc683..bf32ecb1 100644
--- a/src/views/bpm/task/todo/index.vue
+++ b/src/views/bpm/task/todo/index.vue
@@ -140,7 +140,8 @@ const handleAudit = (row: any) => {
   push({
     name: 'BpmProcessInstanceDetail',
     query: {
-      id: row.processInstance.id
+      id: row.processInstance.id,
+      taskId: row.id
     }
   })
 }

From 145eabbf42825eea7e8ccf22afc552a1d3850218 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 2 Oct 2024 16:23:55 +0800
Subject: [PATCH 58/62] =?UTF-8?q?=E3=80=90=E5=B7=A5=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?=E3=80=91-=20=E6=96=B0=E5=AE=A1=E6=89=B9=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceOperationButton.vue |  64 +++++--
 .../detail/ProcessInstanceTimeline.vue        | 170 +-----------------
 .../bpm/processInstance/detail/index_new.vue  |  15 +-
 3 files changed, 73 insertions(+), 176 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index e0801dd5..6cdeb750 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -1,11 +1,18 @@
 <template>
   <div
     class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
+    v-if="runningTask.id"
   >
-    <el-popover :visible="passVisible" placement="top-end" :width="500" trigger="click">
+    <el-popover
+      :visible="passVisible"
+      placement="top-end"
+      :width="500"
+      trigger="click"
+      v-if="isShowButton(OperationButtonType.APPROVE)"
+    >
       <template #reference>
         <el-button plain type="success" @click="openPopover('1')">
-          <Icon icon="ep:select" />&nbsp; 通过
+          <Icon icon="ep:select" />&nbsp; {{ getButtonDisplayName(OperationButtonType.APPROVE) }}
         </el-button>
       </template>
       <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
@@ -50,17 +57,23 @@
 
           <el-form-item>
             <el-button :disabled="formLoading" type="success" @click="handleAudit(true)">
-              通过
+              {{ getButtonDisplayName(OperationButtonType.APPROVE) }}
             </el-button>
             <el-button @click="passVisible = false"> 取消 </el-button>
           </el-form-item>
         </el-form>
       </div>
     </el-popover>
-    <el-popover :visible="rejectVisible" placement="top-end" :width="500" trigger="click">
+    <el-popover
+      :visible="rejectVisible"
+      placement="top-end"
+      :width="500"
+      trigger="click"
+      v-if="isShowButton(OperationButtonType.REJECT)"
+    >
       <template #reference>
         <el-button class="mr-20px" plain type="danger" @click="openPopover('2')">
-          <Icon icon="ep:close" />&nbsp; 拒绝
+          <Icon icon="ep:close" />&nbsp; {{ getButtonDisplayName(OperationButtonType.REJECT) }}
         </el-button>
       </template>
       <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
@@ -105,7 +118,7 @@
 
           <el-form-item>
             <el-button :disabled="formLoading" type="danger" @click="handleAudit(false)">
-              拒绝
+              {{ getButtonDisplayName(OperationButtonType.REJECT) }}
             </el-button>
             <el-button @click="rejectVisible = false"> 取消 </el-button>
           </el-form-item>
@@ -113,12 +126,18 @@
       </div>
     </el-popover>
     <div @click="handleSend"> <Icon :size="14" icon="svg-icon:send" />&nbsp;抄送 </div>
-    <div @click="openTaskUpdateAssigneeForm">
-      <Icon :size="14" icon="fa:share-square-o" />&nbsp;转交
+    <div @click="openTaskUpdateAssigneeForm" v-if="isShowButton(OperationButtonType.TRANSFER)">
+      <Icon :size="14" icon="fa:share-square-o" />&nbsp;{{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
+    </div>
+    <div @click="handleDelegate" v-if="isShowButton(OperationButtonType.DELEGATE)">
+      <Icon :size="14" icon="ep:position" />&nbsp;{{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
+    </div>
+    <div @click="handleSign" v-if="isShowButton(OperationButtonType.ADD_SIGN)">
+      <Icon :size="14" icon="ep:plus" />&nbsp;{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
+    </div>
+    <div @click="handleBack" v-if="isShowButton(OperationButtonType.RETURN)">
+      <Icon :size="14" icon="fa:mail-reply" />&nbsp;{{ getButtonDisplayName(OperationButtonType.RETURN) }}
     </div>
-    <div @click="handleDelegate"> <Icon :size="14" icon="ep:position" />&nbsp;委派 </div>
-    <div @click="handleSign"> <Icon :size="14" icon="ep:plus" />&nbsp;加签 </div>
-    <div @click="handleBack"> <Icon :size="14" icon="fa:mail-reply" />&nbsp;退回 </div>
   </div>
   <!-- </div> -->
   <!-- 弹窗：转派审批人 -->
@@ -141,7 +160,10 @@ import TaskDelegateForm from './dialog/TaskDelegateForm.vue'
 import TaskTransferForm from './dialog/TaskTransferForm.vue'
 import TaskSignCreateForm from './dialog/TaskSignCreateForm.vue'
 import { isEmpty } from '@/utils/is'
-
+import {
+  OperationButtonType,
+  OPERATION_BUTTON_NAME
+} from '@/components/SimpleProcessDesignerV2/src/consts'
 defineOptions({ name: 'ProcessInstanceBtnConatiner' })
 
 const userId = useUserStore().getUser.id // 当前登录的编号
@@ -290,6 +312,24 @@ const getDetail = () => {
   emit('success')
 }
 
+/** 是否显示按钮 */
+const isShowButton = (btnType: OperationButtonType): boolean => {
+  let isShow = true
+  if (runningTask.value.buttonsSetting && runningTask.value.buttonsSetting[btnType]) {
+    isShow = runningTask.value.buttonsSetting[btnType].enable
+  }
+  return isShow
+}
+
+/** 获取按钮的显示名称 */
+const getButtonDisplayName = (btnType: OperationButtonType) => {
+  let diaplayName = OPERATION_BUTTON_NAME.get(btnType)
+  if (runningTask.value.buttonsSetting && runningTask.value.buttonsSetting[btnType]) {
+    diaplayName = runningTask.value.buttonsSetting[btnType].displayName
+  }
+  return diaplayName
+}
+
 defineExpose({ loadRunningTask })
 </script>
 
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 2c1cad37..da5fab00 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -207,168 +207,14 @@ const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
   }
 }
 
-const mockData: any = [
-  {
-    id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
-    name: '发起人',
-    createTime: 1725237646192,
-    endTime: null,
-    durationInMillis: null,
-    status: 1,
-    reason: null,
-    ownerUser: null,
-    assigneeUser: {
-      id: 104,
-      nickname: '测试号',
-      deptId: 107,
-      deptName: '运维部门'
-    },
-    taskDefinitionKey: 'task-01',
-    processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-    processInstance: {
-      id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-      name: 'oa_leave',
-      createTime: null,
-      processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
-      startUser: null
-    },
-    parentTaskId: null,
-    children: null,
-    formId: null,
-    formName: null,
-    formConf: null,
-    formFields: null,
-    formVariables: null
-  },
-  {
-    id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
-    name: '领导审批',
-    createTime: 1725237646192,
-    endTime: null,
-    durationInMillis: null,
-    status: 2,
-    reason: null,
-    ownerUser: null,
-    assigneeUser: {
-      id: 104,
-      nickname: '领导',
-      deptId: 107,
-      deptName: '运维部门'
-    },
-    taskDefinitionKey: 'task-01',
-    processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-    processInstance: {
-      id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-      name: 'oa_leave',
-      createTime: null,
-      processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
-      startUser: null
-    },
-    parentTaskId: null,
-    children: null,
-    formId: null,
-    formName: null,
-    formConf: null,
-    formFields: null,
-    formVariables: null
-  },
-  {
-    id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
-    name: '财务总监审核',
-    createTime: 1725237646192,
-    endTime: null,
-    durationInMillis: null,
-    status: 3,
-    reason: null,
-    ownerUser: null,
-    assigneeUser: {
-      id: 104,
-      nickname: '财务总监',
-      deptId: 107,
-      deptName: '运维部门'
-    },
-    taskDefinitionKey: 'task-01',
-    processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-    processInstance: {
-      id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-      name: 'oa_leave',
-      createTime: null,
-      processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
-      startUser: null
-    },
-    parentTaskId: null,
-    children: null,
-    formId: null,
-    formName: null,
-    formConf: null,
-    formFields: null,
-    formVariables: null
-  },
-  {
-    id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
-    name: '领导审批',
-    createTime: 1725237646192,
-    endTime: null,
-    durationInMillis: null,
-    status: 2,
-    reason: null,
-    ownerUser: null,
-    assigneeUser: {
-      id: 104,
-      nickname: '领导',
-      deptId: 107,
-      deptName: '运维部门'
-    },
-    taskDefinitionKey: 'task-01',
-    processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-    processInstance: {
-      id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-      name: 'oa_leave',
-      createTime: null,
-      processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
-      startUser: null
-    },
-    parentTaskId: null,
-    children: null,
-    formId: null,
-    formName: null,
-    formConf: null,
-    formFields: null,
-    formVariables: null
-  },
-  {
-    id: 'fe1190ee-68c3-11ef-9c7d-00a6181404fd',
-    name: '财务总监审核',
-    createTime: 1725237646192,
-    endTime: null,
-    durationInMillis: null,
-    status: 3,
-    reason: null,
-    ownerUser: null,
-    assigneeUser: {
-      id: 104,
-      nickname: '财务总监',
-      deptId: 107,
-      deptName: '运维部门'
-    },
-    taskDefinitionKey: 'task-01',
-    processInstanceId: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-    processInstance: {
-      id: 'fe0c60c6-68c3-11ef-9c7d-00a6181404fd',
-      name: 'oa_leave',
-      createTime: null,
-      processDefinitionId: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
-      startUser: null
-    },
-    parentTaskId: null,
-    children: null,
-    formId: null,
-    formName: null,
-    formConf: null,
-    formFields: null,
-    formVariables: null
-  }
-]
+/**
+ *  重新刷新审批详情
+ */
+const refresh =  () => {
+  getApprovalDetail()
+}
+
+defineExpose({ refresh })
 
 onMounted(async () => {
   getApprovalDetail()
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index 660bf4d7..44d9da94 100644
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -58,7 +58,7 @@
                   </el-col>
                   <el-col :span="6">
                     <!-- 审批记录时间线 -->
-                    <ProcessInstanceTimeline :process-instance-id="id" />
+                    <ProcessInstanceTimeline ref="timelineRef" :process-instance-id="id" />
                   </el-col>
                 </el-row>
               </el-scrollbar>
@@ -97,7 +97,7 @@
             ref="operationButtonRef"
             :processInstance="processInstance"
             :userOptions="userOptions"
-            @success="getDetail"
+            @success="refresh"
           />
         </div>
       </el-scrollbar>
@@ -133,6 +133,7 @@ const message = useMessage() // 消息弹窗
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
 const operationButtonRef = ref()
+const timelineRef = ref()
 const bpmnXml = ref('') // BPMN XML
 const tasksLoad = ref(true) // 任务的加载中
 const tasks = ref<any[]>([]) // 任务列表
@@ -260,6 +261,16 @@ const getTaskList = async () => {
   }
 }
 
+/**
+ * 操作成功后刷新
+ */
+const refresh = () => {
+  // 重新获取详情
+  getDetail()
+  // 刷新审批详情 Timeline 
+  timelineRef.value?.refresh();
+}
+
 /** 当前的Tab */
 const activeTab = ref('form')
 

From dc0e9473343d499f0336bc828e3ed24d3fc006dc Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 3 Oct 2024 17:13:13 +0800
Subject: [PATCH 59/62] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E5=AE=9A=E4=B9=89=E7=9A=84=E5=88=97=E8=A1=A8=EF=BC=8C?=
 =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E4=B8=80=E5=AE=9A=E7=9A=84=E7=AE=80=E5=8C=96?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=BA=E5=90=8E=E7=BB=AD=E6=8A=8A=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E3=80=81=E6=B5=81=E7=A8=8B=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E8=9E=8D=E5=90=88=E5=9C=A8=E4=B8=80=E4=B8=AA=20vue=20=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E5=81=9A=E5=87=86=E5=A4=87=E3=80=82=E8=BF=99=E6=A0=B7?=
 =?UTF-8?q?=EF=BC=8C=E5=92=8C=E9=92=89=E9=92=89=E7=9A=84=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E6=9B=B4=E5=AE=B9=E6=98=93=E7=BB=9F=E4=B8=80=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/ModelForm.vue |  14 +--
 src/views/bpm/model/index.vue     | 197 ++++++++++++++----------------
 2 files changed, 96 insertions(+), 115 deletions(-)

diff --git a/src/views/bpm/model/ModelForm.vue b/src/views/bpm/model/ModelForm.vue
index 9c31172a..38a75077 100644
--- a/src/views/bpm/model/ModelForm.vue
+++ b/src/views/bpm/model/ModelForm.vue
@@ -8,12 +8,7 @@
       label-width="110px"
     >
       <el-form-item label="流程标识" prop="key">
-        <el-input
-          v-model="formData.key"
-          :disabled="!!formData.id"
-          placeholder="请输入流标标识"
-          style="width: 330px"
-        />
+        <el-input v-model="formData.key" :disabled="!!formData.id" placeholder="请输入流标标识" />
         <el-tooltip
           v-if="!formData.id"
           class="item"
@@ -217,10 +212,9 @@ const submitForm = async () => {
       await ModelApi.createModel(data)
       // 提示，引导用户做后续的操作
       await ElMessageBox.alert(
-        '<strong>新建模型成功！</strong>后续需要执行如下 3 个步骤：' +
-          '<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
-          '<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
-          '<div>3. 点击【发布流程】按钮，完成流程的最终发布</div>' +
+        '<strong>新建模型成功！</strong>后续需要执行如下 2 个步骤：' +
+          '<div>1. 点击【设计流程】按钮，绘制流程图</div>' +
+          '<div>2. 点击【发布流程】按钮，完成流程的最终发布</div>' +
           '另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
         '重要提示',
         {
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index 8ae3032f..a8f6328e 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -67,21 +67,14 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="流程标识" align="center" prop="key" width="200" />
-      <el-table-column label="流程名称" align="center" prop="name" width="200">
-        <template #default="scope">
-          <el-button type="primary" link @click="handleBpmnDetail(scope.row)">
-            <span>{{ scope.row.name }}</span>
-          </el-button>
-        </template>
-      </el-table-column>
-      <el-table-column label="流程图标" align="center" prop="icon" width="100">
+      <el-table-column label="流程名称" align="center" prop="name" min-width="200" />
+      <el-table-column label="流程图标" align="center" prop="icon" min-width="100">
         <template #default="scope">
           <el-image :src="scope.row.icon" class="h-32px w-32px" />
         </template>
       </el-table-column>
-      <el-table-column label="流程分类" align="center" prop="categoryName" width="100" />
-      <el-table-column label="表单信息" align="center" prop="formType" width="200">
+      <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
+      <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
         <template #default="scope">
           <el-button
             v-if="scope.row.formType === 10"
@@ -102,52 +95,36 @@
           <label v-else>暂无表单</label>
         </template>
       </el-table-column>
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        width="180"
-        :formatter="dateFormatter"
-      />
-      <el-table-column label="最新部署的流程定义" align="center">
-        <el-table-column
-          label="流程版本"
-          align="center"
-          prop="processDefinition.version"
-          width="100"
-        >
-          <template #default="scope">
-            <el-tag v-if="scope.row.processDefinition">
-              v{{ scope.row.processDefinition.version }}
-            </el-tag>
-            <el-tag v-else type="warning">未部署</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="激活状态"
-          align="center"
-          prop="processDefinition.version"
-          width="85"
-        >
-          <template #default="scope">
-            <el-switch
-              v-if="scope.row.processDefinition"
-              v-model="scope.row.processDefinition.suspensionState"
-              :active-value="1"
-              :inactive-value="2"
-              @change="handleChangeState(scope.row)"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
-          <template #default="scope">
-            <span v-if="scope.row.processDefinition">
-              {{ formatDate(scope.row.processDefinition.deploymentTime) }}
-            </span>
-          </template>
-        </el-table-column>
+      <!--      <el-table-column label="激活状态" align="center" prop="processDefinition.version" width="85">-->
+      <!--        <template #default="scope">-->
+      <!--          <el-switch-->
+      <!--            v-if="scope.row.processDefinition"-->
+      <!--            v-model="scope.row.processDefinition.suspensionState"-->
+      <!--            :active-value="1"-->
+      <!--            :inactive-value="2"-->
+      <!--            @change="handleChangeState(scope.row)"-->
+      <!--          />-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
+      <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
+        <template #default="scope">
+          <span v-if="scope.row.processDefinition">
+            {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+          </span>
+          <el-tag v-if="scope.row.processDefinition" class="ml-10px">
+            v{{ scope.row.processDefinition.version }}
+          </el-tag>
+          <el-tag v-else type="warning">未部署</el-tag>
+          <el-tag
+            v-if="scope.row.processDefinition.suspensionState === 2"
+            type="warning"
+            class="ml-10px"
+          >
+            已停用
+          </el-tag>
+        </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="250" fixed="right">
+      <el-table-column label="操作" align="center" width="200" fixed="right">
         <template #default="scope">
           <el-button
             link
@@ -159,6 +136,7 @@
           </el-button>
           <el-button
             link
+            class="!ml-5px"
             type="primary"
             @click="handleDesign(scope.row)"
             v-hasPermi="['bpm:model:update']"
@@ -167,28 +145,43 @@
           </el-button>
           <el-button
             link
+            class="!ml-5px"
             type="primary"
             @click="handleDeploy(scope.row)"
             v-hasPermi="['bpm:model:deploy']"
           >
             发布
           </el-button>
-          <el-button
-            link
-            type="primary"
-            v-hasPermi="['bpm:process-definition:query']"
-            @click="handleDefinitionList(scope.row)"
+          <el-dropdown
+            class="!align-middle ml-5px"
+            @command="(command) => handleCommand(command, scope.row)"
+            v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
           >
-            历史
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['bpm:model:delete']"
-          >
-            删除
-          </el-button>
+            <el-button type="primary" link>更多</el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item
+                  command="handleDefinitionList"
+                  v-if="checkPermi(['bpm:process-definition:query'])"
+                >
+                  历史
+                </el-dropdown-item>
+                <el-dropdown-item
+                  command="handleChangeState"
+                  v-if="checkPermi(['bpm:model:update'])"
+                >
+                  {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
+                </el-dropdown-item>
+                <el-dropdown-item
+                  type="danger"
+                  command="handleDelete"
+                  v-if="checkPermi(['bpm:model:delete'])"
+                >
+                  删除
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
@@ -208,28 +201,17 @@
   <Dialog title="表单详情" v-model="formDetailVisible" width="800">
     <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
   </Dialog>
-
-  <!-- 弹窗：流程模型图的预览 -->
-  <Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
-    <MyProcessViewer
-      key="designer"
-      v-model="bpmnXML"
-      :value="bpmnXML as any"
-      v-bind="bpmnControlForm"
-      :prefix="bpmnControlForm.prefix"
-    />
-  </Dialog>
 </template>
 
 <script lang="ts" setup>
-import { dateFormatter, formatDate } from '@/utils/formatTime'
-import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
+import { formatDate } from '@/utils/formatTime'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
 import ModelForm from './ModelForm.vue'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import { CategoryApi } from '@/api/bpm/category'
 import { BpmModelType } from '@/utils/constants'
+import { checkPermi } from '@/utils/permission'
 
 defineOptions({ name: 'BpmModel' })
 
@@ -274,6 +256,23 @@ const resetQuery = () => {
   handleQuery()
 }
 
+/** '更多'操作按钮 */
+const handleCommand = (command: string, row: any) => {
+  switch (command) {
+    case 'handleDefinitionList':
+      handleDefinitionList(row)
+      break
+    case 'handleDelete':
+      handleDelete(row)
+      break
+    case 'handleChangeState':
+      handleChangeState(row)
+      break
+    default:
+      break
+  }
+}
+
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
@@ -281,12 +280,12 @@ const openForm = (type: string, id?: number) => {
 }
 
 /** 删除按钮操作 */
-const handleDelete = async (id: number) => {
+const handleDelete = async (row: any) => {
   try {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await ModelApi.deleteModel(id)
+    await ModelApi.deleteModel(row.id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
@@ -294,22 +293,22 @@ const handleDelete = async (id: number) => {
 }
 
 /** 更新状态操作 */
-const handleChangeState = async (row) => {
+const handleChangeState = async (row: any) => {
   const state = row.processDefinition.suspensionState
+  const newState = state === 1 ? 2 : 1
   try {
     // 修改状态的二次确认
     const id = row.id
-    const statusState = state === 1 ? '激活' : '挂起'
+    debugger
+    const statusState = state === 1 ? '停用' : '启用'
     const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
     await message.confirm(content)
     // 发起修改状态
-    await ModelApi.updateModelState(id, state)
+    await ModelApi.updateModelState(id, newState)
+    message.success(statusState + '成功')
     // 刷新列表
     await getList()
-  } catch {
-    // 取消后，进行恢复按钮
-    row.processDefinition.suspensionState = state === 1 ? 2 : 1
-  }
+  } catch {}
 }
 
 /** 设计流程 */
@@ -374,18 +373,6 @@ const handleFormDetail = async (row) => {
   }
 }
 
-/** 流程图的详情按钮操作 */
-const bpmnDetailVisible = ref(false)
-const bpmnXML = ref(null)
-const bpmnControlForm = ref({
-  prefix: 'flowable'
-})
-const handleBpmnDetail = async (row) => {
-  const data = await ModelApi.getModel(row.id)
-  bpmnXML.value = data.bpmnXml || ''
-  bpmnDetailVisible.value = true
-}
-
 /** 初始化 **/
 onMounted(async () => {
   await getList()

From 926eb70fe57c0513f619f57df99efd2e779dff7a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 3 Oct 2024 20:05:18 +0800
Subject: [PATCH 60/62] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E6=A8=A1=E5=9E=8B=E7=9A=84=E5=AE=9A=E4=B9=89=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=B0=81=E5=8F=AF=E4=BB=A5=E5=8F=91=E8=B5=B7?=
 =?UTF-8?q?=E3=80=81=E8=B0=81=E5=8F=AF=E4=BB=A5=E7=AE=A1=E7=90=86=E7=9A=84?=
 =?UTF-8?q?=E5=AD=97=E6=AE=B5=20CRUD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/ModelForm.vue | 50 ++++++++++++++++++++++++++++---
 src/views/bpm/model/index.vue     | 50 ++++++++++++++++++++++---------
 2 files changed, 82 insertions(+), 18 deletions(-)

diff --git a/src/views/bpm/model/ModelForm.vue b/src/views/bpm/model/ModelForm.vue
index 38a75077..d9c4c032 100644
--- a/src/views/bpm/model/ModelForm.vue
+++ b/src/views/bpm/model/ModelForm.vue
@@ -123,6 +123,30 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
+      <el-form-item label="谁可以发起" prop="startUserIds">
+        <el-select
+          v-model="formData.startUserIds"
+          multiple
+          placeholder="请选择可发起人，默认（不选择）则所有人都可以发起"
+        >
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="流程管理员" prop="managerUserIds">
+        <el-select v-model="formData.managerUserIds" multiple placeholder="请选择流程管理员">
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
+          />
+        </el-select>
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
@@ -137,18 +161,24 @@ import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
 import { CategoryApi } from '@/api/bpm/category'
 import { BpmModelFormType, BpmModelType } from '@/utils/constants'
+import { UserVO } from '@/api/system/user'
+import * as UserApi from '@/api/system/user'
+import { useUserStoreWithOut } from '@/store/modules/user'
 
 defineOptions({ name: 'ModelForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
+const userStore = useUserStoreWithOut() // 用户信息缓存
 
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
+  id: undefined,
   name: '',
+  key: '',
   category: undefined,
   icon: undefined,
   description: '',
@@ -157,7 +187,9 @@ const formData = ref({
   formId: '',
   formCustomCreatePath: '',
   formCustomViewPath: '',
-  visible: true
+  visible: true,
+  startUserIds: [],
+  managerUserIds: []
 })
 const formRules = reactive({
   name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
@@ -169,14 +201,16 @@ const formRules = reactive({
   formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
   formCustomCreatePath: [{ required: true, message: '表单提交路由不能为空', trigger: 'blur' }],
   formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }],
-  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
+  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
+  managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 const formList = ref([]) // 流程表单的下拉框的数据
 const categoryList = ref([]) // 流程分类列表
+const userList = ref<UserVO[]>([]) // 用户列表
 
 /** 打开弹窗 */
-const open = async (type: string, id?: number) => {
+const open = async (type: string, id?: string) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
@@ -189,11 +223,15 @@ const open = async (type: string, id?: number) => {
     } finally {
       formLoading.value = false
     }
+  } else {
+    formData.value.managerUserIds.push(userStore.getUser.id)
   }
   // 获得流程表单的下拉框的数据
   formList.value = await FormApi.getFormSimpleList()
   // 查询流程分类列表
   categoryList.value = await CategoryApi.getCategorySimpleList()
+  // 查询用户列表
+  userList.value = await UserApi.getSimpleUserList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -237,7 +275,9 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
+    id: undefined,
     name: '',
+    key: '',
     category: undefined,
     icon: undefined,
     description: '',
@@ -246,7 +286,9 @@ const resetForm = () => {
     formId: '',
     formCustomCreatePath: '',
     formCustomViewPath: '',
-    visible: true
+    visible: true,
+    startUserIds: [],
+    managerUserIds: []
   }
   formRef.value?.resetFields()
 }
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index a8f6328e..a88674e0 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -73,6 +73,26 @@
           <el-image :src="scope.row.icon" class="h-32px w-32px" />
         </template>
       </el-table-column>
+      <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
+        <template #default="scope">
+          <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
+            全部可见
+          </el-text>
+          <el-text v-else-if="scope.row.startUsers.length == 1">
+            {{ scope.row.startUsers[0].nickname }}
+          </el-text>
+          <el-text v-else>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+            >
+              {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
+            </el-tooltip>
+          </el-text>
+        </template>
+      </el-table-column>
       <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
       <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
         <template #default="scope">
@@ -95,17 +115,6 @@
           <label v-else>暂无表单</label>
         </template>
       </el-table-column>
-      <!--      <el-table-column label="激活状态" align="center" prop="processDefinition.version" width="85">-->
-      <!--        <template #default="scope">-->
-      <!--          <el-switch-->
-      <!--            v-if="scope.row.processDefinition"-->
-      <!--            v-model="scope.row.processDefinition.suspensionState"-->
-      <!--            :active-value="1"-->
-      <!--            :inactive-value="2"-->
-      <!--            @change="handleChangeState(scope.row)"-->
-      <!--          />-->
-      <!--        </template>-->
-      <!--      </el-table-column>-->
       <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
         <template #default="scope">
           <span v-if="scope.row.processDefinition">
@@ -131,6 +140,7 @@
             type="primary"
             @click="openForm('update', scope.row.id)"
             v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
           >
             修改
           </el-button>
@@ -140,6 +150,7 @@
             type="primary"
             @click="handleDesign(scope.row)"
             v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
           >
             设计
           </el-button>
@@ -149,6 +160,7 @@
             type="primary"
             @click="handleDeploy(scope.row)"
             v-hasPermi="['bpm:model:deploy']"
+            :disabled="!isManagerUser(scope.row)"
           >
             发布
           </el-button>
@@ -169,6 +181,7 @@
                 <el-dropdown-item
                   command="handleChangeState"
                   v-if="checkPermi(['bpm:model:update'])"
+                  :disabled="!isManagerUser(scope.row)"
                 >
                   {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
                 </el-dropdown-item>
@@ -176,6 +189,7 @@
                   type="danger"
                   command="handleDelete"
                   v-if="checkPermi(['bpm:model:delete'])"
+                  :disabled="!isManagerUser(scope.row)"
                 >
                   删除
                 </el-dropdown-item>
@@ -212,12 +226,14 @@ import { setConfAndFields2 } from '@/utils/formCreate'
 import { CategoryApi } from '@/api/bpm/category'
 import { BpmModelType } from '@/utils/constants'
 import { checkPermi } from '@/utils/permission'
+import { useUserStoreWithOut } from '@/store/modules/user'
 
 defineOptions({ name: 'BpmModel' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由
+const userStore = useUserStoreWithOut() // 用户信息缓存
 
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
@@ -312,7 +328,7 @@ const handleChangeState = async (row: any) => {
 }
 
 /** 设计流程 */
-const handleDesign = (row) => {
+const handleDesign = (row: any) => {
   if (row.type == BpmModelType.BPMN) {
     push({
       name: 'BpmModelEditor',
@@ -331,7 +347,7 @@ const handleDesign = (row) => {
 }
 
 /** 发布流程 */
-const handleDeploy = async (row) => {
+const handleDeploy = async (row: any) => {
   try {
     // 删除的二次确认
     await message.confirm('是否部署该流程！！')
@@ -359,7 +375,7 @@ const formDetailPreview = ref({
   rule: [],
   option: {}
 })
-const handleFormDetail = async (row) => {
+const handleFormDetail = async (row: any) => {
   if (row.formType == 10) {
     // 设置表单
     const data = await FormApi.getForm(row.formId)
@@ -373,6 +389,12 @@ const handleFormDetail = async (row) => {
   }
 }
 
+/** 判断是否可以操作 */
+const isManagerUser = (row: any) => {
+  const userId = userStore.getUser.id
+  return row.managerUserIds && row.managerUserIds.includes(userId)
+}
+
 /** 初始化 **/
 onMounted(async () => {
   await getList()

From dd4c4817e4623b62694173e5dc4aff6fc9c258b6 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 4 Oct 2024 11:47:45 +0800
Subject: [PATCH 61/62] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E6=96=B0?=
 =?UTF-8?q?=E5=BB=BA=E7=9A=84=E6=B5=81=E7=A8=8B=EF=BC=8C=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=9A=84=20NPE=20=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index a88674e0..4534ec61 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -125,7 +125,7 @@
           </el-tag>
           <el-tag v-else type="warning">未部署</el-tag>
           <el-tag
-            v-if="scope.row.processDefinition.suspensionState === 2"
+            v-if="scope.row.processDefinition?.suspensionState === 2"
             type="warning"
             class="ml-10px"
           >
@@ -180,7 +180,7 @@
                 </el-dropdown-item>
                 <el-dropdown-item
                   command="handleChangeState"
-                  v-if="checkPermi(['bpm:model:update'])"
+                  v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
                   :disabled="!isManagerUser(scope.row)"
                 >
                   {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}

From 619491b4d0b223b952380dac76b22411ddddce8e Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 4 Oct 2024 16:16:33 +0800
Subject: [PATCH 62/62] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E6=96=B0?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceOperationButton.vue | 49 +++++++++---
 .../detail/ProcessInstanceTimeline.vue        | 75 +++++++++++--------
 .../bpm/processInstance/detail/index_new.vue  | 21 +++---
 3 files changed, 90 insertions(+), 55 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index 6cdeb750..34ba2bbe 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -3,6 +3,7 @@
     class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
     v-if="runningTask.id"
   >
+    <!-- 【通过】按钮 -->
     <el-popover
       :visible="passVisible"
       placement="top-end"
@@ -15,6 +16,7 @@
           <Icon icon="ep:select" />&nbsp; {{ getButtonDisplayName(OperationButtonType.APPROVE) }}
         </el-button>
       </template>
+      <!-- 审批表单 -->
       <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
         <el-form
           label-position="top"
@@ -64,6 +66,8 @@
         </el-form>
       </div>
     </el-popover>
+
+    <!-- 【拒绝】按钮 -->
     <el-popover
       :visible="rejectVisible"
       placement="top-end"
@@ -76,6 +80,7 @@
           <Icon icon="ep:close" />&nbsp; {{ getButtonDisplayName(OperationButtonType.REJECT) }}
         </el-button>
       </template>
+      <!-- 审批表单 -->
       <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
         <el-form
           label-position="top"
@@ -125,21 +130,39 @@
         </el-form>
       </div>
     </el-popover>
+
+    <!-- 【抄送】按钮 -->
     <div @click="handleSend"> <Icon :size="14" icon="svg-icon:send" />&nbsp;抄送 </div>
+
+    <!-- 【转交】按钮 -->
     <div @click="openTaskUpdateAssigneeForm" v-if="isShowButton(OperationButtonType.TRANSFER)">
-      <Icon :size="14" icon="fa:share-square-o" />&nbsp;{{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
+      <Icon :size="14" icon="fa:share-square-o" />&nbsp;
+      {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
     </div>
+
+    <!-- 【委托】按钮 -->
     <div @click="handleDelegate" v-if="isShowButton(OperationButtonType.DELEGATE)">
-      <Icon :size="14" icon="ep:position" />&nbsp;{{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
+      <Icon :size="14" icon="ep:position" />&nbsp;
+      {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
     </div>
+
+    <!-- 【加签】 -->
     <div @click="handleSign" v-if="isShowButton(OperationButtonType.ADD_SIGN)">
-      <Icon :size="14" icon="ep:plus" />&nbsp;{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
+      <Icon :size="14" icon="ep:plus" />&nbsp;
+      {{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
     </div>
+    <!-- TODO @jason：减签 -->
+
+    <!-- 【退回】按钮 -->
     <div @click="handleBack" v-if="isShowButton(OperationButtonType.RETURN)">
-      <Icon :size="14" icon="fa:mail-reply" />&nbsp;{{ getButtonDisplayName(OperationButtonType.RETURN) }}
+      <Icon :size="14" icon="fa:mail-reply" />&nbsp;
+      {{ getButtonDisplayName(OperationButtonType.RETURN) }}
     </div>
+
+    <!--TODO @jason：撤回 -->
+    <!--TODO @jason：再次发起 -->
   </div>
-  <!-- </div> -->
+
   <!-- 弹窗：转派审批人 -->
   <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
   <!-- 弹窗：回退节点 -->
@@ -149,7 +172,6 @@
   <!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
   <TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" />
 </template>
-
 <script lang="ts" setup>
 import { setConfAndFields2 } from '@/utils/formCreate'
 import { useUserStore } from '@/store/modules/user'
@@ -198,15 +220,17 @@ watch(
     deep: true
   }
 )
+
+// TODO @jaosn：具体的审批任务，要不改成后端返回。让前端弱化下
 /**
  * 设置 runningTasks 中的任务
  */
-const loadRunningTask = (tasks) => {
+const loadRunningTask = (tasks: any[]) => {
   runningTask.value = {}
   auditForm.value = {}
   approveForm.value = {}
   approveFormFApi.value = {}
-  tasks.forEach((task) => {
+  tasks.forEach((task: any) => {
     if (!isEmpty(task.children)) {
       loadRunningTask(task.children)
     }
@@ -237,7 +261,7 @@ const loadRunningTask = (tasks) => {
 }
 
 /** 处理审批通过和不通过的操作 */
-const handleAudit = async (pass) => {
+const handleAudit = async (pass: any) => {
   formLoading.value = true
   try {
     const auditFormRef = proxy.$refs['formRef']
@@ -277,6 +301,7 @@ const handleAudit = async (pass) => {
 /* 抄送 TODO */
 const handleSend = () => {}
 
+// TODO 代码优化：这里 flag 改成 approve: boolean 。因为 flag 目前就只有 1 和 2
 const openPopover = (flag) => {
   passVisible.value = false
   rejectVisible.value = false
@@ -323,11 +348,11 @@ const isShowButton = (btnType: OperationButtonType): boolean => {
 
 /** 获取按钮的显示名称 */
 const getButtonDisplayName = (btnType: OperationButtonType) => {
-  let diaplayName = OPERATION_BUTTON_NAME.get(btnType)
+  let displayName = OPERATION_BUTTON_NAME.get(btnType)
   if (runningTask.value.buttonsSetting && runningTask.value.buttonsSetting[btnType]) {
-    diaplayName = runningTask.value.buttonsSetting[btnType].displayName
+    displayName = runningTask.value.buttonsSetting[btnType].displayName
   }
-  return diaplayName
+  return displayName
 }
 
 defineExpose({ loadRunningTask })
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index da5fab00..afb778c4 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -1,5 +1,7 @@
+<!-- 审批详情的右侧：审批流 -->
 <template>
   <el-timeline class="pt-20px">
+    <!-- 遍历每个审批节点 -->
     <el-timeline-item
       v-for="(activity, index) in approveNodes"
       :key="index"
@@ -10,25 +12,28 @@
       <div class="flex flex-col items-start">
         <div class="font-bold"> {{ activity.name }}</div>
         <div class="flex items-center mt-1">
+          <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
           <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
             <div class="flex items-center flex-col pr-2">
               <div class="position-relative" v-if="task.assigneeUser || task.ownerUser">
+                <!-- 信息：头像 -->
                 <el-avatar
                   :size="36"
                   v-if="task.assigneeUser && task.assigneeUser.avatar"
                   :src="task.assigneeUser.avatar"
                 />
                 <el-avatar v-else-if="task.assigneeUser && task.assigneeUser.nickname">
-                  {{ task.assigneeUser.nickname.substring(0, 1) }}</el-avatar
-                >
+                  {{ task.assigneeUser.nickname.substring(0, 1) }}
+                </el-avatar>
                 <el-avatar
                   v-else-if="task.ownerUser && task.ownerUser.avatar"
                   :src="task.ownerUser.avatar"
                 />
                 <el-avatar v-else-if="task.ownerUser && task.ownerUser.nickname">
-                  {{ task.ownerUser.nickname.substring(0, 1) }}</el-avatar
-                >
-                <div 
+                  {{ task.ownerUser.nickname.substring(0, 1) }}
+                </el-avatar>
+                <!-- 信息：任务 ICON -->
+                <div
                   class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
                 >
                   <Icon
@@ -39,21 +44,25 @@
                 </div>
               </div>
               <div class="flex flex-col mt-1">
+                <!-- 信息：昵称 -->
                 <div
                   v-if="task.assigneeUser && task.assigneeUser.nickname"
                   class="text-10px text-align-center"
-                  >{{ task.assigneeUser.nickname }}</div
                 >
+                  {{ task.assigneeUser.nickname }}
+                </div>
                 <div
                   v-else-if="task.ownerUser && task.ownerUser.nickname"
                   class="text-10px text-align-center"
                 >
-                  {{ task.ownerUser.nickname }}</div
-                >
+                  {{ task.ownerUser.nickname }}
+                </div>
+                <!-- TODO @jason：审批意见，要展示哈。 -->
                 <!-- <div v-if="task.reason" :title="task.reason" class="text-13px text-truncate w-150px mt-1"> 审批意见: {{ task.reason }}</div> -->
               </div>
             </div>
           </div>
+          <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
           <div
             v-for="(user, idx1) in activity.candidateUserList"
             :key="idx1"
@@ -61,10 +70,12 @@
           >
             <div class="flex items-center flex-col pr-2">
               <div class="position-relative">
+                <!-- 信息：头像 -->
                 <el-avatar :size="36" v-if="user.avatar" :src="user.avatar" />
                 <el-avatar v-else-if="user.nickname && user.nickname">
-                  {{ user.nickname.substring(0, 1) }}</el-avatar
-                >
+                  {{ user.nickname.substring(0, 1) }}
+                </el-avatar>
+                <!-- 信息：任务 ICON -->
                 <div
                   class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
                 >
@@ -76,18 +87,24 @@
                 </div>
               </div>
               <div class="flex flex-col mt-1">
-                <div v-if="user.nickname" class="text-10px text-align-center">{{
-                  user.nickname
-                }}</div>
+                <!-- 信息：昵称 -->
+                <div v-if="user.nickname" class="text-10px text-align-center">
+                  {{ user.nickname }}
+                </div>
                 <!-- <div v-if="task.reason" :title="task.reason" class="text-13px text-truncate w-150px mt-1"> 审批意见: {{ task.reason }}</div> -->
               </div>
             </div>
           </div>
         </div>
-        <div v-if="activity.status !== TaskStatusEnum.NOT_START" class="text-#a5a5a5 text-13px mt-1">
+        <!-- 信息：时间 -->
+        <div
+          v-if="activity.status !== TaskStatusEnum.NOT_START"
+          class="text-#a5a5a5 text-13px mt-1"
+        >
           {{ getApprovalNodeTime(activity) }}
         </div>
-        
+
+        <!-- TODO @jason：审批意见，要展示哈。 -->
         <!-- <div class="color-#a1a6ae text-12px mb-10px"> {{ activity.assigneeUser.nickname }}</div>
         <div v-if="activity.opinion" class="text-#a5a5a5 text-12px w-100%">
           <div class="mb-5px">审批意见：</div>
@@ -136,7 +153,7 @@ const statusIconMap2 = {
   // 待审批
   '0': { color: '#e5e7ec', icon: 'ep:loading' },
   // 审批中
-  '1': { color: '#448ef7', icon: 'ep:loading'},
+  '1': { color: '#448ef7', icon: 'ep:loading' },
   // 审批通过
   '2': { color: '#00b32a', icon: 'ep:circle-check-filled' },
   // 审批不通过
@@ -148,8 +165,7 @@ const statusIconMap2 = {
   // 委派中
   '6': { color: '#448ef7', icon: 'ep:loading' },
   // 审批通过中
-  '7': { color: '#00b32a', icon: 'ep:circle-check-filled' },
- 
+  '7': { color: '#00b32a', icon: 'ep:circle-check-filled' }
 }
 
 const statusIconMap = {
@@ -165,11 +181,11 @@ const statusIconMap = {
   // 已取消
   '4': { color: '#cccccc', icon: Delete },
   // 回退
-  '5' : { color: '#f46b6c', icon: Minus },
+  '5': { color: '#f46b6c', icon: Minus },
   // 委派中
   '6': { color: '#448ef7', icon: Loading },
   // 审批通过中
-  '7': { color: '#00b32a', icon: Check },
+  '7': { color: '#00b32a', icon: Check }
 }
 
 /** 获得审批详情 */
@@ -181,16 +197,14 @@ const getApprovalDetail = async () => {
   approveNodes.value = data.approveNodes
 }
 
-const getApprovalNodeIcon = (taskStatus: number , nodeType: NodeType) => {
-
-  if(taskStatus == TaskStatusEnum.NOT_START) {
+const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => {
+  if (taskStatus == TaskStatusEnum.NOT_START) {
     return statusIconMap[taskStatus]?.icon
   }
 
   if (nodeType === NodeType.START_USER_NODE || nodeType === NodeType.USER_TASK_NODE) {
     return statusIconMap[taskStatus]?.icon
   }
-
 }
 
 const getApprovalNodeColor = (taskStatus: number) => {
@@ -198,25 +212,22 @@ const getApprovalNodeColor = (taskStatus: number) => {
 }
 
 const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
-
-  if(node.endTime) {
+  if (node.endTime) {
     return `结束时间：${formatDate(node.endTime)}`
   }
-  if(node.startTime) {
+  if (node.startTime) {
     return `创建时间：${formatDate(node.startTime)}`
   }
 }
 
-/**
- *  重新刷新审批详情
- */
-const refresh =  () => {
+/** 重新刷新审批详情 */
+const refresh = () => {
   getApprovalDetail()
 }
 
 defineExpose({ refresh })
 
 onMounted(async () => {
-  getApprovalDetail()
+  await getApprovalDetail()
 })
 </script>
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index 44d9da94..b2035a19 100644
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -27,8 +27,8 @@
 
         <el-tabs v-model="activeTab">
           <!-- 表单信息 -->
-          <el-tab-pane label="表单信息" name="form">
-            <div class="form-scoll-area">
+          <el-tab-pane label="审批详情" name="form">
+            <div class="form-scroll-area">
               <el-scrollbar>
                 <el-row :gutter="10">
                   <el-col :span="18" class="!flex !flex-col formCol">
@@ -64,7 +64,6 @@
               </el-scrollbar>
             </div>
           </el-tab-pane>
-
           <!-- 流程图 -->
           <el-tab-pane label="流程图" name="diagram">
             <ProcessInstanceBpmnViewer
@@ -84,7 +83,7 @@
               @refresh="getTaskList"
             />
           </el-tab-pane>
-          <!-- 流转评论 -->
+          <!-- 流转评论 TODO 待开发 -->
           <el-tab-pane label="流转评论" name="comment"> 流转评论 </el-tab-pane>
         </el-tabs>
 
@@ -125,9 +124,9 @@ import audit3 from '@/assets/svgs/bpm/audit3.svg'
 
 defineOptions({ name: 'BpmProcessInstanceDetail' })
 const props = defineProps<{
-  id: string   // 流程实例的编号
-  taskId?: string  // 任务编号
-  activityId?: string  //流程活动编号，用于抄送查看
+  id: string // 流程实例的编号
+  taskId?: string // 任务编号
+  activityId?: string //流程活动编号，用于抄送查看
 }>()
 const message = useMessage() // 消息弹窗
 const processInstanceLoading = ref(false) // 流程实例的加载中
@@ -234,7 +233,7 @@ const getTaskList = async () => {
     const data = await TaskApi.getTaskListByProcessInstanceId(props.id)
     tasks.value = []
     // 1.1 移除已取消的审批
-    data.forEach((task) => {
+    data.forEach((task: any) => {
       if (task.status !== 4) {
         tasks.value.push(task)
       }
@@ -267,8 +266,8 @@ const getTaskList = async () => {
 const refresh = () => {
   // 重新获取详情
   getDetail()
-  // 刷新审批详情 Timeline 
-  timelineRef.value?.refresh();
+  // 刷新审批详情 Timeline
+  timelineRef.value?.refresh()
 }
 
 /** 当前的Tab */
@@ -298,7 +297,7 @@ $process-header-height: 194px;
   );
   overflow: auto;
 
-  .form-scoll-area {
+  .form-scroll-area {
     height: calc(
       100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px -
         $process-header-height - 40px