From 4baab5450927601a674c0e71a2776c7a1f43ac03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Tue, 26 Mar 2024 16:42:25 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E8=81=8C=E7=BA=A7=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E6=A0=91=E7=9A=84=E5=BD=A2=E5=BC=8F=EF=BC=8C?=
 =?UTF-8?q?=E5=AE=A1=E6=A0=B8=E8=8A=82=E7=82=B9=E4=B8=80=E4=BA=9B=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B0=81=E8=A3=85=E3=80=82=E8=8A=82=E7=82=B9=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=8D=A2=E6=88=90pinia=E5=AD=98=E5=82=A8=E3=80=82?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E5=AF=86=E7=A0=81=E5=8A=A0=E5=AF=86=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/api/demo/model/systemModel.ts             |  13 +-
 src/api/demo/system.ts                        |  26 +-
 src/components/FlowDiagram/index.vue          | 119 ++++
 src/components/FlowDiagram/plugins/auth.js    |  60 ++
 src/components/FlowDiagram/plugins/cache.js   |  77 +++
 .../FlowDiagram/plugins/download.js           |  65 +++
 src/components/FlowDiagram/plugins/index.js   |  20 +
 src/components/FlowDiagram/plugins/modal.js   |  83 +++
 .../package/designer/ProcessDesigner.vue      | 208 +++++++
 .../plugins/package/designer/index.ts         |   7 +
 .../package/designer/plugins/defaultEmpty.ts  |  27 +
 .../plugins/translate/customTranslate.ts      |   9 +
 .../package/designer/plugins/translate/zh.ts  | 253 +++++++++
 .../plugins/package/highlight/index.js        |   5 +
 .../FlowDiagram/plugins/package/index.js      |   7 +
 .../plugins/package/penal/PropertiesPanel.vue | 111 ++++
 .../package/penal/base/ElementBaseInfo.vue    |  76 +++
 .../penal/flow-condition/FlowCondition.vue    | 142 +++++
 .../package/penal/form/ElementForm.vue        | 390 +++++++++++++
 .../plugins/package/penal/index.js            |   7 +
 .../penal/listeners/ElementListeners.vue      | 296 ++++++++++
 .../penal/listeners/UserTaskListeners.vue     | 319 +++++++++++
 .../package/penal/listeners/template.js       | 178 ++++++
 .../package/penal/listeners/utilSelf.js       |  62 +++
 .../multi-instance/ElementMultiInstance.vue   | 192 +++++++
 .../penal/other/ElementOtherConfig.vue        |  59 ++
 .../penal/properties/ElementProperties.vue    | 134 +++++
 .../penal/signal-message/SignalAndMessage.vue | 104 ++++
 .../package/penal/task/ElementTask.vue        |  74 +++
 .../task/task-components/ReceiveTask.vue      |  97 ++++
 .../penal/task/task-components/ScriptTask.vue |  85 +++
 .../task/task-components/ServiceTask.vue      |  86 +++
 .../penal/task/task-components/UserTask.vue   | 525 ++++++++++++++++++
 .../package/theme/flow-element-variables.scss |  63 +++
 .../plugins/package/theme/index.scss          | 171 ++++++
 .../package/theme/process-designer.scss       | 153 +++++
 .../plugins/package/theme/process-panel.scss  | 110 ++++
 .../FlowDiagram/plugins/package/utils.js      |  69 +++
 src/components/FlowDiagram/plugins/tab.js     |  71 +++
 src/components/ProcessDesigner/index.vue      |  57 +-
 .../package/designer/ProcessDesigner.vue      | 140 +----
 .../package/penal/PropertiesPanel.vue         | 462 ++++++++-------
 .../package/penal/auth/index.vue              |  72 ++-
 .../package/penal/endEvent/index.vue          |  23 +-
 .../package/penal/exclusiveGateway/index.vue  | 138 +++--
 .../exclusiveGateway/src/conditionFormula.vue |  57 +-
 .../exclusiveGateway/src/conditionSql.vue     |  32 +-
 .../package/penal/inclusiveGateway/index.vue  | 347 ++++++------
 .../package/penal/myline/index.vue            |  93 +---
 .../package/penal/parallelGateway/index.vue   | 134 ++---
 .../package/penal/shcemeInfo/index.vue        |  30 +-
 .../package/penal/startEvent/index.vue        | 104 +---
 .../package/penal/subprocess/index.vue        |  73 +--
 .../package/penal/userTask/index.vue          | 327 ++++++-----
 .../penal/userTask/src/auditorLevel.vue       |  28 +-
 .../penal/userTask/src/auditorNode.vue        | 134 +++--
 .../package/penal/userTask/src/auditorSql.vue | 209 +++----
 src/components/SelectAccount/DeptTree.vue     |   9 +-
 src/components/SelectAccount/index.vue        |   6 +
 src/components/SelectPos/DeptTree.vue         |  36 ++
 src/components/SelectPos/account.data.ts      |  48 ++
 src/components/SelectPos/index.vue            | 115 ++--
 src/components/SelectTable/index.vue          |  27 +-
 src/store/modules/flow.ts                     |  50 ++
 src/store/modules/user.ts                     |   3 +-
 src/views/demo/system/account/DeptTree.vue    |   9 +-
 src/views/demo/workflow/scheme/index.vue      |   6 +-
 src/views/demo/workflow/scheme/preview.vue    |   5 +-
 69 files changed, 6026 insertions(+), 1302 deletions(-)
 create mode 100644 src/components/FlowDiagram/index.vue
 create mode 100644 src/components/FlowDiagram/plugins/auth.js
 create mode 100644 src/components/FlowDiagram/plugins/cache.js
 create mode 100644 src/components/FlowDiagram/plugins/download.js
 create mode 100644 src/components/FlowDiagram/plugins/index.js
 create mode 100644 src/components/FlowDiagram/plugins/modal.js
 create mode 100644 src/components/FlowDiagram/plugins/package/designer/ProcessDesigner.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/designer/index.ts
 create mode 100644 src/components/FlowDiagram/plugins/package/designer/plugins/defaultEmpty.ts
 create mode 100644 src/components/FlowDiagram/plugins/package/designer/plugins/translate/customTranslate.ts
 create mode 100644 src/components/FlowDiagram/plugins/package/designer/plugins/translate/zh.ts
 create mode 100644 src/components/FlowDiagram/plugins/package/highlight/index.js
 create mode 100644 src/components/FlowDiagram/plugins/package/index.js
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/PropertiesPanel.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/base/ElementBaseInfo.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/flow-condition/FlowCondition.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/form/ElementForm.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/index.js
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/listeners/ElementListeners.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/listeners/UserTaskListeners.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/listeners/template.js
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/listeners/utilSelf.js
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/multi-instance/ElementMultiInstance.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/other/ElementOtherConfig.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/properties/ElementProperties.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/signal-message/SignalAndMessage.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/task/ElementTask.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/task/task-components/ReceiveTask.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/task/task-components/ScriptTask.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/task/task-components/ServiceTask.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/penal/task/task-components/UserTask.vue
 create mode 100644 src/components/FlowDiagram/plugins/package/theme/flow-element-variables.scss
 create mode 100644 src/components/FlowDiagram/plugins/package/theme/index.scss
 create mode 100644 src/components/FlowDiagram/plugins/package/theme/process-designer.scss
 create mode 100644 src/components/FlowDiagram/plugins/package/theme/process-panel.scss
 create mode 100644 src/components/FlowDiagram/plugins/package/utils.js
 create mode 100644 src/components/FlowDiagram/plugins/tab.js
 create mode 100644 src/components/SelectPos/DeptTree.vue
 create mode 100644 src/components/SelectPos/account.data.ts
 create mode 100644 src/store/modules/flow.ts

diff --git a/package.json b/package.json
index eff83b9..7f641b2 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "echarts": "^5.4.3",
     "exceljs": "^4.4.0",
     "highlight.js": "^11.9.0",
+    "js-md5": "^0.8.3",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "mars3d": "^3.7.0",
diff --git a/src/api/demo/model/systemModel.ts b/src/api/demo/model/systemModel.ts
index 1faa1a0..df538e9 100644
--- a/src/api/demo/model/systemModel.ts
+++ b/src/api/demo/model/systemModel.ts
@@ -60,11 +60,14 @@ export interface RoleListItem {
   orderNo: string;
   createTime: string;
 }
-export interface addDept{
-  name:string,
-  parentId:string,
-  parentName:string,
-  status:number
+export interface addDept {
+  name: string,
+  parentId: string,
+  parentName: string,
+  status: number
+}
+export interface PositionByOrgParams {
+  orgid: string
 }
 
 /**
diff --git a/src/api/demo/system.ts b/src/api/demo/system.ts
index 7b5dd40..4fd1353 100644
--- a/src/api/demo/system.ts
+++ b/src/api/demo/system.ts
@@ -5,7 +5,7 @@ import {
   RoleParams,
   RolePageParams,
   MenuListGetResultModel,
-  MenuDetailGetResultModel,
+  PositionByOrgParams,
   DeptListGetResultModel,
   AccountListGetResultModel,
   RolePageListGetResultModel,
@@ -44,13 +44,15 @@ enum Api {
   OrgPosGroup = '/api/Orgs/OrgPosGroup',
   UserRoles = '/api/Users/UserRoles',
   OrgPositonTree = '/api/Orgs/OrgPositonTree',
-  UserOrgs ='/api/Users/UserOrgs',
-  AssignModule='/api/Roles/AssignModule',
-  LoadForRole='/api/Modules/LoadForRole',
-  LoadByRole='/api/Users/LoadByRole',
+  UserOrgs = '/api/Users/UserOrgs',
+  AssignModule = '/api/Roles/AssignModule',
+  LoadForRole = '/api/Modules/LoadForRole',
+  LoadByRole = '/api/Users/LoadByRole',
   IsAccountExist = '/system/accountExist',
   setRoleStatus = '/system/setRoleStatus',
   GetAllRoleList = '/system/getAllRoleList',
+  LoadPositionByOrg = '/api/SysPosition/LoadPositionByOrg',
+  LoadDataBaseLinkTree = '/api/SysDatabaseLink/LoadDataBaseLinkTree',
 }
 
 export const getPositionsTree = (params: AccountParams) =>
@@ -74,10 +76,10 @@ export const getOrgList = (params?: DeptListItem) =>
 export const getOrgPositonTree = (params?: DeptListItem) =>
   defHttp.get<DeptListGetResultModel>({ url: Api.OrgPositonTree, params });
 
-  export const loadForRole = (params?: DeptListItem) =>
+export const loadForRole = (params?: DeptListItem) =>
   defHttp.get<DeptListGetResultModel>({ url: Api.LoadForRole, params });
-  
-  export const loadByRole = (params?: DeptListItem) =>
+
+export const loadByRole = (params?: DeptListItem) =>
   defHttp.get<DeptListGetResultModel>({ url: Api.LoadByRole, params });
 
 export function addAccount(params) {
@@ -269,3 +271,11 @@ export const setRoleStatus = (id: number, status: string) =>
 
 export const isAccountExist = (account: string) =>
   defHttp.post({ url: Api.IsAccountExist, params: { account } }, { errorMessageMode: 'none' });
+
+export const getLoadPositionByOrg = (params?: PositionByOrgParams) =>
+  defHttp.get<RolePageListGetResultModel>({ url: Api.LoadPositionByOrg, params });
+  
+export const getLoadDataBaseLinkTree = (params) =>
+  defHttp.get({ url: Api.LoadDataBaseLinkTree, params });
+
+
diff --git a/src/components/FlowDiagram/index.vue b/src/components/FlowDiagram/index.vue
new file mode 100644
index 0000000..fa0e201
--- /dev/null
+++ b/src/components/FlowDiagram/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="process-design" :style="'display: flex; height:' + height">
+    <bpmn-process-designer
+      v-model="xmlString"
+      v-bind="controlForm"
+      keyboard
+      ref="processDesigner"
+      :events="[
+        'element.click',
+        'connection.added',
+        'connection.removed',
+        'connection.changed'
+      ]"
+      @element-click="elementClick"
+      @init-finished="initModeler"
+      @event="handlerEvent"
+      @save="onSaveProcess"
+    />
+    <!-- <bmpn-process-penal :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel" /> -->
+  </div>
+</template>
+
+<script>
+import './plugins/package/theme/index.scss';
+import { BpmnProcessDesigner, BmpnProcessPenal } from './plugins/package/index';
+
+export default {
+  name: 'ProcessDesigner',
+  props: {
+    bpmnXml: {
+      type: String,
+      required: true
+    },
+    designerForm: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    BpmnProcessDesigner,
+    BmpnProcessPenal
+  },
+  data () {
+    return {
+      height: document.documentElement.clientHeight - 94.5 + "px;",
+      xmlString: props.bpmnXml,
+      modeler: null,
+      controlForm: {
+        processId: props.designerForm.processKey || '',
+        processName: props.designerForm.processName || '',
+        simulation: false,
+        labelEditing: false,
+        labelVisible: false,
+        prefix: 'flowable',
+        headerButtonSize: 'small',
+        additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
+      }
+    }
+  },
+  methods: {
+    elementClick (element) {
+      this.element = element;
+    },
+    initModeler (modeler) {
+      setTimeout(() => {
+        this.modeler = modeler;
+      }, 10);
+    },
+    handlerEvent (eventName, element) {
+    },
+    onSaveProcess (saveData) {
+      this.$emit('save', saveData);
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+body {
+  overflow: auto !important;
+  margin: 0;
+  box-sizing: border-box;
+}
+body,
+body * {
+  /* 滚动条 */
+  &::-webkit-scrollbar-track-piece {
+    background-color: #fff; /*滚动条的背景颜色*/
+    -webkit-border-radius: 0; /*滚动条的圆角宽度*/
+  }
+
+  &::-webkit-scrollbar {
+    width: 10px; /*滚动条的宽度*/
+    height: 8px; /*滚动条的高度*/
+  }
+
+  &::-webkit-scrollbar-thumb:vertical {
+    /*垂直滚动条的样式*/
+    height: 50px;
+    background-color: rgba(153, 153, 153, 0.5);
+    -webkit-border-radius: 4px;
+    outline: 2px solid #fff;
+    outline-offset: -2px;
+    border: 2px solid #fff;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    /*滚动条的hover样式*/
+    background-color: rgba(159, 159, 159, 0.3);
+    -webkit-border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    /*滚动条的hover样式*/
+    background-color: rgba(159, 159, 159, 0.5);
+    -webkit-border-radius: 4px;
+  }
+}
+</style>
diff --git a/src/components/FlowDiagram/plugins/auth.js b/src/components/FlowDiagram/plugins/auth.js
new file mode 100644
index 0000000..6c6bc24
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/auth.js
@@ -0,0 +1,60 @@
+import store from '@/store'
+
+function authPermission(permission) {
+  const all_permission = "*:*:*";
+  const permissions = store.getters && store.getters.permissions
+  if (permission && permission.length > 0) {
+    return permissions.some(v => {
+      return all_permission === v || v === permission
+    })
+  } else {
+    return false
+  }
+}
+
+function authRole(role) {
+  const super_admin = "admin";
+  const roles = store.getters && store.getters.roles
+  if (role && role.length > 0) {
+    return roles.some(v => {
+      return super_admin === v || v === role
+    })
+  } else {
+    return false
+  }
+}
+
+export default {
+  // 验证用户是否具备某权限
+  hasPermi(permission) {
+    return authPermission(permission);
+  },
+  // 验证用户是否含有指定权限，只需包含其中一个
+  hasPermiOr(permissions) {
+    return permissions.some(item => {
+      return authPermission(item)
+    })
+  },
+  // 验证用户是否含有指定权限，必须全部拥有
+  hasPermiAnd(permissions) {
+    return permissions.every(item => {
+      return authPermission(item)
+    })
+  },
+  // 验证用户是否具备某角色
+  hasRole(role) {
+    return authRole(role);
+  },
+  // 验证用户是否含有指定角色，只需包含其中一个
+  hasRoleOr(roles) {
+    return roles.some(item => {
+      return authRole(item)
+    })
+  },
+  // 验证用户是否含有指定角色，必须全部拥有
+  hasRoleAnd(roles) {
+    return roles.every(item => {
+      return authRole(item)
+    })
+  }
+}
diff --git a/src/components/FlowDiagram/plugins/cache.js b/src/components/FlowDiagram/plugins/cache.js
new file mode 100644
index 0000000..6b5c00b
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/cache.js
@@ -0,0 +1,77 @@
+const sessionCache = {
+  set (key, value) {
+    if (!sessionStorage) {
+      return
+    }
+    if (key != null && value != null) {
+      sessionStorage.setItem(key, value)
+    }
+  },
+  get (key) {
+    if (!sessionStorage) {
+      return null
+    }
+    if (key == null) {
+      return null
+    }
+    return sessionStorage.getItem(key)
+  },
+  setJSON (key, jsonValue) {
+    if (jsonValue != null) {
+      this.set(key, JSON.stringify(jsonValue))
+    }
+  },
+  getJSON (key) {
+    const value = this.get(key)
+    if (value != null) {
+      return JSON.parse(value)
+    }
+  },
+  remove (key) {
+    sessionStorage.removeItem(key);
+  }
+}
+const localCache = {
+  set (key, value) {
+    if (!localStorage) {
+      return
+    }
+    if (key != null && value != null) {
+      localStorage.setItem(key, value)
+    }
+  },
+  get (key) {
+    if (!localStorage) {
+      return null
+    }
+    if (key == null) {
+      return null
+    }
+    return localStorage.getItem(key)
+  },
+  setJSON (key, jsonValue) {
+    if (jsonValue != null) {
+      this.set(key, JSON.stringify(jsonValue))
+    }
+  },
+  getJSON (key) {
+    const value = this.get(key)
+    if (value != null) {
+      return JSON.parse(value)
+    }
+  },
+  remove (key) {
+    localStorage.removeItem(key);
+  }
+}
+
+export default {
+  /**
+   * 会话级缓存
+   */
+  session: sessionCache,
+  /**
+   * 本地缓存
+   */
+  local: localCache
+}
diff --git a/src/components/FlowDiagram/plugins/download.js b/src/components/FlowDiagram/plugins/download.js
new file mode 100644
index 0000000..b27702f
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/download.js
@@ -0,0 +1,65 @@
+import axios from 'axios'
+import {Loading, Message} from 'element-ui'
+import { saveAs } from 'file-saver'
+import { getToken } from '@/utils/auth'
+import errorCode from '@/utils/errorCode'
+import { blobValidate } from "@/utils/ruoyi";
+
+const baseURL = process.env.VUE_APP_BASE_API
+let downloadLoadingInstance;
+
+export default {
+  oss(ossId) {
+    var url = baseURL + '/system/oss/download/' + ossId
+    downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
+    axios({
+      method: 'get',
+      url: url,
+      responseType: 'blob',
+      headers: { 'Authorization': 'Bearer ' + getToken() }
+    }).then((res) => {
+      const isBlob = blobValidate(res.data);
+      if (isBlob) {
+        const blob = new Blob([res.data], { type: 'application/octet-stream' })
+        this.saveAs(blob, decodeURIComponent(res.headers['download-filename']))
+      } else {
+        this.printErrMsg(res.data);
+      }
+      downloadLoadingInstance.close();
+    }).catch((r) => {
+      console.error(r)
+      Message.error('下载文件出现错误，请联系管理员！')
+      downloadLoadingInstance.close();
+    })
+  },
+  zip(url, name) {
+    var url = baseURL + url
+    axios({
+      method: 'get',
+      url: url,
+      responseType: 'blob',
+      headers: {
+        'Authorization': 'Bearer ' + getToken(),
+        'datasource': localStorage.getItem("dataName")
+      }
+    }).then((res) => {
+      const isBlob = blobValidate(res.data);
+      if (isBlob) {
+        const blob = new Blob([res.data], { type: 'application/zip' })
+        this.saveAs(blob, name)
+      } else {
+        this.printErrMsg(res.data);
+      }
+    })
+  },
+  saveAs(text, name, opts) {
+    saveAs(text, name, opts);
+  },
+  async printErrMsg(data) {
+    const resText = await data.text();
+    const rspObj = JSON.parse(resText);
+    const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
+    Message.error(errMsg);
+  }
+}
+
diff --git a/src/components/FlowDiagram/plugins/index.js b/src/components/FlowDiagram/plugins/index.js
new file mode 100644
index 0000000..d000f2d
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/index.js
@@ -0,0 +1,20 @@
+import tab from './tab'
+import auth from './auth'
+import cache from './cache'
+import modal from './modal'
+import download from './download'
+
+export default {
+  install(Vue) {
+    // 页签操作
+    Vue.prototype.$tab = tab
+    // 认证对象
+    Vue.prototype.$auth = auth
+    // 缓存对象
+    Vue.prototype.$cache = cache
+    // 模态框对象
+    Vue.prototype.$modal = modal
+    // 下载文件
+    Vue.prototype.$download = download
+  }
+}
diff --git a/src/components/FlowDiagram/plugins/modal.js b/src/components/FlowDiagram/plugins/modal.js
new file mode 100644
index 0000000..b37ca14
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/modal.js
@@ -0,0 +1,83 @@
+import { Message, MessageBox, Notification, Loading } from 'element-ui'
+
+let loadingInstance;
+
+export default {
+  // 消息提示
+  msg(content) {
+    Message.info(content)
+  },
+  // 错误消息
+  msgError(content) {
+    Message.error(content)
+  },
+  // 成功消息
+  msgSuccess(content) {
+    Message.success(content)
+  },
+  // 警告消息
+  msgWarning(content) {
+    Message.warning(content)
+  },
+  // 弹出提示
+  alert(content) {
+    MessageBox.alert(content, "系统提示")
+  },
+  // 错误提示
+  alertError(content) {
+    MessageBox.alert(content, "系统提示", { type: 'error' })
+  },
+  // 成功提示
+  alertSuccess(content) {
+    MessageBox.alert(content, "系统提示", { type: 'success' })
+  },
+  // 警告提示
+  alertWarning(content) {
+    MessageBox.alert(content, "系统提示", { type: 'warning' })
+  },
+  // 通知提示
+  notify(content) {
+    Notification.info(content)
+  },
+  // 错误通知
+  notifyError(content) {
+    Notification.error(content);
+  },
+  // 成功通知
+  notifySuccess(content) {
+    Notification.success(content)
+  },
+  // 警告通知
+  notifyWarning(content) {
+    Notification.warning(content)
+  },
+  // 确认窗体
+  confirm(content) {
+    return MessageBox.confirm(content, "系统提示", {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: "warning",
+    })
+  },
+  // 提交内容
+  prompt(content) {
+    return MessageBox.prompt(content, "系统提示", {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: "warning",
+    })
+  },
+  // 打开遮罩层
+  loading(content) {
+    loadingInstance = Loading.service({
+      lock: true,
+      text: content,
+      spinner: "el-icon-loading",
+      background: "rgba(0, 0, 0, 0.7)",
+    })
+  },
+  // 关闭遮罩层
+  closeLoading() {
+    loadingInstance.close();
+  }
+}
diff --git a/src/components/FlowDiagram/plugins/package/designer/ProcessDesigner.vue b/src/components/FlowDiagram/plugins/package/designer/ProcessDesigner.vue
new file mode 100644
index 0000000..cefa73c
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/designer/ProcessDesigner.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="my-process-designer">
+    <div class="my-process-designer__header">
+      <slot name="control-header"></slot>
+      <template >
+        <el-button-group key="file-control">
+          <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-edit-outline" @click="onSave">保存流程
+          </el-button>
+        </el-button-group>
+      </template>
+    </div>
+    <div class="my-process-designer__container">
+      <div class="my-process-designer__canvas" ref="bpmn-canvas" id="bpmn-canvas"></div>
+    </div>
+    <el-dialog title="预览" width="60%" :visible.sync="previewModelVisible" append-to-body destroy-on-close>
+      <highlightjs :language="previewType" :code="previewResult" style="height: 60vh" />
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {reactive,onMounted,defineEmits ,defineProps} from 'vue'
+  // 生产环境时优化
+  // const BpmnModeler = window.BpmnJS;
+  import BpmnModeler from "bpmn-js/lib/Modeler";
+  import DefaultEmptyXML from "./plugins/defaultEmpty";
+  // 翻译方法
+  import customTranslate from "./plugins/translate/customTranslate.ts";
+
+  import MoveModule from 'diagram-js/lib/features/move'
+  import ModelingModule from 'bpmn-js/lib/features/modeling'
+  import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
+  // 引入json转换与高亮
+  import convert from "xml-js";
+  const emit = defineEmits(['init-finished', 'event', 'commandStack-changed', 'input', 'change', 'canvas-viewbox-changed', 'destroy', 'save', 'element-click', 'connection-added', 'connection-removed', 'connection-changed']);
+  const props = defineProps({
+    value: String, // xml 字符串
+    processId: String,
+    processName: String,
+    translations: Object, // 自定义的翻译文件
+    additionalModel: [Object, Array], // 自定义model
+    moddleExtension: Object, // 自定义moddle
+    onlyCustomizeAddi: {
+      type: Boolean,
+      default: false
+    },
+    onlyCustomizeModdle: {
+      type: Boolean,
+      default: false
+    },
+    simulation: {
+      type: Boolean,
+      default: true
+    },
+    keyboard: {
+      type: Boolean,
+      default: true
+    },
+    prefix: {
+      type: String,
+      default: "flowable"
+    },
+    events: {
+      type: Array,
+      default: () => ["element.click"]
+    },
+    headerButtonSize: {
+      type: String,
+      default: "small",
+      validator: value => ["default", "medium", "small", "mini"].indexOf(value) !== -1
+    },
+    headerButtonType: {
+      type: String,
+      default: "primary",
+      validator: value => ["default", "primary", "success", "warning", "danger", "info"].indexOf(value) !== -1
+    }
+  })
+  const data = reactive({
+    defaultZoom: 1,
+    previewModelVisible: false,
+    simulationStatus: false,
+    previewResult: "",
+    previewType: "xml",
+    recoverable: false,
+    revocable: false,
+    bpmnModeler:'',
+  })
+  onMounted(() => {
+    initBpmnModeler();
+    createNewDiagram(props.value);
+  })
+  function onSave() {
+    return new Promise((resolve, reject) => {
+      if (data.bpmnModeler == null) {
+        reject();
+      }
+      data.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+        emit('save', xml);
+        resolve(xml);
+      });
+    })
+  }
+  function initBpmnModeler() {
+    if (data.bpmnModeler) return;
+    const containerEl = document.querySelector('#bpmn-canvas');
+    data.bpmnModeler = new BpmnModeler({
+      container: '#bpmn-canvas',
+      keyboard: props.keyboard ? { bindTo: document } : null,
+      additionalModules: this.additionalModules,
+      moddleExtensions: this.moddleExtensions
+    });
+    $emit("init-finished", data.bpmnModeler);
+    initModelListeners();
+  }
+ function initModelListeners() {
+    const EventBus = data.bpmnModeler.get("eventBus");
+    // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
+    this.events.forEach(event => {
+      EventBus.on(event, function (eventObj) {
+        let eventName = event.replace(/\./g, "-");
+        let element = eventObj ? eventObj.element : null;
+        emit(eventName, element, eventObj);
+        emit('event', eventName, element, eventObj);
+      });
+    });
+    // 监听图形改变返回xml
+    EventBus.on("commandStack.changed", async event => {
+      try {
+        this.recoverable = data.bpmnModeler.get("commandStack").canRedo();
+        this.revocable = data.bpmnModeler.get("commandStack").canUndo();
+        let { xml } = await data.bpmnModeler.saveXML({ format: true });
+        emit("commandStack-changed", event);
+        emit("input", xml);
+        emit("change", xml);
+      } catch (e) {
+        console.error(`[Process Designer Warn]: ${e.message || e}`);
+      }
+    });
+    // 监听视图缩放变化
+    data.bpmnModeler.on("canvas.viewbox.changed", ({ viewbox }) => {
+      this.$emit("canvas-viewbox-changed", { viewbox });
+      const { scale } = viewbox;
+      data.defaultZoom = Math.floor(scale * 100) / 100;
+    });
+  }
+    /* 创建新的流程图 */
+    async function createNewDiagram(xml) {
+    // 将字符串转换成图显示出来
+    let newId = props.processId || `Process_${new Date().getTime()}`;
+    let newName = props.processName || `业务流程_${new Date().getTime()}`;
+    let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix);
+    try {
+      let { warnings } = await data.bpmnModeler.importXML(xmlString);
+      if (warnings && warnings.length) {
+        warnings.forEach(warn => console.warn(warn));
+      }
+    } catch (e) {
+      console.error(`[Process Designer Warn]: ${e.message || e}`);
+    }
+  }
+
+    // 下载流程图到本地
+    async function downloadProcess(type, name) {
+    try {
+      const _this = this;
+      // 按需要类型创建文件并下载
+      if (type === "xml" || type === "bpmn") {
+        const { err, xml } = await data.bpmnModeler.saveXML();
+        // 读取异常时抛出异常
+        if (err) {
+          console.error(`[Process Designer Warn ]: ${err.message || err}`);
+        }
+        let { href, filename } = setEncoded(type.toUpperCase(), name, xml);
+        downloadFunc(href, filename);
+      } else {
+        const { err, svg } = await data.bpmnModeler.saveSVG();
+        // 读取异常时抛出异常
+        if (err) {
+          return console.error(err);
+        }
+        let { href, filename } = setEncoded("SVG", name, svg);
+        downloadFunc(href, filename);
+      }
+    } catch (e) {
+      console.error(`[Process Designer Warn ]: ${e.message || e}`);
+    }
+    // 文件下载方法
+    function downloadFunc(href, filename) {
+      if (href && filename) {
+        let a = document.createElement("a");
+        a.download = filename; //指定下载的文件名
+        a.href = href; //  URL对象
+        a.click(); // 模拟点击
+        URL.revokeObjectURL(a.href); // 释放URL 对象
+      }
+    }
+  }
+
+  // 根据所需类型进行转码并返回下载地址
+  function setEncoded(type, filename = "diagram", data) {
+    const encodedData = encodeURIComponent(data);
+    return {
+      filename: `${filename}.${type}`,
+      href: `data:application/${type === "svg" ? "text/xml" : "bpmn20-xml"};charset=UTF-8,${encodedData}`,
+      data: data
+    };
+  }
+</script>
\ No newline at end of file
diff --git a/src/components/FlowDiagram/plugins/package/designer/index.ts b/src/components/FlowDiagram/plugins/package/designer/index.ts
new file mode 100644
index 0000000..0566ee9
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/designer/index.ts
@@ -0,0 +1,7 @@
+import BpmnProcessDesigner from "./ProcessDesigner.vue";
+
+BpmnProcessDesigner.install = function(Vue) {
+  Vue.component(BpmnProcessDesigner.name, BpmnProcessDesigner);
+};
+
+export default BpmnProcessDesigner;
diff --git a/src/components/FlowDiagram/plugins/package/designer/plugins/defaultEmpty.ts b/src/components/FlowDiagram/plugins/package/designer/plugins/defaultEmpty.ts
new file mode 100644
index 0000000..9ec1df1
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/designer/plugins/defaultEmpty.ts
@@ -0,0 +1,27 @@
+export default (key, name, type) => {
+  if (!type) type = "camunda";
+  const TYPE_TARGET = {
+    activiti: "http://activiti.org/bpmn",
+    camunda: "http://bpmn.io/schema/bpmn",
+    flowable: "http://flowable.org/bpmn"
+  };
+  return `
+    <?xml version="1.0" encoding="UTF-8"?>
+    <bpmn2:definitions 
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
+      xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
+      xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
+      xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
+      xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"
+      id="diagram_${key}"
+      targetNamespace="${TYPE_TARGET[type]}">
+      <bpmn2:process id="${key}" name="${name}" isExecutable="true">
+      </bpmn2:process>
+      <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+        <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
+        </bpmndi:BPMNPlane>
+      </bpmndi:BPMNDiagram>
+    </bpmn2:definitions>
+  `;
+};
diff --git a/src/components/FlowDiagram/plugins/package/designer/plugins/translate/customTranslate.ts b/src/components/FlowDiagram/plugins/package/designer/plugins/translate/customTranslate.ts
new file mode 100644
index 0000000..5ed03d5
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/designer/plugins/translate/customTranslate.ts
@@ -0,0 +1,9 @@
+import translations from './zh.ts'
+
+export default function customTranslate(template, replacements) {
+  replacements = replacements || {}
+  template = translations[template] || template
+  return template.replace(/{([^}]+)}/g, function (_, key) {
+    return replacements[key] || '{' + key + '}'
+  })
+}
diff --git a/src/components/FlowDiagram/plugins/package/designer/plugins/translate/zh.ts b/src/components/FlowDiagram/plugins/package/designer/plugins/translate/zh.ts
new file mode 100644
index 0000000..9927cb4
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/designer/plugins/translate/zh.ts
@@ -0,0 +1,253 @@
+export default {
+  "Activate hand tool": "激活抓手工具",
+  "Activate lasso tool": "激活套索工具",
+  "Activate create/remove space tool": "激活创建/删除空间工具",
+  "Activate global connect tool": "激活全局连接工具",
+  "Create start event": "创建开始事件",
+  "Create end event": "创建结束事件",
+  "Create task": "创建任务",
+  "Create user task": "创建用户任务",
+  "Create gateway": "创建网关",
+  "Create data object reference": "创建数据对象",
+  "Create data store reference": "创建数据存储",
+  "Create group": "创建分组",
+  "Create intermediate/boundary event": "创建中间/边界事件",
+  "Create expanded sub-process": "创建扩展子过程",
+  "Create pool/participant": "创建池/参与者",
+  "Change element": "修改类型",
+  "Delete": "移除",
+  "Append end event": "追加结束事件",
+  "Append gateway": "追加网关",
+  "Append task": "追加任务",
+  "Append intermediate/boundary event": "追加中间抛出事件/边界事件",
+  "Add text annotation": "添加 text annotation",
+  "Connect using association": "使用关联连接",
+  "Connect to other element": "消息关联",
+  "Start event": "开始事件",
+  "End event": "结束事件",
+  "Message intermediate catch event": "消息中间捕获事件",
+  "Message intermediate throw event": "消息中间抛出事件",
+  "Timer intermediate catch event": "定时中间捕获事件",
+  "Escalation intermediate throw event": "升级中间抛出事件",
+  "Conditional intermediate catch event": "条件中间捕获事件",
+  "Link intermediate catch event": "链接中间捕获事件",
+  "Link intermediate throw event": "链接中间抛出事件",
+  "Compensation intermediate throw event": "补偿中间抛出事件",
+  "Signal intermediate catch event": "信号中间捕获事件",
+  "Signal intermediate throw event": "信号中间抛出事件",
+  "User task": "用户任务",
+  "Service task": "服务任务",
+  "Send task": "发送任务",
+  "Receive task": "、接收任务",
+  "Manual task": "手动任务",
+  "Business rule task": "业务规则任务",
+  "Script task": "脚本任务",
+  "Call activity": "调用活动",
+  "Sub-process (collapsed)": "子流程(已折叠)",
+  "Sub-process (expanded)": "子流程(扩大)",
+  "Intermediate throw event": "中间抛出事件",
+  "Message start event": "消息开始事件",
+  "Timer start event": "定时开始事件",
+  "Conditional start event": "条件开始事件",
+  "Signal start event": "信号开始事件",
+  "Exclusive gateway":"排他网关",
+  "Parallel gateway":"并行网关",
+  "Inclusive gateway":"包容网关",
+  "Complex gateway":"复杂网关",
+  "Event-based gateway":"事件网关",
+  "Message end event":"消息结束事件",
+  "Escalation end event":"升级结束事件",
+  "Error end event":"错误结束事件",
+  "Compensation end event":"补偿结束事件",
+  "Signal end event":"信号结束事件",
+  "Terminate end event":"终止结束事件",
+
+       
+    
+
+
+  "Process": "业务流程",
+  "Append EndEvent": "追加结束事件",
+  "Append Gateway": "追加网关",
+  "Append Task": "追加任务",
+  "Append Intermediate/Boundary Event": "追加中间抛出事件/边界事件",
+  "Activate the global connect tool": "激活全局连接工具",
+  "Append {type}": "添加 {type}",
+  "Add Lane above": "在上面添加道",
+  "Divide into two Lanes": "分割成两个道",
+  "Divide into three Lanes": "分割成三个道",
+  "Add Lane below": "在下面添加道",
+  "Append compensation activity": "追加补偿活动",
+  "Change type": "修改类型",
+  "Connect using Association": "使用关联连接",
+  "Connect using Sequence/MessageFlow or Association": "使用顺序/消息流或者关联连接",
+  "Connect using DataInputAssociation": "使用数据输入关联连接",
+  "Remove": "移除",
+  "Activate the hand tool": "激活抓手工具",
+  "Activate the lasso tool": "激活套索工具",
+  "Activate the create/remove space tool": "激活创建/删除空间工具",
+  "Create expanded SubProcess": "创建扩展子过程",
+  "Create IntermediateThrowEvent/BoundaryEvent": "创建中间抛出事件/边界事件",
+  "Create Pool/Participant": "创建池/参与者",
+  "Parallel Multi Instance": "并行多重事件",
+  "Sequential Multi Instance": "时序多重事件",
+  "DataObjectReference": "数据对象参考",
+  "DataStoreReference": "数据存储参考",
+  "Loop": "循环",
+  "Ad-hoc": "即席",
+  "Create {type}": "创建 {type}",
+  "Create StartEvent": "创建开始事件",
+  "Create EndEvent": "创建结束事件",
+  "Create Task": "创建任务",
+  "Create User Task": "创建用户任务",
+  "Create Gateway": "创建网关",
+  "Create DataObjectReference": "创建数据对象",
+  "Create DataStoreReference": "创建数据存储",
+  "Create Group": "创建分组",
+  "Create Intermediate/Boundary Event": "创建中间/边界事件",
+  "Message Start Event": "消息开始事件",
+  "Timer Start Event": "定时开始事件",
+  "Conditional Start Event": "条件开始事件",
+  "Signal Start Event": "信号开始事件",
+  "Error Start Event": "错误开始事件",
+  "Escalation Start Event": "升级开始事件",
+  "Compensation Start Event": "补偿开始事件",
+  "Message Start Event (non-interrupting)": "消息开始事件（非中断）",
+  "Timer Start Event (non-interrupting)": "定时开始事件（非中断）",
+  "Conditional Start Event (non-interrupting)": "条件开始事件（非中断）",
+  "Signal Start Event (non-interrupting)": "信号开始事件（非中断）",
+  "Escalation Start Event (non-interrupting)": "升级开始事件（非中断）",
+  "Message Intermediate Catch Event": "消息中间捕获事件",
+  "Message Intermediate Throw Event": "消息中间抛出事件",
+  "Timer Intermediate Catch Event": "定时中间捕获事件",
+  "Escalation Intermediate Throw Event": "升级中间抛出事件",
+  "Conditional Intermediate Catch Event": "条件中间捕获事件",
+  "Link Intermediate Catch Event": "链接中间捕获事件",
+  "Link Intermediate Throw Event": "链接中间抛出事件",
+  "Compensation Intermediate Throw Event": "补偿中间抛出事件",
+  "Signal Intermediate Catch Event": "信号中间捕获事件",
+  "Signal Intermediate Throw Event": "信号中间抛出事件",
+  "Collapsed Pool": "折叠池",
+  "Expanded Pool": "展开池",
+  "no parent for {element} in {parent}": "在{parent}里，{element}没有父类",
+  "no shape type specified": "没有指定的形状类型",
+  "flow elements must be children of pools/participants": "流元素必须是池/参与者的子类",
+  "out of bounds release": "out of bounds release",
+  "more than {count} child lanes": "子道大于{count} ",
+  "element required": "元素不能为空",
+  "diagram not part of bpmn:Definitions": "流程图不符合bpmn规范",
+  "no diagram to display": "没有可展示的流程图",
+  "no process or collaboration to display": "没有可展示的流程/协作",
+  "element {element} referenced by {referenced}#{property} not yet drawn":
+    "由{referenced}#{property}引用的{element}元素仍未绘制",
+  "already rendered {element}": "{element} 已被渲染",
+  "failed to import {element}": "导入{element}失败",
+  "Id": "编号",
+  "Name": "名称",
+  "General": "常规",
+  "Details": "详情",
+  "Message Name": "消息名称",
+  "Message": "消息",
+  "Initiator": "创建者",
+  "Asynchronous Continuations": "持续异步",
+  "Asynchronous Before": "异步前",
+  "Asynchronous After": "异步后",
+  "Job Configuration": "工作配置",
+  "Exclusive": "排除",
+  "Job Priority": "工作优先级",
+  "Retry Time Cycle": "重试时间周期",
+  "Documentation": "文档",
+  "Element Documentation": "元素文档",
+  "History Configuration": "历史配置",
+  "History Time To Live": "历史的生存时间",
+  "Forms": "表单",
+  "Form Key": "表单key",
+  "Form Fields": "表单字段",
+  "Business Key": "业务key",
+  "Form Field": "表单字段",
+  "ID": "编号",
+  "Type": "类型",
+  "Label": "名称",
+  "Default Value": "默认值",
+  "Default Flow": "默认流转路径",
+  "Conditional Flow": "条件流转路径",
+  "Sequence Flow": "普通流转路径",
+  "Validation": "校验",
+  "Add Constraint": "添加约束",
+  "Config": "配置",
+  "Properties": "属性",
+  "Add Property": "添加属性",
+  "Value": "值",
+  "Listeners": "监听器",
+  "Execution Listener": "执行监听",
+  "Event Type": "事件类型",
+  "Listener Type": "监听器类型",
+  "Java Class": "Java类",
+  "Expression": "表达式",
+  "Must provide a value": "必须提供一个值",
+  "Delegate Expression": "代理表达式",
+  "Script": "脚本",
+  "Script Format": "脚本格式",
+  "Script Type": "脚本类型",
+  "Inline Script": "内联脚本",
+  "External Script": "外部脚本",
+  "Resource": "资源",
+  "Field Injection": "字段注入",
+  "Extensions": "扩展",
+  "Input/Output": "输入/输出",
+  "Input Parameters": "输入参数",
+  "Output Parameters": "输出参数",
+  "Parameters": "参数",
+  "Output Parameter": "输出参数",
+  "Timer Definition Type": "定时器定义类型",
+  "Timer Definition": "定时器定义",
+  "Date": "日期",
+  "Duration": "持续",
+  "Cycle": "循环",
+  "Signal": "信号",
+  "Signal Name": "信号名称",
+  "Escalation": "升级",
+  "Error": "错误",
+  "Link Name": "链接名称",
+  "Condition": "条件名称",
+  "Variable Name": "变量名称",
+  "Variable Event": "变量事件",
+  "Specify more than one variable change event as a comma separated list.": "多个变量事件以逗号隔开",
+  "Wait for Completion": "等待完成",
+  "Activity Ref": "活动参考",
+  "Version Tag": "版本标签",
+  "Executable": "可执行文件",
+  "External Task Configuration": "扩展任务配置",
+  "Task Priority": "任务优先级",
+  "External": "外部",
+  "Connector": "连接器",
+  "Must configure Connector": "必须配置连接器",
+  "Connector Id": "连接器编号",
+  "Implementation": "实现方式",
+  "Field Injections": "字段注入",
+  "Fields": "字段",
+  "Result Variable": "结果变量",
+  "Topic": "主题",
+  "Configure Connector": "配置连接器",
+  "Input Parameter": "输入参数",
+  "Assignee": "代理人",
+  "Candidate Users": "候选用户",
+  "Candidate Groups": "候选组",
+  "Due Date": "到期时间",
+  "Follow Up Date": "跟踪日期",
+  "Priority": "优先级",
+  "The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)":
+    "跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00",
+  "The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)":
+    "跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00",
+  "Variables": "变量",
+  "Candidate Starter Configuration": "候选人起动器配置",
+  "Candidate Starter Groups": "候选人起动器组",
+  "This maps to the process definition key.": "这映射到流程定义键。",
+  "Candidate Starter Users": "候选人起动器的用户",
+  "Specify more than one user as a comma separated list.": "指定多个用户作为逗号分隔的列表。",
+  "Tasklist Configuration": "Tasklist配置",
+  "Startable": "启动",
+  "Specify more than one group as a comma separated list.": "指定多个组作为逗号分隔的列表。",
+  "Execution listeners": "执行监听器"
+};
diff --git a/src/components/FlowDiagram/plugins/package/highlight/index.js b/src/components/FlowDiagram/plugins/package/highlight/index.js
new file mode 100644
index 0000000..bff9211
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/highlight/index.js
@@ -0,0 +1,5 @@
+const hljs = require("highlight.js/lib/core");
+hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
+hljs.registerLanguage("json", require("highlight.js/lib/languages/json"));
+
+module.exports = hljs;
diff --git a/src/components/FlowDiagram/plugins/package/index.js b/src/components/FlowDiagram/plugins/package/index.js
new file mode 100644
index 0000000..d076cdd
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/index.js
@@ -0,0 +1,7 @@
+import BpmnProcessDesigner from "./designer";
+import BmpnProcessPenal from "./penal";
+
+export {
+  BpmnProcessDesigner,
+  BmpnProcessPenal
+}
diff --git a/src/components/FlowDiagram/plugins/package/penal/PropertiesPanel.vue b/src/components/FlowDiagram/plugins/package/penal/PropertiesPanel.vue
new file mode 100644
index 0000000..afd5835
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/PropertiesPanel.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="process-panel__container" :style="{ width: `${this.width}px` }">
+    <el-collapse v-model="activeTab">
+      <el-collapse-item name="base">
+        <div slot="title" class="panel-tab__title"><i class="el-icon-info"></i>常规</div>
+        <element-base-info :id-edit-disabled="idEditDisabled" :business-object="elementBusinessObject"
+          :type="elementType" />
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+<script lang="ts" setup>
+  import ElementBaseInfo from "./base/ElementBaseInfo.vue";
+  import {reactive,onMounted,defineEmits ,defineProps,provide} from 'vue'
+
+  /**
+   * 侧边栏
+   * @Author MiyueFE
+   * @Home https://github.com/miyuesc
+   * @Date 2021年3月31日18:57:51
+   */
+  const props = defineProps({
+    bpmnModeler: Object,
+    prefix: {
+      type: String,
+      default: "camunda"
+    },
+    width: {
+      type: Number,
+      default: 480
+    },
+    idEditDisabled: {
+      type: Boolean,
+      default: false
+    }
+  })
+  provide('prefix', props.prefix)
+  provide('width', props.width)
+  const data = reactive({
+    bpmnElement:'',
+    activeTab: "base",
+    elementId: "",
+    elementType: "",
+    elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
+    conditionFormVisible: false, // 流转条件设置
+    formVisible: false // 表单配置
+  })
+  onMounted(() => {
+    initModels()
+  })
+  function initModels() {
+    window.bpmnInstances = {
+      modeler: props.bpmnModeler,
+      modeling: props.bpmnModeler.get("modeling"),
+      moddle: props.bpmnModeler.get("moddle"),
+      eventBus: props.bpmnModeler.get("eventBus"),
+      bpmnFactory: props.bpmnModeler.get("bpmnFactory"),
+      elementFactory: props.bpmnModeler.get("elementFactory"),
+      elementRegistry: props.bpmnModeler.get("elementRegistry"),
+      replace: props.bpmnModeler.get("replace"),
+      selection: props.bpmnModeler.get("selection")
+    };
+    getActiveElement();
+  }
+  function getActiveElement() {
+    // 初始第一个选中元素 bpmn:Process
+    initFormOnChanged(null);
+    props.bpmnModeler.on("import.done", e => {
+      initFormOnChanged(null);
+    });
+    // 监听选择事件，修改当前激活的元素以及表单
+    props.bpmnModeler.on("selection.changed", ({ newSelection }) => {
+      initFormOnChanged(newSelection[0] || null);
+    });
+    props.bpmnModeler.on("element.changed", ({ element }) => {
+      // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
+      if (element && element.id === data.elementId) {
+        initFormOnChanged(element);
+      }
+    });
+  }
+  // 初始化数据
+  function initFormOnChanged(element) {
+    let activatedElement = element;
+    if (!activatedElement) {
+      activatedElement =
+        window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??
+        window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Collaboration");
+    }
+    if (!activatedElement) return;
+    console.log(`
+              ----------
+      select element changed:
+                id:  ${activatedElement.id}
+              type:  ${activatedElement.businessObject.$type}
+              ----------
+              `);
+    console.log("businessObject: ", activatedElement.businessObject);
+    window.bpmnInstances.bpmnElement = activatedElement;
+    data.bpmnElement = activatedElement;
+    data.elementId = activatedElement.id;
+    data.elementType = activatedElement.type.split(":")[1] || "";
+    data.elementBusinessObject = JSON.parse(JSON.stringify(activatedElement.businessObject));
+    data.conditionFormVisible = !!(
+      this.elementType === "SequenceFlow" &&
+      activatedElement.source &&
+      activatedElement.source.type.indexOf("StartEvent") === -1
+    );
+    data.formVisible = data.elementType === "UserTask" || data.elementType === "StartEvent";
+  }
+</script>
\ No newline at end of file
diff --git a/src/components/FlowDiagram/plugins/package/penal/base/ElementBaseInfo.vue b/src/components/FlowDiagram/plugins/package/penal/base/ElementBaseInfo.vue
new file mode 100644
index 0000000..303d59d
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/base/ElementBaseInfo.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form size="mini" label-width="90px" @submit.native.prevent>
+      <el-form-item label="ID">
+        <el-input
+          v-model="elementBaseInfo.id"
+          :disabled="idEditDisabled || elementBaseInfo.$type === 'bpmn:Process'"
+          clearable
+          @change="updateBaseInfo('id')"
+        />
+      </el-form-item>
+      <el-form-item label="名称">
+        <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
+      </el-form-item>
+      <!--流程的基础属性-->
+      <template v-if="elementBaseInfo.$type === 'bpmn:Process'">
+        <el-form-item label="版本标签">
+          <el-input v-model="elementBaseInfo.versionTag" clearable @change="updateBaseInfo('versionTag')" />
+        </el-form-item>
+        <el-form-item label="可执行">
+          <el-switch v-model="elementBaseInfo.isExecutable" active-text="是" inactive-text="否" @change="updateBaseInfo('isExecutable')" />
+        </el-form-item>
+      </template>
+    </el-form>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "ElementBaseInfo",
+  props: {
+    businessObject: Object,
+    type: String,
+    idEditDisabled: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      elementBaseInfo: {},
+    };
+  },
+  watch: {
+    businessObject: {
+      immediate: false,
+      handler: function(val) {
+        if (val) {
+          this.$nextTick(() => this.resetBaseInfo());
+        }
+      }
+    }
+  },
+  methods: {
+    resetBaseInfo() {
+      this.bpmnElement = window?.bpmnInstances?.bpmnElement;
+      this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
+    },
+    updateBaseInfo(key) {
+      const attrObj = Object.create(null);
+      attrObj[key] = this.elementBaseInfo[key];
+      if (key === "id") {
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+          id: this.elementBaseInfo[key],
+          di: { id: `${this.elementBaseInfo[key]}_di` }
+        });
+      } else {
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj);
+      }
+    }
+  },
+  beforeDestroy() {
+    this.bpmnElement = null;
+  }
+};
+</script>
diff --git a/src/components/FlowDiagram/plugins/package/penal/flow-condition/FlowCondition.vue b/src/components/FlowDiagram/plugins/package/penal/flow-condition/FlowCondition.vue
new file mode 100644
index 0000000..94cf823
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/flow-condition/FlowCondition.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form :model="flowConditionForm" label-width="90px" size="mini" @submit.native.prevent>
+      <el-form-item label="流转类型">
+        <el-select v-model="flowConditionForm.type" @change="updateFlowType">
+          <el-option label="普通流转路径" value="normal" />
+          <el-option label="默认流转路径" value="default" />
+          <el-option label="条件流转路径" value="condition" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
+        <el-select v-model="flowConditionForm.conditionType">
+          <el-option label="表达式" value="expression" />
+          <el-option label="脚本" value="script" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="表达式" v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'expression'" key="express">
+        <el-input v-model="flowConditionForm.body" clearable @change="updateFlowCondition" />
+      </el-form-item>
+      <template v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'">
+        <el-form-item label="脚本语言" key="language">
+          <el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
+        </el-form-item>
+        <el-form-item label="脚本类型" key="scriptType">
+          <el-select v-model="flowConditionForm.scriptType">
+            <el-option label="内联脚本" value="inlineScript" />
+            <el-option label="外部脚本" value="externalScript" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="脚本" v-if="flowConditionForm.scriptType === 'inlineScript'" key="body">
+          <el-input v-model="flowConditionForm.body" type="textarea" clearable @change="updateFlowCondition" />
+        </el-form-item>
+        <el-form-item label="资源地址" v-if="flowConditionForm.scriptType === 'externalScript'" key="resource">
+          <el-input v-model="flowConditionForm.resource" clearable @change="updateFlowCondition" />
+        </el-form-item>
+      </template>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FlowCondition",
+  props: {
+    businessObject: Object,
+    type: String
+  },
+  data() {
+    return {
+      flowConditionForm: {}
+    };
+  },
+  watch: {
+    businessObject: {
+      immediate: true,
+      handler() {
+        this.$nextTick(() => this.resetFlowCondition());
+      }
+    }
+  },
+  methods: {
+    resetFlowCondition() {
+      this.bpmnElement = window.bpmnInstances.bpmnElement;
+      this.bpmnElementSource = this.bpmnElement.source;
+      this.bpmnElementSourceRef = this.bpmnElement.businessObject.sourceRef;
+      if (this.bpmnElementSourceRef && this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
+        // 默认
+        this.flowConditionForm = { type: "default" };
+      } else if (!this.bpmnElement.businessObject.conditionExpression) {
+        // 普通
+        this.flowConditionForm = { type: "normal" };
+      } else {
+        // 带条件
+        const conditionExpression = this.bpmnElement.businessObject.conditionExpression;
+        this.flowConditionForm = { ...conditionExpression, type: "condition" };
+        // resource 可直接标识 是否是外部资源脚本
+        if (this.flowConditionForm.resource) {
+          this.$set(this.flowConditionForm, "conditionType", "script");
+          this.$set(this.flowConditionForm, "scriptType", "externalScript");
+          return;
+        }
+        if (conditionExpression.language) {
+          this.$set(this.flowConditionForm, "conditionType", "script");
+          this.$set(this.flowConditionForm, "scriptType", "inlineScript");
+          return;
+        }
+        this.$set(this.flowConditionForm, "conditionType", "expression");
+      }
+    },
+    updateFlowType(flowType) {
+      // 正常条件类
+      if (flowType === "condition") {
+        this.flowConditionRef = window.bpmnInstances.moddle.create("bpmn:FormalExpression");
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+          conditionExpression: this.flowConditionRef
+        });
+        return;
+      }
+      // 默认路径
+      if (flowType === "default") {
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+          conditionExpression: null
+        });
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
+          default: this.bpmnElement
+        });
+        return;
+      }
+      // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
+      if (this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
+          default: null
+        });
+      }
+      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+        conditionExpression: null
+      });
+    },
+    updateFlowCondition() {
+      let { conditionType, scriptType, body, resource, language } = this.flowConditionForm;
+      let condition;
+      if (conditionType === "expression") {
+        condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body });
+      } else {
+        if (scriptType === "inlineScript") {
+          condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body, language });
+          this.$set(this.flowConditionForm, "resource", "");
+        } else {
+          this.$set(this.flowConditionForm, "body", "");
+          condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { resource, language });
+        }
+      }
+      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { conditionExpression: condition });
+    }
+  },
+  beforeDestroy() {
+    this.bpmnElement = null;
+    this.bpmnElementSource = null;
+    this.bpmnElementSourceRef = null;
+  }
+};
+</script>
diff --git a/src/components/FlowDiagram/plugins/package/penal/form/ElementForm.vue b/src/components/FlowDiagram/plugins/package/penal/form/ElementForm.vue
new file mode 100644
index 0000000..d15fd5e
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/form/ElementForm.vue
@@ -0,0 +1,390 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form size="mini" label-width="90px" @submit.native.prevent>
+      <el-form-item label="表单" prop="formKey">
+        <el-select v-model="formKey" placeholder="请选择表单" @change="updateElementFormKey" clearable>
+          <el-option v-for="item in formOptions" :key="item.formId" :label="item.formName" :value="`key_${item.formId}`" />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="localScope">
+        <span slot="label">
+          <el-tooltip content="若为节点表单，则表单信息仅在此节点可用，默认为全局表单，表单信息在整个流程实例中可用" placement="top-start">
+            <i class="header-icon el-icon-info"></i>
+          </el-tooltip>
+          <span>节点表单</span>
+        </span>
+        <el-switch :disabled="type === 'StartEvent'" v-model="localScope" active-text="是" inactive-text="否" @change="updateElementFormScope()" />
+      </el-form-item>
+<!--      <el-form-item label="表单标识">-->
+<!--        <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="业务标识">-->
+<!--        <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
+<!--          <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
+<!--          <el-option label="无" value="" />-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
+    </el-form>
+
+    <!--字段列表-->
+<!--    <div class="element-property list-property">-->
+<!--      <el-divider><i class="el-icon-coin"></i> 表单字段</el-divider>-->
+<!--      <el-table :data="fieldList" size="mini" max-height="240" border fit>-->
+<!--        <el-table-column label="序号" type="index" width="50px" />-->
+<!--        <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
+<!--        <el-table-column label="字段类型" prop="type" min-width="80px" :formatter="row => fieldType[row.type] || row.type" show-overflow-tooltip />-->
+<!--        <el-table-column label="默认值" prop="defaultValue" min-width="80px" show-overflow-tooltip />-->
+<!--        <el-table-column label="操作" width="90px">-->
+<!--          <template slot-scope="{ row, $index }">-->
+<!--            <el-button size="mini" type="text" @click="openFieldForm(row, $index)">编辑</el-button>-->
+<!--            <el-divider direction="vertical" />-->
+<!--            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+<!--      </el-table>-->
+<!--    </div>-->
+<!--    <div class="element-drawer__button">-->
+<!--      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openFieldForm(null, -1)">添加字段</el-button>-->
+<!--    </div>-->
+
+    <!--字段配置侧边栏-->
+<!--    <el-drawer :visible.sync="fieldModelVisible" title="字段配置" :size="`${width}px`" append-to-body destroy-on-close>-->
+<!--      <el-form :model="formFieldForm" label-width="90px" size="mini" @submit.native.prevent>-->
+<!--        <el-form-item label="字段ID">-->
+<!--          <el-input v-model="formFieldForm.id" clearable />-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="类型">-->
+<!--          <el-select v-model="formFieldForm.typeType" placeholder="请选择字段类型" clearable @change="changeFieldTypeType">-->
+<!--            <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
+<!--          </el-select>-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
+<!--          <el-input v-model="formFieldForm.type" clearable />-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="名称">-->
+<!--          <el-input v-model="formFieldForm.label" clearable />-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
+<!--          <el-input v-model="formFieldForm.datePattern" clearable />-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="默认值">-->
+<!--          <el-input v-model="formFieldForm.defaultValue" clearable />-->
+<!--        </el-form-item>-->
+<!--      </el-form>-->
+
+<!--      &lt;!&ndash; 枚举值设置 &ndash;&gt;-->
+<!--      <template v-if="formFieldForm.type === 'enum'">-->
+<!--        <el-divider key="enum-divider" />-->
+<!--        <p class="listener-filed__title" key="enum-title">-->
+<!--          <span><i class="el-icon-menu"></i>枚举值列表：</span>-->
+<!--          <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>-->
+<!--        </p>-->
+<!--        <el-table :data="fieldEnumList" size="mini" key="enum-table" max-height="240" border fit>-->
+<!--          <el-table-column label="序号" width="50px" type="index" />-->
+<!--          <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
+<!--          <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
+<!--          <el-table-column label="操作" width="90px">-->
+<!--            <template slot-scope="{ row, $index }">-->
+<!--              <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>-->
+<!--              <el-divider direction="vertical" />-->
+<!--              <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>-->
+<!--            </template>-->
+<!--          </el-table-column>-->
+<!--        </el-table>-->
+<!--      </template>-->
+
+<!--      &lt;!&ndash; 校验规则 &ndash;&gt;-->
+<!--      <el-divider key="validation-divider" />-->
+<!--      <p class="listener-filed__title" key="validation-title">-->
+<!--        <span><i class="el-icon-menu"></i>约束条件列表：</span>-->
+<!--        <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>-->
+<!--      </p>-->
+<!--      <el-table :data="fieldConstraintsList" size="mini" key="validation-table" max-height="240" border fit>-->
+<!--        <el-table-column label="序号" width="50px" type="index" />-->
+<!--        <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
+<!--        <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
+<!--        <el-table-column label="操作" width="90px">-->
+<!--          <template slot-scope="{ row, $index }">-->
+<!--            <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>-->
+<!--            <el-divider direction="vertical" />-->
+<!--            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+<!--      </el-table>-->
+
+<!--      &lt;!&ndash; 表单属性 &ndash;&gt;-->
+<!--      <el-divider key="property-divider" />-->
+<!--      <p class="listener-filed__title" key="property-title">-->
+<!--        <span><i class="el-icon-menu"></i>字段属性列表：</span>-->
+<!--        <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>-->
+<!--      </p>-->
+<!--      <el-table :data="fieldPropertiesList" size="mini" key="property-table" max-height="240" border fit>-->
+<!--        <el-table-column label="序号" width="50px" type="index" />-->
+<!--        <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
+<!--        <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
+<!--        <el-table-column label="操作" width="90px">-->
+<!--          <template slot-scope="{ row, $index }">-->
+<!--            <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>-->
+<!--            <el-divider direction="vertical" />-->
+<!--            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+<!--      </el-table>-->
+
+<!--      &lt;!&ndash; 底部按钮 &ndash;&gt;-->
+<!--      <div class="element-drawer__button">-->
+<!--        <el-button size="mini">取 消</el-button>-->
+<!--        <el-button size="mini" type="primary" @click="saveField">保 存</el-button>-->
+<!--      </div>-->
+<!--    </el-drawer>-->
+
+    <el-dialog :visible.sync="fieldOptionModelVisible" :title="optionModelTitle" width="600px" append-to-body destroy-on-close>
+      <el-form :model="fieldOptionForm" size="mini" label-width="96px" @submit.native.prevent>
+        <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">
+          <el-input v-model="fieldOptionForm.id" clearable />
+        </el-form-item>
+        <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">
+          <el-input v-model="fieldOptionForm.name" clearable />
+        </el-form-item>
+        <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">
+          <el-input v-model="fieldOptionForm.config" clearable />
+        </el-form-item>
+        <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">
+          <el-input v-model="fieldOptionForm.value" clearable />
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button size="mini" @click="fieldOptionModelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="saveFieldOption">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listForm } from "@/api/workflow/form";
+
+export default {
+  name: "ElementForm",
+  props: {
+    id: String,
+    type: String
+  },
+  inject: {
+    prefix: "prefix",
+    width: "width"
+  },
+  data() {
+    return {
+      formOptions: [],
+      formKey: "",
+      localScope: false,
+      businessKey: "",
+      optionModelTitle: "",
+      fieldList: [],
+      formFieldForm: {},
+      fieldType: {
+        long: "长整型",
+        string: "字符串",
+        boolean: "布尔类",
+        date: "日期类",
+        enum: "枚举类",
+        custom: "自定义类型"
+      },
+      formFieldIndex: -1, // 编辑中的字段， -1 为新增
+      formFieldOptionIndex: -1, // 编辑中的字段配置项， -1 为新增
+      fieldModelVisible: false,
+      fieldOptionModelVisible: false,
+      fieldOptionForm: {}, // 当前激活的字段配置项数据
+      fieldOptionType: "", // 当前激活的字段配置项弹窗 类型
+      fieldEnumList: [], // 枚举值列表
+      fieldConstraintsList: [], // 约束条件列表
+      fieldPropertiesList: [] // 绑定属性列表
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler(val) {
+        val && val.length && this.$nextTick(() => this.resetFormList());
+      }
+    }
+  },
+  created() {
+    /** 查询流程分类列表 */
+    this.getFormList();
+  },
+  methods: {
+    /** 查询表单列表 */
+    getFormList() {
+      listForm().then(response => this.formOptions = response.rows)
+    },
+    resetFormList() {
+      this.bpmnELement = window.bpmnInstances.bpmnElement;
+      this.formKey = this.bpmnELement.businessObject.formKey;
+      this.localScope = this.bpmnELement.businessObject.localScope;
+      // 获取元素扩展属性 或者 创建扩展属性
+      this.elExtensionElements =
+        this.bpmnELement.businessObject.get("extensionElements") || window.bpmnInstances.moddle.create("bpmn:ExtensionElements", { values: [] });
+      // 获取元素表单配置 或者 创建新的表单配置
+      // this.formData =
+      //   this.elExtensionElements.values.filter(ex => ex.$type === `${this.prefix}:FormData`)?.[0] ||
+      //   window.bpmnInstances.moddle.create(`${this.prefix}:FormData`, { fields: [] });
+      // 业务标识 businessKey， 绑定在 formData 中
+      // this.businessKey = this.formData.businessKey;
+
+      // 保留剩余扩展元素，便于后面更新该元素对应属性
+      this.otherExtensions = this.elExtensionElements.values.filter(ex => ex.$type !== `${this.prefix}:FormData`);
+
+      // 复制原始值，填充表格
+      // this.fieldList = JSON.parse(JSON.stringify(this.formData.fields || []));
+
+      // 更新元素扩展属性，避免后续报错
+      // this.updateElementExtensions();
+    },
+    updateElementFormKey() {
+      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { formKey: this.formKey });
+    },
+    updateElementFormScope() {
+      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { localScope: this.localScope });
+    },
+    updateElementBusinessKey() {
+      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnELement, this.formData, { businessKey: this.businessKey });
+    },
+    // 根据类型调整字段type
+    changeFieldTypeType(type) {
+      this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
+    },
+
+    // 打开字段详情侧边栏
+    openFieldForm(field, index) {
+      this.formFieldIndex = index;
+      if (index !== -1) {
+        const FieldObject = this.formData.fields[index];
+        this.formFieldForm = JSON.parse(JSON.stringify(field));
+        // 设置自定义类型
+        this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
+        // 初始化枚举值列表
+        field.type === "enum" && (this.fieldEnumList = JSON.parse(JSON.stringify(FieldObject?.values || [])));
+        // 初始化约束条件列表
+        this.fieldConstraintsList = JSON.parse(JSON.stringify(FieldObject?.validation?.constraints || []));
+        // 初始化自定义属性列表
+        this.fieldPropertiesList = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []));
+      } else {
+        this.formFieldForm = {};
+        // 初始化枚举值列表
+        this.fieldEnumList = [];
+        // 初始化约束条件列表
+        this.fieldConstraintsList = [];
+        // 初始化自定义属性列表
+        this.fieldPropertiesList = [];
+      }
+      this.fieldModelVisible = true;
+    },
+    // 打开字段 某个 配置项 弹窗
+    openFieldOptionForm(option, index, type) {
+      this.fieldOptionModelVisible = true;
+      this.fieldOptionType = type;
+      this.formFieldOptionIndex = index;
+      if (type === "property") {
+        this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
+        return (this.optionModelTitle = "属性配置");
+      }
+      if (type === "enum") {
+        this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
+        return (this.optionModelTitle = "枚举值配置");
+      }
+      this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
+      return (this.optionModelTitle = "约束条件配置");
+    },
+
+    // 保存字段 某个 配置项
+    saveFieldOption() {
+      if (this.formFieldOptionIndex === -1) {
+        if (this.fieldOptionType === "property") {
+          this.fieldPropertiesList.push(this.fieldOptionForm);
+        }
+        if (this.fieldOptionType === "constraint") {
+          this.fieldConstraintsList.push(this.fieldOptionForm);
+        }
+        if (this.fieldOptionType === "enum") {
+          this.fieldEnumList.push(this.fieldOptionForm);
+        }
+      } else {
+        this.fieldOptionType === "property" && this.fieldPropertiesList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
+        this.fieldOptionType === "constraint" && this.fieldConstraintsList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
+        this.fieldOptionType === "enum" && this.fieldEnumList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
+      }
+      this.fieldOptionModelVisible = false;
+      this.fieldOptionForm = {};
+    },
+    // 保存字段配置
+    saveField() {
+      const { id, type, label, defaultValue, datePattern } = this.formFieldForm;
+      const Field = window.bpmnInstances.moddle.create(`${this.prefix}:FormField`, { id, type, label });
+      defaultValue && (Field.defaultValue = defaultValue);
+      datePattern && (Field.datePattern = datePattern);
+      // 构建属性
+      if (this.fieldPropertiesList && this.fieldPropertiesList.length) {
+        const fieldPropertyList = this.fieldPropertiesList.map(fp => {
+          return window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { id: fp.id, value: fp.value });
+        });
+        Field.properties = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, { values: fieldPropertyList });
+      }
+      // 构建校验规则
+      if (this.fieldConstraintsList && this.fieldConstraintsList.length) {
+        const fieldConstraintList = this.fieldConstraintsList.map(fc => {
+          return window.bpmnInstances.moddle.create(`${this.prefix}:Constraint`, { name: fc.name, config: fc.config });
+        });
+        Field.validation = window.bpmnInstances.moddle.create(`${this.prefix}:Validation`, { constraints: fieldConstraintList });
+      }
+      // 构建枚举值
+      if (this.fieldEnumList && this.fieldEnumList.length) {
+        Field.values = this.fieldEnumList.map(fe => {
+          return window.bpmnInstances.moddle.create(`${this.prefix}:Value`, { name: fe.name, id: fe.id });
+        });
+      }
+      // 更新数组 与 表单配置实例
+      if (this.formFieldIndex === -1) {
+        this.fieldList.push(this.formFieldForm);
+        this.formData.fields.push(Field);
+      } else {
+        this.fieldList.splice(this.formFieldIndex, 1, this.formFieldForm);
+        this.formData.fields.splice(this.formFieldIndex, 1, Field);
+      }
+      this.updateElementExtensions();
+      this.fieldModelVisible = false;
+    },
+
+    // 移除某个 字段的 配置项
+    removeFieldOptionItem(option, index, type) {
+      if (type === "property") {
+        this.fieldPropertiesList.splice(index, 1);
+        return;
+      }
+      if (type === "enum") {
+        this.fieldEnumList.splice(index, 1);
+        return;
+      }
+      this.fieldConstraintsList.splice(index, 1);
+    },
+    // 移除 字段
+    removeField(field, index) {
+      this.fieldList.splice(index, 1);
+      this.formData.fields.splice(index, 1);
+      this.updateElementExtensions();
+    },
+
+    updateElementExtensions() {
+      // 更新回扩展元素
+      const newElExtensionElements = window.bpmnInstances.moddle.create(`bpmn:ExtensionElements`, {
+        values: this.otherExtensions.concat(this.formData)
+      });
+      // 更新到元素上
+      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
+        extensionElements: newElExtensionElements
+      });
+    }
+  }
+};
+</script>
diff --git a/src/components/FlowDiagram/plugins/package/penal/index.js b/src/components/FlowDiagram/plugins/package/penal/index.js
new file mode 100644
index 0000000..9b398b2
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/index.js
@@ -0,0 +1,7 @@
+import BpmnPropertiesPanel from "./PropertiesPanel.vue";
+
+BpmnPropertiesPanel.install = function(Vue) {
+  Vue.component(BpmnPropertiesPanel.name, BpmnPropertiesPanel);
+};
+
+export default BpmnPropertiesPanel;
diff --git a/src/components/FlowDiagram/plugins/package/penal/listeners/ElementListeners.vue b/src/components/FlowDiagram/plugins/package/penal/listeners/ElementListeners.vue
new file mode 100644
index 0000000..16f5099
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/listeners/ElementListeners.vue
@@ -0,0 +1,296 @@
+<template>
+  <div class="panel-tab__content">
+    <el-table :data="elementListenersList" size="mini" border>
+      <el-table-column label="序号" width="50px" type="index" />
+      <el-table-column label="事件类型" min-width="100px" prop="event" />
+      <el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
+      <el-table-column label="操作" width="90px">
+        <template slot-scope="{ row, $index }">
+          <el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
+          <el-divider direction="vertical" />
+          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="element-drawer__button">
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="`${width}px`" append-to-body destroy-on-close>
+      <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
+        <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-select v-model="listenerForm.event">
+            <el-option label="start" value="start" />
+            <el-option label="end" value="end" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-select v-model="listenerForm.listenerType">
+            <el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'classListener'"
+          label="Java类"
+          prop="class"
+          key="listener-class"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.class" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'expressionListener'"
+          label="表达式"
+          prop="expression"
+          key="listener-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.expression" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
+          label="代理表达式"
+          prop="delegateExpression"
+          key="listener-delegate"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.delegateExpression" clearable />
+        </el-form-item>
+        <template v-if="listenerForm.listenerType === 'scriptListener'">
+          <el-form-item
+            label="脚本格式"
+            prop="scriptFormat"
+            key="listener-script-format"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
+          >
+            <el-input v-model="listenerForm.scriptFormat" clearable />
+          </el-form-item>
+          <el-form-item
+            label="脚本类型"
+            prop="scriptType"
+            key="listener-script-type"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
+          >
+            <el-select v-model="listenerForm.scriptType">
+              <el-option label="内联脚本" value="inlineScript" />
+              <el-option label="外部脚本" value="externalScript" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'inlineScript'"
+            label="脚本内容"
+            prop="value"
+            key="listener-script"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
+          >
+            <el-input v-model="listenerForm.value" clearable />
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'externalScript'"
+            label="资源地址"
+            prop="resource"
+            key="listener-resource"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
+          >
+            <el-input v-model="listenerForm.resource" clearable />
+          </el-form-item>
+        </template>
+      </el-form>
+      <el-divider />
+      <p class="listener-filed__title">
+        <span><i class="el-icon-menu"></i>注入字段：</span>
+        <el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
+      </p>
+      <el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
+        <el-table-column label="序号" width="50px" type="index" />
+        <el-table-column label="字段名称" min-width="100px" prop="name" />
+        <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
+        <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
+        <el-table-column label="操作" width="100px">
+          <template slot-scope="{ row, $index }">
+            <el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
+            <el-divider direction="vertical" />
+            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="element-drawer__button">
+        <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
+      </div>
+    </el-drawer>
+
+    <!-- 注入西段 编辑/创建 部分 -->
+    <el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
+      <el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
+        <el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-input v-model="listenerFieldForm.name" clearable />
+        </el-form-item>
+        <el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-select v-model="listenerFieldForm.fieldType">
+            <el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'string'"
+          label="字段值："
+          prop="string"
+          key="field-string"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.string" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'expression'"
+          label="表达式："
+          prop="expression"
+          key="field-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.expression" clearable />
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { createListenerObject, updateElementExtensions } from "../../utils";
+import { initListenerType, initListenerForm, listenerType, fieldType } from "./utilSelf";
+
+export default {
+  name: "ElementListeners",
+  props: {
+    id: String,
+    type: String
+  },
+  inject: {
+    prefix: "prefix",
+    width: "width"
+  },
+  data() {
+    return {
+      elementListenersList: [], // 监听器列表
+      listenerForm: {}, // 监听器详情表单
+      listenerFormModelVisible: false, // 监听器 编辑 侧边栏显示状态
+      fieldsListOfListener: [],
+      listenerFieldForm: {}, // 监听器 注入字段 详情表单
+      listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
+      editingListenerIndex: -1, // 监听器所在下标，-1 为新增
+      editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
+      listenerTypeObject: listenerType,
+      fieldTypeObject: fieldType
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler(val) {
+        val && val.length && this.$nextTick(() => this.resetListenersList());
+      }
+    }
+  },
+  methods: {
+    resetListenersList() {
+      this.bpmnElement = window.bpmnInstances.bpmnElement;
+      this.otherExtensionList = [];
+      this.bpmnElementListeners =
+        this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:ExecutionListener`) ?? [];
+      this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
+    },
+    // 打开 监听器详情 侧边栏
+    openListenerForm(listener, index) {
+      if (listener) {
+        this.listenerForm = initListenerForm(listener);
+        this.editingListenerIndex = index;
+      } else {
+        this.listenerForm = {};
+        this.editingListenerIndex = -1; // 标记为新增
+      }
+      if (listener && listener.fields) {
+        this.fieldsListOfListener = listener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression" }));
+      } else {
+        this.fieldsListOfListener = [];
+        this.$set(this.listenerForm, "fields", []);
+      }
+      // 打开侧边栏并清楚验证状态
+      this.listenerFormModelVisible = true;
+      this.$nextTick(() => {
+        if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
+      });
+    },
+    // 打开监听器字段编辑弹窗
+    openListenerFieldForm(field, index) {
+      this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
+      this.editingListenerFieldIndex = field ? index : -1;
+      this.listenerFieldFormModelVisible = true;
+      this.$nextTick(() => {
+        if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
+      });
+    },
+    // 保存监听器注入字段
+    async saveListenerFiled() {
+      let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
+      if (!validateStatus) return; // 验证不通过直接返回
+      if (this.editingListenerFieldIndex === -1) {
+        this.fieldsListOfListener.push(this.listenerFieldForm);
+        this.listenerForm.fields.push(this.listenerFieldForm);
+      } else {
+        this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
+        this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
+      }
+      this.listenerFieldFormModelVisible = false;
+      this.$nextTick(() => (this.listenerFieldForm = {}));
+    },
+    // 移除监听器字段
+    removeListenerField(field, index) {
+      this.$confirm("确认移除该字段吗？", "提示", {
+        confirmButtonText: "确 认",
+        cancelButtonText: "取 消"
+      })
+        .then(() => {
+          this.fieldsListOfListener.splice(index, 1);
+          this.listenerForm.fields.splice(index, 1);
+        })
+        .catch(() => console.info("操作取消"));
+    },
+    // 移除监听器
+    removeListener(listener, index) {
+      this.$confirm("确认移除该监听器吗？", "提示", {
+        confirmButtonText: "确 认",
+        cancelButtonText: "取 消"
+      })
+        .then(() => {
+          this.bpmnElementListeners.splice(index, 1);
+          this.elementListenersList.splice(index, 1);
+          updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
+        })
+        .catch(() => console.info("操作取消"));
+    },
+    // 保存监听器配置
+    async saveListenerConfig() {
+      let validateStatus = await this.$refs["listenerFormRef"].validate();
+      if (!validateStatus) return; // 验证不通过直接返回
+      const listenerObject = createListenerObject(this.listenerForm, false, this.prefix);
+      if (this.editingListenerIndex === -1) {
+        this.bpmnElementListeners.push(listenerObject);
+        this.elementListenersList.push(this.listenerForm);
+      } else {
+        this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
+        this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
+      }
+      // 保存其他配置
+      this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:ExecutionListener`) ?? [];
+      updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
+      // 4. 隐藏侧边栏
+      this.listenerFormModelVisible = false;
+      this.listenerForm = {};
+    }
+  }
+};
+</script>
diff --git a/src/components/FlowDiagram/plugins/package/penal/listeners/UserTaskListeners.vue b/src/components/FlowDiagram/plugins/package/penal/listeners/UserTaskListeners.vue
new file mode 100644
index 0000000..c113af9
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/listeners/UserTaskListeners.vue
@@ -0,0 +1,319 @@
+<template>
+  <div class="panel-tab__content">
+    <el-table :data="elementListenersList" size="mini" border>
+      <el-table-column label="序号" width="50px" type="index" />
+      <el-table-column label="事件类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerEventTypeObject[row.event]" />
+<!--      <el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />-->
+      <el-table-column label="监听器类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
+      <el-table-column label="操作" width="90px">
+        <template slot-scope="{ row, $index }">
+          <el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
+          <el-divider direction="vertical" />
+          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="element-drawer__button">
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <el-drawer :visible.sync="listenerFormModelVisible" title="任务监听器" :size="`${width}px`" append-to-body destroy-on-close>
+      <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
+        <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-select v-model="listenerForm.event">
+            <el-option v-for="i in Object.keys(listenerEventTypeObject)" :key="i" :label="listenerEventTypeObject[i]" :value="i" />
+          </el-select>
+        </el-form-item>
+<!--        <el-form-item label="监听器ID" prop="id" :rules="{ required: true, trigger: ['blur', 'change'] }">-->
+<!--          <el-input v-model="listenerForm.id" clearable />-->
+<!--        </el-form-item>-->
+        <el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-select v-model="listenerForm.listenerType">
+            <el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'classListener'"
+          label="Java类"
+          prop="class"
+          key="listener-class"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.class" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'expressionListener'"
+          label="表达式"
+          prop="expression"
+          key="listener-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.expression" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
+          label="代理表达式"
+          prop="delegateExpression"
+          key="listener-delegate"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.delegateExpression" clearable />
+        </el-form-item>
+        <template v-if="listenerForm.listenerType === 'scriptListener'">
+          <el-form-item
+            label="脚本格式"
+            prop="scriptFormat"
+            key="listener-script-format"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
+          >
+            <el-input v-model="listenerForm.scriptFormat" clearable />
+          </el-form-item>
+          <el-form-item
+            label="脚本类型"
+            prop="scriptType"
+            key="listener-script-type"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
+          >
+            <el-select v-model="listenerForm.scriptType">
+              <el-option label="内联脚本" value="inlineScript" />
+              <el-option label="外部脚本" value="externalScript" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'inlineScript'"
+            label="脚本内容"
+            prop="value"
+            key="listener-script"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
+          >
+            <el-input v-model="listenerForm.value" clearable />
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'externalScript'"
+            label="资源地址"
+            prop="resource"
+            key="listener-resource"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
+          >
+            <el-input v-model="listenerForm.resource" clearable />
+          </el-form-item>
+        </template>
+
+        <template v-if="listenerForm.event === 'timeout'">
+          <el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
+            <el-select v-model="listenerForm.eventDefinitionType">
+              <el-option label="日期" value="date" />
+              <el-option label="持续时长" value="duration" />
+              <el-option label="循环" value="cycle" />
+              <el-option label="无" value="null" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
+            label="定时器"
+            prop="eventTimeDefinitions"
+            key="eventTimeDefinitions"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
+          >
+            <el-input v-model="listenerForm.eventTimeDefinitions" clearable />
+          </el-form-item>
+        </template>
+      </el-form>
+
+      <el-divider />
+      <p class="listener-filed__title">
+        <span><i class="el-icon-menu"></i>注入字段：</span>
+        <el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
+      </p>
+      <el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
+        <el-table-column label="序号" width="50px" type="index" />
+        <el-table-column label="字段名称" min-width="100px" prop="name" />
+        <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
+        <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
+        <el-table-column label="操作" width="100px">
+          <template slot-scope="{ row, $index }">
+            <el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
+            <el-divider direction="vertical" />
+            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="element-drawer__button">
+        <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
+      </div>
+    </el-drawer>
+
+    <!-- 注入西段 编辑/创建 部分 -->
+    <el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
+      <el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
+        <el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-input v-model="listenerFieldForm.name" clearable />
+        </el-form-item>
+        <el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-select v-model="listenerFieldForm.fieldType">
+            <el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'string'"
+          label="字段值："
+          prop="string"
+          key="field-string"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.string" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'expression'"
+          label="表达式："
+          prop="expression"
+          key="field-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.expression" clearable />
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { createListenerObject, updateElementExtensions } from "../../utils";
+import { initListenerForm, initListenerType, eventType, listenerType, fieldType } from "./utilSelf";
+
+export default {
+  name: "UserTaskListeners",
+  props: {
+    id: String,
+    type: String
+  },
+  inject: {
+    prefix: "prefix",
+    width: "width"
+  },
+  data() {
+    return {
+      elementListenersList: [],
+      listenerEventTypeObject: eventType,
+      listenerTypeObject: listenerType,
+      listenerFormModelVisible: false,
+      listenerForm: {},
+      fieldTypeObject: fieldType,
+      fieldsListOfListener: [],
+      listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
+      editingListenerIndex: -1, // 监听器所在下标，-1 为新增
+      editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
+      listenerFieldForm: {} // 监听器 注入字段 详情表单
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler(val) {
+        val && val.length && this.$nextTick(() => this.resetListenersList());
+      }
+    }
+  },
+  methods: {
+    resetListenersList() {
+      this.bpmnElement = window.bpmnInstances.bpmnElement;
+      this.otherExtensionList = [];
+      this.bpmnElementListeners = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:TaskListener`) ?? [];
+      this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
+    },
+    openListenerForm(listener, index) {
+      if (listener) {
+        this.listenerForm = initListenerForm(listener);
+        this.editingListenerIndex = index;
+      } else {
+        this.listenerForm = {};
+        this.editingListenerIndex = -1; // 标记为新增
+      }
+      if (listener && listener.fields) {
+        this.fieldsListOfListener = listener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression" }));
+      } else {
+        this.fieldsListOfListener = [];
+        this.$set(this.listenerForm, "fields", []);
+      }
+      // 打开侧边栏并清楚验证状态
+      this.listenerFormModelVisible = true;
+      this.$nextTick(() => {
+        if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
+      });
+    },
+    // 移除监听器
+    removeListener(listener, index) {
+      this.$confirm("确认移除该监听器吗？", "提示", {
+        confirmButtonText: "确 认",
+        cancelButtonText: "取 消"
+      })
+        .then(() => {
+          this.bpmnElementListeners.splice(index, 1);
+          this.elementListenersList.splice(index, 1);
+          updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
+        })
+        .catch(() => console.info("操作取消"));
+    },
+    // 保存监听器
+    async saveListenerConfig() {
+      let validateStatus = await this.$refs["listenerFormRef"].validate();
+      if (!validateStatus) return; // 验证不通过直接返回
+      const listenerObject = createListenerObject(this.listenerForm, true, this.prefix);
+      if (this.editingListenerIndex === -1) {
+        this.bpmnElementListeners.push(listenerObject);
+        this.elementListenersList.push(this.listenerForm);
+      } else {
+        this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
+        this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
+      }
+      // 保存其他配置
+      this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:TaskListener`) ?? [];
+      updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
+      // 4. 隐藏侧边栏
+      this.listenerFormModelVisible = false;
+      this.listenerForm = {};
+    },
+    // 打开监听器字段编辑弹窗
+    openListenerFieldForm(field, index) {
+      this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
+      this.editingListenerFieldIndex = field ? index : -1;
+      this.listenerFieldFormModelVisible = true;
+      this.$nextTick(() => {
+        if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
+      });
+    },
+    // 保存监听器注入字段
+    async saveListenerFiled() {
+      let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
+      if (!validateStatus) return; // 验证不通过直接返回
+      if (this.editingListenerFieldIndex === -1) {
+        this.fieldsListOfListener.push(this.listenerFieldForm);
+        this.listenerForm.fields.push(this.listenerFieldForm);
+      } else {
+        this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
+        this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
+      }
+      this.listenerFieldFormModelVisible = false;
+      this.$nextTick(() => (this.listenerFieldForm = {}));
+    },
+    // 移除监听器字段
+    removeListenerField(field, index) {
+      this.$confirm("确认移除该字段吗？", "提示", {
+        confirmButtonText: "确 认",
+        cancelButtonText: "取 消"
+      })
+        .then(() => {
+          this.fieldsListOfListener.splice(index, 1);
+          this.listenerForm.fields.splice(index, 1);
+        })
+        .catch(() => console.info("操作取消"));
+    }
+  }
+};
+</script>
diff --git a/src/components/FlowDiagram/plugins/package/penal/listeners/template.js b/src/components/FlowDiagram/plugins/package/penal/listeners/template.js
new file mode 100644
index 0000000..455b70d
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/listeners/template.js
@@ -0,0 +1,178 @@
+export const template = isTaskListener => {
+  return `
+  <div class="panel-tab__content">
+    <el-table :data="elementListenersList" size="mini" border>
+      <el-table-column label="序号" width="50px" type="index" />
+      <el-table-column label="事件类型" min-width="100px" prop="event" />
+      <el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
+      <el-table-column label="操作" width="90px">
+        <template slot-scope="{ row, $index }">
+          <el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
+          <el-divider direction="vertical" />
+          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="element-drawer__button">
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
+      <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
+        <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-select v-model="listenerForm.event">
+            <el-option label="start" value="start" />
+            <el-option label="end" value="end" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-select v-model="listenerForm.listenerType">
+            <el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'classListener'"
+          label="Java类"
+          prop="class"
+          key="listener-class"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.class" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'expressionListener'"
+          label="表达式"
+          prop="expression"
+          key="listener-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.expression" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
+          label="代理表达式"
+          prop="delegateExpression"
+          key="listener-delegate"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.delegateExpression" clearable />
+        </el-form-item>
+        <template v-if="listenerForm.listenerType === 'scriptListener'">
+          <el-form-item
+            label="脚本格式"
+            prop="scriptFormat"
+            key="listener-script-format"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
+          >
+            <el-input v-model="listenerForm.scriptFormat" clearable />
+          </el-form-item>
+          <el-form-item
+            label="脚本类型"
+            prop="scriptType"
+            key="listener-script-type"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
+          >
+            <el-select v-model="listenerForm.scriptType">
+              <el-option label="内联脚本" value="inlineScript" />
+              <el-option label="外部脚本" value="externalScript" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'inlineScript'"
+            label="脚本内容"
+            prop="value"
+            key="listener-script"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
+          >
+            <el-input v-model="listenerForm.value" clearable />
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'externalScript'"
+            label="资源地址"
+            prop="resource"
+            key="listener-resource"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
+          >
+            <el-input v-model="listenerForm.resource" clearable />
+          </el-form-item>
+        </template>
+        ${
+          isTaskListener
+            ? "<el-form-item label='定时器类型' prop='eventDefinitionType' key='eventDefinitionType'>" +
+              "<el-select v-model='listenerForm.eventDefinitionType'>" +
+              "<el-option label='日期' value='date' />" +
+              "<el-option label='持续时长' value='duration' />" +
+              "<el-option label='循环' value='cycle' />" +
+              "<el-option label='无' value='' />" +
+              "</el-select>" +
+              "</el-form-item>" +
+              "<el-form-item v-if='!!listenerForm.eventDefinitionType' label='定时器' prop='eventDefinitions' key='eventDefinitions'>" +
+              "<el-input v-model='listenerForm.eventDefinitions' clearable />" +
+              "</el-form-item>"
+            : ""
+        }
+      </el-form>
+      <el-divider />
+      <p class="listener-filed__title">
+        <span><i class="el-icon-menu"></i>注入字段：</span>
+        <el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
+      </p>
+      <el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
+        <el-table-column label="序号" width="50px" type="index" />
+        <el-table-column label="字段名称" min-width="100px" prop="name" />
+        <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
+        <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
+        <el-table-column label="操作" width="100px">
+          <template slot-scope="{ row, $index }">
+            <el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
+            <el-divider direction="vertical" />
+            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="element-drawer__button">
+        <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
+      </div>
+    </el-drawer>
+
+    <!-- 注入西段 编辑/创建 部分 -->
+    <el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
+      <el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
+        <el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-input v-model="listenerFieldForm.name" clearable />
+        </el-form-item>
+        <el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-select v-model="listenerFieldForm.fieldType">
+            <el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'string'"
+          label="字段值："
+          prop="string"
+          key="field-string"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.string" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'expression'"
+          label="表达式："
+          prop="expression"
+          key="field-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.expression" clearable />
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+  `;
+};
diff --git a/src/components/FlowDiagram/plugins/package/penal/listeners/utilSelf.js b/src/components/FlowDiagram/plugins/package/penal/listeners/utilSelf.js
new file mode 100644
index 0000000..efd13ec
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/listeners/utilSelf.js
@@ -0,0 +1,62 @@
+// 初始化表单数据
+export function initListenerForm(listener) {
+  let self = {
+    ...listener
+  };
+  if (listener.script) {
+    self = {
+      ...listener,
+      ...listener.script,
+      scriptType: listener.script.resource ? "externalScript" : "inlineScript"
+    };
+  }
+  if (listener.event === "timeout" && listener.eventDefinitions) {
+    if (listener.eventDefinitions.length) {
+      let k = "";
+      for (let key in listener.eventDefinitions[0]) {
+        console.log(listener.eventDefinitions, key);
+        if (key.indexOf("time") !== -1) {
+          k = key;
+          self.eventDefinitionType = key.replace("time", "").toLowerCase();
+        }
+      }
+      console.log(k);
+      self.eventTimeDefinitions = listener.eventDefinitions[0][k].body;
+    }
+  }
+  return self;
+}
+
+export function initListenerType(listener) {
+  let listenerType;
+  if (listener.class) listenerType = "classListener";
+  if (listener.expression) listenerType = "expressionListener";
+  if (listener.delegateExpression) listenerType = "delegateExpressionListener";
+  if (listener.script) listenerType = "scriptListener";
+  return {
+    ...JSON.parse(JSON.stringify(listener)),
+    ...(listener.script ?? {}),
+    listenerType: listenerType
+  };
+}
+
+export const listenerType = {
+  classListener: "Java 类",
+  expressionListener: "表达式",
+  delegateExpressionListener: "代理表达式",
+  scriptListener: "脚本"
+};
+
+export const eventType = {
+  create: "创建",
+  assignment: "指派",
+  complete: "完成",
+  delete: "删除",
+  update: "更新",
+  timeout: "超时"
+};
+
+export const fieldType = {
+  string: "字符串",
+  expression: "表达式"
+};
diff --git a/src/components/FlowDiagram/plugins/package/penal/multi-instance/ElementMultiInstance.vue b/src/components/FlowDiagram/plugins/package/penal/multi-instance/ElementMultiInstance.vue
new file mode 100644
index 0000000..7d57f50
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/multi-instance/ElementMultiInstance.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form size="mini" label-width="90px" @submit.native.prevent>
+      <el-form-item label="回路特性">
+        <el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
+          <!--bpmn:MultiInstanceLoopCharacteristics-->
+          <el-option label="并行多重事件" value="ParallelMultiInstance" />
+          <el-option label="时序多重事件" value="SequentialMultiInstance" />
+          <!--bpmn:StandardLoopCharacteristics-->
+          <el-option label="循环事件" value="StandardLoop" />
+          <el-option label="无" value="Null" />
+        </el-select>
+      </el-form-item>
+      <template v-if="loopCharacteristics === 'ParallelMultiInstance' || loopCharacteristics === 'SequentialMultiInstance'">
+        <el-form-item label="循环基数" key="loopCardinality">
+          <el-input v-model="loopInstanceForm.loopCardinality" clearable @change="updateLoopCardinality" />
+        </el-form-item>
+        <el-form-item label="集合" key="collection">
+          <el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
+        </el-form-item>
+        <el-form-item label="元素变量" key="elementVariable">
+          <el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
+        </el-form-item>
+        <el-form-item label="完成条件" key="completionCondition">
+          <el-input v-model="loopInstanceForm.completionCondition" clearable @change="updateLoopCondition" />
+        </el-form-item>
+        <el-form-item label="异步状态" key="async">
+          <el-checkbox v-model="loopInstanceForm.asyncBefore" label="异步前" @change="updateLoopAsync('asyncBefore')" />
+          <el-checkbox v-model="loopInstanceForm.asyncAfter" label="异步后" @change="updateLoopAsync('asyncAfter')" />
+          <el-checkbox
+            v-model="loopInstanceForm.exclusive"
+            v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
+            label="排除"
+            @change="updateLoopAsync('exclusive')"
+          />
+        </el-form-item>
+        <el-form-item label="重试周期" prop="timeCycle" v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore" key="timeCycle">
+          <el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
+        </el-form-item>
+      </template>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ElementMultiInstance",
+  props: {
+    businessObject: Object,
+    type: String
+  },
+  inject: {
+    prefix: "prefix"
+  },
+  data() {
+    return {
+      loopCharacteristics: "",
+      //默认配置，用来覆盖原始不存在的选项，避免报错
+      defaultLoopInstanceForm: {
+        completionCondition: "",
+        loopCardinality: "",
+        extensionElements: [],
+        asyncAfter: false,
+        asyncBefore: false,
+        exclusive: false
+      },
+      loopInstanceForm: {}
+    };
+  },
+  watch: {
+    businessObject: {
+      immediate: true,
+      handler(val) {
+        this.bpmnElement = window.bpmnInstances.bpmnElement;
+        this.getElementLoop(val);
+      }
+    }
+  },
+  methods: {
+    getElementLoop(businessObject) {
+      if (!businessObject.loopCharacteristics) {
+        this.loopCharacteristics = "Null";
+        this.loopInstanceForm = {};
+        return;
+      }
+      if (businessObject.loopCharacteristics.$type === "bpmn:StandardLoopCharacteristics") {
+        this.loopCharacteristics = "StandardLoop";
+        this.loopInstanceForm = {};
+        return;
+      }
+      if (businessObject.loopCharacteristics.isSequential) {
+        this.loopCharacteristics = "SequentialMultiInstance";
+      } else {
+        this.loopCharacteristics = "ParallelMultiInstance";
+      }
+      // 合并配置
+      this.loopInstanceForm = {
+        ...this.defaultLoopInstanceForm,
+        ...businessObject.loopCharacteristics,
+        completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? "",
+        loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ""
+      };
+      // 保留当前元素 businessObject 上的 loopCharacteristics 实例
+      this.multiLoopInstance = window.bpmnInstances.bpmnElement.businessObject.loopCharacteristics;
+      // 更新表单
+      if (
+        businessObject.loopCharacteristics.extensionElements &&
+        businessObject.loopCharacteristics.extensionElements.values &&
+        businessObject.loopCharacteristics.extensionElements.values.length
+      ) {
+        this.$set(this.loopInstanceForm, "timeCycle", businessObject.loopCharacteristics.extensionElements.values[0].body);
+      }
+    },
+    changeLoopCharacteristicsType(type) {
+      // this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
+      // 取消多实例配置
+      if (type === "Null") {
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { loopCharacteristics: null });
+        return;
+      }
+      // 配置循环
+      if (type === "StandardLoop") {
+        const loopCharacteristicsObject = window.bpmnInstances.moddle.create("bpmn:StandardLoopCharacteristics");
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+          loopCharacteristics: loopCharacteristicsObject
+        });
+        this.multiLoopInstance = null;
+        return;
+      }
+      // 时序
+      if (type === "SequentialMultiInstance") {
+        this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { isSequential: true });
+      } else {
+        this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics");
+      }
+      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+        loopCharacteristics: this.multiLoopInstance
+      });
+    },
+    // 循环基数
+    updateLoopCardinality(cardinality) {
+      let loopCardinality = null;
+      if (cardinality && cardinality.length) {
+        loopCardinality = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: cardinality });
+      }
+      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, { loopCardinality });
+    },
+    // 完成条件
+    updateLoopCondition(condition) {
+      let completionCondition = null;
+      if (condition && condition.length) {
+        completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: condition });
+      }
+      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, { completionCondition });
+    },
+    // 重试周期
+    updateLoopTimeCycle(timeCycle) {
+      const extensionElements = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
+        values: [
+          window.bpmnInstances.moddle.create(`${this.prefix}:FailedJobRetryTimeCycle`, {
+            body: timeCycle
+          })
+        ]
+      });
+      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, { extensionElements });
+    },
+    // 直接更新的基础信息
+    updateLoopBase() {
+      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
+        collection: this.loopInstanceForm.collection || null,
+        elementVariable: this.loopInstanceForm.elementVariable || null
+      });
+    },
+    // 各异步状态
+    updateLoopAsync(key) {
+      const { asyncBefore, asyncAfter } = this.loopInstanceForm;
+      let asyncAttr = Object.create(null);
+      if (!asyncBefore && !asyncAfter) {
+        this.$set(this.loopInstanceForm, "exclusive", false);
+        asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null };
+      } else {
+        asyncAttr[key] = this.loopInstanceForm[key];
+      }
+      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, asyncAttr);
+    }
+  },
+  beforeDestroy() {
+    this.multiLoopInstance = null;
+    this.bpmnElement = null;
+  }
+};
+</script>
diff --git a/src/components/FlowDiagram/plugins/package/penal/other/ElementOtherConfig.vue b/src/components/FlowDiagram/plugins/package/penal/other/ElementOtherConfig.vue
new file mode 100644
index 0000000..a4427b2
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/other/ElementOtherConfig.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="panel-tab__content">
+    <div class="element-property input-property">
+      <div class="element-property__label">元素文档：</div>
+      <div class="element-property__value">
+        <el-input
+          type="textarea"
+          v-model="documentation"
+          size="mini"
+          resize="vertical"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+          @input="updateDocumentation"
+          @blur="updateDocumentation"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ElementOtherConfig",
+  props: {
+    id: String
+  },
+  data() {
+    return {
+      documentation: ""
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler: function(id) {
+        if (id && id.length) {
+          this.$nextTick(() => {
+            const documentations = window.bpmnInstances.bpmnElement.businessObject?.documentation;
+            this.documentation = documentations && documentations.length ? documentations[0].text : "";
+          });
+        } else {
+          this.documentation = "";
+        }
+      }
+    }
+  },
+  methods: {
+    updateDocumentation() {
+      (this.bpmnElement && this.bpmnElement.id === this.id) || (this.bpmnElement = window.bpmnInstances.elementRegistry.get(this.id));
+      const documentation = window.bpmnInstances.bpmnFactory.create("bpmn:Documentation", { text: this.documentation });
+      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+        documentation: [documentation]
+      });
+    }
+  },
+  beforeDestroy() {
+    this.bpmnElement = null;
+  }
+};
+</script>
diff --git a/src/components/FlowDiagram/plugins/package/penal/properties/ElementProperties.vue b/src/components/FlowDiagram/plugins/package/penal/properties/ElementProperties.vue
new file mode 100644
index 0000000..edd9a36
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/properties/ElementProperties.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="panel-tab__content">
+    <el-table :data="elementPropertyList" size="mini" max-height="240" border fit>
+      <el-table-column label="序号" width="50px" type="index" />
+      <el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
+      <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
+      <el-table-column label="操作" width="90px">
+        <template slot-scope="{ row, $index }">
+          <el-button size="mini" type="text" @click="openAttributesForm(row, $index)">编辑</el-button>
+          <el-divider direction="vertical" />
+          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="element-drawer__button">
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openAttributesForm(null, -1)">添加属性</el-button>
+    </div>
+
+    <el-dialog :visible.sync="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close>
+      <el-form :model="propertyForm" label-width="80px" size="mini" ref="attributeFormRef" @submit.native.prevent>
+        <el-form-item label="属性名：" prop="name">
+          <el-input v-model="propertyForm.name" clearable />
+        </el-form-item>
+        <el-form-item label="属性值：" prop="value">
+          <el-input v-model="propertyForm.value" clearable />
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button size="mini" @click="propertyFormModelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="saveAttribute">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ElementProperties",
+  props: {
+    id: String,
+    type: String
+  },
+  inject: {
+    prefix: "prefix",
+    width: "width"
+  },
+  data() {
+    return {
+      elementPropertyList: [],
+      propertyForm: {},
+      editingPropertyIndex: -1,
+      propertyFormModelVisible: false
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler(val) {
+        val && val.length && this.resetAttributesList();
+      }
+    }
+  },
+  methods: {
+    resetAttributesList() {
+      this.bpmnElement = window.bpmnInstances.bpmnElement;
+      this.otherExtensionList = []; // 其他扩展配置
+      this.bpmnElementProperties =
+        this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
+          if (ex.$type !== `${this.prefix}:Properties`) {
+            this.otherExtensionList.push(ex);
+          }
+          return ex.$type === `${this.prefix}:Properties`;
+        }) ?? [];
+
+      // 保存所有的 扩展属性字段
+      this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => pre.concat(current.values), []);
+      // 复制 显示
+      this.elementPropertyList = JSON.parse(JSON.stringify(this.bpmnElementPropertyList ?? []));
+    },
+    openAttributesForm(attr, index) {
+      this.editingPropertyIndex = index;
+      this.propertyForm = index === -1 ? {} : JSON.parse(JSON.stringify(attr));
+      this.propertyFormModelVisible = true;
+      this.$nextTick(() => {
+        if (this.$refs["attributeFormRef"]) this.$refs["attributeFormRef"].clearValidate();
+      });
+    },
+    removeAttributes(attr, index) {
+      this.$confirm("确认移除该属性吗？", "提示", {
+        confirmButtonText: "确 认",
+        cancelButtonText: "取 消"
+      })
+        .then(() => {
+          this.elementPropertyList.splice(index, 1);
+          this.bpmnElementPropertyList.splice(index, 1);
+          // 新建一个属性字段的保存列表
+          const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
+            values: this.bpmnElementPropertyList
+          });
+          this.updateElementExtensions(propertiesObject);
+          this.resetAttributesList();
+        })
+        .catch(() => console.info("操作取消"));
+    },
+    saveAttribute() {
+      const { name, value } = this.propertyForm;
+      if (this.editingPropertyIndex !== -1) {
+        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.bpmnElementPropertyList[this.editingPropertyIndex], {
+          name,
+          value
+        });
+      } else {
+        // 新建属性字段
+        const newPropertyObject = window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { name, value });
+        // 新建一个属性字段的保存列表
+        const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
+          values: this.bpmnElementPropertyList.concat([newPropertyObject])
+        });
+        this.updateElementExtensions(propertiesObject);
+      }
+      this.propertyFormModelVisible = false;
+      this.resetAttributesList();
+    },
+    updateElementExtensions(properties) {
+      const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
+        values: this.otherExtensionList.concat([properties])
+      });
+      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+        extensionElements: extensions
+      });
+    }
+  }
+};
+</script>
diff --git a/src/components/FlowDiagram/plugins/package/penal/signal-message/SignalAndMessage.vue b/src/components/FlowDiagram/plugins/package/penal/signal-message/SignalAndMessage.vue
new file mode 100644
index 0000000..7ea59f6
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/signal-message/SignalAndMessage.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="panel-tab__content">
+    <div class="panel-tab__content--title">
+      <span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>消息列表</span>
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('message')">创建新消息</el-button>
+    </div>
+    <el-table :data="messageList" size="mini" border>
+      <el-table-column type="index" label="序号" width="60px" />
+      <el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
+      <el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
+    </el-table>
+    <div class="panel-tab__content--title" style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee">
+      <span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>信号列表</span>
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('signal')">创建新信号</el-button>
+    </div>
+    <el-table :data="signalList" size="mini" border>
+      <el-table-column type="index" label="序号" width="60px" />
+      <el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
+      <el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
+    </el-table>
+
+    <el-dialog :visible.sync="modelVisible" :title="modelConfig.title" :close-on-click-modal="false" width="400px" append-to-body destroy-on-close>
+      <el-form :model="modelObjectForm" size="mini" label-width="90px" @submit.native.prevent>
+        <el-form-item :label="modelConfig.idLabel">
+          <el-input v-model="modelObjectForm.id" clearable />
+        </el-form-item>
+        <el-form-item :label="modelConfig.nameLabel">
+          <el-input v-model="modelObjectForm.name" clearable />
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button size="mini" @click="modelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="addNewObject">保 存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: "SignalAndMassage",
+  data() {
+    return {
+      signalList: [],
+      messageList: [],
+      modelVisible: false,
+      modelType: "",
+      modelObjectForm: {}
+    };
+  },
+  computed: {
+    modelConfig() {
+      if (this.modelType === "message") {
+        return { title: "创建消息", idLabel: "消息ID", nameLabel: "消息名称" };
+      } else {
+        return { title: "创建信号", idLabel: "信号ID", nameLabel: "信号名称" };
+      }
+    }
+  },
+  mounted() {
+    this.initDataList();
+  },
+  methods: {
+    initDataList() {
+      this.rootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
+      this.messageIdMap = {};
+      this.signalIdMap = {};
+      this.messageList = [];
+      this.signalList = [];
+      this.rootElements.forEach(el => {
+        if (el.$type === "bpmn:Message") {
+          this.messageIdMap[el.id] = true;
+          this.messageList.push({ ...el });
+        }
+        if (el.$type === "bpmn:Signal") {
+          this.signalIdMap[el.id] = true;
+          this.signalList.push({ ...el });
+        }
+      });
+    },
+    openModel(type) {
+      this.modelType = type;
+      this.modelObjectForm = {};
+      this.modelVisible = true;
+    },
+    addNewObject() {
+      if (this.modelType === "message") {
+        if (this.messageIdMap[this.modelObjectForm.id]) {
+          return this.$message.error("该消息已存在，请修改id后重新保存");
+        }
+        const messageRef = window.bpmnInstances.moddle.create("bpmn:Message", this.modelObjectForm);
+        this.rootElements.push(messageRef);
+      } else {
+        if (this.signalIdMap[this.modelObjectForm.id]) {
+          return this.$message.error("该信号已存在，请修改id后重新保存");
+        }
+        const signalRef = window.bpmnInstances.moddle.create("bpmn:Signal", this.modelObjectForm);
+        this.rootElements.push(signalRef);
+      }
+      this.modelVisible = false;
+      this.initDataList();
+    }
+  }
+};
+</script>
diff --git a/src/components/FlowDiagram/plugins/package/penal/task/ElementTask.vue b/src/components/FlowDiagram/plugins/package/penal/task/ElementTask.vue
new file mode 100644
index 0000000..efb4f49
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/task/ElementTask.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form size="mini" label-width="96px" @submit.native.prevent>
+<!--      <el-form-item label="异步延续">-->
+<!--        <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />-->
+<!--        <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />-->
+<!--        <el-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />-->
+<!--      </el-form-item>-->
+      <component :is="witchTaskComponent" v-bind="$props" />
+    </el-form>
+  </div>
+</template>
+
+<script>
+import UserTask from "./task-components/UserTask";
+import ServiceTask from "./task-components/ServiceTask";
+import ScriptTask from "./task-components/ScriptTask";
+import ReceiveTask from "./task-components/ReceiveTask";
+
+export default {
+  name: "ElementTaskConfig",
+  components: { UserTask, ServiceTask, ScriptTask, ReceiveTask },
+  props: {
+    id: String,
+    type: String
+  },
+  data() {
+    return {
+      taskConfigForm: {
+        asyncAfter: false,
+        asyncBefore: false,
+        exclusive: false
+      },
+      witchTaskComponent: "",
+      installedComponent: {
+        // 手工任务与普通任务一致，不需要其他配置
+        // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
+        // 发送任务、服务任务、业务规则任务共用一个相同配置
+        UserTask: "UserTask", // 用户任务配置
+        ServiceTask: "ServiceTask", // 服务任务配置
+        ScriptTask: "ScriptTask", // 脚本任务配置
+        ReceiveTask: "ReceiveTask" // 消息接收任务
+      }
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler() {
+        this.bpmnElement = window.bpmnInstances.bpmnElement;
+        this.taskConfigForm.asyncBefore = this.bpmnElement?.businessObject?.asyncBefore;
+        this.taskConfigForm.asyncAfter = this.bpmnElement?.businessObject?.asyncAfter;
+        this.taskConfigForm.exclusive = this.bpmnElement?.businessObject?.exclusive;
+      }
+    },
+    type: {
+      immediate: true,
+      handler() {
+        this.witchTaskComponent = this.installedComponent[this.type];
+      }
+    }
+  },
+  methods: {
+    changeTaskAsync() {
+      if (!this.taskConfigForm.asyncBefore && !this.taskConfigForm.asyncAfter) {
+        this.taskConfigForm.exclusive = false;
+      }
+      window.bpmnInstances.modeling.updateProperties(window.bpmnInstances.bpmnElement, {
+        ...this.taskConfigForm
+      });
+    }
+  }
+};
+</script>
diff --git a/src/components/FlowDiagram/plugins/package/penal/task/task-components/ReceiveTask.vue b/src/components/FlowDiagram/plugins/package/penal/task/task-components/ReceiveTask.vue
new file mode 100644
index 0000000..282f238
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/task/task-components/ReceiveTask.vue
@@ -0,0 +1,97 @@
+<template>
+  <div style="margin-top: 16px">
+    <el-form-item label="消息实例">
+      <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap">
+        <el-select v-model="bindMessageId" @change="updateTaskMessage">
+          <el-option v-for="id in Object.keys(messageMap)" :value="id" :label="messageMap[id]" :key="id" />
+        </el-select>
+        <el-button size="mini" type="primary" icon="el-icon-plus" style="margin-left: 8px" @click="openMessageModel" />
+      </div>
+    </el-form-item>
+    <el-dialog :visible.sync="messageModelVisible" :close-on-click-modal="false" title="创建新消息" width="400px" append-to-body destroy-on-close>
+      <el-form :model="newMessageForm" size="mini" label-width="90px" @submit.native.prevent>
+        <el-form-item label="消息ID">
+          <el-input v-model="newMessageForm.id" clearable />
+        </el-form-item>
+        <el-form-item label="消息名称">
+          <el-input v-model="newMessageForm.name" clearable />
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button size="mini" type="primary" @click="createNewMessage">确 认</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ReceiveTask",
+  props: {
+    id: String,
+    type: String
+  },
+  data() {
+    return {
+      bindMessageId: "",
+      newMessageForm: {},
+      messageMap: {},
+      messageModelVisible: false
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler() {
+        this.$nextTick(() => this.getBindMessage());
+      }
+    }
+  },
+  created() {
+    this.bpmnMessageRefsMap = Object.create(null);
+    this.bpmnRootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
+    this.bpmnRootElements
+      .filter(el => el.$type === "bpmn:Message")
+      .forEach(m => {
+        this.bpmnMessageRefsMap[m.id] = m;
+        this.$set(this.messageMap, m.id, m.name);
+      });
+    this.$set(this.messageMap, "-1", "无"); // 添加一个空对象，保证可以取消原消息绑定
+  },
+  methods: {
+    getBindMessage() {
+      this.bpmnElement = window.bpmnInstances.bpmnElement;
+      this.bindMessageId = this.bpmnElement.businessObject?.messageRef?.id || "-1";
+    },
+    openMessageModel() {
+      this.messageModelVisible = true;
+      this.newMessageForm = {};
+    },
+    createNewMessage() {
+      if (this.messageMap[this.newMessageForm.id]) {
+        this.$message.error("该消息已存在，请修改id后重新保存");
+        return;
+      }
+      const newMessage = window.bpmnInstances.moddle.create("bpmn:Message", this.newMessageForm);
+      this.bpmnRootElements.push(newMessage);
+      this.$set(this.messageMap, this.newMessageForm.id, this.newMessageForm.name);
+      this.bpmnMessageRefsMap[this.newMessageForm.id] = newMessage;
+      this.messageModelVisible = false;
+    },
+    updateTaskMessage(messageId) {
+      if (messageId === "-1") {
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+          messageRef: null
+        });
+      } else {
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+          messageRef: this.bpmnMessageRefsMap[messageId]
+        });
+      }
+    }
+  },
+  beforeDestroy() {
+    this.bpmnElement = null;
+  }
+};
+</script>
diff --git a/src/components/FlowDiagram/plugins/package/penal/task/task-components/ScriptTask.vue b/src/components/FlowDiagram/plugins/package/penal/task/task-components/ScriptTask.vue
new file mode 100644
index 0000000..34ed9fd
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/task/task-components/ScriptTask.vue
@@ -0,0 +1,85 @@
+<template>
+  <div style="margin-top: 16px">
+    <el-form-item label="脚本格式">
+      <el-input v-model="scriptTaskForm.scriptFormat" clearable @input="updateElementTask()" @change="updateElementTask()" />
+    </el-form-item>
+    <el-form-item label="脚本类型">
+      <el-select v-model="scriptTaskForm.scriptType">
+        <el-option label="内联脚本" value="inline" />
+        <el-option label="外部资源" value="external" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
+      <el-input
+        v-model="scriptTaskForm.script"
+        type="textarea"
+        resize="vertical"
+        :autosize="{ minRows: 2, maxRows: 4 }"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
+    </el-form-item>
+    <el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
+      <el-input v-model="scriptTaskForm.resource" clearable @input="updateElementTask()" @change="updateElementTask()" />
+    </el-form-item>
+    <el-form-item label="结果变量">
+      <el-input v-model="scriptTaskForm.resultVariable" clearable @input="updateElementTask()" @change="updateElementTask()" />
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ScriptTask",
+  props: {
+    id: String,
+    type: String
+  },
+  data() {
+    return {
+      defaultTaskForm: {
+        scriptFormat: "",
+        script: "",
+        resource: "",
+        resultVariable: ""
+      },
+      scriptTaskForm: {}
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler() {
+        this.bpmnElement = window.bpmnInstances.bpmnElement;
+        this.$nextTick(() => this.resetTaskForm());
+      }
+    }
+  },
+  methods: {
+    resetTaskForm() {
+      for (let key in this.defaultTaskForm) {
+        let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
+        this.$set(this.scriptTaskForm, key, value);
+      }
+      this.$set(this.scriptTaskForm, "scriptType", this.scriptTaskForm.script ? "inline" : "external");
+    },
+    updateElementTask() {
+      let taskAttr = Object.create(null);
+      taskAttr.scriptFormat = this.scriptTaskForm.scriptFormat || null;
+      taskAttr.resultVariable = this.scriptTaskForm.resultVariable || null;
+      if (this.scriptTaskForm.scriptType === "inline") {
+        taskAttr.script = this.scriptTaskForm.script || null;
+        taskAttr.resource = null;
+      } else {
+        taskAttr.resource = this.scriptTaskForm.resource || null;
+        taskAttr.script = null;
+      }
+      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
+    }
+  },
+  beforeDestroy() {
+    this.bpmnElement = null;
+  }
+};
+</script>
diff --git a/src/components/FlowDiagram/plugins/package/penal/task/task-components/ServiceTask.vue b/src/components/FlowDiagram/plugins/package/penal/task/task-components/ServiceTask.vue
new file mode 100644
index 0000000..213cad5
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/task/task-components/ServiceTask.vue
@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <el-form-item label="执行类型" key="executeType">
+      <el-select v-model="serviceTaskForm.executeType">
+        <el-option label="Java类" value="class" />
+        <el-option label="表达式" value="expression" />
+        <el-option label="代理表达式" value="delegateExpression" />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="serviceTaskForm.executeType === 'class'"
+      label="Java类"
+      prop="class"
+      key="execute-class"
+    >
+      <el-input v-model="serviceTaskForm.class" clearable @change="updateElementTask" />
+    </el-form-item>
+    <el-form-item
+      v-if="serviceTaskForm.executeType === 'expression'"
+      label="表达式"
+      prop="expression"
+      key="execute-expression"
+    >
+      <el-input v-model="serviceTaskForm.expression" clearable @change="updateElementTask" />
+    </el-form-item>
+    <el-form-item
+      v-if="serviceTaskForm.executeType === 'delegateExpression'"
+      label="代理表达式"
+      prop="delegateExpression"
+      key="execute-delegate"
+    >
+      <el-input v-model="serviceTaskForm.delegateExpression" clearable @change="updateElementTask" />
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ServiceTask",
+  props: {
+    id: String,
+    type: String
+  },
+  data() {
+    return {
+      defaultTaskForm: {
+        executeType: "",
+        class: "",
+        expression: "",
+        delegateExpression: ""
+      },
+      serviceTaskForm: {}
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler() {
+        this.bpmnElement = window.bpmnInstances.bpmnElement;
+        this.$nextTick(() => this.resetTaskForm());
+      }
+    }
+  },
+  methods: {
+    resetTaskForm() {
+      for (let key in this.defaultTaskForm) {
+        let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
+        if (value) this.$set(this.serviceTaskForm, "executeType", key);
+        this.$set(this.serviceTaskForm, key, value);
+      }
+    },
+    updateElementTask() {
+      let taskAttr = Object.create(null);
+      const type = this.serviceTaskForm.executeType;
+      for (let key in this.serviceTaskForm) {
+        if (key !== 'executeType' && key !== type) taskAttr[key] = null;
+      }
+      taskAttr[type] = this.serviceTaskForm[type] || "";
+      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
+    }
+  },
+  beforeDestroy() {
+    this.bpmnElement = null;
+  }
+};
+</script>
diff --git a/src/components/FlowDiagram/plugins/package/penal/task/task-components/UserTask.vue b/src/components/FlowDiagram/plugins/package/penal/task/task-components/UserTask.vue
new file mode 100644
index 0000000..a059589
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/penal/task/task-components/UserTask.vue
@@ -0,0 +1,525 @@
+<template>
+  <div>
+    <el-row>
+      <h4><b>审批人设置</b></h4>
+      <el-radio-group v-model="dataType" @change="changeDataType">
+        <el-radio label="USERS">指定用户</el-radio>
+        <el-radio label="ROLES">角色</el-radio>
+        <el-radio label="DEPTS">部门</el-radio>
+        <el-radio label="INITIATOR">发起人</el-radio>
+      </el-radio-group>
+    </el-row>
+    <el-row>
+      <div v-if="dataType === 'USERS'">
+        <el-tag v-for="userText in selectedUser.text" :key="userText" effect="plain">
+          {{userText}}
+        </el-tag>
+        <div class="element-drawer__button">
+          <el-button size="mini" type="primary" icon="el-icon-plus" @click="onSelectUsers()">添加用户</el-button>
+        </div>
+      </div>
+      <div v-if="dataType === 'ROLES'">
+        <el-select v-model="roleIds" multiple size="mini" placeholder="请选择 角色" @change="changeSelectRoles">
+          <el-option
+            v-for="item in roleOptions"
+            :key="item.roleId"
+            :label="item.roleName"
+            :value="`ROLE${item.roleId}`"
+            :disabled="item.status === 1">
+          </el-option>
+        </el-select>
+      </div>
+      <div v-if="dataType === 'DEPTS'">
+        <tree-select
+          :width="320"
+          :height="400"
+          size="mini"
+          :data="deptTreeData"
+          :defaultProps="deptProps"
+          multiple
+          clearable
+          checkStrictly
+          nodeKey="id"
+          :checkedKeys="deptIds"
+          @change="checkedDeptChange">
+        </tree-select>
+      </div>
+    </el-row>
+    <el-row>
+      <div v-show="showMultiFlog">
+        <el-divider />
+        <h4><b>多实例审批方式</b></h4>
+        <el-row>
+          <el-radio-group v-model="multiLoopType" @change="changeMultiLoopType()">
+            <el-row><el-radio label="Null">无</el-radio></el-row>
+            <el-row><el-radio label="SequentialMultiInstance">会签（需所有审批人同意）</el-radio></el-row>
+            <el-row><el-radio label="ParallelMultiInstance">或签（一名审批人同意即可）</el-radio></el-row>
+          </el-radio-group>
+        </el-row>
+        <el-row v-if="multiLoopType !== 'Null'">
+          <el-tooltip content="开启后，实例需按顺序轮流审批" placement="top-start" @click.stop.prevent>
+            <i class="header-icon el-icon-info"></i>
+          </el-tooltip>
+          <span class="custom-label">顺序审批：</span>
+          <el-switch v-model="isSequential" @change="changeMultiLoopType()" />
+        </el-row>
+      </div>
+    </el-row>
+
+    <!-- 候选用户弹窗 -->
+    <el-dialog title="候选用户" :visible.sync="userOpen" width="60%" append-to-body>
+      <el-row type="flex" :gutter="20">
+        <!--部门数据-->
+        <el-col :span="7">
+          <el-card shadow="never" style="height: 100%">
+            <div slot="header">
+              <span>部门列表</span>
+            </div>
+            <div class="head-container">
+              <el-input
+                v-model="deptName"
+                placeholder="请输入部门名称"
+                clearable
+                size="small"
+                prefix-icon="el-icon-search"
+                style="margin-bottom: 20px"
+              />
+              <el-tree
+                :data="deptOptions"
+                :props="deptProps"
+                :expand-on-click-node="false"
+                :filter-node-method="filterNode"
+                ref="tree"
+                default-expand-all
+                @node-click="handleNodeClick"
+              />
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="17">
+          <el-table ref="multipleTable" height="600" :data="userTableList" border @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="50" align="center" />
+            <el-table-column label="用户名" align="center" prop="nickName" />
+            <el-table-column label="部门" align="center" prop="dept.deptName" />
+          </el-table>
+          <pagination
+            :total="userTotal"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getUserList"
+          />
+        </el-col>
+      </el-row>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handleTaskUserComplete">确 定</el-button>
+        <el-button @click="userOpen = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+import { listUser, deptTreeSelect } from "@/api/system/user";
+import { listRole } from "@/api/system/role";
+import TreeSelect from "@/components/TreeSelect";
+
+const userTaskForm = {
+  dataType: '',
+  assignee: '',
+  candidateUsers: '',
+  candidateGroups: '',
+  text: '',
+  // dueDate: '',
+  // followUpDate: '',
+  // priority: ''
+}
+
+export default {
+  name: "UserTask",
+  props: {
+    id: String,
+    type: String
+  },
+  components: { TreeSelect },
+  data() {
+    return {
+      loading: false,
+      dataType: 'USERS',
+      selectedUser: {
+        ids: [],
+        text: []
+      },
+      userOpen: false,
+      deptName: undefined,
+      deptOptions: [],
+      deptProps: {
+        children: "children",
+        label: "label"
+      },
+      deptTempOptions: [],
+      userTableList: [],
+      userTotal: 0,
+      selectedUserDate: [],
+      roleOptions: [],
+      roleIds: [],
+      deptTreeData: [],
+      deptIds: [],
+      // 查询参数
+      queryParams: {
+        deptId: undefined
+      },
+      showMultiFlog: false,
+      isSequential: false,
+      multiLoopType: 'Null',
+    };
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler() {
+        this.bpmnElement = window.bpmnInstances.bpmnElement;
+        this.$nextTick(() => this.resetTaskForm());
+      }
+    },
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  beforeDestroy() {
+    this.bpmnElement = null;
+  },
+  methods: {
+    resetTaskForm() {
+      const bpmnElementObj = this.bpmnElement?.businessObject;
+      if (!bpmnElementObj) {
+        return;
+      }
+      this.clearOptionsData()
+      this.dataType = bpmnElementObj['dataType'];
+      if (this.dataType === 'USERS') {
+        let userIdData = bpmnElementObj['candidateUsers'] || bpmnElementObj['assignee'];
+        let userText = bpmnElementObj['text'] || [];
+        if (userIdData && userIdData.toString().length > 0 && userText && userText.length > 0) {
+          this.selectedUser.ids = userIdData?.toString().split(',');
+          this.selectedUser.text = userText?.split(',');
+        }
+        if (this.selectedUser.ids.length > 1) {
+          this.showMultiFlog = true;
+        }
+      } else if (this.dataType === 'ROLES') {
+        this.getRoleOptions();
+        let roleIdData = bpmnElementObj['candidateGroups'] || [];
+        if (roleIdData && roleIdData.length > 0) {
+          this.roleIds = roleIdData.split(',')
+        }
+        this.showMultiFlog = true;
+      } else if (this.dataType === 'DEPTS') {
+        this.getDeptTreeData();
+        let deptIdData = bpmnElementObj['candidateGroups'] || [];
+        if (deptIdData && deptIdData.length > 0) {
+          this.deptIds = deptIdData.split(',');
+        }
+        this.showMultiFlog = true;
+      }
+      this.getElementLoop(bpmnElementObj);
+    },
+    /**
+     * 清空选项数据
+     */
+    clearOptionsData() {
+      this.selectedUser.ids = [];
+      this.selectedUser.text = [];
+      this.roleIds = [];
+      this.deptIds = [];
+    },
+    /**
+     * 跟新节点数据
+     */
+    updateElementTask() {
+      const taskAttr = Object.create(null);
+      for (let key in userTaskForm) {
+          taskAttr[key] = userTaskForm[key];
+      }
+      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
+    },
+    /**
+     * 查询部门下拉树结构
+     */
+    getDeptOptions() {
+      return new Promise((resolve, reject) => {
+        if (!this.deptOptions || this.deptOptions.length <= 0) {
+          deptTreeSelect().then(response => {
+            this.deptTempOptions = response.data;
+            this.deptOptions = response.data;
+            resolve()
+          })
+        } else {
+          reject()
+        }
+      });
+    },
+    /**
+     * 查询部门下拉树结构（含部门前缀）
+     */
+    getDeptTreeData() {
+      function refactorTree(data) {
+        return data.map(node => {
+          let treeData = { id: `DEPT${node.id}`, label: node.label, parentId: node.parentId, weight: node.weight };
+          if (node.children && node.children.length > 0) {
+            treeData.children = refactorTree(node.children);
+          }
+          return treeData;
+        });
+      }
+      return new Promise((resolve, reject) => {
+        if (!this.deptTreeData || this.deptTreeData.length <= 0) {
+          this.getDeptOptions().then(() => {
+            this.deptTreeData = refactorTree(this.deptOptions);
+            resolve()
+          }).catch(() => {
+            reject()
+          })
+        } else {
+          resolve()
+        }
+      })
+    },
+    /**
+     * 查询部门下拉树结构
+     */
+    getRoleOptions() {
+      if (!this.roleOptions || this.roleOptions.length <= 0) {
+        listRole().then(response => this.roleOptions = response.rows);
+      }
+    },
+    /** 查询用户列表 */
+    getUserList() {
+      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+        this.userTableList = response.rows;
+        this.userTotal = response.total;
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id;
+      this.getUserList();
+    },
+    // 关闭标签
+    handleClose(tag) {
+      this.selectedUserDate.splice(this.selectedUserDate.indexOf(tag), 1);
+      this.$refs.multipleTable.toggleRowSelection(tag);
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.selectedUserDate = selection;
+    },
+    onSelectUsers() {
+      this.selectedUserDate = []
+      this.$refs.multipleTable?.clearSelection();
+      this.getDeptOptions();
+      this.userOpen = true;
+    },
+    handleTaskUserComplete() {
+      if (!this.selectedUserDate || this.selectedUserDate.length <= 0) {
+        this.$modal.msgError('请选择用户');
+        return;
+      }
+      userTaskForm.dataType = 'USERS';
+      this.selectedUser.text = this.selectedUserDate.map(k => k.nickName) || [];
+      if (this.selectedUserDate.length === 1) {
+        let data = this.selectedUserDate[0];
+        userTaskForm.assignee = data.userId;
+        userTaskForm.text = data.nickName;
+        userTaskForm.candidateUsers = null;
+        this.showMultiFlog = false;
+        this.multiLoopType = 'Null';
+        this.changeMultiLoopType();
+      } else {
+        userTaskForm.candidateUsers = this.selectedUserDate.map(k => k.userId).join() || null;
+        userTaskForm.text = this.selectedUserDate.map(k => k.nickName).join() || null;
+        userTaskForm.assignee = null;
+        this.showMultiFlog = true;
+      }
+      this.updateElementTask()
+      this.userOpen = false;
+    },
+    changeSelectRoles(val) {
+      let groups = null;
+      let text = null;
+      if (val && val.length > 0) {
+        userTaskForm.dataType = 'ROLES';
+        groups = val.join() || null;
+        let textArr = this.roleOptions.filter(k => val.indexOf(`ROLE${k.roleId}`) >= 0);
+        text = textArr?.map(k => k.roleName).join() || null;
+      } else {
+        userTaskForm.dataType = null;
+        this.multiLoopType = 'Null';
+      }
+      userTaskForm.candidateGroups = groups;
+      userTaskForm.text = text;
+      this.updateElementTask();
+      this.changeMultiLoopType();
+    },
+    checkedDeptChange(checkedIds) {
+      let groups = null;
+      let text = null;
+      this.deptIds = checkedIds;
+      if (checkedIds && checkedIds.length > 0) {
+        userTaskForm.dataType = 'DEPTS';
+        groups = checkedIds.join() || null;
+        let textArr = []
+        let treeStarkData = JSON.parse(JSON.stringify(this.deptTreeData));
+        checkedIds.forEach(id => {
+          let stark = []
+          stark = stark.concat(treeStarkData);
+          while(stark.length) {
+            let temp = stark.shift();
+            if(temp.children) {
+              stark = temp.children.concat(stark);
+            }
+            if(id === temp.id) {
+              textArr.push(temp);
+            }
+          }
+        })
+        text = textArr?.map(k => k.label).join() || null;
+      } else {
+        userTaskForm.dataType = null;
+        this.multiLoopType = 'Null';
+      }
+      userTaskForm.candidateGroups = groups;
+      userTaskForm.text = text;
+      this.updateElementTask();
+      this.changeMultiLoopType();
+    },
+    changeDataType(val) {
+      if (val === 'ROLES' || val === 'DEPTS' || (val === 'USERS' && this.selectedUser.ids.length > 1)) {
+        this.showMultiFlog = true;
+      } else {
+        this.showMultiFlog = false;
+      }
+      this.multiLoopType = 'Null';
+      this.changeMultiLoopType();
+      // 清空 userTaskForm 所有属性值
+      Object.keys(userTaskForm).forEach(key => userTaskForm[key] = null);
+      userTaskForm.dataType = val;
+      if (val === 'USERS') {
+        if (this.selectedUser && this.selectedUser.ids && this.selectedUser.ids.length > 0) {
+          if (this.selectedUser.ids.length === 1) {
+            userTaskForm.assignee = this.selectedUser.ids[0];
+          } else {
+            userTaskForm.candidateUsers = this.selectedUser.ids.join()
+          }
+          userTaskForm.text = this.selectedUser.text?.join() || null
+        }
+      } else if (val === 'ROLES') {
+        this.getRoleOptions();
+        if (this.roleIds && this.roleIds.length > 0) {
+          userTaskForm.candidateGroups = this.roleIds.join() || null;
+          let textArr = this.roleOptions.filter(k => this.roleIds.indexOf(`ROLE${k.roleId}`) >= 0);
+          userTaskForm.text = textArr?.map(k => k.roleName).join() || null;
+        }
+      } else if (val === 'DEPTS') {
+        this.getDeptTreeData();
+        if (this.deptIds && this.deptIds.length > 0) {
+          userTaskForm.candidateGroups = this.deptIds.join() || null;
+          let textArr = []
+          let treeStarkData = JSON.parse(JSON.stringify(this.deptTreeData));
+          this.deptIds.forEach(id => {
+            let stark = []
+            stark = stark.concat(treeStarkData);
+            while(stark.length) {
+              let temp = stark.shift();
+              if(temp.children) {
+                stark = temp.children.concat(stark);
+              }
+              if(id === temp.id) {
+                textArr.push(temp);
+              }
+            }
+          })
+          userTaskForm.text = textArr?.map(k => k.label).join() || null;
+        }
+      } else if (val === 'INITIATOR') {
+        userTaskForm.assignee = "${initiator}";
+        userTaskForm.text = "流程发起人";
+      }
+      this.updateElementTask();
+    },
+    getElementLoop(businessObject) {
+      if (!businessObject.loopCharacteristics) {
+        this.multiLoopType = "Null";
+        return;
+      }
+      this.isSequential = businessObject.loopCharacteristics.isSequential;
+      if (businessObject.loopCharacteristics.completionCondition) {
+        if (businessObject.loopCharacteristics.completionCondition.body === "${nrOfCompletedInstances >= nrOfInstances}") {
+          this.multiLoopType = "SequentialMultiInstance";
+        } else {
+          this.multiLoopType = "ParallelMultiInstance";
+
+        }
+      }
+    },
+    changeMultiLoopType() {
+      // 取消多实例配置
+      if (this.multiLoopType === "Null") {
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { loopCharacteristics: null, assignee: null });
+        return;
+      }
+      this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { isSequential: this.isSequential });
+      // 更新多实例配置
+      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+        loopCharacteristics: this.multiLoopInstance,
+        assignee: '${assignee}'
+      });
+      // 完成条件
+      let completionCondition = null;
+      // 会签
+      if (this.multiLoopType === "SequentialMultiInstance") {
+        completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "${nrOfCompletedInstances >= nrOfInstances}" });
+      }
+      // 或签
+      if (this.multiLoopType === "ParallelMultiInstance") {
+        completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "${nrOfCompletedInstances > 0}" });
+      }
+      // 更新模块属性信息
+      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
+        collection: '${multiInstanceHandler.getUserIds(execution)}',
+        elementVariable: 'assignee',
+        completionCondition
+      });
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.el-row .el-radio-group {
+  margin-bottom: 15px;
+  .el-radio {
+    line-height: 28px;
+  }
+}
+.el-tag {
+  margin-bottom: 10px;
+  + .el-tag {
+    margin-left: 10px;
+  }
+}
+
+.custom-label {
+  padding-left: 5px;
+  font-weight: 500;
+  font-size: 14px;
+  color: #606266;
+}
+
+</style>
diff --git a/src/components/FlowDiagram/plugins/package/theme/flow-element-variables.scss b/src/components/FlowDiagram/plugins/package/theme/flow-element-variables.scss
new file mode 100644
index 0000000..a54b6e0
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/theme/flow-element-variables.scss
@@ -0,0 +1,63 @@
+/* 改变主题色变量 */
+// $--color-primary: #1890ff;
+// $--color-danger: #ff4d4f;
+
+/* 改变 icon 字体路径变量，必需 */
+
+.process-drawer .el-drawer__header {
+  padding: 16px 16px 8px 16px;
+  margin: 0;
+  line-height: 24px;
+  font-size: 18px;
+  color: #303133;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+div[class^="el-drawer"]:focus,
+span:focus {
+  outline: none;
+}
+
+.process-drawer .el-drawer__body {
+  box-sizing: border-box;
+  padding: 16px;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.process-design {
+  .el-table td,
+  .el-table th {
+    color: #333;
+  }
+
+  .el-dialog__header {
+    padding: 16px 16px 8px 16px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  .el-dialog__body {
+    padding: 16px;
+    max-height: 80vh;
+    box-sizing: border-box;
+    overflow-y: auto;
+  }
+  .el-dialog__footer {
+    padding: 16px;
+    box-sizing: border-box;
+    border-top: 1px solid #e8e8e8;
+  }
+  .el-dialog__close {
+    font-weight: 600;
+  }
+  .el-select {
+    width: 100%;
+  }
+  .el-divider:not(.el-divider--horizontal) {
+    margin: 0 8px ;
+  }
+  .el-divider.el-divider--horizontal {
+    margin: 16px 0;
+  }
+}
diff --git a/src/components/FlowDiagram/plugins/package/theme/index.scss b/src/components/FlowDiagram/plugins/package/theme/index.scss
new file mode 100644
index 0000000..571f07b
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/theme/index.scss
@@ -0,0 +1,171 @@
+@import "./flow-element-variables.scss";
+@import "bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
+// @import "bpmn-js-token-simulation/assets/css/font-awesome.min.css";
+// @import "bpmn-js-token-simulation/assets/css/normalize.css";
+@import "bpmn-js/dist/assets/diagram-js.css";
+@import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
+@import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
+@import "./process-designer.scss";
+@import "./process-panel.scss";
+
+$success-color: #4eb819;
+$primary-color: #409EFF;
+$warning-color: #E6A23C;
+$danger-color: #F56C6C;
+$cancel-color: #909399;
+
+.process-viewer {
+  position: relative;
+  border: 1px solid #EFEFEF;
+  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat!important;
+
+  .success-arrow {
+    fill: $success-color;
+    stroke: $success-color;
+  }
+
+  .success-conditional {
+    fill: white;
+    stroke: $success-color;
+  }
+
+  .fail-arrow {
+    fill: $warning-color;
+    stroke: $warning-color;
+  }
+
+  .fail-conditional {
+    fill: white;
+    stroke: $warning-color;
+  }
+
+  .success.djs-connection {
+    .djs-visual path {
+      stroke: $success-color!important;
+      marker-end: url(#sequenceflow-end-white-success)!important;
+    }
+  }
+
+  .success.djs-connection.condition-expression {
+    .djs-visual path {
+      marker-start: url(#conditional-flow-marker-white-success)!important;
+    }
+  }
+
+  .success.djs-shape {
+    .djs-visual rect {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $success-color!important;
+    }
+
+    .djs-visual path:nth-child(2) {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .primary.djs-shape {
+    .djs-visual rect {
+      stroke: $primary-color!important;
+      fill: $primary-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $primary-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $primary-color!important;
+      fill: $primary-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .warning.djs-connection {
+    .djs-visual path {
+      stroke: $warning-color!important;
+      marker-end: url(#sequenceflow-end-white-fail)!important;
+    }
+  }
+
+  .warning.djs-connection.condition-expression {
+    .djs-visual path {
+      marker-start: url(#conditional-flow-marker-white-fail)!important;
+    }
+  }
+
+  .warning.djs-shape {
+    .djs-visual rect {
+      stroke: $warning-color!important;
+      fill: $warning-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $warning-color!important;
+    }
+
+    .djs-visual path:nth-child(2) {
+      stroke: $warning-color!important;
+      fill: $warning-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $warning-color!important;
+      fill: $warning-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .danger.djs-shape {
+    .djs-visual rect {
+      stroke: $danger-color!important;
+      fill: $danger-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $danger-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $danger-color!important;
+      fill: $danger-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .cancel.djs-shape {
+    .djs-visual rect {
+      stroke: $cancel-color!important;
+      fill: $cancel-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $cancel-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $cancel-color!important;
+      fill: $cancel-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+}
+
+.process-viewer .djs-tooltip-container, .process-viewer .djs-overlay-container, .process-viewer .djs-palette {
+  display: none;
+}
diff --git a/src/components/FlowDiagram/plugins/package/theme/process-designer.scss b/src/components/FlowDiagram/plugins/package/theme/process-designer.scss
new file mode 100644
index 0000000..bfd13ee
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/theme/process-designer.scss
@@ -0,0 +1,153 @@
+// 边框被 token-simulation 样式覆盖了
+.djs-palette {
+  background: var(--palette-background-color);
+  border: solid 1px var(--palette-border-color) !important;
+  border-radius: 2px;
+}
+
+.my-process-designer {
+  padding: 5px 0 10px 10px;
+  display: flex;
+  flex-direction: column;
+  width: 70%;
+  height: 100%;
+  box-sizing: border-box;
+  .my-process-designer__header {
+    width: 100%;
+    min-height: 36px;
+    .el-button {
+      text-align: center;
+    }
+    .el-button-group {
+      margin: 4px;
+    }
+    .el-tooltip__popper {
+      .el-button {
+        width: 100%;
+        text-align: left;
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+      .el-button:hover {
+        background: rgba(64, 158, 255, 0.8);
+        color: #ffffff;
+      }
+    }
+    .align {
+      position: relative;
+      i {
+        &:after {
+          content: "|";
+          position: absolute;
+          transform: rotate(90deg) translate(200%, 60%);
+        }
+      }
+    }
+    .align.align-left i {
+      transform: rotate(90deg);
+    }
+    .align.align-right i {
+      transform: rotate(-90deg);
+    }
+    .align.align-top i {
+      transform: rotate(180deg);
+    }
+    .align.align-bottom i {
+      transform: rotate(0deg);
+    }
+    .align.align-center i {
+      transform: rotate(90deg);
+      &:after {
+        transform: rotate(90deg) translate(0, 60%);
+      }
+    }
+    .align.align-middle i {
+      transform: rotate(0deg);
+      &:after {
+        transform: rotate(90deg) translate(0, 60%);
+      }
+    }
+  }
+  .my-process-designer__container {
+    display: inline-flex;
+    width: 100%;
+    flex: 1;
+    .my-process-designer__canvas {
+      flex: 1;
+      height: 100%;
+      position: relative;
+      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
+      repeat !important;
+      div.toggle-mode {
+        display: none;
+      }
+    }
+    .my-process-designer__property-panel {
+      height: 100%;
+      overflow: scroll;
+      overflow-y: auto;
+      z-index: 10;
+      * {
+        box-sizing: border-box;
+      }
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      min-height: 100%;
+      overflow: hidden;
+    }
+  }
+}
+
+//侧边栏配置
+.djs-palette.open {
+  .djs-palette-entries {
+    div[class^="bpmn-icon-"]:before,
+    div[class*="bpmn-icon-"]:before {
+      line-height: unset;
+    }
+    div.entry {
+      position: relative;
+    }
+    div.entry:hover {
+      &::after {
+        width: max-content;
+        content: attr(title);
+        vertical-align: text-bottom;
+        position: absolute;
+        right: -10px;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        transform: translateX(100%);
+        font-size: 0.5em;
+        display: inline-block;
+        text-decoration: inherit;
+        font-variant: normal;
+        text-transform: none;
+        background: #fafafa;
+        box-shadow: 0 0 6px #eeeeee;
+        border: 1px solid #cccccc;
+        box-sizing: border-box;
+        padding: 0 16px;
+        border-radius: 4px;
+        z-index: 100;
+      }
+    }
+  }
+}
+pre {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  max-height: calc(80vh - 32px);
+  overflow-y: auto;
+}
+.hljs {
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.hljs * {
+  font-family: Consolas, Monaco, monospace;
+}
diff --git a/src/components/FlowDiagram/plugins/package/theme/process-panel.scss b/src/components/FlowDiagram/plugins/package/theme/process-panel.scss
new file mode 100644
index 0000000..5c7c3df
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/theme/process-panel.scss
@@ -0,0 +1,110 @@
+.process-design {
+  .process-panel__container {
+    box-sizing: border-box;
+    padding: 0 8px;
+    border-left: 1px solid #eeeeee;
+    box-shadow: 0 0 8px #cccccc;
+    max-height: 100%;
+    overflow-y: scroll;
+  }
+  .panel-tab__title {
+    font-weight: 600;
+    padding: 0 8px;
+    font-size: 1.1em;
+    line-height: 1.2em;
+    i {
+      margin-right: 8px;
+      font-size: 1.2em;
+    }
+  }
+  .panel-tab__content {
+    width: 100%;
+    box-sizing: border-box;
+    border-top: 1px solid #eeeeee;
+    padding: 8px 16px;
+    .panel-tab__content--title {
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 8px;
+      span {
+        flex: 1;
+        text-align: left;
+      }
+    }
+  }
+  .element-property {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    margin: 8px 0;
+    .element-property__label {
+      display: block;
+      width: 90px;
+      text-align: right;
+      overflow: hidden;
+      padding-right: 12px;
+      line-height: 32px;
+      font-size: 14px;
+      box-sizing: border-box;
+    }
+    .element-property__value {
+      flex: 1;
+      line-height: 32px;
+    }
+    .el-form-item {
+      width: 100%;
+      margin-bottom: 0;
+      padding-bottom: 18px;
+    }
+  }
+  .list-property {
+    flex-direction: column;
+    .element-listener-item {
+      width: 100%;
+      display: inline-grid;
+      grid-template-columns: 16px auto 32px 32px;
+      grid-column-gap: 8px;
+    }
+    .element-listener-item + .element-listener-item {
+      margin-top: 8px;
+    }
+  }
+  .listener-filed__title {
+    display: inline-flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 0;
+    span {
+      width: 200px;
+      text-align: left;
+      font-size: 14px;
+    }
+    i {
+      margin-right: 8px;
+    }
+  }
+  .element-drawer__button {
+    margin-top: 8px;
+    width: 100%;
+    display: inline-flex;
+    justify-content: space-around;
+  }
+  .element-drawer__button > .el-button {
+    width: 100%;
+  }
+  
+  .el-collapse-item__content {
+    padding-bottom: 0;
+  }
+  .el-input.is-disabled .el-input__inner {
+    color: #999999;
+  }
+  .el-form-item.el-form-item--mini {
+    margin-bottom: 0;
+    & + .el-form-item {
+      margin-top: 16px;
+    }
+  }
+}
+
diff --git a/src/components/FlowDiagram/plugins/package/utils.js b/src/components/FlowDiagram/plugins/package/utils.js
new file mode 100644
index 0000000..1f1926d
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/package/utils.js
@@ -0,0 +1,69 @@
+// 创建监听器实例
+export function createListenerObject(options, isTask, prefix) {
+  const listenerObj = Object.create(null);
+  listenerObj.event = options.event;
+  // isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段
+  switch (options.listenerType) {
+    case "scriptListener":
+      listenerObj.script = createScriptObject(options, prefix);
+      break;
+    case "expressionListener":
+      listenerObj.expression = options.expression;
+      break;
+    case "delegateExpressionListener":
+      listenerObj.delegateExpression = options.delegateExpression;
+      break;
+    default:
+      listenerObj.class = options.class;
+  }
+  // 注入字段
+  if (options.fields) {
+    listenerObj.fields = options.fields.map(field => {
+      return createFieldObject(field, prefix);
+    });
+  }
+  // 任务监听器的 定时器 设置
+  if (isTask && options.event === "timeout" && !!options.eventDefinitionType) {
+    const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions });
+    const TimerEventDefinition = window.bpmnInstances.moddle.create("bpmn:TimerEventDefinition", {
+      id: `TimerEventDefinition_${uuid(8)}`,
+      [`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition
+    });
+    listenerObj.eventDefinitions = [TimerEventDefinition];
+  }
+  return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj);
+}
+
+// 创建 监听器的注入字段 实例
+export function createFieldObject(option, prefix) {
+  const { name, fieldType, string, expression } = option;
+  const fieldConfig = fieldType === "string" ? { name, string } : { name, expression };
+  return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig);
+}
+
+// 创建脚本实例
+export function createScriptObject(options, prefix) {
+  const { scriptType, scriptFormat, value, resource } = options;
+  const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource };
+  return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig);
+}
+
+// 更新元素扩展属性
+export function updateElementExtensions(element, extensionList) {
+  const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
+    values: extensionList
+  });
+  window.bpmnInstances.modeling.updateProperties(element, {
+    extensionElements: extensions
+  });
+}
+
+// 创建一个id
+export function uuid(length = 8, chars) {
+  let result = "";
+  let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  for (let i = length; i > 0; --i) {
+    result += charsString[Math.floor(Math.random() * charsString.length)];
+  }
+  return result;
+}
diff --git a/src/components/FlowDiagram/plugins/tab.js b/src/components/FlowDiagram/plugins/tab.js
new file mode 100644
index 0000000..3d757a3
--- /dev/null
+++ b/src/components/FlowDiagram/plugins/tab.js
@@ -0,0 +1,71 @@
+import store from '@/store'
+import router from '@/router';
+
+export default {
+  // 刷新当前tab页签
+  refreshPage(obj) {
+    const { path, query, matched } = router.currentRoute;
+    if (obj === undefined) {
+      matched.forEach((m) => {
+        if (m.components && m.components.default && m.components.default.name) {
+          if (!['Layout', 'ParentView'].includes(m.components.default.name)) {
+            obj = { name: m.components.default.name, path: path, query: query };
+          }
+        }
+      });
+    }
+    return store.dispatch('tagsView/delCachedView', obj).then(() => {
+      const { path, query } = obj
+      router.replace({
+        path: '/redirect' + path,
+        query: query
+      })
+    })
+  },
+  // 关闭当前tab页签，打开新页签
+  closeOpenPage(obj) {
+    store.dispatch("tagsView/delView", router.currentRoute);
+    if (obj !== undefined) {
+      return router.push(obj);
+    }
+  },
+  // 关闭指定tab页签
+  closePage(obj) {
+    if (obj === undefined) {
+      return store.dispatch('tagsView/delView', router.currentRoute).then(({ visitedViews }) => {
+        const latestView = visitedViews.slice(-1)[0]
+        if (latestView) {
+          return router.push(latestView.fullPath)
+        }
+        return router.push('/');
+      });
+    }
+    return store.dispatch('tagsView/delView', obj);
+  },
+  // 关闭所有tab页签
+  closeAllPage() {
+    return store.dispatch('tagsView/delAllViews');
+  },
+  // 关闭左侧tab页签
+  closeLeftPage(obj) {
+    return store.dispatch('tagsView/delLeftTags', obj || router.currentRoute);
+  },
+  // 关闭右侧tab页签
+  closeRightPage(obj) {
+    return store.dispatch('tagsView/delRightTags', obj || router.currentRoute);
+  },
+  // 关闭其他tab页签
+  closeOtherPage(obj) {
+    return store.dispatch('tagsView/delOthersViews', obj || router.currentRoute);
+  },
+  // 添加tab页签
+  openPage(title, url, params) {
+    var obj = { path: url, meta: { title: title } }
+    store.dispatch('tagsView/addView', obj);
+    return router.push({ path: url, query: params });
+  },
+  // 修改tab页签
+  updatePage(obj) {
+    return store.dispatch('tagsView/updateVisitedView', obj);
+  }
+}
diff --git a/src/components/ProcessDesigner/index.vue b/src/components/ProcessDesigner/index.vue
index abb9c5d..85d1f47 100644
--- a/src/components/ProcessDesigner/index.vue
+++ b/src/components/ProcessDesigner/index.vue
@@ -4,35 +4,40 @@
         'element.click',
         'connection.added',
         'connection.removed',
-        'connection.changed'
-      ]" @connection-added="connectionAdded" @connection-removed="connectionRemoved"
+        'connection.changed',
+        'shape.removed'
+      ]" @connection-added="connectionAdded" @connection-removed="connectionRemoved" @shape-removed="shapeRemoved"
       @connection-changed="connectionChanged" @element-click="elementClick" @init-finished="initModeler"
-      @event="handlerEvent" @save="onSaveProcess" :schemeCode="props.schemeCode" :pageFlow="props.pageFlow" :pageType="props.pageType"/>
+      @event="handlerEvent" @save="onSaveProcess" :schemeCode="data.schemeCode" :pageFlow="data.pageFlow"
+      :pageType="data.pageType" />
     <!-- 属性面板 -->
-    <bmpn-process-penal :element="data.element" :bpmn-modeler="data.modeler" :prefix="data.controlForm.prefix"
-      class="process-panel" ref=processPanel :schemeCode="props.schemeCode" :pageView="props.pageView" :pageType="props.pageType"/>
+    <bmpn-process-penal :bpmn-modeler="data.modeler" :prefix="data.controlForm.prefix" class="process-panel"
+      ref=processPanel :schemeCode="data.schemeCode" :pageView="data.pageView" :pageType="data.pageType" />
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { h, reactive, onMounted, defineProps, computed, defineEmits, inject,ref } from 'vue';
+  import { h, reactive, onMounted, defineProps, computed, defineEmits, inject, ref ,watch} from 'vue';
   import './package/theme/index.scss';
   // 流程面板和属性面板
   import { BpmnProcessDesigner, BmpnProcessPenal } from './package/index';
   import 'highlight.js/styles/atom-one-dark-reasonable.css';
+  import { flowStore } from '@/store/modules/flow';
+
+  const flowWfDataStore = flowStore();
   const emit = defineEmits(['save']);
   // Vue.use(vuePlugin);
   const props = defineProps({
     // 编辑模板，code供详情接口使用
-    schemeCode:{
-      type:String,
+    schemeCode: {
+      type: String,
     },
     // 预览历史版本wfData
-    pageView:String,
+    pageView: String,
     // 分辨是不是预览历史版本detial
-    pageType:String,
+    pageType: String,
     // 流程图
-    pageFlow:String,
+    pageFlow: String,
   })
   const data = reactive({
     height: document.documentElement.clientHeight - 144.5 + "px;",
@@ -42,19 +47,35 @@
       prefix: 'flowable',
     },
     element: null,
+    schemeCode:props.schemeCode,
+    pageView:props.pageView,
+    pageType:props.pageType,
+    pageFlow:props.pageFlow,
   })
-  if(props.pageType == 'detail'){
+  watch(
+    () => props.pageView,
+    (newVal, oldVal) => {
+      data.pageView=newVal
+    }
+  )
+  watch(
+    () => props.pageFlow,
+    (newVal, oldVal) => {
+      data.pageFlow=newVal
+    }
+  )
+  if (props.pageType == 'detail') {
     data.height = document.documentElement.clientHeight - 294.5 + "px;"
   }
   const processPanel = ref < any > ()
-  const processDesigner = ref <any> ()
+  const processDesigner = ref < any > ()
   async function getFlow() {
     let panel = await processPanel.value.getPanel()
     let flow = await processDesigner.value.getFlow()
     panel.scheme.flowContent = flow
     return panel
   }
-  async function validateFlow(){
+  async function validateFlow() {
     let res = await processPanel.value.validatePanel()
     return res
   }
@@ -68,7 +89,14 @@
 
   }
   function connectionRemoved(node) {
+    console.log(node)
     console.log('connectionRemoved')
+    flowWfDataStore.deleteWfData(node)
+  }
+  function shapeRemoved(node){
+    console.log('shapeRemoved')
+    flowWfDataStore.deleteWfData(node)
+
   }
   function connectionChanged(node) {
     data.element = node;
@@ -81,6 +109,7 @@
     data.element = element;
   }
   function initModeler(modeler) {
+    console.log(modeler)
     setTimeout(() => {
       data.modeler = modeler;
     }, 10);
diff --git a/src/components/ProcessDesigner/package/designer/ProcessDesigner.vue b/src/components/ProcessDesigner/package/designer/ProcessDesigner.vue
index 82c02d6..f8a5133 100644
--- a/src/components/ProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/src/components/ProcessDesigner/package/designer/ProcessDesigner.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { h, provide, reactive, onMounted, defineProps, computed, defineEmits } from 'vue';
+  import { h, provide, reactive, onMounted, defineProps, computed, defineEmits ,watch} from 'vue';
   import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
   // 生产环境时优化
   import BpmnModeler from "bpmn-js/lib/Modeler";
@@ -55,7 +55,8 @@
 
   const emit = defineEmits(['init-finished', 'event', 'commandStack-changed', 'input', 'change', 'canvas-viewbox-changed', 'destroy', 'save', 'element-click', 'connection-added', 'connection-removed', 'connection-changed']);
   import { getDetail } from '@/api/sys/WFSchemeInfo'
-
+  import { flowStore } from '@/store/modules/flow';
+  const flowWfDataStore = flowStore();
   // 引入json转换与高亮
   import convert from "xml-js";
   const process = reactive({
@@ -70,27 +71,6 @@
   })
   const props = defineProps({
     value: String, // xml 字符串
-    processId: String,
-    processName: String,
-    translations: Object, // 自定义的翻译文件
-    additionalModel: [Object, Array], // 自定义model
-    moddleExtension: Object, // 自定义moddle
-    onlyCustomizeAddi: {
-      type: Boolean,
-      default: false
-    },
-    onlyCustomizeModdle: {
-      type: Boolean,
-      default: false
-    },
-    simulation: {
-      type: Boolean,
-      default: true
-    },
-    keyboard: {
-      type: Boolean,
-      default: true
-    },
     prefix: {
       type: String,
       default: "flowable"
@@ -110,16 +90,22 @@
       validator: value => ["default", "primary", "success", "warning", "danger", "info"].indexOf(value) !== -1
     },
     schemeCode: String,
-    pageFlow:String,
-    pageType:String,
+    pageFlow: String,
+    pageType: String,
   })
+  watch(
+    () => props.pageFlow,
+    (newVal, oldVal) => {
+      createNewDiagram(newVal)
+    }
+  )
   onMounted(() => {
     initBpmnModeler();
     createNewDiagram(props.value);
     if (props.schemeCode) {
       getDetailInfo(1)
     }
-    if(props.pageType=='detail'){
+    if (props.pageType == 'detail') {
       createNewDiagram(props.pageFlow)
     }
   })
@@ -188,6 +174,12 @@
       const { scale } = viewbox;
       process.defaultZoom = Math.floor(scale * 100) / 100;
     });
+    // 监听选择事件，修改当前激活的元素以及表单
+    process.bpmnModeler.on("selection.changed", ({ newSelection }) => {
+    });
+    process.bpmnModeler.on("element.changed", ({ element }) => {
+
+    });
   }
   /* 创建新的流程图 */
   async function createNewDiagram(xml) {
@@ -205,78 +197,7 @@
     }
   }
 
-  // 下载流程图到本地
-  async function downloadProcess(type, name) {
-    try {
-      const _this = this;
-      // 按需要类型创建文件并下载
-      if (type === "xml" || type === "bpmn") {
-        const { err, xml } = await process.bpmnModeler.saveXML();
-        // 读取异常时抛出异常
-        if (err) {
-          console.error(`[Process Designer Warn ]: ${err.message || err}`);
-        }
-        let { href, filename } = setEncoded(type.toUpperCase(), name, xml);
-        downloadFunc(href, filename);
-      } else {
-        const { err, svg } = await process.bpmnModeler.saveSVG();
-        // 读取异常时抛出异常
-        if (err) {
-          return console.error(err);
-        }
-        let { href, filename } = setEncoded("SVG", name, svg);
-        downloadFunc(href, filename);
-      }
-    } catch (e) {
-      console.error(`[Process Designer Warn ]: ${e.message || e}`);
-    }
-    // 文件下载方法
-    function downloadFunc(href, filename) {
-      if (href && filename) {
-        let a = document.createElement("a");
-        a.download = filename; //指定下载的文件名
-        a.href = href; //  URL对象
-        a.click(); // 模拟点击
-        URL.revokeObjectURL(a.href); // 释放URL 对象
-      }
-    }
-  }
 
-  // 根据所需类型进行转码并返回下载地址
-  function setEncoded(type, filename = "diagram", data) {
-    const encodedData = encodeURIComponent(data);
-    return {
-      filename: `${filename}.${type}`,
-      href: `data:application/${type === "svg" ? "text/xml" : "bpmn20-xml"};charset=UTF-8,${encodedData}`,
-      data: data
-    };
-  }
-
-  // 加载本地文件
-  function importLocalFile() {
-    const that = this;
-    const file = this.$refs.refFile.files[0];
-    const reader = new FileReader();
-    reader.readAsText(file);
-    reader.onload = function () {
-      let xmlStr = this.result;
-      createNewDiagram(xmlStr);
-    };
-  }
-  /* ------------------------------------------------ refs methods ------------------------------------------------------ */
-  function downloadProcessAsXml() {
-    downloadProcess("xml");
-  }
-  function downloadProcessAsBpmn() {
-    downloadProcess("bpmn");
-  }
-  function downloadProcessAsSvg() {
-    downloadProcess("svg");
-  }
-  function processSimulation() {
-    process.simulationStatus = !process.simulationStatus;
-    props.simulation && process.bpmnModeler.get("toggleMode").toggleMode();
-  }
   function processRedo() {
     process.bpmnModeler.get("commandStack").redo();
   }
@@ -299,16 +220,6 @@
     process.defaultZoom = newZoom;
     process.bpmnModeler.get("canvas").zoom(process.defaultZoom);
   }
-  function processZoomTo(newZoom = 1) {
-    if (newZoom < 0.2) {
-      throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
-    }
-    if (newZoom > 4) {
-      throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
-    }
-    process.defaultZoom = newZoom;
-    process.bpmnModeler.get("canvas").zoom(newZoom);
-  }
   function processReZoom() {
     process.defaultZoom = 1;
     process.bpmnModeler.get("canvas").zoom("fit-viewport", "auto");
@@ -317,20 +228,7 @@
     process.recoverable = false;
     process.revocable = false;
     createNewDiagram(null).then(() => process.bpmnModeler.get("canvas").zoom(1, "auto"));
-  }
-  function elementsAlign(align) {
-    const Align = process.bpmnModeler.get("alignElements");
-    const Selection = process.bpmnModeler.get("selection");
-    const SelectedElements = Selection.get();
-    if (!SelectedElements || SelectedElements.length <= 1) {
-      this.$message.warning("请按住 Ctrl 键选择多个元素对齐");
-      return;
-    }
-    this.$confirm("自动对齐可能造成图形变形，是否继续？", "警告", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning"
-    }).then(() => Align.trigger(SelectedElements, align));
+    flowWfDataStore.setWfDataAll([])
   }
   /*-----------------------------    方法结束     ---------------------------------*/
   function previewProcessXML() {
diff --git a/src/components/ProcessDesigner/package/penal/PropertiesPanel.vue b/src/components/ProcessDesigner/package/penal/PropertiesPanel.vue
index 851c920..4951efd 100644
--- a/src/components/ProcessDesigner/package/penal/PropertiesPanel.vue
+++ b/src/components/ProcessDesigner/package/penal/PropertiesPanel.vue
@@ -3,42 +3,34 @@
     <a-tabs v-model:activeKey="configActiveName">
       <a-tab-pane :tab="data.wfNodeName" key="1">
         <!-- 开始节点 -->
-        <start-event-option ref="startRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
-          :pageView="props.pageView" :pageType="props.pageType"
+        <start-event-option ref="startRef" :element="data.currentWfNode" :pageType="props.pageType"
           :class="data.currentWfNode.type=='bpmn:StartEvent' ? '' : 'hidden'"></start-event-option>
         <!-- 审核节点 -->
-        <user-task-option ref="taskRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
-          :pageView="props.pageView" :pageType="props.pageType"
+        <user-task-option ref="taskRef" :element="data.currentWfNode" :pageType="props.pageType"
           :class="data.currentWfNode.type=='bpmn:Task' ? '' : 'hidden'">
         </user-task-option>
         <!-- 结束节点 -->
-        <end-event-option ref="endRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
+        <end-event-option ref="endRef" :element="data.currentWfNode" :pageType="props.pageType"
           :class="data.currentWfNode.type=='bpmn:EndEvent' ? '' : 'hidden'"></end-event-option>
         <!-- 子流程 -->
-        <subprocess-option ref="subprocessRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
-          :pageView="props.pageView" :pageType="props.pageType"
+        <subprocess-option ref="subprocessRef" :element="data.currentWfNode" :pageType="props.pageType"
           :class="data.currentWfNode.type=='bpmn:SubProcess' ? '' : 'hidden'"></subprocess-option>
         <!-- 排他网关 -->
-        <exclusive-gateway-option ref="exclusiveGatewayRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
-          :pageView="props.pageView" :pageType="props.pageType"
+        <exclusive-gateway-option ref="exclusiveGatewayRef" :element="data.currentWfNode" :pageType="props.pageType"
           :class="data.currentWfNode.type=='bpmn:ExclusiveGateway' ? '' : 'hidden'">
         </exclusive-gateway-option>
         <!-- 并行网关 -->
-        <parallel-gateway-option ref="parallelGatewayRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
-          :pageView="props.pageView" :pageType="props.pageType"
+        <parallel-gateway-option ref="parallelGatewayRef" :element="data.currentWfNode" :pageType="props.pageType"
           :class="data.currentWfNode.type=='bpmn:ParallelGateway' ? '' : 'hidden'">
         </parallel-gateway-option>
         <!-- 包容网关 -->
         <!-- "bpmn:InclusiveGateway" -->
-        <inclusive-gateway-option ref="inclusiveGatewayRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
-          :pageView="props.pageView" :pageType="props.pageType"
+        <inclusive-gateway-option ref="inclusiveGatewayRef" :element="data.currentWfNode" :pageType="props.pageType"
           :class="data.currentWfNode.type=='bpmn:InclusiveGateway' ? '' : 'hidden'">
         </inclusive-gateway-option>
         <!-- 线条 -->
-        <myline-option ref="mylineRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
-          :pageView="props.pageView" :pageType="props.pageType" :wfData="data.wfData" :flowRef="data.flowRef"
-          :class="data.currentWfNode.type=='bpmn:SequenceFlow' ? '' : 'hidden'">
-        </myline-option>
+        <myline-option ref="mylineRef" :element="data.currentWfNode" :pageType="props.pageType"
+          :class="data.currentWfNode.type=='bpmn:SequenceFlow' ? '' : 'hidden'"> </myline-option>
       </a-tab-pane>
       <a-tab-pane tab="流程属性" key="2">
         <shcemeinfo-config ref="shcemeinfoRef" :disabled="true" :pageType="props.pageType"></shcemeinfo-config>
@@ -86,12 +78,9 @@
   import subprocessOption from './subprocess/index.vue'
   // 线
   import mylineOption from './myline/index.vue'
-  /**
-   * 侧边栏
-   * @Author MiyueFE
-   * @Home https://github.com/miyuesc
-   * @Date 2021年3月31日18:57:51
-   */
+  import { flowStore } from '@/store/modules/flow';
+  const flowWfDataStore = flowStore();
+
   const props = defineProps({
     bpmnModeler: Object,
     prefix: {
@@ -108,7 +97,14 @@
     pageView: String,
 
   })
-
+  watch(
+    () => props.pageView,
+    (newVal, oldVal) => {
+      var content = JSON.parse(newVal)
+      shcemeinfoRef.value.setForm(content)
+      flowWfDataStore.setWfDataAll(content.wfData)
+    }
+  )
   const startRef = ref < any > ()
   const shcemeinfoRef = ref < any > ()
   const authRef = ref < any > ()
@@ -123,92 +119,13 @@
     currentWfNode: undefined,
     wfNodeName: "",
     wfData: [],
-    flowRef: {}
+    activeTab: "base",
+    elementId: "",
+    elementType: "",
+    elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
+    conditionFormVisible: false, // 流转条件设置
+    formVisible: false, // 表单配置
   })
-  watch(
-    () => props.element,
-    (newVal, oldVal) => {
-      console.log(newVal)
-      var typeName = newVal.type.replace('bpmn:', '')
-      if (newVal.type == "bpmn:Process") {
-        data.currentWfNode = {
-          type: newVal.type
-        }
-        configActiveName.value = '2'
-      } else {
-        data.currentWfNode = newVal
-        configActiveName.value = '1'
-        switch (typeName) {
-          case 'StartEvent':
-            data.wfNodeName = "开始节点"
-            data.currentWfNode = {
-              id: newVal.id,
-              type: newVal.type
-            }
-            break;
-          case 'EndEvent':
-            data.wfNodeName = "结束节点"
-            data.currentWfNode = {
-              id: newVal.id,
-              type: newVal.type
-            }
-            break;
-          case 'Task':
-            data.wfNodeName = "审核节点"
-            data.currentWfNode = {
-              id: newVal.id,
-              type: newVal.type
-            }
-            break;
-          case 'SubProcess':
-            data.wfNodeName = "子流程"
-            data.currentWfNode = {
-              id: newVal.id,
-              type: newVal.type
-            }
-            break;
-          case 'ExclusiveGateway':
-            data.wfNodeName = "排他网关"
-            data.currentWfNode = {
-              id: newVal.id,
-              type: newVal.type
-            }
-            break;
-          case 'ParallelGateway':
-            data.wfNodeName = "并行网关"
-            data.currentWfNode = {
-              id: newVal.id,
-              type: newVal.type
-            }
-            break;
-          case 'InclusiveGateway':
-            data.wfNodeName = "包含网关"
-            data.currentWfNode = {
-              id: newVal.id,
-              type: newVal.type
-            }
-            break;
-          case 'SequenceFlow':
-            data.wfNodeName = "线条"
-            data.currentWfNode = {
-              id: newVal.id,
-              type: newVal.type
-            }
-            // 获取线条两头的节点id
-            data.flowRef = {
-              from: newVal.businessObject.sourceRef.id,
-              to: newVal.businessObject.targetRef.id,
-            }
-            // 获取排他网关和审核节点的数据，为选择流转条件使用
-            getWfData()
-            break;
-
-          default:
-            break;
-        }
-      }
-    }
-  )
   const detailInfo = reactive({
     schemeInfo: {},
     startInfor: {},
@@ -217,6 +134,187 @@
     subprocessInfo: {},
     taskInfo: {},
   })
+
+  function initModels() {
+    setTimeout(() => {
+      getActiveElement();
+    }, 10);
+  }
+  function getActiveElement() {
+    // 初始第一个选中元素 bpmn:Process
+    initFormOnChanged(null);
+    props.bpmnModeler.on("import.done", e => {
+      initFormOnChanged(null);
+    });
+    // 监听选择事件，修改当前激活的元素以及表单
+    props.bpmnModeler.on("selection.changed", ({ newSelection }) => {
+      initFormOnChanged(newSelection[0] || null);
+    });
+    props.bpmnModeler.on("element.changed", ({ element }) => {
+      // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
+      if (element && element.id === data.elementId) {
+        initFormOnChanged(element);
+      }
+    });
+  }
+  // 初始化数据
+  function initFormOnChanged(element) {
+    console.log(flowWfDataStore.getWfData)
+    console.log(element)
+    if (element == null) {
+      return
+    }
+    if (element.type == "bpmn:Process") {
+      data.currentWfNode = {
+        type: element.type
+      }
+      configActiveName.value = '2'
+    } else {
+      data.currentWfNode = element
+      configActiveName.value = '1'
+      setNodeData(element.type, element)
+    }
+  }
+  // 设置节点初始数据
+  function setNodeData(name, element) {
+    switch (name) {
+      case 'bpmn:StartEvent':
+        data.wfNodeName = "开始节点"
+        data.currentWfNode = {
+          id: element.id,
+          type: element.type,
+          isNextAuditor: false,
+          isCustmerTitle: false,
+          formRelations: [],
+          formType: "1",
+          formCode: "",
+          formVerison: "",
+          formRelationId: "",
+          formUrl: "",
+          formAppUrl: "",
+          authFields: [],
+          messageType: "",
+          isInit: true
+        }
+        break;
+      case 'bpmn:EndEvent':
+        data.wfNodeName = "结束节点"
+        data.currentWfNode = {
+          id: element.id,
+          type: element.type
+        }
+        break;
+      case 'bpmn:Task':
+        data.wfNodeName = "审核节点"
+        data.currentWfNode = {
+          id: element.id,
+          type: element.type,
+          isAddSign: false,
+          isTransfer: false,
+          isBatchAudit: false,
+          autoAgree: "",
+          noAuditor: "1",
+          rejectType: "1",
+          messageType: "",
+          auditUsers: [],
+          lookUsers: [],
+          formRelations: [],
+          formType: "1",
+          formCode: "",
+          formVerison: "",
+          formRelationId: "",
+          formUrl: "",
+          formAppUrl: "",
+          authFields: [],
+          name: "审核节点",
+          btnlist: [
+            {
+              code: "agree",
+              name: "同意",
+              hidden: false,
+              isNextAuditor: false,
+              isSign: false,
+              isSys: true
+            },
+            {
+              code: "disagree",
+              name: "驳回",
+              hidden: false,
+              isNextAuditor: false,
+              isSign: false,
+              isSys: true
+            }
+          ],
+          isCountersign: false,
+          isCountersignAll: false,
+          countersignAgian: "1",
+          countersignType: "1",
+          countersignAllType: 100,
+          isOvertimeMessage: false,
+          overtimeMessageType: "",
+          overtimeMessageStart: 1,
+          overtimeMessageInterval: 1,
+          overtimeGo: 12,
+          isInherit: true,
+          isInit: true,
+        }
+        break;
+      case 'bpmn:SubProcess':
+        data.wfNodeName = "子流程"
+        data.currentWfNode = {
+          id: element.id,
+          type: element.type,
+          isAsync: false,
+          wfschemeId: '',
+          wfVersionId: '',
+          isInit: true,
+        }
+        break;
+      case 'bpmn:ExclusiveGateway':
+        data.wfNodeName = "排他网关"
+        data.currentWfNode = {
+          id: element.id,
+          type: element.type,
+          conditions: [],
+          isInit: true,
+        }
+        break;
+      case 'bpmn:ParallelGateway':
+        data.wfNodeName = "并行网关"
+        data.currentWfNode = {
+          id: element.id,
+          type: element.type,
+          isInit: true,
+        }
+        break;
+      case 'bpmn:InclusiveGateway':
+        data.wfNodeName = "包含网关"
+        data.currentWfNode = {
+          id: element.id,
+          type: element.type,
+          conditions: [],
+          isInit: true,
+        }
+        break;
+      case 'bpmn:SequenceFlow':
+        data.wfNodeName = "线条"
+        data.currentWfNode = {
+          id: element.id,
+          type: element.type,
+          lineConditions: '',
+          from: element.businessObject.sourceRef.id,
+          isInit: true,
+          to: element.businessObject.targetRef.id,
+        }
+        break;
+
+      default:
+        break;
+    }
+    // 更改flowStore的数据
+    flowWfDataStore.setWfDataNode(data.currentWfNode)
+  }
+
   async function getDetailInfo() {
     let data = await getDetail({ code: props.schemeCode })
     let scheme = JSON.parse(data.scheme.content);
@@ -254,6 +352,7 @@
     };
 
     let wfData = scheme.wfData
+    flowWfDataStore.setWfDataAll(wfData)
     let auth = {
       authType: data.schemeinfo.authType,
       authData: data.schemeAuthList.map(t => {
@@ -268,57 +367,20 @@
     authRef.value.setForm(auth)
   }
 
-  function scriptTaskNodeInit(node) {
-    node.executeType = '1'
-    node.sqlDb = ''
-    node.sqlStr = ''
-    node.sqlStrRevoke = ''
-    node.apiUrl = ''
-    node.apiUrlRevoke = ''
-    node.ioc = ''
-    node.iocRevoke = ''
+  // 数组去重
+  function unique(arr) {
+    let map = new Map()
+    for (let item of arr) {
+      map.set(item.id, item)
+    }
+    return [...map.values()]
+  }
 
-  }
-  function mylineNodeInit(node) {
-    const wfdata = this.handleGetWFData();
-    const fromNode = wfdata.find(t => t.id == node.from)
-    node.lineConditions = ''
-    if (fromNode.type == 'userTask') {
-      if (fromNode.btnlist.findIndex(t => t.code == 'agree' && !t.hidden) != -1) {
-        node.lineConditions = 'agree' // 流转条件
-      }
-    }
-  }
-  async function getWfData() {
-    let wfData = []
-    // 排他网关exclusiveGatewayRef
-    // 审核节点taskRef
-    let taskFrom = await !(taskRef.value) ? {} : taskRef.value.getForm();
-    let gatewayInclusiveFrom = await !(exclusiveGatewayRef.value) ? {} : exclusiveGatewayRef.value.getForm();
-    if (gatewayInclusiveFrom != undefined) {
-      wfData.push(gatewayInclusiveFrom)
-    }
-    if (taskFrom != undefined) {
-      wfData.push(taskFrom)
-    }
-    // 3.流程节点信息
-    wfData.forEach(node => {
-      if (node.type == 'myline' && !node.isInit) {
-        node.isInit = true
-        node.lineConditions = ''
-        const fromNode = this.wfData.find(t => t.id == node.from)
-        if (fromNode.type == 'userTask') {
-          if (fromNode.btnlist.findIndex(t => t.code == 'agree' && !t.hidden) != -1) {
-            node.lineConditions = 'agree' // 流转条件
-          }
-        }
-      }
-    });
-    data.wfData = wfData
-
-  }
   async function validatePanel() {
     let res = await shcemeinfoRef.value.validateForm();
+    if(!res){
+      configActiveName.value = '2'
+    }
     return res
   }
   async function getPanel() {
@@ -326,68 +388,51 @@
     let baseinfo = await shcemeinfoRef.value.getForm();
     // 2.获取流程权限信息
     let auth = await authRef.value.getForm();
-    if (startRef.value == undefined) {
+    let wfData = flowWfDataStore.getWfData
+    var startIndex = (wfData || []).findIndex((element) => element.type == 'bpmn:StartEvent');
+    if (startIndex == -1) {
       return createMessage.warn('请设置开始节点');
     }
-    if (endRef.value == undefined) {
+    var endIndex = (wfData || []).findIndex((element) => element.type == 'bpmn:EndEvent');
+    if (endIndex == -1) {
       return createMessage.warn('请设置结束节点');
     }
-    let startFrom = await startRef.value.getForm();
-    let endFrom = await endRef.value.getForm();
-    if (endFrom.id == '') {
-      return createMessage.warn('请设置结束节点');
-    }
-    let wfData = []
-    wfData.push(startFrom)
-    wfData.push(endFrom)
-    // 审核节点
-    let taskFrom = await !(taskRef.value) ? {} : taskRef.value.getForm();
-    if (taskFrom != undefined) {
-      if (taskFrom.id != '') {
-        wfData.push(taskFrom)
-      }
-    }
-    // 子流程
-    let subprocessFrom = await !(subprocessRef.value) ? {} : subprocessRef.value.getForm();
-    if (subprocessFrom != undefined) {
-      if (subprocessFrom.id != '') {
-        wfData.push(subprocessFrom)
-      }
-    }
-    // 排他网关
-    let gatewayInclusiveFrom = await !(exclusiveGatewayRef.value) ? {} : exclusiveGatewayRef.value.getForm();
-    if (gatewayInclusiveFrom != undefined) {
-      if (gatewayInclusiveFrom.id != '') {
-        wfData.push(gatewayInclusiveFrom)
-      }
-    }
-    // 并排网关
-    let parallelGatewayFrom = await !(parallelGatewayRef.value) ? {} : parallelGatewayRef.value.getForm();
-    if (parallelGatewayFrom != undefined) {
-      if (parallelGatewayFrom.id != '') {
-        wfData.push(parallelGatewayFrom)
-      }
-    }
-    // 包含网关
-    let inclusiveGatewayFrom = await !(inclusiveGatewayRef.value) ? {} : inclusiveGatewayRef.value.getForm();
-    if (inclusiveGatewayFrom != undefined) {
-      if(inclusiveGatewayFrom.id != ''){
-        wfData.push(inclusiveGatewayFrom)
-      }
-    }
-    console.log(wfData)
-    // 3.流程节点信息
     wfData.forEach(node => {
-      if (node.type == 'myline' && !node.isInit) {
+      if (node.type == "bpmn:SequenceFlow" && !node.isInit) {
         node.isInit = true
         node.lineConditions = ''
-        const fromNode = wfData.find(t => t.id == node.from)
-        if (fromNode.type == 'userTask') {
+        const fromNode = wfData.find(t => t.id === node.from)
+        if (fromNode.type == 'bpmn:Task') {
           if (fromNode.btnlist.findIndex(t => t.code == 'agree' && !t.hidden) != -1) {
             node.lineConditions = 'agree' // 流转条件
           }
         }
       }
+      if(node.type == 'bpmn:StartEvent'){
+        if(node.messageType instanceof Array){
+          if(node.messageType.length == 1){
+            node.messageType = node.messageType[0]
+          }else{
+            node.messageType=node.messageType.join(',')
+          }
+        }
+      }
+      if(node.type == 'bpmn:Task'){
+        if(node.overtimeMessageType instanceof Array){
+          if(node.overtimeMessageType.length == 1){
+            node.overtimeMessageType = node.overtimeMessageType[0]
+          }else{
+            node.overtimeMessageType=node.overtimeMessageType.join(',')
+          }
+        }
+        if(node.messageType instanceof Array){
+          if(node.messageType.length == 1){
+            node.messageType = node.messageType[0]
+          }else{
+            node.messageType=node.messageType.join(',')
+          }
+        }
+      }
     });
 
     let scheme = {
@@ -447,12 +492,15 @@
     validatePanel
   })
   onMounted(() => {
+    initModels()
     if (props.schemeCode) {
       getDetailInfo()
     }
+    console.log(props)
     if (props.pageType == 'detail') {
       var content = JSON.parse(props.pageView)
       shcemeinfoRef.value.setForm(content)
+      flowWfDataStore.setWfDataAll(content.wfData)
     }
   })
 
diff --git a/src/components/ProcessDesigner/package/penal/auth/index.vue b/src/components/ProcessDesigner/package/penal/auth/index.vue
index 1b6c8d8..1ada2f3 100644
--- a/src/components/ProcessDesigner/package/penal/auth/index.vue
+++ b/src/components/ProcessDesigner/package/penal/auth/index.vue
@@ -15,15 +15,20 @@
                 </a-space>
                 <a-table size="small" :columns="columns" :data-source="dataSource" bordered :pagination="false">
                     <template #bodyCell="{ column, text, record }">
-                        <template v-if="['name', 'type'].includes(column.dataIndex)">
+                        <template v-if="['name'].includes(column.dataIndex)">
                             <div>
                                 {{ text }}
                             </div>
                         </template>
+                        <template v-else-if="[ 'type'].includes(column.dataIndex)">
+                            <div>
+                                {{ typeFormat(text) }}
+                            </div>
+                        </template>
                         <template v-else-if="column.dataIndex === 'operation'">
-                            <a-popconfirm v-if="dataSource.length" title="Sure to delete?"
-                                @confirm="onDelete(record.key)">
-                                <a>Delete</a>
+                            <a-popconfirm v-if="dataSource.length" title="确定要删除吗？"
+                                @confirm="onDelete(record.name)">
+                                <delete-outlined two-tone-color='#eb2f96' />
                             </a-popconfirm>
                         </template>
                     </template>
@@ -47,6 +52,7 @@
     let authType = ref("1")
     import { cloneDeep } from 'lodash-es';
     import type { UnwrapRef } from 'vue';
+    import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
     import SelectPos from '@/components/SelectPos/index.vue';
     import SelectRole from '@/components/SelectRole/index.vue';
     import SelectAccount from '@/components/SelectAccount/index.vue';
@@ -65,23 +71,33 @@
         },
 
     ];
-    let dataSource = ref([
-        {
-            id: 0,
-            name: "王五",
-            type: "管理员",
-        },
-        {
-            id: 1,
-            name: "王五",
-            type: "管理员",
-        },
-    ])
+    let dataSource = ref([])
     const data = reactive({
         postOpen: false,
         roleOpen: false,
         accountOpen: false,
     })
+    function typeFormat(type) {
+        type=type.toString()
+        switch (type) {
+            case '1':
+                return '岗位'
+            case '2':
+                return '角色'
+            case '3':
+                return '用户'
+            case '4':
+                return '上下级'
+            case '5':
+                return '节点'
+            case '6':
+                return '表字段'
+        }
+    }
+    function addTableData(selectData) {
+        let addData = selectData.filter(t => dataSource.value.findIndex(t2 => t2.id == t.id) == -1);
+        dataSource.value = dataSource.value.concat(addData);
+    }
     // 岗位
     const posRef = ref < any > ()
 
@@ -89,7 +105,11 @@
         data.postOpen = true;
     }
     function postHandleOk() {
-        console.log(roleRef.value.getRow())
+        let selectData = posRef.value.getRow().map(t => {
+            return { type: '1', id: t.id, name: t.name }
+        });
+        addTableData(selectData);
+        data.postOpen = false;
     }
     // 角色
     const roleRef = ref < any > ()
@@ -98,7 +118,9 @@
         data.roleOpen = true;
     }
     function roleHandleOk() {
-        console.log(roleRef.value.getRow())
+        let selectData = roleRef.value.getRow().map(t => { return { type: '2', id: t.id, name: t.name, condition: '' } });
+        addTableData(selectData);
+        data.roleOpen = false;
     }
     // 用户
     const accountRef = ref < any > ()
@@ -107,11 +129,17 @@
         data.accountOpen = true;
     }
     function accountHandleOk() {
-        console.log(accountRef.value.getRow())
+        let selectData = accountRef.value.getRow().map(t => { return { type: '3', id: t.id, name: t.name } });
+        addTableData(selectData);
+        data.accountOpen = false;
     }
-    function setForm(data){
-        authType.value = data.authType
-        dataSource.value =data.authData
+    function onDelete(key) {
+            dataSource.value = dataSource.value.filter(item => item.name !== key);
+    }
+    function setForm(data) {
+        console.log(data)
+        authType.value = data.authType.toString()
+        dataSource.value = data.authData
     }
     function getForm() {
         return {
diff --git a/src/components/ProcessDesigner/package/penal/endEvent/index.vue b/src/components/ProcessDesigner/package/penal/endEvent/index.vue
index 80cc7ac..7a69914 100644
--- a/src/components/ProcessDesigner/package/penal/endEvent/index.vue
+++ b/src/components/ProcessDesigner/package/penal/endEvent/index.vue
@@ -1,7 +1,7 @@
 <!-- 开始节点配置 -->
 <template>
   <div class="end-event">
-    <a-form ref="formRef" :model="node" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
+    <a-form ref="formRef" :model="node" labelAlign="left" :disabled="data.componentDisabled" :label-col="labelCol" :wrapper-col="wrapperCol">
       <a-form-item label="节点标识">
         <a-input v-model:value="node.id" placeholder="请输入" readonly />
       </a-form-item>
@@ -11,24 +11,31 @@
 
 <script lang="ts" setup>
   import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
-
-  const node = reactive({
-    id: ""
-  })
+  import { flowStore } from '@/store/modules/flow';
+  const flowWfDataStore = flowStore();
+  const node = ref({})
   const props = defineProps({
-    element: Object
+    element: Object,
+    pageType:String
   })
   watch(
     () => props.element,
     (newVal, oldVal) => {
       if(newVal.type == "bpmn:EndEvent"){
-        node.id = newVal.id
-        node.type = newVal.type
+        const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
+        if (currentNode) {
+          node.value = currentNode
+        } else {
+          node.value = newVal
+        }
       }
     }
   )
   const labelCol = { span: 7 };
   const wrapperCol = { span: 17 };
+  const data=reactive({
+    componentDisabled: props.pageType == 'detail' ? true : false
+  })
   function getForm() {
     return node
   }
diff --git a/src/components/ProcessDesigner/package/penal/exclusiveGateway/index.vue b/src/components/ProcessDesigner/package/penal/exclusiveGateway/index.vue
index 556c4f3..32a9aab 100644
--- a/src/components/ProcessDesigner/package/penal/exclusiveGateway/index.vue
+++ b/src/components/ProcessDesigner/package/penal/exclusiveGateway/index.vue
@@ -17,14 +17,19 @@
             </a-space>
             <a-table :columns="data.columns" :data-source="node.conditions" bordered :pagination="false">
                 <template #bodyCell="{ column, text, record }">
-                    <template v-if="['name', 'type'].includes(column.dataIndex)">
+                    <template v-if="['name'].includes(column.dataIndex)">
                         <div>
                             {{ text }}
                         </div>
                     </template>
+                    <template v-else-if="['type'].includes(column.dataIndex)">
+                        <div>
+                            {{ typeFormat(text) }}
+                        </div>
+                    </template>
                     <template v-else-if="column.dataIndex === 'operation'">
-                        <a-button>编辑</a-button>
-                        <a-button danger @click='onDelete(record.name,false)'>删除</a-button>
+                        <a-button @click="onEdit(record)" size="small">编辑</a-button>
+                        <a-button danger @click='onDelete(record.id)' size="small" class="ml-2">删除</a-button>
                     </template>
                 </template>
             </a-table>
@@ -43,81 +48,53 @@
     import conditionSql from './src/conditionSql.vue'
     import { getDetail } from '@/api/sys/WFSchemeInfo'
     import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
+    import { buildGUID } from '@/utils/uuid';
+    import { flowStore } from '@/store/modules/flow';
+    const flowWfDataStore = flowStore();
     const labelCol = { span: 7 };
     const wrapperCol = { span: 17 };
     const conditionFormulaRef = ref < any > ()
     const conditionSqlRef = ref < any > ()
     const props = defineProps({
         element: Object,
-        schemeCode: String,
         pageType: String,
-        pageView: String,
-    })
-    const node = ref({
-        conditions: [],
-        id: ''
     })
+    const node = ref({})
     watch(
         () => props.element,
         (newVal, oldVal) => {
             if (newVal.type == "bpmn:ExclusiveGateway") {
-                node.value.id = newVal.id
-                node.value.type = newVal.type
-                if (props.pageType == 'detail') {
-                    getNode()
-                }
-                if (props.schemeCode) {
-                    getDetailInfo()
+                const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
+                if (currentNode) {
+                    node.value = currentNode
+                } else {
+                    node.value = newVal
                 }
             }
         }
     )
 
     const data = reactive({
-        tableBtns: [
-            { prop: 'Edit', label: '编辑' },
-            { prop: 'Delete', label: '删除' }
-        ],
         columns: [
             { title: '类型', dataIndex: 'type' },
-            { title: '名称', dataIndex: 'name' },
+            { title: '名称', dataIndex: 'name', width: '40%' },
+            { title: '操作', dataIndex: 'operation' }
         ],
         tableData: [],
-
         formulaVisible: false,
         sqlVisible: false,
-
         editRow: null,
+        isEdit: false,
         rowIndex: 0,
-    componentDisabled: props.pageType == 'detail' ? true : false
+        componentDisabled: props.pageType == 'detail' ? true : false
 
     })
-    function getNode() {
-        var content = JSON.parse(props.pageView)
-        content.wfData.forEach(element => {
-            if (element.id == node.value.id) {
-                node.value = element
-            }
-        });
-    }
-    async function getDetailInfo() {
-        let data = await getDetail({ code: props.schemeCode })
-        let scheme = JSON.parse(data.scheme.content);
-        let wfData = scheme.wfData
-        wfData.forEach(element => {
-            if (element.id == node.value.id) {
-                node.value = element
-            }
-        });
-
+    function updateWfData(key) {
+        flowWfDataStore.updataWfDataNode(node.value.id, key, node.value[key])
     }
+   
     onMounted(() => {
-        if (props.schemeCode) {
-            getDetailInfo()
-        }
-        if (props.pageType == 'detail') {
-            getNode()
-        }
+      
     })
     function typeFormat(type) {
         switch (type) {
@@ -130,39 +107,80 @@
 
     function handleFormulaClick() {
         data.formulaVisible = true;
+        data.isEdit = false
+        conditionFormulaRef.value.setForm({
+            dbCode: '',
+            table: '',
+            columns: [],
+            rfield: '',
+            cfield: '',
+            compareType: '',
+            value: '',
+            name: ''
+        })
     }
     function handleSQlClick() {
         data.sqlVisible = true;
+        data.isEdit = false
+        conditionSqlRef.value.setForm({
+            name: '',
+            dbCode: '',
+            sql: '',
+        })
     }
     function handleClearClick() {
-        node.conditions = [];
+        node.value.conditions = [];
     }
     async function handleFormulaOk() {
         conditionFormulaRef.value.validateForm()
         let obj = conditionFormulaRef.value.getForm()
-        if (obj.name == '' || obj.dbCode == '' || obj.sql == '') {
+        obj.type = '1';
+        if (obj.name == '' || obj.table == '' || obj.value == '' || obj.rfield == '' || obj.cfield == '' || obj.compareType == '') {
             data.formulaVisible = true;
-        }else{
+        } else {
+            if (data.isEdit) {
+                node.value.conditions[data.rowIndex] = obj;
+            } else {
+                obj.code = buildGUID();
+                node.value.conditions.push(obj);
+            }
             data.formulaVisible = false;
         }
 
     }
     function handleSqlOk() {
-        console.log(conditionSqlRef.value.getForm())
-        // this.sqlVisible = false;
         conditionSqlRef.value.validateForm()
         let obj = conditionSqlRef.value.getForm()
-        if (obj.name == '' || obj.table == '' || obj.value == '' || obj.rfield == '' || obj.cfield == '' || obj.compareType == '') {
-            data.formulaVisible = true;
-        }else{
-            data.formulaVisible = false;
+        obj.type = '2';
+        if (obj.name == '' || obj.dbCode == '' || obj.sql == '') {
+            data.sqlVisible = true;
+        } else {
+            if (data.isEdit) {
+                node.value.conditions[data.rowIndex] = obj;
+            } else {
+                obj.code = buildGUID();
+                node.value.conditions.push(obj);
+            }
+            data.sqlVisible = false;
         }
     }
-    function getForm() {
-        return node.value
+    function onEdit(record) {
+        data.isEdit = true
+        if (data.type == 1) {
+            data.formulaVisible = true;
+            conditionFormulaRef.value.setForm(record)
+        } else {
+            data.sqlVisible = true;
+            conditionSqlRef.value.setForm(record)
+        }
     }
+    function onDelete(id) {
+        let list = node.value.conditions
+        var currentIndex = (list || []).findIndex((element) => element.id == id);
+        node.value.conditions.splice(currentIndex, 1)
+    }
+   
     defineExpose({
-        getForm
     })
 </script>
 
diff --git a/src/components/ProcessDesigner/package/penal/exclusiveGateway/src/conditionFormula.vue b/src/components/ProcessDesigner/package/penal/exclusiveGateway/src/conditionFormula.vue
index bdf32dc..eb6f67f 100644
--- a/src/components/ProcessDesigner/package/penal/exclusiveGateway/src/conditionFormula.vue
+++ b/src/components/ProcessDesigner/package/penal/exclusiveGateway/src/conditionFormula.vue
@@ -5,17 +5,12 @@
             <a-form-item label="条件名称" name="name">
                 <a-input v-model:value="formData.name" placeholder="请输入" />
             </a-form-item>
-            <!-- <a-form-item label="数据库" name="dbCode">
-                <a-select v-model:value="formData.dbCode" placeholder="请选择" :options="data.options">
-                    <el-option-group v-for="group in lr_dblinkTree" :key="group.id" :label="group.label">
-                        <el-option v-for="item in group.children" :key="item.id" :label="item.label" :value="item.id">
-                        </el-option>
-                    </el-option-group>
+            <a-form-item label="数据库" name="dbCode">
+                <a-select v-model:value="formData.dbCode" placeholder="请选择" :options="sqlOptions"
+                :field-names="{ label: 'text', value: 'id',options :'childNodes' }">
                 </a-select>
-            </a-form-item> -->
+            </a-form-item>
             <a-form-item label="数据表" name="table">
-                <!-- <a-select v-model:value="formData.table" placeholder="请选择" :options="formData.columns">
-                </a-select> -->
                 <a-space>
                     <a-input v-model:value="formData.table" placeholder="请输入" readonly />
                     <a-button @click="handleTableClick">选择</a-button>
@@ -37,8 +32,8 @@
                 <a-input v-model:value="formData.value" placeholder="请输入" />
             </a-form-item>
         </a-form>
-        <a-modal width="60%" height="80%" v-model:open="data.tableOpen" title="选择数据表" @ok="tableHandleOk">
-            <SelectTable ref="tableRef"></SelectTable>
+        <a-modal width="60%"  wrap-class-name="full-modal" v-model:open="data.tableOpen" title="选择数据表" @ok="tableHandleOk">
+            <SelectTable ref="tableRef" :dbCode = 'formData.dbCode'></SelectTable>
         </a-modal>
     </div>
 </template>
@@ -46,11 +41,13 @@
     import { reactive, ref, onMounted } from 'vue'
     import SelectTable from '@/components/SelectTable/index.vue'
     import { getTableForms } from '@/api/sys/flowPenal'
+    import { getLoadDataBaseLinkTree } from '@/api/demo/system';
 
     const labelCol = { span: 5 };
     const wrapperCol = { span: 17 };
     const formRef = ref < any > ()
     const tableRef = ref < any > ()
+    const sqlOptions =ref([])
 
     const data = reactive({
         rules: {
@@ -100,6 +97,15 @@
         value: '',
         name: ''
     })
+    async function getSQL(){
+        const data = await getLoadDataBaseLinkTree()
+        data.forEach(element => {
+            if(element.childNodes == null){
+                element.childNodes = []
+            }
+        });
+        sqlOptions.value = data
+    }
     function handleTableClick() {
         data.tableOpen = true
     }
@@ -113,13 +119,16 @@
     // 选择数据表，把获取表头
     async function handleTableChange(table) {
         var querys = {
-            dbCode: 'lrsystemdb',
+            dbCode: formData.value.dbCode,
             tableNames: table
         }
         console.log(querys)
         const data = await getTableForms(querys)
         console.log(data);
     }
+    function setForm(data){
+        formData.value = data
+    }
     // 校验表单
     function validateForm() {
         formRef.value
@@ -131,20 +140,36 @@
                 return false
             });
     }
-    function setForm(data) {
-        this.formData = this.$deepClone(data);
-    }
     function getForm() {
         return formData.value;
     }
 
     defineExpose({
         validateForm,
-        getForm
+        getForm,
+        setForm
     })
+    onMounted(() => {
+        getSQL()
+    });
 </script>
 <style scoped>
     .l-from-body {
         padding: 10px 30px;
     }
+</style>
+<style lang="less">
+    .full-modal {
+        .ant-modal {
+            max-width: 100%;
+        }
+
+        .ant-modal-content {
+            height: calc(80vh);
+        }
+
+        .ant-modal-body {
+            height: 80%;
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/exclusiveGateway/src/conditionSql.vue b/src/components/ProcessDesigner/package/penal/exclusiveGateway/src/conditionSql.vue
index 26c5d89..049f2fe 100644
--- a/src/components/ProcessDesigner/package/penal/exclusiveGateway/src/conditionSql.vue
+++ b/src/components/ProcessDesigner/package/penal/exclusiveGateway/src/conditionSql.vue
@@ -6,11 +6,8 @@
                 <a-input v-model:value="formData.name" placeholder="请输入" />
             </a-form-item>
             <a-form-item label="数据库" name="dbCode">
-                <a-select v-model:value="formData.dbCode" placeholder="请选择" :options="data.options">
-                    <el-option-group v-for="group in lr_dblinkTree" :key="group.id" :label="group.label">
-                        <el-option v-for="item in group.children" :key="item.id" :label="item.label" :value="item.id">
-                        </el-option>
-                    </el-option-group>
+                <a-select v-model:value="formData.dbCode" placeholder="请选择" :options="sqlOptions"
+                :field-names="{ label: 'text', value: 'id',options :'childNodes' }">
                 </a-select>
             </a-form-item>
             <a-form-item label="SQL语句" name="sql">
@@ -20,11 +17,13 @@
     </div>
 </template>
 <script lang="ts" setup>
-    import { reactive, ref } from 'vue'
+    import { reactive, ref ,onMounted} from 'vue'
+    import { getLoadDataBaseLinkTree } from '@/api/demo/system';
     const labelCol = { span: 5 };
     const wrapperCol = { span: 17 };
     const formRef = ref < any > ()
-    const formData = reactive({
+
+    const formData = ref({
         name: '',
         dbCode: '',
         sql: '',
@@ -43,6 +42,19 @@
             ]
         },
     })
+    const sqlOptions =ref([])
+    async function getSQL(){
+        const data = await getLoadDataBaseLinkTree()
+        data.forEach(element => {
+            if(element.childNodes == null){
+                element.childNodes = []
+            }
+        });
+        sqlOptions.value = data
+    }
+    function setForm(data){
+        formData.value = data
+    }
     // 校验表单
     function validateForm() {
         formRef.value
@@ -59,8 +71,12 @@
     }
     defineExpose({
         getForm,
-        validateForm
+        validateForm,
+        setForm
     })
+    onMounted(() => {
+        getSQL()
+    });
 </script>
 <style scoped>
     .l-from-body {
diff --git a/src/components/ProcessDesigner/package/penal/inclusiveGateway/index.vue b/src/components/ProcessDesigner/package/penal/inclusiveGateway/index.vue
index c62d6e6..42b41c0 100644
--- a/src/components/ProcessDesigner/package/penal/inclusiveGateway/index.vue
+++ b/src/components/ProcessDesigner/package/penal/inclusiveGateway/index.vue
@@ -1,177 +1,198 @@
 <template>
-  <div class="user-task">
-      <a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
-          :wrapper-col="wrapperCol" :disabled="data.componentDisabled">
-          <a-form-item label="节点标识">
-              <a-input v-model:value="node.id" placeholder="请输入" readonly />
-          </a-form-item>
-          <a-alert message="包容网关说明"
-              description="包容网关会等待所有分支汇入才往下执行，出口分支能执行多条（条件为true）" type="info"
-              show-icon />
-          <a-space>
-              <a-radio-group>
-                  <a-radio-button value="1" @click="handleFormulaClick">公式</a-radio-button>
-                  <a-radio-button value="2" @click="handleSQlClick">sql语句</a-radio-button>
-              </a-radio-group>
-              <a-button danger :size="size" @click="handleClearClick">清空</a-button>
-          </a-space>
-          <a-table :columns="data.columns" :data-source="node.conditions" bordered :pagination="false">
-              <template #bodyCell="{ column, text, record }">
-                  <template v-if="['name', 'type'].includes(column.dataIndex)">
-                      <div>
-                          {{ text }}
-                      </div>
-                  </template>
-                  <template v-else-if="column.dataIndex === 'operation'">
-                      <a-button>编辑</a-button>
-                      <a-button danger @click='onDelete(record.name,false)'>删除</a-button>
-                  </template>
-              </template>
-          </a-table>
-      </a-form>
-      <a-modal width="40%" v-model:open="data.formulaVisible" title="添加公式条件" @ok="handleFormulaOk">
-          <conditionFormula ref="conditionFormulaRef"></conditionFormula>
-      </a-modal>
-      <a-modal width="40%" v-model:open="data.sqlVisible" title="添加sql条件" @ok="handleSqlOk">
-          <conditionSql ref="conditionSqlRef"></conditionSql>
-      </a-modal>
-  </div>
+    <div class="user-task">
+        <a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
+            :wrapper-col="wrapperCol" :disabled="data.componentDisabled">
+            <a-form-item label="节点标识">
+                <a-input v-model:value="node.id" placeholder="请输入" readonly />
+            </a-form-item>
+            <a-alert message="包容网关说明" description="包容网关会等待所有分支汇入才往下执行，出口分支能执行多条（条件为true）" type="info" show-icon />
+            <a-space>
+                <a-radio-group>
+                    <a-radio-button value="1" @click="handleFormulaClick">公式</a-radio-button>
+                    <a-radio-button value="2" @click="handleSQlClick">sql语句</a-radio-button>
+                </a-radio-group>
+                <a-button danger :size="size" @click="handleClearClick">清空</a-button>
+            </a-space>
+            <a-table :columns="data.columns" :data-source="node.conditions" bordered :pagination="false">
+                <template #bodyCell="{ column, text, record }">
+                    <template v-if="['name'].includes(column.dataIndex)">
+                        <div>
+                            {{ text }}
+                        </div>
+                    </template>
+                    <template v-else-if="['type'].includes(column.dataIndex)">
+                        <div>
+                            {{ typeFormat(text) }}
+                        </div>
+                    </template>
+                    <template v-else-if="column.dataIndex === 'operation'">
+                        <a-button @click="onEdit(record)" size="small">编辑</a-button>
+                        <a-button danger @click='onDelete(record.id)' size="small" class="ml-2">删除</a-button>
+                    </template>
+                </template>
+            </a-table>
+        </a-form>
+        <a-modal width="40%" v-model:open="data.formulaVisible" title="添加公式条件" @ok="handleFormulaOk">
+            <conditionFormula ref="conditionFormulaRef"></conditionFormula>
+        </a-modal>
+        <a-modal width="40%" v-model:open="data.sqlVisible" title="添加sql条件" @ok="handleSqlOk">
+            <conditionSql ref="conditionSqlRef"></conditionSql>
+        </a-modal>
+    </div>
 </template>
 
 <script lang="ts" setup>
-  import conditionFormula from '../exclusiveGateway/src/conditionFormula.vue'
-  import conditionSql from '../exclusiveGateway/src/conditionSql.vue'
-  import { getDetail } from '@/api/sys/WFSchemeInfo'
-  import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
-  const labelCol = { span: 7 };
-  const wrapperCol = { span: 17 };
-  const conditionFormulaRef = ref < any > ()
-  const conditionSqlRef = ref < any > ()
-  const props = defineProps({
-      element: Object,
-      schemeCode: String,
-      pageType: String,
-      pageView: String,
-  })
-  const node = ref({
-      conditions: [],
-      id: ''
-  })
-  watch(
-      () => props.element,
-      (newVal, oldVal) => {
-          if (newVal.type == "bpmn:ExclusiveGateway") {
-              node.value.id = newVal.id
-              node.value.type = newVal.type
-              if (props.pageType == 'detail') {
-                  getNode()
-              }
-              if (props.schemeCode) {
-                  getDetailInfo()
-              }
-          }
-      }
-  )
+    import conditionFormula from '../exclusiveGateway/src/conditionFormula.vue'
+    import conditionSql from '../exclusiveGateway/src/conditionSql.vue'
+    import { getDetail } from '@/api/sys/WFSchemeInfo'
+    import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
+    import { buildGUID } from '@/utils/uuid';
+    import { flowStore } from '@/store/modules/flow';
+    const flowWfDataStore = flowStore();
+    const labelCol = { span: 7 };
+    const wrapperCol = { span: 17 };
+    const conditionFormulaRef = ref < any > ()
+    const conditionSqlRef = ref < any > ()
+    const props = defineProps({
+        element: Object,
+        schemeCode: String,
+        pageType: String,
+        pageView: String,
+    })
+    const node = ref({
+        conditions: [],
+        id: ''
+    })
+    watch(
+        () => props.element,
+        (newVal, oldVal) => {
+            if (newVal.type == "bpmn:InclusiveGateway") {
+                const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
+                if (currentNode) {
+                    node.value = currentNode
+                } else {
+                    node.value = newVal
+                }
+            }
+        }
+    )
 
-  const data = reactive({
-      tableBtns: [
-          { prop: 'Edit', label: '编辑' },
-          { prop: 'Delete', label: '删除' }
-      ],
-      columns: [
-          { title: '类型', dataIndex: 'type' },
-          { title: '名称', dataIndex: 'name' },
-      ],
-      tableData: [],
+    const data = reactive({
+        columns: [
+            { title: '类型', dataIndex: 'type' },
+            { title: '名称', dataIndex: 'name', width: '40%' },
+            { title: '操作', dataIndex: 'operation' }
+        ],
+        tableData: [],
+        formulaVisible: false,
+        sqlVisible: false,
+        editRow: null,
+        rowIndex: 0,
+        isEdit: false,
+        componentDisabled: props.pageType == 'detail' ? true : false
 
-      formulaVisible: false,
-      sqlVisible: false,
+    })
+    function updateWfData(key) {
+        flowWfDataStore.updataWfDataNode(node.value.id, key, node.value[key])
+    }
+    onMounted(() => {
+       
+    })
+    function typeFormat(type) {
+        switch (type) {
+            case '1':
+                return '表达式'
+            case '2':
+                return 'sql语句'
+        }
+    }
 
-      editRow: null,
-      rowIndex: 0,
-  componentDisabled: props.pageType == 'detail' ? true : false
+    function handleFormulaClick() {
+        data.formulaVisible = true;
+        data.isEdit = false
+        conditionFormulaRef.value.setForm({
+            dbCode: '',
+            table: '',
+            columns: [],
+            rfield: '',
+            cfield: '',
+            compareType: '',
+            value: '',
+            name: ''
+        })
+    }
+    function handleSQlClick() {
+        data.sqlVisible = true;
+        data.isEdit = false
+        conditionSqlRef.value.setForm({
+            name: '',
+            dbCode: '',
+            sql: '',
+        })
+    }
+    function handleClearClick() {
+        node.conditions = [];
+    }
+    async function handleFormulaOk() {
+        conditionFormulaRef.value.validateForm()
+        let obj = conditionFormulaRef.value.getForm()
+        obj.type = '1';
+        if (obj.name == '' || obj.table == '' || obj.value == '' || obj.rfield == '' || obj.cfield == '' || obj.compareType == '') {
 
-  })
-  function getNode() {
-      var content = JSON.parse(props.pageView)
-      content.wfData.forEach(element => {
-          if (element.id == node.value.id) {
-              node.value = element
-          }
-      });
-  }
-  async function getDetailInfo() {
-      let data = await getDetail({ code: props.schemeCode })
-      let scheme = JSON.parse(data.scheme.content);
-      let wfData = scheme.wfData
-      wfData.forEach(element => {
-          if (element.id == node.value.id) {
-              node.value = element
-          }
-      });
+            data.formulaVisible = true;
+        } else {
+            if (data.isEdit) {
+                node.value.conditions[data.rowIndex] = obj;
+            } else {
+                obj.code = buildGUID();
+                node.value.conditions.push(obj);
+            }
+            data.formulaVisible = false;
+        }
 
-  }
-  onMounted(() => {
-      if (props.schemeCode) {
-          getDetailInfo()
-      }
-      if (props.pageType == 'detail') {
-          getNode()
-      }
-  })
-  function typeFormat(type) {
-      switch (type) {
-          case '1':
-              return '表达式'
-          case '2':
-              return 'sql语句'
-      }
-  }
-
-  function handleFormulaClick() {
-      data.formulaVisible = true;
-  }
-  function handleSQlClick() {
-      data.sqlVisible = true;
-  }
-  function handleClearClick() {
-      node.conditions = [];
-  }
-  async function handleFormulaOk() {
-      conditionFormulaRef.value.validateForm()
-      let obj = conditionFormulaRef.value.getForm()
-      if (obj.name == '' || obj.dbCode == '' || obj.sql == '') {
-          data.formulaVisible = true;
-      }else{
-          data.formulaVisible = false;
-      }
-
-  }
-  function handleSqlOk() {
-      console.log(conditionSqlRef.value.getForm())
-      // this.sqlVisible = false;
-      conditionSqlRef.value.validateForm()
-      let obj = conditionSqlRef.value.getForm()
-      if (obj.name == '' || obj.table == '' || obj.value == '' || obj.rfield == '' || obj.cfield == '' || obj.compareType == '') {
-          data.formulaVisible = true;
-      }else{
-          data.formulaVisible = false;
-      }
-  }
-  function getForm() {
-      return node.value
-  }
-  defineExpose({
-      getForm
-  })
+    }
+    function handleSqlOk() {
+        conditionSqlRef.value.validateForm()
+        let obj = conditionSqlRef.value.getForm()
+        obj.type = '2';
+        if (obj.name == '' || obj.dbCode == '' || obj.sql == '') {
+            data.sqlVisible = true;
+        } else {
+            if (data.isEdit) {
+                node.value.conditions[data.rowIndex] = obj;
+            } else {
+                obj.code = buildGUID();
+                node.value.conditions.push(obj);
+            }
+            data.sqlVisible = false;
+        }
+    }
+    function onEdit(record) {
+        data.isEdit = true
+        if (data.type == 1) {
+            data.formulaVisible = true;
+            conditionFormulaRef.value.setForm(record)
+        } else {
+            data.sqlVisible = true;
+            conditionSqlRef.value.setForm(record)
+        }
+    }
+    function onDelete(id) {
+        let list = node.value.conditions
+        var currentIndex = (list || []).findIndex((element) => element.id == id);
+        node.value.conditions.splice(currentIndex, 1)
+    }
+  
+    defineExpose({
+    })
 </script>
 
 <style scoped>
-  ::v-deep .ant-alert-info {
-      margin-bottom: 20px;
-  }
+    ::v-deep .ant-alert-info {
+        margin-bottom: 20px;
+    }
 
-  ::v-deep .ant-table-wrapper {
-      margin-top: 20px;
-  }
+    ::v-deep .ant-table-wrapper {
+        margin-top: 20px;
+    }
 </style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/myline/index.vue b/src/components/ProcessDesigner/package/penal/myline/index.vue
index 1336609..7aac712 100644
--- a/src/components/ProcessDesigner/package/penal/myline/index.vue
+++ b/src/components/ProcessDesigner/package/penal/myline/index.vue
@@ -18,114 +18,57 @@
 <script lang="ts" setup>
   import { getDetail } from '@/api/sys/WFSchemeInfo'
   import { ref, reactive, defineProps, onMounted, watch } from 'vue'
+  import { flowStore } from '@/store/modules/flow';
+  const flowWfDataStore = flowStore();
   const props = defineProps({
-    disabled: {
-      type: Boolean,
-      default: false
-    },
     element: Object,
-    schemeCode: String,
-    pageType: String,
-    pageView: String,
-    wfData: {
-      type: Array,
-      default: () => []
-    },
-    flowRef: {
-      type: Object,
-      default: () => ({
-        from: '',
-        to: ''
-      })
-    }
-  })
-  console.log(props)
-  let node = ref({
-    id: "",
-    lineConditions: ''
   })
+  let node = ref({})
   const data = reactive({
     conditionsOptions: [],
-
+    componentDisabled: props.pageType == 'detail' ? true : false
   })
   watch(
     () => props.element,
     (newVal, oldVal) => {
       if (newVal.type == "bpmn:SequenceFlow") {
-        node.value.id = newVal.id
-        node.value.type = newVal.type
+        console.log(props)
+
+        const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
+        if (currentNode) {
+          node.value = currentNode
+        } else {
+          node.value = newVal
+        }
         getConditions()
-        if (props.pageType == 'detail') {
-          getNode()
-        }
-        if (props.schemeCode) {
-          getDetailInfo()
-        }
       }
     }
   )
-
   onMounted(() => {
-    if (props.schemeCode) {
-      getDetailInfo()
-    }
-    if (props.pageType == 'detail') {
-      getNode()
-    }
+   
   })
-  function getNode() {
-    var content = JSON.parse(props.pageView)
-    content.wfData.forEach(element => {
-      if (element.id == node.value.id) {
-        node.value = element
-      }
-    });
-  }
-  async function getDetailInfo() {
-    let data = await getDetail({ code: props.schemeCode })
-    let scheme = JSON.parse(data.scheme.content);
-    let wfData = scheme.wfData
-    wfData.forEach(element => {
-      if (element.id == node.value.id) {
-        node.value = element
-      }
-    });
-
-  }
+ 
   function getConditions() {
+
     /**
        ExclusiveGateway:'排他网关',
        Task:'审核节点',
     */
-    if (props.wfData.length == 0) {
-      return
-    }
-    let wfdata = JSON.parse(JSON.stringify(props.wfData))
+    let wfdata = flowWfDataStore.getWfData
     wfdata.forEach(element => {
-      if (element.id == props.flowRef.from) {
+      if (element.id == node.value.from) {
         if (element.type == 'bpmn:ExclusiveGateway') {
           data.conditionsOptions = element.conditions
         } else if (element.type == 'bpmn:Task') {
           data.conditionsOptions = element.btnlist.filter(t => !t.hidden)
+         
         } else {
           data.conditionsOptions = []
         }
       }
     });
-    console.log(data.conditionsOptions)
   }
 
-
-  function filterValue() {
-    const vlist = this.node.lineConditions.split(',')
-    const res = []
-    vlist.forEach(item => {
-      if (this.conditionsOptions.findIndex(t => t.code == item) != -1) {
-        res.push(item)
-      }
-    })
-    this.node.lineConditions = String(res)
-  }
 </script>
 
 <style>
diff --git a/src/components/ProcessDesigner/package/penal/parallelGateway/index.vue b/src/components/ProcessDesigner/package/penal/parallelGateway/index.vue
index 31f2970..b55bb2f 100644
--- a/src/components/ProcessDesigner/package/penal/parallelGateway/index.vue
+++ b/src/components/ProcessDesigner/package/penal/parallelGateway/index.vue
@@ -1,93 +1,63 @@
 <!-- 开始节点配置 -->
 <template>
-  <div class="user-task">
-      <a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
-          :wrapper-col="wrapperCol" :disabled="data.componentDisabled">
-          <a-form-item label="节点标识">
-              <a-input v-model:value="node.id" placeholder="请输入" readonly />
-          </a-form-item>
-          <a-alert message="并行网关说明"
-              description="并行网关会等待所有分支汇入才往下执行，所有出口分支都会被执行" type="info"
-              show-icon />
-      </a-form>
-    
-  </div>
+    <div class="user-task">
+        <a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
+            :wrapper-col="wrapperCol" :disabled="data.componentDisabled">
+            <a-form-item label="节点标识">
+                <a-input v-model:value="node.id" placeholder="请输入" readonly />
+            </a-form-item>
+            <a-alert message="并行网关说明" description="并行网关会等待所有分支汇入才往下执行，所有出口分支都会被执行" type="info" show-icon />
+        </a-form>
+
+    </div>
 </template>
 
 <script lang="ts" setup>
-  import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
-  import { getDetail } from '@/api/sys/WFSchemeInfo'
-  const labelCol = { span: 7 };
-  const wrapperCol = { span: 17 };
-  const props = defineProps({
-      element: Object,
-      schemeCode: String,
-      pageType: String,
-      pageView: String,
-  })
-  const node = ref({
-      id: ''
-  })
-  watch(
-      () => props.element,
-      (newVal, oldVal) => {
-          if (newVal.type == "bpmn:ParallelGateway") {
-              node.value.id = newVal.id
-              node.value.type = newVal.type
-              if (props.pageType == 'detail') {
-                  getNode()
-              }
-              if (props.schemeCode) {
-                  getDetailInfo()
-              }
-          }
-      }
-  )
+    import { reactive, ref, onMounted, nextTick, unref, h, watch, defineProps } from 'vue';
+    import { getDetail } from '@/api/sys/WFSchemeInfo'
+    import { flowStore } from '@/store/modules/flow';
+    const flowWfDataStore = flowStore();
+    const labelCol = { span: 7 };
+    const wrapperCol = { span: 17 };
+    const props = defineProps({
+        element: Object,
+        schemeCode: String,
+        pageType: String,
+        pageView: String,
+    })
+    const node = ref({})
+    watch(
+        () => props.element,
+        (newVal, oldVal) => {
+            if (newVal.type == "bpmn:ParallelGateway") {
+                const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
+                if (currentNode) {
+                    node.value = currentNode
+                } else {
+                    node.value = newVal
+                }
+            }
+        }
+    )
 
-  const data = reactive({
-    componentDisabled: props.pageType == 'detail' ? true : false
-  })
-  function getNode() {
-      var content = JSON.parse(props.pageView)
-      content.wfData.forEach(element => {
-          if (element.id == node.value.id) {
-              node.value = element
-          }
-      });
-  }
-  async function getDetailInfo() {
-      let data = await getDetail({ code: props.schemeCode })
-      let scheme = JSON.parse(data.scheme.content);
-      let wfData = scheme.wfData
-      wfData.forEach(element => {
-          if (element.id == node.value.id) {
-              node.value = element
-          }
-      });
-
-  }
-  onMounted(() => {
-      if (props.schemeCode) {
-          getDetailInfo()
-      }
-      if (props.pageType == 'detail') {
-          getNode()
-      }
-  })
-  function getForm() {
-      return node.value
-  }
-  defineExpose({
-      getForm
-  })
+    const data = reactive({
+        componentDisabled: props.pageType == 'detail' ? true : false
+    })
+   
+    onMounted(() => {
+       
+    })
+   
+    defineExpose({
+    })
 </script>
 
 <style scoped>
-  ::v-deep .ant-alert-info {
-      margin-bottom: 20px;
-  }
+    ::v-deep .ant-alert-info {
+        margin-bottom: 20px;
+    }
 
-  ::v-deep .ant-table-wrapper {
-      margin-top: 20px;
-  }
+    ::v-deep .ant-table-wrapper {
+        margin-top: 20px;
+    }
 </style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/shcemeInfo/index.vue b/src/components/ProcessDesigner/package/penal/shcemeInfo/index.vue
index 46f206b..8cfb41d 100644
--- a/src/components/ProcessDesigner/package/penal/shcemeInfo/index.vue
+++ b/src/components/ProcessDesigner/package/penal/shcemeInfo/index.vue
@@ -38,9 +38,8 @@
                 <a-tab-pane key="1" tab="执行SQL">
                     <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                         <a-space-compact block>
-                            <a-select v-model:value="formState.undoDbCode" placeholder="请选择执行SQL数据库">
-                                <a-select-option value="shanghai">Zone one</a-select-option>
-                                <a-select-option value="beijing">Zone two</a-select-option>
+                            <a-select v-model:value="formState.undoDbCode" placeholder="请选择执行SQL数据库" :options="sqlOptions"
+                            :field-names="{ label: 'text', value: 'id',options :'childNodes' }">
                             </a-select>
                         </a-space-compact>
                         <a-space-compact block>
@@ -74,9 +73,8 @@
                 <a-tab-pane key="1" tab="执行SQL">
                     <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                         <a-space-compact block>
-                            <a-select v-model:value="formState.deleteDbCode" placeholder="请选择执行SQL数据库">
-                                <a-select-option value="shanghai">Zone one</a-select-option>
-                                <a-select-option value="beijing">Zone two</a-select-option>
+                            <a-select v-model:value="formState.deleteDbCode" placeholder="请选择执行SQL数据库" :options="sqlOptions"
+                            :field-names="{ label: 'text', value: 'id',options :'childNodes' }">
                             </a-select>
                         </a-space-compact>
                         <a-space-compact block>
@@ -110,9 +108,8 @@
                 <a-tab-pane key="1" tab="执行SQL">
                     <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                         <a-space-compact block>
-                            <a-select v-model:value="formState.deleteDraftDbCode" placeholder="请选择执行SQL数据库">
-                                <a-select-option value="shanghai">Zone one</a-select-option>
-                                <a-select-option value="beijing">Zone two</a-select-option>
+                            <a-select v-model:value="formState.deleteDraftDbCode" placeholder="请选择执行SQL数据库" :options="sqlOptions"
+                            :field-names="{ label: 'text', value: 'id',options :'childNodes' }">
                             </a-select>
                         </a-space-compact>
                         <a-space-compact block>
@@ -150,6 +147,8 @@
     import type { Rule } from 'ant-design-vue/es/form';
     import { IconPicker } from '/@/components/Icon';
     import { getLoad } from '@/api/sys/sysDataItemDetail';
+  import { getLoadDataBaseLinkTree } from '@/api/demo/system';
+
     const formRef = ref();
     const labelCol = { span: 7 };
     const wrapperCol = { span: 17 };
@@ -160,8 +159,9 @@
     const data = reactive({
         optionsNotOrOk: [{ label: '允许', value: 1 }, { label: '不允许', value: 2 }],
         optionsType: [],
-        componentDisabled: props.pageType == 'detail' ? true : false
+        componentDisabled: props.pageType == 'detail' ? true : false,
     })
+    const sqlOptions =ref([])
 
     let formState = ref({
         code: '',
@@ -212,6 +212,15 @@
             { required: true, message: '请选择颜色' }
         ],
     };
+    async function getSQL(){
+        const data = await getLoadDataBaseLinkTree()
+        data.forEach(element => {
+            if(element.childNodes == null){
+                element.childNodes = []
+            }
+        });
+        sqlOptions.value = data
+    }
     async function fetch() {
         let list = await getLoad({ code: 'FlowSort' });
         data.optionsType = list
@@ -241,6 +250,7 @@
     })
     onMounted(() => {
         fetch();
+        getSQL()
     });
 </script>
 <style lang="less" scoped>
diff --git a/src/components/ProcessDesigner/package/penal/startEvent/index.vue b/src/components/ProcessDesigner/package/penal/startEvent/index.vue
index 26c5dbd..2c991a4 100644
--- a/src/components/ProcessDesigner/package/penal/startEvent/index.vue
+++ b/src/components/ProcessDesigner/package/penal/startEvent/index.vue
@@ -1,19 +1,19 @@
 <!-- 开始节点配置 -->
 <template>
   <div class="start-event">
-    <a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
-      :wrapper-col="wrapperCol" :disabled="data.componentDisabled">
+    <a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol"
+      :disabled="data.componentDisabled">
       <a-form-item label="节点标识">
         <a-input v-model:value="node.id" placeholder="请输入" readonly />
       </a-form-item>
       <a-form-item label="下一审核人">
-        <a-switch v-model:checked="node.isNextAuditor" />
+        <a-switch v-model:checked="node.isNextAuditor" @change="updateWfData('isNextAuditor')" />
       </a-form-item>
       <a-form-item label="自定义标题">
-        <a-switch v-model:checked="node.isCustmerTitle" />
+        <a-switch v-model:checked="node.isCustmerTitle" @change="updateWfData('isCustmerTitle')" />
       </a-form-item>
       <a-form-item label="通知策略" name="f_Color">
-        <a-checkbox-group v-model:value="node.messageType" name="checkboxgroup"
+        <a-checkbox-group v-model:value="node.messageType" name="checkboxgroup" @change="updateWfData('messageType')"
           :options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" />
       </a-form-item>
       <a-divider plain="true">表单添加</a-divider>
@@ -21,13 +21,18 @@
         <a-tab-pane key="1" tab="自定义表单">
           <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
             <a-space-compact block>
-              <a-select v-model:value="node.formVerison" placeholder="请选择表单版本">
+              <a-input v-model:value="formData.formCode" placeholder="请选择表单" readonly />
+              <a-button >选择</a-button>
+            </a-space-compact>
+            <a-space-compact block>
+              <a-select v-model:value="node.formVerison" placeholder="请选择表单版本" @change="updateWfData('formVerison')">
                 <a-select-option value="shanghai">Zone one</a-select-option>
                 <a-select-option value="beijing">Zone two</a-select-option>
               </a-select>
             </a-space-compact>
             <a-space-compact block>
-              <a-select v-model:value="node.formRelationId" placeholder="请选择流程关联字段">
+              <a-select v-model:value="node.formRelationId" placeholder="请选择流程关联字段"
+                @change="updateWfData('formRelationId')">
                 <a-select-option value="shanghai">Zone one</a-select-option>
                 <a-select-option value="beijing">Zone two</a-select-option>
               </a-select>
@@ -37,10 +42,10 @@
         <a-tab-pane key="2" tab="系统表单">
           <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
             <a-space-compact block>
-              <a-input v-model:value="node.formUrl" placeholder="请输入PC端表单地址" />
+              <a-input v-model:value="node.formUrl" placeholder="请输入PC端表单地址" @change="updateWfData('formUrl')" />
             </a-space-compact>
             <a-space-compact block>
-              <a-input v-model:value="node.formAppUrl" placeholder="请输入APP端表单地址" />
+              <a-input v-model:value="node.formAppUrl" placeholder="请输入APP端表单地址" @change="updateWfData('formAppUrl')" />
             </a-space-compact>
           </a-space>
         </a-tab-pane>
@@ -92,7 +97,8 @@
   import { reactive, defineProps, computed, inject, ref, watch, h, onMounted } from 'vue'
   import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
   import { getDetail } from '@/api/sys/WFSchemeInfo'
-
+  import { flowStore } from '@/store/modules/flow';
+  const flowWfDataStore = flowStore();
   const labelCol = { span: 7 };
   const wrapperCol = { span: 17 };
   const props = defineProps({
@@ -134,41 +140,16 @@
     elementData: props.element,
     componentDisabled: props.pageType == 'detail' ? true : false
   })
-  let node = ref({
-    id: data.elementData.id,
-    type: data.elementData.type,
-    isNextAuditor: false,
-    isCustmerTitle: false,
-    formRelations: [],
-    formType: "1",
-    formCode: "",
-    formVerison: "",
-    formRelationId: "",
-    formUrl: "",
-    formAppUrl: "",
-    authFields: [
-      {
-        label: '测试',
-        field: 'ceshi',
-        required: true,
-        isEdit: true,
-        isLook: true,
-      }
-    ],
-    messageType: "",
-    isInit: true
-  })
+  let node = ref({})
   watch(
     () => props.element,
     (newVal, oldVal) => {
       if (newVal.type == "bpmn:StartEvent") {
-        node.value.id = newVal.id
-        node.value.type = newVal.type
-        if(props.pageType == 'detail'){
-          getNode()
-        }
-        if(props.schemeCode) {
-          getDetailInfo()
+        const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
+        if (currentNode) {
+          node.value = currentNode
+        } else {
+          node.value = newVal
         }
       }
     }
@@ -186,24 +167,8 @@
       }
     }
   )
-  function getNode(){
-    var content = JSON.parse(props.pageView)
-      content.wfData.forEach(element => {
-        if (element.id == node.value.id) {
-          node.value = element
-        }
-      });
-  }
-  async function getDetailInfo() {
-    let data = await getDetail({ code: props.schemeCode })
-    let scheme = JSON.parse(data.scheme.content);
-    let wfData = scheme.wfData
-    wfData.forEach(element => {
-      if (element.id == node.value.id) {
-        node.value = element
-      }
-    });
-
+  function updateWfData(key) {
+    flowWfDataStore.updataWfDataNode(node.value.id, key, node.value[key])
   }
   function handleAddAuthField() {
     node.value.authFields.push({
@@ -217,27 +182,12 @@
   function handleDeleteAuthField(key) {
     node.value.authFields = node.value.authFields.filter(item => item.field !== key);
   }
-  function getForm() {
-    if(node.value.messageType != ""){
-      if(node.value.messageType.length > 1){
-        node.value.messageType = node.value.messageType.join(',')
-  
-      }else{
-        node.value.messageType = node.value.messageType[0]
-      }
-    }
-    return node.value
-  }
+
   defineExpose({
-    getForm
+
   })
   onMounted(() => {
-    if (props.schemeCode) {
-      getDetailInfo()
-    }
-    if (props.pageType == 'detail') {
-      getNode()
-    }
+
   })
 </script>
 <style lang="less" scoped>
diff --git a/src/components/ProcessDesigner/package/penal/subprocess/index.vue b/src/components/ProcessDesigner/package/penal/subprocess/index.vue
index afb127c..303e317 100644
--- a/src/components/ProcessDesigner/package/penal/subprocess/index.vue
+++ b/src/components/ProcessDesigner/package/penal/subprocess/index.vue
@@ -1,7 +1,8 @@
 <!-- 开始节点配置 -->
 <template>
   <div class="subprocess">
-    <a-form ref="formRef" :model="node" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol" :disabled="data.componentDisabled">
+    <a-form ref="formRef" :model="node" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol"
+      :disabled="data.componentDisabled">
       <a-form-item label="节点标识">
         <a-input v-model:value="node.id" placeholder="请输入" readonly />
       </a-form-item>
@@ -9,7 +10,8 @@
         <a-switch v-model:checked="node.isAsync" />
       </a-form-item>
       <a-form-item label="流程模版">
-        <a-select v-model:value="node.wfschemeId" :options="list" @change="changeScheme" :fieldNames="{ value: 'id', label: 'name' }">
+        <a-select v-model:value="node.wfschemeId" :options="list" @change="changeScheme"
+          :fieldNames="{ value: 'id', label: 'name' }">
         </a-select>
       </a-form-item>
       <a-form-item label="流程版本">
@@ -21,22 +23,19 @@
 </template>
 
 <script lang="ts" setup>
-  import { reactive, defineProps, computed, inject, ref, watch, h ,onMounted} from 'vue'
-  import { getDetail ,getLoad,getVerisonsLoad} from '@/api/sys/WFSchemeInfo'
+  import { reactive, defineProps, computed, inject, ref, watch, h, onMounted } from 'vue'
+  import { getDetail, getLoad, getVerisonsLoad } from '@/api/sys/WFSchemeInfo'
+  import { flowStore } from '@/store/modules/flow';
+  const flowWfDataStore = flowStore();
   const labelCol = { span: 7 };
   const wrapperCol = { span: 17 };
   const props = defineProps({
     element: Object,
-    schemeCode:String,
+    schemeCode: String,
     pageType: String,
     pageView: String,
   })
-  let node = ref({
-    id: '',
-    isAsync: false,
-    wfschemeId: '',
-    wfVersionId: '',
-  })
+  let node = ref({})
   const data = reactive({
     componentDisabled: props.pageType == 'detail' ? true : false
   })
@@ -46,57 +45,31 @@
     () => props.element,
     (newVal, oldVal) => {
       if (newVal.type == "bpmn:SubProcess") {
-        node.value.id = newVal.id
-        node.value.type = newVal.type
-        if(props.pageType == 'detail'){
-          getNode()
-        }
-        if(props.schemeCode) {
-          getDetailInfo()
+        const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
+        if (currentNode) {
+          node.value = currentNode
+        } else {
+          node.value = newVal
         }
       }
     }
   )
-  function getNode(){
-    var content = JSON.parse(props.pageView)
-      content.wfData.forEach(element => {
-        if (element.id == node.value.id) {
-          node.value = element
-        }
-      });
-  }
-  async function getSchemeList(){
+ 
+  async function getSchemeList() {
     const data = await getLoad()
     list.value = data
   }
-  async function getDetailInfo() {
-    let data = await getDetail({ code: props.schemeCode })
-    let scheme = JSON.parse(data.scheme.content);
-    let wfData = scheme.wfData
-    wfData.forEach(element => {
-      if(element.id == node.value.id){
-        node.value = element
-      }
-    });
-   
+  
+  async function changeScheme() {
+    const data = await getVerisonsLoad({ id: node.value.wfschemeId })
+    verisons.value = data
   }
- async function changeScheme(){
-  const data = await getVerisonsLoad({id:node.value.wfschemeId})
-  verisons.value = data
- }
   onMounted(() => {
     getSchemeList()
-    if (props.schemeCode) {
-      getDetailInfo()
-    }
+   
   })
-  function getForm() {
-    if (node.value.id != '') {
-      return node.value
-    }
-  }
+ 
   defineExpose({
-    getForm
   })
 </script>
 
diff --git a/src/components/ProcessDesigner/package/penal/userTask/index.vue b/src/components/ProcessDesigner/package/penal/userTask/index.vue
index b38066d..865fbd5 100644
--- a/src/components/ProcessDesigner/package/penal/userTask/index.vue
+++ b/src/components/ProcessDesigner/package/penal/userTask/index.vue
@@ -9,32 +9,35 @@
                         <a-input v-model:value="node.id" placeholder="请输入" readonly />
                     </a-form-item>
                     <a-form-item label="继承表单">
-                        <a-switch v-model:checked="node.isInherit" />
+                        <a-switch v-model:checked="node.isInherit" @change="updateWfData('isInherit')" />
                     </a-form-item>
                     <a-form-item label="允许加签">
-                        <a-switch v-model:checked="node.isAddSign" />
+                        <a-switch v-model:checked="node.isAddSign" @change="updateWfData('isAddSign')" />
                     </a-form-item>
                     <a-form-item label="允许转移">
-                        <a-switch v-model:checked="node.isTransfer" />
+                        <a-switch v-model:checked="node.isTransfer" @change="updateWfData('isTransfer')" />
                     </a-form-item>
                     <a-form-item label="允许批量审核">
-                        <a-switch v-model:checked="node.isBatchAudit" />
+                        <a-switch v-model:checked="node.isBatchAudit" @change="updateWfData('isBatchAudit')" />
                     </a-form-item>
                     <a-form-item label="自动同意规则">
-                        <a-select v-model:value="node.autoAgree" :options="data.atuoAgreeOptions">
+                        <a-select v-model:value="node.autoAgree" :options="data.atuoAgreeOptions"
+                            @change="updateWfData('autoAgree')">
                         </a-select>
                     </a-form-item>
                     <a-form-item label="无对应处理人">
-                        <a-select v-model:value="node.rejectType"
-                            :options="[{value:'1',label:'驳回节点固定'},{value:'2',label:'能驳回到任何执行过节点'}]">
+                        <a-select v-model:value="node.noAuditor" @change="updateWfData('noAuditor')"
+                            :options="data.noAuditorOptions">
                         </a-select>
                     </a-form-item>
                     <a-form-item label="驳回策略">
                         <a-radio-group v-model:value="node.rejectType" name="checkboxgroup"
+                            @change="updateWfData('rejectType')"
                             :options="[{value:'1',label:'驳回节点固定'},{value:'2',label:'能驳回到任何执行过节点'}]" />
                     </a-form-item>
                     <a-form-item label="通知策略">
                         <a-checkbox-group v-model:value="node.messageType" name="checkboxgroup"
+                            @change="updateWfData('messageType')"
                             :options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" />
                     </a-form-item>
                 </a-collapse-panel>
@@ -50,21 +53,29 @@
                         </a-radio-group>
                     </a-space>
                     <a-table size="small" :columns="data.userColumns" :data-source="node.auditUsers" bordered
-                        :pagination="false">
+                        @change="updateWfData('auditUsers')" :pagination="false">
                         <template #bodyCell="{ column, text, record }">
-                            <template v-if="['name', 'type'].includes(column.dataIndex)">
+                            <template v-if="['name'].includes(column.dataIndex)">
                                 <div>
                                     {{ text }}
                                 </div>
                             </template>
+                            <template v-else-if="[ 'type'].includes(column.dataIndex)">
+                                <div>
+                                    {{ typeFormat(text) }}
+                                </div>
+                            </template>
                             <template v-else-if="['condition'].includes(column.dataIndex)">
                                 <div>
-                                    <a-select v-model:value="record[column.dataIndex]" :options="data.conditionOptions">
+                                    <a-select v-model:value="record[column.dataIndex]" :options="data.conditionOptions"
+                                        v-if="record.type == '2'">
                                     </a-select>
                                 </div>
                             </template>
                             <template v-else-if="column.dataIndex === 'operation'">
-                                <delete-outlined two-tone-color='#eb2f96' @click='onDelete(record.name,false)' />
+                                <a-popconfirm title="确定要删除吗？" @confirm="onDelete(record.name,false)">
+                                    <delete-outlined two-tone-color='#eb2f96' />
+                                </a-popconfirm>
                             </template>
                         </template>
                     </a-table>
@@ -83,35 +94,43 @@
                     <a-table size="small" :columns="data.userColumns" :data-source="node.lookUsers" bordered
                         :pagination="false">
                         <template #bodyCell="{ column, text, record }">
-                            <template v-if="['name', 'type'].includes(column.dataIndex)">
+                            <template v-if="['name'].includes(column.dataIndex)">
                                 <div>
                                     {{ text }}
                                 </div>
                             </template>
+                            <template v-else-if="[ 'type'].includes(column.dataIndex)">
+                                <div>
+                                    {{ typeFormat(text) }}
+                                </div>
+                            </template>
                             <template v-else-if="['condition'].includes(column.dataIndex)">
                                 <div>
-                                    <a-select v-model:value="record[column.dataIndex]" :options="data.conditionOptions">
+                                    <a-select v-model:value="record[column.dataIndex]" :options="data.conditionOptions"
+                                        v-if="record.type == '2'" @change="updateWfData('lookUsers')">
                                     </a-select>
                                 </div>
                             </template>
                             <template v-else-if="column.dataIndex === 'operation'">
-                                <delete-outlined two-tone-color='#eb2f96' @click='onDelete(record.name,true)' />
+                                <a-popconfirm title="确定要删除吗？" @confirm="onDelete(record.name,true)">
+                                    <delete-outlined two-tone-color='#eb2f96' />
+                                </a-popconfirm>
                             </template>
                         </template>
                     </a-table>
                 </a-collapse-panel>
                 <a-collapse-panel key="4" header="按钮设置">
                     <a-table size="small" :columns="data.columns" :data-source="node.btnlist" bordered
-                        :pagination="false">
+                        @change="updateWfData('btnlist')" :pagination="false">
                         <template #bodyCell="{ column, text, record }">
                             <template v-if="['name', 'code'].includes(column.dataIndex)">
                                 <div>
-                                    <a-input v-model:value="record[column.dataIndex]" placeholder="请输入" />
+                                    <a-input v-model:value="record[column.dataIndex]" placeholder="请输入" @change="updateWfData('btnlist')"/>
                                 </div>
                             </template>
                             <template v-else-if="['isNextAuditor', 'isSign','hidden'].includes(column.dataIndex)">
                                 <div>
-                                    <a-switch v-model:checked="record[column.dataIndex]" />
+                                    <a-switch v-model:checked="record[column.dataIndex]" @change="updateWfData('btnlist')"/>
                                 </div>
                             </template>
                             <template v-else-if="column.dataIndex === 'operation'">
@@ -127,24 +146,27 @@
                 </a-collapse-panel>
                 <a-collapse-panel key="5" header="会签设置">
                     <a-form-item label="是否会签">
-                        <a-switch v-model:checked="node.isCountersign" />
+                        <a-switch v-model:checked="node.isCountersign" @change="updateWfData('isCountersign')" />
                     </a-form-item>
                     <template v-if="node.isCountersign">
                         <a-form-item label="审核方式">
                             <a-radio-group v-model:value="node.countersignType" name="checkboxgroup"
+                                @change="updateWfData('countersignType')"
                                 :options="[{value:'1',label:'并行'},{value:'2',label:'串行'}]" />
                         </a-form-item>
                         <template v-if="node.countersignType == 1">
                             <a-form-item label="是否等待">
-                                <a-switch v-model:checked="node.isCountersignAll" />
+                                <a-switch v-model:checked="node.isCountersignAll"
+                                    @change="updateWfData('isCountersignAll')" />
                             </a-form-item>
                             <a-form-item label="通过百分比">
                                 <a-input-number id="inputNumber" v-model:value="node.countersignAllType" :min="1"
-                                    :max="100" />
+                                    :max="100" @change="updateWfData('countersignAllType')" />
                             </a-form-item>
                         </template>
                         <a-form-item label="再次审核">
                             <a-radio-group v-model:value="node.countersignAgian" name="checkboxgroup"
+                                @change="updateWfData('countersignAgian')"
                                 :options="[{value:'1',label:'已同意不需要审核'},{value:'2',label:'已同意需要审核'}]" />
                         </a-form-item>
                     </template>
@@ -155,16 +177,20 @@
                     </a-form-item>
                     <template v-if="node.isOvertimeMessage">
                         <a-form-item label="第一次通知(时)">
-                            <a-input-number id="inputNumber" v-model:value="node.overtimeMessageStart" :min="1" />
+                            <a-input-number id="inputNumber" v-model:value="node.overtimeMessageStart" :min="1"
+                                @change="updateWfData('overtimeMessageStart')" />
                         </a-form-item>
                         <a-form-item label="通知间隔(时)">
-                            <a-input-number id="inputNumber" v-model:value="node.overtimeMessageInterval" :min="1" />
+                            <a-input-number id="inputNumber" v-model:value="node.overtimeMessageInterval" :min="1"
+                                @change="updateWfData('overtimeMessageInterval')" />
                         </a-form-item>
                         <a-form-item label="超时流转时间(时)">
-                            <a-input-number id="inputNumber" v-model:value="node.overtimeGo" :min="1" />
+                            <a-input-number id="inputNumber" v-model:value="node.overtimeGo" :min="1"
+                                @change="updateWfData('overtimeGo')" />
                         </a-form-item>
                         <a-form-item label="超时通知策略">
                             <a-checkbox-group v-model:value="node.overtimeMessageType" name="checkboxgroup"
+                                @change="updateWfData('overtimeMessageType')"
                                 :options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" />
                         </a-form-item>
                     </template>
@@ -172,18 +198,25 @@
             </a-collapse>
 
         </a-form>
-        <a-modal width="60%" v-model:open="data.postOpen" title="添加岗位" @ok="postHandleOk">
+        <a-modal width="60%" wrap-class-name="full-modal" v-model:open="data.postOpen" title="添加岗位" @ok="postHandleOk">
             <SelectPos ref="posRef"></SelectPos>
         </a-modal>
-        <a-modal width="60%" v-model:open="data.roleOpen" title="添加角色" @ok="roleHandleOk">
+        <a-modal width="60%" wrap-class-name="full-modal" v-model:open="data.roleOpen" title="添加角色" @ok="roleHandleOk">
             <SelectRole ref="roleRef"></SelectRole>
         </a-modal>
-        <a-modal width="60%" v-model:open="data.accountOpen" title="添加角色" @ok="accountHandleOk">
+        <a-modal width="60%" wrap-class-name="full-modal" v-model:open="data.accountOpen" title="添加用户"
+            @ok="accountHandleOk">
             <SelectAccount ref="accountRef"></SelectAccount>
         </a-modal>
-        <a-modal width="60%" v-model:open="data.levelOpen" title="添加角色" @ok="accountHandleOk">
+        <a-modal width="40%" v-model:open="data.levelOpen" title="添加上下级" @ok="levelHandleOk">
             <AuditorLevel ref="levelRef"></AuditorLevel>
         </a-modal>
+        <a-modal width="40%" v-model:open="data.nodeOpen" title="流程节点选择" @ok="nodeHandleOk">
+            <AuditorNode ref="nodeRef" :id="nodeId"></AuditorNode>
+        </a-modal>
+        <a-modal width="40%" v-model:open="data.auditorSqlOpen"  title="数据表字段选择" @ok="sqlHandleOk">
+            <AuditorSql ref="sqlRef" ></AuditorSql>
+        </a-modal>
     </div>
 </template>
 
@@ -194,20 +227,26 @@
     import SelectRole from '@/components/SelectRole/index.vue';
     import SelectAccount from '@/components/SelectAccount/index.vue';
     import AuditorLevel from './src/auditorLevel.vue'
+    import AuditorSql from './src/auditorSql.vue'
+    import AuditorNode from './src/auditorNode.vue'
     import { getOrgPositonTree, userOrgs } from '@/api/demo/system';
     import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
     import { getDetail } from '@/api/sys/WFSchemeInfo'
-
+    import { flowStore } from '@/store/modules/flow';
+    const flowWfDataStore = flowStore();
     const labelCol = { span: 7 };
     const wrapperCol = { span: 17 };
     const activeKey = ref('1')
-
+    const nodeId = ref('')
     const data = reactive({
         atuoAgreeOptions: [{ value: '1', label: '处理人就是提交人' }, { value: '2', label: '处理人和上一步的处理人相同' }, { value: '3', label: '处理人审批过' }],
+        noAuditorOptions: [{ value: '1', label: '超级管理员处理' }, { value: '2', label: '跳过此步骤' }, { value: '3', label: '不能提交' }],
         postOpen: false,
         roleOpen: false,
         accountOpen: false,
         levelOpen: false,
+        nodeOpen: false,
+        auditorSqlOpen: false,
         userColumns: [
             { title: '类型', dataIndex: 'type' },
             { title: '名称', dataIndex: 'name' },
@@ -246,107 +285,50 @@
         componentDisabled: props.pageType == 'detail' ? true : false
 
     })
-    let node = ref({
-        id: "",
-        type: "",
-        isAddSign: false,
-        isTransfer: false,
-        isBatchAudit: false,
-        autoAgree: "",
-        noAuditor: "1",
-        rejectType: "1",
-        messageType: "",
-        auditUsers: [],
-        lookUsers: [],
-        formRelations: [],
-        formType: "1",
-        formCode: "",
-        formVerison: "",
-        formRelationId: "",
-        formUrl: "",
-        formAppUrl: "",
-        authFields: [],
-        name: "审核节点",
-        btnlist: [
-            {
-                code: "agree",
-                name: "同意",
-                hidden: false,
-                isNextAuditor: false,
-                isSign: false,
-                isSys: true
-            },
-            {
-                code: "disagree",
-                name: "驳回",
-                hidden: false,
-                isNextAuditor: false,
-                isSign: false,
-                isSys: true
-            }
-        ],
-        isCountersign: false,
-        isCountersignAll: false,
-        countersignAgian: "1",
-        countersignType: "1",
-        countersignAllType: 100,
-        isOvertimeMessage: false,
-        overtimeMessageType: "",
-        overtimeMessageStart: 1,
-        overtimeMessageInterval: 1,
-        overtimeGo: 12,
-        isInherit: true,
-        isInit: true,
-
-    })
+    let node = ref({})
     const props = defineProps({
         element: Object,
         schemeCode: String,
         pageType: String,
         pageView: String,
+        taskData: Object
     })
+
     watch(
         () => props.element,
         (newVal, oldVal) => {
             if (newVal.type == "bpmn:Task") {
-                node.value.id = newVal.id
-                node.value.type = newVal.type
-                if (props.pageType == 'detail') {
-                    getNode()
-                }
-                if (props.schemeCode) {
-                    getDetailInfo()
+                const currentNode = flowWfDataStore.getWfDataNode(newVal.id)
+                if (currentNode) {
+                    node.value = currentNode
+                } else {
+                    node.value = newVal
                 }
             }
         }
     )
-    function getNode() {
-        var content = JSON.parse(props.pageView)
-        content.wfData.forEach(element => {
-            if (element.id == node.value.id) {
-                node.value = element
-            }
-        });
+    function updateWfData(key) {
+        flowWfDataStore.updataWfDataNode(node.value.id, key, node.value[key])
     }
-    async function getDetailInfo() {
-        let data = await getDetail({ code: props.schemeCode })
-        let scheme = JSON.parse(data.scheme.content);
-        let wfData = scheme.wfData
-        wfData.forEach(element => {
-            if (element.id == node.value.id) {
-                console.log(element)
-                node.value = element
-            }
-        });
-
+    function typeFormat(type) {
+        switch (type) {
+            case '1':
+                return '岗位'
+            case '2':
+                return '角色'
+            case '3':
+                return '用户'
+            case '4':
+                return '上下级'
+            case '5':
+                return '节点'
+            case '6':
+                return '表字段'
+        }
     }
+   
     onMounted(() => {
-        if (props.schemeCode) {
-            getDetailInfo()
-        }
-        if (props.pageType == 'detail') {
-            getNode()
-        }
+        
     })
     // 岗位
     const posRef = ref < any > ()
@@ -354,8 +336,24 @@
         data.postOpen = true;
         data.isLooker = isLooker;
     }
+    function addTableData(selectData) {
+        if (data.isLooker) {
+            let addData2 = selectData.filter(t => node.value.lookUsers.findIndex(t2 => t2.id == t.id && t2.type == t.type) == -1);
+            node.value.lookUsers = node.value.lookUsers.concat(addData2);
+            updateWfData('lookUsers')
+        }
+        else {
+            let addData = selectData.filter(t => node.value.auditUsers.findIndex(t2 => t2.id == t.id && t2.type == t.type) == -1);
+            node.value.auditUsers = node.value.auditUsers.concat(addData);
+            updateWfData('auditUsers')
+        }
+    }
     function postHandleOk() {
-        console.log(posRef.value.getRow())
+        let selectData = posRef.value.getRow().map(t => {
+            return { type: '1', id: t.id, name: t.name }
+        });
+        addTableData(selectData);
+        data.postOpen = false;
     }
     // 角色
     const roleRef = ref < any > ()
@@ -364,25 +362,8 @@
         data.roleOpen = true;
     }
     function roleHandleOk() {
-        console.log(roleRef.value.getRow())
-        var list = roleRef.value.getRow()
-        list.forEach(element => {
-            if (data.isLooker) {
-                // 传阅人员
-                node.lookUsers.push({
-                    name: element.name,
-                    type: '角色',
-                    condition: ''
-                })
-            } else {
-                // 审核人员
-                node.auditUsers.push({
-                    name: element.name,
-                    type: '角色',
-                    condition: ''
-                })
-            }
-        });
+        let selectData = roleRef.value.getRow().map(t => { return { type: '2', id: t.id, name: t.name, condition: '' } });
+        addTableData(selectData);
         data.roleOpen = false;
     }
     // 用户
@@ -392,7 +373,9 @@
         data.accountOpen = true;
     }
     function accountHandleOk() {
-        console.log(accountRef.value.getRow())
+        let selectData = accountRef.value.getRow().map(t => { return { type: '3', id: t.id, name: t.name } });
+        addTableData(selectData);
+        data.accountOpen = false;
     }
     // 上下级
     const levelRef = ref < any > ()
@@ -400,37 +383,70 @@
         data.isLooker = isLooker;
         data.levelOpen = true;
     }
-    function levelHandleOk() {
-        console.log(levelRef.value.getRow())
+    async function levelHandleOk() {
+        const value = await levelRef.value.validateForm()
+        let obj = levelRef.value.getForm();
+        if (obj.id != '') {
+            addTableData([obj]);
+            data.levelOpen = false;
+        }
+    }
+    //节点执行人
+    const nodeRef = ref < any > ()
+
+    function handleNodeAuditorClick(isLooker) {
+        nodeId.value = node.value.id
+        data.isLooker = isLooker;
+        data.nodeOpen = true
+    }
+    function nodeHandleOk() {
+        nodeRef.value.validateForm()
+        let obj = nodeRef.value.getForm()
+        if (obj.id != '') {
+            addTableData([obj]);
+            data.nodeOpen = false;
+        }
+    }
+
+    // 数据表字段选择
+    const sqlRef = ref < any > ()
+    function handleAuditorSqlClick(isLooker) {
+        data.isLooker = isLooker;
+        data.auditorSqlOpen = true;
+    }
+    function sqlHandleOk() {
+        sqlRef.value.validateForm()
+        let obj = sqlRef.value.getForm()
+        if (obj.name == '' || obj.table == '' || obj.value == '' || obj.rfield == '' || obj.cfield == '' || obj.compareType == '') {
+            data.auditorSqlOpen = true;
+        } else {
+            obj.name = `${data.table}【${data.auditorField}】`
+            addTableData([data]);
+            data.auditorSqlOpen = false;
+        }
     }
     // 审核人员设置
     function onDelete(key, isLook) {
         if (isLook) {
             node.value.lookUsers = node.value.lookUsers.filter(item => item.name !== key);
+            updateWfData('lookUsers')
         } else {
             node.value.auditUsers = node.value.auditUsers.filter(item => item.name !== key);
+            updateWfData('auditUsers')
         }
     }
     // 按钮设置
     function handleAddBtns() {
         node.value.btnlist.push({ code: '', name: '', hidden: false, isNextAuditor: false, isSign: false })
+        updateWfData('btnlist')
     }
     function handleDeleteBtns(key) {
         node.value.btnlist = node.value.btnlist.filter(item => item.code !== key);
+        updateWfData('btnlist')
     }
-    function getForm() {
-        console.log(node.value)
-        if (node.value.overtimeMessageType != '' ) {
-            if (node.value.overtimeMessageType.length > 1) {
-                node.value.overtimeMessageType = node.value.overtimeMessageType.join(',')
-            } else {
-                node.value.overtimeMessageType = node.value.overtimeMessageType[0]
-            }
-            return node.value
-        }
-    }
+  
     defineExpose({
-        getForm
+
     })
 
 </script>
@@ -480,4 +496,19 @@
     ::v-deep .ant-collapse>.ant-collapse-item>.ant-collapse-header {
         padding: 12px 0;
     }
+</style>
+<style lang="less">
+    .full-modal {
+        .ant-modal {
+            max-width: 100%;
+        }
+
+        .ant-modal-content {
+            height: calc(80vh);
+        }
+
+        .ant-modal-body {
+            height: 80%;
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/userTask/src/auditorLevel.vue b/src/components/ProcessDesigner/package/penal/userTask/src/auditorLevel.vue
index ad43670..4aaaf35 100644
--- a/src/components/ProcessDesigner/package/penal/userTask/src/auditorLevel.vue
+++ b/src/components/ProcessDesigner/package/penal/userTask/src/auditorLevel.vue
@@ -3,14 +3,16 @@
         <a-form ref="formRef" :rules="data.rules" :model="data.formData" labelAlign="left" :label-col="labelCol"
             :wrapper-col="wrapperCol">
             <a-form-item label="上下级" name="id">
-                <a-select v-model:value="data.formData.id" placeholder="请选择上下级" :options="data.options">
+                <a-select v-model:value="data.formData.id" placeholder="请选择上下级" :options="data.options"
+                    @change="handleChange">
                 </a-select>
             </a-form-item>
         </a-form>
     </div>
 </template>
 <script lang="ts" setup>
-    import {reactive} from 'vue'
+    import { reactive,ref } from 'vue'
+    const formRef = ref<any>()
     const data = reactive({
         formData: {
             name: '',
@@ -35,16 +37,30 @@
             { value: '10', label: '下五级' }
         ]
     })
-    function getRow() {
-        let rows = data.value.formData
+    function handleChange(val,option) {
+        data.formData.name = option.label
+    }
+    function validateForm(){
+        formRef.value
+            .validate()
+            .then(async (values) => {
+                return true
+            })
+            .catch(async (error) => {
+                return false
+            });
+    }
+    function getForm() {
+        let rows = data.formData
         return rows
     }
     defineExpose({
-        getRow
+        getForm,
+        validateForm
     })
 </script>
 <style scoped>
-    .l-from-body{
+    .l-from-body {
         padding: 10px;
     }
 </style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/userTask/src/auditorNode.vue b/src/components/ProcessDesigner/package/penal/userTask/src/auditorNode.vue
index 45a21fe..6ba7b9c 100644
--- a/src/components/ProcessDesigner/package/penal/userTask/src/auditorNode.vue
+++ b/src/components/ProcessDesigner/package/penal/userTask/src/auditorNode.vue
@@ -1,56 +1,88 @@
 <template>
-    <div class="l-from-body" >
-        <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="80px" >
-            <el-col :span="24">
-                <el-form-item label="节点" prop="id">
-                    <l-select v-model="formData.id" placeholder="请选择节点" valueKey="id" labelKey="name" :options="options" @change="handleChange" ></l-select>
-                </el-form-item>
-            </el-col>
-        </el-form>
+    <div class="l-from-body">
+        <a-form ref="formRef" :rules="data.rules" :model="data.formData" labelAlign="left" :label-col="labelCol"
+            :wrapper-col="wrapperCol">
+            <a-form-item label="节点" name="id">
+                <a-select v-model:value="data.formData.id" placeholder="请选择节点" :options="data.options"
+                :field-names="{ label: 'name', value: 'id' }" @change="handleChange">
+                </a-select>
+            </a-form-item>
+        </a-form>
     </div>
 </template>
-<script>
-export default {
-    name:'node-auditor-form',
-    data(){
-        return {
-            formData:{
-                name:'',
-                type:'5',
-                id:'',
-            },
-            rules: {
-                id: [
-                    { required: true, message: '请选择节点' }
-                ]
-            },
-            options: []
-        };
-    },
-    created () {
-    },
-    methods:{
-        resetForm(){
-            this.$refs.form && this.$refs.form.resetFields();
-        },
-        // 校验表单
-        validateForm(callback){
-            this.$refs.form.validate((valid) => {
-                if(valid){
-                    callback();
-                }
-            });
-        },
-        setForm(wfdata){
-            //console.log(wfdata,'节点选择')
-            this.options = wfdata.filter(t=>t.name);
-        },
-        getForm(){
-            return this.$deepClone(this.formData);
-        },
-        handleChange(val){
-            this.formData.name = this.options.find(t=>t.id == val).name;
+<script lang="ts" setup>
+    import { reactive, ref, defineEmits, defineProps, watch,onMounted } from 'vue'
+    import { flowStore } from '@/store/modules/flow';
+  const flowWfDataStore = flowStore();
+    const emit = defineEmits(['success']);
+    const props = defineProps({
+        id: String
+    })
+    console.log(props)
+    watch(
+        () => props.id,
+        (newVal, oldVal) => {
+            console.log(newVal)
+            getOptions(newVal)
         }
+    )
+    const formRef = ref < any > ()
+    const data = reactive({
+        formData: {
+            name: '',
+            type: '5',
+            id: '',
+        },
+        rules: {
+            id: [
+                { required: true, message: '请选择节点' }
+            ]
+        },
+        options: []
+    })
+    onMounted(() => {
+        getOptions(props.id)
+    })
+    function getOptions(nodeId) {
+        /**
+           ExclusiveGateway:'排他网关',
+           Task:'审核节点',
+        */
+        let wfdata = flowWfDataStore.getWfData
+        var arr = []
+        wfdata.forEach(element => {
+            if (element.type == 'bpmn:Task' && element.id != nodeId) {
+                arr.push(element)
+            }
+        });
+        console.log(arr)
+        data.options = arr
     }
-}
-</script>
\ No newline at end of file
+    function handleChange(val, option) {
+        data.formData.name = option.name
+    }
+    function validateForm() {
+        formRef.value
+            .validate()
+            .then(async (values) => {
+                return true
+            })
+            .catch(async (error) => {
+                return false
+            });
+    }
+    function getForm() {
+        let rows = data.formData
+        console.log(rows)
+        return rows
+    }
+    defineExpose({
+        getForm,
+        validateForm
+    })
+</script>
+<style scoped>
+    .l-from-body {
+        padding: 10px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessDesigner/package/penal/userTask/src/auditorSql.vue b/src/components/ProcessDesigner/package/penal/userTask/src/auditorSql.vue
index 65ff680..c62510f 100644
--- a/src/components/ProcessDesigner/package/penal/userTask/src/auditorSql.vue
+++ b/src/components/ProcessDesigner/package/penal/userTask/src/auditorSql.vue
@@ -1,104 +1,117 @@
 <template>
-    <div class="l-from-body" >
-        <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="120px" >
-            <el-col :span="24">
-                <el-form-item label="数据库" prop="dbCode">
-                    <el-select v-model="formData.dbCode" placeholder="请选择">
-                        <el-option-group
-                        v-for="group in lr_dblinkTree"
-                        :key="group.id"
-                        :label="group.label">
-                        <el-option
-                            v-for="item in group.children"
-                            :key="item.id"
-                            :label="item.label"
-                            :value="item.id">
+    <div class="l-from-body">
+        <a-form ref="formRef" :rules="data.rules" :model="formData" labelAlign="left" :label-col="labelCol"
+            :wrapper-col="wrapperCol">
+            <!-- <a-form-item label="数据库" name="dbCode">
+                <a-select v-model:value="formData.dbCode" placeholder="请选择" :options="data.options">
+                    <el-option-group v-for="group in lr_dblinkTree" :key="group.id" :label="group.label">
+                        <el-option v-for="item in group.children" :key="item.id" :label="item.label" :value="item.id">
                         </el-option>
-                        </el-option-group>
-                    </el-select>
-                </el-form-item>
-            </el-col>
-            <el-col :span="24">
-                <el-form-item label="数据表" prop="table">
-                    <l-codetable-select
-                    @change="handleTableChange"
-                    :dbCode="formData.dbCode" 
-                    v-model="formData.table"></l-codetable-select>
-                </el-form-item>
-            </el-col>
-            <el-col :span="24">
-                <el-form-item label="关联流程字段" prop="rfield">
-                    <l-select :options="columns" valueKey="name" labelKey="coment" v-model="formData.rfield" >
-                    </l-select>
-                </el-form-item>
-            </el-col>
-            <el-col :span="24">
-                <el-form-item label="审核人字段" prop="auditorField">
-                    <l-select :options="columns"  valueKey="name" labelKey="coment" v-model="formData.auditorField" >
-                    </l-select>
-                </el-form-item>
-            </el-col>
-        </el-form>
+                    </el-option-group>
+                </a-select>
+            </a-form-item> -->
+            <a-form-item label="数据表" name="table">
+                <!-- <a-select v-model:value="formData.table" placeholder="请选择" :options="formData.columns">
+                </a-select> -->
+                <a-space>
+                    <a-input v-model:value="formData.table" placeholder="请输入" readonly />
+                    <a-button @click="handleTableClick">选择</a-button>
+                </a-space>
+            </a-form-item>
+            <a-form-item label="关联流程字段" name="rfield">
+                <a-select v-model:value="formData.rfield" placeholder="请选择" :options="data.columns">
+                </a-select>
+            </a-form-item>
+            <a-form-item label="审核人字段" name="auditorField">
+                <a-select v-model:value="formData.auditorField" placeholder="请选择" :options="data.columns">
+                </a-select>
+            </a-form-item>
+        </a-form>
+        <a-modal width="60%" height="80%" v-model:open="data.tableOpen" title="选择数据表" @ok="tableHandleOk">
+            <SelectTable ref="tableRef"></SelectTable>
+        </a-modal>
     </div>
 </template>
-<script>
-export default {
-    name:'auditor-sql-form',
-    props:{
-    },
-    data(){
-        return {
-            formData:{
-                dbCode:'',
-                table:'',
-                rfield:'',
-                auditorField:'',
-                type:'6'
-            },
-            rules: {
-                dbCode: [
-                    { required: true, message: '请选择数据库' }
-                ],
-                table: [
-                    { required: true, message: '请选择数据表' }
-                ],
-                rfield: [
-                    { required: true, message: '请选择关联字段' }
-                ],
-                auditorField: [
-                    { required: true, message: '请选择审核人字段' }
-                ]
-            },
-            columns:[],
-        };
-    },
-    computed:{
-    },
-    created () {
-    },
-    methods:{
-        handleTableChange(table){
-            this.columns = table.columns
+<script lang="ts" setup>
+    import { reactive, ref, onMounted } from 'vue'
+    import SelectTable from '@/components/SelectTable/index.vue'
+    import { getTableForms } from '@/api/sys/flowPenal'
+
+    const labelCol = { span: 5 };
+    const wrapperCol = { span: 17 };
+    const formRef = ref < any > ()
+    const tableRef = ref < any > ()
+
+    const data = reactive({
+        rules: {
+            dbCode: [
+                { required: true, message: '请选择数据库' }
+            ],
+            table: [
+                { required: true, message: '请选择数据表' }
+            ],
+            rfield: [
+                { required: true, message: '请选择关联字段' }
+            ],
+            auditorField: [
+                { required: true, message: '请选择审核人字段' }
+            ]
         },
-        resetForm(){
-            this.columns = [];
-            this.$refs.form && this.$refs.form.resetFields()
-        },
-        // 校验表单
-        validateForm(callback){
-            this.$refs.form.validate((valid) => {
-                if(valid){
-                    callback()
-                }
-            });
-        },
-        setForm(data){
-            this.formData = this.$deepClone(data)
-        },
-        getForm(){
-            let formData = this.$deepClone(this.formData)
-            return formData
-        }
+        columns:[],
+        tableOpen: false
+    })
+    let formData = ref({
+        dbCode: '',
+        table: '',
+        rfield: '',
+        auditorField: '',
+        type: '6'
+    })
+    function handleTableClick() {
+        data.tableOpen = true
     }
-}
-</script>
\ No newline at end of file
+    function tableHandleOk() {
+        console.log(tableRef.value.getRow())
+        const obj = tableRef.value.getRow()
+        formData.value.table = obj[0].name
+        handleTableChange(obj[0].name)
+        data.tableOpen = false
+    }
+    // 选择数据表，把获取表头
+    async function handleTableChange(table) {
+        var querys = {
+            dbCode: 'lrsystemdb',
+            tableNames: table
+        }
+        console.log(querys)
+        const data = await getTableForms(querys)
+        console.log(data);
+    }
+    // 校验表单
+    function validateForm() {
+        formRef.value
+            .validate()
+            .then(async (values) => {
+                return true
+            })
+            .catch(async (error) => {
+                return false
+            });
+    }
+    function setForm(data) {
+        this.formData = this.$deepClone(data);
+    }
+    function getForm() {
+        return formData.value;
+    }
+
+    defineExpose({
+        validateForm,
+        getForm
+    })
+</script>
+<style scoped>
+    .l-from-body {
+        padding: 10px 30px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/SelectAccount/DeptTree.vue b/src/components/SelectAccount/DeptTree.vue
index d3e83d7..ae3b8ce 100644
--- a/src/components/SelectAccount/DeptTree.vue
+++ b/src/components/SelectAccount/DeptTree.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="m-4 mr-0 overflow-hidden bg-white">
-    <BasicTree title="部门列表" toolbar treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData
+    <BasicTree title="部门列表" ref="asyncExpandTreeRef" toolbar search treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData
       :clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
       @select="handleSelect" />
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue';
+  import { onMounted, ref ,nextTick,unref} from 'vue';
 
   import { BasicTree, TreeItem } from '@/components/Tree';
   import { getDeptList } from '@/api/demo/system';
@@ -16,9 +16,14 @@
   const emit = defineEmits(['select']);
 
   const treeData = ref < TreeItem[] > ([]);
+  const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
 
   async function fetch() {
     treeData.value = (await getDeptList()) as unknown as TreeItem[];
+     // 展开全部
+     nextTick(() => {
+      unref(asyncExpandTreeRef)?.expandAll(true);
+    });
   }
 
   function handleSelect(keys) {
diff --git a/src/components/SelectAccount/index.vue b/src/components/SelectAccount/index.vue
index 94f7ee9..d8c9b6b 100644
--- a/src/components/SelectAccount/index.vue
+++ b/src/components/SelectAccount/index.vue
@@ -44,6 +44,11 @@
       return info;
     },
   });
+  function handleSelect(orgId = '') {
+    searchInfo.orgId = orgId;
+    reload();
+  }
+
   function getRow() {
     let rows = getSelectRows();
     return rows
@@ -55,5 +60,6 @@
 <style scoped>
   .select-account{
     display: flex;
+    height: 100%;
   }
 </style>
\ No newline at end of file
diff --git a/src/components/SelectPos/DeptTree.vue b/src/components/SelectPos/DeptTree.vue
new file mode 100644
index 0000000..ae3b8ce
--- /dev/null
+++ b/src/components/SelectPos/DeptTree.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+    <BasicTree title="部门列表" ref="asyncExpandTreeRef" toolbar search treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData
+      :clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
+      @select="handleSelect" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref ,nextTick,unref} from 'vue';
+
+  import { BasicTree, TreeItem } from '@/components/Tree';
+  import { getDeptList } from '@/api/demo/system';
+
+  defineOptions({ name: 'DeptTree' });
+
+  const emit = defineEmits(['select']);
+
+  const treeData = ref < TreeItem[] > ([]);
+  const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
+
+  async function fetch() {
+    treeData.value = (await getDeptList()) as unknown as TreeItem[];
+     // 展开全部
+     nextTick(() => {
+      unref(asyncExpandTreeRef)?.expandAll(true);
+    });
+  }
+
+  function handleSelect(keys) {
+    emit('select', keys[0]);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+</script>
\ No newline at end of file
diff --git a/src/components/SelectPos/account.data.ts b/src/components/SelectPos/account.data.ts
new file mode 100644
index 0000000..7f76a73
--- /dev/null
+++ b/src/components/SelectPos/account.data.ts
@@ -0,0 +1,48 @@
+import { getAllRoleList, isAccountExist } from '@/api/demo/system';
+import { BasicColumn, FormSchema } from '@/components/Table';
+
+/**
+ * transform mock data
+ * {
+ *  0: '华东分部',
+ * '0-0': '华东分部-研发部'
+ * '0-1': '华东分部-市场部',
+ *  ...
+ * }
+ */
+export const columns: BasicColumn[] = [
+  {
+    title: '用户名',
+    dataIndex: 'account',
+    width: 120,
+  },
+  {
+    title: '昵称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '所属部门',
+    dataIndex: 'organizations',
+    // customRender: ({ value }) => {
+    //   return deptMap[value];
+    // },
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'account',
+    label: '用户名',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'nickname',
+    label: '昵称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+
+
diff --git a/src/components/SelectPos/index.vue b/src/components/SelectPos/index.vue
index b9d4817..7869d9c 100644
--- a/src/components/SelectPos/index.vue
+++ b/src/components/SelectPos/index.vue
@@ -1,68 +1,58 @@
 <template>
-  <div>
-    <BasicTree ref="asyncExpandTreeRef" title="部门和职级列表" toolbar treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
-      loadData :clickRowToExpand="false" :treeData="treeData"
-      :fieldNames="{ key: 'id', title: 'name' ,disabled:'disabled'}" :defaultExpandAll="true" :checkable="true"
-      :checkStrictly="true" @check="handleSelect" />
-  </div>
+  <!-- <PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> -->
+    <div class="select-account">
+      <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
+      <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo" @fetch-success="onFetchSuccess"> </BasicTable>
+    </div>
+  <!-- </PageWrapper> -->
 </template>
 <script lang="ts" setup>
-  import { reactive, ref, onMounted, nextTick, unref } from 'vue';
+  import { reactive,nextTick} from 'vue';
 
-  import { BasicTree, TreeItem } from '@/components/Tree';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getLoadPositionByOrg, deleteAccount } from '@/api/demo/system';
+  import { PageWrapper } from '@/components/Page';
+  import DeptTree from './DeptTree.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
-  import { getOrgPositonTree, userOrgs } from '@/api/demo/system';
 
-  defineOptions({ name: 'RoleManagement' });
-  const treeData = ref < TreeItem[] > ([]);
-  const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
-  const posData = ref([])
-  function treeIterator(tree) {
-    tree.forEach((node) => {
-      if (node.key == 0) {
-        node.name = "部门--" + node.name
-        node.disableCheckbox = true
-      } else {
-        node.name = "职级--" + node.name
-        // 需要拼接parentName
-        posData.value.push(node)
-      }
-      node.children && treeIterator(node.children)
-    })
-  }
-  async function fetch() {
-    const data = (await getOrgPositonTree()) as unknown as TreeItem[];
-    treeIterator(data)
-    treeData.value = await data
-    // 展开全部
-    nextTick(() => {
-      unref(asyncExpandTreeRef)?.expandAll(true);
-    });
-  }
-  onMounted(() => {
-    fetch();
+  import { columns, searchFormSchema } from './account.data';
+
+  defineOptions({ name: 'AccountManagement' });
+
+  const searchInfo = reactive < Recordable > ({});
+  const [registerTable, { expandAll,reload, updateTableDataRecord, getSelectRows, clearSelectedRowKeys }] = useTable({
+    title: '账号列表',
+    api: getLoadPositionByOrg,
+    rowKey: 'id',
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    rowSelection: {//多选框
+      type: 'checkbox',
+    },
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    tableSetting: { fullScreen: true },
+    isCanResizeParent: true,
+    handleSearchInfoFn(info) {
+      console.log('handleSearchInfoFn', info);
+      return info;
+    },
   });
-  let orgList = ref([])
-  let posList = ref([])
-  function handleSelect(checkedKeys, e: { checked: bool, checkedNodes, node, event }) {
-    const list = e.checkedNodes
-    console.log(e.node)
-    console.log(checkedKeys)
-    orgList.value = []
-    posList.value = []
-    list.forEach(element => {
-      if (element.key > 0) {
-        posList.value.push({
-          orgId: Number(element.tag),
-          posId: element.id,
-        })
-      } else {
-        orgList.value.push({
-          orgId: element.id,
-          posId: 0,
-        })
-      }
-    });
+  function handleSelect(orgId = '') {
+    searchInfo.orgId = orgId;
+    reload();
+    nextTick(expandAll);
+
+  }
+  function onFetchSuccess() {
+    // 演示默认展开所有表项
+    nextTick(expandAll);
   }
   function getRow() {
     let rows = getSelectRows();
@@ -71,5 +61,10 @@
   defineExpose({
     getRow
   })
-
-</script>
\ No newline at end of file
+</script>
+<style scoped>
+  .select-account{
+    display: flex;
+    height: 100%;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/SelectTable/index.vue b/src/components/SelectTable/index.vue
index f5811e9..52d3741 100644
--- a/src/components/SelectTable/index.vue
+++ b/src/components/SelectTable/index.vue
@@ -1,17 +1,28 @@
 <template>
-  <div>
+  <div class="div-box">
     <BasicTable @register="registerTable" :searchInfo="searchInfo"> </BasicTable>
   </div>
 </template>
 <script lang="ts" setup>
-  import { reactive,  } from 'vue';
+  import { reactive, defineProps ,watch} from 'vue';
   import { getTableList } from '@/api/sys/flowPenal'
 
   import { BasicTable, useTable, TableAction } from '@/components/Table';
 
   defineOptions({ name: 'RoleManagement' });
-
-  const searchInfo = reactive < Recordable > ({});
+  const props = defineProps({
+    dbCode: String
+  })
+  const searchInfo = reactive < Recordable > ({
+    code: props.dbCode
+  });
+  watch(
+    () => props.dbCode,
+    (newVal, oldVal) => {
+      searchInfo.code = newVal
+      reload()
+    }
+  )
 
   const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
     // 表格名称
@@ -60,4 +71,10 @@
     getRow
   })
 
-</script>
\ No newline at end of file
+</script>
+<style scoped>
+  .div-box{
+    display: flex;
+    height: 100%;
+  }
+</style>
\ No newline at end of file
diff --git a/src/store/modules/flow.ts b/src/store/modules/flow.ts
new file mode 100644
index 0000000..04f6ca7
--- /dev/null
+++ b/src/store/modules/flow.ts
@@ -0,0 +1,50 @@
+
+import { defineStore } from 'pinia';
+
+
+export const flowStore = defineStore({
+  id: 'flow',
+  state: () => ({
+    flowWfData: [],
+  }),
+  getters: {
+    getWfData(state) {
+      return state.flowWfData;
+    },
+   
+  },
+  actions: {
+     // 获取单个节点的数据
+     getWfDataNode(id){
+      var currentIndex = (this.flowWfData || []).findIndex((element) => element.id === id);
+      if(currentIndex == -1){
+        return null
+      }else{
+        return this.flowWfData[currentIndex]
+      }
+    },
+    // 添加单个节点的数据
+    setWfDataNode(data) {
+      let flowWfData = this.flowWfData
+      var currentIndex = (flowWfData || []).findIndex((element) => element.id === data.id);
+      if(currentIndex == -1){
+        this.flowWfData.push(data)
+      }
+    },
+    // 全覆盖，供更新和详情使用
+    setWfDataAll(list){
+      this.flowWfData=list
+    },
+    // 修改单个节点的某项数据
+    updataWfDataNode(id,key,value){
+      let flowWfData = this.flowWfData
+      var currentIndex = (flowWfData || []).findIndex((element) => element.id === id);
+      this.flowWfData[currentIndex][key] = value
+    },
+    deleteWfData(data) {
+      let flowWfData = this.flowWfData
+      var currentIndex = (flowWfData || []).findIndex((element) => element.id === data.id);
+      this.flowWfData.splice(currentIndex,1)
+    }
+  },
+});
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index a9f8754..7369a88 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -16,6 +16,7 @@ import { RouteRecordRaw } from 'vue-router';
 import { PAGE_NOT_FOUND_ROUTE } from '@/router/routes/basic';
 import { isArray } from '@/utils/is';
 import { h } from 'vue';
+import md5 from 'js-md5'
 
 interface UserState {
   userInfo: Nullable<UserInfo>;
@@ -90,8 +91,8 @@ export const useUserStore = defineStore({
     ): Promise<GetUserInfoModel | null> {
       try {
         const { goHome = true, mode, ...loginParams } = params;
+        loginParams.password = md5(loginParams.password)
         const data = await loginApi(loginParams, mode);
-        console.log(data)
         const { token } = data;
 
         // save token
diff --git a/src/views/demo/system/account/DeptTree.vue b/src/views/demo/system/account/DeptTree.vue
index 8c88f08..ae3b8ce 100644
--- a/src/views/demo/system/account/DeptTree.vue
+++ b/src/views/demo/system/account/DeptTree.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="m-4 mr-0 overflow-hidden bg-white">
-    <BasicTree title="部门列表" toolbar search treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData
+    <BasicTree title="部门列表" ref="asyncExpandTreeRef" toolbar search treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData
       :clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
       @select="handleSelect" />
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue';
+  import { onMounted, ref ,nextTick,unref} from 'vue';
 
   import { BasicTree, TreeItem } from '@/components/Tree';
   import { getDeptList } from '@/api/demo/system';
@@ -16,9 +16,14 @@
   const emit = defineEmits(['select']);
 
   const treeData = ref < TreeItem[] > ([]);
+  const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
 
   async function fetch() {
     treeData.value = (await getDeptList()) as unknown as TreeItem[];
+     // 展开全部
+     nextTick(() => {
+      unref(asyncExpandTreeRef)?.expandAll(true);
+    });
   }
 
   function handleSelect(keys) {
diff --git a/src/views/demo/workflow/scheme/index.vue b/src/views/demo/workflow/scheme/index.vue
index febaeec..7421e04 100644
--- a/src/views/demo/workflow/scheme/index.vue
+++ b/src/views/demo/workflow/scheme/index.vue
@@ -42,7 +42,8 @@
   import PermissionBtn from '@/components/PermissionBtn/index.vue'
   import { useMessage } from '@/hooks/web/useMessage';
   const { createConfirm, createMessage } = useMessage();
-
+  import { flowStore } from '@/store/modules/flow';
+  const flowWfDataStore = flowStore();
   import { useGo } from '@/hooks/web/usePage';
   const go = useGo();
 
@@ -131,7 +132,7 @@
         reload();
         if (data) {
           return createMessage.warn('删除成功');
-        }else{
+        } else {
           return createMessage.warn('删除失败');
         }
       },
@@ -151,6 +152,7 @@
   function onBtnClicked(domId) {
     switch (domId) {
       case 'btnAdd':
+        flowWfDataStore.setWfDataAll([])
         go('/dashboard/scheme_preview/add');
         break;
       case 'btnEdit':
diff --git a/src/views/demo/workflow/scheme/preview.vue b/src/views/demo/workflow/scheme/preview.vue
index 4fdd9fa..ab78c93 100644
--- a/src/views/demo/workflow/scheme/preview.vue
+++ b/src/views/demo/workflow/scheme/preview.vue
@@ -6,7 +6,7 @@
       <a-button type="primary" :icon="h(CloseCircleOutlined)" @click="closePreview" class="ml-2" danger>关闭 </a-button>
     </div>
     <process-designer :key="designerOpen" style="border:1px solid rgba(0, 0, 0, 0.1);" ref="modelDesigner"
-      v-loading="designerData.loading"  :schemeCode="schemeCode" @save="onSaveDesigner" />
+      v-loading="designerData.loading" :schemeCode="schemeCode" @save="onSaveDesigner" />
   </div>
 
 </template>
@@ -19,7 +19,9 @@
   import { useRoute } from 'vue-router'
   import { useMultipleTabStore } from '@/store/modules/multipleTab';
   import { useRouter } from 'vue-router';
+  import { flowStore } from '@/store/modules/flow';
 
+  const flowWfDataStore = flowStore();
   const tabStore = useMultipleTabStore();
   const router = useRouter();
 
@@ -31,6 +33,7 @@
   })
   const modelDesigner = ref < any > ()
   async function onSave(type) {
+    console.log(flowWfDataStore.getWfData)
     let validateData = await modelDesigner.value.validateFlow()
     if (validateData) {
       let formData = await modelDesigner.value.getFlow()

From 357b4d80e744f526b4e7d3a92b61ab3252745f7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Tue, 26 Mar 2024 16:58:58 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/package.json b/package.json
index 7f641b2..9431074 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,8 @@
     "echarts": "^5.4.3",
     "exceljs": "^4.4.0",
     "highlight.js": "^11.9.0",
+    "kml-geojson": "^1.2.2",
+    "localforage": "^1.10.0",
     "js-md5": "^0.8.3",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",