From bae44b4541c42c952569fa11ad9f089d03d5d3f8 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Thu, 19 Jan 2023 15:29:39 +0800
Subject: [PATCH 01/59] =?UTF-8?q?feat:=20=E5=BC=95=E5=85=A5=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E6=9E=84=E9=80=A0=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-ui-admin-vue3/package.json              |   2 +
 yudao-ui-admin-vue3/pnpm-lock.yaml            | 133 +++++++++++++++++-
 yudao-ui-admin-vue3/src/main.ts               |  10 +-
 .../src/plugins/formCreate/index.ts           |  43 ++++++
 .../src/views/infra/build/index.vue           |   8 +-
 5 files changed, 191 insertions(+), 5 deletions(-)
 create mode 100644 yudao-ui-admin-vue3/src/plugins/formCreate/index.ts

diff --git a/yudao-ui-admin-vue3/package.json b/yudao-ui-admin-vue3/package.json
index e3b7700b3..7da9c5ff1 100644
--- a/yudao-ui-admin-vue3/package.json
+++ b/yudao-ui-admin-vue3/package.json
@@ -24,6 +24,8 @@
     "lint:pretty": "pretty-quick --staged"
   },
   "dependencies": {
+    "@form-create/designer": "^3.1.0",
+    "@form-create/element-ui": "^3.1.17",
     "@iconify/iconify": "^3.0.1",
     "@vueuse/core": "^9.11.0",
     "@wangeditor/editor": "^5.1.23",
diff --git a/yudao-ui-admin-vue3/pnpm-lock.yaml b/yudao-ui-admin-vue3/pnpm-lock.yaml
index 7c0f236be..a0f4f9787 100644
--- a/yudao-ui-admin-vue3/pnpm-lock.yaml
+++ b/yudao-ui-admin-vue3/pnpm-lock.yaml
@@ -3,6 +3,8 @@ lockfileVersion: 5.4
 specifiers:
   '@commitlint/cli': ^17.4.2
   '@commitlint/config-conventional': ^17.4.2
+  '@form-create/designer': ^3.1.0
+  '@form-create/element-ui': ^3.1.17
   '@iconify/iconify': ^3.0.1
   '@iconify/json': ^2.2.8
   '@intlify/unplugin-vue-i18n': ^0.8.1
@@ -85,6 +87,8 @@ specifiers:
   xe-utils: ^3.5.7
 
 dependencies:
+  '@form-create/designer': 3.1.0_vue@3.2.45
+  '@form-create/element-ui': 3.1.17_vue@3.2.45
   '@iconify/iconify': 3.0.1
   '@vueuse/core': 9.11.0_vue@3.2.45
   '@wangeditor/editor': 5.1.23
@@ -436,6 +440,14 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/runtime-corejs3/7.20.7:
+    resolution: {integrity: sha512-jr9lCZ4RbRQmCR28Q8U8Fu49zvFqLxTY9AMOUz+iyMohMoAgpEcVxY+wJNay99oXOpOcCTODkk70NDN2aaJEeg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      core-js-pure: 3.27.2
+      regenerator-runtime: 0.13.11
+    dev: false
+
   /@babel/runtime/7.20.1:
     resolution: {integrity: sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==}
     engines: {node: '>=6.9.0'}
@@ -934,6 +946,100 @@ packages:
       '@floating-ui/core': 1.0.2
     dev: false
 
+  /@form-create/component-elm-checkbox/3.1.15:
+    resolution: {integrity: sha512-bAl3k0p76wwMX0OxeR8KAEiUl2RP1Jl1kAqbjD762EcSXGgaXgP94v9ag1JhUoiwZkSKWl6IF+e/utjEonRSFw==}
+    dependencies:
+      '@form-create/utils': 3.1.15
+    dev: false
+
+  /@form-create/component-elm-frame/3.1.15:
+    resolution: {integrity: sha512-78WbMpMLTYwTo3QP7Fa+N2VF/u1vmRuwDmiobtBtVg9EE7m6//bQV96ibnLNXX27MD41gIg+o1GUJtx/qxZ8Ew==}
+    dependencies:
+      '@form-create/utils': 3.1.15
+    dev: false
+
+  /@form-create/component-elm-group/3.1.15:
+    resolution: {integrity: sha512-V/oVxHf9rHqqMHRV0XRVED9EYFCVZ8Tv/EbbIN/4rORruHtzdQOH8I0QHQ9T4vZO9Q4eblApzcJb8Y7bbHX23Q==}
+    dependencies:
+      '@form-create/utils': 3.1.15
+    dev: false
+
+  /@form-create/component-elm-radio/3.1.15:
+    resolution: {integrity: sha512-qAf1VlhrUvMlgzkz6BYLRn0UOLahkTI/cbzt8nkp5PL1oGoSXp5xqIOtHMjbnGEkEXW57kjRKI5Q7UjzIhYmvQ==}
+    dependencies:
+      '@form-create/utils': 3.1.15
+    dev: false
+
+  /@form-create/component-elm-select/3.1.15:
+    resolution: {integrity: sha512-ZnvPn/TGqgFDed7bKabjRvlwlQ8RYq5WCG9Iy63d2igC8577tv5QTI2rNvfGfxxH/254MPwgNlA94JukxzEOTw==}
+    dependencies:
+      '@form-create/utils': 3.1.15
+    dev: false
+
+  /@form-create/component-elm-tree/3.1.15:
+    resolution: {integrity: sha512-4VPN406A8Mvannn8P/2DvStqDYFfDHZ+ILG/0JndOyfe+GdYdSA5SwD3LfC4zD6AhpGrkOJXbd4YYXlBUtzt8g==}
+    dependencies:
+      '@form-create/utils': 3.1.15
+    dev: false
+
+  /@form-create/component-elm-upload/3.1.17:
+    resolution: {integrity: sha512-9FToAS1rQAS1KBq5YK473i3EpGGwHAerqjuoiKiH4wlaGsJma+nGtRui1SSAF4r4QfWGKuSGZJmPtT6EMP4w8Q==}
+    dependencies:
+      '@form-create/utils': 3.1.15
+    dev: false
+
+  /@form-create/component-subform/3.1.5:
+    resolution: {integrity: sha512-JHNEFGuwpnjGvCJ0I0GCqPL5al0qXoN4ymnRBpm+oL+6MMo5bz1kUyoqMX1MutuC96gHTqpeqc67hssi8g2mIw==}
+    dev: false
+
+  /@form-create/component-wangeditor/3.1.12:
+    resolution: {integrity: sha512-ncsHFCiBY4veyD0yj0kWz+hqEjvY8VGTCJYpYL/b7/8dnPAEaSn9fwOKc32eyZbb8YJXwt3BivvFBx3aMj0cTg==}
+    dependencies:
+      wangeditor: 4.7.15
+    dev: false
+
+  /@form-create/core/3.1.17_vue@3.2.45:
+    resolution: {integrity: sha512-XGsrmUR5nQEvDvxhB035df62iunSA91oQ77XbGvfaoi8Sz/EBos7xbVdIXNfACxdLMedy33+LBVGIrEHU8UNjw==}
+    peerDependencies:
+      vue: ^3.1.0
+    dependencies:
+      '@form-create/utils': 3.1.15
+      vue: 3.2.45
+    dev: false
+
+  /@form-create/designer/3.1.0_vue@3.2.45:
+    resolution: {integrity: sha512-+YH/MkInTyL1bNqX6BSeixPlNUxyeqMvy5zrC97nzf+m87SuBny+qFECEkMWhtQ4GTAIy91DjxQM2KJ6QTlB4w==}
+    dependencies:
+      '@form-create/component-wangeditor': 3.1.12
+      '@form-create/element-ui': 3.1.17_vue@3.2.45
+      '@form-create/utils': 3.1.15
+      vuedraggable: 4.1.0_vue@3.2.45
+    transitivePeerDependencies:
+      - vue
+    dev: false
+
+  /@form-create/element-ui/3.1.17_vue@3.2.45:
+    resolution: {integrity: sha512-MQ/ozkH8Ckx1rgzUcrQmqqfg3SCOBb6AYIOn6YcF/H+iid7xbq16qJjPa0sAKNlO3WC6ak3ucF6KuWu4R7uChw==}
+    peerDependencies:
+      vue: ^3.1.0
+    dependencies:
+      '@form-create/component-elm-checkbox': 3.1.15
+      '@form-create/component-elm-frame': 3.1.15
+      '@form-create/component-elm-group': 3.1.15
+      '@form-create/component-elm-radio': 3.1.15
+      '@form-create/component-elm-select': 3.1.15
+      '@form-create/component-elm-tree': 3.1.15
+      '@form-create/component-elm-upload': 3.1.17
+      '@form-create/component-subform': 3.1.5
+      '@form-create/core': 3.1.17_vue@3.2.45
+      '@form-create/utils': 3.1.15
+      vue: 3.2.45
+    dev: false
+
+  /@form-create/utils/3.1.15:
+    resolution: {integrity: sha512-tP6Z/c2XC6OYrI8D9/XWvJc2h6apsyMFTy051sY+tCcxppqyR7dBEEXmgfWOrAr980N7k10g27kwJ9TdVn+bfw==}
+    dev: false
+
   /@humanwhocodes/config-array/0.11.8:
     resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==}
     engines: {node: '>=10.10.0'}
@@ -2470,6 +2576,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /core-js-pure/3.27.2:
+    resolution: {integrity: sha512-Cf2jqAbXgWH3VVzjyaaFkY1EBazxugUepGymDoeteyYr9ByX51kD2jdHZlsEF/xnJMyN3Prua7mQuzwMg6Zc9A==}
+    requiresBuild: true
+    dev: false
+
   /core-js/3.26.1:
     resolution: {integrity: sha512-21491RRQVzUn0GGM9Z1Jrpr6PNPxPi+Za8OM9q4tksTSnlbXXGKK1nXNg/QvwFYettXvSX6zWKCtHHfjN4puyA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/core-js/-/core-js-3.26.1.tgz}
     requiresBuild: true
@@ -5369,6 +5480,10 @@ packages:
       - supports-color
     dev: true
 
+  /sortablejs/1.14.0:
+    resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
+    dev: false
+
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
@@ -5857,7 +5972,6 @@ packages:
 
   /tslib/2.4.1:
     resolution: {integrity: sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==}
-    dev: true
 
   /tsutils/3.21.0_typescript@4.9.4:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
@@ -6342,6 +6456,15 @@ packages:
       '@vue/server-renderer': 3.2.45_vue@3.2.45
       '@vue/shared': 3.2.45
 
+  /vuedraggable/4.1.0_vue@3.2.45:
+    resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
+    peerDependencies:
+      vue: ^3.0.1
+    dependencies:
+      sortablejs: 1.14.0
+      vue: 3.2.45
+    dev: false
+
   /vxe-table/4.3.9_vue@3.2.45+xe-utils@3.5.7:
     resolution: {integrity: sha512-Ns7Ooa7lOHBpks90i0k0BMNyxfMpUo39ryxTgKE41X3xVnI9tGQs2U6+klfDlsuqYfmG3ibyzHN3OCrWbbKo4Q==}
     peerDependencies:
@@ -6352,6 +6475,14 @@ packages:
       xe-utils: 3.5.7
     dev: false
 
+  /wangeditor/4.7.15:
+    resolution: {integrity: sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==}
+    dependencies:
+      '@babel/runtime': 7.20.1
+      '@babel/runtime-corejs3': 7.20.7
+      tslib: 2.4.1
+    dev: false
+
   /web-storage-cache/1.1.1:
     resolution: {integrity: sha512-D0MieGooOs8RpsrK+vnejXnvh4OOv/+lTFB35JRkJJQt+uOjPE08XpaE0QBLMTRu47B1KGT/Nq3Gbag3Orinzw==}
     dev: false
diff --git a/yudao-ui-admin-vue3/src/main.ts b/yudao-ui-admin-vue3/src/main.ts
index f5e3c024e..2adf9dc66 100644
--- a/yudao-ui-admin-vue3/src/main.ts
+++ b/yudao-ui-admin-vue3/src/main.ts
@@ -13,12 +13,15 @@ import { setupStore } from '@/store'
 // 全局组件
 import { setupGlobCom } from '@/components'
 
-// 引入element-plus
+// 引入 element-plus
 import { setupElementPlus } from '@/plugins/elementPlus'
 
-// 引入vxe-table
+// 引入 vxe-table
 import { setupVxeTable } from '@/plugins/vxeTable'
 
+// 引入 form-create
+import { setupFormCreate } from '@/plugins/formCreate'
+
 // 引入全局样式
 import '@/styles/index.scss'
 
@@ -39,6 +42,7 @@ import './permission'
 
 import { isDevMode } from '@/utils/env'
 
+// 本地开发模式 全局引入 element-plus 样式，加快第一次进入速度
 if (isDevMode()) {
   console.info(isDevMode())
   import('element-plus/dist/index.css')
@@ -58,6 +62,8 @@ const setupAll = async () => {
 
   setupVxeTable(app)
 
+  setupFormCreate(app)
+
   setupRouter(app)
 
   setupAuth(app)
diff --git a/yudao-ui-admin-vue3/src/plugins/formCreate/index.ts b/yudao-ui-admin-vue3/src/plugins/formCreate/index.ts
new file mode 100644
index 000000000..69816d8a7
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/plugins/formCreate/index.ts
@@ -0,0 +1,43 @@
+import type { App } from 'vue'
+// 👇使用 form-create 需额外全局引入 element plus 组件
+import {
+  ElAside,
+  ElPopconfirm,
+  ElHeader,
+  ElMain,
+  ElContainer,
+  ElDivider,
+  ElTransfer,
+  ElAlert,
+  ElTabs,
+  ElTabPane
+} from 'element-plus'
+
+import formCreate from '@form-create/element-ui'
+import install from '@form-create/element-ui/auto-import'
+import FcDesigner from '@form-create/designer'
+
+const components = [
+  ElAside,
+  ElPopconfirm,
+  ElHeader,
+  ElMain,
+  ElContainer,
+  ElDivider,
+  ElTransfer,
+  ElAlert,
+  ElTabs,
+  ElTabPane
+]
+
+export const setupFormCreate = (app: App<Element>) => {
+  components.forEach((component) => {
+    app.component(component.name, component)
+  })
+
+  formCreate.use(install)
+
+  app.use(formCreate)
+
+  app.use(FcDesigner)
+}
diff --git a/yudao-ui-admin-vue3/src/views/infra/build/index.vue b/yudao-ui-admin-vue3/src/views/infra/build/index.vue
index 514fd656d..c682a160f 100644
--- a/yudao-ui-admin-vue3/src/views/infra/build/index.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/build/index.vue
@@ -1,4 +1,8 @@
 <template>
-  <div>index</div>
+  <ContentWrap>
+    <fc-designer ref="designer" height="780px" />
+  </ContentWrap>
 </template>
-<script setup lang="ts" name="Build"></script>
+<script setup lang="ts" name="Build">
+const designer = ref()
+</script>

From b90b297e6fa0f5ec63a09dddb3a88838b22d60a8 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Thu, 19 Jan 2023 16:05:25 +0800
Subject: [PATCH 02/59] feat: form designer

---
 .../src/types/auto-components.d.ts            |  1 -
 .../src/views/infra/build/index.vue           | 79 ++++++++++++++++++-
 2 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/types/auto-components.d.ts b/yudao-ui-admin-vue3/src/types/auto-components.d.ts
index 46a1ae56c..a35bc2a30 100644
--- a/yudao-ui-admin-vue3/src/types/auto-components.d.ts
+++ b/yudao-ui-admin-vue3/src/types/auto-components.d.ts
@@ -51,7 +51,6 @@ declare module '@vue/runtime-core' {
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
-    ElScroll: typeof import('element-plus/es')['ElScroll']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
diff --git a/yudao-ui-admin-vue3/src/views/infra/build/index.vue b/yudao-ui-admin-vue3/src/views/infra/build/index.vue
index c682a160f..d3230a6d4 100644
--- a/yudao-ui-admin-vue3/src/views/infra/build/index.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/build/index.vue
@@ -1,8 +1,85 @@
 <template>
   <ContentWrap>
-    <fc-designer ref="designer" height="780px" />
+    <el-row>
+      <el-col>
+        <div class="mb-2 float-right">
+          <el-button size="small" @click="setJson"> 导入JSON</el-button>
+          <el-button size="small" @click="setOption"> 导入Options</el-button>
+          <el-button size="small" type="primary" @click="showJson">生成JSON</el-button>
+          <el-button size="small" type="success" @click="showOption">生成Options</el-button>
+          <el-button size="small" type="danger" @click="showTemplate">生成组件</el-button>
+          <el-button size="small" @click="changeLocale">中英切换</el-button>
+        </div>
+      </el-col>
+      <el-col>
+        <fc-designer ref="designer" height="780px" />
+      </el-col>
+    </el-row>
+    <Dialog :title="dialogTitle" v-model="dialogVisible" maxHeight="600">
+      <div ref="editor" v-if="dialogVisible">{{ formValue }}</div>
+      <span style="color: red" v-if="err">输入内容格式有误!</span>
+    </Dialog>
   </ContentWrap>
 </template>
 <script setup lang="ts" name="Build">
+import formCreate from '@form-create/element-ui'
+
 const designer = ref()
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const err = ref(false)
+const type = ref(-1)
+const formValue = ref('')
+
+const openModel = (title: string) => {
+  dialogVisible.value = true
+  dialogTitle.value = title
+}
+
+const setJson = () => {
+  openModel('导入JSON')
+}
+const setOption = () => {
+  openModel('导入Options')
+}
+const showJson = () => {
+  openModel('生成JSON')
+  type.value = 0
+  formValue.value = designer.value.getRule()
+}
+const showOption = () => {
+  openModel('生成Options')
+  type.value = 1
+  formValue.value = designer.value.getOption()
+}
+const showTemplate = () => {
+  openModel('生成组件')
+  type.value = 2
+  formValue.value = makeTemplate()
+}
+const changeLocale = () => {
+  console.info('changeLocale')
+}
+const makeTemplate = () => {
+  const rule = designer.value.getRule()
+  const opt = designer.value.getOption()
+  return `<template>
+  <form-create
+    v-model="fapi"
+    :rule="rule"
+    :option="option"
+    @submit="onSubmit"
+  ></form-create>
+</template>
+<script setup lang=ts>
+  import formCreate from "@form-create/element-ui";
+  const faps = ref(null)
+  const rule = formCreate.parseJson('${formCreate.toJson(rule).replaceAll('\\', '\\\\')}')
+  const option = formCreate.parseJson('${JSON.stringify(opt)}')
+  const onSubmit = (formData) => {
+    //todo 提交表单
+  }
+<\/script>`
+}
 </script>

From af0178e8ff8afd6fabd322286c7f19cbde08e5c4 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Thu, 19 Jan 2023 16:34:33 +0800
Subject: [PATCH 03/59] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E6=9E=84=E9=80=A0=E5=99=A8=E9=A2=84=E8=A7=88=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/infra/build/index.vue           | 40 ++++++++++++++++---
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/views/infra/build/index.vue b/yudao-ui-admin-vue3/src/views/infra/build/index.vue
index d3230a6d4..7da88f8c0 100644
--- a/yudao-ui-admin-vue3/src/views/infra/build/index.vue
+++ b/yudao-ui-admin-vue3/src/views/infra/build/index.vue
@@ -16,13 +16,24 @@
       </el-col>
     </el-row>
     <Dialog :title="dialogTitle" v-model="dialogVisible" maxHeight="600">
-      <div ref="editor" v-if="dialogVisible">{{ formValue }}</div>
+      <div ref="editor" v-if="dialogVisible">
+        <XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" />
+        <el-scrollbar height="580">
+          <pre>
+            {{ formValue }}
+          </pre>
+        </el-scrollbar>
+      </div>
       <span style="color: red" v-if="err">输入内容格式有误!</span>
     </Dialog>
   </ContentWrap>
 </template>
 <script setup lang="ts" name="Build">
 import formCreate from '@form-create/element-ui'
+import { useClipboard } from '@vueuse/core'
+
+const { t } = useI18n()
+const message = useMessage()
 
 const designer = ref()
 
@@ -38,10 +49,10 @@ const openModel = (title: string) => {
 }
 
 const setJson = () => {
-  openModel('导入JSON')
+  openModel('导入JSON--未实现')
 }
 const setOption = () => {
-  openModel('导入Options')
+  openModel('导入Options--未实现')
 }
 const showJson = () => {
   openModel('生成JSON')
@@ -61,6 +72,20 @@ const showTemplate = () => {
 const changeLocale = () => {
   console.info('changeLocale')
 }
+
+/** 复制 **/
+const copy = async (text: string) => {
+  const { copy, copied, isSupported } = useClipboard({ source: text })
+  if (!isSupported) {
+    message.error(t('common.copyError'))
+  } else {
+    await copy()
+    if (unref(copied)) {
+      message.success(t('common.copySuccess'))
+    }
+  }
+}
+
 const makeTemplate = () => {
   const rule = designer.value.getRule()
   const opt = designer.value.getOption()
@@ -75,11 +100,16 @@ const makeTemplate = () => {
 <script setup lang=ts>
   import formCreate from "@form-create/element-ui";
   const faps = ref(null)
-  const rule = formCreate.parseJson('${formCreate.toJson(rule).replaceAll('\\', '\\\\')}')
-  const option = formCreate.parseJson('${JSON.stringify(opt)}')
+  const rule = ref('')
+  const option = ref('')
+  const init = () => {
+    rule.value = formCreate.parseJson('${formCreate.toJson(rule).replaceAll('\\', '\\\\')}')
+    option.value = formCreate.parseJson('${JSON.stringify(opt)}')
+  }
   const onSubmit = (formData) => {
     //todo 提交表单
   }
+  init()
 <\/script>`
 }
 </script>

From 2d85f11f82a27c4ef09780565e06e6ad3e73538e Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 19 Jan 2023 16:49:57 +0800
Subject: [PATCH 04/59] =?UTF-8?q?bpm=EF=BC=9A=E6=B5=81=E7=A8=8B=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=20100%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bpm/form/form.data.ts           |  76 ++---
 .../src/views/bpm/form/index.vue              | 263 ++++++++----------
 2 files changed, 148 insertions(+), 191 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts b/yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts
index 8e2ed896c..a07a56596 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts
+++ b/yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts
@@ -1,4 +1,5 @@
-import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
+
 const { t } = useI18n() // 国际化
 
 // 表单校验
@@ -7,52 +8,33 @@ export const rules = reactive({
 })
 
 // CrudSchema
-const crudSchemas = reactive<CrudSchema[]>([
-  {
-    label: t('common.index'),
-    field: 'id',
-    type: 'index',
-    form: {
-      show: false
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: 'seq',
+  primaryTitle: '表单编号',
+  action: true,
+  columns: [
+    {
+      title: '表单名',
+      field: 'name',
+      isSearch: true
     },
-    detail: {
-      show: false
-    }
-  },
-  {
-    label: '表单名',
-    field: 'name',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: t('common.status'),
-    field: 'status',
-    dictType: DICT_TYPE.COMMON_STATUS,
-    dictClass: 'number'
-  },
-  {
-    label: '备注',
-    field: 'remark'
-  },
-  {
-    label: t('common.createTime'),
-    field: 'createTime',
-    form: {
-      show: false
-    }
-  },
-  {
-    label: t('table.action'),
-    field: 'action',
-    width: '240px',
-    form: {
-      show: false
+    {
+      title: t('common.status'),
+      field: 'status',
+      dictType: DICT_TYPE.COMMON_STATUS,
+      dictClass: 'number'
     },
-    detail: {
-      show: false
+    {
+      title: '备注',
+      field: 'remark'
+    },
+    {
+      title: t('common.createTime'),
+      field: 'createTime',
+      formatter: 'formatDate',
+      isForm: false
     }
-  }
-])
-export const { allSchemas } = useCrudSchemas(crudSchemas)
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/yudao-ui-admin-vue3/src/views/bpm/form/index.vue b/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
index eff394704..068b60b1f 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
@@ -1,165 +1,140 @@
-<script setup lang="ts" name="Form">
-import dayjs from 'dayjs'
-import { DICT_TYPE } from '@/utils/dict'
-import type { FormExpose } from '@/components/Form'
-import type { FormVO } from '@/api/bpm/form/types'
-import { rules, allSchemas } from './form.data'
+<template>
+  <ContentWrap>
+    <!-- 列表 -->
+    <div>
+      <XTable @register="registerTable">
+        <!-- 操作：新增 -->
+        <template #toolbar_buttons>
+          <XButton
+            type="primary"
+            preIcon="ep:zoom-in"
+            :title="t('action.add')"
+            v-hasPermi="['system:post:create']"
+            @click="handleCreate()"
+          />
+        </template>
+        <template #actionbtns_default="{ row }">
+          <!-- 操作：修改 -->
+          <XTextButton
+            preIcon="ep:edit"
+            :title="t('action.edit')"
+            v-hasPermi="['bpm:form:update']"
+            @click="handleUpdate(row.id)"
+          />
+          <!-- 操作：详情 -->
+          <XTextButton
+            preIcon="ep:view"
+            :title="t('action.detail')"
+            v-hasPermi="['bpm:form:query']"
+            @click="handleDetail(row.id)"
+          />
+          <!-- 操作：删除 -->
+          <XTextButton
+            preIcon="ep:delete"
+            :title="t('action.del')"
+            v-hasPermi="['bpm:form:delete']"
+            @click="deleteData(row.id)"
+          />
+        </template>
+      </XTable>
+      <!-- TODO 芋艿：待完善 -->
+      <XModal v-model="detailOpen" width="400" title="表单详情">
+        <!-- <div class="test-form">
+          <parser :key="new Date().getTime()" :form-conf="detailForm" />
+        </div> -->
+        表单详情
+      </XModal>
+    </div>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts" name="BpmForm">
+// 全局相关的 import
+// import { ref } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+import { useXTable } from '@/hooks/web/useXTable'
+// import { FormExpose } from '@/components/Form'
+// 业务相关的 import
 import * as FormApi from '@/api/bpm/form'
-import { useTable } from '@/hooks/web/useTable'
+import { allSchemas } from './form.data'
+import { useRouter } from 'vue-router'
+// import { decodeFields } from '@/utils/formGenerator' // TODO 芋艿：可能要清理下
+
 const { t } = useI18n() // 国际化
-const message = useMessage()
+const message = useMessage() // 消息弹窗
+const router = useRouter() // 路由
 
-// ========== 列表相关 ==========
-const { register, tableObject, methods } = useTable<FormVO>({
+// 列表相关的变量
+const [registerTable, { deleteData }] = useXTable({
+  allSchemas: allSchemas,
   getListApi: FormApi.getFormPageApi,
-  delListApi: FormApi.deleteFormApi
+  deleteApi: FormApi.deleteFormApi
 })
-const { getList, setSearchParams, delList } = methods
 
-// ========== CRUD 相关 ==========
-const actionLoading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const formRef = ref<FormExpose>() // 表单 Ref
+// 弹窗相关的变量
+// const modelVisible = ref(false) // 是否显示弹出层
+// const modelTitle = ref('edit') // 弹出层标题
+// const modelLoading = ref(false) // 弹出层loading
+// const actionType = ref('') // 操作按钮的类型
+// const actionLoading = ref(false) // 按钮 Loading
+// const formRef = ref<FormExpose>() // 表单 Ref
+// const detailData = ref() // 详情 Ref
 
 // 设置标题
-const setDialogTile = (type: string) => {
-  dialogTitle.value = t('action.' + type)
-  actionType.value = type
-  dialogVisible.value = true
-}
+// const setDialogTile = (type: string) => {
+//   modelLoading.value = true
+//   modelTitle.value = t('action.' + type)
+//   actionType.value = type
+//   modelVisible.value = true
+// }
 
 // 新增操作
 const handleCreate = () => {
-  setDialogTile('create')
+  console.log('新增')
+  if (true) {
+    message.success('动态表单开发中，预计 2 月底完成')
+    return
+  }
+  router.push({
+    path: '/manager/form/edit'
+  })
 }
 
 // 修改操作
-const handleUpdate = async (row: FormVO) => {
-  setDialogTile('update')
-  // 设置数据
-  const res = await FormApi.getFormApi(row.id)
-  unref(formRef)?.setValues(res)
-}
-
-// 提交按钮
-const submitForm = async () => {
-  const elForm = unref(formRef)?.getElFormRef()
-  if (!elForm) return
-  elForm.validate(async (valid) => {
-    if (valid) {
-      actionLoading.value = true
-      // 提交请求
-      try {
-        const data = unref(formRef)?.formModel as FormVO
-        if (actionType.value === 'create') {
-          await FormApi.createFormApi(data)
-          message.success(t('common.createSuccess'))
-        } else {
-          await FormApi.updateFormApi(data)
-          message.success(t('common.updateSuccess'))
-        }
-        // 操作成功，重新加载列表
-        dialogVisible.value = false
-        await getList()
-      } finally {
-        actionLoading.value = false
-      }
+const handleUpdate = async (rowId: number) => {
+  console.log(rowId, '修改')
+  if (true) {
+    message.success('动态表单开发中，预计 2 月底完成')
+    return
+  }
+  await router.push({
+    path: '/bpm/manager/form/edit',
+    query: {
+      formId: rowId
     }
   })
 }
 
-// ========== 详情相关 ==========
-const detailData = ref() // 详情 Ref
+// 详情操作 // TODO 芋艿：详情的实现
+// const detailForm = ref({
+//   fields: []
+// })
+// 表单详情弹出窗显示隐藏
+// const detailOpen = ref(false)
 
-// 详情操作
-const handleDetail = async (row: FormVO) => {
-  // 设置数据
-  detailData.value = row
-  setDialogTile('detail')
+const handleDetail = async (rowId: number) => {
+  console.log(rowId, '详情')
+  message.success('动态表单开发中，预计 2 月底完成')
+  // FormApi.getFormApi(row.id).then((response) => {
+  //   // 设置值
+  //   const data = response.data
+  //   detailForm.value = {
+  //     ...JSON.parse(data.conf),
+  //     fields: decodeFields([], data.fields)
+  //   }
+  //   // 弹窗打开
+  //   detailOpen.value = true
+  // })
 }
-
-// ========== 初始化 ==========
-getList()
 </script>
-
-<template>
-  <!-- 搜索工作区 -->
-  <ContentWrap>
-    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
-  </ContentWrap>
-  <ContentWrap>
-    <!-- 操作工具栏 -->
-    <div class="mb-10px">
-      <el-button type="primary" v-hasPermi="['bpm:form:create']" @click="handleCreate()">
-        <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
-      </el-button>
-    </div>
-    <!-- 列表 -->
-    <Table
-      :columns="allSchemas.tableColumns"
-      :selection="false"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
-      :pagination="{
-        total: tableObject.total
-      }"
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
-      @register="register"
-    >
-      <template #status="{ row }">
-        <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
-      </template>
-      <template #createTime="{ row }">
-        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-      <template #action="{ row }">
-        <el-button link type="primary" v-hasPermi="['bpm:form:update']" @click="handleUpdate(row)">
-          <Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
-        </el-button>
-        <el-button link type="primary" v-hasPermi="['bpm:form:update']" @click="handleDetail(row)">
-          <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['bpm:form:delete']"
-          @click="delList(row.id, false)"
-        >
-          <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
-        </el-button>
-      </template>
-    </Table>
-  </ContentWrap>
-
-  <XModal v-model="dialogVisible" :title="dialogTitle">
-    <!-- 对话框(添加 / 修改) -->
-    <Form
-      v-if="['create', 'update'].includes(actionType)"
-      :schema="allSchemas.formSchema"
-      :rules="rules"
-      ref="formRef"
-    />
-    <!-- 对话框(详情) -->
-    <Descriptions
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    />
-    <!-- 操作按钮 -->
-    <template #footer>
-      <!-- 按钮：保存 -->
-      <XButton
-        v-if="['create', 'update'].includes(actionType)"
-        type="primary"
-        :title="t('action.save')"
-        :loading="actionLoading"
-        @click="submitForm()"
-      />
-      <!-- 按钮：关闭 -->
-      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
-    </template>
-  </XModal>
-</template>

From fabdccd981c442823dad0a376dfda453ce8ccc8f Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 19 Jan 2023 17:11:31 +0800
Subject: [PATCH 05/59] =?UTF-8?q?bpm=EF=BC=9A=E6=B5=81=E7=A8=8B=E5=88=86?=
 =?UTF-8?q?=E9=85=8D=E4=BB=BB=E5=8A=A1=E7=9A=84=E5=88=97=E8=A1=A8=2050%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-ui-admin-vue3/package.json              |   1 +
 .../src/router/modules/remaining.ts           |  33 ++
 .../src/views/bpm/taskAssignRule/index.vue    | 309 +++++++++++++++++-
 .../bpm/taskAssignRule/taskAssignRule.data.ts |  37 +++
 4 files changed, 378 insertions(+), 2 deletions(-)
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/taskAssignRule.data.ts

diff --git a/yudao-ui-admin-vue3/package.json b/yudao-ui-admin-vue3/package.json
index 7da9c5ff1..2302aba48 100644
--- a/yudao-ui-admin-vue3/package.json
+++ b/yudao-ui-admin-vue3/package.json
@@ -52,6 +52,7 @@
     "vue-i18n": "9.2.2",
     "vue-router": "^4.1.6",
     "vue-types": "^5.0.2",
+    "vue3-treeselect": "^0.1.10",
     "vxe-table": "^4.3.9",
     "web-storage-cache": "^1.1.1",
     "xe-utils": "^3.5.7"
diff --git a/yudao-ui-admin-vue3/src/router/modules/remaining.ts b/yudao-ui-admin-vue3/src/router/modules/remaining.ts
index e511e1948..1fb7c2ae8 100644
--- a/yudao-ui-admin-vue3/src/router/modules/remaining.ts
+++ b/yudao-ui-admin-vue3/src/router/modules/remaining.ts
@@ -177,6 +177,39 @@ const remainingRouter: AppRouteRecordRaw[] = [
       title: '500',
       noTagsView: true
     }
+  },
+  {
+    path: '/bpm',
+    component: Layout,
+    name: 'bpm',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: '/manager/definition',
+        component: () => import('@/views/bpm/definition/index.vue'),
+        name: 'BpmProcessDefinitionList',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '流程定义',
+          activeMenu: 'bpm/definition/index'
+        }
+      },
+      {
+        path: '/manager/task-assign-rule',
+        component: () => import('@/views/bpm/taskAssignRule/index.vue'),
+        name: 'BpmTaskAssignRuleList',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '任务分配规则'
+        }
+      }
+    ]
   }
 ]
 
diff --git a/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue
index 674c390f1..7060485cd 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue
@@ -1,4 +1,309 @@
 <template>
-  <div>index</div>
+  <ContentWrap>
+    <!-- 列表 -->
+    <XTable @register="registerTable">
+      <template #options_default="{ row }">
+        <el-tag :key="option" v-for="option in row.options">
+          {{ getAssignRuleOptionName(row.type, option) }}
+        </el-tag>
+      </template>
+      <!-- 操作 -->
+      <template #actionbtns_default="{ row }" v-if="modelId">
+        <vxe-button
+          type="text"
+          status="primary"
+          content="修改"
+          icon="vxe-icon-edit"
+          @click="handleUpdate(row)"
+        />
+      </template>
+    </XTable>
+
+    <!-- 添加/修改弹窗 -->
+    <XModal v-model="openVisible" title="修改任务规则" width="800" height="35%" resize>
+      <el-form
+        ref="xForm"
+        :model="formData"
+        :rules="formRules"
+        label-width="120px"
+        class="demo-ruleForm"
+        size="default"
+        status-icon
+      >
+        <el-form-item label="任务名称" prop="taskDefinitionName">
+          <el-input -model="formData.taskDefinitionName" placeholder="请输入流标标识" disabled />
+        </el-form-item>
+        <el-form-item label="任务标识" prop="taskDefinitionKey">
+          <el-input v-model="formData.taskDefinitionKey" placeholder="请输入任务标识" disabled />
+        </el-form-item>
+        <el-form-item label="规则类型" prop="type">
+          <el-select v-model="formData.type" clearable style="width: 100%">
+            <el-option
+              v-for="dict in taskAssignRuleTypeDictDatas"
+              :key="parseInt(dict.value)"
+              :label="dict.label"
+              :value="parseInt(dict.value)"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="formData.type === 10" label="指定角色" prop="roleIds">
+          <el-select v-model="formData.roleIds" multiple clearable style="width: 100%">
+            <el-option
+              v-for="item in roleOptions"
+              :key="parseInt(item.id)"
+              :label="item.name"
+              :value="parseInt(item.id)"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="指定部门"
+          prop="deptIds"
+          span="24"
+          v-if="formData.type === 20 || formData.type === 21"
+        >
+          <treeselect
+            v-model="formData.deptIds"
+            :options="deptTreeOptions"
+            multiple
+            flat
+            :defaultExpandLevel="3"
+            placeholder="请选择指定部门"
+            :normalizer="normalizer"
+          />
+        </el-form-item>
+        <el-form-item label="指定岗位" prop="postIds" span="24" v-if="formData.type === 22">
+          <el-select v-model="formData.postIds" multiple clearable style="width: 100%">
+            <el-option
+              v-for="item in postOptions"
+              :key="parseInt(item.id)"
+              :label="item.name"
+              :value="parseInt(item.id)"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="指定用户"
+          prop="userIds"
+          span="24"
+          v-if="formData.type === 30 || formData.type === 31 || formData.type === 32"
+        >
+          <el-select v-model="formData.userIds" multiple clearable style="width: 100%">
+            <el-option
+              v-for="item in userOptions"
+              :key="parseInt(item.id)"
+              :label="item.nickname"
+              :value="parseInt(item.id)"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="指定用户组" prop="userGroupIds" v-if="formData.type === 40">
+          <el-select v-model="formData.userGroupIds" multiple clearable style="width: 100%">
+            <el-option
+              v-for="item in userGroupOptions"
+              :key="parseInt(item.id)"
+              :label="item.name"
+              :value="parseInt(item.id)"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="指定脚本" prop="scripts" v-if="formData.type === 50">
+          <el-select v-model="formData.scripts" multiple clearable style="width: 100%">
+            <el-option
+              v-for="dict in taskAssignScriptDictDatas"
+              :key="parseInt(dict.value)"
+              :label="dict.label"
+              :value="parseInt(dict.value)"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <XButton type="primary" title="保存" :loading="loading" @click="submitEvent(xForm)" />
+        <XButton title="关闭" @click="resetEvent(xForm)" />
+      </template>
+    </XModal>
+  </ContentWrap>
 </template>
-<script setup lang="ts" name="TaskAssignRule"></script>
+<script setup lang="ts" name="TaskAssignRule">
+// 全局相关的 import
+import { onMounted, reactive, ref } from 'vue'
+import { ElInput, ElTag, ElOption, ElSelect, ElForm, ElFormItem } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+
+// 业务相关的 import
+import Treeselect from 'vue3-treeselect'
+import 'vue3-treeselect/dist/vue3-treeselect.css'
+import { useXTable } from '@/hooks/web/useXTable'
+import { allSchemas } from './taskAssignRule.data'
+import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule'
+import { listSimpleRolesApi } from '@/api/system/role'
+import { handleTree } from '@/utils/tree'
+import { listSimplePostsApi } from '@/api/system/post'
+import { getListSimpleUsersApi } from '@/api/system/user'
+import { listSimpleUserGroupsApi } from '@/api/bpm/userGroup'
+import { listSimpleDeptApi } from '@/api/system/dept'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+// import {useI18n} from "@/hooks/web/useI18n";
+// import {useMessage} from "@/hooks/web/useMessage";
+import { useRoute } from 'vue-router'
+
+// const { t } = useI18n() // 国际化
+// const message = useMessage() // 消息弹窗
+// const router = useRouter() // 路由
+const { query } = useRoute()
+
+// ========== 列表相关 ==========
+
+// 流程模型的编号。如果 modelId 非空，则用于流程模型的查看与配置
+const modelId = query.modelId
+// 流程定义的编号。如果 processDefinitionId 非空，则用于流程定义的查看，不支持配置
+const processDefinitionId = query.processDefinitionId
+// 查询参数
+const queryParams = reactive({
+  modelId: modelId,
+  processDefinitionId: processDefinitionId
+})
+const [registerTable] = useXTable({
+  allSchemas: allSchemas,
+  params: queryParams,
+  getListApi: TaskAssignRuleApi.getTaskAssignRuleList,
+  isList: false // TODO 如果 isList 改成 true 时，进入页面不会加载数据
+})
+// 修改任务责任表单
+const xForm = ref<FormInstance>()
+const formData = ref()
+const formRules = reactive({
+  type: [{ required: true, message: '规则类型不能为空', trigger: 'change' }],
+  roleIds: [{ required: true, message: '指定角色不能为空', trigger: 'change' }],
+  deptIds: [{ required: true, message: '指定部门不能为空', trigger: 'change' }],
+  postIds: [{ required: true, message: '指定岗位不能为空', trigger: 'change' }],
+  userIds: [{ required: true, message: '指定用户不能为空', trigger: 'change' }],
+  userGroupIds: [{ required: true, message: '指定用户组不能为空', trigger: 'change' }],
+  scripts: [{ required: true, message: '指定脚本不能为空', trigger: 'change' }]
+})
+const loading = ref(false)
+
+const roleOptions = ref() // 角色列表
+const deptOptions = ref() // 部门列表
+const deptTreeOptions = ref()
+const postOptions = ref() // 岗位列表
+const userOptions = ref() // 用户列表
+const userGroupOptions = ref() // 用户组列表
+const taskAssignScriptDictDatas = getDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT)
+const taskAssignRuleTypeDictDatas = getDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE)
+
+// 修改任务分配规则
+const openVisible = ref(false)
+
+// 添加修改弹窗提交修改
+const submitEvent = async (formEl: FormInstance | undefined) => {
+  console.log('确认')
+  if (!formEl) return
+  loading.value = true
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+      loading.value = false
+      openVisible.value = false
+    } else {
+      console.log('error submit!', fields)
+      loading.value = false
+    }
+  })
+}
+
+const resetEvent = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+  openVisible.value = false
+}
+
+// 修改任务分配规则
+const handleUpdate = (row) => {
+  console.log(row, '修改i数据')
+  openVisible.value = true
+  formData.value = { ...row }
+}
+// 类型字典
+const getAssignRuleOptionName = (type, option) => {
+  if (type === 10) {
+    for (const roleOption of roleOptions.value) {
+      if (roleOption.id === option) {
+        return roleOption.name
+      }
+    }
+  } else if (type === 20 || type === 21) {
+    for (const deptOption of deptOptions.value) {
+      if (deptOption.id === option) {
+        return deptOption.name
+      }
+    }
+  } else if (type === 22) {
+    for (const postOption of postOptions.value) {
+      if (postOption.id === option) {
+        return postOption.name
+      }
+    }
+  } else if (type === 30 || type === 31 || type === 32) {
+    for (const userOption of userOptions.value) {
+      if (userOption.id === option) {
+        return userOption.nickname
+      }
+    }
+  } else if (type === 40) {
+    for (const userGroupOption of userGroupOptions.value) {
+      if (userGroupOption.id === option) {
+        return userGroupOption.name
+      }
+    }
+  } else if (type === 50) {
+    option = option + '' // 转换成 string
+    for (const dictData of taskAssignScriptDictDatas) {
+      if (dictData.value === option) {
+        return dictData.label
+      }
+    }
+  }
+  return '未知(' + option + ')'
+}
+// 格式化部门的下拉框
+const normalizer = (node) => {
+  return {
+    id: node.id,
+    label: node.name,
+    children: node.children
+  }
+}
+
+// ========== 初始化 ==========
+onMounted(() => {
+  // 获得角色列表
+  roleOptions.value = []
+  listSimpleRolesApi().then((data) => {
+    roleOptions.value.push(...data)
+  })
+  // 获得部门列表
+  deptOptions.value = []
+  deptTreeOptions.value = []
+  listSimpleDeptApi().then((data) => {
+    deptOptions.value.push(...data)
+    deptTreeOptions.value.push(...handleTree(data, 'id'))
+  })
+  // 获得岗位列表
+  postOptions.value = []
+  listSimplePostsApi().then((data) => {
+    postOptions.value.push(...data)
+  })
+  // 获得用户列表
+  userOptions.value = []
+  getListSimpleUsersApi().then((data) => {
+    userOptions.value.push(...data)
+  })
+  // 获得用户组列表
+  userGroupOptions.value = []
+  listSimpleUserGroupsApi().then((data) => {
+    userGroupOptions.value.push(...data)
+  })
+})
+</script>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/taskAssignRule.data.ts b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/taskAssignRule.data.ts
new file mode 100644
index 000000000..f66a7fbe9
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/taskAssignRule.data.ts
@@ -0,0 +1,37 @@
+import { reactive } from 'vue'
+import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
+import { DICT_TYPE } from '@/utils/dict'
+
+// CrudSchema
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: null,
+  action: true,
+  actionWidth: '200px',
+  columns: [
+    {
+      title: '任务名',
+      field: 'taskDefinitionName'
+    },
+    {
+      title: '任务标识',
+      field: 'taskDefinitionKey'
+    },
+    {
+      title: '规则类型',
+      field: 'category',
+      dictType: DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE,
+      dictClass: 'number'
+    },
+    {
+      title: '规则范围',
+      field: 'options',
+      table: {
+        slots: {
+          default: 'options_default'
+        }
+      }
+    }
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

From c9d1100eacd139c625433aa15e7d5f62e511a211 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Thu, 19 Jan 2023 18:19:01 +0800
Subject: [PATCH 06/59] perf: task assign rule

---
 yudao-ui-admin-vue3/package.json              |  1 -
 .../src/views/bpm/taskAssignRule/index.vue    | 31 ++++++-------------
 .../bpm/taskAssignRule/taskAssignRule.data.ts |  4 +--
 3 files changed, 10 insertions(+), 26 deletions(-)

diff --git a/yudao-ui-admin-vue3/package.json b/yudao-ui-admin-vue3/package.json
index 2302aba48..7da9c5ff1 100644
--- a/yudao-ui-admin-vue3/package.json
+++ b/yudao-ui-admin-vue3/package.json
@@ -52,7 +52,6 @@
     "vue-i18n": "9.2.2",
     "vue-router": "^4.1.6",
     "vue-types": "^5.0.2",
-    "vue3-treeselect": "^0.1.10",
     "vxe-table": "^4.3.9",
     "web-storage-cache": "^1.1.1",
     "xe-utils": "^3.5.7"
diff --git a/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue
index 7060485cd..d3b6a19b3 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue
@@ -62,14 +62,14 @@
           span="24"
           v-if="formData.type === 20 || formData.type === 21"
         >
-          <treeselect
+          <el-tree-select
+            ref="treeRef"
             v-model="formData.deptIds"
-            :options="deptTreeOptions"
-            multiple
-            flat
-            :defaultExpandLevel="3"
-            placeholder="请选择指定部门"
-            :normalizer="normalizer"
+            node-key="id"
+            show-checkbox
+            :props="defaultProps"
+            :data="deptTreeOptions"
+            empty-text="加载中，请稍后"
           />
         </el-form-item>
         <el-form-item label="指定岗位" prop="postIds" span="24" v-if="formData.type === 22">
@@ -127,18 +127,13 @@
 </template>
 <script setup lang="ts" name="TaskAssignRule">
 // 全局相关的 import
-import { onMounted, reactive, ref } from 'vue'
-import { ElInput, ElTag, ElOption, ElSelect, ElForm, ElFormItem } from 'element-plus'
 import type { FormInstance } from 'element-plus'
 
 // 业务相关的 import
-import Treeselect from 'vue3-treeselect'
-import 'vue3-treeselect/dist/vue3-treeselect.css'
-import { useXTable } from '@/hooks/web/useXTable'
 import { allSchemas } from './taskAssignRule.data'
 import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule'
 import { listSimpleRolesApi } from '@/api/system/role'
-import { handleTree } from '@/utils/tree'
+import { handleTree, defaultProps } from '@/utils/tree'
 import { listSimplePostsApi } from '@/api/system/post'
 import { getListSimpleUsersApi } from '@/api/system/user'
 import { listSimpleUserGroupsApi } from '@/api/bpm/userGroup'
@@ -168,7 +163,7 @@ const [registerTable] = useXTable({
   allSchemas: allSchemas,
   params: queryParams,
   getListApi: TaskAssignRuleApi.getTaskAssignRuleList,
-  isList: false // TODO 如果 isList 改成 true 时，进入页面不会加载数据
+  isList: true
 })
 // 修改任务责任表单
 const xForm = ref<FormInstance>()
@@ -267,14 +262,6 @@ const getAssignRuleOptionName = (type, option) => {
   }
   return '未知(' + option + ')'
 }
-// 格式化部门的下拉框
-const normalizer = (node) => {
-  return {
-    id: node.id,
-    label: node.name,
-    children: node.children
-  }
-}
 
 // ========== 初始化 ==========
 onMounted(() => {
diff --git a/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/taskAssignRule.data.ts b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/taskAssignRule.data.ts
index f66a7fbe9..5bb6d2638 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/taskAssignRule.data.ts
+++ b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/taskAssignRule.data.ts
@@ -1,6 +1,4 @@
-import { reactive } from 'vue'
-import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
-import { DICT_TYPE } from '@/utils/dict'
+import { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
 
 // CrudSchema
 const crudSchemas = reactive<VxeCrudSchema>({

From a3f57a44242758e1517adf7b75fe227eeee118ff Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 19 Jan 2023 23:30:02 +0800
Subject: [PATCH 07/59] =?UTF-8?q?bpm=EF=BC=9A=E5=A2=9E=E5=8A=A0=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=A1=A8=E5=8D=95=E7=9A=84=E4=BF=9D=E5=AD=98=E7=AA=97?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/router/modules/remaining.ts           | 12 +++
 .../src/views/bpm/form/formEditor.vue         | 79 +++++++++++++++++++
 .../src/views/bpm/form/index.vue              |  7 +-
 3 files changed, 92 insertions(+), 6 deletions(-)
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue

diff --git a/yudao-ui-admin-vue3/src/router/modules/remaining.ts b/yudao-ui-admin-vue3/src/router/modules/remaining.ts
index 1fb7c2ae8..43ad50aa6 100644
--- a/yudao-ui-admin-vue3/src/router/modules/remaining.ts
+++ b/yudao-ui-admin-vue3/src/router/modules/remaining.ts
@@ -186,6 +186,18 @@ const remainingRouter: AppRouteRecordRaw[] = [
       hidden: true
     },
     children: [
+      {
+        path: '/manager/form/edit',
+        component: () => import('@/views/bpm/form/formEditor.vue'),
+        name: 'bpmFormEditor',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '流程表单',
+          activeMenu: 'bpm/manager/form/formEditor'
+        }
+      },
       {
         path: '/manager/definition',
         component: () => import('@/views/bpm/definition/index.vue'),
diff --git a/yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue b/yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue
new file mode 100644
index 000000000..201b663f2
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue
@@ -0,0 +1,79 @@
+<template>
+  <ContentWrap>
+    <!-- 表单设计器 -->
+    <fc-designer ref="designer" height="780px">
+      <template #handle>
+        <XButton type="primary" :title="t('action.save')" @click="handleSave" />
+      </template>
+    </fc-designer>
+    <!-- 表单保存的弹窗 -->
+    <XModal v-model="dialogVisible" title="保存表单">
+      <el-form :model="formValues" :rules="formRules" label-width="80px">
+        <el-form-item label="表单名" prop="name">
+          <el-input v-model="formValues.name" placeholder="请输入表单名" />
+        </el-form-item>
+        <el-form-item label="开启状态" prop="status">
+          <el-radio-group v-model="formValues.status">
+            <el-radio
+              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="dict.value"
+              :label="dict.value"
+            >
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formValues.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <!-- 操作按钮 -->
+      <template #footer>
+        <!-- 按钮：保存 -->
+        <XButton
+          type="primary"
+          :title="t('action.save')"
+          :loading="dialogLoading"
+          @click="submitForm"
+        />
+        <!-- 按钮：关闭 -->
+        <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
+      </template>
+    </XModal>
+  </ContentWrap>
+</template>
+<script setup lang="ts" name="BpmFormEditor">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import { reactive } from 'vue'
+
+const { t } = useI18n() // 国际化
+// const message = useMessage() // 消息
+
+const designer = ref() // 表单设计器
+
+const dialogVisible = ref(false)
+const dialogLoading = ref(false)
+const formRules = reactive({
+  name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
+})
+const formValues = reactive({
+  name: '',
+  status: CommonStatusEnum.ENABLE,
+  remark: ''
+})
+
+// 处理保存按钮
+const handleSave = () => {
+  dialogVisible.value = true
+}
+
+// 提交保存表单
+const submitForm = async () => {
+  console.log('保存')
+}
+
+// formValue.value = designer.value.getOption()
+// formValue.value = designer.value.getRule()
+</script>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/form/index.vue b/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
index 068b60b1f..37733533a 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
@@ -91,13 +91,8 @@ const [registerTable, { deleteData }] = useXTable({
 
 // 新增操作
 const handleCreate = () => {
-  console.log('新增')
-  if (true) {
-    message.success('动态表单开发中，预计 2 月底完成')
-    return
-  }
   router.push({
-    path: '/manager/form/edit'
+    name: 'bpmFormEditor'
   })
 }
 

From fe6adf693b94cfe6f3292f7e0396c7114e335b23 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 20 Jan 2023 13:40:00 +0800
Subject: [PATCH 08/59] =?UTF-8?q?bpm=EF=BC=9A=E5=AE=8C=E6=88=90=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../definition/BpmFormServiceImpl.java        |  9 +--
 yudao-ui-admin-vue3/src/api/bpm/form/index.ts | 11 ++-
 yudao-ui-admin-vue3/src/api/bpm/form/types.ts |  9 ---
 .../src/router/modules/remaining.ts           |  2 +-
 yudao-ui-admin-vue3/src/utils/formCreate.ts   | 45 +++++++++++
 .../src/views/bpm/form/formEditor.vue         | 57 +++++++++++---
 .../src/views/bpm/form/index.vue              | 78 +++++--------------
 7 files changed, 127 insertions(+), 84 deletions(-)
 delete mode 100644 yudao-ui-admin-vue3/src/api/bpm/form/types.ts
 create mode 100644 yudao-ui-admin-vue3/src/utils/formCreate.ts

diff --git a/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/service/definition/BpmFormServiceImpl.java b/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/service/definition/BpmFormServiceImpl.java
index 967ab8f49..e68a6b489 100644
--- a/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/service/definition/BpmFormServiceImpl.java
+++ b/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/service/definition/BpmFormServiceImpl.java
@@ -3,7 +3,6 @@ package cn.iocoder.yudao.module.bpm.service.definition;
 import cn.hutool.core.lang.Assert;
 import cn.iocoder.yudao.framework.common.pojo.PageResult;
 import cn.iocoder.yudao.framework.common.util.json.JsonUtils;
-import cn.iocoder.yudao.framework.common.util.validation.ValidationUtils;
 import cn.iocoder.yudao.module.bpm.controller.admin.definition.vo.form.BpmFormCreateReqVO;
 import cn.iocoder.yudao.module.bpm.controller.admin.definition.vo.form.BpmFormPageReqVO;
 import cn.iocoder.yudao.module.bpm.controller.admin.definition.vo.form.BpmFormUpdateReqVO;
@@ -107,17 +106,15 @@ public class BpmFormServiceImpl implements BpmFormService {
         return null;
     }
 
-    private void checkKeyNCName(String key) {
-        if (!ValidationUtils.isXmlNCName(key)) {
-            throw exception(MODEL_KEY_VALID);
-        }
-    }
     /**
      * 校验 Field，避免 field 重复
      *
      * @param fields field 数组
      */
     private void checkFields(List<String> fields) {
+        if (true) { // TODO 芋艿：兼容 Vue3 工作流：因为采用了新的表单设计器，所以暂时不校验
+            return;
+        }
         Map<String, String> fieldMap = new HashMap<>(); // key 是 vModel，value 是 label
         for (String field : fields) {
             BpmFormFieldRespDTO fieldDTO = JsonUtils.parseObject(field, BpmFormFieldRespDTO.class);
diff --git a/yudao-ui-admin-vue3/src/api/bpm/form/index.ts b/yudao-ui-admin-vue3/src/api/bpm/form/index.ts
index 15856c5a1..c745201f2 100644
--- a/yudao-ui-admin-vue3/src/api/bpm/form/index.ts
+++ b/yudao-ui-admin-vue3/src/api/bpm/form/index.ts
@@ -1,5 +1,14 @@
 import request from '@/config/axios'
-import { FormVO } from './types'
+
+export type FormVO = {
+  id: number
+  name: string
+  conf: string
+  fields: string[]
+  status: number
+  remark: string
+  createTime: string
+}
 
 // 创建工作流的表单定义
 export const createFormApi = async (data: FormVO) => {
diff --git a/yudao-ui-admin-vue3/src/api/bpm/form/types.ts b/yudao-ui-admin-vue3/src/api/bpm/form/types.ts
deleted file mode 100644
index 2bc8b6912..000000000
--- a/yudao-ui-admin-vue3/src/api/bpm/form/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type FormVO = {
-  id: number
-  name: string
-  conf: string
-  fields: string[]
-  status: number
-  remark: string
-  createTime: string
-}
diff --git a/yudao-ui-admin-vue3/src/router/modules/remaining.ts b/yudao-ui-admin-vue3/src/router/modules/remaining.ts
index 43ad50aa6..c53bcb2df 100644
--- a/yudao-ui-admin-vue3/src/router/modules/remaining.ts
+++ b/yudao-ui-admin-vue3/src/router/modules/remaining.ts
@@ -194,7 +194,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
           noCache: true,
           hidden: true,
           canTo: true,
-          title: '流程表单',
+          title: '设计流程表单',
           activeMenu: 'bpm/manager/form/formEditor'
         }
       },
diff --git a/yudao-ui-admin-vue3/src/utils/formCreate.ts b/yudao-ui-admin-vue3/src/utils/formCreate.ts
new file mode 100644
index 000000000..e70ae39e9
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/utils/formCreate.ts
@@ -0,0 +1,45 @@
+/**
+ * 针对 https://github.com/xaboy/form-create-designer 封装的工具类
+ */
+
+// 编码表单 Conf
+export const encodeConf = (designerRef: object) => {
+  // @ts-ignore
+  return JSON.stringify(designerRef.value.getOption())
+}
+
+// 编码表单 Fields
+export const encodeFields = (designerRef: object) => {
+  // @ts-ignore
+  const rule = designerRef.value.getRule()
+  const fields: string[] = []
+  rule.forEach((item) => {
+    fields.push(JSON.stringify(item))
+  })
+  return fields
+}
+
+// 解码表单 Fields
+export const decodeFields = (fields: string[]) => {
+  const rule: object[] = []
+  fields.forEach((item) => {
+    rule.push(JSON.parse(item))
+  })
+  return rule
+}
+
+// 设置表单的 Conf 和 Fields
+export const setConfAndFields = (designerRef: object, conf: string, fields: string) => {
+  // @ts-ignore
+  designerRef.value.setOption(JSON.parse(conf))
+  // @ts-ignore
+  designerRef.value.setRule(decodeFields(fields))
+}
+
+// 设置表单的 Conf 和 Fields
+export const setConfAndFields2 = (detailPreview: object, conf: string, fields: string) => {
+  // @ts-ignore
+  detailPreview.value.option = JSON.parse(conf)
+  // @ts-ignore
+  detailPreview.value.rule = decodeFields(fields)
+}
diff --git a/yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue b/yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue
index 201b663f2..d53791418 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue
@@ -8,7 +8,7 @@
     </fc-designer>
     <!-- 表单保存的弹窗 -->
     <XModal v-model="dialogVisible" title="保存表单">
-      <el-form :model="formValues" :rules="formRules" label-width="80px">
+      <el-form ref="formRef" :model="formValues" :rules="formRules" label-width="80px">
         <el-form-item label="表单名" prop="name">
           <el-input v-model="formValues.name" placeholder="请输入表单名" />
         </el-form-item>
@@ -43,22 +43,26 @@
   </ContentWrap>
 </template>
 <script setup lang="ts" name="BpmFormEditor">
+import { reactive } from 'vue'
+import { FormInstance } from 'element-plus'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
-import { reactive } from 'vue'
-
+import * as FormApi from '@/api/bpm/form'
+import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
 const { t } = useI18n() // 国际化
-// const message = useMessage() // 消息
+const message = useMessage() // 消息
+const { query } = useRoute() // 路由
 
 const designer = ref() // 表单设计器
 
-const dialogVisible = ref(false)
-const dialogLoading = ref(false)
+const dialogVisible = ref(false) // 弹窗是否展示
+const dialogLoading = ref(false) // 弹窗的加载中
+const formRef = ref<FormInstance>()
 const formRules = reactive({
   name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
   status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
 })
-const formValues = reactive({
+const formValues = ref({
   name: '',
   status: CommonStatusEnum.ENABLE,
   remark: ''
@@ -71,9 +75,42 @@ const handleSave = () => {
 
 // 提交保存表单
 const submitForm = async () => {
-  console.log('保存')
+  // 参数校验
+  const elForm = unref(formRef)
+  if (!elForm) return
+  const valid = await elForm.validate()
+  if (!valid) return
+
+  // 提交请求
+  dialogLoading.value = true
+  try {
+    const data = formValues.value as FormApi.FormVO
+    data.conf = encodeConf(designer) // 表单配置
+    data.fields = encodeFields(designer) // 表单字段
+    if (!data.id) {
+      await FormApi.createFormApi(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await FormApi.updateFormApi(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+  } finally {
+    dialogLoading.value = false
+  }
 }
 
-// formValue.value = designer.value.getOption()
-// formValue.value = designer.value.getRule()
+// ========== 初始化 ==========
+onMounted(() => {
+  // 场景一：新增表单
+  const id = query.id as unknown as number
+  if (!id) {
+    return
+  }
+  // 场景二：修改表单
+  FormApi.getFormApi(id).then((data) => {
+    formValues.value = data
+    setConfAndFields(designer, data.conf, data.fields)
+  })
+})
 </script>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/form/index.vue b/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
index 37733533a..749c2416f 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
@@ -37,12 +37,9 @@
           />
         </template>
       </XTable>
-      <!-- TODO 芋艿：待完善 -->
-      <XModal v-model="detailOpen" width="400" title="表单详情">
-        <!-- <div class="test-form">
-          <parser :key="new Date().getTime()" :form-conf="detailForm" />
-        </div> -->
-        表单详情
+      <!-- 表单详情的弹窗 -->
+      <XModal v-model="detailOpen" width="800" title="表单详情">
+        <ViewForm :rule="detailPreview.rule" :option="detailPreview.option" v-if="detailOpen" />
       </XModal>
     </div>
   </ContentWrap>
@@ -50,21 +47,18 @@
 
 <script setup lang="ts" name="BpmForm">
 // 全局相关的 import
-// import { ref } from 'vue'
-import { useI18n } from '@/hooks/web/useI18n'
-import { useMessage } from '@/hooks/web/useMessage'
-import { useXTable } from '@/hooks/web/useXTable'
-// import { FormExpose } from '@/components/Form'
 // 业务相关的 import
 import * as FormApi from '@/api/bpm/form'
 import { allSchemas } from './form.data'
-import { useRouter } from 'vue-router'
-// import { decodeFields } from '@/utils/formGenerator' // TODO 芋艿：可能要清理下
 
 const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
 const router = useRouter() // 路由
 
+// 表单详情相关的变量和 import
+import viewForm from '@form-create/element-ui'
+const ViewForm = viewForm.$form()
+import { setConfAndFields2 } from '@/utils/formCreate'
+
 // 列表相关的变量
 const [registerTable, { deleteData }] = useXTable({
   allSchemas: allSchemas,
@@ -72,23 +66,6 @@ const [registerTable, { deleteData }] = useXTable({
   deleteApi: FormApi.deleteFormApi
 })
 
-// 弹窗相关的变量
-// const modelVisible = ref(false) // 是否显示弹出层
-// const modelTitle = ref('edit') // 弹出层标题
-// const modelLoading = ref(false) // 弹出层loading
-// const actionType = ref('') // 操作按钮的类型
-// const actionLoading = ref(false) // 按钮 Loading
-// const formRef = ref<FormExpose>() // 表单 Ref
-// const detailData = ref() // 详情 Ref
-
-// 设置标题
-// const setDialogTile = (type: string) => {
-//   modelLoading.value = true
-//   modelTitle.value = t('action.' + type)
-//   actionType.value = type
-//   modelVisible.value = true
-// }
-
 // 新增操作
 const handleCreate = () => {
   router.push({
@@ -98,38 +75,25 @@ const handleCreate = () => {
 
 // 修改操作
 const handleUpdate = async (rowId: number) => {
-  console.log(rowId, '修改')
-  if (true) {
-    message.success('动态表单开发中，预计 2 月底完成')
-    return
-  }
   await router.push({
-    path: '/bpm/manager/form/edit',
+    name: 'bpmFormEditor',
     query: {
-      formId: rowId
+      id: rowId
     }
   })
 }
 
-// 详情操作 // TODO 芋艿：详情的实现
-// const detailForm = ref({
-//   fields: []
-// })
-// 表单详情弹出窗显示隐藏
-// const detailOpen = ref(false)
-
+// 详情操作
+const detailOpen = ref(false)
+const detailPreview = ref({
+  rule: [],
+  option: {}
+})
 const handleDetail = async (rowId: number) => {
-  console.log(rowId, '详情')
-  message.success('动态表单开发中，预计 2 月底完成')
-  // FormApi.getFormApi(row.id).then((response) => {
-  //   // 设置值
-  //   const data = response.data
-  //   detailForm.value = {
-  //     ...JSON.parse(data.conf),
-  //     fields: decodeFields([], data.fields)
-  //   }
-  //   // 弹窗打开
-  //   detailOpen.value = true
-  // })
+  // 设置表单
+  const data = await FormApi.getFormApi(rowId)
+  setConfAndFields2(detailPreview, data.conf, data.fields)
+  // 弹窗打开
+  detailOpen.value = true
 }
 </script>

From 9d9590212fa4d994356cd30f608bcbcd78c4c662 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 20 Jan 2023 15:12:12 +0800
Subject: [PATCH 09/59] =?UTF-8?q?bpm=EF=BC=9A=E5=AE=8C=E5=96=84=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=BB=84=E7=9A=84=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/bpm/userGroup/index.ts            |  11 +-
 .../src/api/bpm/userGroup/types.ts            |   9 -
 .../src/views/bpm/form/form.data.ts           |   5 +-
 .../src/views/bpm/group/group.data.ts         | 112 +++----
 .../src/views/bpm/group/index.vue             | 316 ++++++++----------
 5 files changed, 205 insertions(+), 248 deletions(-)
 delete mode 100644 yudao-ui-admin-vue3/src/api/bpm/userGroup/types.ts

diff --git a/yudao-ui-admin-vue3/src/api/bpm/userGroup/index.ts b/yudao-ui-admin-vue3/src/api/bpm/userGroup/index.ts
index e61ebf36d..88ee96197 100644
--- a/yudao-ui-admin-vue3/src/api/bpm/userGroup/index.ts
+++ b/yudao-ui-admin-vue3/src/api/bpm/userGroup/index.ts
@@ -1,5 +1,14 @@
 import request from '@/config/axios'
-import { UserGroupVO } from './types'
+
+export type UserGroupVO = {
+  id: number
+  name: string
+  description: string
+  memberUserIds: number[]
+  status: number
+  remark: string
+  createTime: string
+}
 
 // 创建用户组
 export const createUserGroupApi = async (data: UserGroupVO) => {
diff --git a/yudao-ui-admin-vue3/src/api/bpm/userGroup/types.ts b/yudao-ui-admin-vue3/src/api/bpm/userGroup/types.ts
deleted file mode 100644
index d0d67ad43..000000000
--- a/yudao-ui-admin-vue3/src/api/bpm/userGroup/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type UserGroupVO = {
-  id: number
-  name: string
-  description: string
-  memberUserIds: number[]
-  status: number
-  remark: string
-  createTime: string
-}
diff --git a/yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts b/yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts
index a07a56596..b228ac95f 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts
+++ b/yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts
@@ -33,7 +33,10 @@ const crudSchemas = reactive<VxeCrudSchema>({
       title: t('common.createTime'),
       field: 'createTime',
       formatter: 'formatDate',
-      isForm: false
+      isForm: false,
+      table: {
+        width: 180
+      }
     }
   ]
 })
diff --git a/yudao-ui-admin-vue3/src/views/bpm/group/group.data.ts b/yudao-ui-admin-vue3/src/views/bpm/group/group.data.ts
index 1964b1f8b..07f9b6aaf 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/group/group.data.ts
+++ b/yudao-ui-admin-vue3/src/views/bpm/group/group.data.ts
@@ -1,69 +1,63 @@
-import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
+
 const { t } = useI18n() // 国际化
 
 // 表单校验
 export const rules = reactive({
-  name: [required]
+  name: [required],
+  description: [required],
+  memberUserIds: [required],
+  status: [required]
 })
 
 // CrudSchema
-const crudSchemas = reactive<CrudSchema[]>([
-  {
-    label: t('common.index'),
-    field: 'id',
-    type: 'index',
-    form: {
-      show: false
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: 'id',
+  primaryTitle: '编号',
+  action: true,
+  columns: [
+    {
+      title: '组名',
+      field: 'name',
+      isSearch: true
     },
-    detail: {
-      show: false
-    }
-  },
-  {
-    label: '组名',
-    field: 'name',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '成员',
-    field: 'memberUserIds'
-  },
-  {
-    label: '描述',
-    field: 'description'
-  },
-  {
-    label: t('common.status'),
-    field: 'status',
-    dictType: DICT_TYPE.COMMON_STATUS,
-    dictClass: 'number'
-  },
-  {
-    label: '备注',
-    field: 'remark',
-    table: {
-      show: false
-    }
-  },
-  {
-    label: t('common.createTime'),
-    field: 'createTime',
-    form: {
-      show: false
-    }
-  },
-  {
-    label: t('table.action'),
-    field: 'action',
-    width: '240px',
-    form: {
-      show: false
+    {
+      title: '成员',
+      field: 'memberUserIds',
+      table: {
+        slots: {
+          default: 'memberUserIds_default'
+        }
+      }
     },
-    detail: {
-      show: false
+    {
+      title: '描述',
+      field: 'description'
+    },
+    {
+      title: t('common.status'),
+      field: 'status',
+      dictType: DICT_TYPE.COMMON_STATUS,
+      dictClass: 'number',
+      isSearch: true
+    },
+    {
+      title: t('common.createTime'),
+      field: 'createTime',
+      formatter: 'formatDate',
+      isForm: false,
+      isSearch: true,
+      search: {
+        show: true,
+        itemRender: {
+          name: 'XDataTimePicker'
+        }
+      },
+      table: {
+        width: 180
+      }
     }
-  }
-])
-export const { allSchemas } = useCrudSchemas(crudSchemas)
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/yudao-ui-admin-vue3/src/views/bpm/group/index.vue b/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
index ee3355f93..c6d9d484c 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
@@ -1,172 +1,46 @@
-<script setup lang="ts" name="Group">
-import dayjs from 'dayjs'
-import { DICT_TYPE } from '@/utils/dict'
-import { useTable } from '@/hooks/web/useTable'
-import type { FormExpose } from '@/components/Form'
-import type { UserGroupVO } from '@/api/bpm/userGroup/types'
-import { rules, allSchemas } from './group.data'
-import * as UserGroupApi from '@/api/bpm/userGroup'
-import { getListSimpleUsersApi } from '@/api/system/user'
-import { UserVO } from '@/api/system/user'
-
-const { t } = useI18n() // 国际化
-const message = useMessage()
-
-// ========== 列表相关 ==========
-const { register, tableObject, methods } = useTable<UserGroupVO>({
-  getListApi: UserGroupApi.getUserGroupPageApi,
-  delListApi: UserGroupApi.deleteUserGroupApi
-})
-const { getList, setSearchParams, delList } = methods
-
-// ========== CRUD 相关 ==========
-const actionLoading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const formRef = ref<FormExpose>() // 表单 Ref
-
-// ========== 用户选择  ==========
-const userOptions = ref<UserVO[]>([])
-const getUserOptions = async () => {
-  const res = await getListSimpleUsersApi()
-  userOptions.value.push(...res)
-}
-
-// 设置标题
-const setDialogTile = (type: string) => {
-  dialogTitle.value = t('action.' + type)
-  actionType.value = type
-  dialogVisible.value = true
-}
-
-// 新增操作
-const handleCreate = () => {
-  setDialogTile('create')
-}
-
-// 修改操作
-const handleUpdate = async (row: UserGroupVO) => {
-  setDialogTile('update')
-  // 设置数据
-  const res = await UserGroupApi.getUserGroupApi(row.id)
-  unref(formRef)?.setValues(res)
-}
-
-// 提交按钮
-const submitForm = async () => {
-  const elForm = unref(formRef)?.getElFormRef()
-  if (!elForm) return
-  elForm.validate(async (valid) => {
-    if (valid) {
-      actionLoading.value = true
-      // 提交请求
-      try {
-        const data = unref(formRef)?.formModel as UserGroupVO
-        if (actionType.value === 'create') {
-          await UserGroupApi.createUserGroupApi(data)
-          message.success(t('common.createSuccess'))
-        } else {
-          await UserGroupApi.updateUserGroupApi(data)
-          message.success(t('common.updateSuccess'))
-        }
-        // 操作成功，重新加载列表
-        dialogVisible.value = false
-        await getList()
-      } finally {
-        actionLoading.value = false
-      }
-    }
-  })
-}
-
-// 根据用户名获取用户真实名
-const getUserNickName = (userId: number) => {
-  for (const user of userOptions.value) {
-    if (user.id === userId) return user.nickname
-  }
-  return '未知(' + userId + ')'
-}
-// ========== 详情相关 ==========
-const detailData = ref() // 详情 Ref
-
-// 详情操作
-const handleDetail = async (row: UserGroupVO) => {
-  // 设置数据
-  detailData.value = row
-  setDialogTile('detail')
-}
-
-// ========== 初始化 ==========
-onMounted(async () => {
-  await getList()
-  await getUserOptions()
-})
-</script>
-
 <template>
-  <!-- 搜索工作区 -->
   <ContentWrap>
-    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
-  </ContentWrap>
-  <ContentWrap>
-    <!-- 操作工具栏 -->
-    <div class="mb-10px">
-      <el-button type="primary" v-hasPermi="['bpm:user-group:create']" @click="handleCreate()">
-        <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
-      </el-button>
-    </div>
     <!-- 列表 -->
-    <Table
-      :columns="allSchemas.tableColumns"
-      :selection="false"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
-      :pagination="{
-        total: tableObject.total
-      }"
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
-      @register="register"
-    >
-      <template #status="{ row }">
-        <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
+    <XTable @register="registerTable">
+      <template #toolbar_buttons>
+        <!-- 操作：新增 -->
+        <XButton
+          type="primary"
+          preIcon="ep:zoom-in"
+          :title="t('action.add')"
+          v-hasPermi="['bpm:user-group:create']"
+          @click="handleCreate()"
+        />
       </template>
-      <template #memberUserIds="{ row }">
+      <template #memberUserIds_default="{ row }">
         <span v-for="userId in row.memberUserIds" :key="userId">
-          {{ getUserNickName(userId) + ' ' }}
+          {{ getUserNickname(userId) }} &nbsp;
         </span>
       </template>
-      <template #createTime="{ row }">
-        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-      <template #action="{ row }">
-        <el-button
-          link
-          type="primary"
+      <template #actionbtns_default="{ row }">
+        <!-- 操作：修改 -->
+        <XTextButton
+          preIcon="ep:edit"
+          :title="t('action.edit')"
           v-hasPermi="['bpm:user-group:update']"
-          @click="handleUpdate(row)"
-        >
-          <Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['bpm:user-group:update']"
-          @click="handleDetail(row)"
-        >
-          <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
+          @click="handleUpdate(row.id)"
+        />
+        <!-- 操作：详情 -->
+        <XTextButton
+          preIcon="ep:view"
+          :title="t('action.detail')"
+          v-hasPermi="['bpm:user-group:query']"
+          @click="handleDetail(row.id)"
+        />
+        <!-- 操作：删除 -->
+        <XTextButton
+          preIcon="ep:delete"
+          :title="t('action.del')"
           v-hasPermi="['bpm:user-group:delete']"
-          @click="delList(row.id, false)"
-        >
-          <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
-        </el-button>
+          @click="deleteData(row.id)"
+        />
       </template>
-    </Table>
+    </XTable>
   </ContentWrap>
 
   <XModal v-model="dialogVisible" :title="dialogTitle">
@@ -176,30 +50,19 @@ onMounted(async () => {
       :schema="allSchemas.formSchema"
       :rules="rules"
       ref="formRef"
-    >
-      <template #memberUserIds="form">
-        <el-select v-model="form['memberUserIds']" multiple>
-          <el-option
-            v-for="item in userOptions"
-            :key="item.id"
-            :label="item.nickname"
-            :value="item.id"
-          />
-        </el-select>
-      </template>
-    </Form>
+    />
+    <template #memberUserIds="form">
+      <el-select v-model="form['memberUserIds']">
+        <el-option v-for="item in users" :key="item.id" :label="item.nickname" :value="item.id" />
+      </el-select>
+    </template>
     <!-- 对话框(详情) -->
     <Descriptions
       v-if="actionType === 'detail'"
       :schema="allSchemas.detailSchema"
       :data="detailData"
-    >
-      <template #memberUserIds="{ row }">
-        <span v-for="userId in row.memberUserIds" :key="userId">
-          {{ getUserNickName(userId) + ' ' }}
-        </span>
-      </template>
-    </Descriptions>
+    />
+    <!-- 操作按钮 -->
     <template #footer>
       <!-- 按钮：保存 -->
       <XButton
@@ -214,3 +77,100 @@ onMounted(async () => {
     </template>
   </XModal>
 </template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+// 业务相关的 import
+import * as UserGroupApi from '@/api/bpm/userGroup'
+import { getListSimpleUsersApi, UserVO } from '@/api/system/user'
+import { allSchemas } from './group.data'
+import { FormExpose } from '@/components/Form'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+// 列表相关的变量
+const [registerTable, { reload, deleteData }] = useXTable({
+  allSchemas: allSchemas,
+  getListApi: UserGroupApi.getUserGroupPageApi,
+  deleteApi: UserGroupApi.deleteUserGroupApi
+})
+// 用户列表
+const users = ref<UserVO[]>([])
+
+const getUserNickname = (userId) => {
+  for (const user of users.value) {
+    if (user.id === userId) {
+      return user.nickname
+    }
+  }
+  return '未知(' + userId + ')'
+}
+
+// ========== CRUD 相关 ==========
+const actionLoading = ref(false) // 遮罩层
+const actionType = ref('') // 操作按钮的类型
+const dialogVisible = ref(false) // 是否显示弹出层
+const dialogTitle = ref('edit') // 弹出层标题
+const formRef = ref<FormExpose>() // 表单 Ref
+const detailData = ref() // 详情 Ref
+
+// 设置标题
+const setDialogTile = (type: string) => {
+  dialogTitle.value = t('action.' + type)
+  actionType.value = type
+  dialogVisible.value = true
+}
+
+// 新增操作
+const handleCreate = () => {
+  setDialogTile('create')
+}
+
+// 修改操作
+const handleUpdate = async (rowId: number) => {
+  setDialogTile('update')
+  // 设置数据
+  const res = await UserGroupApi.getUserGroupApi(rowId)
+  unref(formRef)?.setValues(res)
+}
+
+// 详情操作
+const handleDetail = async (rowId: number) => {
+  setDialogTile('detail')
+  detailData.value = await UserGroupApi.getUserGroupApi(rowId)
+}
+
+// 提交按钮
+const submitForm = async () => {
+  const elForm = unref(formRef)?.getElFormRef()
+  if (!elForm) return
+  elForm.validate(async (valid) => {
+    if (valid) {
+      actionLoading.value = true
+      // 提交请求
+      try {
+        const data = unref(formRef)?.formModel as UserGroupApi.UserGroupVO
+        if (actionType.value === 'create') {
+          await UserGroupApi.createUserGroupApi(data)
+          message.success(t('common.createSuccess'))
+        } else {
+          await UserGroupApi.updateUserGroupApi(data)
+          message.success(t('common.updateSuccess'))
+        }
+        dialogVisible.value = false
+      } finally {
+        actionLoading.value = false
+        // 刷新列表
+        await reload()
+      }
+    }
+  })
+}
+
+// ========== 初始化 ==========
+onMounted(() => {
+  getListSimpleUsersApi().then((data) => {
+    users.value = data
+  })
+})
+</script>

From 8e29e4279771a75c218029d7ade4b539e1c5fd16 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 20 Jan 2023 15:19:46 +0800
Subject: [PATCH 10/59] =?UTF-8?q?bpm=EF=BC=9A=E5=AE=8C=E6=88=90=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=88=86=E7=BB=84=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bpm/group/index.vue             | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/views/bpm/group/index.vue b/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
index c6d9d484c..c13dbcf40 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
@@ -50,18 +50,25 @@
       :schema="allSchemas.formSchema"
       :rules="rules"
       ref="formRef"
-    />
-    <template #memberUserIds="form">
-      <el-select v-model="form['memberUserIds']">
-        <el-option v-for="item in users" :key="item.id" :label="item.nickname" :value="item.id" />
-      </el-select>
-    </template>
+    >
+      <template #memberUserIds="form">
+        <el-select v-model="form.memberUserIds" multiple>
+          <el-option v-for="item in users" :key="item.id" :label="item.nickname" :value="item.id" />
+        </el-select>
+      </template>
+    </Form>
     <!-- 对话框(详情) -->
     <Descriptions
       v-if="actionType === 'detail'"
       :schema="allSchemas.detailSchema"
       :data="detailData"
-    />
+    >
+      <template #memberUserIds="{ row }">
+        <span v-for="userId in row.memberUserIds" :key="userId">
+          {{ getUserNickname(userId) }} &nbsp;
+        </span>
+      </template>
+    </Descriptions>
     <!-- 操作按钮 -->
     <template #footer>
       <!-- 按钮：保存 -->

From ec6a46a5413447d1d8a8eb5edb78c27465ffd599 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 20 Jan 2023 20:11:24 +0800
Subject: [PATCH 11/59] =?UTF-8?q?bpm=EF=BC=9A=E5=A2=9E=E5=8A=A0=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E6=A8=A1=E5=9E=8B=E7=9A=84=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/bpm/model/index.ts                |  25 +-
 .../src/api/bpm/model/types.ts                |  23 -
 .../src/components/DictTag/src/DictTag.vue    |   3 +
 .../src/views/bpm/model/index.vue             | 710 +++++++++++++-----
 .../src/views/bpm/model/model.data.ts         | 161 ++--
 5 files changed, 639 insertions(+), 283 deletions(-)
 delete mode 100644 yudao-ui-admin-vue3/src/api/bpm/model/types.ts

diff --git a/yudao-ui-admin-vue3/src/api/bpm/model/index.ts b/yudao-ui-admin-vue3/src/api/bpm/model/index.ts
index a2a0c7780..d47b30c10 100644
--- a/yudao-ui-admin-vue3/src/api/bpm/model/index.ts
+++ b/yudao-ui-admin-vue3/src/api/bpm/model/index.ts
@@ -1,5 +1,28 @@
 import request from '@/config/axios'
-import { ModelVO } from './types'
+
+export type ProcessDefinitionVO = {
+  id: string
+  version: number
+  deploymentTIme: string
+  suspensionState: number
+}
+
+export type ModelVO = {
+  id: number
+  formName: string
+  key: string
+  name: string
+  description: string
+  category: string
+  formType: number
+  formId: number
+  formCustomCreatePath: string
+  formCustomViewPath: string
+  processDefinition: ProcessDefinitionVO
+  status: number
+  remark: string
+  createTime: string
+}
 
 export const getModelPageApi = async (params) => {
   return await request.get({ url: '/bpm/model/page', params })
diff --git a/yudao-ui-admin-vue3/src/api/bpm/model/types.ts b/yudao-ui-admin-vue3/src/api/bpm/model/types.ts
deleted file mode 100644
index 36f4aab1b..000000000
--- a/yudao-ui-admin-vue3/src/api/bpm/model/types.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export type ProcessDefinitionVO = {
-  id: string
-  version: number
-  deploymentTIme: string
-  suspensionState: number
-}
-
-export type ModelVO = {
-  id: number
-  formName: string
-  key: string
-  name: string
-  description: string
-  category: string
-  formType: number
-  formId: number
-  formCustomCreatePath: string
-  formCustomViewPath: string
-  processDefinition: ProcessDefinitionVO
-  status: number
-  remark: string
-  createTime: string
-}
diff --git a/yudao-ui-admin-vue3/src/components/DictTag/src/DictTag.vue b/yudao-ui-admin-vue3/src/components/DictTag/src/DictTag.vue
index 7f32f6f4e..f70d52bfe 100644
--- a/yudao-ui-admin-vue3/src/components/DictTag/src/DictTag.vue
+++ b/yudao-ui-admin-vue3/src/components/DictTag/src/DictTag.vue
@@ -33,6 +33,9 @@ export default defineComponent({
       if (!props.type) {
         return null
       }
+      if (!props.value) {
+        return null
+      }
       getDictObj(props.type, props.value.toString())
       return (
         <ElTag
diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
index d232846b1..1c836b119 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
@@ -1,214 +1,540 @@
-<script setup lang="ts" name="Model">
-import dayjs from 'dayjs'
-import { DICT_TYPE } from '@/utils/dict'
-import { useTable } from '@/hooks/web/useTable'
-import type { FormExpose } from '@/components/Form'
-import type { ModelVO } from '@/api/bpm/model/types'
-import { rules, allSchemas } from './model.data'
+<template>
+  <ContentWrap>
+    <!-- 列表 -->
+    <XTable @register="registerTable">
+      <template #toolbar_buttons>
+        <!-- 操作：新增 -->
+        <XButton
+          type="primary"
+          preIcon="ep:zoom-in"
+          title="新建流程"
+          v-hasPermi="['bpm:model:create']"
+          @click="handleCreate"
+        />
+        <!-- 操作：导入 -->
+        <XButton
+          type="warning"
+          preIcon="ep:upload"
+          :title="'导入流程'"
+          @click="handleImport"
+          style="margin-left: 10px"
+        />
+      </template>
+      <!-- 流程名称 -->
+      <template #name_default="{ row }">
+        <XTextButton :title="row.name" @click="handleBpmnDetail(row.id)" />
+      </template>
+      <!-- 表单信息 -->
+      <template #formId_default="{ row }">
+        <XTextButton
+          :title="forms.find((form) => form.id === row.formId)?.name || row.formId"
+          @click="handleFormDetail(row.id)"
+        />
+      </template>
+      <!-- 流程版本 -->
+      <template #version_default="{ row }">
+        <el-tag v-if="row.processDefinition">v{{ row.processDefinition.version }}</el-tag>
+        <el-tag type="warning" v-else>未部署</el-tag>
+      </template>
+      <!-- 激活状态 -->
+      <template #status_default="{ row }">
+        <el-switch
+          v-if="row.processDefinition"
+          v-model="row.processDefinition.suspensionState"
+          :active-value="1"
+          :inactive-value="2"
+          @change="handleChangeState(row)"
+        />
+      </template>
+      <!-- 操作 -->
+      <template #actionbtns_default="{ row }">
+        <XTextButton
+          preIcon="ep:edit"
+          title="修改流程"
+          v-hasPermi="['bpm:model:update']"
+          @click="handleUpdate(row.id)"
+        />
+        <XTextButton
+          preIcon="ep:setting"
+          title="设计流程"
+          v-hasPermi="['bpm:model:update']"
+          @click="handleDesign(row)"
+        />
+        <XTextButton
+          preIcon="ep:user"
+          title="分配规则"
+          v-hasPermi="['bpm:task-assign-rule:query']"
+          @click="handleAssignRule(row)"
+        />
+        <XTextButton
+          preIcon="ep:position"
+          title="发布流程"
+          v-hasPermi="['bpm:model:deploy']"
+          @click="handleDeploy(row)"
+        />
+        <XTextButton
+          preIcon="ep:aim"
+          title="流程定义"
+          v-hasPermi="['bpm:process-definition:query']"
+          @click="handleDefinitionList(row.id)"
+        />
+        <!-- 操作：删除 -->
+        <XTextButton
+          preIcon="ep:delete"
+          :title="t('action.del')"
+          v-hasPermi="['bpm:model:delete']"
+          @click="handleDelete(row.id)"
+        />
+      </template>
+    </XTable>
+
+    <!-- 对话框(添加 / 修改流程) -->
+    <XModal v-model="dialogVisible" :title="dialogTitle" width="600">
+      <el-form
+        :loading="dialogLoading"
+        el-form
+        ref="saveFormRef"
+        :model="saveForm"
+        :rules="rules"
+        label-width="110px"
+      >
+        <el-form-item label="流程标识" prop="key">
+          <el-input
+            v-model="saveForm.key"
+            placeholder="请输入流标标识"
+            style="width: 330px"
+            :disabled="!!saveForm.id"
+          />
+          <el-tooltip
+            v-if="!saveForm.id"
+            class="item"
+            effect="light"
+            content="新建后，流程标识不可修改！"
+            placement="top"
+          >
+            <i style="padding-left: 5px" class="el-icon-question"></i>
+          </el-tooltip>
+          <el-tooltip
+            v-else
+            class="item"
+            effect="light"
+            content="流程标识不可修改！"
+            placement="top"
+          >
+            <i style="padding-left: 5px" class="el-icon-question"></i>
+          </el-tooltip>
+        </el-form-item>
+        <el-form-item label="流程名称" prop="name">
+          <el-input
+            v-model="saveForm.name"
+            placeholder="请输入流程名称"
+            :disabled="!!saveForm.id"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item v-if="saveForm.id" label="流程分类" prop="category">
+          <el-select
+            v-model="saveForm.category"
+            placeholder="请选择流程分类"
+            clearable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="dict in getDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="流程描述" prop="description">
+          <el-input type="textarea" v-model="saveForm.description" clearable />
+        </el-form-item>
+        <div v-if="saveForm.id">
+          <el-form-item label="表单类型" prop="formType">
+            <el-radio-group v-model="saveForm.formType">
+              <el-radio
+                v-for="dict in getDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
+                :key="parseInt(dict.value)"
+                :label="parseInt(dict.value)"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="saveForm.formType === 10" label="流程表单" prop="formId">
+            <el-select v-model="saveForm.formId" clearable style="width: 100%">
+              <el-option v-for="form in forms" :key="form.id" :label="form.name" :value="form.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="saveForm.formType === 20"
+            label="表单提交路由"
+            prop="formCustomCreatePath"
+          >
+            <el-input
+              v-model="saveForm.formCustomCreatePath"
+              placeholder="请输入表单提交路由"
+              style="width: 330px"
+            />
+            <el-tooltip
+              class="item"
+              effect="light"
+              content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create"
+              placement="top"
+            >
+              <i style="padding-left: 5px" class="el-icon-question"></i>
+            </el-tooltip>
+          </el-form-item>
+          <el-form-item
+            v-if="saveForm.formType === 20"
+            label="表单查看路由"
+            prop="formCustomViewPath"
+          >
+            <el-input
+              v-model="saveForm.formCustomViewPath"
+              placeholder="请输入表单查看路由"
+              style="width: 330px"
+            />
+            <el-tooltip
+              class="item"
+              effect="light"
+              content="自定义表单的查看路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/view"
+              placement="top"
+            >
+              <i style="padding-left: 5px" class="el-icon-question"></i>
+            </el-tooltip>
+          </el-form-item>
+        </div>
+      </el-form>
+      <template #footer>
+        <!-- 按钮：保存 -->
+        <XButton
+          type="primary"
+          :loading="dialogLoading"
+          @click="submitForm()"
+          :title="t('action.save')"
+        />
+        <!-- 按钮：关闭 -->
+        <XButton
+          :loading="dialogLoading"
+          @click="dialogVisible = false"
+          :title="t('dialog.close')"
+        />
+      </template>
+    </XModal>
+
+    <!-- 导入流程 -->
+    <XModal v-model="importDialogVisible" width="400" title="导入流程">
+      <div>
+        <el-upload
+          ref="uploadRef"
+          :action="importUrl"
+          :headers="uploadHeaders"
+          :drag="true"
+          :limit="1"
+          :multiple="true"
+          :show-file-list="true"
+          :disabled="uploadDisabled"
+          :on-exceed="handleExceed"
+          :on-success="handleFileSuccess"
+          :on-error="excelUploadError"
+          :auto-upload="false"
+          accept=".bpmn, .xml"
+          name="bpmnFile"
+          :data="importForm"
+        >
+          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+          <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em> </div>
+          <template #tip>
+            <div class="el-upload__tip" style="color: red">
+              提示：仅允许导入“bpm”或“xml”格式文件！
+            </div>
+            <div>
+              <el-form
+                ref="importFormRef"
+                :model="importForm"
+                :rules="rules"
+                label-width="120px"
+                status-icon
+              >
+                <el-form-item label="流程标识" prop="key">
+                  <el-input
+                    v-model="importForm.key"
+                    placeholder="请输入流标标识"
+                    style="width: 250px"
+                  />
+                </el-form-item>
+                <el-form-item label="流程名称" prop="name">
+                  <el-input v-model="importForm.name" placeholder="请输入流程名称" clearable />
+                </el-form-item>
+                <el-form-item label="流程描述" prop="description">
+                  <el-input type="textarea" v-model="importForm.description" clearable />
+                </el-form-item>
+              </el-form>
+            </div>
+          </template>
+        </el-upload>
+      </div>
+      <template #footer>
+        <!-- 按钮：保存 -->
+        <XButton
+          type="warning"
+          preIcon="ep:upload-filled"
+          :title="t('action.save')"
+          @click="submitFileForm"
+        />
+        <XButton title="取 消" @click="uploadClose" />
+      </template>
+    </XModal>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+// 全局相关的 import
+import { onMounted, ref, unref } from 'vue'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { FormInstance, UploadInstance } from 'element-plus'
+
+// 业务相关的 import
+import { getAccessToken, getTenantId } from '@/utils/auth'
+import * as FormApi from '@/api/bpm/form'
 import * as ModelApi from '@/api/bpm/model'
+import { allSchemas, rules } from './model.data'
 
 const { t } = useI18n() // 国际化
-const message = useMessage()
+const message = useMessage() // 消息弹窗
+const router = useRouter() // 路由
 
 // ========== 列表相关 ==========
-const { register, tableObject, methods } = useTable<ModelVO>({
-  getListApi: ModelApi.getModelPageApi,
-  delListApi: ModelApi.deleteModelApi
+const [registerTable, { reload }] = useXTable({
+  allSchemas: allSchemas,
+  getListApi: ModelApi.getModelPageApi
 })
-const { getList, setSearchParams, delList } = methods
+const forms = ref() // 流程表单的下拉框的数据
 
-// ========== CRUD 相关 ==========
-const actionLoading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const formRef = ref<FormExpose>() // 表单 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
-  dialogTitle.value = t('action.' + type)
-  actionType.value = type
-  dialogVisible.value = true
-}
-
-// 新增操作
-const handleCreate = () => {
-  setDialogTile('create')
-}
-
-// 修改操作
-const handleUpdate = async (row: ModelVO) => {
-  setDialogTile('update')
-  // 设置数据
-  const res = await ModelApi.getModelApi(row.id)
-  unref(formRef)?.setValues(res)
-}
-
-// 提交按钮
-const submitForm = async () => {
-  const elForm = unref(formRef)?.getElFormRef()
-  if (!elForm) return
-  elForm.validate(async (valid) => {
-    if (valid) {
-      actionLoading.value = true
-      // 提交请求
-      try {
-        const data = unref(formRef)?.formModel as ModelVO
-        if (actionType.value === 'create') {
-          await ModelApi.createModelApi(data)
-          message.success(t('common.createSuccess'))
-        } else {
-          await ModelApi.updateModelApi(data)
-          message.success(t('common.updateSuccess'))
-        }
-        // 操作成功，重新加载列表
-        dialogVisible.value = false
-        await getList()
-      } finally {
-        actionLoading.value = false
-      }
+// 设计流程
+const handleDesign = (row) => {
+  console.log(row, '设计流程')
+  router.push({
+    name: 'modelEditor',
+    query: {
+      modelId: row.id
     }
   })
 }
 
-/** 流程表单的详情按钮操作 */
-const handleChangeState = async (row: ModelVO) => {
+// 跳转到指定流程定义列表
+const handleDefinitionList = (row) => {
+  router.push({
+    name: 'BpmProcessDefinitionList',
+    query: {
+      modelId: row.id
+    }
+  })
+}
+
+// 流程表单的详情按钮操作
+const handleFormDetail = (row) => {
+  // TODO 芋艿：表单组件开发中
+  console.log(row)
+  message.success('动态表单开发中，预计 2 月底完成')
+}
+
+// 流程图的详情按钮操作
+const handleBpmnDetail = (row) => {
+  // TODO 芋艿：流程组件开发中
+  console.log(row)
+  message.success('流程组件开发中，预计 2 月底完成')
+}
+
+// 点击任务分配按钮
+const handleAssignRule = (row) => {
+  router.push({
+    name: 'BpmTaskAssignRuleList',
+    query: {
+      modelId: row.id
+    }
+  })
+}
+
+// ========== 新建/修改流程 ==========
+const dialogVisible = ref(false)
+const dialogTitle = ref('新建模型')
+const dialogLoading = ref(false)
+const saveForm = ref({})
+const saveFormRef = ref<FormInstance>()
+
+// 设置标题
+const setDialogTile = async (type: string) => {
+  dialogTitle.value = t('action.' + type)
+  dialogVisible.value = true
+}
+
+// 新增操作
+const handleCreate = async () => {
+  resetForm()
+  await setDialogTile('create')
+}
+
+// 修改操作
+const handleUpdate = async (rowId: number) => {
+  resetForm()
+  await setDialogTile('create')
+  // 设置数据
+  saveForm.value = await ModelApi.getModelApi(rowId)
+}
+
+// 提交按钮
+const submitForm = async () => {
+  // 参数校验
+  const elForm = unref(saveFormRef)
+  if (!elForm) return
+  const valid = await elForm.validate()
+  if (!valid) return
+
+  // 提交请求
+  dialogLoading.value = true
+  try {
+    const data = saveForm.value as ModelApi.ModelVO
+    if (!data.id) {
+      await ModelApi.createModelApi(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ModelApi.updateModelApi(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+  } finally {
+    // 刷新列表
+    await reload()
+    dialogLoading.value = false
+  }
+}
+
+// 重置表单
+const resetForm = () => {
+  saveForm.value = {
+    formType: 10,
+    name: '',
+    courseSort: '',
+    description: '',
+    formId: '',
+    formCustomCreatePath: '',
+    formCustomViewPath: ''
+  }
+  saveFormRef.value?.resetFields()
+}
+
+// ========== 删除 / 更新状态 / 发布流程 ==========
+// 删除流程
+const handleDelete = (rowId) => {
+  message.delConfirm('是否删除该流程！！').then(async () => {
+    await ModelApi.deleteModelApi(rowId)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    reload()
+  })
+}
+
+// 更新状态操作
+const handleChangeState = (row) => {
+  const id = row.id
   const state = row.processDefinition.suspensionState
   const statusState = state === 1 ? '激活' : '挂起'
+  const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
   message
-    .confirm(
-      '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?',
-      t('common.reminder')
-    )
+    .confirm(content)
     .then(async () => {
-      ModelApi.updateModelStateApi(row.id, state).then(() => {
-        message.success(t('common.updateSuccess'))
-        getList()
-      })
+      await ModelApi.updateModelStateApi(id, state)
+      message.success(t('部署成功'))
+      // 刷新列表
+      reload()
+    })
+    .catch(() => {
+      // 取消后，进行恢复按钮
+      row.processDefinition.suspensionState = state === 1 ? 2 : 1
     })
-    .catch(() => {})
 }
-// ========== 详情相关 ==========
-const detailData = ref() // 详情 Ref
 
-// 详情操作
-const handleDetail = async (row: ModelVO) => {
-  // 设置数据
-  detailData.value = row
-  setDialogTile('detail')
+// 发布流程
+const handleDeploy = (row) => {
+  message.confirm('是否部署该流程！！').then(async () => {
+    await ModelApi.deployModelApi(row.id)
+    message.success(t('部署成功'))
+    // 刷新列表
+    reload()
+  })
+}
+
+// ========== 导入流程 ==========
+const uploadRef = ref<UploadInstance>()
+let importUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/bpm/model/import'
+const uploadHeaders = ref()
+const importDialogVisible = ref(false)
+const uploadDisabled = ref(false)
+const importFormRef = ref<FormInstance>()
+const importForm = ref({
+  key: '',
+  name: '',
+  description: ''
+})
+
+// 导入流程弹窗显示
+const handleImport = () => {
+  importDialogVisible.value = true
+}
+// 文件数超出提示
+const handleExceed = (): void => {
+  message.error('最多只能上传一个文件！')
+}
+// 上传错误提示
+const excelUploadError = (): void => {
+  message.error('导入流程失败，请您重新上传！')
+}
+
+// 提交文件上传
+const submitFileForm = () => {
+  uploadHeaders.value = {
+    Authorization: 'Bearer ' + getAccessToken(),
+    'tenant-id': getTenantId()
+  }
+  uploadDisabled.value = true
+  uploadRef.value!.submit()
+}
+// 文件上传成功
+const handleFileSuccess = async (response: any): Promise<void> => {
+  if (response.code !== 0) {
+    message.error(response.msg)
+    return
+  }
+  // 重置表单
+  uploadClose()
+  // 提示，并刷新
+  message.success('导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】')
+  await reload()
+}
+// 关闭文件上传
+const uploadClose = () => {
+  // 关闭弹窗
+  importDialogVisible.value = false
+  // 重置上传状态和文件
+  uploadDisabled.value = false
+  uploadRef.value!.clearFiles()
+  // 重置表单
+  importForm.value = {
+    key: '',
+    name: '',
+    description: ''
+  }
+  importFormRef.value?.resetFields()
 }
 
 // ========== 初始化 ==========
-getList()
+onMounted(() => {
+  // 获得流程表单的下拉框的数据
+  FormApi.getSimpleFormsApi().then((data) => {
+    forms.value = data
+  })
+})
 </script>
-
-<template>
-  <!-- 搜索工作区 -->
-  <ContentWrap>
-    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
-  </ContentWrap>
-  <ContentWrap>
-    <!-- 操作工具栏 -->
-    <div class="mb-10px">
-      <el-button type="primary" v-hasPermi="['bpm:model:create']" @click="handleCreate()">
-        <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
-      </el-button>
-    </div>
-    <!-- 列表 -->
-    <Table
-      :columns="allSchemas.tableColumns"
-      :selection="false"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
-      :pagination="{
-        total: tableObject.total
-      }"
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
-      @register="register"
-    >
-      <template #category="{ row }">
-        <DictTag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="row.category" />
-      </template>
-      <template #formId="{ row }">
-        <span>{{ row.formName }}</span>
-      </template>
-      <template #processDefinition>
-        <el-table-column label="流程版本" prop="processDefinition.version">
-          <template #default="{ row }">
-            <el-tag v-if="row.processDefinition">
-              {{ 'v' + row.processDefinition.version }}
-            </el-tag>
-            <el-tag type="warning" v-else>未部署</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="激活状态" prop="processDefinition.suspensionState">
-          <template #default="{ row }">
-            <el-switch
-              v-if="row.processDefinition"
-              v-model="row.processDefinition.suspensionState"
-              :active-value="1"
-              :inactive-value="2"
-              @change="handleChangeState(row)"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="部署时间" prop="processDefinition.deploymentTime">
-          <template #default="{ row }">
-            <span>
-              {{ dayjs(row.processDefinition.deploymentTime).format('YYYY-MM-DD HH:mm:ss') }}
-            </span>
-          </template>
-        </el-table-column>
-      </template>
-      <template #createTime="{ row }">
-        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-      <template #action="{ row }">
-        <el-button link type="primary" v-hasPermi="['bpm:model:update']" @click="handleUpdate(row)">
-          <Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
-        </el-button>
-        <el-button link type="primary" v-hasPermi="['bpm:model:update']" @click="handleDetail(row)">
-          <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['bpm:model:delete']"
-          @click="delList(row.id, false)"
-        >
-          <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
-        </el-button>
-      </template>
-    </Table>
-  </ContentWrap>
-
-  <XModal v-model="dialogVisible" :title="dialogTitle">
-    <!-- 对话框(添加 / 修改) -->
-    <Form
-      v-if="['create', 'update'].includes(actionType)"
-      :schema="allSchemas.formSchema"
-      :rules="rules"
-      ref="formRef"
-    />
-    <!-- 对话框(详情) -->
-    <Descriptions
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    />
-    <!-- 操作按钮 -->
-    <template #footer>
-      <!-- 按钮：保存 -->
-      <XButton
-        v-if="['create', 'update'].includes(actionType)"
-        type="primary"
-        :title="t('action.save')"
-        :loading="actionLoading"
-        @click="submitForm()"
-      />
-      <!-- 按钮：关闭 -->
-      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
-    </template>
-  </XModal>
-</template>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/model.data.ts b/yudao-ui-admin-vue3/src/views/bpm/model/model.data.ts
index ac813738d..e3d013380 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/model/model.data.ts
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/model.data.ts
@@ -1,78 +1,105 @@
-import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { reactive } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { required } from '@/utils/formRules'
+import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
+
+import { DICT_TYPE } from '@/utils/dict'
 const { t } = useI18n() // 国际化
 
 // 表单校验
 export const rules = reactive({
-  name: [required]
+  key: [required],
+  name: [required],
+  category: [required],
+  formType: [required],
+  formId: [required],
+  formCustomCreatePath: [required],
+  formCustomViewPath: [required]
 })
 
 // CrudSchema
-const crudSchemas = reactive<CrudSchema[]>([
-  {
-    label: t('common.index'),
-    field: 'id',
-    type: 'index',
-    form: {
-      show: false
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'key',
+  primaryType: null,
+  action: true,
+  actionWidth: '540px',
+  columns: [
+    {
+      title: '流程标识',
+      field: 'key',
+      isSearch: true,
+      table: {
+        width: 120
+      }
     },
-    detail: {
-      show: false
-    }
-  },
-  {
-    label: '流程标识',
-    field: 'key',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '流程名称',
-    field: 'name',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '流程分类',
-    field: 'category',
-    dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
-    dictClass: 'number',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '表单信息',
-    field: 'formId'
-  },
-  {
-    label: '最新部署的流程定义',
-    field: 'processDefinition',
-    form: {
-      show: false
+    {
+      title: '流程名称',
+      field: 'name',
+      isSearch: true,
+      table: {
+        width: 120,
+        slots: {
+          default: 'name_default'
+        }
+      }
     },
-    detail: {
-      show: false
-    }
-  },
-  {
-    label: t('common.createTime'),
-    field: 'createTime',
-    form: {
-      show: false
-    }
-  },
-  {
-    label: t('table.action'),
-    field: 'action',
-    width: '240px',
-    form: {
-      show: false
+    {
+      title: '流程分类',
+      field: 'category',
+      dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
+      dictClass: 'number',
+      isSearch: true
     },
-    detail: {
-      show: false
+    {
+      title: '表单信息',
+      field: 'formId',
+      table: {
+        width: 120,
+        slots: {
+          default: 'formId_default'
+        }
+      }
+    },
+    {
+      title: '最新部署的流程定义',
+      field: 'processDefinition',
+      isForm: false,
+      table: {
+        children: [
+          {
+            title: '流程版本',
+            field: 'version',
+            slots: {
+              default: 'version_default'
+            },
+            width: 80
+          },
+          {
+            title: '激活状态',
+            field: 'status',
+            slots: {
+              default: 'status_default'
+            },
+            width: 80
+          },
+          {
+            title: '部署时间',
+            field: 'processDefinition.deploymentTime',
+            formatter: 'formatDate',
+            width: 180
+          }
+        ]
+      }
+    },
+    {
+      title: t('common.createTime'),
+      field: 'createTime',
+      isForm: false,
+      formatter: 'formatDate',
+      table: {
+        width: 180
+      }
     }
-  }
-])
-export const { allSchemas } = useCrudSchemas(crudSchemas)
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

From 3466b318b1b1a46894cf42b3a6c6cdfb3c7e5da8 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 20 Jan 2023 21:57:41 +0800
Subject: [PATCH 12/59] =?UTF-8?q?bpm=EF=BC=9A=E6=B5=81=E7=A8=8B=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E7=9A=84=E5=88=97=E8=A1=A8=E7=9A=84=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bpm/model/index.vue             | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
index 1c836b119..6cc8d07af 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
@@ -28,7 +28,7 @@
       <template #formId_default="{ row }">
         <XTextButton
           :title="forms.find((form) => form.id === row.formId)?.name || row.formId"
-          @click="handleFormDetail(row.id)"
+          @click="handleFormDetail(row.formId)"
         />
       </template>
       <!-- 流程版本 -->
@@ -212,7 +212,7 @@
         <XButton
           type="primary"
           :loading="dialogLoading"
-          @click="submitForm()"
+          @click="submitForm"
           :title="t('action.save')"
         />
         <!-- 按钮：关闭 -->
@@ -287,6 +287,15 @@
         <XButton title="取 消" @click="uploadClose" />
       </template>
     </XModal>
+
+    <!-- 表单详情的弹窗 -->
+    <XModal v-model="formDetailVisible" width="800" title="表单详情" :show-footer="false">
+      <ViewForm
+        :rule="formDetailPreview.rule"
+        :option="formDetailPreview.option"
+        v-if="formDetailVisible"
+      />
+    </XModal>
   </ContentWrap>
 </template>
 
@@ -306,6 +315,10 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const router = useRouter() // 路由
 
+import viewForm from '@form-create/element-ui'
+const ViewForm = viewForm.$form()
+import { setConfAndFields2 } from '@/utils/formCreate'
+
 // ========== 列表相关 ==========
 const [registerTable, { reload }] = useXTable({
   allSchemas: allSchemas,
@@ -335,10 +348,17 @@ const handleDefinitionList = (row) => {
 }
 
 // 流程表单的详情按钮操作
-const handleFormDetail = (row) => {
-  // TODO 芋艿：表单组件开发中
-  console.log(row)
-  message.success('动态表单开发中，预计 2 月底完成')
+const formDetailVisible = ref(false)
+const formDetailPreview = ref({
+  rule: [],
+  option: {}
+})
+const handleFormDetail = async (rowId: number) => {
+  // 设置表单
+  const data = await FormApi.getFormApi(rowId)
+  setConfAndFields2(formDetailPreview, data.conf, data.fields)
+  // 弹窗打开
+  formDetailVisible.value = true
 }
 
 // 流程图的详情按钮操作

From c3317e144f36d317243e0ae5327a222301a5c1af Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 20 Jan 2023 22:36:57 +0800
Subject: [PATCH 13/59] =?UTF-8?q?bpm=EF=BC=9A=E6=B5=81=E7=A8=8B=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E7=9A=84=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/bpm/definition/index.ts           | 20 ++++
 .../views/bpm/definition/definition.data.ts   | 76 ++++++++++++++
 .../src/views/bpm/definition/index.vue        | 98 +++++++++++++++++++
 3 files changed, 194 insertions(+)
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/definition/index.ts
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/definition/definition.data.ts
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/definition/index.vue

diff --git a/yudao-ui-admin-vue3/src/api/bpm/definition/index.ts b/yudao-ui-admin-vue3/src/api/bpm/definition/index.ts
new file mode 100644
index 000000000..766ac90e2
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/definition/index.ts
@@ -0,0 +1,20 @@
+import request from '@/config/axios'
+
+export const getProcessDefinitionBpmnXMLApi = async (id: number) => {
+  return await request.get({
+    url: '/bpm/process-definition/get-bpmn-xml?id=' + id
+  })
+}
+
+export const getProcessDefinitionPageApi = async (params) => {
+  return await request.get({
+    url: '/bpm/process-definition/page',
+    params
+  })
+}
+export const getProcessDefinitionListApi = async (params) => {
+  return await request.get({
+    url: '/bpm/process-definition/list',
+    params
+  })
+}
diff --git a/yudao-ui-admin-vue3/src/views/bpm/definition/definition.data.ts b/yudao-ui-admin-vue3/src/views/bpm/definition/definition.data.ts
new file mode 100644
index 000000000..4e25b6c3c
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/definition/definition.data.ts
@@ -0,0 +1,76 @@
+import { reactive } from 'vue'
+import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
+
+import { DICT_TYPE } from '@/utils/dict'
+
+// CrudSchema
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: null,
+  action: true,
+  columns: [
+    {
+      title: '定义编号',
+      field: 'id',
+      table: {
+        width: 360
+      }
+    },
+    {
+      title: '定义名称',
+      field: 'name',
+      table: {
+        width: 120,
+        slots: {
+          default: 'name_default'
+        }
+      }
+    },
+    {
+      title: '流程分类',
+      field: 'category',
+      dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
+      dictClass: 'number'
+    },
+    {
+      title: '表单信息',
+      field: 'formId',
+      table: {
+        width: 120,
+        slots: {
+          default: 'formId_default'
+        }
+      }
+    },
+    {
+      title: '流程版本',
+      field: 'version',
+      table: {
+        width: 80,
+        slots: {
+          default: 'version_default'
+        }
+      }
+    },
+    {
+      title: '激活状态',
+      field: 'suspensionState',
+      table: {
+        width: 80,
+        slots: {
+          default: 'suspensionState_default'
+        }
+      }
+    },
+    {
+      title: '部署时间',
+      field: 'deploymentTime',
+      isForm: false,
+      formatter: 'formatDate',
+      table: {
+        width: 180
+      }
+    }
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue b/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
new file mode 100644
index 000000000..5ef4c46a6
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
@@ -0,0 +1,98 @@
+<template>
+  <ContentWrap>
+    <!-- 列表 -->
+    <XTable @register="registerTable">
+      <!-- 流程名称 -->
+      <template #name_default="{ row }">
+        <XTextButton :title="row.name" @click="handleBpmnDetail(row.id)" />
+      </template>
+      <!-- 表单信息 -->
+      <template #formId_default="{ row }">
+        <XTextButton :title="row.formName" @click="handleFormDetail(row.formId)" />
+      </template>
+      <!-- 流程版本 -->
+      <template #version_default="{ row }">
+        <el-tag>v{{ row.version }}</el-tag>
+      </template>
+      <!-- 激活状态 -->
+      <template #suspensionState_default="{ row }">
+        <el-tag type="success" v-if="row.suspensionState === 1">激活</el-tag>
+        <el-tag type="warning" v-if="row.suspensionState === 2">挂起</el-tag>
+      </template>
+      <!-- 操作 -->
+      <template #actionbtns_default="{ row }">
+        <XTextButton
+          preIcon="ep:user"
+          title="分配规则"
+          v-hasPermi="['bpm:task-assign-rule:query']"
+          @click="handleAssignRule(row)"
+        />
+      </template>
+    </XTable>
+
+    <!-- 表单详情的弹窗 -->
+    <XModal v-model="formDetailVisible" width="800" title="表单详情" :show-footer="false">
+      <ViewForm
+        :rule="formDetailPreview.rule"
+        :option="formDetailPreview.option"
+        v-if="formDetailVisible"
+      />
+    </XModal>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+// 全局相关的 import
+import { ref } from 'vue'
+// import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+
+// 业务相关的 import
+import * as DefinitionApi from '@/api/bpm/definition'
+// import * as ModelApi from '@/api/bpm/model'
+import { allSchemas } from './definition.data'
+
+// const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const router = useRouter() // 路由
+
+import viewForm from '@form-create/element-ui'
+const ViewForm = viewForm.$form()
+import { setConfAndFields2 } from '@/utils/formCreate'
+
+// ========== 列表相关 ==========
+const [registerTable] = useXTable({
+  allSchemas: allSchemas,
+  getListApi: DefinitionApi.getProcessDefinitionPageApi
+})
+
+// 流程表单的详情按钮操作
+const formDetailVisible = ref(false)
+const formDetailPreview = ref({
+  rule: [],
+  option: {}
+})
+const handleFormDetail = async (rowId: number) => {
+  // 设置表单
+  const data = await FormApi.getFormApi(rowId)
+  setConfAndFields2(formDetailPreview, data.conf, data.fields)
+  // 弹窗打开
+  formDetailVisible.value = true
+}
+
+// 流程图的详情按钮操作
+const handleBpmnDetail = (row) => {
+  // TODO 芋艿：流程组件开发中
+  console.log(row)
+  message.success('流程组件开发中，预计 2 月底完成')
+}
+
+// 点击任务分配按钮
+const handleAssignRule = (row) => {
+  router.push({
+    name: 'BpmTaskAssignRuleList',
+    query: {
+      modelId: row.id
+    }
+  })
+}
+</script>

From 051f4b85b70874dc9a567defda28d8d15909517e Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 21 Jan 2023 00:44:09 +0800
Subject: [PATCH 14/59] =?UTF-8?q?bpm=EF=BC=9A=E5=A2=9E=E5=8A=A0=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=AE=9A=E4=B9=89=E7=9A=84=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bpm/definition/index.vue        | 32 +++++++++++++------
 .../src/views/bpm/model/index.vue             | 26 +++++++++------
 .../src/views/bpm/model/model.data.ts         |  2 +-
 3 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue b/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
index 5ef4c46a6..467e1dd3f 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
@@ -8,7 +8,12 @@
       </template>
       <!-- 表单信息 -->
       <template #formId_default="{ row }">
-        <XTextButton :title="row.formName" @click="handleFormDetail(row.formId)" />
+        <XTextButton
+          v-if="row.formType === 10"
+          :title="row.formName"
+          @click="handleFormDetail(row)"
+        />
+        <XTextButton v-else :title="row.formCustomCreatePath" @click="handleFormDetail(row)" />
       </template>
       <!-- 流程版本 -->
       <template #version_default="{ row }">
@@ -51,18 +56,22 @@ import * as DefinitionApi from '@/api/bpm/definition'
 // import * as ModelApi from '@/api/bpm/model'
 import { allSchemas } from './definition.data'
 
-// const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const router = useRouter() // 路由
+const { query } = useRoute() // 查询参数
 
 import viewForm from '@form-create/element-ui'
 const ViewForm = viewForm.$form()
 import { setConfAndFields2 } from '@/utils/formCreate'
 
 // ========== 列表相关 ==========
+const queryParams = reactive({
+  key: query.key
+})
 const [registerTable] = useXTable({
   allSchemas: allSchemas,
-  getListApi: DefinitionApi.getProcessDefinitionPageApi
+  getListApi: DefinitionApi.getProcessDefinitionPageApi,
+  params: queryParams
 })
 
 // 流程表单的详情按钮操作
@@ -71,12 +80,17 @@ const formDetailPreview = ref({
   rule: [],
   option: {}
 })
-const handleFormDetail = async (rowId: number) => {
-  // 设置表单
-  const data = await FormApi.getFormApi(rowId)
-  setConfAndFields2(formDetailPreview, data.conf, data.fields)
-  // 弹窗打开
-  formDetailVisible.value = true
+const handleFormDetail = async (row) => {
+  if (row.formType == 10) {
+    // 设置表单
+    setConfAndFields2(formDetailPreview, row.formConf, row.formFields)
+    // 弹窗打开
+    formDetailVisible.value = true
+  } else {
+    router.push({
+      path: row.formCustomCreatePath
+    })
+  }
 }
 
 // 流程图的详情按钮操作
diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
index 6cc8d07af..ebd317c15 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
@@ -27,9 +27,11 @@
       <!-- 表单信息 -->
       <template #formId_default="{ row }">
         <XTextButton
+          v-if="row.formType === 10"
           :title="forms.find((form) => form.id === row.formId)?.name || row.formId"
-          @click="handleFormDetail(row.formId)"
+          @click="handleFormDetail(row)"
         />
+        <XTextButton v-else :title="row.formCustomCreatePath" @click="handleFormDetail(row)" />
       </template>
       <!-- 流程版本 -->
       <template #version_default="{ row }">
@@ -76,7 +78,7 @@
           preIcon="ep:aim"
           title="流程定义"
           v-hasPermi="['bpm:process-definition:query']"
-          @click="handleDefinitionList(row.id)"
+          @click="handleDefinitionList(row)"
         />
         <!-- 操作：删除 -->
         <XTextButton
@@ -342,7 +344,7 @@ const handleDefinitionList = (row) => {
   router.push({
     name: 'BpmProcessDefinitionList',
     query: {
-      modelId: row.id
+      key: row.key
     }
   })
 }
@@ -353,12 +355,18 @@ const formDetailPreview = ref({
   rule: [],
   option: {}
 })
-const handleFormDetail = async (rowId: number) => {
-  // 设置表单
-  const data = await FormApi.getFormApi(rowId)
-  setConfAndFields2(formDetailPreview, data.conf, data.fields)
-  // 弹窗打开
-  formDetailVisible.value = true
+const handleFormDetail = async (row) => {
+  if (row.formType == 10) {
+    // 设置表单
+    const data = await FormApi.getFormApi(row.formId)
+    setConfAndFields2(formDetailPreview, data.conf, data.fields)
+    // 弹窗打开
+    formDetailVisible.value = true
+  } else {
+    router.push({
+      path: row.formCustomCreatePath
+    })
+  }
 }
 
 // 流程图的详情按钮操作
diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/model.data.ts b/yudao-ui-admin-vue3/src/views/bpm/model/model.data.ts
index e3d013380..371b14f10 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/model/model.data.ts
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/model.data.ts
@@ -54,7 +54,7 @@ const crudSchemas = reactive<VxeCrudSchema>({
       title: '表单信息',
       field: 'formId',
       table: {
-        width: 120,
+        width: 180,
         slots: {
           default: 'formId_default'
         }

From 8992f64eb4b785fa83bb32215f49c73a94fbb963 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 21 Jan 2023 18:58:48 +0800
Subject: [PATCH 15/59] =?UTF-8?q?bpm=EF=BC=9A=E5=AE=8C=E5=96=84=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=88=86=E9=85=8D=E4=BB=BB=E5=8A=A1=E7=9A=84=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/bpm/taskAssignRule/index.ts       |  11 +-
 .../src/api/bpm/taskAssignRule/types.ts       |   9 -
 .../src/views/bpm/group/index.vue             |   4 +-
 .../src/views/bpm/taskAssignRule/index.vue    | 213 +++++++++++-------
 .../bpm/taskAssignRule/taskAssignRule.data.ts |  13 +-
 5 files changed, 159 insertions(+), 91 deletions(-)
 delete mode 100644 yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/types.ts

diff --git a/yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/index.ts b/yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/index.ts
index 9bdbdf0e2..5fbe342d4 100644
--- a/yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/index.ts
+++ b/yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/index.ts
@@ -1,5 +1,14 @@
 import request from '@/config/axios'
-import { TaskAssignVO } from './types'
+
+export type TaskAssignVO = {
+  id: number
+  modelId: string
+  processDefinitionId: string
+  taskDefinitionKey: string
+  taskDefinitionName: string
+  options: string[]
+  type: number
+}
 
 export const getTaskAssignRuleList = async (params) => {
   return await request.get({ url: '/bpm/task-assign-rule/list', params })
diff --git a/yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/types.ts b/yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/types.ts
deleted file mode 100644
index e9340e7ea..000000000
--- a/yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type TaskAssignVO = {
-  id: number
-  modelId: string
-  processDefinitionId: string
-  taskDefinitionKey: string
-  taskDefinitionName: string
-  options: string[]
-  type: number
-}
diff --git a/yudao-ui-admin-vue3/src/views/bpm/group/index.vue b/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
index c13dbcf40..d167887ed 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
@@ -77,7 +77,7 @@
         type="primary"
         :title="t('action.save')"
         :loading="actionLoading"
-        @click="submitForm()"
+        @click="submitForm"
       />
       <!-- 按钮：关闭 -->
       <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
@@ -90,7 +90,7 @@ import { onMounted, ref } from 'vue'
 // 业务相关的 import
 import * as UserGroupApi from '@/api/bpm/userGroup'
 import { getListSimpleUsersApi, UserVO } from '@/api/system/user'
-import { allSchemas } from './group.data'
+import { allSchemas, rules } from './group.data'
 import { FormExpose } from '@/components/Form'
 
 const { t } = useI18n() // 国际化
diff --git a/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue
index d3b6a19b3..633540c2d 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue
@@ -9,29 +9,28 @@
       </template>
       <!-- 操作 -->
       <template #actionbtns_default="{ row }" v-if="modelId">
-        <vxe-button
-          type="text"
-          status="primary"
-          content="修改"
-          icon="vxe-icon-edit"
+        <!-- 操作：修改 -->
+        <XTextButton
+          preIcon="ep:edit"
+          :title="t('action.edit')"
+          v-hasPermi="['bpm:task-assign-rule:update']"
           @click="handleUpdate(row)"
         />
       </template>
     </XTable>
 
     <!-- 添加/修改弹窗 -->
-    <XModal v-model="openVisible" title="修改任务规则" width="800" height="35%" resize>
+    <XModal v-model="dialogVisible" title="修改任务规则" width="800" height="35%">
       <el-form
-        ref="xForm"
+        ref="formRef"
         :model="formData"
-        :rules="formRules"
+        :rules="rules"
         label-width="120px"
-        class="demo-ruleForm"
         size="default"
         status-icon
       >
         <el-form-item label="任务名称" prop="taskDefinitionName">
-          <el-input -model="formData.taskDefinitionName" placeholder="请输入流标标识" disabled />
+          <el-input v-model="formData.taskDefinitionName" placeholder="请输入流标标识" disabled />
         </el-form-item>
         <el-form-item label="任务标识" prop="taskDefinitionKey">
           <el-input v-model="formData.taskDefinitionKey" placeholder="请输入任务标识" disabled />
@@ -39,7 +38,7 @@
         <el-form-item label="规则类型" prop="type">
           <el-select v-model="formData.type" clearable style="width: 100%">
             <el-option
-              v-for="dict in taskAssignRuleTypeDictDatas"
+              v-for="dict in getDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE)"
               :key="parseInt(dict.value)"
               :label="dict.label"
               :value="parseInt(dict.value)"
@@ -118,9 +117,21 @@
           </el-select>
         </el-form-item>
       </el-form>
+      <!-- 操作按钮 -->
       <template #footer>
-        <XButton type="primary" title="保存" :loading="loading" @click="submitEvent(xForm)" />
-        <XButton title="关闭" @click="resetEvent(xForm)" />
+        <!-- 按钮：保存 -->
+        <XButton
+          type="primary"
+          :title="t('action.save')"
+          :loading="actionLoading"
+          @click="submitForm"
+        />
+        <!-- 按钮：关闭 -->
+        <XButton
+          :loading="actionLoading"
+          :title="t('dialog.close')"
+          @click="dialogVisible = false"
+        />
       </template>
     </XModal>
   </ContentWrap>
@@ -128,28 +139,31 @@
 <script setup lang="ts" name="TaskAssignRule">
 // 全局相关的 import
 import type { FormInstance } from 'element-plus'
-
 // 业务相关的 import
-import { allSchemas } from './taskAssignRule.data'
 import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule'
 import { listSimpleRolesApi } from '@/api/system/role'
-import { handleTree, defaultProps } from '@/utils/tree'
 import { listSimplePostsApi } from '@/api/system/post'
 import { getListSimpleUsersApi } from '@/api/system/user'
 import { listSimpleUserGroupsApi } from '@/api/bpm/userGroup'
 import { listSimpleDeptApi } from '@/api/system/dept'
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
-// import {useI18n} from "@/hooks/web/useI18n";
-// import {useMessage} from "@/hooks/web/useMessage";
-import { useRoute } from 'vue-router'
+import { handleTree, defaultProps } from '@/utils/tree'
+import { allSchemas, rules } from './taskAssignRule.data'
 
-// const { t } = useI18n() // 国际化
-// const message = useMessage() // 消息弹窗
-// const router = useRouter() // 路由
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
 const { query } = useRoute()
 
 // ========== 列表相关 ==========
 
+const roleOptions = ref() // 角色列表
+const deptOptions = ref() // 部门列表
+const deptTreeOptions = ref()
+const postOptions = ref() // 岗位列表
+const userOptions = ref() // 用户列表
+const userGroupOptions = ref() // 用户组列表
+const taskAssignScriptDictDatas = getDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT)
+
 // 流程模型的编号。如果 modelId 非空，则用于流程模型的查看与配置
 const modelId = query.modelId
 // 流程定义的编号。如果 processDefinitionId 非空，则用于流程定义的查看，不支持配置
@@ -159,68 +173,14 @@ const queryParams = reactive({
   modelId: modelId,
   processDefinitionId: processDefinitionId
 })
-const [registerTable] = useXTable({
+const [registerTable, { reload }] = useXTable({
   allSchemas: allSchemas,
   params: queryParams,
   getListApi: TaskAssignRuleApi.getTaskAssignRuleList,
   isList: true
 })
-// 修改任务责任表单
-const xForm = ref<FormInstance>()
-const formData = ref()
-const formRules = reactive({
-  type: [{ required: true, message: '规则类型不能为空', trigger: 'change' }],
-  roleIds: [{ required: true, message: '指定角色不能为空', trigger: 'change' }],
-  deptIds: [{ required: true, message: '指定部门不能为空', trigger: 'change' }],
-  postIds: [{ required: true, message: '指定岗位不能为空', trigger: 'change' }],
-  userIds: [{ required: true, message: '指定用户不能为空', trigger: 'change' }],
-  userGroupIds: [{ required: true, message: '指定用户组不能为空', trigger: 'change' }],
-  scripts: [{ required: true, message: '指定脚本不能为空', trigger: 'change' }]
-})
-const loading = ref(false)
 
-const roleOptions = ref() // 角色列表
-const deptOptions = ref() // 部门列表
-const deptTreeOptions = ref()
-const postOptions = ref() // 岗位列表
-const userOptions = ref() // 用户列表
-const userGroupOptions = ref() // 用户组列表
-const taskAssignScriptDictDatas = getDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT)
-const taskAssignRuleTypeDictDatas = getDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE)
-
-// 修改任务分配规则
-const openVisible = ref(false)
-
-// 添加修改弹窗提交修改
-const submitEvent = async (formEl: FormInstance | undefined) => {
-  console.log('确认')
-  if (!formEl) return
-  loading.value = true
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log('submit!')
-      loading.value = false
-      openVisible.value = false
-    } else {
-      console.log('error submit!', fields)
-      loading.value = false
-    }
-  })
-}
-
-const resetEvent = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.resetFields()
-  openVisible.value = false
-}
-
-// 修改任务分配规则
-const handleUpdate = (row) => {
-  console.log(row, '修改i数据')
-  openVisible.value = true
-  formData.value = { ...row }
-}
-// 类型字典
+// 翻译规则范围
 const getAssignRuleOptionName = (type, option) => {
   if (type === 10) {
     for (const roleOption of roleOptions.value) {
@@ -263,6 +223,103 @@ const getAssignRuleOptionName = (type, option) => {
   return '未知(' + option + ')'
 }
 
+// ========== 修改相关 ==========
+
+// 修改任务责任表单
+const actionLoading = ref(false) // 遮罩层
+const dialogVisible = ref(false) // 是否显示弹出层
+const formRef = ref<FormInstance>()
+const formData = ref() // 表单数据
+
+// 提交按钮
+const submitForm = async () => {
+  const elForm = unref(formRef)?.getElFormRef()
+  if (!elForm) return
+  elForm.validate(async (valid) => {
+    if (valid) {
+      // 构建表单
+      let form = {
+        ...formData.value,
+        taskDefinitionName: undefined
+      }
+      // 将 roleIds 等选项赋值到 options 中
+      if (form.type === 10) {
+        form.options = form.roleIds
+      } else if (form.type === 20 || form.type === 21) {
+        form.options = form.deptIds
+      } else if (form.type === 22) {
+        form.options = form.postIds
+      } else if (form.type === 30 || form.type === 31 || form.type === 32) {
+        form.options = form.userIds
+      } else if (form.type === 40) {
+        form.options = form.userGroupIds
+      } else if (form.type === 50) {
+        form.options = form.scripts
+      }
+      form.roleIds = undefined
+      form.deptIds = undefined
+      form.postIds = undefined
+      form.userIds = undefined
+      form.userGroupIds = undefined
+      form.scripts = undefined
+      // 设置提交中
+      actionLoading.value = true
+      // 提交请求
+      try {
+        const data = form as TaskAssignRuleApi.TaskAssignVO
+        // 新增
+        if (!data.id) {
+          await TaskAssignRuleApi.createTaskAssignRule(data)
+          message.success(t('common.createSuccess'))
+          // 修改
+        } else {
+          await TaskAssignRuleApi.updateTaskAssignRule(data)
+          message.success(t('common.updateSuccess'))
+        }
+        dialogVisible.value = false
+      } finally {
+        actionLoading.value = false
+        // 刷新列表
+        await reload()
+      }
+    }
+  })
+}
+
+// 修改任务分配规则
+const handleUpdate = (row) => {
+  // 1. 先重置表单
+  formData.value = {}
+  // 2. 再设置表单
+  formData.value = {
+    ...row,
+    options: [],
+    roleIds: [],
+    deptIds: [],
+    postIds: [],
+    userIds: [],
+    userGroupIds: [],
+    scripts: []
+  }
+  // 将 options 赋值到对应的 roleIds 等选项
+  if (row.type === 10) {
+    formData.value.roleIds.push(...row.options)
+  } else if (row.type === 20 || row.type === 21) {
+    formData.value.deptIds.push(...row.options)
+  } else if (row.type === 22) {
+    formData.value.postIds.push(...row.options)
+  } else if (row.type === 30 || row.type === 31 || row.type === 32) {
+    formData.value.userIds.push(...row.options)
+  } else if (row.type === 40) {
+    formData.value.userGroupIds.push(...row.options)
+  } else if (row.type === 50) {
+    formData.value.scripts.push(...row.options)
+  }
+  // 打开弹窗
+  dialogVisible.value = true
+  actionLoading.value = false
+}
+
 // ========== 初始化 ==========
 onMounted(() => {
   // 获得角色列表
diff --git a/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/taskAssignRule.data.ts b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/taskAssignRule.data.ts
index 5bb6d2638..51acd3618 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/taskAssignRule.data.ts
+++ b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/taskAssignRule.data.ts
@@ -1,5 +1,16 @@
 import { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
 
+// 表单校验
+export const rules = reactive({
+  type: [{ required: true, message: '规则类型不能为空', trigger: 'change' }],
+  roleIds: [{ required: true, message: '指定角色不能为空', trigger: 'change' }],
+  deptIds: [{ required: true, message: '指定部门不能为空', trigger: 'change' }],
+  postIds: [{ required: true, message: '指定岗位不能为空', trigger: 'change' }],
+  userIds: [{ required: true, message: '指定用户不能为空', trigger: 'change' }],
+  userGroupIds: [{ required: true, message: '指定用户组不能为空', trigger: 'change' }],
+  scripts: [{ required: true, message: '指定脚本不能为空', trigger: 'change' }]
+})
+
 // CrudSchema
 const crudSchemas = reactive<VxeCrudSchema>({
   primaryKey: 'id',
@@ -17,7 +28,7 @@ const crudSchemas = reactive<VxeCrudSchema>({
     },
     {
       title: '规则类型',
-      field: 'category',
+      field: 'type',
       dictType: DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE,
       dictClass: 'number'
     },

From 1b60975ebbe2f3f034c583d8560807fcae52bb88 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 21 Jan 2023 19:08:35 +0800
Subject: [PATCH 16/59] =?UTF-8?q?bpm=EF=BC=9A=E5=AE=8C=E5=96=84=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=88=86=E9=85=8D=E4=BB=BB=E5=8A=A1=E7=9A=84=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bpm/taskAssignRule/index.vue    | 118 +++++++++---------
 1 file changed, 57 insertions(+), 61 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue
index 633540c2d..736888c54 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue
@@ -3,9 +3,12 @@
     <!-- 列表 -->
     <XTable @register="registerTable">
       <template #options_default="{ row }">
-        <el-tag :key="option" v-for="option in row.options">
-          {{ getAssignRuleOptionName(row.type, option) }}
-        </el-tag>
+        <span :key="option" v-for="option in row.options">
+          <el-tag>
+            {{ getAssignRuleOptionName(row.type, option) }}
+          </el-tag>
+          &nbsp;
+        </span>
       </template>
       <!-- 操作 -->
       <template #actionbtns_default="{ row }" v-if="modelId">
@@ -21,14 +24,7 @@
 
     <!-- 添加/修改弹窗 -->
     <XModal v-model="dialogVisible" title="修改任务规则" width="800" height="35%">
-      <el-form
-        ref="formRef"
-        :model="formData"
-        :rules="rules"
-        label-width="120px"
-        size="default"
-        status-icon
-      >
+      <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
         <el-form-item label="任务名称" prop="taskDefinitionName">
           <el-input v-model="formData.taskDefinitionName" placeholder="请输入流标标识" disabled />
         </el-form-item>
@@ -69,6 +65,7 @@
             :props="defaultProps"
             :data="deptTreeOptions"
             empty-text="加载中，请稍后"
+            multiple
           />
         </el-form-item>
         <el-form-item label="指定岗位" prop="postIds" span="24" v-if="formData.type === 22">
@@ -138,7 +135,7 @@
 </template>
 <script setup lang="ts" name="TaskAssignRule">
 // 全局相关的 import
-import type { FormInstance } from 'element-plus'
+import { FormInstance } from 'element-plus'
 // 业务相关的 import
 import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule'
 import { listSimpleRolesApi } from '@/api/system/role'
@@ -233,57 +230,56 @@ const formData = ref() // 表单数据
 
 // 提交按钮
 const submitForm = async () => {
-  const elForm = unref(formRef)?.getElFormRef()
+  // 参数校验
+  const elForm = unref(formRef)
   if (!elForm) return
-  elForm.validate(async (valid) => {
-    if (valid) {
-      // 构建表单
-      let form = {
-        ...formData.value,
-        taskDefinitionName: undefined
-      }
-      // 将 roleIds 等选项赋值到 options 中
-      if (form.type === 10) {
-        form.options = form.roleIds
-      } else if (form.type === 20 || form.type === 21) {
-        form.options = form.deptIds
-      } else if (form.type === 22) {
-        form.options = form.postIds
-      } else if (form.type === 30 || form.type === 31 || form.type === 32) {
-        form.options = form.userIds
-      } else if (form.type === 40) {
-        form.options = form.userGroupIds
-      } else if (form.type === 50) {
-        form.options = form.scripts
-      }
-      form.roleIds = undefined
-      form.deptIds = undefined
-      form.postIds = undefined
-      form.userIds = undefined
-      form.userGroupIds = undefined
-      form.scripts = undefined
-      // 设置提交中
-      actionLoading.value = true
-      // 提交请求
-      try {
-        const data = form as TaskAssignRuleApi.TaskAssignVO
-        // 新增
-        if (!data.id) {
-          await TaskAssignRuleApi.createTaskAssignRule(data)
-          message.success(t('common.createSuccess'))
-          // 修改
-        } else {
-          await TaskAssignRuleApi.updateTaskAssignRule(data)
-          message.success(t('common.updateSuccess'))
-        }
-        dialogVisible.value = false
-      } finally {
-        actionLoading.value = false
-        // 刷新列表
-        await reload()
-      }
+  const valid = await elForm.validate()
+  if (!valid) return
+  // 构建表单
+  let form = {
+    ...formData.value,
+    taskDefinitionName: undefined
+  }
+  // 将 roleIds 等选项赋值到 options 中
+  if (form.type === 10) {
+    form.options = form.roleIds
+  } else if (form.type === 20 || form.type === 21) {
+    form.options = form.deptIds
+  } else if (form.type === 22) {
+    form.options = form.postIds
+  } else if (form.type === 30 || form.type === 31 || form.type === 32) {
+    form.options = form.userIds
+  } else if (form.type === 40) {
+    form.options = form.userGroupIds
+  } else if (form.type === 50) {
+    form.options = form.scripts
+  }
+  form.roleIds = undefined
+  form.deptIds = undefined
+  form.postIds = undefined
+  form.userIds = undefined
+  form.userGroupIds = undefined
+  form.scripts = undefined
+  // 设置提交中
+  actionLoading.value = true
+  // 提交请求
+  try {
+    const data = form as TaskAssignRuleApi.TaskAssignVO
+    // 新增
+    if (!data.id) {
+      await TaskAssignRuleApi.createTaskAssignRule(data)
+      message.success(t('common.createSuccess'))
+      // 修改
+    } else {
+      await TaskAssignRuleApi.updateTaskAssignRule(data)
+      message.success(t('common.updateSuccess'))
     }
-  })
+    dialogVisible.value = false
+  } finally {
+    actionLoading.value = false
+    // 刷新列表
+    await reload()
+  }
 }
 
 // 修改任务分配规则

From b4e86430a3f1ffb63d9e4245c74d52d6d1776cd5 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 21 Jan 2023 20:25:45 +0800
Subject: [PATCH 17/59] =?UTF-8?q?bpm=EF=BC=9A=E5=A2=9E=E5=8A=A0=20OA=20?=
 =?UTF-8?q?=E8=AF=B7=E5=81=87=E7=9A=84=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/bpm/leave/index.ts                | 12 ++-
 .../src/api/bpm/leave/types.ts                | 10 ---
 .../src/router/modules/remaining.ts           | 48 ++++++++++
 .../src/types/auto-imports.d.ts               |  1 +
 .../src/views/bpm/oa/index.vue                |  4 -
 .../src/views/bpm/oa/leave/create.vue         | 90 +++++++++++++++++++
 .../src/views/bpm/oa/leave/detail.vue         | 54 +++++++++++
 .../src/views/bpm/oa/leave/index.vue          | 81 +++++++++++++++++
 .../src/views/bpm/oa/leave/leave.data.ts      | 74 +++++++++++++++
 9 files changed, 359 insertions(+), 15 deletions(-)
 delete mode 100644 yudao-ui-admin-vue3/src/api/bpm/leave/types.ts
 delete mode 100644 yudao-ui-admin-vue3/src/views/bpm/oa/index.vue
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/oa/leave/detail.vue
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts

diff --git a/yudao-ui-admin-vue3/src/api/bpm/leave/index.ts b/yudao-ui-admin-vue3/src/api/bpm/leave/index.ts
index 567fa5807..ff6d86a0a 100644
--- a/yudao-ui-admin-vue3/src/api/bpm/leave/index.ts
+++ b/yudao-ui-admin-vue3/src/api/bpm/leave/index.ts
@@ -1,5 +1,15 @@
 import request from '@/config/axios'
-import { LeaveVO } from './types'
+
+export type LeaveVO = {
+  id: number
+  result: number
+  type: number
+  reason: string
+  processInstanceId: string
+  startTime: string
+  endTime: string
+  createTime: string
+}
 
 // 创建请假申请
 export const createLeaveApi = async (data: LeaveVO) => {
diff --git a/yudao-ui-admin-vue3/src/api/bpm/leave/types.ts b/yudao-ui-admin-vue3/src/api/bpm/leave/types.ts
deleted file mode 100644
index 60b4bf831..000000000
--- a/yudao-ui-admin-vue3/src/api/bpm/leave/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export type LeaveVO = {
-  id: number
-  result: number
-  type: number
-  reason: string
-  processInstanceId: string
-  startTime: string
-  endTime: string
-  createTime: string
-}
diff --git a/yudao-ui-admin-vue3/src/router/modules/remaining.ts b/yudao-ui-admin-vue3/src/router/modules/remaining.ts
index c53bcb2df..9dc37a3c9 100644
--- a/yudao-ui-admin-vue3/src/router/modules/remaining.ts
+++ b/yudao-ui-admin-vue3/src/router/modules/remaining.ts
@@ -220,6 +220,54 @@ const remainingRouter: AppRouteRecordRaw[] = [
           canTo: true,
           title: '任务分配规则'
         }
+      },
+      {
+        path: '/process-instance/create',
+        component: () => import('@/views/bpm/processInstance/create.vue'),
+        name: 'BpmProcessInstanceCreate',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '发起流程',
+          activeMenu: 'bpm/processInstance/create'
+        }
+      },
+      {
+        path: '/process-instance/detail',
+        component: () => import('@/views/bpm/processInstance/detail.vue'),
+        name: 'BpmProcessInstanceDetail',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '流程详情',
+          activeMenu: 'bpm/processInstance/detail'
+        }
+      },
+      {
+        path: '/oa/leave/create',
+        component: () => import('@/views/bpm/oa/leave/create.vue'),
+        name: 'OALeaveCreate',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '发起 OA 请假',
+          activeMenu: 'bpm/oa/leave/create'
+        }
+      },
+      {
+        path: '/oa/leave/detail',
+        component: () => import('@/views/bpm/oa/leave/detail.vue'),
+        name: 'OALeaveDetail',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '查看 OA 请假',
+          activeMenu: 'bpm/oa/leave/detail'
+        }
       }
     ]
   }
diff --git a/yudao-ui-admin-vue3/src/types/auto-imports.d.ts b/yudao-ui-admin-vue3/src/types/auto-imports.d.ts
index 68e0f7a40..53862b631 100644
--- a/yudao-ui-admin-vue3/src/types/auto-imports.d.ts
+++ b/yudao-ui-admin-vue3/src/types/auto-imports.d.ts
@@ -3,6 +3,7 @@ export {}
 declare global {
   const DICT_TYPE: typeof import('@/utils/dict')['DICT_TYPE']
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']
diff --git a/yudao-ui-admin-vue3/src/views/bpm/oa/index.vue b/yudao-ui-admin-vue3/src/views/bpm/oa/index.vue
deleted file mode 100644
index 2292e1c95..000000000
--- a/yudao-ui-admin-vue3/src/views/bpm/oa/index.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<template>
-  <div>index</div>
-</template>
-<script setup lang="ts" name="Oa"></script>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
new file mode 100644
index 000000000..d2d24f8eb
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="app-container">
+    <el-form ref="createForm" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="开始时间" prop="startTime">
+        <el-date-picker clearable v-model="form.startTime" type="date" placeholder="选择开始时间" />
+      </el-form-item>
+      <el-form-item label="结束时间" prop="endTime">
+        <el-date-picker clearable v-model="form.endTime" type="date" placeholder="选择结束时间" />
+      </el-form-item>
+      <el-form-item label="请假类型" prop="type">
+        <el-select v-model="form.type" placeholder="请选择">
+          <el-option
+            v-for="dict in typeDictData"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="原因" prop="reason">
+        <el-input
+          style="width: 650px"
+          type="textarea"
+          :rows="3"
+          v-model="form.reason"
+          placeholder="请输入原因"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm(createForm)">提 交</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import {
+  ElInput,
+  ElSelect,
+  ElOption,
+  ElForm,
+  ElFormItem,
+  ElMessage,
+  ElDatePicker
+} from 'element-plus'
+import type { FormInstance } from 'element-plus'
+import { createLeaveApi } from '@/api/bpm/leave'
+import { getDictOptions, DICT_TYPE } from '@/utils/dict'
+import { useRouter } from 'vue-router'
+
+const { push } = useRouter()
+const createForm = ref()
+// 表单参数
+const form = ref({
+  startTime: undefined,
+  endTime: undefined,
+  type: undefined,
+  reason: undefined
+})
+// 表单校验
+const rules = reactive({
+  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
+  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '请假类型不能为空', trigger: 'change' }],
+  reason: [{ required: true, message: '请假原因不能为空', trigger: 'change' }]
+})
+const typeDictData = getDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log(form.value, 'submit!')
+      form.value.startTime = Date.parse(form.value.startTime)
+      form.value.endTime = Date.parse(form.value.endTime)
+      // 添加的提交
+      createLeaveApi(form.value).then((response) => {
+        console.log(response, 'response')
+        ElMessage({
+          type: 'success',
+          message: '发起成功'
+        })
+        push('/bpm/oa/leave')
+      })
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+</script>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/detail.vue
new file mode 100644
index 000000000..9e351e255
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/detail.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="app-container">
+    <!-- 对话框(添加 / 修改) -->
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="开始时间：" prop="startTime">
+        {{ formatDate(form.startTime, '{y}-{m}-{d}') }}
+      </el-form-item>
+      <el-form-item label="结束时间：" prop="endTime">
+        {{ formatDate(form.endTime, '{y}-{m}-{d}') }}
+      </el-form-item>
+      <el-form-item label="请假类型：" prop="type">
+        <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="form.type" />
+      </el-form-item>
+      <el-form-item label="原因：" prop="reason"> {{ form.reason }}</el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+import { getLeaveApi } from '@/api/bpm/leave'
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+// 请假编号
+const id = ref()
+// 表单参数
+const form = ref({
+  startTime: undefined,
+  endTime: undefined,
+  type: undefined,
+  reason: undefined
+})
+/** 获得请假信息 */
+const getDetail = () => {
+  getLeaveApi(id.value).then((response) => {
+    form.value = response.data
+  })
+}
+onMounted(() => {
+  id.value = router.currentRoute.value.query.id
+  if (!id.value) {
+    ElMessage({
+      type: 'error',
+      message: '未传递 id 参数，无法查看 OA 请假信息'
+    })
+    return
+  }
+  getDetail()
+})
+</script>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue
new file mode 100644
index 000000000..c25e52c4b
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue
@@ -0,0 +1,81 @@
+<template>
+  <XTable @register="registerTable">
+    <template #toolbar_buttons>
+      <!-- 操作：发起请假 -->
+      <XButton type="primary" preIcon="ep:plus" title="发起请假" @click="handleCreate()" />
+    </template>
+    <template #actionbtns_default="{ row }">
+      <!-- 操作: 取消请假 -->
+      <XTextButton
+        preIcon="ep:delete"
+        title="取消请假"
+        v-hasPermi="['bpm:oa-leave:create']"
+        v-if="row.result === 1"
+        @click="cancelLeave(row)"
+      />
+      <!-- 操作: 详情 -->
+      <XTextButton preIcon="ep:delete" :title="t('action.detail')" @click="handleDetail(row)" />
+      <!-- 操作: 审批进度 -->
+      <XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleProcessDetail(row)" />
+    </template>
+  </XTable>
+</template>
+
+<script setup lang="ts">
+// 全局相关的 import
+import { ElMessageBox } from 'element-plus'
+// 业务相关的 import
+import { allSchemas } from './leave.data'
+import * as LeaveApi from '@/api/bpm/leave'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const router = useRouter() // 路由
+
+const [registerTable, { reload }] = useXTable({
+  allSchemas: allSchemas,
+  getListApi: LeaveApi.getLeavePageApi
+})
+
+// 发起请假
+const handleCreate = () => {
+  router.push({
+    name: 'OALeaveCreate'
+  })
+}
+
+// 取消请假
+const cancelLeave = (row) => {
+  ElMessageBox.prompt('请输入取消原因', '取消流程', {
+    confirmButtonText: t('common.ok'),
+    cancelButtonText: t('common.cancel'),
+    inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
+    inputErrorMessage: '取消原因不能为空'
+  }).then(async ({ value }) => {
+    await ProcessInstanceApi.cancelProcessInstanceApi(row.id, value)
+    message.success('取消成功')
+    reload()
+  })
+}
+
+// 详情
+const handleDetail = (row) => {
+  router.push({
+    name: 'OALeaveDetail',
+    query: {
+      id: row.id
+    }
+  })
+}
+
+// 审批进度
+const handleProcessDetail = (row) => {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstanceId
+    }
+  })
+}
+</script>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts
new file mode 100644
index 000000000..041bde1fe
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts
@@ -0,0 +1,74 @@
+import { reactive } from 'vue'
+import { DICT_TYPE } from '@/utils/dict'
+import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
+// 国际化
+const { t } = useI18n()
+// 表单校验
+export const rules = reactive({
+  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
+  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '请假类型不能为空', trigger: 'change' }],
+  reason: [{ required: true, message: '请假原因不能为空', trigger: 'change' }]
+})
+
+// crudSchemas
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: 'id',
+  primaryTitle: '申请编号',
+  action: true,
+  actionWidth: '260',
+  columns: [
+    {
+      title: t('common.status'),
+      field: 'result',
+      dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
+      dictClass: 'number',
+      isSearch: true
+    },
+    {
+      title: t('common.startTimeText'),
+      field: 'startTime',
+      formatter: 'formatDate',
+      table: {
+        width: 180
+      }
+    },
+    {
+      title: t('common.endTimeText'),
+      field: 'endTime',
+      formatter: 'formatDate',
+      table: {
+        width: 180
+      }
+    },
+    {
+      title: '请假类型',
+      field: 'result',
+      dictType: DICT_TYPE.BPM_OA_LEAVE_TYPE,
+      dictClass: 'number',
+      isSearch: true
+    },
+    {
+      title: '原因',
+      field: 'reason',
+      isSearch: true
+    },
+    {
+      title: '申请时间',
+      field: 'createTime',
+      formatter: 'formatDate',
+      table: {
+        width: 180
+      },
+      isSearch: true,
+      search: {
+        show: true,
+        itemRender: {
+          name: 'XDataTimePicker'
+        }
+      }
+    }
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

From fb06bc8357972af6aae9774bd5f4d4c11d78bec6 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 21 Jan 2023 20:54:33 +0800
Subject: [PATCH 18/59] =?UTF-8?q?bpm=EF=BC=9A=E5=A2=9E=E5=8A=A0=20OA=20?=
 =?UTF-8?q?=E8=AF=B7=E5=81=87=E7=9A=84=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/plugins/vxeTable/index.ts             | 10 +++-
 .../src/views/bpm/oa/leave/detail.vue         | 55 +++++++------------
 .../src/views/bpm/oa/leave/index.vue          | 42 +++++++-------
 .../src/views/bpm/oa/leave/leave.data.ts      | 10 +++-
 4 files changed, 58 insertions(+), 59 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts b/yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts
index 9576e8175..6b61bb5c6 100644
--- a/yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts
+++ b/yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts
@@ -135,7 +135,15 @@ VXETable.setup({
 })
 // 自定义全局的格式化处理函数
 VXETable.formats.mixin({
-  // 格式日期，默认 yyyy-MM-dd HH:mm:ss
+  // 格式精简日期，默认 yyyy-MM-dd HH:mm:ss
+  formatDay({ cellValue }, format) {
+    if (cellValue != null) {
+      return XEUtils.toDateString(cellValue, format || 'yyyy-MM-dd')
+    } else {
+      return ''
+    }
+  },
+  // 格式完整日期，默认 yyyy-MM-dd HH:mm:ss
   formatDate({ cellValue }, format) {
     if (cellValue != null) {
       return XEUtils.toDateString(cellValue, format || 'yyyy-MM-dd HH:mm:ss')
diff --git a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/detail.vue
index 9e351e255..41e011b0e 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/detail.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/detail.vue
@@ -1,54 +1,37 @@
 <template>
-  <div class="app-container">
-    <!-- 对话框(添加 / 修改) -->
-    <el-form ref="form" :model="form" label-width="100px">
-      <el-form-item label="开始时间：" prop="startTime">
-        {{ formatDate(form.startTime, '{y}-{m}-{d}') }}
-      </el-form-item>
-      <el-form-item label="结束时间：" prop="endTime">
-        {{ formatDate(form.endTime, '{y}-{m}-{d}') }}
-      </el-form-item>
-      <el-form-item label="请假类型：" prop="type">
-        <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="form.type" />
-      </el-form-item>
-      <el-form-item label="原因：" prop="reason"> {{ form.reason }}</el-form-item>
-    </el-form>
-  </div>
+  <ContentWrap>
+    <!-- 详情 -->
+    <Descriptions :schema="allSchemas.detailSchema" :data="formData" />
+  </ContentWrap>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
-import { ElMessage } from 'element-plus'
+// 业务相关的 import
+import * as LeaveApi from '@/api/bpm/leave'
+import { allSchemas } from '@/views/bpm/oa/leave/leave.data'
 
-import { getLeaveApi } from '@/api/bpm/leave'
-import { DICT_TYPE } from '@/utils/dict'
-import { formatDate } from '@/utils/formatTime'
-import { useRouter } from 'vue-router'
-const router = useRouter()
-// 请假编号
-const id = ref()
+const { query } = useRoute() // 查询参数
+const message = useMessage() // 消息弹窗
+
+const id = ref() // 请假编号
 // 表单参数
-const form = ref({
+const formData = ref({
   startTime: undefined,
   endTime: undefined,
   type: undefined,
   reason: undefined
 })
-/** 获得请假信息 */
-const getDetail = () => {
-  getLeaveApi(id.value).then((response) => {
-    form.value = response.data
-  })
-}
+
 onMounted(() => {
-  id.value = router.currentRoute.value.query.id
+  id.value = query.id
   if (!id.value) {
-    ElMessage({
-      type: 'error',
-      message: '未传递 id 参数，无法查看 OA 请假信息'
-    })
+    message.error('未传递 id 参数，无法查看 OA 请假信息')
     return
   }
-  getDetail()
+  // 获得请假信息
+  LeaveApi.getLeaveApi(id.value).then((data) => {
+    formData.value = data
+  })
 })
 </script>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue
index c25e52c4b..c6cd4875c 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue
@@ -1,24 +1,26 @@
 <template>
-  <XTable @register="registerTable">
-    <template #toolbar_buttons>
-      <!-- 操作：发起请假 -->
-      <XButton type="primary" preIcon="ep:plus" title="发起请假" @click="handleCreate()" />
-    </template>
-    <template #actionbtns_default="{ row }">
-      <!-- 操作: 取消请假 -->
-      <XTextButton
-        preIcon="ep:delete"
-        title="取消请假"
-        v-hasPermi="['bpm:oa-leave:create']"
-        v-if="row.result === 1"
-        @click="cancelLeave(row)"
-      />
-      <!-- 操作: 详情 -->
-      <XTextButton preIcon="ep:delete" :title="t('action.detail')" @click="handleDetail(row)" />
-      <!-- 操作: 审批进度 -->
-      <XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleProcessDetail(row)" />
-    </template>
-  </XTable>
+  <ContentWrap>
+    <XTable @register="registerTable">
+      <template #toolbar_buttons>
+        <!-- 操作：发起请假 -->
+        <XButton type="primary" preIcon="ep:plus" title="发起请假" @click="handleCreate()" />
+      </template>
+      <template #actionbtns_default="{ row }">
+        <!-- 操作: 取消请假 -->
+        <XTextButton
+          preIcon="ep:delete"
+          title="取消请假"
+          v-hasPermi="['bpm:oa-leave:create']"
+          v-if="row.result === 1"
+          @click="cancelLeave(row)"
+        />
+        <!-- 操作: 详情 -->
+        <XTextButton preIcon="ep:delete" :title="t('action.detail')" @click="handleDetail(row)" />
+        <!-- 操作: 审批进度 -->
+        <XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleProcessDetail(row)" />
+      </template>
+    </XTable>
+  </ContentWrap>
 </template>
 
 <script setup lang="ts">
diff --git a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts
index 041bde1fe..ec1ec6b13 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts
+++ b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts
@@ -29,17 +29,23 @@ const crudSchemas = reactive<VxeCrudSchema>({
     {
       title: t('common.startTimeText'),
       field: 'startTime',
-      formatter: 'formatDate',
+      formatter: 'formatDay',
       table: {
         width: 180
+      },
+      detail: {
+        dateFormat: 'YYYY-MM-DD'
       }
     },
     {
       title: t('common.endTimeText'),
       field: 'endTime',
-      formatter: 'formatDate',
+      formatter: 'formatDay',
       table: {
         width: 180
+      },
+      detail: {
+        dateFormat: 'YYYY-MM-DD'
       }
     },
     {

From 3e4d388e701b7b6da39487032b07f2fc646d2530 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 21 Jan 2023 21:30:17 +0800
Subject: [PATCH 19/59] =?UTF-8?q?bpm=EF=BC=9A=E5=A2=9E=E5=8A=A0=20OA=20?=
 =?UTF-8?q?=E8=AF=B7=E5=81=87=E7=9A=84=E5=88=9B=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/oa/vo/BpmOALeaveBaseVO.java         |   2 +-
 .../src/views/bpm/oa/leave/create.vue         | 123 +++++++-----------
 .../src/views/bpm/oa/leave/leave.data.ts      |  30 +++--
 3 files changed, 66 insertions(+), 89 deletions(-)

diff --git a/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/controller/admin/oa/vo/BpmOALeaveBaseVO.java b/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/controller/admin/oa/vo/BpmOALeaveBaseVO.java
index b8b38c6f2..7cf0014c7 100644
--- a/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/controller/admin/oa/vo/BpmOALeaveBaseVO.java
+++ b/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/controller/admin/oa/vo/BpmOALeaveBaseVO.java
@@ -27,7 +27,7 @@ public class BpmOALeaveBaseVO {
     @ApiModelProperty(value = "请假类型", required = true, example = "1", notes = "参见 bpm_oa_type 枚举")
     private Integer type;
 
-    @ApiModelProperty(value = "原因", required = true, example = "阅读芋道源码")
+    @ApiModelProperty(value = "原因", example = "阅读芋道源码")
     private String reason;
 
 }
diff --git a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
index d2d24f8eb..20f3903aa 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
@@ -1,89 +1,56 @@
 <template>
-  <div class="app-container">
-    <el-form ref="createForm" :model="form" :rules="rules" label-width="80px">
-      <el-form-item label="开始时间" prop="startTime">
-        <el-date-picker clearable v-model="form.startTime" type="date" placeholder="选择开始时间" />
-      </el-form-item>
-      <el-form-item label="结束时间" prop="endTime">
-        <el-date-picker clearable v-model="form.endTime" type="date" placeholder="选择结束时间" />
-      </el-form-item>
-      <el-form-item label="请假类型" prop="type">
-        <el-select v-model="form.type" placeholder="请选择">
-          <el-option
-            v-for="dict in typeDictData"
-            :key="parseInt(dict.value)"
-            :label="dict.label"
-            :value="parseInt(dict.value)"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="原因" prop="reason">
-        <el-input
-          style="width: 650px"
-          type="textarea"
-          :rows="3"
-          v-model="form.reason"
-          placeholder="请输入原因"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="submitForm(createForm)">提 交</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
+  <ContentWrap>
+    <!-- 对话框(添加 / 修改) -->
+    <Form :schema="allSchemas.formSchema" :rules="rules" ref="formRef" />
+    <!-- 按钮：保存 -->
+    <XButton
+      type="primary"
+      :title="t('action.save')"
+      :loading="actionLoading"
+      @click="submitForm"
+    />
+  </ContentWrap>
 </template>
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
-import {
-  ElInput,
-  ElSelect,
-  ElOption,
-  ElForm,
-  ElFormItem,
-  ElMessage,
-  ElDatePicker
-} from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import { createLeaveApi } from '@/api/bpm/leave'
-import { getDictOptions, DICT_TYPE } from '@/utils/dict'
-import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+import { FormExpose } from '@/components/Form'
+import XEUtils from 'xe-utils'
+
+// 业务相关的 import
+import * as LeaveApi from '@/api/bpm/leave'
+import { rules, allSchemas } from './leave.data'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const router = useRouter() // 路由
 
-const { push } = useRouter()
-const createForm = ref()
 // 表单参数
-const form = ref({
-  startTime: undefined,
-  endTime: undefined,
-  type: undefined,
-  reason: undefined
-})
-// 表单校验
-const rules = reactive({
-  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
-  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
-  type: [{ required: true, message: '请假类型不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '请假原因不能为空', trigger: 'change' }]
-})
-const typeDictData = getDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)
+const actionLoading = ref(false) // 按钮 Loading
+const formRef = ref<FormExpose>() // 表单 Ref
 
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log(form.value, 'submit!')
-      form.value.startTime = Date.parse(form.value.startTime)
-      form.value.endTime = Date.parse(form.value.endTime)
+// 提交按钮
+const submitForm = async () => {
+  const elForm = unref(formRef)?.getElFormRef()
+  if (!elForm) return
+  elForm.validate(async (valid) => {
+    if (!valid) {
+      return
+    }
+    try {
+      // 设置提交中
+      actionLoading.value = true
+      const data = unref(formRef)?.formModel as LeaveApi.LeaveVO
+      data.startTime = XEUtils.toDateString(data.startTime, 'yyyy-MM-dd HH:mm:ss')
+      data.endTime = XEUtils.toDateString(data.endTime, 'yyyy-MM-dd HH:mm:ss')
       // 添加的提交
-      createLeaveApi(form.value).then((response) => {
-        console.log(response, 'response')
-        ElMessage({
-          type: 'success',
-          message: '发起成功'
-        })
-        push('/bpm/oa/leave')
+      await LeaveApi.createLeaveApi(data)
+      message.success(t('common.createSuccess'))
+      // 关闭窗口
+      await router.push({
+        path: '/oa/leave/create'
       })
-    } else {
-      console.log('error submit!', fields)
+    } finally {
+      actionLoading.value = false
     }
   })
 }
diff --git a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts
index ec1ec6b13..288f744ae 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts
+++ b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts
@@ -1,14 +1,12 @@
-import { reactive } from 'vue'
-import { DICT_TYPE } from '@/utils/dict'
 import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
-// 国际化
-const { t } = useI18n()
+
+const { t } = useI18n() // 国际化
+
 // 表单校验
 export const rules = reactive({
   startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
   endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
-  type: [{ required: true, message: '请假类型不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '请假原因不能为空', trigger: 'change' }]
+  type: [{ required: true, message: '请假类型不能为空', trigger: 'change' }]
 })
 
 // crudSchemas
@@ -24,7 +22,8 @@ const crudSchemas = reactive<VxeCrudSchema>({
       field: 'result',
       dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
       dictClass: 'number',
-      isSearch: true
+      isSearch: true,
+      isForm: false
     },
     {
       title: t('common.startTimeText'),
@@ -35,6 +34,9 @@ const crudSchemas = reactive<VxeCrudSchema>({
       },
       detail: {
         dateFormat: 'YYYY-MM-DD'
+      },
+      form: {
+        component: 'DatePicker'
       }
     },
     {
@@ -46,11 +48,14 @@ const crudSchemas = reactive<VxeCrudSchema>({
       },
       detail: {
         dateFormat: 'YYYY-MM-DD'
+      },
+      form: {
+        component: 'DatePicker'
       }
     },
     {
       title: '请假类型',
-      field: 'result',
+      field: 'type',
       dictType: DICT_TYPE.BPM_OA_LEAVE_TYPE,
       dictClass: 'number',
       isSearch: true
@@ -58,7 +63,11 @@ const crudSchemas = reactive<VxeCrudSchema>({
     {
       title: '原因',
       field: 'reason',
-      isSearch: true
+      isSearch: true,
+      componentProps: {
+        type: 'textarea',
+        rows: 4
+      }
     },
     {
       title: '申请时间',
@@ -73,7 +82,8 @@ const crudSchemas = reactive<VxeCrudSchema>({
         itemRender: {
           name: 'XDataTimePicker'
         }
-      }
+      },
+      isForm: false
     }
   ]
 })

From 98bf423569ebe1df74991f1f5283df90afa5083d Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 22 Jan 2023 09:21:22 +0800
Subject: [PATCH 20/59] =?UTF-8?q?bpm=EF=BC=9A=E5=A2=9E=E5=8A=A0=E5=BE=85?=
 =?UTF-8?q?=E5=8A=9E=E4=BB=BB=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../task/vo/task/BpmTaskTodoPageReqVO.java    | 19 +++--
 .../bpm/service/task/BpmTaskServiceImpl.java  | 10 ++-
 yudao-ui-admin-vue3/src/api/bpm/task/types.ts | 39 ---------
 .../src/views/bpm/task/my/index.vue           |  4 -
 .../src/views/bpm/task/todo/done.data.ts      | 74 -----------------
 .../src/views/bpm/task/todo/index.vue         | 81 +++++++------------
 .../src/views/bpm/task/todo/todo.data.ts      | 57 +++++++++++++
 7 files changed, 106 insertions(+), 178 deletions(-)
 delete mode 100644 yudao-ui-admin-vue3/src/api/bpm/task/types.ts
 delete mode 100644 yudao-ui-admin-vue3/src/views/bpm/task/my/index.vue
 delete mode 100644 yudao-ui-admin-vue3/src/views/bpm/task/todo/done.data.ts
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/task/todo/todo.data.ts

diff --git a/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/controller/admin/task/vo/task/BpmTaskTodoPageReqVO.java b/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/controller/admin/task/vo/task/BpmTaskTodoPageReqVO.java
index 9d2ad18c2..f6e4ebf17 100644
--- a/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/controller/admin/task/vo/task/BpmTaskTodoPageReqVO.java
+++ b/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/controller/admin/task/vo/task/BpmTaskTodoPageReqVO.java
@@ -1,6 +1,7 @@
 package cn.iocoder.yudao.module.bpm.controller.admin.task.vo.task;
 
 import cn.iocoder.yudao.framework.common.pojo.PageParam;
+import cn.iocoder.yudao.framework.common.util.date.DateUtils;
 import io.swagger.annotations.ApiModel;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
@@ -21,12 +22,16 @@ public class BpmTaskTodoPageReqVO extends PageParam {
     @ApiModelProperty(value = "流程任务名", example = "芋道")
     private String name;
 
-    @ApiModelProperty(value = "开始的创建收间")
-    @DateTimeFormat(pattern = FORMAT_YEAR_MONTH_DAY_HOUR_MINUTE_SECOND)
-    private LocalDateTime beginCreateTime;
-
-    @ApiModelProperty(value = "结束的创建时间")
-    @DateTimeFormat(pattern = FORMAT_YEAR_MONTH_DAY_HOUR_MINUTE_SECOND)
-    private LocalDateTime endCreateTime;
+    @ApiModelProperty(value = "创建时间")
+    @DateTimeFormat(pattern = DateUtils.FORMAT_YEAR_MONTH_DAY_HOUR_MINUTE_SECOND)
+    private LocalDateTime[] createTime;
+//
+//    @ApiModelProperty(value = "开始的创建收间")
+//    @DateTimeFormat(pattern = FORMAT_YEAR_MONTH_DAY_HOUR_MINUTE_SECOND)
+//    private LocalDateTime beginCreateTime;
+//
+//    @ApiModelProperty(value = "结束的创建时间")
+//    @DateTimeFormat(pattern = FORMAT_YEAR_MONTH_DAY_HOUR_MINUTE_SECOND)
+//    private LocalDateTime endCreateTime;
 
 }
diff --git a/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/service/task/BpmTaskServiceImpl.java b/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/service/task/BpmTaskServiceImpl.java
index 929eb0137..62b638f2e 100644
--- a/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/service/task/BpmTaskServiceImpl.java
+++ b/yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/service/task/BpmTaskServiceImpl.java
@@ -1,6 +1,8 @@
 package cn.iocoder.yudao.module.bpm.service.task;
 
 import cn.hutool.core.collection.CollUtil;
+import cn.hutool.core.collection.ListUtil;
+import cn.hutool.core.util.ArrayUtil;
 import cn.hutool.core.util.StrUtil;
 import cn.iocoder.yudao.framework.common.pojo.PageResult;
 import cn.iocoder.yudao.framework.common.util.date.DateUtils;
@@ -75,11 +77,11 @@ public class BpmTaskServiceImpl implements BpmTaskService {
         if (StrUtil.isNotBlank(pageVO.getName())) {
             taskQuery.taskNameLike("%" + pageVO.getName() + "%");
         }
-        if (pageVO.getBeginCreateTime() != null) {
-            taskQuery.taskCreatedAfter(DateUtils.of(pageVO.getBeginCreateTime()));
+        if (ArrayUtil.get(pageVO.getCreateTime(), 0) != null) {
+            taskQuery.taskCreatedAfter(DateUtils.of(pageVO.getCreateTime()[0]));
         }
-        if (pageVO.getEndCreateTime() != null) {
-            taskQuery.taskCreatedBefore(DateUtils.of(pageVO.getEndCreateTime()));
+        if (ArrayUtil.get(pageVO.getCreateTime(), 1) != null) {
+            taskQuery.taskCreatedBefore(DateUtils.of(pageVO.getCreateTime()[1]));
         }
         // 执行查询
         List<Task> tasks = taskQuery.listPage(PageUtils.getStart(pageVO), pageVO.getPageSize());
diff --git a/yudao-ui-admin-vue3/src/api/bpm/task/types.ts b/yudao-ui-admin-vue3/src/api/bpm/task/types.ts
deleted file mode 100644
index 8f7722529..000000000
--- a/yudao-ui-admin-vue3/src/api/bpm/task/types.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-export type FormVO = {
-  id: number
-  name: string
-  conf: string
-  fields: string[]
-  status: number
-  remark: string
-  createTime: string
-}
-
-export type TaskProcessVO = {
-  id: string
-  name: string
-  startUserId: number
-  startUserNickname: string
-  processDefinitionId: string
-}
-
-export type TaskTodoVO = {
-  id: string
-  name: string
-  claimTime: string
-  createTime: string
-  suspensionState: number
-  processInstance: TaskProcessVO
-}
-
-export type TaskDoneVO = {
-  id: string
-  name: string
-  claimTime: string
-  createTime: string
-  endTime: string
-  durationInMillis: number
-  suspensionState: number
-  result: number
-  reason: string
-  processInstance: TaskProcessVO
-}
diff --git a/yudao-ui-admin-vue3/src/views/bpm/task/my/index.vue b/yudao-ui-admin-vue3/src/views/bpm/task/my/index.vue
deleted file mode 100644
index 3e2ddcc26..000000000
--- a/yudao-ui-admin-vue3/src/views/bpm/task/my/index.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<template>
-  <div>index</div>
-</template>
-<script setup lang="ts" name="My"></script>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/task/todo/done.data.ts b/yudao-ui-admin-vue3/src/views/bpm/task/todo/done.data.ts
deleted file mode 100644
index 5ad3d2c46..000000000
--- a/yudao-ui-admin-vue3/src/views/bpm/task/todo/done.data.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// CrudSchema
-const crudSchemas = reactive<CrudSchema[]>([
-  {
-    label: t('common.index'),
-    field: 'id',
-    type: 'index'
-  },
-  {
-    label: '任务名称',
-    field: 'name',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '所属流程',
-    field: 'processInstance.name'
-  },
-  {
-    label: '流程发起人',
-    field: 'processInstance.startUserNickname'
-  },
-  {
-    label: t('common.createTime'),
-    field: 'createTime',
-    search: {
-      show: true,
-      component: 'DatePicker',
-      componentProps: {
-        type: 'datetimerange',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)],
-        shortcuts: [
-          {
-            text: '近一周',
-            value: () => {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-              return [start, end]
-            }
-          },
-          {
-            text: '近一个月',
-            value: () => {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-              return [start, end]
-            }
-          },
-          {
-            text: '近三个月',
-            value: () => {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-              return [start, end]
-            }
-          }
-        ]
-      }
-    }
-  },
-  {
-    label: t('table.action'),
-    field: 'action',
-    width: '100px'
-  }
-])
-export const { allSchemas } = useCrudSchemas(crudSchemas)
diff --git a/yudao-ui-admin-vue3/src/views/bpm/task/todo/index.vue b/yudao-ui-admin-vue3/src/views/bpm/task/todo/index.vue
index f0e59a090..a2843440b 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/task/todo/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/task/todo/index.vue
@@ -1,56 +1,37 @@
-<script setup lang="ts" name="Todo">
-import dayjs from 'dayjs'
-import { DICT_TYPE } from '@/utils/dict'
-import { useTable } from '@/hooks/web/useTable'
-import type { TaskTodoVO } from '@/api/bpm/task/types'
-import { allSchemas } from './done.data'
-import * as TaskTodoApi from '@/api/bpm/task'
-const { push } = useRouter()
-// ========== 列表相关 ==========
-const { register, tableObject, methods } = useTable<TaskTodoVO>({
-  getListApi: TaskTodoApi.getTodoTaskPage
-})
-const { getList, setSearchParams } = methods
-
-// 审批操作
-const handleAudit = async (row: TaskTodoVO) => {
-  push('/bpm/process-instance/detail?id=' + row.processInstance.id)
-}
-
-// ========== 初始化 ==========
-getList()
-</script>
-
 <template>
-  <!-- 搜索工作区 -->
   <ContentWrap>
-    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
-  </ContentWrap>
-  <ContentWrap>
-    <!-- 列表 -->
-    <Table
-      :columns="allSchemas.tableColumns"
-      :selection="false"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
-      :pagination="{
-        total: tableObject.total
-      }"
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
-      @register="register"
-    >
-      <template #status="{ row }">
-        <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
+    <XTable @register="registerTable">
+      <template #suspensionState_default="{ row }">
+        <el-tag type="success" v-if="row.suspensionState === 1">激活</el-tag>
+        <el-tag type="warning" v-if="row.suspensionState === 2">挂起</el-tag>
       </template>
-      <template #createTime="{ row }">
-        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+      <template #actionbtns_default="{ row }">
+        <!-- 操作: 审批进度 -->
+        <XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleAudit(row)" />
       </template>
-      <template #action="{ row }">
-        <el-button link type="primary" v-hasPermi="['bpm:task:update']" @click="handleAudit(row)">
-          <Icon icon="ep:edit" class="mr-1px" /> 审批
-        </el-button>
-      </template>
-    </Table>
+    </XTable>
   </ContentWrap>
 </template>
+
+<script setup lang="ts">
+// 业务相关的 import
+import { allSchemas } from './todo.data'
+import * as TaskApi from '@/api/bpm/task'
+
+const router = useRouter() // 路由
+
+const [registerTable] = useXTable({
+  allSchemas: allSchemas,
+  getListApi: TaskApi.getTodoTaskPage
+})
+
+// 处理审批按钮
+const handleAudit = (row) => {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstanceId
+    }
+  })
+}
+</script>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/task/todo/todo.data.ts b/yudao-ui-admin-vue3/src/views/bpm/task/todo/todo.data.ts
new file mode 100644
index 000000000..85e1a6ae5
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/task/todo/todo.data.ts
@@ -0,0 +1,57 @@
+import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
+
+const { t } = useI18n() // 国际化
+
+// crudSchemas
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: null,
+  action: true,
+  columns: [
+    {
+      title: '任务编号',
+      field: 'id',
+      table: {
+        width: 320
+      }
+    },
+    {
+      title: '任务名称',
+      field: 'name',
+      isSearch: true
+    },
+    {
+      title: '所属流程',
+      field: 'processInstance.name'
+    },
+    {
+      title: '流程发起人',
+      field: 'processInstance.startUserNickname'
+    },
+    {
+      title: t('common.createTime'),
+      field: 'createTime',
+      formatter: 'formatDate',
+      table: {
+        width: 180
+      },
+      isSearch: true,
+      search: {
+        show: true,
+        itemRender: {
+          name: 'XDataTimePicker'
+        }
+      }
+    },
+    {
+      title: '任务状态',
+      field: 'suspensionState',
+      table: {
+        slots: {
+          default: 'suspensionState_default'
+        }
+      }
+    }
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

From 2f46e230af957e42df23868a590cbfb64f80e536 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 22 Jan 2023 09:47:55 +0800
Subject: [PATCH 21/59] =?UTF-8?q?bpm=EF=BC=9A=E5=A2=9E=E5=8A=A0=E5=B7=B2?=
 =?UTF-8?q?=E5=8A=9E=E4=BB=BB=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bpm/task/done/done.data.ts      | 136 +++++++-----------
 .../src/views/bpm/task/done/index.vue         |  90 ++++--------
 2 files changed, 79 insertions(+), 147 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/views/bpm/task/done/done.data.ts b/yudao-ui-admin-vue3/src/views/bpm/task/done/done.data.ts
index d28391cf1..295165e7f 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/task/done/done.data.ts
+++ b/yudao-ui-admin-vue3/src/views/bpm/task/done/done.data.ts
@@ -1,92 +1,52 @@
-import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
+
 const { t } = useI18n() // 国际化
 
-// CrudSchema
-const crudSchemas = reactive<CrudSchema[]>([
-  {
-    label: t('common.index'),
-    field: 'id',
-    type: 'index'
-  },
-  {
-    label: '任务名称',
-    field: 'name',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '所属流程',
-    field: 'processInstance.name'
-  },
-  {
-    label: '流程发起人',
-    field: 'processInstance.startUserNickname'
-  },
-  {
-    label: '结果',
-    field: 'result',
-    dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
-    dictClass: 'number'
-  },
-  {
-    label: '审批意见',
-    field: 'reason'
-  },
-  {
-    label: t('common.createTime'),
-    field: 'createTime',
-    search: {
-      show: true,
-      component: 'DatePicker',
-      componentProps: {
-        type: 'datetimerange',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)],
-        shortcuts: [
-          {
-            text: '近一周',
-            value: () => {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-              return [start, end]
-            }
-          },
-          {
-            text: '近一个月',
-            value: () => {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-              return [start, end]
-            }
-          },
-          {
-            text: '近三个月',
-            value: () => {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-              return [start, end]
-            }
-          }
-        ]
+// crudSchemas
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: null,
+  action: true,
+  columns: [
+    {
+      title: '任务编号',
+      field: 'id',
+      table: {
+        width: 320
+      }
+    },
+    {
+      title: '任务名称',
+      field: 'name',
+      isSearch: true
+    },
+    {
+      title: '所属流程',
+      field: 'processInstance.name'
+    },
+    {
+      title: '流程发起人',
+      field: 'processInstance.startUserNickname'
+    },
+    {
+      title: t('common.status'),
+      field: 'result',
+      dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
+      dictClass: 'number',
+      isSearch: true
+    },
+    {
+      title: '原因',
+      field: 'reason'
+    },
+    {
+      title: t('common.createTime'),
+      field: 'createTime',
+      formatter: 'formatDate',
+      table: {
+        width: 180
       }
     }
-  },
-  {
-    label: '审批时间',
-    field: 'endTime'
-  },
-  {
-    label: '耗时',
-    field: 'durationInMillis'
-  },
-  {
-    label: t('table.action'),
-    field: 'action',
-    width: '100px'
-  }
-])
-export const { allSchemas } = useCrudSchemas(crudSchemas)
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/yudao-ui-admin-vue3/src/views/bpm/task/done/index.vue b/yudao-ui-admin-vue3/src/views/bpm/task/done/index.vue
index db4b36832..f6314cb6f 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/task/done/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/task/done/index.vue
@@ -1,65 +1,37 @@
-<script setup lang="ts" name="Done">
-import dayjs from 'dayjs'
-import duration from 'dayjs/plugin/duration'
-import { DICT_TYPE } from '@/utils/dict'
-import type { TaskDoneVO } from '@/api/bpm/task/types'
-import { allSchemas } from './done.data'
-import * as TaskDoneApi from '@/api/bpm/task'
-import { useTable } from '@/hooks/web/useTable'
-dayjs.extend(duration)
-const { t } = useI18n() // 国际化
-const { push } = useRouter()
-// ========== 列表相关 ==========
-const { register, tableObject, methods } = useTable<TaskDoneVO>({
-  getListApi: TaskDoneApi.getDoneTaskPage
-})
-const { getList, setSearchParams } = methods
-
-// 审批操作
-const handleAudit = async (row: TaskDoneVO) => {
-  push('/bpm/process-instance/detail?id=' + row.processInstance.id)
-}
-
-// ========== 初始化 ==========
-getList()
-</script>
-
 <template>
-  <!-- 搜索工作区 -->
   <ContentWrap>
-    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
-  </ContentWrap>
-  <ContentWrap>
-    <!-- 列表 -->
-    <Table
-      :columns="allSchemas.tableColumns"
-      :selection="false"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
-      :pagination="{
-        total: tableObject.total
-      }"
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
-      @register="register"
-    >
-      <template #status="{ row }">
-        <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
+    <XTable @register="registerTable">
+      <template #suspensionState_default="{ row }">
+        <el-tag type="success" v-if="row.suspensionState === 1">激活</el-tag>
+        <el-tag type="warning" v-if="row.suspensionState === 2">挂起</el-tag>
       </template>
-      <template #createTime="{ row }">
-        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+      <template #actionbtns_default="{ row }">
+        <!-- 操作: 审批进度 -->
+        <XTextButton preIcon="ep:view" title="详情" @click="handleAudit(row)" />
       </template>
-      <template #endTime="{ row }">
-        <span>{{ dayjs(row.endTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-      <template #durationInMillis="{ row }">
-        <span>{{ dayjs.duration(row.durationInMillis).asMilliseconds() }}</span>
-      </template>
-      <template #action="{ row }">
-        <el-button link type="primary" v-hasPermi="['bpm:task:query']" @click="handleAudit(row)">
-          <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
-        </el-button>
-      </template>
-    </Table>
+    </XTable>
   </ContentWrap>
 </template>
+
+<script setup lang="ts">
+// 业务相关的 import
+import { allSchemas } from './done.data'
+import * as TaskApi from '@/api/bpm/task'
+
+const router = useRouter() // 路由
+
+const [registerTable] = useXTable({
+  allSchemas: allSchemas,
+  getListApi: TaskApi.getDoneTaskPage
+})
+
+// 处理审批按钮
+const handleAudit = (row) => {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstanceId
+    }
+  })
+}
+</script>

From e6fadf073af25eee020d390d337d1aaf55857984 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 22 Jan 2023 13:42:26 +0800
Subject: [PATCH 22/59] =?UTF-8?q?bpm=EF=BC=9A=E5=88=9D=E5=A7=8B=E5=8C=96?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=AE=9E=E4=BE=8B=E7=9A=84=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bpm/processInstance/create.vue  | 133 +++++
 .../src/views/bpm/processInstance/detail.vue  | 506 ++++++++++++++++++
 .../src/views/bpm/processInstance/index.vue   | 203 ++++---
 .../bpm/processInstance/process.create.ts     |  36 ++
 .../views/bpm/processInstance/process.data.ts | 161 +++---
 .../bpm/processInstance/process.detail.ts     |  36 ++
 6 files changed, 895 insertions(+), 180 deletions(-)
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/processInstance/process.create.ts
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/processInstance/process.detail.ts

diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
new file mode 100644
index 000000000..1bd3ab402
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="app-container">
+    <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
+    <div v-if="!selectProcessInstance">
+      <XTable @register="registerTable">
+        <template #version_default="{ row }">
+          <el-tag v-if="row">v{{ row.version }}</el-tag>
+        </template>
+        <template #actionbtns_default="{ row }">
+          <el-button type="text" size="small" icon="el-icon-plus" @click="handleSelect(row)"
+            >选择</el-button
+          >
+        </template>
+      </XTable>
+    </div>
+    <!-- 第二步，填写表单，进行流程的提交 -->
+    <div v-else>
+      <el-card class="box-card">
+        <div class="clearfix">
+          <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
+          <el-button style="float: right" type="primary" @click="selectProcessInstance = undefined"
+            >选择其它流程</el-button
+          >
+        </div>
+        <el-col :span="16" :offset="6">
+          <div>
+            <!-- <parser :key="new Date().getTime()" :form-conf="detailForm" @submit="submitForm" /> -->
+          </div>
+        </el-col>
+      </el-card>
+      <el-card class="box-card">
+        <div class="clearfix">
+          <span class="el-icon-picture-outline">流程图</span>
+        </div>
+        <!-- <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" /> -->
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { useXTable } from '@/hooks/web/useXTable'
+import * as definitionApi from '@/api/bpm/definition'
+// import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import { decodeFields } from '@/utils/formGenerator'
+// import Parser from '@/components/parser/Parser'
+// import * as processInstanceApi from "@/api/bpm/processInstance";
+import { allSchemas } from './process.create'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+const queryParams = reactive({
+  suspensionState: 1
+})
+const [registerTable] = useXTable({
+  allSchemas: allSchemas,
+  params: queryParams,
+  getListApi: definitionApi.getProcessDefinitionListApi
+})
+
+// 流程表单详情
+const detailForm = ref({
+  fields: []
+})
+
+// // BPMN 数据
+const bpmnXML = ref(null)
+// const bpmnControlForm=ref( {
+//   prefix: "flowable"
+// })
+
+// 流程表单
+const selectProcessInstance = ref(undefined) // 选择的流程实例
+/** 处理选择流程的按钮操作 **/
+const handleSelect = (row) => {
+  // 设置选择的流程
+  selectProcessInstance.value = row
+
+  // 流程表单
+  if (row.formId) {
+    // 设置对应的表单
+    detailForm.value = {
+      ...JSON.parse(row.formConf),
+      fields: decodeFields([], row.formFields)
+    }
+
+    // 加载流程图
+    definitionApi.getProcessDefinitionBpmnXMLApi(row.id).then((response) => {
+      bpmnXML.value = response.data
+    })
+  } else if (row.formCustomCreatePath) {
+    router.push({ path: row.formCustomCreatePath })
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+  }
+}
+/** 提交按钮 */
+//  const submitForm=(params)=> {
+//     if (!params) {
+//       return;
+//     }
+//     // 设置表单禁用
+//     const conf = params.conf;
+//     conf.disabled = true; // 表单禁用
+//     conf.formBtns = false; // 按钮隐藏
+
+//     // 提交表单，创建流程
+//     const variables = params.values;
+//   await  processInstanceApi.createProcessInstanceApi({
+//       processDefinitionId: this.selectProcessInstance.id,
+//       variables: variables
+//     }).then(response => {
+//       this.$modal.msgSuccess("发起流程成功");
+//       // 关闭当前窗口
+//       this.$tab.closeOpenPage();
+//       this.$router.go(-1);
+//     }).catch(() => {
+//       conf.disabled = false; // 表单开启
+//       conf.formBtns = true; // 按钮展示
+//     })
+//   }
+</script>
+
+<style lang="scss">
+.my-process-designer {
+  height: calc(100vh - 200px);
+}
+
+.box-card {
+  width: 100%;
+  margin-bottom: 20px;
+}
+</style>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
new file mode 100644
index 000000000..6911fb281
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
@@ -0,0 +1,506 @@
+<template>
+  <div class="app-container">
+    <!-- 审批信息 -->
+    <el-card
+      class="box-card"
+      v-loading="processInstanceLoading"
+      v-for="(item, index) in runningTasks"
+      :key="index"
+    >
+      <div slot="header" class="clearfix">
+        <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
+      </div>
+      <el-col :span="16" :offset="6">
+        <el-form
+          :ref="'form' + index"
+          :model="auditForms[index]"
+          :rules="auditRule"
+          label-width="100px"
+        >
+          <el-form-item label="流程名" v-if="processInstance && processInstance.name">
+            {{ processInstance.name }}
+          </el-form-item>
+          <el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser">
+            {{ processInstance.startUser.nickname }}
+            <el-tag type="info" size="mini">{{ processInstance.startUser.deptName }}</el-tag>
+          </el-form-item>
+          <el-form-item label="审批建议" prop="reason">
+            <el-input
+              type="textarea"
+              v-model="auditForms[index].reason"
+              placeholder="请输入审批建议"
+            />
+          </el-form-item>
+        </el-form>
+        <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
+          <el-button
+            icon="el-icon-edit-outline"
+            type="success"
+            size="mini"
+            @click="handleAudit(item, true)"
+            >通过</el-button
+          >
+          <el-button
+            icon="el-icon-circle-close"
+            type="danger"
+            size="mini"
+            @click="handleAudit(item, false)"
+            >不通过</el-button
+          >
+          <el-button
+            icon="el-icon-edit-outline"
+            type="primary"
+            size="mini"
+            @click="handleUpdateAssignee(item)"
+            >转办</el-button
+          >
+          <el-button
+            icon="el-icon-edit-outline"
+            type="primary"
+            size="mini"
+            @click="handleDelegate(item)"
+            >委派</el-button
+          >
+          <el-button
+            icon="el-icon-refresh-left"
+            type="warning"
+            size="mini"
+            @click="handleBack(item)"
+            >退回</el-button
+          >
+        </div>
+      </el-col>
+    </el-card>
+    <!-- 申请信息 -->
+    <el-card class="box-card" v-loading="processInstanceLoading">
+      <div slot="header" class="clearfix">
+        <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
+      </div>
+      <el-col
+        v-if="
+          this.processInstance.processDefinition &&
+          this.processInstance.processDefinition.formType === 10
+        "
+        :span="16"
+        :offset="6"
+      >
+        <div>
+          <parser :key="new Date().getTime()" :form-conf="detailForm" />
+        </div>
+      </el-col>
+      <div
+        v-if="
+          this.processInstance.processDefinition &&
+          this.processInstance.processDefinition.formType === 20
+        "
+      >
+        <router-link
+          :to="
+            this.processInstance.processDefinition.formCustomViewPath +
+            '?id=' +
+            this.processInstance.businessKey
+          "
+        >
+          <el-button type="primary">点击查看</el-button>
+        </router-link>
+      </div>
+    </el-card>
+
+    <!-- 审批记录 -->
+    <el-card class="box-card" v-loading="tasksLoad">
+      <div slot="header" class="clearfix">
+        <span class="el-icon-picture-outline">审批记录</span>
+      </div>
+      <el-col :span="16" :offset="4">
+        <div class="block">
+          <el-timeline>
+            <el-timeline-item
+              v-for="(item, index) in tasks"
+              :key="index"
+              :icon="getTimelineItemIcon(item)"
+              :type="getTimelineItemType(item)"
+            >
+              <p style="font-weight: 700">任务：{{ item.name }}</p>
+              <el-card :body-style="{ padding: '10px' }">
+                <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
+                  审批人：{{ item.assigneeUser.nickname }}
+                  <el-tag type="info" size="mini">{{ item.assigneeUser.deptName }}</el-tag>
+                </label>
+                <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
+                <label style="color: #8a909c; font-weight: normal">{{
+                  parseTime(item.createTime)
+                }}</label>
+                <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal"
+                  >审批时间：</label
+                >
+                <label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
+                  {{ parseTime(item.endTime) }}</label
+                >
+                <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal"
+                  >耗时：</label
+                >
+                <label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
+                  {{ getDateStar(item.durationInMillis) }}
+                </label>
+                <p v-if="item.reason">
+                  <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
+                </p>
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
+        </div>
+      </el-col>
+    </el-card>
+
+    <!-- 高亮流程图 -->
+    <el-card class="box-card" v-loading="processInstanceLoading">
+      <div slot="header" class="clearfix">
+        <span class="el-icon-picture-outline">流程图</span>
+      </div>
+      <my-process-viewer
+        key="designer"
+        v-model="bpmnXML"
+        v-bind="bpmnControlForm"
+        :activityData="activityList"
+        :processInstanceData="processInstance"
+        :taskData="tasks"
+      />
+    </el-card>
+
+    <!-- 对话框(转派审批人) -->
+    <el-dialog title="转派审批人" :visible.sync="updateAssignee.open" width="500px" append-to-body>
+      <el-form
+        ref="updateAssigneeForm"
+        :model="updateAssignee.form"
+        :rules="updateAssignee.rules"
+        label-width="110px"
+      >
+        <el-form-item label="新审批人" prop="assigneeUserId">
+          <el-select v-model="updateAssignee.form.assigneeUserId" clearable style="width: 100%">
+            <el-option
+              v-for="item in userOptions"
+              :key="parseInt(item.id)"
+              :label="item.nickname"
+              :value="parseInt(item.id)"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitUpdateAssigneeForm">确 定</el-button>
+        <el-button @click="cancelUpdateAssigneeForm">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getProcessDefinitionBpmnXML } from "@/api/bpm/definition"
+import { DICT_TYPE, getDictOptions } from "@/utils/dict"
+import store from "@/store"
+import { decodeFields } from "@/utils/formGenerator"
+import Parser from '@/components/parser/Parser'
+import { getProcessInstanceApi } from "@/api/bpm/processInstance"
+import { approveTask, getTaskListByProcessInstanceId, rejectTask, updateTaskAssignee } from "@/api/bpm/task"
+import { getDate } from "@/utils/dateUtils"
+import { getListSimpleUsersApi } from "@/api/system/user"
+import { getActivityList } from "@/api/bpm/activity"
+
+// 流程实例的详情页，可用于审批
+export default {
+  name: "ProcessInstanceDetail",
+  components: {
+    Parser
+  },
+  data () {
+    return {
+      // 遮罩层
+      processInstanceLoading: true,
+      // 流程实例
+      id: undefined, // 流程实例的编号
+      processInstance: {},
+
+      // 流程表单详情
+      detailForm: {
+        fields: []
+      },
+
+      // BPMN 数据
+      bpmnXML: null,
+      bpmnControlForm: {
+        prefix: "flowable"
+      },
+      activityList: [],
+
+      // 审批记录
+      tasksLoad: true,
+      tasks: [],
+
+      // 审批表单
+      runningTasks: [],
+      auditForms: [],
+      auditRule: {
+        reason: [{ required: true, message: "审批建议不能为空", trigger: "blur" }],
+      },
+
+      // 转派审批人
+      userOptions: [],
+      updateAssignee: {
+        open: false,
+        form: {
+          assigneeUserId: undefined,
+        },
+        rules: {
+          assigneeUserId: [{ required: true, message: "新审批人不能为空", trigger: "change" }],
+        }
+      },
+
+      // 数据字典
+      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
+    }
+  },
+  created () {
+    this.id = this.$route.query.id
+    if (!this.id) {
+      this.$message.error('未传递 id 参数，无法查看流程信息')
+      return
+    }
+    this.getDetail()
+
+    // 获得用户列表
+    this.userOptions = []
+    getListSimpleUsersApi().then(response => {
+      this.userOptions.push(...response.data)
+    })
+  },
+  methods: {
+    /** 获得流程实例 */
+    getDetail () {
+      // 获得流程实例相关
+      this.processInstanceLoading = true
+      getProcessInstanceApi(this.id).then(response => {
+        if (!response.data) {
+          this.$message.error('查询不到流程信息！')
+          return
+        }
+        // 设置流程信息
+        this.processInstance = response.data
+
+        // 设置表单信息
+        if (this.processInstance.processDefinition.formType === 10) {
+          this.detailForm = {
+            ...JSON.parse(this.processInstance.processDefinition.formConf),
+            disabled: true, // 表单禁用
+            formBtns: false, // 按钮隐藏
+            fields: decodeFields(this.processInstance.processDefinition.formFields)
+          }
+          // 设置表单的值
+          this.detailForm.fields.forEach(item => {
+            const val = this.processInstance.formVariables[item.__vModel__]
+            if (val) {
+              item.__config__.defaultValue = val
+            }
+          })
+        }
+
+        // 加载流程图
+        getProcessDefinitionBpmnXML(this.processInstance.processDefinition.id).then(response => {
+          this.bpmnXML = response.data
+        })
+        // 加载活动列表
+        getActivityList({
+          processInstanceId: this.processInstance.id
+        }).then(response => {
+          this.activityList = response.data
+        })
+
+        // 取消加载中
+        this.processInstanceLoading = false
+      })
+
+      // 获得流程任务列表（审批记录）
+      this.tasksLoad = true
+      this.runningTasks = []
+      this.auditForms = []
+      getTaskListByProcessInstanceId(this.id).then(response => {
+        // 审批记录
+        this.tasks = []
+        // 移除已取消的审批
+        response.data.forEach(task => {
+          if (task.result !== 4) {
+            this.tasks.push(task)
+          }
+        })
+        // 排序，将未完成的排在前面，已完成的排在后面；
+        this.tasks.sort((a, b) => {
+          // 有已完成的情况，按照完成时间倒序
+          if (a.endTime && b.endTime) {
+            return b.endTime - a.endTime
+          } else if (a.endTime) {
+            return 1
+          } else if (b.endTime) {
+            return -1
+            // 都是未完成，按照创建时间倒序
+          } else {
+            return b.createTime - a.createTime
+          }
+        })
+
+        // 需要审核的记录
+        const userId = store.getters.userId
+        this.tasks.forEach(task => {
+          if (task.result !== 1) { // 只有待处理才需要
+            return
+          }
+          if (!task.assigneeUser || task.assigneeUser.id !== userId) { // 自己不是处理人
+            return
+          }
+          this.runningTasks.push({ ...task })
+          this.auditForms.push({
+            reason: ''
+          })
+        })
+
+        // 取消加载中
+        this.tasksLoad = false
+      })
+    },
+    /** 处理选择流程的按钮操作 **/
+    handleSelect (row) {
+      // 设置选择的流程
+      this.selectProcessInstance = row
+
+      // 流程表单
+      if (row.formId) {
+        // 设置对应的表单
+        this.detailForm = {
+          ...JSON.parse(row.formConf),
+          fields: decodeFields(row.formFields)
+        }
+      } else if (row.formCustomCreatePath) {
+        this.$router.push({ path: row.formCustomCreatePath })
+        // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+      }
+    },
+    getDateStar (ms) {
+      return getDate(ms)
+    },
+    getTimelineItemIcon (item) {
+      if (item.result === 1) {
+        return 'el-icon-time'
+      }
+      if (item.result === 2) {
+        return 'el-icon-check'
+      }
+      if (item.result === 3) {
+        return 'el-icon-close'
+      }
+      if (item.result === 4) {
+        return 'el-icon-remove-outline'
+      }
+      return ''
+    },
+    getTimelineItemType (item) {
+      if (item.result === 1) {
+        return 'primary'
+      }
+      if (item.result === 2) {
+        return 'success'
+      }
+      if (item.result === 3) {
+        return 'danger'
+      }
+      if (item.result === 4) {
+        return 'info'
+      }
+      return ''
+    },
+    /** 处理审批通过和不通过的操作 */
+    handleAudit (task, pass) {
+      const index = this.runningTasks.indexOf(task)
+      this.$refs['form' + index][0].validate(valid => {
+        if (!valid) {
+          return
+        }
+        const data = {
+          id: task.id,
+          reason: this.auditForms[index].reason
+        }
+        if (pass) {
+          approveTask(data).then(response => {
+            this.$modal.msgSuccess("审批通过成功！")
+            this.getDetail() // 获得最新详情
+          })
+        } else {
+          rejectTask(data).then(response => {
+            this.$modal.msgSuccess("审批不通过成功！")
+            this.getDetail() // 获得最新详情
+          })
+        }
+      })
+    },
+    /** 处理转派审批人 */
+    handleUpdateAssignee (task) {
+      // 设置表单
+      this.resetUpdateAssigneeForm()
+      this.updateAssignee.form.id = task.id
+      // 设置为打开
+      this.updateAssignee.open = true
+    },
+    /** 提交转派审批人 */
+    submitUpdateAssigneeForm () {
+      this.$refs['updateAssigneeForm'].validate(valid => {
+        if (!valid) {
+          return
+        }
+        updateTaskAssignee(this.updateAssignee.form).then(response => {
+          this.$modal.msgSuccess("转派任务成功！")
+          this.updateAssignee.open = false
+          this.getDetail() // 获得最新详情
+        })
+      })
+    },
+    /** 取消转派审批人 */
+    cancelUpdateAssigneeForm () {
+      this.updateAssignee.open = false
+      this.resetUpdateAssigneeForm()
+    },
+    /** 重置转派审批人 */
+    resetUpdateAssigneeForm () {
+      this.updateAssignee.form = {
+        id: undefined,
+        assigneeUserId: undefined,
+      }
+      this.resetForm("updateAssigneeForm")
+    },
+    /** 处理审批退回的操作 */
+    handleDelegate (task) {
+      this.$modal.msgError("暂不支持【委派】功能，可以使用【转派】替代！")
+    },
+    /** 处理审批退回的操作 */
+    handleBack (task) {
+      this.$modal.msgError("暂不支持【退回】功能！")
+      // 可参考 http://blog.wya1.com/article/636697030/details/7296
+      // const data = {
+      //   id: task.id,
+      //   assigneeUserId: 1
+      // }
+      // backTask(data).then(response => {
+      //   this.$modal.msgSuccess("回退成功！");
+      //   this.getDetail(); // 获得最新详情
+      // });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.my-process-designer {
+  height: calc(100vh - 200px);
+}
+
+.box-card {
+  width: 100%;
+  margin-bottom: 20px;
+}
+</style>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
index e71498df0..aa834d531 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
@@ -1,113 +1,110 @@
-<script setup lang="ts" name="ProcessInstance">
-import dayjs from 'dayjs'
-import { DICT_TYPE } from '@/utils/dict'
-import { useTable } from '@/hooks/web/useTable'
-import type { ProcessInstanceVO } from '@/api/bpm/processInstance/types'
-import { allSchemas } from './process.data'
+<template>
+  <ContentWrap>
+    <!-- 列表 -->
+    <XTable @register="registerTable">
+      <template #toolbar_buttons>
+        <!-- 操作：新增 -->
+        <XButton
+          type="primary"
+          preIcon="ep:zoom-in"
+          title="新建流程"
+          v-hasPermi="['bpm:process-instance:query']"
+          @click="handleCreate"
+        />
+      </template>
+      <!-- 当前审批任务 -->
+      <template #tasks_default="{ row }">
+        <el-button
+          v-for="task in row.tasks"
+          :key="task.id"
+          type="text"
+          @click="handleFormDetail(task.id)"
+        >
+          <span>{{ task.name }}</span>
+        </el-button>
+      </template>
+      <!-- 操作 -->
+      <template #actionbtns_default="{ row }">
+        <XButton
+          type="primary"
+          title="取消"
+          v-if="row.result === 1"
+          preIcon="ep:delete"
+          @click="handleCancel(row)"
+        />
+        <XButton type="primary" title="详情" preIcon="ep:edit-pen" @click="handleDetail(row)" />
+      </template>
+    </XTable>
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+// 全局相关的 import
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useXTable } from '@/hooks/web/useXTable'
+import { useRouter } from 'vue-router'
+
+// 业务相关的 import
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { ElMessageBox } from 'element-plus'
-const { t } = useI18n() // 国际化
-const message = useMessage()
+// import { decodeFields } from '@/utils/formGenerator' // TODO 芋艿：后续根据情况清理
+import { allSchemas } from './process.data'
+
+const router = useRouter() // 路由
 
 // ========== 列表相关 ==========
-const { register, tableObject, methods } = useTable<ProcessInstanceVO>({
+const [registerTable] = useXTable({
+  allSchemas: allSchemas,
   getListApi: ProcessInstanceApi.getMyProcessInstancePageApi
 })
-const { getList, setSearchParams } = methods
-
-// ========== CRUD 相关 ==========
-const dialogVisible = ref(false) // 是否显示弹出层
-// 发起流程
-const handleAdd = () => {
-  console.info('add')
-}
-// 取消操作
-const handleCancel = (row: ProcessInstanceVO) => {
-  ElMessageBox.prompt('请输入取消原因？', '取消流程', {
-    confirmButtonText: t('common.ok'),
-    cancelButtonText: t('common.cancel'),
-    type: 'warning',
-    inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/, // 判断非空，且非空格
-    inputErrorMessage: '取消原因不能为空'
-  }).then(async ({ value }) => {
-    await ProcessInstanceApi.cancelProcessInstanceApi(row.id, value)
-    message.success('取消成功')
-    getList()
+// 流程表单的弹出框
+const detailOpen = ref(false)
+const detailForm = ref()
+/** 发起流程操作 **/
+const handleCreate = () => {
+  router.push({
+    name: 'BpmProcessInstanceCreate'
   })
 }
-
-// ========== 详情相关 ==========
-const detailData = ref() // 详情 Ref
-
-// 详情操作
-const handleDetail = async (row: ProcessInstanceVO) => {
-  // 设置数据
-  detailData.value = row
-  dialogVisible.value = true
+/** 流程表单的详情按钮操作 */
+const handleFormDetail = (row) => {
+  // 情况一：使用流程表单
+  if (row.formId) {
+    // 设置值 TODO 芋艿：动态表单做完后，需要测试下
+    detailForm.value = {
+      ...JSON.parse(row.formConf),
+      fields: decodeFields([], row.formFields)
+    }
+    // 弹窗打开
+    detailOpen.value = true
+    // 情况二：使用业务表单
+  } else if (row.formCustomCreatePath) {
+    router.push({ path: row.formCustomCreatePath })
+  }
 }
 
-// ========== 初始化 ==========
-getList()
+// 列表操作
+const handleDetail = (row) => {
+  console.log(row, 'row')
+  router.push({ path: '/process-instance/detail', query: { id: row.id } })
+}
+/** 取消按钮操作 */
+const handleCancel = (row) => {
+  const id = row.id
+  ElMessageBox.prompt('请输入取消原因？', '取消流程', {
+    type: 'warning',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
+    inputErrorMessage: '取消原因不能为空'
+  })
+    .then(({ value }) => {
+      return ProcessInstanceApi.cancelProcessInstanceApi(id, value)
+    })
+    .then(() => {
+      ElMessage({
+        message: '取消成功',
+        type: 'success'
+      })
+    })
+}
 </script>
-
-<template>
-  <!-- 搜索工作区 -->
-  <ContentWrap>
-    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
-  </ContentWrap>
-  <ContentWrap>
-    <!-- 操作工具栏 -->
-    <div class="mb-10px">
-      <el-button type="primary" v-hasPermi="['bpm:process-instance:query']" @click="handleAdd">
-        <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
-      </el-button>
-    </div>
-    <!-- 列表 -->
-    <Table
-      :columns="allSchemas.tableColumns"
-      :selection="false"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
-      :pagination="{
-        total: tableObject.total
-      }"
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
-      @register="register"
-    >
-      <template #status="{ row }">
-        <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
-      </template>
-      <template #createTime="{ row }">
-        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-      <template #action="{ row }">
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['bpm:process-instance:query']"
-          @click="handleDetail(row)"
-        >
-          <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['bpm:process-instance:cancel']"
-          @click="handleCancel(row)"
-        >
-          <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
-        </el-button>
-      </template>
-    </Table>
-  </ContentWrap>
-
-  <XModal v-model="dialogVisible" :title="t('action.detail')">
-    <!-- 对话框(详情) -->
-    <Descriptions :schema="allSchemas.detailSchema" :data="detailData" />
-    <!-- 操作按钮 -->
-    <template #footer>
-      <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
-    </template>
-  </XModal>
-</template>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.create.ts b/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.create.ts
new file mode 100644
index 000000000..36cdebc54
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.create.ts
@@ -0,0 +1,36 @@
+import { reactive } from 'vue'
+// import { useI18n } from '@/hooks/web/useI18n'
+import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
+import { DICT_TYPE } from '@/utils/dict'
+// const { t } = useI18n() // 国际化
+
+// CrudSchema
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: 'id',
+  primaryTitle: '流程名称',
+  action: true,
+  actionWidth: '200px',
+  columns: [
+    {
+      title: '流程分类',
+      field: 'category',
+      dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
+      dictClass: 'number'
+    },
+    {
+      title: '流程版本',
+      field: 'processDefinition.version',
+      table: {
+        slots: {
+          default: 'version_default'
+        }
+      }
+    },
+    {
+      title: '流程描述',
+      field: 'description'
+    }
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.data.ts b/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.data.ts
index 7be3f1fe7..b399f601a 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.data.ts
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.data.ts
@@ -1,84 +1,91 @@
-import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { reactive } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
+import { DICT_TYPE } from '@/utils/dict'
 const { t } = useI18n() // 国际化
 
 // CrudSchema
-const crudSchemas = reactive<CrudSchema[]>([
-  {
-    label: t('common.index'),
-    field: 'id',
-    type: 'index',
-    form: {
-      show: false
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: null,
+  primaryTitle: '编号',
+  action: true,
+  actionWidth: '200px',
+  columns: [
+    {
+      title: '编号',
+      field: 'id',
+      table: {
+        width: 320
+      }
     },
-    detail: {
-      show: false
-    }
-  },
-  {
-    label: '流程名',
-    field: 'name',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '流程分类',
-    field: 'category',
-    dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
-    dictClass: 'number',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '当前审批任务',
-    field: 'tasks'
-  },
-  {
-    label: t('common.status'),
-    field: 'status',
-    dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
-    dictClass: 'number',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '结果',
-    field: 'result',
-    dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
-    dictClass: 'number',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '提交时间',
-    field: 'createTime',
-    form: {
-      show: false
+    {
+      title: '流程名',
+      field: 'name',
+      isSearch: true
     },
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '结束时间',
-    field: 'endTime',
-    form: {
-      show: false
-    }
-  },
-  {
-    label: t('table.action'),
-    field: 'action',
-    width: '240px',
-    form: {
-      show: false
+    {
+      title: '所属流程',
+      field: 'processDefinitionId',
+      isSearch: true,
+      isTable: false
     },
-    detail: {
-      show: false
+    {
+      title: '流程分类',
+      field: 'category',
+      dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
+      dictClass: 'number',
+      isSearch: true
+    },
+    {
+      title: '当前审批任务',
+      field: 'tasks',
+      table: {
+        width: 100,
+        slots: {
+          default: 'tasks_default'
+        }
+      }
+    },
+    {
+      title: t('common.status'),
+      field: 'status',
+      dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+      dictClass: 'number',
+      isSearch: true
+    },
+    {
+      title: '结果',
+      field: 'result',
+      dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
+      dictClass: 'number',
+      isSearch: true
+    },
+    {
+      title: '提交时间',
+      field: 'createTime',
+      formatter: 'formatDate',
+      table: {
+        width: 180
+      },
+      isForm: false,
+      isSearch: true,
+      search: {
+        show: true,
+        itemRender: {
+          name: 'XDataTimePicker'
+        }
+      }
+    },
+    {
+      title: '结束时间',
+      field: 'endTime',
+      formatter: 'formatDate',
+      table: {
+        width: 180
+      },
+      isForm: false
     }
-  }
-])
-export const { allSchemas } = useCrudSchemas(crudSchemas)
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.detail.ts b/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.detail.ts
new file mode 100644
index 000000000..36cdebc54
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.detail.ts
@@ -0,0 +1,36 @@
+import { reactive } from 'vue'
+// import { useI18n } from '@/hooks/web/useI18n'
+import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
+import { DICT_TYPE } from '@/utils/dict'
+// const { t } = useI18n() // 国际化
+
+// CrudSchema
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: 'id',
+  primaryTitle: '流程名称',
+  action: true,
+  actionWidth: '200px',
+  columns: [
+    {
+      title: '流程分类',
+      field: 'category',
+      dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
+      dictClass: 'number'
+    },
+    {
+      title: '流程版本',
+      field: 'processDefinition.version',
+      table: {
+        slots: {
+          default: 'version_default'
+        }
+      }
+    },
+    {
+      title: '流程描述',
+      field: 'description'
+    }
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

From 2d6fe27b4337e84c86529bcc7067547cda98d6b2 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 23 Jan 2023 00:03:56 +0800
Subject: [PATCH 23/59] =?UTF-8?q?bpm=EF=BC=9A=E5=AE=8C=E6=88=90=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=AE=9E=E4=BE=8B=E7=9A=84=E5=88=97=E8=A1=A8=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bpm/definition/index.vue        |  4 +-
 .../src/views/bpm/oa/leave/index.vue          |  2 +-
 .../src/views/bpm/processInstance/index.vue   | 72 ++++++-------------
 .../views/bpm/processInstance/process.data.ts |  2 +-
 .../src/views/bpm/processInstance/index.vue   |  2 +-
 5 files changed, 26 insertions(+), 56 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue b/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
index 467e1dd3f..b37c3f5a6 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
@@ -45,11 +45,9 @@
     </XModal>
   </ContentWrap>
 </template>
-
 <script setup lang="ts">
 // 全局相关的 import
 import { ref } from 'vue'
-// import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 
 // 业务相关的 import
 import * as DefinitionApi from '@/api/bpm/definition'
@@ -87,7 +85,7 @@ const handleFormDetail = async (row) => {
     // 弹窗打开
     formDetailVisible.value = true
   } else {
-    router.push({
+    await router.push({
       path: row.formCustomCreatePath
     })
   }
diff --git a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue
index c6cd4875c..a08ecbf16 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue
@@ -15,7 +15,7 @@
           @click="cancelLeave(row)"
         />
         <!-- 操作: 详情 -->
-        <XTextButton preIcon="ep:delete" :title="t('action.detail')" @click="handleDetail(row)" />
+        <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
         <!-- 操作: 审批进度 -->
         <XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleProcessDetail(row)" />
       </template>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
index aa834d531..4b524b7e2 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
@@ -14,97 +14,69 @@
       </template>
       <!-- 当前审批任务 -->
       <template #tasks_default="{ row }">
-        <el-button
-          v-for="task in row.tasks"
-          :key="task.id"
-          type="text"
-          @click="handleFormDetail(task.id)"
-        >
+        <el-button v-for="task in row.tasks" :key="task.id" type="text">
           <span>{{ task.name }}</span>
         </el-button>
       </template>
       <!-- 操作 -->
       <template #actionbtns_default="{ row }">
+        <XButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
         <XButton
-          type="primary"
+          preIcon="ep:delete"
           title="取消"
           v-if="row.result === 1"
-          preIcon="ep:delete"
           @click="handleCancel(row)"
         />
-        <XButton type="primary" title="详情" preIcon="ep:edit-pen" @click="handleDetail(row)" />
       </template>
     </XTable>
   </ContentWrap>
 </template>
 <script setup lang="ts">
 // 全局相关的 import
-import { ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { useXTable } from '@/hooks/web/useXTable'
-import { useRouter } from 'vue-router'
+import { ElMessageBox } from 'element-plus'
 
 // 业务相关的 import
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-// import { decodeFields } from '@/utils/formGenerator' // TODO 芋艿：后续根据情况清理
 import { allSchemas } from './process.data'
 
 const router = useRouter() // 路由
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
 
 // ========== 列表相关 ==========
-const [registerTable] = useXTable({
+const [registerTable, { reload }] = useXTable({
   allSchemas: allSchemas,
   getListApi: ProcessInstanceApi.getMyProcessInstancePageApi
 })
-// 流程表单的弹出框
-const detailOpen = ref(false)
-const detailForm = ref()
+
 /** 发起流程操作 **/
 const handleCreate = () => {
   router.push({
     name: 'BpmProcessInstanceCreate'
   })
 }
-/** 流程表单的详情按钮操作 */
-const handleFormDetail = (row) => {
-  // 情况一：使用流程表单
-  if (row.formId) {
-    // 设置值 TODO 芋艿：动态表单做完后，需要测试下
-    detailForm.value = {
-      ...JSON.parse(row.formConf),
-      fields: decodeFields([], row.formFields)
-    }
-    // 弹窗打开
-    detailOpen.value = true
-    // 情况二：使用业务表单
-  } else if (row.formCustomCreatePath) {
-    router.push({ path: row.formCustomCreatePath })
-  }
-}
 
 // 列表操作
 const handleDetail = (row) => {
-  console.log(row, 'row')
-  router.push({ path: '/process-instance/detail', query: { id: row.id } })
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstanceId
+    }
+  })
 }
+
 /** 取消按钮操作 */
 const handleCancel = (row) => {
-  const id = row.id
-  ElMessageBox.prompt('请输入取消原因？', '取消流程', {
-    type: 'warning',
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
+  ElMessageBox.prompt('请输入取消原因', '取消流程', {
+    confirmButtonText: t('common.ok'),
+    cancelButtonText: t('common.cancel'),
     inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
     inputErrorMessage: '取消原因不能为空'
+  }).then(async ({ value }) => {
+    await ProcessInstanceApi.cancelProcessInstanceApi(row.id, value)
+    message.success('取消成功')
+    reload()
   })
-    .then(({ value }) => {
-      return ProcessInstanceApi.cancelProcessInstanceApi(id, value)
-    })
-    .then(() => {
-      ElMessage({
-        message: '取消成功',
-        type: 'success'
-      })
-    })
 }
 </script>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.data.ts b/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.data.ts
index b399f601a..c5ce76715 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.data.ts
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.data.ts
@@ -41,7 +41,7 @@ const crudSchemas = reactive<VxeCrudSchema>({
       title: '当前审批任务',
       field: 'tasks',
       table: {
-        width: 100,
+        width: 140,
         slots: {
           default: 'tasks_default'
         }
diff --git a/yudao-ui-admin/src/views/bpm/processInstance/index.vue b/yudao-ui-admin/src/views/bpm/processInstance/index.vue
index e57da88a9..b15751325 100644
--- a/yudao-ui-admin/src/views/bpm/processInstance/index.vue
+++ b/yudao-ui-admin/src/views/bpm/processInstance/index.vue
@@ -58,7 +58,7 @@
       </el-table-column>
       <el-table-column label="当前审批任务" align="center" prop="tasks">
         <template v-slot="scope">
-          <el-button v-for="task in scope.row.tasks" :key="task.id" type="text" @click="handleFormDetail(task.id)">
+          <el-button v-for="task in scope.row.tasks" :key="task.id" type="text"">
             <span>{{ task.name }}</span>
           </el-button>
         </template>

From 6c6050a320f6fc5da7590887c2eee508e603f3ab Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 23 Jan 2023 23:11:25 +0800
Subject: [PATCH 24/59] =?UTF-8?q?bpm=EF=BC=9A=E5=AE=8C=E6=88=90=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=AE=9E=E4=BE=8B=E7=9A=84=E5=8F=91=E8=B5=B7=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/bpm/processInstance/index.ts      |   3 +-
 .../src/views/bpm/model/index.vue             |   2 +-
 .../src/views/bpm/processInstance/create.vue  | 166 ++++++++++--------
 .../src/views/bpm/processInstance/index.vue   |  10 +-
 .../bpm/processInstance/process.create.ts     |  16 +-
 5 files changed, 105 insertions(+), 92 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts b/yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts
index a56b1d420..17b232fb5 100644
--- a/yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts
+++ b/yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts
@@ -1,11 +1,10 @@
 import request from '@/config/axios'
-import { ProcessInstanceVO } from './types'
 
 export const getMyProcessInstancePageApi = async (params) => {
   return await request.get({ url: '/bpm/process-instance/my-page', params })
 }
 
-export const createProcessInstanceApi = async (data: ProcessInstanceVO) => {
+export const createProcessInstanceApi = async (data) => {
   return await request.post({ url: '/bpm/process-instance/create', data: data })
 }
 
diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
index ebd317c15..81335cba4 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
@@ -363,7 +363,7 @@ const handleFormDetail = async (row) => {
     // 弹窗打开
     formDetailVisible.value = true
   } else {
-    router.push({
+    await router.push({
       path: row.formCustomCreatePath
     })
   }
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
index 1bd3ab402..6f54077e7 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <ContentWrap>
     <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
     <div v-if="!selectProcessInstance">
       <XTable @register="registerTable">
@@ -7,9 +7,7 @@
           <el-tag v-if="row">v{{ row.version }}</el-tag>
         </template>
         <template #actionbtns_default="{ row }">
-          <el-button type="text" size="small" icon="el-icon-plus" @click="handleSelect(row)"
-            >选择</el-button
-          >
+          <XTextButton preIcon="ep:plus" title="选择" @click="handleSelect(row)" />
         </template>
       </XTable>
     </div>
@@ -18,107 +16,119 @@
       <el-card class="box-card">
         <div class="clearfix">
           <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
-          <el-button style="float: right" type="primary" @click="selectProcessInstance = undefined"
-            >选择其它流程</el-button
-          >
+          <XButton
+            style="float: right"
+            type="primary"
+            preIcon="ep:delete"
+            title="选择其它流程"
+            @click="selectProcessInstance = undefined"
+          />
         </div>
-        <el-col :span="16" :offset="6">
-          <div>
-            <!-- <parser :key="new Date().getTime()" :form-conf="detailForm" @submit="submitForm" /> -->
-          </div>
+        <el-col :span="16" :offset="6" style="margin-top: 20px">
+          <form-create
+            :rule="detailForm.rule"
+            v-model:api="fApi"
+            :option="detailForm.option"
+            @submit="submitForm"
+          />
         </el-col>
       </el-card>
       <el-card class="box-card">
         <div class="clearfix">
           <span class="el-icon-picture-outline">流程图</span>
         </div>
+        <!-- TODO 芋艿：待完成？？？ -->
         <!-- <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" /> -->
       </el-card>
     </div>
-  </div>
+  </ContentWrap>
 </template>
-
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
-import { useXTable } from '@/hooks/web/useXTable'
-import * as definitionApi from '@/api/bpm/definition'
-// import {DICT_TYPE, getDictDatas} from "@/utils/dict";
-import { decodeFields } from '@/utils/formGenerator'
-// import Parser from '@/components/parser/Parser'
-// import * as processInstanceApi from "@/api/bpm/processInstance";
+// 业务相关的 import
 import { allSchemas } from './process.create'
-import { useRouter } from 'vue-router'
-const router = useRouter()
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+
+const router = useRouter() // 路由
+const message = useMessage() // 消息
+
+// ========== 列表相关 ==========
 
-const queryParams = reactive({
-  suspensionState: 1
-})
 const [registerTable] = useXTable({
   allSchemas: allSchemas,
-  params: queryParams,
-  getListApi: definitionApi.getProcessDefinitionListApi
+  params: {
+    suspensionState: 1
+  },
+  getListApi: DefinitionApi.getProcessDefinitionListApi,
+  isList: true
 })
 
+// ========== 表单相关 ==========
+
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { ApiAttrs } from '@form-create/element-ui/types/config'
+const fApi = ref<ApiAttrs>()
+
 // 流程表单详情
 const detailForm = ref({
-  fields: []
+  rule: [],
+  option: {}
 })
 
+// 流程表单
+const selectProcessInstance = ref(undefined) // 选择的流程实例
+/** 处理选择流程的按钮操作 **/
+const handleSelect = async (row) => {
+  // 设置选择的流程
+  selectProcessInstance.value = row
+
+  // 情况一：流程表单
+  if (row.formType == 10) {
+    // 设置表单
+    setConfAndFields2(detailForm, row.formConf, row.formFields)
+
+    // 加载流程图
+    DefinitionApi.getProcessDefinitionBpmnXMLApi(row.id).then((response) => {
+      bpmnXML.value = response.data
+    })
+    // 情况二：业务表单
+  } else if (row.formCustomCreatePath) {
+    await router.push({
+      path: row.formCustomCreatePath
+    })
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+  }
+}
+
+/** 提交按钮 */
+const submitForm = async (formData) => {
+  if (!fApi.value || !selectProcessInstance.value) {
+    return
+  }
+
+  // 提交请求
+  fApi.value.btn.loading(true)
+  try {
+    await ProcessInstanceApi.createProcessInstanceApi({
+      processDefinitionId: selectProcessInstance.value.id,
+      variables: formData
+    })
+    // 提示
+    message.success('发起流程成功')
+    // this.$tab.closeOpenPage();
+    router.go(-1)
+  } finally {
+    fApi.value.btn.loading(false)
+  }
+}
+
+// ========== 流程图相关 ==========
+
 // // BPMN 数据
 const bpmnXML = ref(null)
 // const bpmnControlForm=ref( {
 //   prefix: "flowable"
 // })
-
-// 流程表单
-const selectProcessInstance = ref(undefined) // 选择的流程实例
-/** 处理选择流程的按钮操作 **/
-const handleSelect = (row) => {
-  // 设置选择的流程
-  selectProcessInstance.value = row
-
-  // 流程表单
-  if (row.formId) {
-    // 设置对应的表单
-    detailForm.value = {
-      ...JSON.parse(row.formConf),
-      fields: decodeFields([], row.formFields)
-    }
-
-    // 加载流程图
-    definitionApi.getProcessDefinitionBpmnXMLApi(row.id).then((response) => {
-      bpmnXML.value = response.data
-    })
-  } else if (row.formCustomCreatePath) {
-    router.push({ path: row.formCustomCreatePath })
-    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
-  }
-}
-/** 提交按钮 */
-//  const submitForm=(params)=> {
-//     if (!params) {
-//       return;
-//     }
-//     // 设置表单禁用
-//     const conf = params.conf;
-//     conf.disabled = true; // 表单禁用
-//     conf.formBtns = false; // 按钮隐藏
-
-//     // 提交表单，创建流程
-//     const variables = params.values;
-//   await  processInstanceApi.createProcessInstanceApi({
-//       processDefinitionId: this.selectProcessInstance.id,
-//       variables: variables
-//     }).then(response => {
-//       this.$modal.msgSuccess("发起流程成功");
-//       // 关闭当前窗口
-//       this.$tab.closeOpenPage();
-//       this.$router.go(-1);
-//     }).catch(() => {
-//       conf.disabled = false; // 表单开启
-//       conf.formBtns = true; // 按钮展示
-//     })
-//   }
 </script>
 
 <style lang="scss">
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
index 4b524b7e2..ac639c4cf 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
@@ -20,11 +20,17 @@
       </template>
       <!-- 操作 -->
       <template #actionbtns_default="{ row }">
-        <XButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
-        <XButton
+        <XTextButton
+          preIcon="ep:view"
+          :title="t('action.detail')"
+          v-hasPermi="['bpm:process-instance:cancel']"
+          @click="handleDetail(row)"
+        />
+        <XTextButton
           preIcon="ep:delete"
           title="取消"
           v-if="row.result === 1"
+          v-hasPermi="['bpm:process-instance:query']"
           @click="handleCancel(row)"
         />
       </template>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.create.ts b/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.create.ts
index 36cdebc54..ff70fe56c 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.create.ts
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.create.ts
@@ -1,17 +1,15 @@
-import { reactive } from 'vue'
-// import { useI18n } from '@/hooks/web/useI18n'
 import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
-import { DICT_TYPE } from '@/utils/dict'
-// const { t } = useI18n() // 国际化
 
-// CrudSchema
+// crudSchemas
 const crudSchemas = reactive<VxeCrudSchema>({
   primaryKey: 'id',
-  primaryType: 'id',
-  primaryTitle: '流程名称',
+  primaryType: null,
   action: true,
-  actionWidth: '200px',
   columns: [
+    {
+      title: '流程名称',
+      field: 'name'
+    },
     {
       title: '流程分类',
       field: 'category',
@@ -20,7 +18,7 @@ const crudSchemas = reactive<VxeCrudSchema>({
     },
     {
       title: '流程版本',
-      field: 'processDefinition.version',
+      field: 'version',
       table: {
         slots: {
           default: 'version_default'

From f6e036045269e2deb9f5c9d2d446a5f855d2ed65 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 23 Jan 2023 23:54:49 +0800
Subject: [PATCH 25/59] =?UTF-8?q?bpm=EF=BC=9A=E5=88=9D=E5=A7=8B=E5=8C=96?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E8=AF=A6=E6=83=85=E7=9A=84=20view=20?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bpm/processInstance/detail.vue  | 507 ++----------------
 .../src/views/bpm/processInstance/detail2.vue | 505 +++++++++++++++++
 2 files changed, 545 insertions(+), 467 deletions(-)
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue

diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
index 6911fb281..787709cb4 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
@@ -1,497 +1,70 @@
 <template>
-  <div class="app-container">
-    <!-- 审批信息 -->
-    <el-card
-      class="box-card"
-      v-loading="processInstanceLoading"
-      v-for="(item, index) in runningTasks"
-      :key="index"
-    >
-      <div slot="header" class="clearfix">
-        <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
-      </div>
-      <el-col :span="16" :offset="6">
-        <el-form
-          :ref="'form' + index"
-          :model="auditForms[index]"
-          :rules="auditRule"
-          label-width="100px"
-        >
-          <el-form-item label="流程名" v-if="processInstance && processInstance.name">
-            {{ processInstance.name }}
-          </el-form-item>
-          <el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser">
-            {{ processInstance.startUser.nickname }}
-            <el-tag type="info" size="mini">{{ processInstance.startUser.deptName }}</el-tag>
-          </el-form-item>
-          <el-form-item label="审批建议" prop="reason">
-            <el-input
-              type="textarea"
-              v-model="auditForms[index].reason"
-              placeholder="请输入审批建议"
-            />
-          </el-form-item>
-        </el-form>
-        <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
-          <el-button
-            icon="el-icon-edit-outline"
-            type="success"
-            size="mini"
-            @click="handleAudit(item, true)"
-            >通过</el-button
-          >
-          <el-button
-            icon="el-icon-circle-close"
-            type="danger"
-            size="mini"
-            @click="handleAudit(item, false)"
-            >不通过</el-button
-          >
-          <el-button
-            icon="el-icon-edit-outline"
-            type="primary"
-            size="mini"
-            @click="handleUpdateAssignee(item)"
-            >转办</el-button
-          >
-          <el-button
-            icon="el-icon-edit-outline"
-            type="primary"
-            size="mini"
-            @click="handleDelegate(item)"
-            >委派</el-button
-          >
-          <el-button
-            icon="el-icon-refresh-left"
-            type="warning"
-            size="mini"
-            @click="handleBack(item)"
-            >退回</el-button
-          >
-        </div>
-      </el-col>
-    </el-card>
+  <ContentWrap>
+    <!-- TODO 审批信息 -->
+
     <!-- 申请信息 -->
     <el-card class="box-card" v-loading="processInstanceLoading">
-      <div slot="header" class="clearfix">
+      <template #header>
         <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
-      </div>
-      <el-col
-        v-if="
-          this.processInstance.processDefinition &&
-          this.processInstance.processDefinition.formType === 10
-        "
-        :span="16"
-        :offset="6"
-      >
+      </template>
+      <!-- 情况一：流程表单 -->
+      <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="16" :offset="6">
         <div>
           <parser :key="new Date().getTime()" :form-conf="detailForm" />
         </div>
       </el-col>
-      <div
-        v-if="
-          this.processInstance.processDefinition &&
-          this.processInstance.processDefinition.formType === 20
-        "
-      >
+      <!-- 情况二：流程表单 -->
+      <div v-if="processInstance?.processDefinition?.formType === 20">
         <router-link
           :to="
-            this.processInstance.processDefinition.formCustomViewPath +
+            processInstance.processDefinition.formCustomViewPath +
             '?id=' +
-            this.processInstance.businessKey
+            processInstance.businessKey
           "
         >
           <el-button type="primary">点击查看</el-button>
         </router-link>
       </div>
     </el-card>
-
-    <!-- 审批记录 -->
-    <el-card class="box-card" v-loading="tasksLoad">
-      <div slot="header" class="clearfix">
-        <span class="el-icon-picture-outline">审批记录</span>
-      </div>
-      <el-col :span="16" :offset="4">
-        <div class="block">
-          <el-timeline>
-            <el-timeline-item
-              v-for="(item, index) in tasks"
-              :key="index"
-              :icon="getTimelineItemIcon(item)"
-              :type="getTimelineItemType(item)"
-            >
-              <p style="font-weight: 700">任务：{{ item.name }}</p>
-              <el-card :body-style="{ padding: '10px' }">
-                <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
-                  审批人：{{ item.assigneeUser.nickname }}
-                  <el-tag type="info" size="mini">{{ item.assigneeUser.deptName }}</el-tag>
-                </label>
-                <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
-                <label style="color: #8a909c; font-weight: normal">{{
-                  parseTime(item.createTime)
-                }}</label>
-                <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal"
-                  >审批时间：</label
-                >
-                <label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
-                  {{ parseTime(item.endTime) }}</label
-                >
-                <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal"
-                  >耗时：</label
-                >
-                <label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
-                  {{ getDateStar(item.durationInMillis) }}
-                </label>
-                <p v-if="item.reason">
-                  <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
-                </p>
-              </el-card>
-            </el-timeline-item>
-          </el-timeline>
-        </div>
-      </el-col>
-    </el-card>
-
-    <!-- 高亮流程图 -->
-    <el-card class="box-card" v-loading="processInstanceLoading">
-      <div slot="header" class="clearfix">
-        <span class="el-icon-picture-outline">流程图</span>
-      </div>
-      <my-process-viewer
-        key="designer"
-        v-model="bpmnXML"
-        v-bind="bpmnControlForm"
-        :activityData="activityList"
-        :processInstanceData="processInstance"
-        :taskData="tasks"
-      />
-    </el-card>
-
-    <!-- 对话框(转派审批人) -->
-    <el-dialog title="转派审批人" :visible.sync="updateAssignee.open" width="500px" append-to-body>
-      <el-form
-        ref="updateAssigneeForm"
-        :model="updateAssignee.form"
-        :rules="updateAssignee.rules"
-        label-width="110px"
-      >
-        <el-form-item label="新审批人" prop="assigneeUserId">
-          <el-select v-model="updateAssignee.form.assigneeUserId" clearable style="width: 100%">
-            <el-option
-              v-for="item in userOptions"
-              :key="parseInt(item.id)"
-              :label="item.nickname"
-              :value="parseInt(item.id)"
-            />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitUpdateAssigneeForm">确 定</el-button>
-        <el-button @click="cancelUpdateAssigneeForm">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
+  </ContentWrap>
 </template>
+<script setup lang="ts">
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 
-<script>
-import { getProcessDefinitionBpmnXML } from "@/api/bpm/definition"
-import { DICT_TYPE, getDictOptions } from "@/utils/dict"
-import store from "@/store"
-import { decodeFields } from "@/utils/formGenerator"
-import Parser from '@/components/parser/Parser'
-import { getProcessInstanceApi } from "@/api/bpm/processInstance"
-import { approveTask, getTaskListByProcessInstanceId, rejectTask, updateTaskAssignee } from "@/api/bpm/task"
-import { getDate } from "@/utils/dateUtils"
-import { getListSimpleUsersApi } from "@/api/system/user"
-import { getActivityList } from "@/api/bpm/activity"
+const { query } = useRoute() // 查询参数
+const message = useMessage() // 消息弹窗
 
-// 流程实例的详情页，可用于审批
-export default {
-  name: "ProcessInstanceDetail",
-  components: {
-    Parser
-  },
-  data () {
-    return {
-      // 遮罩层
-      processInstanceLoading: true,
-      // 流程实例
-      id: undefined, // 流程实例的编号
-      processInstance: {},
+// ========== 审批信息 ==========
+const id = query.id as unknown as number
+const processInstanceLoading = ref(false) // 流程实例的加载中
+const processInstance = ref({}) // 流程实例
 
-      // 流程表单详情
-      detailForm: {
-        fields: []
-      },
+// ========== 申请信息 ==========
 
-      // BPMN 数据
-      bpmnXML: null,
-      bpmnControlForm: {
-        prefix: "flowable"
-      },
-      activityList: [],
+// ========== 初始化 ==========
+onMounted(() => {
+  // 1. 获得流程实例相关
+  processInstanceLoading.value = true
+  ProcessInstanceApi.getProcessInstanceApi(id)
+    .then((data) => {
+      if (!data) {
+        message.error('查询不到流程信息！')
+        return
+      }
+      processInstance.value = data
 
-      // 审批记录
-      tasksLoad: true,
-      tasks: [],
+      // TODO 设置表单信息
 
-      // 审批表单
-      runningTasks: [],
-      auditForms: [],
-      auditRule: {
-        reason: [{ required: true, message: "审批建议不能为空", trigger: "blur" }],
-      },
+      // TODO 加载流程图
 
-      // 转派审批人
-      userOptions: [],
-      updateAssignee: {
-        open: false,
-        form: {
-          assigneeUserId: undefined,
-        },
-        rules: {
-          assigneeUserId: [{ required: true, message: "新审批人不能为空", trigger: "change" }],
-        }
-      },
-
-      // 数据字典
-      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
-    }
-  },
-  created () {
-    this.id = this.$route.query.id
-    if (!this.id) {
-      this.$message.error('未传递 id 参数，无法查看流程信息')
-      return
-    }
-    this.getDetail()
-
-    // 获得用户列表
-    this.userOptions = []
-    getListSimpleUsersApi().then(response => {
-      this.userOptions.push(...response.data)
+      // TODO 加载活动列表
+    })
+    .finally(() => {
+      processInstanceLoading.value = false
     })
-  },
-  methods: {
-    /** 获得流程实例 */
-    getDetail () {
-      // 获得流程实例相关
-      this.processInstanceLoading = true
-      getProcessInstanceApi(this.id).then(response => {
-        if (!response.data) {
-          this.$message.error('查询不到流程信息！')
-          return
-        }
-        // 设置流程信息
-        this.processInstance = response.data
 
-        // 设置表单信息
-        if (this.processInstance.processDefinition.formType === 10) {
-          this.detailForm = {
-            ...JSON.parse(this.processInstance.processDefinition.formConf),
-            disabled: true, // 表单禁用
-            formBtns: false, // 按钮隐藏
-            fields: decodeFields(this.processInstance.processDefinition.formFields)
-          }
-          // 设置表单的值
-          this.detailForm.fields.forEach(item => {
-            const val = this.processInstance.formVariables[item.__vModel__]
-            if (val) {
-              item.__config__.defaultValue = val
-            }
-          })
-        }
-
-        // 加载流程图
-        getProcessDefinitionBpmnXML(this.processInstance.processDefinition.id).then(response => {
-          this.bpmnXML = response.data
-        })
-        // 加载活动列表
-        getActivityList({
-          processInstanceId: this.processInstance.id
-        }).then(response => {
-          this.activityList = response.data
-        })
-
-        // 取消加载中
-        this.processInstanceLoading = false
-      })
-
-      // 获得流程任务列表（审批记录）
-      this.tasksLoad = true
-      this.runningTasks = []
-      this.auditForms = []
-      getTaskListByProcessInstanceId(this.id).then(response => {
-        // 审批记录
-        this.tasks = []
-        // 移除已取消的审批
-        response.data.forEach(task => {
-          if (task.result !== 4) {
-            this.tasks.push(task)
-          }
-        })
-        // 排序，将未完成的排在前面，已完成的排在后面；
-        this.tasks.sort((a, b) => {
-          // 有已完成的情况，按照完成时间倒序
-          if (a.endTime && b.endTime) {
-            return b.endTime - a.endTime
-          } else if (a.endTime) {
-            return 1
-          } else if (b.endTime) {
-            return -1
-            // 都是未完成，按照创建时间倒序
-          } else {
-            return b.createTime - a.createTime
-          }
-        })
-
-        // 需要审核的记录
-        const userId = store.getters.userId
-        this.tasks.forEach(task => {
-          if (task.result !== 1) { // 只有待处理才需要
-            return
-          }
-          if (!task.assigneeUser || task.assigneeUser.id !== userId) { // 自己不是处理人
-            return
-          }
-          this.runningTasks.push({ ...task })
-          this.auditForms.push({
-            reason: ''
-          })
-        })
-
-        // 取消加载中
-        this.tasksLoad = false
-      })
-    },
-    /** 处理选择流程的按钮操作 **/
-    handleSelect (row) {
-      // 设置选择的流程
-      this.selectProcessInstance = row
-
-      // 流程表单
-      if (row.formId) {
-        // 设置对应的表单
-        this.detailForm = {
-          ...JSON.parse(row.formConf),
-          fields: decodeFields(row.formFields)
-        }
-      } else if (row.formCustomCreatePath) {
-        this.$router.push({ path: row.formCustomCreatePath })
-        // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
-      }
-    },
-    getDateStar (ms) {
-      return getDate(ms)
-    },
-    getTimelineItemIcon (item) {
-      if (item.result === 1) {
-        return 'el-icon-time'
-      }
-      if (item.result === 2) {
-        return 'el-icon-check'
-      }
-      if (item.result === 3) {
-        return 'el-icon-close'
-      }
-      if (item.result === 4) {
-        return 'el-icon-remove-outline'
-      }
-      return ''
-    },
-    getTimelineItemType (item) {
-      if (item.result === 1) {
-        return 'primary'
-      }
-      if (item.result === 2) {
-        return 'success'
-      }
-      if (item.result === 3) {
-        return 'danger'
-      }
-      if (item.result === 4) {
-        return 'info'
-      }
-      return ''
-    },
-    /** 处理审批通过和不通过的操作 */
-    handleAudit (task, pass) {
-      const index = this.runningTasks.indexOf(task)
-      this.$refs['form' + index][0].validate(valid => {
-        if (!valid) {
-          return
-        }
-        const data = {
-          id: task.id,
-          reason: this.auditForms[index].reason
-        }
-        if (pass) {
-          approveTask(data).then(response => {
-            this.$modal.msgSuccess("审批通过成功！")
-            this.getDetail() // 获得最新详情
-          })
-        } else {
-          rejectTask(data).then(response => {
-            this.$modal.msgSuccess("审批不通过成功！")
-            this.getDetail() // 获得最新详情
-          })
-        }
-      })
-    },
-    /** 处理转派审批人 */
-    handleUpdateAssignee (task) {
-      // 设置表单
-      this.resetUpdateAssigneeForm()
-      this.updateAssignee.form.id = task.id
-      // 设置为打开
-      this.updateAssignee.open = true
-    },
-    /** 提交转派审批人 */
-    submitUpdateAssigneeForm () {
-      this.$refs['updateAssigneeForm'].validate(valid => {
-        if (!valid) {
-          return
-        }
-        updateTaskAssignee(this.updateAssignee.form).then(response => {
-          this.$modal.msgSuccess("转派任务成功！")
-          this.updateAssignee.open = false
-          this.getDetail() // 获得最新详情
-        })
-      })
-    },
-    /** 取消转派审批人 */
-    cancelUpdateAssigneeForm () {
-      this.updateAssignee.open = false
-      this.resetUpdateAssigneeForm()
-    },
-    /** 重置转派审批人 */
-    resetUpdateAssigneeForm () {
-      this.updateAssignee.form = {
-        id: undefined,
-        assigneeUserId: undefined,
-      }
-      this.resetForm("updateAssigneeForm")
-    },
-    /** 处理审批退回的操作 */
-    handleDelegate (task) {
-      this.$modal.msgError("暂不支持【委派】功能，可以使用【转派】替代！")
-    },
-    /** 处理审批退回的操作 */
-    handleBack (task) {
-      this.$modal.msgError("暂不支持【退回】功能！")
-      // 可参考 http://blog.wya1.com/article/636697030/details/7296
-      // const data = {
-      //   id: task.id,
-      //   assigneeUserId: 1
-      // }
-      // backTask(data).then(response => {
-      //   this.$modal.msgSuccess("回退成功！");
-      //   this.getDetail(); // 获得最新详情
-      // });
-    }
-  }
-};
+  // 2. TODO
+})
 </script>
 
 <style lang="scss">
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
new file mode 100644
index 000000000..d89f1b3d4
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
@@ -0,0 +1,505 @@
+<template>
+  <div class="app-container">
+    <!-- 审批信息 -->
+    <el-card
+      class="box-card"
+      v-loading="processInstanceLoading"
+      v-for="(item, index) in runningTasks"
+      :key="index"
+    >
+      <div slot="header" class="clearfix">
+        <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
+      </div>
+      <el-col :span="16" :offset="6">
+        <el-form
+          :ref="'form' + index"
+          :model="auditForms[index]"
+          :rules="auditRule"
+          label-width="100px"
+        >
+          <el-form-item label="流程名" v-if="processInstance && processInstance.name">
+            {{ processInstance.name }}
+          </el-form-item>
+          <el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser">
+            {{ processInstance.startUser.nickname }}
+            <el-tag type="info" size="mini">{{ processInstance.startUser.deptName }}</el-tag>
+          </el-form-item>
+          <el-form-item label="审批建议" prop="reason">
+            <el-input
+              type="textarea"
+              v-model="auditForms[index].reason"
+              placeholder="请输入审批建议"
+            />
+          </el-form-item>
+        </el-form>
+        <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
+          <el-button
+            icon="el-icon-edit-outline"
+            type="success"
+            size="mini"
+            @click="handleAudit(item, true)"
+            >通过</el-button
+          >
+          <el-button
+            icon="el-icon-circle-close"
+            type="danger"
+            size="mini"
+            @click="handleAudit(item, false)"
+            >不通过</el-button
+          >
+          <el-button
+            icon="el-icon-edit-outline"
+            type="primary"
+            size="mini"
+            @click="handleUpdateAssignee(item)"
+            >转办</el-button
+          >
+          <el-button
+            icon="el-icon-edit-outline"
+            type="primary"
+            size="mini"
+            @click="handleDelegate(item)"
+            >委派</el-button
+          >
+          <el-button
+            icon="el-icon-refresh-left"
+            type="warning"
+            size="mini"
+            @click="handleBack(item)"
+            >退回</el-button
+          >
+        </div>
+      </el-col>
+    </el-card>
+    <!-- 申请信息 -->
+    <el-card class="box-card" v-loading="processInstanceLoading">
+      <div slot="header" class="clearfix">
+        <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
+      </div>
+      <el-col
+        v-if="
+          this.processInstance.processDefinition &&
+          this.processInstance.processDefinition.formType === 10
+        "
+        :span="16"
+        :offset="6"
+      >
+        <div>
+          <parser :key="new Date().getTime()" :form-conf="detailForm" />
+        </div>
+      </el-col>
+      <div
+        v-if="
+          this.processInstance.processDefinition &&
+          this.processInstance.processDefinition.formType === 20
+        "
+      >
+        <router-link
+          :to="
+            this.processInstance.processDefinition.formCustomViewPath +
+            '?id=' +
+            this.processInstance.businessKey
+          "
+        >
+          <el-button type="primary">点击查看</el-button>
+        </router-link>
+      </div>
+    </el-card>
+
+    <!-- 审批记录 -->
+    <el-card class="box-card" v-loading="tasksLoad">
+      <div slot="header" class="clearfix">
+        <span class="el-icon-picture-outline">审批记录</span>
+      </div>
+      <el-col :span="16" :offset="4">
+        <div class="block">
+          <el-timeline>
+            <el-timeline-item
+              v-for="(item, index) in tasks"
+              :key="index"
+              :icon="getTimelineItemIcon(item)"
+              :type="getTimelineItemType(item)"
+            >
+              <p style="font-weight: 700">任务：{{ item.name }}</p>
+              <el-card :body-style="{ padding: '10px' }">
+                <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
+                  审批人：{{ item.assigneeUser.nickname }}
+                  <el-tag type="info" size="mini">{{ item.assigneeUser.deptName }}</el-tag>
+                </label>
+                <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
+                <label style="color: #8a909c; font-weight: normal">{{
+                  parseTime(item.createTime)
+                }}</label>
+                <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal"
+                  >审批时间：</label
+                >
+                <label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
+                  {{ parseTime(item.endTime) }}</label
+                >
+                <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal"
+                  >耗时：</label
+                >
+                <label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
+                  {{ getDateStar(item.durationInMillis) }}
+                </label>
+                <p v-if="item.reason">
+                  <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
+                </p>
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
+        </div>
+      </el-col>
+    </el-card>
+
+    <!-- 高亮流程图 -->
+    <el-card class="box-card" v-loading="processInstanceLoading">
+      <div slot="header" class="clearfix">
+        <span class="el-icon-picture-outline">流程图</span>
+      </div>
+      <my-process-viewer
+        key="designer"
+        v-model="bpmnXML"
+        v-bind="bpmnControlForm"
+        :activityData="activityList"
+        :processInstanceData="processInstance"
+        :taskData="tasks"
+      />
+    </el-card>
+
+    <!-- 对话框(转派审批人) -->
+    <el-dialog title="转派审批人" :visible.sync="updateAssignee.open" width="500px" append-to-body>
+      <el-form
+        ref="updateAssigneeForm"
+        :model="updateAssignee.form"
+        :rules="updateAssignee.rules"
+        label-width="110px"
+      >
+        <el-form-item label="新审批人" prop="assigneeUserId">
+          <el-select v-model="updateAssignee.form.assigneeUserId" clearable style="width: 100%">
+            <el-option
+              v-for="item in userOptions"
+              :key="parseInt(item.id)"
+              :label="item.nickname"
+              :value="parseInt(item.id)"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitUpdateAssigneeForm">确 定</el-button>
+        <el-button @click="cancelUpdateAssigneeForm">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getProcessDefinitionBpmnXML } from "@/api/bpm/definition"
+import { DICT_TYPE, getDictOptions } from "@/utils/dict"
+import store from "@/store"
+import { decodeFields } from "@/utils/formGenerator"
+import Parser from '@/components/parser/Parser'
+import { getProcessInstanceApi } from "@/api/bpm/processInstance"
+import { approveTask, getTaskListByProcessInstanceId, rejectTask, updateTaskAssignee } from "@/api/bpm/task"
+import { getDate } from "@/utils/dateUtils"
+import { getListSimpleUsersApi } from "@/api/system/user"
+import { getActivityList } from "@/api/bpm/activity"
+
+// 流程实例的详情页，可用于审批
+export default {
+  name: "ProcessInstanceDetail",
+  components: {
+    Parser
+  },
+  data () {
+    return {
+
+      // 流程实例
+      id: undefined, // 流程实例的编号
+      processInstance: {},
+
+      // 流程表单详情
+      detailForm: {
+        fields: []
+      },
+
+      // BPMN 数据
+      bpmnXML: null,
+      bpmnControlForm: {
+        prefix: "flowable"
+      },
+      activityList: [],
+
+      // 审批记录
+      tasksLoad: true,
+      tasks: [],
+
+      // 审批表单
+      runningTasks: [],
+      auditForms: [],
+      auditRule: {
+        reason: [{ required: true, message: "审批建议不能为空", trigger: "blur" }],
+      },
+
+      // 转派审批人
+      userOptions: [],
+      updateAssignee: {
+        open: false,
+        form: {
+          assigneeUserId: undefined,
+        },
+        rules: {
+          assigneeUserId: [{ required: true, message: "新审批人不能为空", trigger: "change" }],
+        }
+      },
+
+      // 数据字典
+      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
+    }
+  },
+  created () {
+    this.id = this.$route.query.id
+    if (!this.id) {
+      this.$message.error('未传递 id 参数，无法查看流程信息')
+      return
+    }
+    this.getDetail()
+
+    // 获得用户列表
+    this.userOptions = []
+    getListSimpleUsersApi().then(response => {
+      this.userOptions.push(...response.data)
+    })
+  },
+  methods: {
+    /** 获得流程实例 */
+    getDetail () {
+      // 获得流程实例相关
+      this.processInstanceLoading = true
+      getProcessInstanceApi(this.id).then(response => {
+        if (!response.data) {
+          this.$message.error('查询不到流程信息！')
+          return
+        }
+        // 设置流程信息
+        this.processInstance = response.data
+
+        // 设置表单信息
+        if (this.processInstance.processDefinition.formType === 10) {
+          this.detailForm = {
+            ...JSON.parse(this.processInstance.processDefinition.formConf),
+            disabled: true, // 表单禁用
+            formBtns: false, // 按钮隐藏
+            fields: decodeFields(this.processInstance.processDefinition.formFields)
+          }
+          // 设置表单的值
+          this.detailForm.fields.forEach(item => {
+            const val = this.processInstance.formVariables[item.__vModel__]
+            if (val) {
+              item.__config__.defaultValue = val
+            }
+          })
+        }
+
+        // 加载流程图
+        getProcessDefinitionBpmnXML(this.processInstance.processDefinition.id).then(response => {
+          this.bpmnXML = response.data
+        })
+        // 加载活动列表
+        getActivityList({
+          processInstanceId: this.processInstance.id
+        }).then(response => {
+          this.activityList = response.data
+        })
+
+        // 取消加载中
+        this.processInstanceLoading = false
+      })
+
+      // 获得流程任务列表（审批记录）
+      this.tasksLoad = true
+      this.runningTasks = []
+      this.auditForms = []
+      getTaskListByProcessInstanceId(this.id).then(response => {
+        // 审批记录
+        this.tasks = []
+        // 移除已取消的审批
+        response.data.forEach(task => {
+          if (task.result !== 4) {
+            this.tasks.push(task)
+          }
+        })
+        // 排序，将未完成的排在前面，已完成的排在后面；
+        this.tasks.sort((a, b) => {
+          // 有已完成的情况，按照完成时间倒序
+          if (a.endTime && b.endTime) {
+            return b.endTime - a.endTime
+          } else if (a.endTime) {
+            return 1
+          } else if (b.endTime) {
+            return -1
+            // 都是未完成，按照创建时间倒序
+          } else {
+            return b.createTime - a.createTime
+          }
+        })
+
+        // 需要审核的记录
+        const userId = store.getters.userId
+        this.tasks.forEach(task => {
+          if (task.result !== 1) { // 只有待处理才需要
+            return
+          }
+          if (!task.assigneeUser || task.assigneeUser.id !== userId) { // 自己不是处理人
+            return
+          }
+          this.runningTasks.push({ ...task })
+          this.auditForms.push({
+            reason: ''
+          })
+        })
+
+        // 取消加载中
+        this.tasksLoad = false
+      })
+    },
+    /** 处理选择流程的按钮操作 **/
+    handleSelect (row) {
+      // 设置选择的流程
+      this.selectProcessInstance = row
+
+      // 流程表单
+      if (row.formId) {
+        // 设置对应的表单
+        this.detailForm = {
+          ...JSON.parse(row.formConf),
+          fields: decodeFields(row.formFields)
+        }
+      } else if (row.formCustomCreatePath) {
+        this.$router.push({ path: row.formCustomCreatePath })
+        // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+      }
+    },
+    getDateStar (ms) {
+      return getDate(ms)
+    },
+    getTimelineItemIcon (item) {
+      if (item.result === 1) {
+        return 'el-icon-time'
+      }
+      if (item.result === 2) {
+        return 'el-icon-check'
+      }
+      if (item.result === 3) {
+        return 'el-icon-close'
+      }
+      if (item.result === 4) {
+        return 'el-icon-remove-outline'
+      }
+      return ''
+    },
+    getTimelineItemType (item) {
+      if (item.result === 1) {
+        return 'primary'
+      }
+      if (item.result === 2) {
+        return 'success'
+      }
+      if (item.result === 3) {
+        return 'danger'
+      }
+      if (item.result === 4) {
+        return 'info'
+      }
+      return ''
+    },
+    /** 处理审批通过和不通过的操作 */
+    handleAudit (task, pass) {
+      const index = this.runningTasks.indexOf(task)
+      this.$refs['form' + index][0].validate(valid => {
+        if (!valid) {
+          return
+        }
+        const data = {
+          id: task.id,
+          reason: this.auditForms[index].reason
+        }
+        if (pass) {
+          approveTask(data).then(response => {
+            this.$modal.msgSuccess("审批通过成功！")
+            this.getDetail() // 获得最新详情
+          })
+        } else {
+          rejectTask(data).then(response => {
+            this.$modal.msgSuccess("审批不通过成功！")
+            this.getDetail() // 获得最新详情
+          })
+        }
+      })
+    },
+    /** 处理转派审批人 */
+    handleUpdateAssignee (task) {
+      // 设置表单
+      this.resetUpdateAssigneeForm()
+      this.updateAssignee.form.id = task.id
+      // 设置为打开
+      this.updateAssignee.open = true
+    },
+    /** 提交转派审批人 */
+    submitUpdateAssigneeForm () {
+      this.$refs['updateAssigneeForm'].validate(valid => {
+        if (!valid) {
+          return
+        }
+        updateTaskAssignee(this.updateAssignee.form).then(response => {
+          this.$modal.msgSuccess("转派任务成功！")
+          this.updateAssignee.open = false
+          this.getDetail() // 获得最新详情
+        })
+      })
+    },
+    /** 取消转派审批人 */
+    cancelUpdateAssigneeForm () {
+      this.updateAssignee.open = false
+      this.resetUpdateAssigneeForm()
+    },
+    /** 重置转派审批人 */
+    resetUpdateAssigneeForm () {
+      this.updateAssignee.form = {
+        id: undefined,
+        assigneeUserId: undefined,
+      }
+      this.resetForm("updateAssigneeForm")
+    },
+    /** 处理审批退回的操作 */
+    handleDelegate (task) {
+      this.$modal.msgError("暂不支持【委派】功能，可以使用【转派】替代！")
+    },
+    /** 处理审批退回的操作 */
+    handleBack (task) {
+      this.$modal.msgError("暂不支持【退回】功能！")
+      // 可参考 http://blog.wya1.com/article/636697030/details/7296
+      // const data = {
+      //   id: task.id,
+      //   assigneeUserId: 1
+      // }
+      // backTask(data).then(response => {
+      //   this.$modal.msgSuccess("回退成功！");
+      //   this.getDetail(); // 获得最新详情
+      // });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.my-process-designer {
+  height: calc(100vh - 200px);
+}
+
+.box-card {
+  width: 100%;
+  margin-bottom: 20px;
+}
+</style>

From 2774671a886c8a3f898670b6ccc41bef3a561bee Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 24 Jan 2023 08:03:08 +0800
Subject: [PATCH 26/59] =?UTF-8?q?bpm=EF=BC=9A=E6=B5=81=E7=A8=8B=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E7=9A=84=E5=88=9D=E5=A7=8B=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/bpm/processInstance/index.ts      | 19 +++++++++++
 .../src/api/bpm/processInstance/types.ts      | 18 ----------
 yudao-ui-admin-vue3/src/utils/formCreate.ts   | 11 ++++++-
 .../src/views/bpm/processInstance/detail.vue  | 33 ++++++++++++++++---
 .../src/views/bpm/processInstance/index.vue   |  2 +-
 5 files changed, 59 insertions(+), 24 deletions(-)
 delete mode 100644 yudao-ui-admin-vue3/src/api/bpm/processInstance/types.ts

diff --git a/yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts b/yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts
index 17b232fb5..d48253c3a 100644
--- a/yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts
+++ b/yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts
@@ -1,5 +1,24 @@
 import request from '@/config/axios'
 
+export type Task = {
+  id: string
+  name: string
+}
+export type ProcessInstanceVO = {
+  id: number
+  name: string
+  processDefinitionId: string
+  category: string
+  result: number
+  tasks: Task[]
+  fields: string[]
+  status: number
+  remark: string
+  businessKey: string
+  createTime: string
+  endTime: string
+}
+
 export const getMyProcessInstancePageApi = async (params) => {
   return await request.get({ url: '/bpm/process-instance/my-page', params })
 }
diff --git a/yudao-ui-admin-vue3/src/api/bpm/processInstance/types.ts b/yudao-ui-admin-vue3/src/api/bpm/processInstance/types.ts
deleted file mode 100644
index 3ab506389..000000000
--- a/yudao-ui-admin-vue3/src/api/bpm/processInstance/types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type task = {
-  id: string
-  name: string
-}
-export type ProcessInstanceVO = {
-  id: number
-  name: string
-  processDefinitionId: string
-  category: string
-  result: number
-  tasks: task[]
-  fields: string[]
-  status: number
-  remark: string
-  businessKey: string
-  createTime: string
-  endTime: string
-}
diff --git a/yudao-ui-admin-vue3/src/utils/formCreate.ts b/yudao-ui-admin-vue3/src/utils/formCreate.ts
index e70ae39e9..fccc0dc75 100644
--- a/yudao-ui-admin-vue3/src/utils/formCreate.ts
+++ b/yudao-ui-admin-vue3/src/utils/formCreate.ts
@@ -37,9 +37,18 @@ export const setConfAndFields = (designerRef: object, conf: string, fields: stri
 }
 
 // 设置表单的 Conf 和 Fields
-export const setConfAndFields2 = (detailPreview: object, conf: string, fields: string) => {
+export const setConfAndFields2 = (
+  detailPreview: object,
+  conf: string,
+  fields: string,
+  value: object
+) => {
   // @ts-ignore
   detailPreview.value.option = JSON.parse(conf)
   // @ts-ignore
   detailPreview.value.rule = decodeFields(fields)
+  if (value) {
+    // @ts-ignore
+    detailPreview.value.value = value
+  }
 }
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
index 787709cb4..555920b95 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
@@ -9,9 +9,12 @@
       </template>
       <!-- 情况一：流程表单 -->
       <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="16" :offset="6">
-        <div>
-          <parser :key="new Date().getTime()" :form-conf="detailForm" />
-        </div>
+        <form-create
+          :rule="detailForm.rule"
+          v-model:api="fApi"
+          :option="detailForm.option"
+          v-model="detailForm.value"
+        />
       </el-col>
       <!-- 情况二：流程表单 -->
       <div v-if="processInstance?.processDefinition?.formType === 20">
@@ -40,6 +43,15 @@ const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref({}) // 流程实例
 
 // ========== 申请信息 ==========
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { ApiAttrs } from '@form-create/element-ui/types/config'
+const fApi = ref<ApiAttrs>()
+// 流程表单详情
+const detailForm = ref({
+  rule: [],
+  option: {},
+  value: {}
+})
 
 // ========== 初始化 ==========
 onMounted(() => {
@@ -53,7 +65,20 @@ onMounted(() => {
       }
       processInstance.value = data
 
-      // TODO 设置表单信息
+      // 设置表单信息
+      const processDefinition = data.processDefinition
+      if (processDefinition.formType === 10) {
+        setConfAndFields2(
+          detailForm,
+          processDefinition.formConf,
+          processDefinition.formFields,
+          data.formVariables
+        )
+        nextTick().then(() => {
+          fApi.value.btn.show(false)
+          fApi.value.resetBtn.show(false)
+        })
+      }
 
       // TODO 加载流程图
 
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
index ac639c4cf..c648318e7 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
@@ -67,7 +67,7 @@ const handleDetail = (row) => {
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: {
-      id: row.processInstanceId
+      id: row.id
     }
   })
 }

From 0aa72b320033625d6db0be60168fa8e9a4b1bd34 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 24 Jan 2023 09:20:30 +0800
Subject: [PATCH 27/59] =?UTF-8?q?bpm=EF=BC=9A=E6=B5=81=E7=A8=8B=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E7=9A=84=E6=97=B6=E9=97=B4=E8=BD=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-ui-admin-vue3/src/utils/formatTime.ts   |  27 +++
 .../src/views/bpm/processInstance/detail.vue  | 139 ++++++++++-
 .../src/views/bpm/processInstance/detail2.vue | 226 +-----------------
 .../src/views/bpm/processInstance/detail.vue  |  17 --
 4 files changed, 167 insertions(+), 242 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/utils/formatTime.ts b/yudao-ui-admin-vue3/src/utils/formatTime.ts
index 3b799139d..9b0e4465c 100644
--- a/yudao-ui-admin-vue3/src/utils/formatTime.ts
+++ b/yudao-ui-admin-vue3/src/utils/formatTime.ts
@@ -147,3 +147,30 @@ export function formatAxis(param: Date): string {
   else if (hour < 22) return '晚上好'
   else return '夜里好'
 }
+
+/**
+ * 将毫秒，转换成时间字符串。例如说，xx 分钟
+ *
+ * @param ms 毫秒
+ * @returns {string} 字符串
+ */
+export function formatPast2(ms) {
+  const day = Math.floor(ms / (24 * 60 * 60 * 1000))
+  const hour = Math.floor(ms / (60 * 60 * 1000) - day * 24)
+  const minute = Math.floor(ms / (60 * 1000) - day * 24 * 60 - hour * 60)
+  const second = Math.floor(ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60)
+  if (day > 0) {
+    return day + '天' + hour + '小时' + minute + '分钟'
+  }
+  if (hour > 0) {
+    return hour + '小时' + minute + '分钟'
+  }
+  if (minute > 0) {
+    return minute + '分钟'
+  }
+  if (second > 0) {
+    return second + '秒'
+  } else {
+    return 0 + '秒'
+  }
+}
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
index 555920b95..65fc0b5bd 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
@@ -25,14 +25,63 @@
             processInstance.businessKey
           "
         >
-          <el-button type="primary">点击查看</el-button>
+          <XButton type="primary" preIcon="ep:view" title="点击查看" />
         </router-link>
       </div>
     </el-card>
+
+    <!-- 审批记录 -->
+    <el-card class="box-card" v-loading="tasksLoad">
+      <template #header>
+        <span class="el-icon-picture-outline">审批记录</span>
+      </template>
+      <el-col :span="16" :offset="4">
+        <div class="block">
+          <el-timeline>
+            <el-timeline-item
+              v-for="(item, index) in tasks"
+              :key="index"
+              :icon="getTimelineItemIcon(item)"
+              :type="getTimelineItemType(item)"
+            >
+              <p style="font-weight: 700">任务：{{ item.name }}</p>
+              <el-card :body-style="{ padding: '10px' }">
+                <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
+                  审批人：{{ item.assigneeUser.nickname }}
+                  <el-tag type="info" size="mini">{{ item.assigneeUser.deptName }}</el-tag>
+                </label>
+                <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
+                <label style="color: #8a909c; font-weight: normal">
+                  {{ dayjs(item?.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+                </label>
+                <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
+                  审批时间：
+                </label>
+                <label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
+                  {{ dayjs(item?.endTime).format('YYYY-MM-DD HH:mm:ss') }}
+                </label>
+                <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
+                  耗时：
+                </label>
+                <label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
+                  {{ formatPast2(item?.durationInMillis) }}
+                </label>
+                <p v-if="item.reason">
+                  <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
+                </p>
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
+        </div>
+      </el-col>
+    </el-card>
   </ContentWrap>
 </template>
 <script setup lang="ts">
+import dayjs from 'dayjs'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import * as TaskApi from '@/api/bpm/task'
+import { formatPast2 } from '@/utils/formatTime'
 
 const { query } = useRoute() // 查询参数
 const message = useMessage() // 消息弹窗
@@ -41,6 +90,11 @@ const message = useMessage() // 消息弹窗
 const id = query.id as unknown as number
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref({}) // 流程实例
+const runningTasks = ref([]) // 运行中的任务
+const auditForms = ref([]) // 审批任务的表单
+// const auditRule = reactive({
+//   reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
+// })
 
 // ========== 申请信息 ==========
 import { setConfAndFields2 } from '@/utils/formCreate'
@@ -53,6 +107,41 @@ const detailForm = ref({
   value: {}
 })
 
+// ========== 审批记录 ==========
+const tasksLoad = ref(true)
+const tasks = ref([])
+
+const getTimelineItemIcon = (item) => {
+  if (item.result === 1) {
+    return 'el-icon-time'
+  }
+  if (item.result === 2) {
+    return 'el-icon-check'
+  }
+  if (item.result === 3) {
+    return 'el-icon-close'
+  }
+  if (item.result === 4) {
+    return 'el-icon-remove-outline'
+  }
+  return ''
+}
+const getTimelineItemType = (item) => {
+  if (item.result === 1) {
+    return 'primary'
+  }
+  if (item.result === 2) {
+    return 'success'
+  }
+  if (item.result === 3) {
+    return 'danger'
+  }
+  if (item.result === 4) {
+    return 'info'
+  }
+  return ''
+}
+
 // ========== 初始化 ==========
 onMounted(() => {
   // 1. 获得流程实例相关
@@ -88,7 +177,53 @@ onMounted(() => {
       processInstanceLoading.value = false
     })
 
-  // 2. TODO
+  // 2. 获得流程任务列表（审批记录）
+  tasksLoad.value = true
+  runningTasks.value = []
+  auditForms.value = []
+  TaskApi.getTaskListByProcessInstanceId(id)
+    .then((data) => {
+      // 审批记录
+      tasks.value = []
+      // 移除已取消的审批
+      data.forEach((task) => {
+        if (task.result !== 4) {
+          tasks.value.push(task)
+        }
+      })
+      // 排序，将未完成的排在前面，已完成的排在后面；
+      tasks.value.sort((a, b) => {
+        // 有已完成的情况，按照完成时间倒序
+        if (a.endTime && b.endTime) {
+          return b.endTime - a.endTime
+        } else if (a.endTime) {
+          return 1
+        } else if (b.endTime) {
+          return -1
+          // 都是未完成，按照创建时间倒序
+        } else {
+          return b.createTime - a.createTime
+        }
+      })
+
+      // 需要审核的记录
+      // const userId = store.getters.userId
+      // this.tasks.forEach(task => {
+      //   if (task.result !== 1) { // 只有待处理才需要
+      //     return
+      //   }
+      //   if (!task.assigneeUser || task.assigneeUser.id !== userId) { // 自己不是处理人
+      //     return
+      //   }
+      //   this.runningTasks.push({ ...task })
+      //   this.auditForms.push({
+      //     reason: ''
+      //   })
+      // })
+    })
+    .finally(() => {
+      tasksLoad.value = false
+    })
 })
 </script>
 
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
index d89f1b3d4..961206bc8 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
@@ -71,86 +71,8 @@
         </div>
       </el-col>
     </el-card>
-    <!-- 申请信息 -->
-    <el-card class="box-card" v-loading="processInstanceLoading">
-      <div slot="header" class="clearfix">
-        <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
-      </div>
-      <el-col
-        v-if="
-          this.processInstance.processDefinition &&
-          this.processInstance.processDefinition.formType === 10
-        "
-        :span="16"
-        :offset="6"
-      >
-        <div>
-          <parser :key="new Date().getTime()" :form-conf="detailForm" />
-        </div>
-      </el-col>
-      <div
-        v-if="
-          this.processInstance.processDefinition &&
-          this.processInstance.processDefinition.formType === 20
-        "
-      >
-        <router-link
-          :to="
-            this.processInstance.processDefinition.formCustomViewPath +
-            '?id=' +
-            this.processInstance.businessKey
-          "
-        >
-          <el-button type="primary">点击查看</el-button>
-        </router-link>
-      </div>
-    </el-card>
 
-    <!-- 审批记录 -->
-    <el-card class="box-card" v-loading="tasksLoad">
-      <div slot="header" class="clearfix">
-        <span class="el-icon-picture-outline">审批记录</span>
-      </div>
-      <el-col :span="16" :offset="4">
-        <div class="block">
-          <el-timeline>
-            <el-timeline-item
-              v-for="(item, index) in tasks"
-              :key="index"
-              :icon="getTimelineItemIcon(item)"
-              :type="getTimelineItemType(item)"
-            >
-              <p style="font-weight: 700">任务：{{ item.name }}</p>
-              <el-card :body-style="{ padding: '10px' }">
-                <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
-                  审批人：{{ item.assigneeUser.nickname }}
-                  <el-tag type="info" size="mini">{{ item.assigneeUser.deptName }}</el-tag>
-                </label>
-                <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
-                <label style="color: #8a909c; font-weight: normal">{{
-                  parseTime(item.createTime)
-                }}</label>
-                <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal"
-                  >审批时间：</label
-                >
-                <label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
-                  {{ parseTime(item.endTime) }}</label
-                >
-                <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal"
-                  >耗时：</label
-                >
-                <label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
-                  {{ getDateStar(item.durationInMillis) }}
-                </label>
-                <p v-if="item.reason">
-                  <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
-                </p>
-              </el-card>
-            </el-timeline-item>
-          </el-timeline>
-        </div>
-      </el-col>
-    </el-card>
+
 
     <!-- 高亮流程图 -->
     <el-card class="box-card" v-loading="processInstanceLoading">
@@ -209,21 +131,9 @@ import { getActivityList } from "@/api/bpm/activity"
 // 流程实例的详情页，可用于审批
 export default {
   name: "ProcessInstanceDetail",
-  components: {
-    Parser
-  },
   data () {
     return {
 
-      // 流程实例
-      id: undefined, // 流程实例的编号
-      processInstance: {},
-
-      // 流程表单详情
-      detailForm: {
-        fields: []
-      },
-
       // BPMN 数据
       bpmnXML: null,
       bpmnControlForm: {
@@ -231,17 +141,6 @@ export default {
       },
       activityList: [],
 
-      // 审批记录
-      tasksLoad: true,
-      tasks: [],
-
-      // 审批表单
-      runningTasks: [],
-      auditForms: [],
-      auditRule: {
-        reason: [{ required: true, message: "审批建议不能为空", trigger: "blur" }],
-      },
-
       // 转派审批人
       userOptions: [],
       updateAssignee: {
@@ -278,142 +177,23 @@ export default {
       // 获得流程实例相关
       this.processInstanceLoading = true
       getProcessInstanceApi(this.id).then(response => {
-        if (!response.data) {
-          this.$message.error('查询不到流程信息！')
-          return
-        }
-        // 设置流程信息
-        this.processInstance = response.data
-
-        // 设置表单信息
-        if (this.processInstance.processDefinition.formType === 10) {
-          this.detailForm = {
-            ...JSON.parse(this.processInstance.processDefinition.formConf),
-            disabled: true, // 表单禁用
-            formBtns: false, // 按钮隐藏
-            fields: decodeFields(this.processInstance.processDefinition.formFields)
-          }
-          // 设置表单的值
-          this.detailForm.fields.forEach(item => {
-            const val = this.processInstance.formVariables[item.__vModel__]
-            if (val) {
-              item.__config__.defaultValue = val
-            }
-          })
-        }
-
         // 加载流程图
         getProcessDefinitionBpmnXML(this.processInstance.processDefinition.id).then(response => {
           this.bpmnXML = response.data
         })
+
         // 加载活动列表
         getActivityList({
           processInstanceId: this.processInstance.id
         }).then(response => {
           this.activityList = response.data
         })
-
-        // 取消加载中
-        this.processInstanceLoading = false
       })
-
-      // 获得流程任务列表（审批记录）
-      this.tasksLoad = true
-      this.runningTasks = []
-      this.auditForms = []
-      getTaskListByProcessInstanceId(this.id).then(response => {
-        // 审批记录
-        this.tasks = []
-        // 移除已取消的审批
-        response.data.forEach(task => {
-          if (task.result !== 4) {
-            this.tasks.push(task)
-          }
-        })
-        // 排序，将未完成的排在前面，已完成的排在后面；
-        this.tasks.sort((a, b) => {
-          // 有已完成的情况，按照完成时间倒序
-          if (a.endTime && b.endTime) {
-            return b.endTime - a.endTime
-          } else if (a.endTime) {
-            return 1
-          } else if (b.endTime) {
-            return -1
-            // 都是未完成，按照创建时间倒序
-          } else {
-            return b.createTime - a.createTime
-          }
-        })
-
-        // 需要审核的记录
-        const userId = store.getters.userId
-        this.tasks.forEach(task => {
-          if (task.result !== 1) { // 只有待处理才需要
-            return
-          }
-          if (!task.assigneeUser || task.assigneeUser.id !== userId) { // 自己不是处理人
-            return
-          }
-          this.runningTasks.push({ ...task })
-          this.auditForms.push({
-            reason: ''
-          })
-        })
-
-        // 取消加载中
-        this.tasksLoad = false
-      })
-    },
-    /** 处理选择流程的按钮操作 **/
-    handleSelect (row) {
-      // 设置选择的流程
-      this.selectProcessInstance = row
-
-      // 流程表单
-      if (row.formId) {
-        // 设置对应的表单
-        this.detailForm = {
-          ...JSON.parse(row.formConf),
-          fields: decodeFields(row.formFields)
-        }
-      } else if (row.formCustomCreatePath) {
-        this.$router.push({ path: row.formCustomCreatePath })
-        // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
-      }
     },
     getDateStar (ms) {
       return getDate(ms)
     },
-    getTimelineItemIcon (item) {
-      if (item.result === 1) {
-        return 'el-icon-time'
-      }
-      if (item.result === 2) {
-        return 'el-icon-check'
-      }
-      if (item.result === 3) {
-        return 'el-icon-close'
-      }
-      if (item.result === 4) {
-        return 'el-icon-remove-outline'
-      }
-      return ''
-    },
-    getTimelineItemType (item) {
-      if (item.result === 1) {
-        return 'primary'
-      }
-      if (item.result === 2) {
-        return 'success'
-      }
-      if (item.result === 3) {
-        return 'danger'
-      }
-      if (item.result === 4) {
-        return 'info'
-      }
-      return ''
-    },
+
     /** 处理审批通过和不通过的操作 */
     handleAudit (task, pass) {
       const index = this.runningTasks.indexOf(task)
diff --git a/yudao-ui-admin/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin/src/views/bpm/processInstance/detail.vue
index 57ff762bf..8fefa630f 100644
--- a/yudao-ui-admin/src/views/bpm/processInstance/detail.vue
+++ b/yudao-ui-admin/src/views/bpm/processInstance/detail.vue
@@ -275,23 +275,6 @@ export default {
         this.tasksLoad = false;
       });
     },
-    /** 处理选择流程的按钮操作 **/
-    handleSelect(row) {
-      // 设置选择的流程
-      this.selectProcessInstance = row;
-
-      // 流程表单
-      if (row.formId) {
-        // 设置对应的表单
-        this.detailForm = {
-          ...JSON.parse(row.formConf),
-          fields: decodeFields(row.formFields)
-        }
-      } else if (row.formCustomCreatePath) {
-        this.$router.push({ path: row.formCustomCreatePath});
-        // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
-      }
-    },
     getDateStar(ms) {
       return getDate(ms);
     },

From 3702fb0c16bb2ef586fa10bde67b6865bad21aa2 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 24 Jan 2023 10:15:26 +0800
Subject: [PATCH 28/59] =?UTF-8?q?bpm=EF=BC=9A=E6=B5=81=E7=A8=8B=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E7=9A=84=E5=AE=A1=E6=89=B9=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bpm/processInstance/detail.vue  |  79 ++++++++++---
 .../src/views/bpm/processInstance/detail2.vue | 104 +++++-------------
 2 files changed, 90 insertions(+), 93 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
index 65fc0b5bd..047d3dc56 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
@@ -1,6 +1,47 @@
 <template>
   <ContentWrap>
-    <!-- TODO 审批信息 -->
+    <!-- 审批信息 -->
+    <el-card
+      class="box-card"
+      v-loading="processInstanceLoading"
+      v-for="(item, index) in runningTasks"
+      :key="index"
+    >
+      <template #header>
+        <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
+      </template>
+      <el-col :span="16" :offset="6">
+        <el-form
+          :ref="'form' + index"
+          :model="auditForms[index]"
+          :rules="auditRule"
+          label-width="100px"
+        >
+          <el-form-item label="流程名" v-if="processInstance && processInstance.name">
+            {{ processInstance.name }}
+          </el-form-item>
+          <el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser">
+            {{ processInstance.startUser.nickname }}
+            <el-tag type="info" size="mini">{{ processInstance.startUser.deptName }}</el-tag>
+          </el-form-item>
+          <el-form-item label="审批建议" prop="reason">
+            <el-input
+              type="textarea"
+              v-model="auditForms[index].reason"
+              placeholder="请输入审批建议"
+            />
+          </el-form-item>
+        </el-form>
+        <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
+          <XButton
+            pre-icon="ep:select"
+            type="success"
+            title="通过"
+            @click="handleAudit(item, true)"
+          />
+        </div>
+      </el-col>
+    </el-card>
 
     <!-- 申请信息 -->
     <el-card class="box-card" v-loading="processInstanceLoading">
@@ -92,14 +133,16 @@ const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref({}) // 流程实例
 const runningTasks = ref([]) // 运行中的任务
 const auditForms = ref([]) // 审批任务的表单
-// const auditRule = reactive({
-//   reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
-// })
+const auditRule = reactive({
+  reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
+})
 
 // ========== 申请信息 ==========
 import { setConfAndFields2 } from '@/utils/formCreate'
 import { ApiAttrs } from '@form-create/element-ui/types/config'
+import { useUserStore } from '@/store/modules/user'
 const fApi = ref<ApiAttrs>()
+const userId = useUserStore().getUser.id // 当前登录的编号
 // 流程表单详情
 const detailForm = ref({
   rule: [],
@@ -207,19 +250,21 @@ onMounted(() => {
       })
 
       // 需要审核的记录
-      // const userId = store.getters.userId
-      // this.tasks.forEach(task => {
-      //   if (task.result !== 1) { // 只有待处理才需要
-      //     return
-      //   }
-      //   if (!task.assigneeUser || task.assigneeUser.id !== userId) { // 自己不是处理人
-      //     return
-      //   }
-      //   this.runningTasks.push({ ...task })
-      //   this.auditForms.push({
-      //     reason: ''
-      //   })
-      // })
+      tasks.value.forEach((task) => {
+        // 1.1 只有待处理才需要
+        if (task.result !== 1) {
+          return
+        }
+        // 1.2 自己不是处理人
+        if (!task.assigneeUser || task.assigneeUser.id !== userId) {
+          return
+        }
+        // 2. 添加到处理任务
+        runningTasks.value.push({ ...task })
+        auditForms.value.push({
+          reason: ''
+        })
+      })
     })
     .finally(() => {
       tasksLoad.value = false
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
index 961206bc8..a7d574a47 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
@@ -1,78 +1,34 @@
 <template>
   <div class="app-container">
-    <!-- 审批信息 -->
-    <el-card
-      class="box-card"
-      v-loading="processInstanceLoading"
-      v-for="(item, index) in runningTasks"
-      :key="index"
+
+    <el-button
+        icon="el-icon-circle-close"
+        type="danger"
+        size="mini"
+        @click="handleAudit(item, false)"
+    >不通过</el-button
+    >
+    <el-button
+        icon="el-icon-edit-outline"
+        type="primary"
+        size="mini"
+        @click="handleUpdateAssignee(item)"
+    >转办</el-button
+    >
+    <el-button
+        icon="el-icon-edit-outline"
+        type="primary"
+        size="mini"
+        @click="handleDelegate(item)"
+    >委派</el-button
+    >
+    <el-button
+        icon="el-icon-refresh-left"
+        type="warning"
+        size="mini"
+        @click="handleBack(item)"
+    >退回</el-button
     >
-      <div slot="header" class="clearfix">
-        <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
-      </div>
-      <el-col :span="16" :offset="6">
-        <el-form
-          :ref="'form' + index"
-          :model="auditForms[index]"
-          :rules="auditRule"
-          label-width="100px"
-        >
-          <el-form-item label="流程名" v-if="processInstance && processInstance.name">
-            {{ processInstance.name }}
-          </el-form-item>
-          <el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser">
-            {{ processInstance.startUser.nickname }}
-            <el-tag type="info" size="mini">{{ processInstance.startUser.deptName }}</el-tag>
-          </el-form-item>
-          <el-form-item label="审批建议" prop="reason">
-            <el-input
-              type="textarea"
-              v-model="auditForms[index].reason"
-              placeholder="请输入审批建议"
-            />
-          </el-form-item>
-        </el-form>
-        <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
-          <el-button
-            icon="el-icon-edit-outline"
-            type="success"
-            size="mini"
-            @click="handleAudit(item, true)"
-            >通过</el-button
-          >
-          <el-button
-            icon="el-icon-circle-close"
-            type="danger"
-            size="mini"
-            @click="handleAudit(item, false)"
-            >不通过</el-button
-          >
-          <el-button
-            icon="el-icon-edit-outline"
-            type="primary"
-            size="mini"
-            @click="handleUpdateAssignee(item)"
-            >转办</el-button
-          >
-          <el-button
-            icon="el-icon-edit-outline"
-            type="primary"
-            size="mini"
-            @click="handleDelegate(item)"
-            >委派</el-button
-          >
-          <el-button
-            icon="el-icon-refresh-left"
-            type="warning"
-            size="mini"
-            @click="handleBack(item)"
-            >退回</el-button
-          >
-        </div>
-      </el-col>
-    </el-card>
-
-
 
     <!-- 高亮流程图 -->
     <el-card class="box-card" v-loading="processInstanceLoading">
@@ -124,7 +80,6 @@ import { decodeFields } from "@/utils/formGenerator"
 import Parser from '@/components/parser/Parser'
 import { getProcessInstanceApi } from "@/api/bpm/processInstance"
 import { approveTask, getTaskListByProcessInstanceId, rejectTask, updateTaskAssignee } from "@/api/bpm/task"
-import { getDate } from "@/utils/dateUtils"
 import { getListSimpleUsersApi } from "@/api/system/user"
 import { getActivityList } from "@/api/bpm/activity"
 
@@ -190,9 +145,6 @@ export default {
         })
       })
     },
-    getDateStar (ms) {
-      return getDate(ms)
-    },
 
     /** 处理审批通过和不通过的操作 */
     handleAudit (task, pass) {

From bd6a1dcc645ecd9464152eb6acd9c3bf67a1bef1 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 24 Jan 2023 11:34:31 +0800
Subject: [PATCH 29/59] =?UTF-8?q?bpm=EF=BC=9A=E6=B5=81=E7=A8=8B=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E7=9A=84=E5=AE=A1=E6=89=B9=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bpm/processInstance/detail.vue  | 37 +++++++++++++++++--
 .../src/views/bpm/processInstance/detail2.vue | 25 +------------
 2 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
index 047d3dc56..484e1ed23 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
@@ -12,7 +12,7 @@
       </template>
       <el-col :span="16" :offset="6">
         <el-form
-          :ref="'form' + index"
+          :ref="auditFormRefs"
           :model="auditForms[index]"
           :rules="auditRule"
           label-width="100px"
@@ -22,7 +22,7 @@
           </el-form-item>
           <el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser">
             {{ processInstance.startUser.nickname }}
-            <el-tag type="info" size="mini">{{ processInstance.startUser.deptName }}</el-tag>
+            <el-tag type="info" size="small">{{ processInstance.startUser.deptName }}</el-tag>
           </el-form-item>
           <el-form-item label="审批建议" prop="reason">
             <el-input
@@ -137,6 +137,33 @@ const auditRule = reactive({
   reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
 })
 
+// 处理审批通过和不通过的操作
+const handleAudit = async (task, pass) => {
+  // 1.1 获得对应表单
+  const index = runningTasks.value.indexOf(task)
+  // const auditFormRef = ref<any>([]).value.get(index)
+  // 1.2 校验表单
+  // const elForm = unref(auditFormRef)
+  // if (!elForm) return
+  // const valid = await auditFormRef.validate()
+  // if (!valid) return
+
+  // 2.1 提交审批
+  const data = {
+    id: task.id,
+    reason: auditForms.value[index].reason
+  }
+  if (pass) {
+    await TaskApi.approveTask(data)
+    message.success('审批通过成功')
+  } else {
+    await TaskApi.rejectTask(data)
+    message.success('审批不通过成功')
+  }
+  // 2.2 加载最新数据
+  getDetail()
+}
+
 // ========== 申请信息 ==========
 import { setConfAndFields2 } from '@/utils/formCreate'
 import { ApiAttrs } from '@form-create/element-ui/types/config'
@@ -187,6 +214,10 @@ const getTimelineItemType = (item) => {
 
 // ========== 初始化 ==========
 onMounted(() => {
+  getDetail()
+})
+
+const getDetail = () => {
   // 1. 获得流程实例相关
   processInstanceLoading.value = true
   ProcessInstanceApi.getProcessInstanceApi(id)
@@ -269,7 +300,7 @@ onMounted(() => {
     .finally(() => {
       tasksLoad.value = false
     })
-})
+}
 </script>
 
 <style lang="scss">
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
index a7d574a47..15e3d7e28 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
@@ -146,30 +146,7 @@ export default {
       })
     },
 
-    /** 处理审批通过和不通过的操作 */
-    handleAudit (task, pass) {
-      const index = this.runningTasks.indexOf(task)
-      this.$refs['form' + index][0].validate(valid => {
-        if (!valid) {
-          return
-        }
-        const data = {
-          id: task.id,
-          reason: this.auditForms[index].reason
-        }
-        if (pass) {
-          approveTask(data).then(response => {
-            this.$modal.msgSuccess("审批通过成功！")
-            this.getDetail() // 获得最新详情
-          })
-        } else {
-          rejectTask(data).then(response => {
-            this.$modal.msgSuccess("审批不通过成功！")
-            this.getDetail() // 获得最新详情
-          })
-        }
-      })
-    },
+
     /** 处理转派审批人 */
     handleUpdateAssignee (task) {
       // 设置表单

From 06d8ceb11c48dc432d069427e4c9987809080a40 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 24 Jan 2023 13:32:33 +0800
Subject: [PATCH 30/59] =?UTF-8?q?bpm=EF=BC=9A=E6=B5=81=E7=A8=8B=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E7=9A=84=E5=AE=A1=E6=89=B9=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/types/auto-components.d.ts               |  2 ++
 .../src/views/bpm/processInstance/detail.vue     | 16 ++++++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/types/auto-components.d.ts b/yudao-ui-admin-vue3/src/types/auto-components.d.ts
index a35bc2a30..0dca956f3 100644
--- a/yudao-ui-admin-vue3/src/types/auto-components.d.ts
+++ b/yudao-ui-admin-vue3/src/types/auto-components.d.ts
@@ -61,6 +61,8 @@ declare module '@vue/runtime-core' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTransfer: typeof import('element-plus/es')['ElTransfer']
     ElTree: typeof import('element-plus/es')['ElTree']
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
index 484e1ed23..b90d286cb 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
@@ -12,7 +12,7 @@
       </template>
       <el-col :span="16" :offset="6">
         <el-form
-          :ref="auditFormRefs"
+          :ref="'form' + index"
           :model="auditForms[index]"
           :rules="auditRule"
           label-width="100px"
@@ -119,6 +119,7 @@
   </ContentWrap>
 </template>
 <script setup lang="ts">
+import { getCurrentInstance } from 'vue'
 import dayjs from 'dayjs'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as TaskApi from '@/api/bpm/task'
@@ -126,6 +127,7 @@ import { formatPast2 } from '@/utils/formatTime'
 
 const { query } = useRoute() // 查询参数
 const message = useMessage() // 消息弹窗
+const { proxy } = getCurrentInstance()
 
 // ========== 审批信息 ==========
 const id = query.id as unknown as number
@@ -141,12 +143,14 @@ const auditRule = reactive({
 const handleAudit = async (task, pass) => {
   // 1.1 获得对应表单
   const index = runningTasks.value.indexOf(task)
-  // const auditFormRef = ref<any>([]).value.get(index)
+  const auditFormRef = proxy.$refs['form' + index][0]
+  // alert(auditFormRef)
+
   // 1.2 校验表单
-  // const elForm = unref(auditFormRef)
-  // if (!elForm) return
-  // const valid = await auditFormRef.validate()
-  // if (!valid) return
+  const elForm = unref(auditFormRef)
+  if (!elForm) return
+  const valid = await elForm.validate()
+  if (!valid) return
 
   // 2.1 提交审批
   const data = {

From b6d90b2244fcf5e7f0b667d1880db415f5191117 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 24 Jan 2023 18:55:16 +0800
Subject: [PATCH 31/59] =?UTF-8?q?bpm=EF=BC=9A=E6=B5=81=E7=A8=8B=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E7=9A=84=E8=BD=AC=E6=B4=BE=E5=AE=A1=E6=89=B9=E4=BA=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bpm/processInstance/detail.vue  | 108 +++++++++++++
 .../src/views/bpm/processInstance/detail2.vue | 143 +-----------------
 .../bpm/processInstance/process.detail.ts     |  36 -----
 .../src/views/bpm/processInstance/detail.vue  |   5 +-
 4 files changed, 111 insertions(+), 181 deletions(-)
 delete mode 100644 yudao-ui-admin-vue3/src/views/bpm/processInstance/process.detail.ts

diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
index b90d286cb..78f34e755 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
@@ -39,6 +39,18 @@
             title="通过"
             @click="handleAudit(item, true)"
           />
+          <XButton
+            pre-icon="ep:close"
+            type="danger"
+            title="不通过"
+            @click="handleAudit(item, false)"
+          />
+          <XButton
+            pre-icon="ep:edit"
+            type="primary"
+            title="转办"
+            @click="handleUpdateAssignee(item)"
+          />
         </div>
       </el-col>
     </el-card>
@@ -116,17 +128,56 @@
         </div>
       </el-col>
     </el-card>
+
+    <!-- 对话框(转派审批人) -->
+    <XModal v-model="updateAssigneeVisible" title="转派审批人" width="500">
+      <el-form
+        ref="updateAssigneeFormRef"
+        :model="updateAssigneeForm"
+        :rules="updateAssigneeRules"
+        label-width="110px"
+      >
+        <el-form-item label="新审批人" prop="assigneeUserId">
+          <el-select v-model="updateAssigneeForm.assigneeUserId" clearable style="width: 100%">
+            <el-option
+              v-for="item in userOptions"
+              :key="parseInt(item.id)"
+              :label="item.nickname"
+              :value="parseInt(item.id)"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <!-- 操作按钮 -->
+      <template #footer>
+        <!-- 按钮：保存 -->
+        <XButton
+          type="primary"
+          :title="t('action.save')"
+          :loading="updateAssigneeLoading"
+          @click="submitUpdateAssigneeForm"
+        />
+        <!-- 按钮：关闭 -->
+        <XButton
+          :loading="updateAssigneeLoading"
+          :title="t('dialog.close')"
+          @click="updateAssigneeLoading = false"
+        />
+      </template>
+    </XModal>
   </ContentWrap>
 </template>
 <script setup lang="ts">
 import { getCurrentInstance } from 'vue'
 import dayjs from 'dayjs'
+import * as UserApi from '@/api/system/user'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as TaskApi from '@/api/bpm/task'
 import { formatPast2 } from '@/utils/formatTime'
 
 const { query } = useRoute() // 查询参数
 const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
 const { proxy } = getCurrentInstance()
 
 // ========== 审批信息 ==========
@@ -216,9 +267,66 @@ const getTimelineItemType = (item) => {
   return ''
 }
 
+// ========== 审批记录 ==========
+const updateAssigneeVisible = ref(false)
+const updateAssigneeLoading = ref(false)
+const updateAssigneeForm = ref({
+  id: undefined,
+  assigneeUserId: undefined
+})
+const updateAssigneeRules = ref({
+  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
+})
+const updateAssigneeFormRef = ref()
+const userOptions = ref([])
+
+// 处理转派审批人
+const handleUpdateAssignee = (task) => {
+  // 设置表单
+  resetUpdateAssigneeForm()
+  updateAssigneeForm.value.id = task.id
+  // 设置为打开
+  updateAssigneeVisible.value = true
+}
+
+// 提交转派审批人
+const submitUpdateAssigneeForm = async () => {
+  // 1. 校验表单
+  const elForm = unref(updateAssigneeFormRef)
+  if (!elForm) return
+  const valid = await elForm.validate()
+  if (!valid) return
+
+  // 2.1 提交审批
+  updateAssigneeLoading.value = true
+  try {
+    await TaskApi.updateTaskAssignee(updateAssigneeForm.value)
+    // 2.2 设置为隐藏
+    updateAssigneeVisible.value = false
+    // 加载最新数据
+    getDetail()
+  } finally {
+    updateAssigneeLoading.value = false
+  }
+}
+
+// 重置转派审批人表单
+const resetUpdateAssigneeForm = () => {
+  updateAssigneeForm.value = {
+    id: undefined,
+    assigneeUserId: undefined
+  }
+  updateAssigneeFormRef.value?.resetFields()
+}
+
 // ========== 初始化 ==========
 onMounted(() => {
+  // 加载详情
   getDetail()
+  // 加载用户的列表
+  UserApi.getListSimpleUsersApi().then((data) => {
+    userOptions.value.push(...data)
+  })
 })
 
 const getDetail = () => {
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
index 15e3d7e28..6b44acc76 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
@@ -1,20 +1,8 @@
 <template>
   <div class="app-container">
 
-    <el-button
-        icon="el-icon-circle-close"
-        type="danger"
-        size="mini"
-        @click="handleAudit(item, false)"
-    >不通过</el-button
-    >
-    <el-button
-        icon="el-icon-edit-outline"
-        type="primary"
-        size="mini"
-        @click="handleUpdateAssignee(item)"
-    >转办</el-button
-    >
+
+
     <el-button
         icon="el-icon-edit-outline"
         type="primary"
@@ -44,44 +32,10 @@
         :taskData="tasks"
       />
     </el-card>
-
-    <!-- 对话框(转派审批人) -->
-    <el-dialog title="转派审批人" :visible.sync="updateAssignee.open" width="500px" append-to-body>
-      <el-form
-        ref="updateAssigneeForm"
-        :model="updateAssignee.form"
-        :rules="updateAssignee.rules"
-        label-width="110px"
-      >
-        <el-form-item label="新审批人" prop="assigneeUserId">
-          <el-select v-model="updateAssignee.form.assigneeUserId" clearable style="width: 100%">
-            <el-option
-              v-for="item in userOptions"
-              :key="parseInt(item.id)"
-              :label="item.nickname"
-              :value="parseInt(item.id)"
-            />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitUpdateAssigneeForm">确 定</el-button>
-        <el-button @click="cancelUpdateAssigneeForm">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getProcessDefinitionBpmnXML } from "@/api/bpm/definition"
-import { DICT_TYPE, getDictOptions } from "@/utils/dict"
-import store from "@/store"
-import { decodeFields } from "@/utils/formGenerator"
-import Parser from '@/components/parser/Parser'
-import { getProcessInstanceApi } from "@/api/bpm/processInstance"
-import { approveTask, getTaskListByProcessInstanceId, rejectTask, updateTaskAssignee } from "@/api/bpm/task"
-import { getListSimpleUsersApi } from "@/api/system/user"
-import { getActivityList } from "@/api/bpm/activity"
 
 // 流程实例的详情页，可用于审批
 export default {
@@ -95,92 +49,10 @@ export default {
         prefix: "flowable"
       },
       activityList: [],
-
-      // 转派审批人
-      userOptions: [],
-      updateAssignee: {
-        open: false,
-        form: {
-          assigneeUserId: undefined,
-        },
-        rules: {
-          assigneeUserId: [{ required: true, message: "新审批人不能为空", trigger: "change" }],
-        }
-      },
-
-      // 数据字典
-      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
     }
   },
-  created () {
-    this.id = this.$route.query.id
-    if (!this.id) {
-      this.$message.error('未传递 id 参数，无法查看流程信息')
-      return
-    }
-    this.getDetail()
-
-    // 获得用户列表
-    this.userOptions = []
-    getListSimpleUsersApi().then(response => {
-      this.userOptions.push(...response.data)
-    })
-  },
-  methods: {
-    /** 获得流程实例 */
-    getDetail () {
-      // 获得流程实例相关
-      this.processInstanceLoading = true
-      getProcessInstanceApi(this.id).then(response => {
-        // 加载流程图
-        getProcessDefinitionBpmnXML(this.processInstance.processDefinition.id).then(response => {
-          this.bpmnXML = response.data
-        })
-
-        // 加载活动列表
-        getActivityList({
-          processInstanceId: this.processInstance.id
-        }).then(response => {
-          this.activityList = response.data
-        })
-      })
-    },
 
 
-    /** 处理转派审批人 */
-    handleUpdateAssignee (task) {
-      // 设置表单
-      this.resetUpdateAssigneeForm()
-      this.updateAssignee.form.id = task.id
-      // 设置为打开
-      this.updateAssignee.open = true
-    },
-    /** 提交转派审批人 */
-    submitUpdateAssigneeForm () {
-      this.$refs['updateAssigneeForm'].validate(valid => {
-        if (!valid) {
-          return
-        }
-        updateTaskAssignee(this.updateAssignee.form).then(response => {
-          this.$modal.msgSuccess("转派任务成功！")
-          this.updateAssignee.open = false
-          this.getDetail() // 获得最新详情
-        })
-      })
-    },
-    /** 取消转派审批人 */
-    cancelUpdateAssigneeForm () {
-      this.updateAssignee.open = false
-      this.resetUpdateAssigneeForm()
-    },
-    /** 重置转派审批人 */
-    resetUpdateAssigneeForm () {
-      this.updateAssignee.form = {
-        id: undefined,
-        assigneeUserId: undefined,
-      }
-      this.resetForm("updateAssigneeForm")
-    },
     /** 处理审批退回的操作 */
     handleDelegate (task) {
       this.$modal.msgError("暂不支持【委派】功能，可以使用【转派】替代！")
@@ -201,14 +73,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss">
-.my-process-designer {
-  height: calc(100vh - 200px);
-}
-
-.box-card {
-  width: 100%;
-  margin-bottom: 20px;
-}
-</style>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.detail.ts b/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.detail.ts
deleted file mode 100644
index 36cdebc54..000000000
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/process.detail.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { reactive } from 'vue'
-// import { useI18n } from '@/hooks/web/useI18n'
-import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
-import { DICT_TYPE } from '@/utils/dict'
-// const { t } = useI18n() // 国际化
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: 'id',
-  primaryTitle: '流程名称',
-  action: true,
-  actionWidth: '200px',
-  columns: [
-    {
-      title: '流程分类',
-      field: 'category',
-      dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
-      dictClass: 'number'
-    },
-    {
-      title: '流程版本',
-      field: 'processDefinition.version',
-      table: {
-        slots: {
-          default: 'version_default'
-        }
-      }
-    },
-    {
-      title: '流程描述',
-      field: 'description'
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/yudao-ui-admin/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin/src/views/bpm/processInstance/detail.vue
index 8fefa630f..a1f9f6908 100644
--- a/yudao-ui-admin/src/views/bpm/processInstance/detail.vue
+++ b/yudao-ui-admin/src/views/bpm/processInstance/detail.vue
@@ -163,10 +163,7 @@ export default {
         rules: {
           assigneeUserId: [{ required: true, message: "新审批人不能为空", trigger: "change" }],
         }
-      },
-
-      // 数据字典
-      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
+      }
     };
   },
   created() {

From 2253ba069f09177c4d1d60fc0ddc04337fb606fa Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 24 Jan 2023 19:39:44 +0800
Subject: [PATCH 32/59] =?UTF-8?q?bpm=EF=BC=9A=E5=AE=8C=E6=88=90=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AF=A6=E6=83=85=E7=9A=84=E6=95=B4=E4=BD=93=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/bpm/activity/index.ts             |  8 ++
 .../src/api/bpm/definition/index.ts           |  1 +
 .../src/types/auto-imports.d.ts               |  1 -
 .../src/views/bpm/definition/index.vue        |  4 +-
 .../src/views/bpm/form/index.vue              |  4 +-
 .../src/views/bpm/model/index.vue             |  4 +-
 .../src/views/bpm/processInstance/detail.vue  | 64 +++++++++++++++-
 .../src/views/bpm/processInstance/detail2.vue | 75 -------------------
 8 files changed, 74 insertions(+), 87 deletions(-)
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/activity/index.ts
 delete mode 100644 yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue

diff --git a/yudao-ui-admin-vue3/src/api/bpm/activity/index.ts b/yudao-ui-admin-vue3/src/api/bpm/activity/index.ts
new file mode 100644
index 000000000..870d0d6cd
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/activity/index.ts
@@ -0,0 +1,8 @@
+import request from '@/config/axios'
+
+export const getActivityList = async (params) => {
+  return await request.get({
+    url: '/bpm/activity/list',
+    params
+  })
+}
diff --git a/yudao-ui-admin-vue3/src/api/bpm/definition/index.ts b/yudao-ui-admin-vue3/src/api/bpm/definition/index.ts
index 766ac90e2..477d67298 100644
--- a/yudao-ui-admin-vue3/src/api/bpm/definition/index.ts
+++ b/yudao-ui-admin-vue3/src/api/bpm/definition/index.ts
@@ -12,6 +12,7 @@ export const getProcessDefinitionPageApi = async (params) => {
     params
   })
 }
+
 export const getProcessDefinitionListApi = async (params) => {
   return await request.get({
     url: '/bpm/process-definition/list',
diff --git a/yudao-ui-admin-vue3/src/types/auto-imports.d.ts b/yudao-ui-admin-vue3/src/types/auto-imports.d.ts
index 53862b631..68e0f7a40 100644
--- a/yudao-ui-admin-vue3/src/types/auto-imports.d.ts
+++ b/yudao-ui-admin-vue3/src/types/auto-imports.d.ts
@@ -3,7 +3,6 @@ export {}
 declare global {
   const DICT_TYPE: typeof import('@/utils/dict')['DICT_TYPE']
   const EffectScope: typeof import('vue')['EffectScope']
-  const ElMessage: typeof import('element-plus/es')['ElMessage']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']
diff --git a/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue b/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
index b37c3f5a6..3021c0e2a 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
@@ -37,7 +37,7 @@
 
     <!-- 表单详情的弹窗 -->
     <XModal v-model="formDetailVisible" width="800" title="表单详情" :show-footer="false">
-      <ViewForm
+      <form-create
         :rule="formDetailPreview.rule"
         :option="formDetailPreview.option"
         v-if="formDetailVisible"
@@ -58,8 +58,6 @@ const message = useMessage() // 消息弹窗
 const router = useRouter() // 路由
 const { query } = useRoute() // 查询参数
 
-import viewForm from '@form-create/element-ui'
-const ViewForm = viewForm.$form()
 import { setConfAndFields2 } from '@/utils/formCreate'
 
 // ========== 列表相关 ==========
diff --git a/yudao-ui-admin-vue3/src/views/bpm/form/index.vue b/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
index 749c2416f..30bd770f1 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
@@ -39,7 +39,7 @@
       </XTable>
       <!-- 表单详情的弹窗 -->
       <XModal v-model="detailOpen" width="800" title="表单详情">
-        <ViewForm :rule="detailPreview.rule" :option="detailPreview.option" v-if="detailOpen" />
+        <form-create :rule="detailPreview.rule" :option="detailPreview.option" v-if="detailOpen" />
       </XModal>
     </div>
   </ContentWrap>
@@ -55,8 +55,6 @@ const { t } = useI18n() // 国际化
 const router = useRouter() // 路由
 
 // 表单详情相关的变量和 import
-import viewForm from '@form-create/element-ui'
-const ViewForm = viewForm.$form()
 import { setConfAndFields2 } from '@/utils/formCreate'
 
 // 列表相关的变量
diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
index 81335cba4..6a269e035 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
@@ -292,7 +292,7 @@
 
     <!-- 表单详情的弹窗 -->
     <XModal v-model="formDetailVisible" width="800" title="表单详情" :show-footer="false">
-      <ViewForm
+      <form-create
         :rule="formDetailPreview.rule"
         :option="formDetailPreview.option"
         v-if="formDetailVisible"
@@ -317,8 +317,6 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const router = useRouter() // 路由
 
-import viewForm from '@form-create/element-ui'
-const ViewForm = viewForm.$form()
 import { setConfAndFields2 } from '@/utils/formCreate'
 
 // ========== 列表相关 ==========
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
index 78f34e755..776f3f45b 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
@@ -51,6 +51,13 @@
             title="转办"
             @click="handleUpdateAssignee(item)"
           />
+          <XButton
+            pre-icon="ep:position"
+            type="primary"
+            title="委派"
+            @click="handleDelegate(item)"
+          />
+          <XButton pre-icon="ep:back" type="warning" title="委派" @click="handleBack(item)" />
         </div>
       </el-col>
     </el-card>
@@ -129,6 +136,21 @@
       </el-col>
     </el-card>
 
+    <!-- 高亮流程图 -->
+    <el-card class="box-card" v-loading="processInstanceLoading">
+      <template #header>
+        <span class="el-icon-picture-outline">流程图</span>
+      </template>
+      <my-process-viewer
+        key="designer"
+        v-model="bpmnXML"
+        v-bind="bpmnControlForm"
+        :activityData="activityList"
+        :processInstanceData="processInstance"
+        :taskData="tasks"
+      />
+    </el-card>
+
     <!-- 对话框(转派审批人) -->
     <XModal v-model="updateAssigneeVisible" title="转派审批人" width="500">
       <el-form
@@ -172,7 +194,9 @@ import { getCurrentInstance } from 'vue'
 import dayjs from 'dayjs'
 import * as UserApi from '@/api/system/user'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import * as DefinitionApi from '@/api/bpm/definition'
 import * as TaskApi from '@/api/bpm/task'
+import * as ActivityApi from '@/api/bpm/activity'
 import { formatPast2 } from '@/utils/formatTime'
 
 const { query } = useRoute() // 查询参数
@@ -319,6 +343,34 @@ const resetUpdateAssigneeForm = () => {
   updateAssigneeFormRef.value?.resetFields()
 }
 
+/** 处理审批退回的操作 */
+const handleDelegate = async (task) => {
+  message.error('暂不支持【委派】功能，可以使用【转派】替代！')
+  console.log(task)
+}
+
+/** 处理审批退回的操作 */
+const handleBack = async (task) => {
+  message.error('暂不支持【退回】功能！')
+  // 可参考 http://blog.wya1.com/article/636697030/details/7296
+  // const data = {
+  //   id: task.id,
+  //   assigneeUserId: 1
+  // }
+  // backTask(data).then(response => {
+  //   this.$modal.msgSuccess("回退成功！");
+  //   this.getDetail(); // 获得最新详情
+  // });
+  console.log(task)
+}
+
+// ========== 高亮流程图 ==========
+const bpmnXML = ref(null)
+const bpmnControlForm = ref({
+  prefix: 'flowable'
+})
+const activityList = ref([])
+
 // ========== 初始化 ==========
 onMounted(() => {
   // 加载详情
@@ -355,9 +407,17 @@ const getDetail = () => {
         })
       }
 
-      // TODO 加载流程图
+      // 加载流程图
+      DefinitionApi.getProcessDefinitionBpmnXMLApi(processDefinition.id).then((data) => {
+        bpmnXML.value = data
+      })
 
-      // TODO 加载活动列表
+      // 加载活动列表
+      ActivityApi.getActivityList({
+        processInstanceId: data.id
+      }).then((data) => {
+        activityList.value = data
+      })
     })
     .finally(() => {
       processInstanceLoading.value = false
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
deleted file mode 100644
index 6b44acc76..000000000
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail2.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <div class="app-container">
-
-
-
-    <el-button
-        icon="el-icon-edit-outline"
-        type="primary"
-        size="mini"
-        @click="handleDelegate(item)"
-    >委派</el-button
-    >
-    <el-button
-        icon="el-icon-refresh-left"
-        type="warning"
-        size="mini"
-        @click="handleBack(item)"
-    >退回</el-button
-    >
-
-    <!-- 高亮流程图 -->
-    <el-card class="box-card" v-loading="processInstanceLoading">
-      <div slot="header" class="clearfix">
-        <span class="el-icon-picture-outline">流程图</span>
-      </div>
-      <my-process-viewer
-        key="designer"
-        v-model="bpmnXML"
-        v-bind="bpmnControlForm"
-        :activityData="activityList"
-        :processInstanceData="processInstance"
-        :taskData="tasks"
-      />
-    </el-card>
-  </div>
-</template>
-
-<script>
-
-// 流程实例的详情页，可用于审批
-export default {
-  name: "ProcessInstanceDetail",
-  data () {
-    return {
-
-      // BPMN 数据
-      bpmnXML: null,
-      bpmnControlForm: {
-        prefix: "flowable"
-      },
-      activityList: [],
-    }
-  },
-
-
-    /** 处理审批退回的操作 */
-    handleDelegate (task) {
-      this.$modal.msgError("暂不支持【委派】功能，可以使用【转派】替代！")
-    },
-    /** 处理审批退回的操作 */
-    handleBack (task) {
-      this.$modal.msgError("暂不支持【退回】功能！")
-      // 可参考 http://blog.wya1.com/article/636697030/details/7296
-      // const data = {
-      //   id: task.id,
-      //   assigneeUserId: 1
-      // }
-      // backTask(data).then(response => {
-      //   this.$modal.msgSuccess("回退成功！");
-      //   this.getDetail(); // 获得最新详情
-      // });
-    }
-  }
-};
-</script>

From e7a8d45a6755bbd243ab66d6193d7730825d580c Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Sat, 28 Jan 2023 09:25:34 +0800
Subject: [PATCH 33/59] chore: update deps

---
 yudao-ui-admin-vue3/package.json   |  22 +--
 yudao-ui-admin-vue3/pnpm-lock.yaml | 238 +++++++++++++++--------------
 2 files changed, 135 insertions(+), 125 deletions(-)

diff --git a/yudao-ui-admin-vue3/package.json b/yudao-ui-admin-vue3/package.json
index 7da9c5ff1..72a7b8496 100644
--- a/yudao-ui-admin-vue3/package.json
+++ b/yudao-ui-admin-vue3/package.json
@@ -26,13 +26,13 @@
   "dependencies": {
     "@form-create/designer": "^3.1.0",
     "@form-create/element-ui": "^3.1.17",
-    "@iconify/iconify": "^3.0.1",
-    "@vueuse/core": "^9.11.0",
+    "@iconify/iconify": "^3.1.0",
+    "@vueuse/core": "^9.11.1",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",
-    "@zxcvbn-ts/core": "^2.1.0",
+    "@zxcvbn-ts/core": "^2.2.0",
     "animate.css": "^4.1.1",
-    "axios": "^1.2.3",
+    "axios": "^1.2.5",
     "cropperjs": "^1.5.13",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.7",
@@ -59,7 +59,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
-    "@iconify/json": "^2.2.8",
+    "@iconify/json": "^2.2.13",
     "@intlify/unplugin-vue-i18n": "^0.8.1",
     "@purge-icons/generated": "^0.9.0",
     "@types/intro.js": "^5.1.0",
@@ -68,9 +68,9 @@
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.5.0",
     "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "^5.48.2",
-    "@typescript-eslint/parser": "^5.48.2",
-    "@vitejs/plugin-legacy": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
+    "@vitejs/plugin-legacy": "^3.0.2",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "autoprefixer": "^10.4.13",
@@ -85,8 +85,8 @@
     "postcss-html": "^1.5.0",
     "postcss-scss": "^4.0.6",
     "prettier": "^2.8.3",
-    "rimraf": "^4.1.1",
-    "rollup": "^3.10.0",
+    "rimraf": "^4.1.2",
+    "rollup": "^3.11.0",
     "sass": "^1.57.1",
     "stylelint": "^14.16.1",
     "stylelint-config-html": "^1.1.0",
@@ -96,7 +96,7 @@
     "stylelint-order": "^6.0.1",
     "terser": "^5.16.1",
     "typescript": "4.9.4",
-    "unplugin-auto-import": "^0.12.1",
+    "unplugin-auto-import": "^0.12.2",
     "unplugin-element-plus": "^0.4.1",
     "unplugin-vue-components": "^0.22.12",
     "vite": "4.0.4",
diff --git a/yudao-ui-admin-vue3/pnpm-lock.yaml b/yudao-ui-admin-vue3/pnpm-lock.yaml
index a0f4f9787..46ac946da 100644
--- a/yudao-ui-admin-vue3/pnpm-lock.yaml
+++ b/yudao-ui-admin-vue3/pnpm-lock.yaml
@@ -5,8 +5,8 @@ specifiers:
   '@commitlint/config-conventional': ^17.4.2
   '@form-create/designer': ^3.1.0
   '@form-create/element-ui': ^3.1.17
-  '@iconify/iconify': ^3.0.1
-  '@iconify/json': ^2.2.8
+  '@iconify/iconify': ^3.1.0
+  '@iconify/json': ^2.2.13
   '@intlify/unplugin-vue-i18n': ^0.8.1
   '@purge-icons/generated': ^0.9.0
   '@types/intro.js': ^5.1.0
@@ -15,18 +15,18 @@ specifiers:
   '@types/nprogress': ^0.2.0
   '@types/qrcode': ^1.5.0
   '@types/qs': ^6.9.7
-  '@typescript-eslint/eslint-plugin': ^5.48.2
-  '@typescript-eslint/parser': ^5.48.2
-  '@vitejs/plugin-legacy': ^3.0.1
+  '@typescript-eslint/eslint-plugin': ^5.49.0
+  '@typescript-eslint/parser': ^5.49.0
+  '@vitejs/plugin-legacy': ^3.0.2
   '@vitejs/plugin-vue': ^4.0.0
   '@vitejs/plugin-vue-jsx': ^3.0.0
-  '@vueuse/core': ^9.11.0
+  '@vueuse/core': ^9.11.1
   '@wangeditor/editor': ^5.1.23
   '@wangeditor/editor-for-vue': ^5.1.10
-  '@zxcvbn-ts/core': ^2.1.0
+  '@zxcvbn-ts/core': ^2.2.0
   animate.css: ^4.1.1
   autoprefixer: ^10.4.13
-  axios: ^1.2.3
+  axios: ^1.2.5
   consola: ^2.15.3
   cropperjs: ^1.5.13
   crypto-js: ^4.1.1
@@ -52,8 +52,8 @@ specifiers:
   prettier: ^2.8.3
   qrcode: ^1.5.1
   qs: ^6.11.0
-  rimraf: ^4.1.1
-  rollup: ^3.10.0
+  rimraf: ^4.1.2
+  rollup: ^3.11.0
   sass: ^1.57.1
   stylelint: ^14.16.1
   stylelint-config-html: ^1.1.0
@@ -63,7 +63,7 @@ specifiers:
   stylelint-order: ^6.0.1
   terser: ^5.16.1
   typescript: 4.9.4
-  unplugin-auto-import: ^0.12.1
+  unplugin-auto-import: ^0.12.2
   unplugin-element-plus: ^0.4.1
   unplugin-vue-components: ^0.22.12
   url: ^0.11.0
@@ -89,13 +89,13 @@ specifiers:
 dependencies:
   '@form-create/designer': 3.1.0_vue@3.2.45
   '@form-create/element-ui': 3.1.17_vue@3.2.45
-  '@iconify/iconify': 3.0.1
-  '@vueuse/core': 9.11.0_vue@3.2.45
+  '@iconify/iconify': 3.1.0
+  '@vueuse/core': 9.11.1_vue@3.2.45
   '@wangeditor/editor': 5.1.23
   '@wangeditor/editor-for-vue': 5.1.12_3apfu3xbp6awzuex7ed3sbrv6y
-  '@zxcvbn-ts/core': 2.1.0
+  '@zxcvbn-ts/core': 2.2.0
   animate.css: 4.1.1
-  axios: 1.2.3
+  axios: 1.2.5
   cropperjs: 1.5.13
   crypto-js: 4.1.1
   dayjs: 1.11.7
@@ -122,7 +122,7 @@ dependencies:
 devDependencies:
   '@commitlint/cli': 17.4.2
   '@commitlint/config-conventional': 17.4.2
-  '@iconify/json': 2.2.8
+  '@iconify/json': 2.2.13
   '@intlify/unplugin-vue-i18n': 0.8.1_vue-i18n@9.2.2
   '@purge-icons/generated': 0.9.0
   '@types/intro.js': 5.1.0
@@ -131,9 +131,9 @@ devDependencies:
   '@types/nprogress': 0.2.0
   '@types/qrcode': 1.5.0
   '@types/qs': 6.9.7
-  '@typescript-eslint/eslint-plugin': 5.48.2_caon6io6stgpr7lz2rtbhekxqy
-  '@typescript-eslint/parser': 5.48.2_7uibuqfxkfaozanbtbziikiqje
-  '@vitejs/plugin-legacy': 3.0.1_terser@5.16.1+vite@4.0.4
+  '@typescript-eslint/eslint-plugin': 5.49.0_iu322prlnwsygkcra5kbpy22si
+  '@typescript-eslint/parser': 5.49.0_7uibuqfxkfaozanbtbziikiqje
+  '@vitejs/plugin-legacy': 3.0.2_terser@5.16.1+vite@4.0.4
   '@vitejs/plugin-vue': 4.0.0_vite@4.0.4+vue@3.2.45
   '@vitejs/plugin-vue-jsx': 3.0.0_vite@4.0.4+vue@3.2.45
   autoprefixer: 10.4.13_postcss@8.4.21
@@ -148,8 +148,8 @@ devDependencies:
   postcss-html: 1.5.0
   postcss-scss: 4.0.6_postcss@8.4.21
   prettier: 2.8.3
-  rimraf: 4.1.1
-  rollup: 3.10.0
+  rimraf: 4.1.2
+  rollup: 3.11.0
   sass: 1.57.1
   stylelint: 14.16.1
   stylelint-config-html: 1.1.0_kbto3rg3njmczth2rrsgfnlsqa
@@ -159,9 +159,9 @@ devDependencies:
   stylelint-order: 6.0.1_stylelint@14.16.1
   terser: 5.16.1
   typescript: 4.9.4
-  unplugin-auto-import: 0.12.1_ta7poabqclszbk6bszysx4wo3y
-  unplugin-element-plus: 0.4.1_rollup@3.10.0+vite@4.0.4
-  unplugin-vue-components: 0.22.12_rollup@3.10.0+vue@3.2.45
+  unplugin-auto-import: 0.12.2_6cqwe7wq6jqijtkao3lw26pm3a
+  unplugin-element-plus: 0.4.1_rollup@3.11.0+vite@4.0.4
+  unplugin-vue-components: 0.22.12_rollup@3.11.0+vue@3.2.45
   vite: 4.0.4_zxbrnrc4iyldik6mikh3pswz4i
   vite-plugin-compression: 0.5.1_vite@4.0.4
   vite-plugin-ejs: 1.6.4
@@ -455,8 +455,8 @@ packages:
       regenerator-runtime: 0.13.11
     dev: false
 
-  /@babel/standalone/7.20.6:
-    resolution: {integrity: sha512-u5at/CbBLETf7kx2LOY4XdhseD79Y099WZKAOMXeT8qvd9OSR515my2UNBBLY4qIht/Qi9KySeQHQwQwxJN4Sw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/@babel/standalone/-/standalone-7.20.6.tgz}
+  /@babel/standalone/7.20.14:
+    resolution: {integrity: sha512-zxdQD6+eMQumJFPOLpOZE34JAAGrZPMXCKvHR7Mtat/l+nHDOxlit5u85HDk5WkBXmvN5PhUMeimiC95KXD9+A==}
     engines: {node: '>=6.9.0'}
     dev: true
 
@@ -1061,20 +1061,20 @@ packages:
     dev: true
 
   /@iconify/iconify/2.1.2:
-    resolution: {integrity: sha512-QcUzFeEWkE/mW+BVtEGmcWATClcCOIJFiYUD/PiCWuTcdEA297o8D4oN6Ra44WrNOHu1wqNW4J0ioaDIiqaFOQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/@iconify/iconify/-/iconify-2.1.2.tgz}
+    resolution: {integrity: sha512-QcUzFeEWkE/mW+BVtEGmcWATClcCOIJFiYUD/PiCWuTcdEA297o8D4oN6Ra44WrNOHu1wqNW4J0ioaDIiqaFOQ==}
     dependencies:
       cross-fetch: 3.1.5
     transitivePeerDependencies:
       - encoding
     dev: true
 
-  /@iconify/iconify/3.0.1:
-    resolution: {integrity: sha512-OPqVBTh8YsfrYZRVFv3OkmFNLqacM0dy/Oiw1h2wO+RZW5LieNGHlG2f9pzaeVRFWbEB8LHTeo8mcwgUTUbibQ==}
+  /@iconify/iconify/3.1.0:
+    resolution: {integrity: sha512-Xyz+N5NSIiHj7G228CvFUcMKBz3BbpUTAuPnK2ariEUM7891F8ysD6Gh8782f3En1U4Qz70F0tzuyF8BhCfTQg==}
     dependencies:
       '@iconify/types': 2.0.0
 
-  /@iconify/json/2.2.8:
-    resolution: {integrity: sha512-Vusnz/QRrTmGFzzmZ1Mf6mG2OEbBWLrd/gXgaBpCbjP/abDLdKd7+DMRJlaZA/jqMJ0rsIL0juZ9FwApBnh/ww==}
+  /@iconify/json/2.2.13:
+    resolution: {integrity: sha512-TgTGzEhU2o0gGrkke3hVbkVtZB8EcbCdNR4X6ZbXJsApMuFghS4s+yuEbGHw+mMa3sp40L5qRi7wFU6Q47ysfw==}
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 1.0.0
@@ -1270,7 +1270,7 @@ packages:
   /@purge-icons/generated/0.9.0:
     resolution: {integrity: sha512-s2t+1oVtGDV6KtqfCXtUOhxfeYvOdDF90IVm+nMs/6bUP0HeGZLslguuL/AibpwtfL4FA/oCsIu/RhwapgAdJw==}
     dependencies:
-      '@iconify/iconify': 3.0.1
+      '@iconify/iconify': 3.1.0
     dev: true
 
   /@rollup/pluginutils/4.2.1:
@@ -1281,7 +1281,7 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@rollup/pluginutils/5.0.2_rollup@3.10.0:
+  /@rollup/pluginutils/5.0.2_rollup@3.11.0:
     resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -1293,7 +1293,7 @@ packages:
       '@types/estree': 1.0.0
       estree-walker: 2.0.2
       picomatch: 2.3.1
-      rollup: 3.10.0
+      rollup: 3.11.0
     dev: true
 
   /@sxzz/popperjs-es/2.11.7:
@@ -1403,8 +1403,8 @@ packages:
   /@types/web-bluetooth/0.0.16:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
-  /@typescript-eslint/eslint-plugin/5.48.2_caon6io6stgpr7lz2rtbhekxqy:
-    resolution: {integrity: sha512-sR0Gja9Ky1teIq4qJOl0nC+Tk64/uYdX+mi+5iB//MH8gwyx8e3SOyhEzeLZEFEEfCaLf8KJq+Bd/6je1t+CAg==}
+  /@typescript-eslint/eslint-plugin/5.49.0_iu322prlnwsygkcra5kbpy22si:
+    resolution: {integrity: sha512-IhxabIpcf++TBaBa1h7jtOWyon80SXPRLDq0dVz5SLFC/eW6tofkw/O7Ar3lkx5z5U6wzbKDrl2larprp5kk5Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -1414,10 +1414,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.48.2_7uibuqfxkfaozanbtbziikiqje
-      '@typescript-eslint/scope-manager': 5.48.2
-      '@typescript-eslint/type-utils': 5.48.2_7uibuqfxkfaozanbtbziikiqje
-      '@typescript-eslint/utils': 5.48.2_7uibuqfxkfaozanbtbziikiqje
+      '@typescript-eslint/parser': 5.49.0_7uibuqfxkfaozanbtbziikiqje
+      '@typescript-eslint/scope-manager': 5.49.0
+      '@typescript-eslint/type-utils': 5.49.0_7uibuqfxkfaozanbtbziikiqje
+      '@typescript-eslint/utils': 5.49.0_7uibuqfxkfaozanbtbziikiqje
       debug: 4.3.4
       eslint: 8.32.0
       ignore: 5.2.1
@@ -1430,8 +1430,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.48.2_7uibuqfxkfaozanbtbziikiqje:
-    resolution: {integrity: sha512-38zMsKsG2sIuM5Oi/olurGwYJXzmtdsHhn5mI/pQogP+BjYVkK5iRazCQ8RGS0V+YLk282uWElN70zAAUmaYHw==}
+  /@typescript-eslint/parser/5.49.0_7uibuqfxkfaozanbtbziikiqje:
+    resolution: {integrity: sha512-veDlZN9mUhGqU31Qiv2qEp+XrJj5fgZpJ8PW30sHU+j/8/e5ruAhLaVDAeznS7A7i4ucb/s8IozpDtt9NqCkZg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -1440,9 +1440,9 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 5.48.2
-      '@typescript-eslint/types': 5.48.2
-      '@typescript-eslint/typescript-estree': 5.48.2_typescript@4.9.4
+      '@typescript-eslint/scope-manager': 5.49.0
+      '@typescript-eslint/types': 5.49.0
+      '@typescript-eslint/typescript-estree': 5.49.0_typescript@4.9.4
       debug: 4.3.4
       eslint: 8.32.0
       typescript: 4.9.4
@@ -1450,16 +1450,16 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager/5.48.2:
-    resolution: {integrity: sha512-zEUFfonQid5KRDKoI3O+uP1GnrFd4tIHlvs+sTJXiWuypUWMuDaottkJuR612wQfOkjYbsaskSIURV9xo4f+Fw==}
+  /@typescript-eslint/scope-manager/5.49.0:
+    resolution: {integrity: sha512-clpROBOiMIzpbWNxCe1xDK14uPZh35u4QaZO1GddilEzoCLAEz4szb51rBpdgurs5k2YzPtJeTEN3qVbG+LRUQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.48.2
-      '@typescript-eslint/visitor-keys': 5.48.2
+      '@typescript-eslint/types': 5.49.0
+      '@typescript-eslint/visitor-keys': 5.49.0
     dev: true
 
-  /@typescript-eslint/type-utils/5.48.2_7uibuqfxkfaozanbtbziikiqje:
-    resolution: {integrity: sha512-QVWx7J5sPMRiOMJp5dYshPxABRoZV1xbRirqSk8yuIIsu0nvMTZesKErEA3Oix1k+uvsk8Cs8TGJ6kQ0ndAcew==}
+  /@typescript-eslint/type-utils/5.49.0_7uibuqfxkfaozanbtbziikiqje:
+    resolution: {integrity: sha512-eUgLTYq0tR0FGU5g1YHm4rt5H/+V2IPVkP0cBmbhRyEmyGe4XvJ2YJ6sYTmONfjmdMqyMLad7SB8GvblbeESZA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -1468,8 +1468,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 5.48.2_typescript@4.9.4
-      '@typescript-eslint/utils': 5.48.2_7uibuqfxkfaozanbtbziikiqje
+      '@typescript-eslint/typescript-estree': 5.49.0_typescript@4.9.4
+      '@typescript-eslint/utils': 5.49.0_7uibuqfxkfaozanbtbziikiqje
       debug: 4.3.4
       eslint: 8.32.0
       tsutils: 3.21.0_typescript@4.9.4
@@ -1478,13 +1478,13 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/types/5.48.2:
-    resolution: {integrity: sha512-hE7dA77xxu7ByBc6KCzikgfRyBCTst6dZQpwaTy25iMYOnbNljDT4hjhrGEJJ0QoMjrfqrx+j1l1B9/LtKeuqA==}
+  /@typescript-eslint/types/5.49.0:
+    resolution: {integrity: sha512-7If46kusG+sSnEpu0yOz2xFv5nRz158nzEXnJFCGVEHWnuzolXKwrH5Bsf9zsNlOQkyZuk0BZKKoJQI+1JPBBg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.48.2_typescript@4.9.4:
-    resolution: {integrity: sha512-bibvD3z6ilnoVxUBFEgkO0k0aFvUc4Cttt0dAreEr+nrAHhWzkO83PEVVuieK3DqcgL6VAK5dkzK8XUVja5Zcg==}
+  /@typescript-eslint/typescript-estree/5.49.0_typescript@4.9.4:
+    resolution: {integrity: sha512-PBdx+V7deZT/3GjNYPVQv1Nc0U46dAHbIuOG8AZ3on3vuEKiPDwFE/lG1snN2eUB9IhF7EyF7K1hmTcLztNIsA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -1492,8 +1492,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.48.2
-      '@typescript-eslint/visitor-keys': 5.48.2
+      '@typescript-eslint/types': 5.49.0
+      '@typescript-eslint/visitor-keys': 5.49.0
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
@@ -1504,17 +1504,17 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.48.2_7uibuqfxkfaozanbtbziikiqje:
-    resolution: {integrity: sha512-2h18c0d7jgkw6tdKTlNaM7wyopbLRBiit8oAxoP89YnuBOzCZ8g8aBCaCqq7h208qUTroL7Whgzam7UY3HVLow==}
+  /@typescript-eslint/utils/5.49.0_7uibuqfxkfaozanbtbziikiqje:
+    resolution: {integrity: sha512-cPJue/4Si25FViIb74sHCLtM4nTSBXtLx1d3/QT6mirQ/c65bV8arBEebBJJizfq8W2YyMoPI/WWPFWitmNqnQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@types/json-schema': 7.0.11
       '@types/semver': 7.3.13
-      '@typescript-eslint/scope-manager': 5.48.2
-      '@typescript-eslint/types': 5.48.2
-      '@typescript-eslint/typescript-estree': 5.48.2_typescript@4.9.4
+      '@typescript-eslint/scope-manager': 5.49.0
+      '@typescript-eslint/types': 5.49.0
+      '@typescript-eslint/typescript-estree': 5.49.0_typescript@4.9.4
       eslint: 8.32.0
       eslint-scope: 5.1.1
       eslint-utils: 3.0.0_eslint@8.32.0
@@ -1524,11 +1524,11 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/visitor-keys/5.48.2:
-    resolution: {integrity: sha512-z9njZLSkwmjFWUelGEwEbdf4NwKvfHxvGC0OcGN1Hp/XNDIcJ7D5DpPNPv6x6/mFvc1tQHsaWmpD/a4gOvvCJQ==}
+  /@typescript-eslint/visitor-keys/5.49.0:
+    resolution: {integrity: sha512-v9jBMjpNWyn8B6k/Mjt6VbUS4J1GvUlR4x3Y+ibnP1z7y7V4n0WRz+50DY6+Myj0UaXVSuUlHohO+eZ8IJEnkg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.48.2
+      '@typescript-eslint/types': 5.49.0
       eslint-visitor-keys: 3.3.0
     dev: true
 
@@ -1573,15 +1573,15 @@ packages:
       nanoid: 3.3.4
     dev: false
 
-  /@vitejs/plugin-legacy/3.0.1_terser@5.16.1+vite@4.0.4:
-    resolution: {integrity: sha512-XCtEjxoR3rmy000ujYRBp5kggWqzHz9+F20/yIMUWOzbvu0+KW1e14Fvb8h7SpNn+bfjGW1RiAs1Vrgb7Js+iQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/@vitejs/plugin-legacy/-/plugin-legacy-3.0.1.tgz}
+  /@vitejs/plugin-legacy/3.0.2_terser@5.16.1+vite@4.0.4:
+    resolution: {integrity: sha512-9BT2mXunC7kQGKHP70BIbNZ/85P/KUMGKBS9CiV+XKNDZGNBjUnyrh3ofgtqgObmxKaEP2xJsEIRNIFJ+hjI8w==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       terser: ^5.4.0
       vite: ^4.0.0
     dependencies:
-      '@babel/standalone': 7.20.6
-      core-js: 3.26.1
+      '@babel/standalone': 7.20.14
+      core-js: 3.27.2
       magic-string: 0.27.0
       regenerator-runtime: 0.13.11
       systemjs: 6.13.0
@@ -1752,22 +1752,22 @@ packages:
   /@vue/shared/3.2.45:
     resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==}
 
-  /@vueuse/core/9.11.0_vue@3.2.45:
-    resolution: {integrity: sha512-7yZJ8LNOssA8ZmeSjd4F+wbFBA4csiP4TiaXgruqg1H4PAtzSkv93PPwFLvQkSnfo3Bar+e+6QoRvWjhz7l2Xg==}
+  /@vueuse/core/9.11.1_vue@3.2.45:
+    resolution: {integrity: sha512-E/cizD1w9ILkq4axYjZrXLkKaBfzloaby2n3NMjUfd6yI/jkfTVgc6iwy/Cw2e++Ld4LphGbO+3MhzizvwUslQ==}
     dependencies:
       '@types/web-bluetooth': 0.0.16
-      '@vueuse/metadata': 9.11.0
-      '@vueuse/shared': 9.11.0_vue@3.2.45
+      '@vueuse/metadata': 9.11.1
+      '@vueuse/shared': 9.11.1_vue@3.2.45
       vue-demi: 0.13.11_vue@3.2.45
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  /@vueuse/metadata/9.11.0:
-    resolution: {integrity: sha512-HhtG2SWkcfZBLbamHdvLn7jKOCFpw/ifXjVTd5ilFkj98WVUk/3UTQ03wF1XIkuhSO4+b45hD2lfG9/GdKCF7w==}
+  /@vueuse/metadata/9.11.1:
+    resolution: {integrity: sha512-ABjkrG+VXggNhjfGyw5e/sekxTZfXTwjrYXkkWQmQ7Biyv+Gq9UD6IDNfeGvQZEINI0Qzw6nfuO2UFCd3hlrxQ==}
 
-  /@vueuse/shared/9.11.0_vue@3.2.45:
-    resolution: {integrity: sha512-8lO7wD5abYxupKy2KynH1pSgP715ky6iCrWYb8aX2AuAVi9uHXj7qE1dw6BnmArSaLHci4x9iuzWPCpAzUkC/A==}
+  /@vueuse/shared/9.11.1_vue@3.2.45:
+    resolution: {integrity: sha512-UTZYGAjT96hWn4buf4wstZbeheBVNcKPQuej6qpoSkjF1atdaeCD6kqm9uGL2waHfisSgH9mq0qCRiBOk5C/2w==}
     dependencies:
       vue-demi: 0.13.11_vue@3.2.45
     transitivePeerDependencies:
@@ -1984,8 +1984,10 @@ packages:
       - supports-color
     dev: true
 
-  /@zxcvbn-ts/core/2.1.0:
-    resolution: {integrity: sha512-doxol9xrO7LgyVJhguXe7vO0xthnIYmsOKoDwrLg0Ho2kkpQaVtM+AOQw+BkEiKIqNg1V48eUf4/cTzMElXdiA==}
+  /@zxcvbn-ts/core/2.2.0:
+    resolution: {integrity: sha512-LPKwI9ZBXGbXhQD39L//c923743yhmiTvnR8cu+u0mpsBt/kRdOJGMUMrbVV0sZZgn0XFc5RokjIxWllghN9kA==}
+    dependencies:
+      fastest-levenshtein: 1.0.16
     dev: false
 
   /JSONStream/1.3.5:
@@ -2205,8 +2207,8 @@ packages:
       - debug
     dev: true
 
-  /axios/1.2.3:
-    resolution: {integrity: sha512-pdDkMYJeuXLZ6Xj/Q5J3Phpe+jbGdsSzlQaFVkMQzRUL05+6+tetX8TV3p4HrU4kzuO9bt+io/yGQxuyxA/xcw==}
+  /axios/1.2.5:
+    resolution: {integrity: sha512-9pU/8mmjSSOb4CXVsvGIevN+MlO/t9OWtKadTaLuN85Gge3HGorUckgp8A/2FH4V4hJ7JuQ3LIeI7KAV9ITZrQ==}
     dependencies:
       follow-redirects: 1.15.2
       form-data: 4.0.0
@@ -2581,8 +2583,8 @@ packages:
     requiresBuild: true
     dev: false
 
-  /core-js/3.26.1:
-    resolution: {integrity: sha512-21491RRQVzUn0GGM9Z1Jrpr6PNPxPi+Za8OM9q4tksTSnlbXXGKK1nXNg/QvwFYettXvSX6zWKCtHHfjN4puyA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/core-js/-/core-js-3.26.1.tgz}
+  /core-js/3.27.2:
+    resolution: {integrity: sha512-9ashVQskuh5AZEZ1JdQWp1GqSoC1e1G87MzRqg2gIfVAQ7Qn9K+uFj8EcniUFA4P2NLZfV+TOlX1SzoKfo+s7w==}
     requiresBuild: true
     dev: true
 
@@ -2946,7 +2948,7 @@ packages:
       '@popperjs/core': /@sxzz/popperjs-es/2.11.7
       '@types/lodash': 4.14.189
       '@types/lodash-es': 4.17.6
-      '@vueuse/core': 9.11.0_vue@3.2.45
+      '@vueuse/core': 9.11.1_vue@3.2.45
       async-validator: 4.2.5
       dayjs: 1.11.7
       escape-html: 1.0.3
@@ -3397,7 +3399,6 @@ packages:
   /fastest-levenshtein/1.0.16:
     resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
     engines: {node: '>= 4.9.1'}
-    dev: true
 
   /fastq/1.13.0:
     resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==}
@@ -4242,6 +4243,11 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
+  /local-pkg/0.4.3:
+    resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
+    engines: {node: '>=14'}
+    dev: true
+
   /locate-path/5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
@@ -4371,7 +4377,7 @@ packages:
     dev: true
 
   /magic-string/0.27.0:
-    resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/magic-string/-/magic-string-0.27.0.tgz}
+    resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.14
@@ -4570,7 +4576,7 @@ packages:
     resolution: {integrity: sha512-cwzBrBfwGC1gYJyfcy8TcZU1f+dbH/T+TuOhtYP2wLv/Fb51/uV7HJQfBPtEupZ2ORLRU1EKFS/QfS3eo9+kBQ==}
     dependencies:
       acorn: 8.8.1
-      pathe: 1.0.0
+      pathe: 1.1.0
       pkg-types: 1.0.1
       ufo: 1.0.1
     dev: true
@@ -4858,6 +4864,10 @@ packages:
     resolution: {integrity: sha512-nPdMG0Pd09HuSsr7QOKUXO2Jr9eqaDiZvDwdyIhNG5SHYujkQHYKDfGQkulBxvbDHz8oHLsTgKN86LSwYzSHAg==}
     dev: true
 
+  /pathe/1.1.0:
+    resolution: {integrity: sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==}
+    dev: true
+
   /picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -4895,7 +4905,7 @@ packages:
     dependencies:
       jsonc-parser: 3.2.0
       mlly: 1.1.0
-      pathe: 1.0.0
+      pathe: 1.1.0
     dev: true
 
   /pngjs/5.0.0:
@@ -5166,7 +5176,7 @@ packages:
     dev: true
 
   /regenerator-runtime/0.13.11:
-    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz}
+    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
 
   /regex-not/1.0.2:
     resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==}
@@ -5264,8 +5274,8 @@ packages:
       glob: 7.2.3
     dev: true
 
-  /rimraf/4.1.1:
-    resolution: {integrity: sha512-Z4Y81w8atcvaJuJuBB88VpADRH66okZAuEm+Jtaufa+s7rZmIz+Hik2G53kGaNytE7lsfXyWktTmfVz0H9xuDg==}
+  /rimraf/4.1.2:
+    resolution: {integrity: sha512-BlIbgFryTbw3Dz6hyoWFhKk+unCcHMSkZGrTFVAx2WmttdBSonsdtRlwiuTbDqTKr+UlXIUqJVS4QT5tUzGENQ==}
     engines: {node: '>=14'}
     hasBin: true
     dev: true
@@ -5289,8 +5299,8 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /rollup/3.10.0:
-    resolution: {integrity: sha512-JmRYz44NjC1MjVF2VKxc0M1a97vn+cDxeqWmnwyAF4FvpjK8YFdHpaqvQB+3IxCvX05vJxKZkoMDU8TShhmJVA==}
+  /rollup/3.11.0:
+    resolution: {integrity: sha512-+uWPPkpWQ2H3Qi7sNBcRfhhHJyUNgBYhG4wKe5wuGRj2m55kpo+0p5jubKNBjQODyPe6tSBE3tNpdDwEisQvAQ==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
@@ -5834,7 +5844,7 @@ packages:
     dev: true
 
   /systemjs/6.13.0:
-    resolution: {integrity: sha512-P3cgh2bpaPvAO2NE3uRp/n6hmk4xPX4DQf+UzTlCAycssKdqhp6hjw+ENWe+aUS7TogKRFtptMosTSFeC6R55g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/systemjs/-/systemjs-6.13.0.tgz}
+    resolution: {integrity: sha512-P3cgh2bpaPvAO2NE3uRp/n6hmk4xPX4DQf+UzTlCAycssKdqhp6hjw+ENWe+aUS7TogKRFtptMosTSFeC6R55g==}
     dev: true
 
   /table/6.8.1:
@@ -6032,16 +6042,16 @@ packages:
     resolution: {integrity: sha512-boAm74ubXHY7KJQZLlXrtMz52qFvpsbOxDcZOnw/Wf+LS4Mmyu7JxmzD4tDLtUQtmZECypJ0FrCz4QIe6dvKRA==}
     dev: true
 
-  /unimport/1.2.0_rollup@3.10.0:
-    resolution: {integrity: sha512-yMok/ubppurBE7Png1QH70Om96AxIoWCcfdxW3J/pziozShMc1UGpPgWpSckfo9ndAO5M74yNnRDdLAZy/gWQg==}
+  /unimport/2.0.1_rollup@3.11.0:
+    resolution: {integrity: sha512-hMeDspGrEcocahicTr0AQYUGes24FvJtOxk9QEjeEOGv+n1EdpsDiT6z8t209PWhemPg0T5w/ooTVhup2GdrFA==}
     dependencies:
-      '@rollup/pluginutils': 5.0.2_rollup@3.10.0
+      '@rollup/pluginutils': 5.0.2_rollup@3.11.0
       escape-string-regexp: 5.0.0
       fast-glob: 3.2.12
-      local-pkg: 0.4.2
+      local-pkg: 0.4.3
       magic-string: 0.27.0
       mlly: 1.1.0
-      pathe: 1.0.0
+      pathe: 1.1.0
       pkg-types: 1.0.1
       scule: 1.0.0
       strip-literal: 1.0.0
@@ -6065,8 +6075,8 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unplugin-auto-import/0.12.1_ta7poabqclszbk6bszysx4wo3y:
-    resolution: {integrity: sha512-J/3ZORq5YGKG+8D5vLLOgqaHNK77izlVN07mQ752yRLqBNDbJiwPRSnUwwYqH5N6rDay1SqnJCHaUdbJ9QMI2w==}
+  /unplugin-auto-import/0.12.2_6cqwe7wq6jqijtkao3lw26pm3a:
+    resolution: {integrity: sha512-hC4w0GZjPjmLtrxV0u10XO350V9eCtQyEyifXr7B9UGD7SvbbIvKuOcHt58Zd4FAqZJXKWoXkpr9mdhBp85Usw==}
     engines: {node: '>=14'}
     peerDependencies:
       '@vueuse/core': '*'
@@ -6075,24 +6085,24 @@ packages:
         optional: true
     dependencies:
       '@antfu/utils': 0.7.2
-      '@rollup/pluginutils': 5.0.2_rollup@3.10.0
-      '@vueuse/core': 9.11.0_vue@3.2.45
-      local-pkg: 0.4.2
+      '@rollup/pluginutils': 5.0.2_rollup@3.11.0
+      '@vueuse/core': 9.11.1_vue@3.2.45
+      local-pkg: 0.4.3
       magic-string: 0.27.0
-      unimport: 1.2.0_rollup@3.10.0
+      unimport: 2.0.1_rollup@3.11.0
       unplugin: 1.0.1
     transitivePeerDependencies:
       - rollup
     dev: true
 
-  /unplugin-element-plus/0.4.1_rollup@3.10.0+vite@4.0.4:
+  /unplugin-element-plus/0.4.1_rollup@3.11.0+vite@4.0.4:
     resolution: {integrity: sha512-x8L35sppkbtnAf+aSPXNsLPjCUrM0mWKgujqMIgrHiDQaGbpMlNnbN2kjP5CMclykNOw8fUCreEhtxPyzg8tmw==}
     engines: {node: '>=14.19.0'}
     dependencies:
       '@rollup/pluginutils': 4.2.1
       es-module-lexer: 0.10.5
       magic-string: 0.26.7
-      unplugin: 0.7.2_rollup@3.10.0+vite@4.0.4
+      unplugin: 0.7.2_rollup@3.11.0+vite@4.0.4
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -6100,7 +6110,7 @@ packages:
       - webpack
     dev: true
 
-  /unplugin-vue-components/0.22.12_rollup@3.10.0+vue@3.2.45:
+  /unplugin-vue-components/0.22.12_rollup@3.11.0+vue@3.2.45:
     resolution: {integrity: sha512-FxyzsuBvMCYPIk+8cgscGBQ345tvwVu+qY5IhE++eorkyvA4Z1TiD/HCiim+Kbqozl10i4K+z+NCa2WO2jexRA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -6111,7 +6121,7 @@ packages:
         optional: true
     dependencies:
       '@antfu/utils': 0.7.2
-      '@rollup/pluginutils': 5.0.2_rollup@3.10.0
+      '@rollup/pluginutils': 5.0.2_rollup@3.11.0
       chokidar: 3.5.3
       debug: 4.3.4
       fast-glob: 3.2.12
@@ -6126,7 +6136,7 @@ packages:
       - supports-color
     dev: true
 
-  /unplugin/0.7.2_rollup@3.10.0+vite@4.0.4:
+  /unplugin/0.7.2_rollup@3.11.0+vite@4.0.4:
     resolution: {integrity: sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==}
     peerDependencies:
       esbuild: '>=0.13'
@@ -6145,7 +6155,7 @@ packages:
     dependencies:
       acorn: 8.8.1
       chokidar: 3.5.3
-      rollup: 3.10.0
+      rollup: 3.11.0
       vite: 4.0.4_zxbrnrc4iyldik6mikh3pswz4i
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.4.6
@@ -6356,7 +6366,7 @@ packages:
       esbuild: 0.16.5
       postcss: 8.4.21
       resolve: 1.22.1
-      rollup: 3.10.0
+      rollup: 3.11.0
       sass: 1.57.1
       terser: 5.16.1
     optionalDependencies:

From e439a722108b928cf345f2ac18d512442f2349d4 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Sat, 28 Jan 2023 09:25:49 +0800
Subject: [PATCH 34/59] fix: warn

---
 yudao-ui-admin-vue3/src/utils/formCreate.ts   |  2 +-
 .../src/views/bpm/form/formEditor.vue         |  1 -
 .../src/views/bpm/form/index.vue              |  5 ++---
 .../src/views/bpm/group/index.vue             |  1 -
 .../src/views/bpm/model/index.vue             |  6 ++----
 .../src/views/bpm/oa/leave/create.vue         |  1 -
 .../src/views/bpm/oa/leave/detail.vue         |  1 -
 .../src/views/bpm/processInstance/create.vue  |  6 +++---
 .../src/views/bpm/processInstance/detail.vue  | 21 +++++++++----------
 9 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/utils/formCreate.ts b/yudao-ui-admin-vue3/src/utils/formCreate.ts
index fccc0dc75..6d7dbc7ff 100644
--- a/yudao-ui-admin-vue3/src/utils/formCreate.ts
+++ b/yudao-ui-admin-vue3/src/utils/formCreate.ts
@@ -41,7 +41,7 @@ export const setConfAndFields2 = (
   detailPreview: object,
   conf: string,
   fields: string,
-  value: object
+  value?: object
 ) => {
   // @ts-ignore
   detailPreview.value.option = JSON.parse(conf)
diff --git a/yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue b/yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue
index d53791418..52b3709dd 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/form/formEditor.vue
@@ -43,7 +43,6 @@
   </ContentWrap>
 </template>
 <script setup lang="ts" name="BpmFormEditor">
-import { reactive } from 'vue'
 import { FormInstance } from 'element-plus'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
diff --git a/yudao-ui-admin-vue3/src/views/bpm/form/index.vue b/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
index 30bd770f1..67c788e62 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
@@ -50,13 +50,12 @@
 // 业务相关的 import
 import * as FormApi from '@/api/bpm/form'
 import { allSchemas } from './form.data'
+// 表单详情相关的变量和 import
+import { setConfAndFields2 } from '@/utils/formCreate'
 
 const { t } = useI18n() // 国际化
 const router = useRouter() // 路由
 
-// 表单详情相关的变量和 import
-import { setConfAndFields2 } from '@/utils/formCreate'
-
 // 列表相关的变量
 const [registerTable, { deleteData }] = useXTable({
   allSchemas: allSchemas,
diff --git a/yudao-ui-admin-vue3/src/views/bpm/group/index.vue b/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
index d167887ed..7aa2ca4a5 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
@@ -86,7 +86,6 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
 // 业务相关的 import
 import * as UserGroupApi from '@/api/bpm/userGroup'
 import { getListSimpleUsersApi, UserVO } from '@/api/system/user'
diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
index 6a269e035..b541e0756 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
@@ -303,7 +303,6 @@
 
 <script setup lang="ts">
 // 全局相关的 import
-import { onMounted, ref, unref } from 'vue'
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 import { FormInstance, UploadInstance } from 'element-plus'
 
@@ -312,13 +311,12 @@ import { getAccessToken, getTenantId } from '@/utils/auth'
 import * as FormApi from '@/api/bpm/form'
 import * as ModelApi from '@/api/bpm/model'
 import { allSchemas, rules } from './model.data'
+import { setConfAndFields2 } from '@/utils/formCreate'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const router = useRouter() // 路由
 
-import { setConfAndFields2 } from '@/utils/formCreate'
-
 // ========== 列表相关 ==========
 const [registerTable, { reload }] = useXTable({
   allSchemas: allSchemas,
@@ -388,7 +386,7 @@ const handleAssignRule = (row) => {
 const dialogVisible = ref(false)
 const dialogTitle = ref('新建模型')
 const dialogLoading = ref(false)
-const saveForm = ref({})
+const saveForm = ref()
 const saveFormRef = ref<FormInstance>()
 
 // 设置标题
diff --git a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
index 20f3903aa..bbdeca772 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
@@ -12,7 +12,6 @@
   </ContentWrap>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
 import { FormExpose } from '@/components/Form'
 import XEUtils from 'xe-utils'
 
diff --git a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/detail.vue
index 41e011b0e..4699dc0be 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/detail.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/detail.vue
@@ -6,7 +6,6 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
 // 业务相关的 import
 import * as LeaveApi from '@/api/bpm/leave'
 import { allSchemas } from '@/views/bpm/oa/leave/leave.data'
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
index 6f54077e7..6be6747b6 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
@@ -48,6 +48,8 @@
 import { allSchemas } from './process.create'
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { ApiAttrs } from '@form-create/element-ui/types/config'
 
 const router = useRouter() // 路由
 const message = useMessage() // 消息
@@ -65,8 +67,6 @@ const [registerTable] = useXTable({
 
 // ========== 表单相关 ==========
 
-import { setConfAndFields2 } from '@/utils/formCreate'
-import { ApiAttrs } from '@form-create/element-ui/types/config'
 const fApi = ref<ApiAttrs>()
 
 // 流程表单详情
@@ -76,7 +76,7 @@ const detailForm = ref({
 })
 
 // 流程表单
-const selectProcessInstance = ref(undefined) // 选择的流程实例
+const selectProcessInstance = ref() // 选择的流程实例
 /** 处理选择流程的按钮操作 **/
 const handleSelect = async (row) => {
   // 设置选择的流程
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
index 776f3f45b..890cddb24 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
@@ -190,7 +190,6 @@
   </ContentWrap>
 </template>
 <script setup lang="ts">
-import { getCurrentInstance } from 'vue'
 import dayjs from 'dayjs'
 import * as UserApi from '@/api/system/user'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
@@ -198,6 +197,9 @@ import * as DefinitionApi from '@/api/bpm/definition'
 import * as TaskApi from '@/api/bpm/task'
 import * as ActivityApi from '@/api/bpm/activity'
 import { formatPast2 } from '@/utils/formatTime'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { ApiAttrs } from '@form-create/element-ui/types/config'
+import { useUserStore } from '@/store/modules/user'
 
 const { query } = useRoute() // 查询参数
 const message = useMessage() // 消息弹窗
@@ -207,9 +209,9 @@ const { proxy } = getCurrentInstance()
 // ========== 审批信息 ==========
 const id = query.id as unknown as number
 const processInstanceLoading = ref(false) // 流程实例的加载中
-const processInstance = ref({}) // 流程实例
-const runningTasks = ref([]) // 运行中的任务
-const auditForms = ref([]) // 审批任务的表单
+const processInstance = ref() // 流程实例
+const runningTasks = ref() // 运行中的任务
+const auditForms = ref() // 审批任务的表单
 const auditRule = reactive({
   reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
 })
@@ -244,9 +246,6 @@ const handleAudit = async (task, pass) => {
 }
 
 // ========== 申请信息 ==========
-import { setConfAndFields2 } from '@/utils/formCreate'
-import { ApiAttrs } from '@form-create/element-ui/types/config'
-import { useUserStore } from '@/store/modules/user'
 const fApi = ref<ApiAttrs>()
 const userId = useUserStore().getUser.id // 当前登录的编号
 // 流程表单详情
@@ -258,7 +257,7 @@ const detailForm = ref({
 
 // ========== 审批记录 ==========
 const tasksLoad = ref(true)
-const tasks = ref([])
+const tasks = ref()
 
 const getTimelineItemIcon = (item) => {
   if (item.result === 1) {
@@ -302,7 +301,7 @@ const updateAssigneeRules = ref({
   assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
 })
 const updateAssigneeFormRef = ref()
-const userOptions = ref([])
+const userOptions = ref()
 
 // 处理转派审批人
 const handleUpdateAssignee = (task) => {
@@ -402,8 +401,8 @@ const getDetail = () => {
           data.formVariables
         )
         nextTick().then(() => {
-          fApi.value.btn.show(false)
-          fApi.value.resetBtn.show(false)
+          fApi.value?.btn.show(false)
+          fApi.value?.resetBtn.show(false)
         })
       }
 

From 40f6fed29f61892b4ebe7b556c69e7d8217e1084 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Sat, 28 Jan 2023 09:38:03 +0800
Subject: [PATCH 35/59] update: springboot 2.7.8

---
 README.md                                        | 2 +-
 yudao-dependencies/pom.xml                       | 2 +-
 yudao-example/yudao-sso-demo-by-code/pom.xml     | 2 +-
 yudao-example/yudao-sso-demo-by-password/pom.xml | 2 +-
 yudao-server/pom.xml                             | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index c2b9997df..cd3902d2a 100644
--- a/README.md
+++ b/README.md
@@ -206,7 +206,7 @@ ps：核心功能已经实现，正在对接微信小程序中...
 
 | 框架                                                                                          | 说明               | 版本          | 学习指南                                                           |
 |---------------------------------------------------------------------------------------------|------------------|-------------|----------------------------------------------------------------|
-| [Spring Boot](https://spring.io/projects/spring-boot)                                       | 应用开发框架           | 2.7.7       | [文档](https://github.com/YunaiV/SpringBoot-Labs)                |
+| [Spring Boot](https://spring.io/projects/spring-boot)                                       | 应用开发框架           | 2.7.8       | [文档](https://github.com/YunaiV/SpringBoot-Labs)                |
 | [MySQL](https://www.mysql.com/cn/)                                                          | 数据库服务器           | 5.7 / 8.0+  |                                                                |
 | [Druid](https://github.com/alibaba/druid)                                                   | JDBC 连接池、监控组件    | 1.2.15      | [文档](http://www.iocoder.cn/Spring-Boot/datasource-pool/?yudao) |
 | [MyBatis Plus](https://mp.baomidou.com/)                                                    | MyBatis 增强工具包    | 3.5.3.1     | [文档](http://www.iocoder.cn/Spring-Boot/MyBatis/?yudao)         |
diff --git a/yudao-dependencies/pom.xml b/yudao-dependencies/pom.xml
index 51b48907d..5964f8c1c 100644
--- a/yudao-dependencies/pom.xml
+++ b/yudao-dependencies/pom.xml
@@ -16,7 +16,7 @@
     <properties>
         <revision>1.6.6-snapshot</revision>
         <!-- 统一依赖管理 -->
-        <spring.boot.version>2.7.7</spring.boot.version>
+        <spring.boot.version>2.7.8</spring.boot.version>
         <!-- Web 相关 -->
         <knife4j.version>4.0.0</knife4j.version>
         <swagger-annotations.version>1.6.8</swagger-annotations.version>
diff --git a/yudao-example/yudao-sso-demo-by-code/pom.xml b/yudao-example/yudao-sso-demo-by-code/pom.xml
index ef83df4ac..f60c21cb6 100644
--- a/yudao-example/yudao-sso-demo-by-code/pom.xml
+++ b/yudao-example/yudao-sso-demo-by-code/pom.xml
@@ -21,7 +21,7 @@
         <maven.compiler.target>8</maven.compiler.target>
         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
         <!-- 统一依赖管理 -->
-        <spring.boot.version>2.7.7</spring.boot.version>
+        <spring.boot.version>2.7.8</spring.boot.version>
     </properties>
 
     <dependencyManagement>
diff --git a/yudao-example/yudao-sso-demo-by-password/pom.xml b/yudao-example/yudao-sso-demo-by-password/pom.xml
index 391358ee2..0f7f9056a 100644
--- a/yudao-example/yudao-sso-demo-by-password/pom.xml
+++ b/yudao-example/yudao-sso-demo-by-password/pom.xml
@@ -21,7 +21,7 @@
         <maven.compiler.target>8</maven.compiler.target>
         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
         <!-- 统一依赖管理 -->
-        <spring.boot.version>2.7.7</spring.boot.version>
+        <spring.boot.version>2.7.8</spring.boot.version>
     </properties>
 
     <dependencyManagement>
diff --git a/yudao-server/pom.xml b/yudao-server/pom.xml
index 03cd5c9f6..546eff421 100644
--- a/yudao-server/pom.xml
+++ b/yudao-server/pom.xml
@@ -112,7 +112,7 @@
             <plugin>
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-maven-plugin</artifactId>
-                <version>2.7.7</version> <!-- 如果 spring.boot.version 版本修改，则这里也要跟着修改 -->
+                <version>2.7.8</version> <!-- 如果 spring.boot.version 版本修改，则这里也要跟着修改 -->
                 <configuration>
                     <fork>true</fork>
                 </configuration>

From 89c366be689859090f3c10eec35e63ad3c49581e Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Sat, 28 Jan 2023 09:53:43 +0800
Subject: [PATCH 36/59] =?UTF-8?q?=E5=B5=8C=E5=85=A5bpmn=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-ui-admin-vue3/package.json              |   14 +-
 .../package/designer/ProcessDesigner.vue      |  671 +++++++++
 .../package/designer/ProcessViewer.vue        |  526 +++++++
 .../package/designer/index.js                 |    8 +
 .../package/designer/index2.js                |    8 +
 .../plugins/content-pad/contentPadProvider.js |  390 ++++++
 .../designer/plugins/content-pad/index.js     |    6 +
 .../package/designer/plugins/defaultEmpty.js  |   24 +
 .../descriptor/activitiDescriptor.json        | 1071 +++++++++++++++
 .../plugins/descriptor/camundaDescriptor.json | 1087 +++++++++++++++
 .../descriptor/flowableDescriptor.json        | 1210 +++++++++++++++++
 .../activiti/activitiExtension.js             |   79 ++
 .../extension-moddle/activiti/index.js        |   11 +
 .../extension-moddle/camunda/extension.js     |  157 +++
 .../plugins/extension-moddle/camunda/index.js |    8 +
 .../flowable/flowableExtension.js             |   80 ++
 .../extension-moddle/flowable/index.js        |   10 +
 .../designer/plugins/palette/CustomPalette.js |  157 +++
 .../package/designer/plugins/palette/index.js |   22 +
 .../plugins/palette/paletteProvider.js        |  160 +++
 .../plugins/translate/customTranslate.js      |   41 +
 .../package/designer/plugins/translate/zh.js  |  238 ++++
 .../bpmnProcessDesigner/package/index.ts      |   37 +
 .../package/palette/ProcessPalette.vue        |   41 +
 .../package/penal/PropertiesPanel.vue         |  204 +++
 .../package/penal/base/ElementBaseInfo.vue    |  162 +++
 .../penal/flow-condition/FlowCondition.vue    |  188 +++
 .../package/penal/form/ElementForm.vue        |  456 +++++++
 .../package/penal/index.js                    |    7 +
 .../penal/listeners/ElementListeners.vue      |  415 ++++++
 .../penal/listeners/UserTaskListeners.vue     |  456 +++++++
 .../package/penal/listeners/template.js       |  177 +++
 .../package/penal/listeners/utilSelf.js       |   62 +
 .../multi-instance/ElementMultiInstance.vue   |  237 ++++
 .../penal/other/ElementOtherConfig.vue        |   55 +
 .../penal/properties/ElementProperties.vue    |  172 +++
 .../penal/signal-message/SignalAndMessage.vue |  120 ++
 .../package/penal/task/ElementTask.vue        |   85 ++
 .../task/task-components/ReceiveTask.vue      |  123 ++
 .../penal/task/task-components/ScriptTask.vue |   98 ++
 .../penal/task/task-components/UserTask.vue   |   97 ++
 .../package/theme/element-variables.scss      |   70 +
 .../package/theme/index.scss                  |    2 +
 .../package/theme/process-designer.scss       |  161 +++
 .../package/theme/process-panel.scss          |  107 ++
 .../bpmnProcessDesigner/package/utils.js      |   69 +
 .../src/highlight/index.js                    |    5 +
 .../modules/custom-renderer/CustomRenderer.js |   14 +
 .../src/modules/custom-renderer/index.js      |    6 +
 .../src/modules/rules/CustomRules.js          |   16 +
 .../src/modules/rules/index.js                |    6 +
 .../bpmnProcessDesigner/src/translations.ts   |   25 +
 .../src/utils/directive/clickOutSide.js       |   39 +
 .../bpmnProcessDesigner/src/utils/index.js    |   10 +
 .../bpmnProcessDesigner/src/utils/log.js      |   63 +
 .../bpmnProcessDesigner/src/utils/xml2json.js |   50 +
 yudao-ui-admin-vue3/src/main.ts               |    9 +
 .../src/router/modules/remaining.ts           |   12 +
 .../src/types/auto-components.d.ts            |   30 +-
 .../src/views/bpm/model/modelEditor.vue       |  208 +++
 60 files changed, 10057 insertions(+), 15 deletions(-)
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index2.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/contentPadProvider.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/index.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/defaultEmpty.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/activitiDescriptor.json
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/camundaDescriptor.json
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/index.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/extension.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/index.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/index.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/palette/CustomPalette.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/palette/index.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/palette/paletteProvider.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/translate/customTranslate.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/translate/zh.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/index.ts
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/index.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/template.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/element-variables.scss
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/index.scss
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/process-designer.scss
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/process-panel.scss
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/highlight/index.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/custom-renderer/CustomRenderer.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/custom-renderer/index.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/rules/CustomRules.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/rules/index.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/translations.ts
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/directive/clickOutSide.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/index.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/log.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/xml2json.js
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue

diff --git a/yudao-ui-admin-vue3/package.json b/yudao-ui-admin-vue3/package.json
index 7da9c5ff1..979df6977 100644
--- a/yudao-ui-admin-vue3/package.json
+++ b/yudao-ui-admin-vue3/package.json
@@ -54,7 +54,15 @@
     "vue-types": "^5.0.2",
     "vxe-table": "^4.3.9",
     "web-storage-cache": "^1.1.1",
-    "xe-utils": "^3.5.7"
+    "xe-utils": "^3.5.7",
+    "bpmn-js-token-simulation": "^0.10.0",
+    "camunda-bpmn-moddle": "^7.0.1",
+    "fast-xml-parser": "^4.0.13",
+    "highlight.js": "^9.18.5",
+    "min-dash": "^4.0.0",
+    "vue3-treeselect": "^0.1.10",
+    "vuedraggable": "^4.1.0",
+    "xml-js": "^1.6.11"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.4.2",
@@ -76,6 +84,8 @@
     "autoprefixer": "^10.4.13",
     "consola": "^2.15.3",
     "eslint": "^8.32.0",
+    "bpmn-js": "^8.9.0",
+    "bpmn-js-properties-panel": "^0.46.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-define-config": "^1.14.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -123,4 +133,4 @@
     "url": "https://gitee.com/zhijiantianya/ruoyi-vue-pro/issues"
   },
   "homepage": "https://gitee.com/zhijiantianya/ruoyi-vue-pro"
-}
+}
\ No newline at end of file
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
new file mode 100644
index 000000000..5ef0e6c1e
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -0,0 +1,671 @@
+<template>
+  <div class="my-process-designer">
+    <div class="my-process-designer__header">
+      <slot name="control-header"></slot>
+      <template v-if="!$slots['control-header']">
+        <ElButtonGroup key="file-control">
+          <XButton preIcon="ep:folder-opened" title="打开文件" @click="refFile.click()" />
+          <el-tooltip effect="light" placement="bottom">
+            <template #content>
+              <XButton type="text" title="下载为XML文件" @click="downloadProcessAsXml()" />
+              <br />
+
+              <XButton type="text" title="下载为SVG文件" @click="downloadProcessAsSvg()" />
+              <br />
+
+              <XButton type="text" title="下载为BPMN文件" @click="downloadProcessAsBpmn()" />
+            </template>
+            <XButton title="下载文件" preIcon="ep:download" />
+          </el-tooltip>
+          <el-tooltip effect="light">
+            <XButton preIcon="ep:view" title="浏览" />
+            <template #content>
+              <el-button type="text" @click="previewProcessXML">预览XML</el-button>
+              <br />
+              <el-button type="text" @click="previewProcessJson">预览JSON</el-button>
+            </template>
+          </el-tooltip>
+          <el-tooltip
+            v-if="props.simulation"
+            effect="light"
+            :content="simulationStatus ? '退出模拟' : '开启模拟'"
+          >
+            <XButton preIcon="ep:cpu" title="模拟" @click="processSimulation" />
+          </el-tooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="align-control">
+          <el-tooltip effect="light" content="向左对齐">
+            <!-- <el-button
+              class="align align-left"
+              icon="el-icon-s-data"
+              @click="elementsAlign('left')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-bottom"
+              @click="elementsAlign('left')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="向右对齐">
+            <!-- <el-button
+              class="align align-right"
+              icon="el-icon-s-data"
+              @click="elementsAlign('right')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-top"
+              @click="elementsAlign('right')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="向上对齐">
+            <!-- <el-button
+              class="align align-top"
+              icon="el-icon-s-data"
+              @click="elementsAlign('top')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-left"
+              @click="elementsAlign('top')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="向下对齐">
+            <!-- <el-button
+              class="align align-bottom"
+              icon="el-icon-s-data"
+              @click="elementsAlign('bottom')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-right"
+              @click="elementsAlign('bottom')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="水平居中">
+            <!-- <el-button
+              class="align align-center"
+              icon="el-icon-s-data"
+              @click="elementsAlign('center')"
+            /> -->
+            <!-- class="align align-center" -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-center"
+              @click="elementsAlign('center')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="垂直居中">
+            <!-- <el-button
+              class="align align-middle"
+              icon="el-icon-s-data"
+              @click="elementsAlign('middle')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-middle"
+              @click="elementsAlign('middle')"
+            />
+          </el-tooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="scale-control">
+          <el-tooltip effect="light" content="缩小视图">
+            <!-- <el-button
+              :disabled="defaultZoom < 0.2"
+              icon="el-icon-zoom-out"
+              @click="processZoomOut()"
+            /> -->
+            <XButton
+              preIcon="ep:zoom-out"
+              @click="processZoomOut()"
+              :disabled="defaultZoom < 0.2"
+            />
+          </el-tooltip>
+          <el-button>{{ Math.floor(defaultZoom * 10 * 10) + '%' }}</el-button>
+          <el-tooltip effect="light" content="放大视图">
+            <!-- <el-button
+              :disabled="defaultZoom > 4"
+              icon="el-icon-zoom-in"
+              @click="processZoomIn()"
+            /> -->
+            <XButton preIcon="ep:zoom-in" @click="processZoomIn()" :disabled="defaultZoom > 4" />
+          </el-tooltip>
+          <el-tooltip effect="light" content="重置视图并居中">
+            <!-- <el-button icon="el-icon-c-scale-to-original" @click="processReZoom()" /> -->
+            <XButton preIcon="ep:scale-to-original" @click="processReZoom()" />
+          </el-tooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="stack-control">
+          <el-tooltip effect="light" content="撤销">
+            <!-- <el-button :disabled="!revocable" icon="el-icon-refresh-left" @click="processUndo()" /> -->
+            <XButton preIcon="ep:refresh-left" @click="processUndo()" :disabled="!revocable" />
+          </el-tooltip>
+          <el-tooltip effect="light" content="恢复">
+            <!-- <el-button
+              :disabled="!recoverable"
+              icon="el-icon-refresh-right"
+              @click="processRedo()"
+            /> -->
+            <XButton preIcon="ep:refresh-right" @click="processRedo()" :disabled="!recoverable" />
+          </el-tooltip>
+          <el-tooltip effect="light" content="重新绘制">
+            <!-- <el-button icon="el-icon-refresh" @click="processRestart" /> -->
+            <XButton preIcon="ep:refresh" @click="processRestart()" />
+          </el-tooltip>
+        </ElButtonGroup>
+        <XButton
+          preIcon="ep:plus"
+          title="保存模型"
+          @click="processSave"
+          :type="props.headerButtonType"
+          :disabled="simulationStatus"
+        />
+      </template>
+      <!-- 用于打开本地文件-->
+      <input
+        type="file"
+        id="files"
+        ref="refFile"
+        style="display: none"
+        accept=".xml, .bpmn"
+        @change="importLocalFile"
+      />
+    </div>
+    <div class="my-process-designer__container">
+      <div
+        class="my-process-designer__canvas"
+        ref="bpmnCanvas"
+        id="bpmnCanvas"
+        style="width: 1680px; height: 800px"
+      ></div>
+      <!-- <div id="js-properties-panel" class="panel"></div> -->
+      <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
+    </div>
+    <el-dialog
+      title="预览"
+      width="80%"
+      v-model="previewModelVisible"
+      append-to-body
+      destroy-on-close
+    >
+      <pre>
+        <!-- <code class="hljs" v-html="highlightedCode(previewType, previewResult)"></code> -->
+        {{ previewResult }}
+      </pre>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="MyProcessDesigner">
+// 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 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+// import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右侧框样式
+import { ElTooltip, ElButtonGroup, ElDialog, ElButton, ElMessage, ElMessageBox } from 'element-plus'
+import { computed, onBeforeMount, onBeforeUnmount, onMounted, provide, ref } from 'vue'
+import BpmnModeler from 'bpmn-js/lib/Modeler'
+import DefaultEmptyXML from './plugins/defaultEmpty'
+// 翻译方法
+import customTranslate from './plugins/translate/customTranslate'
+import translationsCN from './plugins/translate/zh'
+// 模拟流转流程
+import tokenSimulation from 'bpmn-js-token-simulation'
+// 标签解析构建器
+// import bpmnPropertiesProvider from "bpmn-js-properties-panel/lib/provider/bpmn";
+// import propertiesPanelModule from 'bpmn-js-properties-panel'
+// import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
+// 标签解析 Moddle
+import camundaModdleDescriptor from './plugins/descriptor/camundaDescriptor.json'
+import activitiModdleDescriptor from './plugins/descriptor/activitiDescriptor.json'
+import flowableModdleDescriptor from './plugins/descriptor/flowableDescriptor.json'
+// 标签解析 Extension
+import camundaModdleExtension from './plugins/extension-moddle/camunda'
+import activitiModdleExtension from './plugins/extension-moddle/activiti'
+import flowableModdleExtension from './plugins/extension-moddle/flowable'
+// 引入json转换与高亮
+// import xml2js from 'xml-js'
+import xml2js from 'fast-xml-parser'
+
+// 代码高亮插件
+// import hljs from 'highlight.js/lib/highlight'
+// import 'highlight.js/styles/github-gist.css'
+// hljs.registerLanguage('xml', 'highlight.js/lib/languages/xml')
+// hljs.registerLanguage('json', 'highlight.js/lib/languages/json')
+// const eventName = reactive({
+//   name: ''
+// })
+const bpmnCanvas = ref()
+const refFile = ref()
+const emit = defineEmits([
+  'destroy',
+  'init-finished',
+  'save',
+  'commandStack-changed',
+  'input',
+  'change',
+  'canvas-viewbox-changed',
+  // eventName.name
+  'element-click'
+])
+
+const props = defineProps({
+  value: String, // xml 字符串
+  // valueWatch: true, // xml 字符串的 watch 状态
+  processId: String, // 流程 key 标识
+  processName: String, // 流程 name 名字
+  formId: Number, // 流程 form 表单编号
+  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: 'camunda'
+  },
+  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
+  }
+})
+
+provide('configGlobal', props)
+let bpmnModeler = null
+const defaultZoom = ref(1)
+const previewModelVisible = ref(false)
+const simulationStatus = ref(false)
+const previewResult = ref('')
+const previewType = ref('xml')
+const recoverable = ref(false)
+const revocable = ref(false)
+const additionalModules = computed(() => {
+  console.log(props.additionalModel, 'additionalModel')
+  const Modules = []
+  // 仅保留用户自定义扩展模块
+  if (props.onlyCustomizeAddi) {
+    if (Object.prototype.toString.call(props.additionalModel) == '[object Array]') {
+      return props.additionalModel || []
+    }
+    return [props.additionalModel]
+  }
+
+  // 插入用户自定义扩展模块
+  if (Object.prototype.toString.call(props.additionalModel) == '[object Array]') {
+    Modules.push(...props.additionalModel)
+  } else {
+    props.additionalModel && Modules.push(props.additionalModel)
+  }
+
+  // 翻译模块
+  const TranslateModule = {
+    translate: ['value', customTranslate(props.translations || translationsCN)]
+  }
+  Modules.push(TranslateModule)
+
+  // 模拟流转模块
+  if (props.simulation) {
+    Modules.push(tokenSimulation)
+  }
+
+  // 根据需要的流程类型设置扩展元素构建模块
+  // if (this.prefix === "bpmn") {
+  //   Modules.push(bpmnModdleExtension);
+  // }
+  console.log(props.prefix, 'props.prefix ')
+  if (props.prefix === 'camunda') {
+    Modules.push(camundaModdleExtension)
+  }
+  if (props.prefix === 'flowable') {
+    Modules.push(flowableModdleExtension)
+  }
+  if (props.prefix === 'activiti') {
+    Modules.push(activitiModdleExtension)
+  }
+
+  return Modules
+})
+const moddleExtensions = computed(() => {
+  console.log(props.onlyCustomizeModdle, 'props.onlyCustomizeModdle')
+  console.log(props.moddleExtension, 'props.moddleExtension')
+  console.log(props.prefix, 'props.prefix')
+  const Extensions = {}
+  // 仅使用用户自定义模块
+  if (props.onlyCustomizeModdle) {
+    return props.moddleExtension || null
+  }
+
+  // 插入用户自定义模块
+  if (props.moddleExtension) {
+    for (let key in props.moddleExtension) {
+      Extensions[key] = props.moddleExtension[key]
+    }
+  }
+
+  // 根据需要的 "流程类型" 设置 对应的解析文件
+  if (props.prefix === 'activiti') {
+    Extensions.activiti = activitiModdleDescriptor
+  }
+  if (props.prefix === 'flowable') {
+    Extensions.flowable = flowableModdleDescriptor
+  }
+  if (props.prefix === 'camunda') {
+    Extensions.camunda = camundaModdleDescriptor
+  }
+  return Extensions
+})
+console.log(additionalModules, 'additionalModules()')
+console.log(moddleExtensions, 'moddleExtensions()')
+const initBpmnModeler = () => {
+  if (bpmnModeler) return
+  let data = document.getElementById('bpmnCanvas')
+  console.log(data, 'data')
+  console.log(props.keyboard, 'props.keyboard')
+  console.log(additionalModules, 'additionalModules()')
+  console.log(moddleExtensions, 'moddleExtensions()')
+
+  bpmnModeler = new BpmnModeler({
+    // container: this.$refs['bpmn-canvas'],
+    // container: getCurrentInstance(),
+    // container: needClass,
+    // container: bpmnCanvas.value,
+    container: data,
+    // width: '100%',
+    // 添加控制板
+    // propertiesPanel: {
+    // parent: '#js-properties-panel'
+    // },
+    keyboard: props.keyboard ? { bindTo: document } : null,
+    // additionalModules: additionalModules.value,
+    additionalModules: additionalModules.value,
+    moddleExtensions: moddleExtensions.value
+
+    // additionalModules: [
+    // additionalModules.value
+    // propertiesPanelModule,
+    // propertiesProviderModule
+    // propertiesProviderModule
+    // ],
+    // moddleExtensions: { camunda: moddleExtensions.value }
+  })
+
+  // bpmnModeler.createDiagram()
+
+  console.log(bpmnModeler, 'bpmnModeler111111')
+  emit('init-finished', bpmnModeler)
+  initModelListeners()
+}
+
+const initModelListeners = () => {
+  const EventBus = bpmnModeler.get('eventBus')
+  console.log(EventBus, 'EventBus')
+  // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
+  props.events.forEach((event) => {
+    EventBus.on(event, function (eventObj) {
+      let eventName = event.replace(/\./g, '-')
+      // eventName.name = eventName
+      let element = eventObj ? eventObj.element : null
+      console.log(eventName, 'eventName')
+      console.log(element, 'element')
+      emit('element-click', element, eventObj)
+      // emit(eventName, element, eventObj)
+    })
+  })
+  // 监听图形改变返回xml
+  EventBus.on('commandStack.changed', async (event) => {
+    try {
+      recoverable.value = bpmnModeler.get('commandStack').canRedo()
+      revocable.value = bpmnModeler.get('commandStack').canUndo()
+      let { xml } = await bpmnModeler.saveXML({ format: true })
+      emit('commandStack-changed', event)
+      emit('input', xml)
+      emit('change', xml)
+    } catch (e) {
+      console.error(`[Process Designer Warn]: ${e.message || e}`)
+    }
+  })
+  // 监听视图缩放变化
+  bpmnModeler.on('canvas.viewbox.changed', ({ viewbox }) => {
+    emit('canvas-viewbox-changed', { viewbox })
+    const { scale } = viewbox
+    defaultZoom.value = Math.floor(scale * 100) / 100
+  })
+}
+/* 创建新的流程图 */
+const createNewDiagram = async (xml) => {
+  console.log(xml, '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 {
+    // console.log(xmlString, 'xmlString')
+    // console.log(this.bpmnModeler.importXML);
+    let { warnings } = await bpmnModeler.importXML(xmlString)
+    console.log(warnings, 'warnings')
+    if (warnings && warnings.length) {
+      warnings.forEach((warn) => console.warn(warn))
+    }
+  } catch (e) {
+    console.error(`[Process Designer Warn]: ${e?.message || e}`)
+  }
+}
+
+// 下载流程图到本地
+const downloadProcess = async (type, name) => {
+  try {
+    // 按需要类型创建文件并下载
+    if (type === 'xml' || type === 'bpmn') {
+      const { err, xml } = await 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 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 对象
+    }
+  }
+}
+
+// 根据所需类型进行转码并返回下载地址
+const 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
+  }
+}
+
+// 加载本地文件
+const importLocalFile = () => {
+  const file = refFile.value.files[0]
+  const reader = new FileReader()
+  reader.readAsText(file)
+  reader.onload = function () {
+    let xmlStr = this.result
+    createNewDiagram(xmlStr)
+  }
+}
+/* ------------------------------------------------ refs methods ------------------------------------------------------ */
+const downloadProcessAsXml = () => {
+  downloadProcess('xml')
+}
+const downloadProcessAsBpmn = () => {
+  downloadProcess('bpmn')
+}
+const downloadProcessAsSvg = () => {
+  downloadProcess('svg')
+}
+const processSimulation = () => {
+  simulationStatus.value = !simulationStatus.value
+  console.log(bpmnModeler.get('toggleMode', 'strict'), "bpmnModeler.get('toggleMode')")
+  props.simulation && bpmnModeler.get('toggleMode', 'strict').toggleMode()
+}
+const processRedo = () => {
+  bpmnModeler.get('commandStack').redo()
+}
+const processUndo = () => {
+  bpmnModeler.get('commandStack').undo()
+}
+const processZoomIn = (zoomStep = 0.1) => {
+  let newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100
+  if (newZoom > 4) {
+    throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
+  }
+  defaultZoom.value = newZoom
+  bpmnModeler.get('canvas').zoom(defaultZoom.value)
+}
+const processZoomOut = (zoomStep = 0.1) => {
+  let newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100
+  if (newZoom < 0.2) {
+    throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2')
+  }
+  defaultZoom.value = newZoom
+  bpmnModeler.get('canvas').zoom(defaultZoom.value)
+}
+// const 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')
+//   }
+//   defaultZoom = newZoom
+//   bpmnModeler.get('canvas').zoom(newZoom)
+// }
+const processReZoom = () => {
+  defaultZoom.value = 1
+  bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
+}
+const processRestart = () => {
+  recoverable.value = false
+  revocable.value = false
+  createNewDiagram(null)
+}
+const elementsAlign = (align) => {
+  const Align = bpmnModeler.get('alignElements')
+  const Selection = bpmnModeler.get('selection')
+  const SelectedElements = Selection.get()
+  console.log(SelectedElements, 'SelectedElements')
+  if (!SelectedElements || SelectedElements.length <= 1) {
+    ElMessage.warning('请按住 Shift 键选择多个元素对齐')
+    // alert('请按住 Ctrl 键选择多个元素对齐')
+    return
+  }
+  ElMessageBox.confirm('自动对齐可能造成图形变形，是否继续？', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    Align.trigger(SelectedElements, align)
+  })
+}
+/*-----------------------------    方法结束     ---------------------------------*/
+const previewProcessXML = () => {
+  console.log(bpmnModeler.saveXML, 'bpmnModeler')
+  bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+    console.log(xml, 'xml111111')
+    previewResult.value = xml
+    previewType.value = 'xml'
+    previewModelVisible.value = true
+  })
+}
+const previewProcessJson = () => {
+  bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+    console.log(xml, 'xml')
+    const parser = new xml2js.XMLParser()
+    let jObj = parser.parse(xml)
+    // console.log(jObj, 'jObjjObjjObjjObjjObj')
+    // const builder = new xml2js.XMLBuilder(xml)
+    // const xmlContent = builder
+    // console.log(xmlContent, 'xmlContent')
+    // console.log(xml2js, 'convertconvertconvert')
+    previewResult.value = jObj
+    // previewResult.value = convert.xml2json(xml,  {explicitArray : false},{ spaces: 2 })
+    previewType.value = 'json'
+    previewModelVisible.value = true
+  })
+}
+/* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
+const processSave = async () => {
+  const { err, xml } = await bpmnModeler.saveXML()
+  // 读取异常时抛出异常
+  if (err) {
+    // this.$modal.msgError('保存模型失败，请重试！')
+    alert('保存模型失败，请重试！')
+    return
+  }
+  // 触发 save 事件
+  emit('save', xml)
+}
+/** 高亮显示 */
+// const highlightedCode = (previewType, previewResult) => {
+//   console.log(previewType, 'previewType, previewResult')
+//   console.log(previewResult, 'previewType, previewResult')
+//   console.log(hljs.highlight, 'hljs.highlight')
+//   const result = hljs.highlight(previewType, previewResult.value || '', true)
+//   return result.value || '&nbsp;'
+// }
+onBeforeMount(() => {
+  console.log(props, 'propspropspropsprops')
+})
+onMounted(() => {
+  initBpmnModeler()
+  createNewDiagram(props.value)
+})
+onBeforeUnmount(() => {
+  // this.$once('hook:beforeDestroy', () => {
+  // })
+  if (bpmnModeler) bpmnModeler.destroy()
+  emit('destroy', bpmnModeler)
+  bpmnModeler = null
+})
+</script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
new file mode 100644
index 000000000..e222ace18
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -0,0 +1,526 @@
+<template>
+  <div class="my-process-designer">
+    <div class="my-process-designer__container">
+      <div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="MyProcessViewer">
+import BpmnViewer from 'bpmn-js/lib/Viewer'
+import DefaultEmptyXML from './plugins/defaultEmpty'
+import { onMounted } from 'vue'
+import { onBeforeUnmount, provide, ref, watch } from 'vue'
+const props = defineProps({
+  value: {
+    // BPMN XML 字符串
+    type: String
+  },
+  prefix: {
+    // 使用哪个引擎
+    type: String,
+    default: 'camunda'
+  },
+  activityData: {
+    // 活动的数据。传递时，可高亮流程
+    type: Array,
+    default: () => []
+  },
+  processInstanceData: {
+    // 流程实例的数据。传递时，可展示流程发起人等信息
+    type: Object
+  },
+  taskData: {
+    // 任务实例的数据。传递时，可展示 UserTask 审核相关的信息
+    type: Array,
+    default: () => []
+  }
+})
+
+provide('configGlobal', props)
+
+const xml = ref('')
+const activityList = ref([])
+const processInstance = ref(undefined)
+const taskList = ref([])
+const bpmnCanvas = ref()
+// const element = ref()
+const elementOverlayIds = ref()
+const overlays = ref()
+
+const initBpmnModeler = () => {
+  if (bpmnModeler) return
+  bpmnModeler = new BpmnViewer({
+    container: bpmnCanvas.value,
+    bpmnRenderer: {}
+  })
+}
+
+/* 创建新的流程图 */
+const createNewDiagram = async (xml) => {
+  // 将字符串转换成图显示出来
+  let newId = `Process_${new Date().getTime()}`
+  let newName = `业务流程_${new Date().getTime()}`
+  let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix)
+  try {
+    // console.log(this.bpmnModeler.importXML);
+    let { warnings } = await bpmnModeler.importXML(xmlString)
+    if (warnings && warnings.length) {
+      warnings.forEach((warn) => console.warn(warn))
+    }
+    // 高亮流程图
+    await highlightDiagram()
+    const canvas = bpmnModeler.get('canvas')
+    canvas.zoom('fit-viewport', 'auto')
+  } catch (e) {
+    console.error(e)
+    // console.error(`[Process Designer Warn]: ${e?.message || e}`);
+  }
+}
+/* 高亮流程图 */
+// TODO 芋艿：如果多个 endActivity 的话，目前的逻辑可能有一定的问题。https://www.jdon.com/workflow/multi-events.html
+const highlightDiagram = async () => {
+  const activityList = activityList.value
+  if (activityList.length === 0) {
+    return
+  }
+  // 参考自 https://gitee.com/tony2y/RuoYi-flowable/blob/master/ruoyi-ui/src/components/Process/index.vue#L222 实现
+  // 再次基础上，增加不同审批结果的颜色等等
+  let canvas = bpmnModeler.get('canvas')
+  let todoActivity = activityList.find((m) => !m.endTime) // 找到待办的任务
+  let endActivity = activityList[activityList.length - 1] // 获得最后一个任务
+  // debugger
+  // console.log(this.bpmnModeler.getDefinitions().rootElements[0].flowElements);
+  bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach((n) => {
+    let activity = activityList.find((m) => m.key === n.id) // 找到对应的活动
+    if (!activity) {
+      return
+    }
+    if (n.$type === 'bpmn:UserTask') {
+      // 用户任务
+      // 处理用户任务的高亮
+      const task = taskList.value.find((m) => m.id === activity.taskId) // 找到活动对应的 taskId
+      if (!task) {
+        return
+      }
+      // 高亮任务
+      canvas.addMarker(n.id, getResultCss(task.result))
+
+      // 如果非通过，就不走后面的线条了
+      if (task.result !== 2) {
+        return
+      }
+      // 处理 outgoing 出线
+      const outgoing = getActivityOutgoing(activity)
+      outgoing?.forEach((nn) => {
+        // debugger
+        let targetActivity = activityList.find((m) => m.key === nn.targetRef.id)
+        // 如果目标活动存在，则根据该活动是否结束，进行【bpmn:SequenceFlow】连线的高亮设置
+        if (targetActivity) {
+          canvas.addMarker(nn.id, targetActivity.endTime ? 'highlight' : 'highlight-todo')
+        } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
+          // TODO 芋艿：这个流程，暂时没走到过
+          canvas.addMarker(nn.id, activity.endTime ? 'highlight' : 'highlight-todo')
+          canvas.addMarker(nn.targetRef.id, activity.endTime ? 'highlight' : 'highlight-todo')
+        } else if (nn.targetRef.$type === 'bpmn:EndEvent') {
+          // TODO 芋艿：这个流程，暂时没走到过
+          if (!todoActivity && endActivity.key === n.id) {
+            canvas.addMarker(nn.id, 'highlight')
+            canvas.addMarker(nn.targetRef.id, 'highlight')
+          }
+          if (!activity.endTime) {
+            canvas.addMarker(nn.id, 'highlight-todo')
+            canvas.addMarker(nn.targetRef.id, 'highlight-todo')
+          }
+        }
+      })
+    } else if (n.$type === 'bpmn:ExclusiveGateway') {
+      // 排它网关
+      // 设置【bpmn:ExclusiveGateway】排它网关的高亮
+      canvas.addMarker(n.id, getActivityHighlightCss(activity))
+      // 查找需要高亮的连线
+      let matchNN = undefined
+      let matchActivity = undefined
+      n.outgoing?.forEach((nn) => {
+        let targetActivity = activityList.find((m) => m.key === nn.targetRef.id)
+        if (!targetActivity) {
+          return
+        }
+        // 特殊判断 endEvent 类型的原因，ExclusiveGateway 可能后续连有 2 个路径：
+        //  1. 一个是 UserTask => EndEvent
+        //  2. 一个是 EndEvent
+        // 在选择路径 1 时，其实 EndEvent 可能也存在，导致 1 和 2 都高亮，显然是不正确的。
+        // 所以，在 matchActivity 为 EndEvent 时，需要进行覆盖~~
+        if (!matchActivity || matchActivity.type === 'endEvent') {
+          matchNN = nn
+          matchActivity = targetActivity
+        }
+      })
+      if (matchNN && matchActivity) {
+        canvas.addMarker(matchNN.id, getActivityHighlightCss(matchActivity))
+      }
+    } else if (n.$type === 'bpmn:ParallelGateway') {
+      // 并行网关
+      // 设置【bpmn:ParallelGateway】并行网关的高亮
+      canvas.addMarker(n.id, getActivityHighlightCss(activity))
+      n.outgoing?.forEach((nn) => {
+        // 获得连线是否有指向目标。如果有，则进行高亮
+        const targetActivity = activityList.find((m) => m.key === nn.targetRef.id)
+        if (targetActivity) {
+          canvas.addMarker(nn.id, getActivityHighlightCss(targetActivity)) // 高亮【bpmn:SequenceFlow】连线
+          // 高亮【...】目标。其中 ... 可以是 bpm:UserTask、也可以是其它的。当然，如果是 bpm:UserTask 的话，其实不做高亮也没问题，因为上面有逻辑做了这块。
+          canvas.addMarker(nn.targetRef.id, getActivityHighlightCss(targetActivity))
+        }
+      })
+    } else if (n.$type === 'bpmn:StartEvent') {
+      // 开始节点
+      n.outgoing?.forEach((nn) => {
+        // outgoing 例如说【bpmn:SequenceFlow】连线
+        // 获得连线是否有指向目标。如果有，则进行高亮
+        let targetActivity = activityList.find((m) => m.key === nn.targetRef.id)
+        if (targetActivity) {
+          canvas.addMarker(nn.id, 'highlight') // 高亮【bpmn:SequenceFlow】连线
+          canvas.addMarker(n.id, 'highlight') // 高亮【bpmn:StartEvent】开始节点（自己）
+        }
+      })
+    } else if (n.$type === 'bpmn:EndEvent') {
+      // 结束节点
+      if (!processInstance.value || processInstance.value.result === 1) {
+        return
+      }
+      canvas.addMarker(n.id, getResultCss(processInstance.value.result))
+    } else if (n.$type === 'bpmn:ServiceTask') {
+      //服务任务
+      if (activity.startTime > 0 && activity.endTime === 0) {
+        //进入执行，标识进行色
+        canvas.addMarker(n.id, getResultCss(1))
+      }
+      if (activity.endTime > 0) {
+        // 执行完成，节点标识完成色, 所有outgoing标识完成色。
+        canvas.addMarker(n.id, getResultCss(2))
+        const outgoing = getActivityOutgoing(activity)
+        outgoing?.forEach((out) => {
+          canvas.addMarker(out.id, getResultCss(2))
+        })
+      }
+    }
+  })
+}
+const getActivityHighlightCss = (activity) => {
+  return activity.endTime ? 'highlight' : 'highlight-todo'
+}
+const getResultCss = (result) => {
+  if (result === 1) {
+    // 审批中
+    return 'highlight-todo'
+  } else if (result === 2) {
+    // 已通过
+    return 'highlight'
+  } else if (result === 3) {
+    // 不通过
+    return 'highlight-reject'
+  } else if (result === 4) {
+    // 已取消
+    return 'highlight-cancel'
+  }
+  return ''
+}
+
+const getActivityOutgoing = (activity) => {
+  // 如果有 outgoing，则直接使用它
+  if (activity.outgoing && activity.outgoing.length > 0) {
+    return activity.outgoing
+  }
+  // 如果没有，则遍历获得起点为它的【bpmn:SequenceFlow】节点们。原因是：bpmn-js 的 UserTask 拿不到 outgoing
+  const flowElements = bpmnModeler.getDefinitions().rootElements[0].flowElements
+  const outgoing = []
+  flowElements.forEach((item) => {
+    if (item.$type !== 'bpmn:SequenceFlow') {
+      return
+    }
+    if (item.sourceRef.id === activity.key) {
+      outgoing.push(item)
+    }
+  })
+  return outgoing
+}
+const initModelListeners = () => {
+  const EventBus = bpmnModeler.get('eventBus')
+  // 注册需要的监听事件
+  EventBus.on('element.hover', function (eventObj) {
+    let element = eventObj ? eventObj.element : null
+    elementHover(element)
+  })
+  EventBus.on('element.out', function (eventObj) {
+    let element = eventObj ? eventObj.element : null
+    elementOut(element)
+  })
+}
+// 流程图的元素被 hover
+const elementHover = (element) => {
+  element.value = element
+  !elementOverlayIds.value && (elementOverlayIds.value = {})
+  !overlays.value && (overlays.value = bpmnModeler.get('overlays'))
+  // 展示信息
+  const activity = activityList.value.find((m) => m.key === element.value.id)
+  if (!activity) {
+    return
+  }
+  if (!elementOverlayIds.value[element.value.id] && element.value.type !== 'bpmn:Process') {
+    let html = `<div class="element-overlays">
+            <p>Elemet id: ${element.value.id}</p>
+            <p>Elemet type: ${element.value.type}</p>
+          </div>` // 默认值
+    if (element.value.type === 'bpmn:StartEvent' && processInstance.value) {
+      html = `<p>发起人：${processInstance.value.startUser.nickname}</p>
+                  <p>部门：${processInstance.value.startUser.deptName}</p>
+                  <p>创建时间：${parseTime(processInstance.value.createTime)}`
+    } else if (element.value.type === 'bpmn:UserTask') {
+      // debugger
+      let task = taskList.value.find((m) => m.id === activity.taskId) // 找到活动对应的 taskId
+      if (!task) {
+        return
+      }
+      html = `<p>审批人：${task.assigneeUser.nickname}</p>
+                  <p>部门：${task.assigneeUser.deptName}</p>
+                  <p>结果：${getDictDataLabel(
+                    DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
+                    task.result
+                  )}</p>
+                  <p>创建时间：${parseTime(task.createTime)}</p>`
+      if (task.endTime) {
+        html += `<p>结束时间：${parseTime(task.endTime)}</p>`
+      }
+      if (task.reason) {
+        html += `<p>审批建议：${task.reason}</p>`
+      }
+    } else if (element.value.type === 'bpmn:ServiceTask' && processInstance.value) {
+      if (activity.startTime > 0) {
+        html = `<p>创建时间：${parseTime(activity.startTime)}</p>`
+      }
+      if (activity.endTime > 0) {
+        html += `<p>结束时间：${parseTime(activity.endTime)}</p>`
+      }
+      console.log(html)
+    } else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
+      html = `<p>结果：${getDictDataLabel(
+        DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
+        processInstance.value.result
+      )}</p>`
+      if (processInstance.value.endTime) {
+        html += `<p>结束时间：${parseTime(processInstance.value.endTime)}</p>`
+      }
+    }
+    elementOverlayIds.value[element.value.id] = overlays.value.add(element.value, {
+      position: { left: 0, bottom: 0 },
+      html: `<div class="element-overlays">${html}</div>`
+    })
+  }
+}
+// 流程图的元素被 out
+const elementOut = (element) => {
+  overlays.value.remove({ element })
+  elementOverlayIds.value[element.id] = null
+}
+
+onMounted(() => {
+  xml.value = props.value
+  activityList.value = props.activityData
+  // 初始化
+  initBpmnModeler()
+  createNewDiagram(xml.value)
+  // 初始模型的监听器
+  initModelListeners()
+})
+onBeforeUnmount(() => {
+  // this.$once('hook:beforeDestroy', () => {
+  // })
+  if (bpmnModeler) bpmnModeler.destroy()
+  emit('destroy', bpmnModeler)
+  bpmnModeler = null
+})
+
+watch(
+  () => props.value,
+  (newValue) => {
+    console.log(newValue, 'oldVal')
+    xml.value = newValue
+    createNewDiagram(xml.value)
+  }
+)
+watch(
+  () => props.activityData,
+  (newActivityData) => {
+    activityList.value = newActivityData
+    createNewDiagram(xml.value)
+  }
+)
+watch(
+  () => props.processInstanceData,
+  (newProcessInstanceData) => {
+    processInstance.value = newProcessInstanceData
+    createNewDiagram(xml.value)
+  }
+)
+watch(
+  () => props.taskData,
+  (newTaskListData) => {
+    taskList.value = newTaskListData
+    createNewDiagram(xml.value)
+  }
+)
+</script>
+
+<style>
+/** 处理中 */
+.highlight-todo.djs-connection > .djs-visual > path {
+  stroke: #1890ff !important;
+  stroke-dasharray: 4px !important;
+  fill-opacity: 0.2 !important;
+}
+.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
+  fill: #1890ff !important;
+  stroke: #1890ff !important;
+  stroke-dasharray: 4px !important;
+  fill-opacity: 0.2 !important;
+}
+
+:deep(.highlight-todo.djs-connection > .djs-visual > path) {
+  stroke: #1890ff !important;
+  stroke-dasharray: 4px !important;
+  fill-opacity: 0.2 !important;
+  marker-end: url(#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr);
+}
+:deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
+  fill: #1890ff !important;
+  stroke: #1890ff !important;
+  stroke-dasharray: 4px !important;
+  fill-opacity: 0.2 !important;
+}
+
+/** 通过 */
+.highlight.djs-shape .djs-visual > :nth-child(1) {
+  fill: green !important;
+  stroke: green !important;
+  fill-opacity: 0.2 !important;
+}
+.highlight.djs-shape .djs-visual > :nth-child(2) {
+  fill: green !important;
+}
+.highlight.djs-shape .djs-visual > path {
+  fill: green !important;
+  fill-opacity: 0.2 !important;
+  stroke: green !important;
+}
+.highlight.djs-connection > .djs-visual > path {
+  stroke: green !important;
+}
+
+.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
+  fill: green !important; /* color elements as green */
+}
+
+:deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
+  fill: green !important;
+  stroke: green !important;
+  fill-opacity: 0.2 !important;
+}
+:deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
+  fill: green !important;
+}
+:deep(.highlight.djs-shape .djs-visual > path) {
+  fill: green !important;
+  fill-opacity: 0.2 !important;
+  stroke: green !important;
+}
+:deep(.highlight.djs-connection > .djs-visual > path) {
+  stroke: green !important;
+}
+
+/** 不通过 */
+.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
+  fill: red !important;
+  stroke: red !important;
+  fill-opacity: 0.2 !important;
+}
+.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
+  fill: red !important;
+}
+.highlight-reject.djs-shape .djs-visual > path {
+  fill: red !important;
+  fill-opacity: 0.2 !important;
+  stroke: red !important;
+}
+.highlight-reject.djs-connection > .djs-visual > path {
+  stroke: red !important;
+}
+
+.highlight-reject:not(.djs-connection) .djs-visual > :nth-child(1) {
+  fill: red !important; /* color elements as green */
+}
+
+:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(1)) {
+  fill: red !important;
+  stroke: red !important;
+  fill-opacity: 0.2 !important;
+}
+:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(2)) {
+  fill: red !important;
+}
+:deep(.highlight-reject.djs-shape .djs-visual > path) {
+  fill: red !important;
+  fill-opacity: 0.2 !important;
+  stroke: red !important;
+}
+:deep(.highlight-reject.djs-connection > .djs-visual > path) {
+  stroke: red !important;
+}
+
+/** 已取消 */
+.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
+  fill: grey !important;
+  stroke: grey !important;
+  fill-opacity: 0.2 !important;
+}
+.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
+  fill: grey !important;
+}
+.highlight-cancel.djs-shape .djs-visual > path {
+  fill: grey !important;
+  fill-opacity: 0.2 !important;
+  stroke: grey !important;
+}
+.highlight-cancel.djs-connection > .djs-visual > path {
+  stroke: grey !important;
+}
+
+.highlight-cancel:not(.djs-connection) .djs-visual > :nth-child(1) {
+  fill: grey !important; /* color elements as green */
+}
+
+:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(1)) {
+  fill: grey !important;
+  stroke: grey !important;
+  fill-opacity: 0.2 !important;
+}
+:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(2)) {
+  fill: grey !important;
+}
+:deep(.highlight-cancel.djs-shape .djs-visual > path) {
+  fill: grey !important;
+  fill-opacity: 0.2 !important;
+  stroke: grey !important;
+}
+:deep(.highlight-cancel.djs-connection > .djs-visual > path) {
+  stroke: grey !important;
+}
+
+.element-overlays {
+  box-sizing: border-box;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  color: #fafafa;
+  width: 200px;
+}
+</style>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index.js
new file mode 100644
index 000000000..03a814c8c
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index.js
@@ -0,0 +1,8 @@
+import MyProcessDesigner from "./ProcessDesigner.vue";
+
+MyProcessDesigner.install = function(Vue) {
+  Vue.component(MyProcessDesigner.name, MyProcessDesigner);
+};
+
+// 流程图的设计器，可编辑
+export default MyProcessDesigner;
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index2.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index2.js
new file mode 100644
index 000000000..55974693a
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index2.js
@@ -0,0 +1,8 @@
+import MyProcessViewer from "./ProcessViewer.vue";
+
+MyProcessViewer.install = function(Vue) {
+  Vue.component(MyProcessViewer.name, MyProcessViewer);
+};
+
+// 流程图的查看器，不可编辑
+export default MyProcessViewer;
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/contentPadProvider.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/contentPadProvider.js
new file mode 100644
index 000000000..968de3d65
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/contentPadProvider.js
@@ -0,0 +1,390 @@
+import { assign, forEach, isArray } from 'min-dash'
+
+import { is } from "bpmn-js/lib/util/ModelUtil"
+
+import { isExpanded, isEventSubProcess } from "bpmn-js/lib/util/DiUtil"
+
+import { isAny } from "bpmn-js/lib/features/modeling/util/ModelingUtil"
+
+import { getChildLanes } from "bpmn-js/lib/features/modeling/util/LaneUtil"
+
+import { hasPrimaryModifier } from "diagram-js/lib/util/Mouse"
+
+/**
+ * A provider for BPMN 2.0 elements context pad
+ */
+export default function ContextPadProvider (
+  config,
+  injector,
+  eventBus,
+  contextPad,
+  modeling,
+  elementFactory,
+  connect,
+  create,
+  popupMenu,
+  canvas,
+  rules,
+  translate,
+  elementRegistry
+) {
+  config = config || {}
+
+  contextPad.registerProvider(this)
+
+  this._contextPad = contextPad
+
+  this._modeling = modeling
+
+  this._elementFactory = elementFactory
+  this._connect = connect
+  this._create = create
+  this._popupMenu = popupMenu
+  this._canvas = canvas
+  this._rules = rules
+  this._translate = translate
+
+  if (config.autoPlace !== false) {
+    this._autoPlace = injector.get("autoPlace", false)
+  }
+
+  eventBus.on("create.end", 250, function (event) {
+    const context = event.context,
+      shape = context.shape
+
+    if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
+      return
+    }
+
+    const entries = contextPad.getEntries(shape)
+
+    if (entries.replace) {
+      entries.replace.action.click(event, shape)
+    }
+  })
+}
+
+ContextPadProvider.$inject = [
+  "config.contextPad",
+  "injector",
+  "eventBus",
+  "contextPad",
+  "modeling",
+  "elementFactory",
+  "connect",
+  "create",
+  "popupMenu",
+  "canvas",
+  "rules",
+  "translate",
+  "elementRegistry"
+]
+
+ContextPadProvider.prototype.getContextPadEntries = function (element) {
+  const contextPad = this._contextPad,
+    modeling = this._modeling,
+    elementFactory = this._elementFactory,
+    connect = this._connect,
+    create = this._create,
+    popupMenu = this._popupMenu,
+    canvas = this._canvas,
+    rules = this._rules,
+    autoPlace = this._autoPlace,
+    translate = this._translate
+
+  const actions = {}
+
+  if (element.type === "label") {
+    return actions
+  }
+
+  const businessObject = element.businessObject
+
+  function startConnect (event, element) {
+    connect.start(event, element)
+  }
+
+  function removeElement () {
+    modeling.removeElements([element])
+  }
+
+  function getReplaceMenuPosition (element) {
+    const Y_OFFSET = 5
+
+    const diagramContainer = canvas.getContainer(),
+      pad = contextPad.getPad(element).html
+
+    const diagramRect = diagramContainer.getBoundingClientRect(),
+      padRect = pad.getBoundingClientRect()
+
+    const top = padRect.top - diagramRect.top
+    const left = padRect.left - diagramRect.left
+
+    const pos = {
+      x: left,
+      y: top + padRect.height + Y_OFFSET
+    }
+
+    return pos
+  }
+
+  /**
+   * Create an append action
+   *
+   * @param {string} type
+   * @param {string} className
+   * @param {string} [title]
+   * @param {Object} [options]
+   *
+   * @return {Object} descriptor
+   */
+  function appendAction (type, className, title, options) {
+    if (typeof title !== "string") {
+      options = title
+      title = translate("Append {type}", { type: type.replace(/^bpmn:/, "") })
+    }
+
+    function appendStart (event, element) {
+      const shape = elementFactory.createShape(assign({ type: type }, options))
+      create.start(event, shape, {
+        source: element
+      })
+    }
+
+    const append = autoPlace
+      ? function (event, element) {
+        const shape = elementFactory.createShape(assign({ type: type }, options))
+
+        autoPlace.append(element, shape)
+      }
+      : appendStart
+
+    return {
+      group: "model",
+      className: className,
+      title: title,
+      action: {
+        dragstart: appendStart,
+        click: append
+      }
+    }
+  }
+
+  function splitLaneHandler (count) {
+    return function (event, element) {
+      // actual split
+      modeling.splitLane(element, count)
+
+      // refresh context pad after split to
+      // get rid of split icons
+      contextPad.open(element, true)
+    }
+  }
+
+  if (isAny(businessObject, ["bpmn:Lane", "bpmn:Participant"]) && isExpanded(businessObject)) {
+    const childLanes = getChildLanes(element)
+
+    assign(actions, {
+      "lane-insert-above": {
+        group: "lane-insert-above",
+        className: "bpmn-icon-lane-insert-above",
+        title: translate("Add Lane above"),
+        action: {
+          click: function (event, element) {
+            modeling.addLane(element, "top")
+          }
+        }
+      }
+    })
+
+    if (childLanes.length < 2) {
+      if (element.height >= 120) {
+        assign(actions, {
+          "lane-divide-two": {
+            group: "lane-divide",
+            className: "bpmn-icon-lane-divide-two",
+            title: translate("Divide into two Lanes"),
+            action: {
+              click: splitLaneHandler(2)
+            }
+          }
+        })
+      }
+
+      if (element.height >= 180) {
+        assign(actions, {
+          "lane-divide-three": {
+            group: "lane-divide",
+            className: "bpmn-icon-lane-divide-three",
+            title: translate("Divide into three Lanes"),
+            action: {
+              click: splitLaneHandler(3)
+            }
+          }
+        })
+      }
+    }
+
+    assign(actions, {
+      "lane-insert-below": {
+        group: "lane-insert-below",
+        className: "bpmn-icon-lane-insert-below",
+        title: translate("Add Lane below"),
+        action: {
+          click: function (event, element) {
+            modeling.addLane(element, "bottom")
+          }
+        }
+      }
+    })
+  }
+
+  if (is(businessObject, "bpmn:FlowNode")) {
+    if (is(businessObject, "bpmn:EventBasedGateway")) {
+      assign(actions, {
+        "append.receive-task": appendAction("bpmn:ReceiveTask", "bpmn-icon-receive-task", translate("Append ReceiveTask")),
+        "append.message-intermediate-event": appendAction(
+          "bpmn:IntermediateCatchEvent",
+          "bpmn-icon-intermediate-event-catch-message",
+          translate("Append MessageIntermediateCatchEvent"),
+          { eventDefinitionType: "bpmn:MessageEventDefinition" }
+        ),
+        "append.timer-intermediate-event": appendAction(
+          "bpmn:IntermediateCatchEvent",
+          "bpmn-icon-intermediate-event-catch-timer",
+          translate("Append TimerIntermediateCatchEvent"),
+          { eventDefinitionType: "bpmn:TimerEventDefinition" }
+        ),
+        "append.condition-intermediate-event": appendAction(
+          "bpmn:IntermediateCatchEvent",
+          "bpmn-icon-intermediate-event-catch-condition",
+          translate("Append ConditionIntermediateCatchEvent"),
+          { eventDefinitionType: "bpmn:ConditionalEventDefinition" }
+        ),
+        "append.signal-intermediate-event": appendAction(
+          "bpmn:IntermediateCatchEvent",
+          "bpmn-icon-intermediate-event-catch-signal",
+          translate("Append SignalIntermediateCatchEvent"),
+          { eventDefinitionType: "bpmn:SignalEventDefinition" }
+        )
+      })
+    } else if (isEventType(businessObject, "bpmn:BoundaryEvent", "bpmn:CompensateEventDefinition")) {
+      assign(actions, {
+        "append.compensation-activity": appendAction("bpmn:Task", "bpmn-icon-task", translate("Append compensation activity"), {
+          isForCompensation: true
+        })
+      })
+    } else if (
+      !is(businessObject, "bpmn:EndEvent") &&
+      !businessObject.isForCompensation &&
+      !isEventType(businessObject, "bpmn:IntermediateThrowEvent", "bpmn:LinkEventDefinition") &&
+      !isEventSubProcess(businessObject)
+    ) {
+      assign(actions, {
+        "append.end-event": appendAction("bpmn:EndEvent", "bpmn-icon-end-event-none", translate("Append EndEvent")),
+        "append.gateway": appendAction("bpmn:ExclusiveGateway", "bpmn-icon-gateway-none", translate("Append Gateway")),
+        "append.append-task": appendAction("bpmn:UserTask", "bpmn-icon-user-task", translate("Append Task")),
+        "append.intermediate-event": appendAction(
+          "bpmn:IntermediateThrowEvent",
+          "bpmn-icon-intermediate-event-none",
+          translate("Append Intermediate/Boundary Event")
+        )
+      })
+    }
+  }
+
+  if (!popupMenu.isEmpty(element, "bpmn-replace")) {
+    // Replace menu entry
+    assign(actions, {
+      replace: {
+        group: "edit",
+        className: "bpmn-icon-screw-wrench",
+        title: '修改类型',
+        action: {
+          click: function (event, element) {
+            const position = assign(getReplaceMenuPosition(element), {
+              cursor: { x: event.x, y: event.y }
+            })
+
+            popupMenu.open(element, "bpmn-replace", position)
+          }
+        }
+      }
+    })
+  }
+
+  if (isAny(businessObject, ["bpmn:FlowNode", "bpmn:InteractionNode", "bpmn:DataObjectReference", "bpmn:DataStoreReference"])) {
+    assign(actions, {
+      "append.text-annotation": appendAction("bpmn:TextAnnotation", "bpmn-icon-text-annotation"),
+
+      connect: {
+        group: "connect",
+        className: "bpmn-icon-connection-multi",
+        title: translate("Connect using " + (businessObject.isForCompensation ? "" : "Sequence/MessageFlow or ") + "Association"),
+        action: {
+          click: startConnect,
+          dragstart: startConnect
+        }
+      }
+    })
+  }
+
+  if (isAny(businessObject, ["bpmn:DataObjectReference", "bpmn:DataStoreReference"])) {
+    assign(actions, {
+      connect: {
+        group: "connect",
+        className: "bpmn-icon-connection-multi",
+        title: translate("Connect using DataInputAssociation"),
+        action: {
+          click: startConnect,
+          dragstart: startConnect
+        }
+      }
+    })
+  }
+
+  if (is(businessObject, "bpmn:Group")) {
+    assign(actions, {
+      "append.text-annotation": appendAction("bpmn:TextAnnotation", "bpmn-icon-text-annotation")
+    })
+  }
+
+  // delete element entry, only show if allowed by rules
+  let deleteAllowed = rules.allowed('elements.delete', { elements: [element] })
+
+  if (isArray(deleteAllowed)) {
+    // was the element returned as a deletion candidate?
+    deleteAllowed = deleteAllowed[0] === element
+  }
+
+  if (deleteAllowed) {
+    assign(actions, {
+      delete: {
+        group: "edit",
+        className: "bpmn-icon-trash",
+        title: translate("Remove"),
+        action: {
+          click: removeElement
+        }
+      }
+    })
+  }
+
+  return actions
+}
+
+// helpers /////////
+
+function isEventType (eventBo, type, definition) {
+  const isType = eventBo.$instanceOf(type)
+  let isDefinition = false
+
+  const definitions = eventBo.eventDefinitions || []
+  forEach(definitions, function (def) {
+    if (def.$type === definition) {
+      isDefinition = true
+    }
+  })
+
+  return isType && isDefinition
+}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/index.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/index.js
new file mode 100644
index 000000000..a9cf887cc
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/index.js
@@ -0,0 +1,6 @@
+import CustomContextPadProvider from "./contentPadProvider";
+
+export default {
+  __init__: ["contextPadProvider"],
+  contextPadProvider: ["type", CustomContextPadProvider]
+};
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/defaultEmpty.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/defaultEmpty.js
new file mode 100644
index 000000000..ae96d2416
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/defaultEmpty.js
@@ -0,0 +1,24 @@
+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"
+  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/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/activitiDescriptor.json b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/activitiDescriptor.json
new file mode 100644
index 000000000..9daed5081
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/activitiDescriptor.json
@@ -0,0 +1,1071 @@
+{
+  "name": "Activiti",
+  "uri": "http://activiti.org/bpmn",
+  "prefix": "activiti",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "Definitions",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Definitions"
+      ],
+      "properties": [
+        {
+          "name": "diagramRelationId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InOutBinding",
+      "superClass": [
+        "Element"
+      ],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": [
+        "InOutBinding"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:CallActivity"
+        ]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": [
+        "InOutBinding"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:CallActivity"
+        ]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Activity",
+        "bpmn:Gateway",
+        "bpmn:Event"
+      ],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Process",
+        "activiti:AsyncCapable"
+      ],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:SignalEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:ErrorEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Error"
+      ],
+      "properties": [
+        {
+          "name": "activiti:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": [
+        "Element"
+      ],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:StartEvent",
+        "bpmn:UserTask"
+      ],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Process",
+        "bpmn:FlowElement"
+      ],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": [ "bpmn:StartEvent" ],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:ScriptTask"
+      ],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Process"
+      ],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        },
+        {
+          "name":"executionListener",
+          "isAbstract": true,
+          "type":"Expression"
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:EscalationEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:FormalExpression"
+      ],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "multiinstance_type",
+      "superClass":[
+        "Element"
+      ]
+    },
+    {
+      "name": "multiinstance_condition",
+      "superClass":[
+        "Element"
+      ]
+    },
+    {
+      "name": "Assignable",
+      "extends": [ "bpmn:UserTask" ],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "multiinstance_condition",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": [ "bpmn:CallActivity" ],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": [
+        "bpmn:BusinessRuleTask"
+      ],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": [
+        "activiti:ServiceTaskLike"
+      ],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": [
+        "bpmn:Process",
+        "activiti:ExternalCapable"
+      ],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [ "*" ]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": [
+        "Element"
+      ],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "activiti:ServiceTaskLike"
+        ]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:FlowNode",
+          "activiti:Connector"
+        ]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": [ "InputOutputParameterDefinition" ],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": [ "InputOutputParameterDefinition" ],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": [
+        "InputOutputParameterDefinition"
+      ],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": [ "InputOutputParameterDefinition" ],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "activiti:ServiceTaskLike",
+          "activiti:ExecutionListener",
+          "activiti:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": [ "InputOutputParameter" ]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": [ "InputOutputParameter" ]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": [ "bpmn:MultiInstanceLoopCharacteristics" ],
+      "superClass": [ "activiti:AsyncCapable" ],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "activiti:AsyncCapable",
+          "bpmn:MultiInstanceLoopCharacteristics"
+        ]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:UserTask"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:StartEvent",
+          "bpmn:UserTask"
+        ]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": [ "Element" ],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": [ "Element" ],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": [ "Element" ],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:ConditionalEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvent",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ],
+  "emumerations": [ ]
+}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/camundaDescriptor.json b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/camundaDescriptor.json
new file mode 100644
index 000000000..a57dbe639
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/camundaDescriptor.json
@@ -0,0 +1,1087 @@
+{
+  "name": "Camunda",
+  "uri": "http://camunda.org/schema/1.0/bpmn",
+  "prefix": "camunda",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "Definitions",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Definitions"
+      ],
+      "properties": [
+        {
+          "name": "diagramRelationId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InOutBinding",
+      "superClass": [
+        "Element"
+      ],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": [
+        "InOutBinding"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:CallActivity",
+          "bpmn:SignalEventDefinition"
+        ]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": [
+        "InOutBinding"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:CallActivity"
+        ]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Activity",
+        "bpmn:Gateway",
+        "bpmn:Event"
+      ],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Process",
+        "camunda:AsyncCapable"
+      ],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:SignalEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:ErrorEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Error"
+      ],
+      "properties": [
+        {
+          "name": "camunda:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": [
+        "Element"
+      ],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:StartEvent",
+        "bpmn:UserTask"
+      ],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Process",
+        "bpmn:FlowElement"
+      ],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "modelerTemplateVersion",
+          "isAttr": true,
+          "type": "Integer"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": [ "bpmn:StartEvent" ],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:ScriptTask"
+      ],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Process"
+      ],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:EscalationEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:FormalExpression"
+      ],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignable",
+      "extends": [ "bpmn:UserTask" ],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": [ "bpmn:CallActivity" ],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": [
+        "bpmn:BusinessRuleTask"
+      ],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": [
+        "camunda:ServiceTaskLike"
+      ],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": [
+        "bpmn:Process",
+        "camunda:ExternalCapable"
+      ],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [ "*" ]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": [
+        "Element"
+      ],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "camunda:ServiceTaskLike"
+        ]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:FlowNode",
+          "camunda:Connector"
+        ]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": [ "InputOutputParameterDefinition" ],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": [ "InputOutputParameterDefinition" ],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": [
+        "InputOutputParameterDefinition"
+      ],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": [ "InputOutputParameterDefinition" ],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "camunda:ServiceTaskLike",
+          "camunda:ExecutionListener",
+          "camunda:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": [ "InputOutputParameter" ]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": [ "InputOutputParameter" ]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": [ "bpmn:MultiInstanceLoopCharacteristics" ],
+      "superClass": [ "camunda:AsyncCapable" ],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "camunda:AsyncCapable",
+          "bpmn:MultiInstanceLoopCharacteristics"
+        ]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:UserTask"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        },
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "eventDefinitions",
+          "type": "bpmn:TimerEventDefinition",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:StartEvent",
+          "bpmn:UserTask"
+        ]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormData",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:StartEvent",
+          "bpmn:UserTask"
+        ]
+      },
+      "properties": [
+        {
+          "name": "fields",
+          "type": "FormField",
+          "isMany": true
+        },
+        {
+          "name": "businessKey",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FormField",
+      "superClass": [ "Element" ],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": [ "Element" ],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": [ "Element" ],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:ConditionalEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvents",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ],
+  "emumerations": [ ]
+}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
new file mode 100644
index 000000000..ef76af47f
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
@@ -0,0 +1,1210 @@
+{
+  "name": "Flowable",
+  "uri": "http://flowable.org/bpmn",
+  "prefix": "flowable",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "InOutBinding",
+      "superClass": ["Element"],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": ["bpmn:Activity", "bpmn:Gateway", "bpmn:Event"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "flowable:AsyncCapable"],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:SignalEventDefinition"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ErrorEventDefinition"],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": ["bpmn:Error"],
+      "properties": [
+        {
+          "name": "flowable:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent", "bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formType",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formReadOnly",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "formInit",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "bpmn:FlowElement"],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent"],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": ["bpmn:ScriptTask"],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": ["bpmn:Process"],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:EscalationEventDefinition"],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": ["bpmn:FormalExpression"],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignable",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignee",
+      "supperClass": "Element",
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "viewId",
+          "type": "Number",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": ["bpmn:CallActivity"],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": ["bpmn:BusinessRuleTask"],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": ["flowable:ServiceTaskLike"],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": ["bpmn:Process", "flowable:ExternalCapable"],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Button",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "code",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "isHide",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "next",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "sort",
+          "type": "Integer",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Assignee",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "condition",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "operationType",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "sort",
+          "type": "Integer",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["flowable:ServiceTaskLike"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:FlowNode", "flowable:Connector"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "flowable:ServiceTaskLike",
+          "flowable:ExecutionListener",
+          "flowable:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ChildField",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": ["bpmn:MultiInstanceLoopCharacteristics"],
+      "superClass": ["flowable:AsyncCapable"],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "flowable:AsyncCapable",
+          "bpmn:MultiInstanceLoopCharacteristics"
+        ]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        },
+        {
+          "name": "children",
+          "type": "ChildField",
+          "isMany": true
+        },
+        {
+          "name": "extensionElements",
+          "type": "bpmn:ExtensionElements",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormData",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "fields",
+          "type": "FormField",
+          "isMany": true
+        },
+        {
+          "name": "businessKey",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FormField",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ConditionalEventDefinition"],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvent",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Condition",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:SequenceFlow"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "field",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "compare",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "logic",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "sort",
+          "type": "Integer",
+          "isAttr": true
+        }
+      ]
+    }
+  ],
+  "emumerations": []
+}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/activitiExtension.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
new file mode 100644
index 000000000..4d4ae4ee6
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
@@ -0,0 +1,79 @@
+"use strict"
+
+import { some } from 'min-dash'
+
+// const some = require('min-dash').some
+// const some = some
+
+const ALLOWED_TYPES = {
+  FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
+  Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
+  Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
+}
+
+function is (element, type) {
+  return element && typeof element.$instanceOf === "function" && element.$instanceOf(type)
+}
+
+function exists (element) {
+  return element && element.length
+}
+
+function includesType (collection, type) {
+  return (
+    exists(collection) &&
+    some(collection, function (element) {
+      return is(element, type)
+    })
+  )
+}
+
+function anyType (element, types) {
+  return some(types, function (type) {
+    return is(element, type)
+  })
+}
+
+function isAllowed (propName, propDescriptor, newElement) {
+  const name = propDescriptor.name,
+    types = ALLOWED_TYPES[name.replace(/activiti:/, '')]
+
+  return name === propName && anyType(newElement, types)
+}
+
+function ActivitiModdleExtension (eventBus) {
+  eventBus.on(
+    "property.clone",
+    function (context) {
+      const newElement = context.newElement,
+        propDescriptor = context.propertyDescriptor
+
+      this.canCloneProperty(newElement, propDescriptor)
+    },
+    this
+  )
+}
+
+ActivitiModdleExtension.$inject = ["eventBus"]
+
+ActivitiModdleExtension.prototype.canCloneProperty = function (newElement, propDescriptor) {
+  if (isAllowed("activiti:FailedJobRetryTimeCycle", propDescriptor, newElement)) {
+    return (
+      includesType(newElement.eventDefinitions, "bpmn:TimerEventDefinition") ||
+      includesType(newElement.eventDefinitions, "bpmn:SignalEventDefinition") ||
+      is(newElement.loopCharacteristics, "bpmn:MultiInstanceLoopCharacteristics")
+    )
+  }
+
+  if (isAllowed("activiti:Connector", propDescriptor, newElement)) {
+    return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition")
+  }
+
+  if (isAllowed("activiti:Field", propDescriptor, newElement)) {
+    return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition")
+  }
+}
+
+// module.exports = ActivitiModdleExtension;
+export default ActivitiModdleExtension
+
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/index.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/index.js
new file mode 100644
index 000000000..1e8486e4d
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/index.js
@@ -0,0 +1,11 @@
+/*
+ * @author igdianov
+ * address https://github.com/igdianov/activiti-bpmn-moddle
+ * */
+
+import activitiExtension from "./activitiExtension"
+
+export default {
+  __init__: ["ActivitiModdleExtension"],
+  ActivitiModdleExtension: ["type", activitiExtension]
+}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/extension.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/extension.js
new file mode 100644
index 000000000..518331509
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/extension.js
@@ -0,0 +1,157 @@
+"use strict"
+
+
+import {
+  isFunction,
+  isObject,
+  some
+} from 'min-dash'
+
+// const isFunction = isFunction,
+//   isObject = isObject,
+//   some = some
+// const isFunction = require('min-dash').isFunction,
+//   isObject = require('min-dash').isObject,
+//   some = require('min-dash').some
+
+const WILDCARD = '*'
+
+function CamundaModdleExtension (eventBus) {
+  const self = this
+
+  eventBus.on("moddleCopy.canCopyProperty", function (context) {
+    const property = context.property,
+      parent = context.parent
+
+    return self.canCopyProperty(property, parent)
+  })
+}
+
+CamundaModdleExtension.$inject = ["eventBus"]
+
+/**
+ * Check wether to disallow copying property.
+ */
+CamundaModdleExtension.prototype.canCopyProperty = function (property, parent) {
+  // (1) check wether property is allowed in parent
+  if (isObject(property) && !isAllowedInParent(property, parent)) {
+    return false
+  }
+
+  // (2) check more complex scenarios
+
+  if (is(property, "camunda:InputOutput") && !this.canHostInputOutput(parent)) {
+    return false
+  }
+
+  if (isAny(property, ["camunda:Connector", "camunda:Field"]) && !this.canHostConnector(parent)) {
+    return false
+  }
+
+  if (is(property, "camunda:In") && !this.canHostIn(parent)) {
+    return false
+  }
+}
+
+CamundaModdleExtension.prototype.canHostInputOutput = function (parent) {
+  // allowed in camunda:Connector
+  const connector = getParent(parent, 'camunda:Connector')
+
+  if (connector) {
+    return true
+  }
+
+  // special rules inside bpmn:FlowNode
+  const flowNode = getParent(parent, 'bpmn:FlowNode')
+
+  if (!flowNode) {
+    return false
+  }
+
+  if (isAny(flowNode, ["bpmn:StartEvent", "bpmn:Gateway", "bpmn:BoundaryEvent"])) {
+    return false
+  }
+
+  return !(is(flowNode, "bpmn:SubProcess") && flowNode.get("triggeredByEvent"))
+
+
+}
+
+CamundaModdleExtension.prototype.canHostConnector = function (parent) {
+  const serviceTaskLike = getParent(parent, 'camunda:ServiceTaskLike')
+
+  if (is(serviceTaskLike, "bpmn:MessageEventDefinition")) {
+    // only allow on throw and end events
+    return getParent(parent, "bpmn:IntermediateThrowEvent") || getParent(parent, "bpmn:EndEvent")
+  }
+
+  return true
+}
+
+CamundaModdleExtension.prototype.canHostIn = function (parent) {
+  const callActivity = getParent(parent, 'bpmn:CallActivity')
+
+  if (callActivity) {
+    return true
+  }
+
+  const signalEventDefinition = getParent(parent, 'bpmn:SignalEventDefinition')
+
+  if (signalEventDefinition) {
+    // only allow on throw and end events
+    return getParent(parent, "bpmn:IntermediateThrowEvent") || getParent(parent, "bpmn:EndEvent")
+  }
+
+  return true
+}
+
+// module.exports = CamundaModdleExtension;
+export default CamundaModdleExtension
+
+// helpers //////////
+
+function is (element, type) {
+  return element && isFunction(element.$instanceOf) && element.$instanceOf(type)
+}
+
+function isAny (element, types) {
+  return some(types, function (t) {
+    return is(element, t)
+  })
+}
+
+function getParent (element, type) {
+  if (!type) {
+    return element.$parent
+  }
+
+  if (is(element, type)) {
+    return element
+  }
+
+  if (!element.$parent) {
+    return
+  }
+
+  return getParent(element.$parent, type)
+}
+
+function isAllowedInParent (property, parent) {
+  // (1) find property descriptor
+  const descriptor = property.$type && property.$model.getTypeDescriptor(property.$type)
+
+  const allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn
+
+  if (!allowedIn || isWildcard(allowedIn)) {
+    return true
+  }
+
+  // (2) check wether property has parent of allowed type
+  return some(allowedIn, function (type) {
+    return getParent(parent, type)
+  })
+}
+
+function isWildcard (allowedIn) {
+  return allowedIn.indexOf(WILDCARD) !== -1
+}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/index.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/index.js
new file mode 100644
index 000000000..f35b7db28
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/index.js
@@ -0,0 +1,8 @@
+"use strict"
+
+import extension from "./extension"
+
+export default {
+  __init__: ["camundaModdleExtension"],
+  camundaModdleExtension: ["type", extension]
+}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/flowableExtension.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
new file mode 100644
index 000000000..50e63ba8f
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
@@ -0,0 +1,80 @@
+"use strict"
+
+import { some } from 'min-dash'
+
+// const some = some
+// const some = require('min-dash').some
+
+
+
+const ALLOWED_TYPES = {
+  FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
+  Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
+  Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
+}
+
+function is (element, type) {
+  return element && typeof element.$instanceOf === "function" && element.$instanceOf(type)
+}
+
+function exists (element) {
+  return element && element.length
+}
+
+function includesType (collection, type) {
+  return (
+    exists(collection) &&
+    some(collection, function (element) {
+      return is(element, type)
+    })
+  )
+}
+
+function anyType (element, types) {
+  return some(types, function (type) {
+    return is(element, type)
+  })
+}
+
+function isAllowed (propName, propDescriptor, newElement) {
+  const name = propDescriptor.name,
+    types = ALLOWED_TYPES[name.replace(/flowable:/, '')]
+
+  return name === propName && anyType(newElement, types)
+}
+
+function FlowableModdleExtension (eventBus) {
+  eventBus.on(
+    "property.clone",
+    function (context) {
+      const newElement = context.newElement,
+        propDescriptor = context.propertyDescriptor
+
+      this.canCloneProperty(newElement, propDescriptor)
+    },
+    this
+  )
+}
+
+FlowableModdleExtension.$inject = ["eventBus"]
+
+FlowableModdleExtension.prototype.canCloneProperty = function (newElement, propDescriptor) {
+  if (isAllowed("flowable:FailedJobRetryTimeCycle", propDescriptor, newElement)) {
+    return (
+      includesType(newElement.eventDefinitions, "bpmn:TimerEventDefinition") ||
+      includesType(newElement.eventDefinitions, "bpmn:SignalEventDefinition") ||
+      is(newElement.loopCharacteristics, "bpmn:MultiInstanceLoopCharacteristics")
+    )
+  }
+
+  if (isAllowed("flowable:Connector", propDescriptor, newElement)) {
+    return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition")
+  }
+
+  if (isAllowed("flowable:Field", propDescriptor, newElement)) {
+    return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition")
+  }
+}
+
+// module.exports = FlowableModdleExtension;
+export default FlowableModdleExtension
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/index.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/index.js
new file mode 100644
index 000000000..58d6f87c5
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/index.js
@@ -0,0 +1,10 @@
+/*
+ * @author igdianov
+ * address https://github.com/igdianov/activiti-bpmn-moddle
+ * */
+import flowableExtension from "./flowableExtension"
+
+export default {
+  __init__: ["FlowableModdleExtension"],
+  FlowableModdleExtension: ["type", flowableExtension]
+}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/palette/CustomPalette.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/palette/CustomPalette.js
new file mode 100644
index 000000000..74dc8f20a
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/palette/CustomPalette.js
@@ -0,0 +1,157 @@
+import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider'
+import { assign } from "min-dash"
+
+export default function CustomPalette (palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
+  PaletteProvider.call(this, palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate, 2000)
+}
+
+const F = function () { } // 核心，利用空对象作为中介；
+F.prototype = PaletteProvider.prototype // 核心，将父类的原型赋值给空对象F；
+
+// 利用中介函数重写原型链方法
+F.prototype.getPaletteEntries = function () {
+  const actions = {},
+    create = this._create,
+    elementFactory = this._elementFactory,
+    spaceTool = this._spaceTool,
+    lassoTool = this._lassoTool,
+    handTool = this._handTool,
+    globalConnect = this._globalConnect,
+    translate = this._translate
+
+  function createAction (type, group, className, title, options) {
+    function createListener (event) {
+      const shape = elementFactory.createShape(assign({ type: type }, options))
+
+      if (options) {
+        shape.businessObject.di.isExpanded = options.isExpanded
+      }
+
+      create.start(event, shape)
+    }
+
+    const shortType = type.replace(/^bpmn:/, '')
+
+    return {
+      group: group,
+      className: className,
+      title: title || translate("Create {type}", { type: shortType }),
+      action: {
+        dragstart: createListener,
+        click: createListener
+      }
+    }
+  }
+
+  function createSubprocess (event) {
+    const subProcess = elementFactory.createShape({
+      type: 'bpmn:SubProcess',
+      x: 0,
+      y: 0,
+      isExpanded: true
+    })
+
+    const startEvent = elementFactory.createShape({
+      type: 'bpmn:StartEvent',
+      x: 40,
+      y: 82,
+      parent: subProcess
+    })
+
+    create.start(event, [subProcess, startEvent], {
+      hints: {
+        autoSelect: [startEvent]
+      }
+    })
+  }
+
+  function createParticipant (event) {
+    create.start(event, elementFactory.createParticipantShape())
+  }
+
+  assign(actions, {
+    "hand-tool": {
+      group: "tools",
+      className: "bpmn-icon-hand-tool",
+      title: '激活抓手工具',
+      // title: translate("Activate the hand tool"),
+      action: {
+        click: function (event) {
+          handTool.activateHand(event)
+        }
+      }
+    },
+    "lasso-tool": {
+      group: "tools",
+      className: "bpmn-icon-lasso-tool",
+      title: translate("Activate the lasso tool"),
+      action: {
+        click: function (event) {
+          lassoTool.activateSelection(event)
+        }
+      }
+    },
+    "space-tool": {
+      group: "tools",
+      className: "bpmn-icon-space-tool",
+      title: translate("Activate the create/remove space tool"),
+      action: {
+        click: function (event) {
+          spaceTool.activateSelection(event)
+        }
+      }
+    },
+    "global-connect-tool": {
+      group: "tools",
+      className: "bpmn-icon-connection-multi",
+      title: translate("Activate the global connect tool"),
+      action: {
+        click: function (event) {
+          globalConnect.toggle(event)
+        }
+      }
+    },
+    "tool-separator": {
+      group: "tools",
+      separator: true
+    },
+    "create.start-event": createAction("bpmn:StartEvent", "event", "bpmn-icon-start-event-none", translate("Create StartEvent")),
+    "create.intermediate-event": createAction(
+      "bpmn:IntermediateThrowEvent",
+      "event",
+      "bpmn-icon-intermediate-event-none",
+      translate("Create Intermediate/Boundary Event")
+    ),
+    "create.end-event": createAction("bpmn:EndEvent", "event", "bpmn-icon-end-event-none", translate("Create EndEvent")),
+    "create.exclusive-gateway": createAction("bpmn:ExclusiveGateway", "gateway", "bpmn-icon-gateway-none", translate("Create Gateway")),
+    "create.user-task": createAction("bpmn:UserTask", "activity", "bpmn-icon-user-task", translate("Create User Task")),
+    "create.data-object": createAction("bpmn:DataObjectReference", "data-object", "bpmn-icon-data-object", translate("Create DataObjectReference")),
+    "create.data-store": createAction("bpmn:DataStoreReference", "data-store", "bpmn-icon-data-store", translate("Create DataStoreReference")),
+    "create.subprocess-expanded": {
+      group: "activity",
+      className: "bpmn-icon-subprocess-expanded",
+      title: translate("Create expanded SubProcess"),
+      action: {
+        dragstart: createSubprocess,
+        click: createSubprocess
+      }
+    },
+    "create.participant-expanded": {
+      group: "collaboration",
+      className: "bpmn-icon-participant",
+      title: translate("Create Pool/Participant"),
+      action: {
+        dragstart: createParticipant,
+        click: createParticipant
+      }
+    },
+    "create.group": createAction("bpmn:Group", "artifact", "bpmn-icon-group", translate("Create Group"))
+  })
+
+  return actions
+}
+
+CustomPalette.$inject = ["palette", "create", "elementFactory", "spaceTool", "lassoTool", "handTool", "globalConnect", "translate"]
+
+CustomPalette.prototype = new F() // 核心，将 F的实例赋值给子类；
+CustomPalette.prototype.constructor = CustomPalette // 修复子类CustomPalette的构造器指向，防止原型链的混乱；
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/palette/index.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/palette/index.js
new file mode 100644
index 000000000..7a6b86e91
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/palette/index.js
@@ -0,0 +1,22 @@
+// import PaletteModule from "diagram-js/lib/features/palette";
+// import CreateModule from "diagram-js/lib/features/create";
+// import SpaceToolModule from "diagram-js/lib/features/space-tool";
+// import LassoToolModule from "diagram-js/lib/features/lasso-tool";
+// import HandToolModule from "diagram-js/lib/features/hand-tool";
+// import GlobalConnectModule from "diagram-js/lib/features/global-connect";
+// import translate from "diagram-js/lib/i18n/translate";
+//
+// import PaletteProvider from "./paletteProvider";
+//
+// export default {
+//   __depends__: [PaletteModule, CreateModule, SpaceToolModule, LassoToolModule, HandToolModule, GlobalConnectModule, translate],
+//   __init__: ["paletteProvider"],
+//   paletteProvider: ["type", PaletteProvider]
+// };
+
+import CustomPalette from "./CustomPalette";
+
+export default {
+  __init__: ["paletteProvider"],
+  paletteProvider: ["type", CustomPalette]
+};
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/palette/paletteProvider.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/palette/paletteProvider.js
new file mode 100644
index 000000000..3939a92c6
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/palette/paletteProvider.js
@@ -0,0 +1,160 @@
+import { assign } from "min-dash"
+
+/**
+ * A palette provider for BPMN 2.0 elements.
+ */
+export default function PaletteProvider (palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
+  this._palette = palette
+  this._create = create
+  this._elementFactory = elementFactory
+  this._spaceTool = spaceTool
+  this._lassoTool = lassoTool
+  this._handTool = handTool
+  this._globalConnect = globalConnect
+  this._translate = translate
+
+  palette.registerProvider(this)
+}
+
+PaletteProvider.$inject = ["palette", "create", "elementFactory", "spaceTool", "lassoTool", "handTool", "globalConnect", "translate"]
+
+PaletteProvider.prototype.getPaletteEntries = function () {
+  const actions = {},
+    create = this._create,
+    elementFactory = this._elementFactory,
+    spaceTool = this._spaceTool,
+    lassoTool = this._lassoTool,
+    handTool = this._handTool,
+    globalConnect = this._globalConnect,
+    translate = this._translate
+
+  function createAction (type, group, className, title, options) {
+    function createListener (event) {
+      const shape = elementFactory.createShape(assign({ type: type }, options))
+
+      if (options) {
+        shape.businessObject.di.isExpanded = options.isExpanded
+      }
+
+      create.start(event, shape)
+    }
+
+    const shortType = type.replace(/^bpmn:/, '')
+
+    return {
+      group: group,
+      className: className,
+      title: title || translate("Create {type}", { type: shortType }),
+      action: {
+        dragstart: createListener,
+        click: createListener
+      }
+    }
+  }
+
+  function createSubprocess (event) {
+    const subProcess = elementFactory.createShape({
+      type: 'bpmn:SubProcess',
+      x: 0,
+      y: 0,
+      isExpanded: true
+    })
+
+    const startEvent = elementFactory.createShape({
+      type: 'bpmn:StartEvent',
+      x: 40,
+      y: 82,
+      parent: subProcess
+    })
+
+    create.start(event, [subProcess, startEvent], {
+      hints: {
+        autoSelect: [startEvent]
+      }
+    })
+  }
+
+  function createParticipant (event) {
+    create.start(event, elementFactory.createParticipantShape())
+  }
+
+  assign(actions, {
+    "hand-tool": {
+      group: "tools",
+      className: "bpmn-icon-hand-tool",
+      title: translate("Activate the hand tool"),
+      action: {
+        click: function (event) {
+          handTool.activateHand(event)
+        }
+      }
+    },
+    "lasso-tool": {
+      group: "tools",
+      className: "bpmn-icon-lasso-tool",
+      title: translate("Activate the lasso tool"),
+      action: {
+        click: function (event) {
+          lassoTool.activateSelection(event)
+        }
+      }
+    },
+    "space-tool": {
+      group: "tools",
+      className: "bpmn-icon-space-tool",
+      title: translate("Activate the create/remove space tool"),
+      action: {
+        click: function (event) {
+          spaceTool.activateSelection(event)
+        }
+      }
+    },
+    "global-connect-tool": {
+      group: "tools",
+      className: "bpmn-icon-connection-multi",
+      title: translate("Activate the global connect tool"),
+      action: {
+        click: function (event) {
+          globalConnect.toggle(event)
+        }
+      }
+    },
+    "tool-separator": {
+      group: "tools",
+      separator: true
+    },
+    "create.start-event": createAction("bpmn:StartEvent", "event", "bpmn-icon-start-event-none", translate("Create StartEvent")),
+    "create.intermediate-event": createAction(
+      "bpmn:IntermediateThrowEvent",
+      "event",
+      "bpmn-icon-intermediate-event-none",
+      translate("Create Intermediate/Boundary Event")
+    ),
+    "create.end-event": createAction("bpmn:EndEvent", "event", "bpmn-icon-end-event-none", translate("Create EndEvent")),
+    "create.exclusive-gateway": createAction("bpmn:ExclusiveGateway", "gateway", "bpmn-icon-gateway-none", translate("Create Gateway")),
+    "create.user-task": createAction("bpmn:UserTask", "activity", "bpmn-icon-user-task", translate("Create User Task")),
+    "create.data-object": createAction("bpmn:DataObjectReference", "data-object", "bpmn-icon-data-object", translate("Create DataObjectReference")),
+    "create.data-store": createAction("bpmn:DataStoreReference", "data-store", "bpmn-icon-data-store", translate("Create DataStoreReference")),
+    "create.subprocess-expanded": {
+      group: "activity",
+      className: "bpmn-icon-subprocess-expanded",
+      title: translate("Create expanded SubProcess"),
+      action: {
+        dragstart: createSubprocess,
+        click: createSubprocess
+      }
+    },
+    "create.participant-expanded": {
+      group: "collaboration",
+      className: "bpmn-icon-participant",
+      title: translate("Create Pool/Participant"),
+      action: {
+        dragstart: createParticipant,
+        click: createParticipant
+      }
+    },
+    "create.group": createAction("bpmn:Group", "artifact", "bpmn-icon-group", translate("Create Group"))
+  })
+
+  return actions
+}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/translate/customTranslate.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/translate/customTranslate.js
new file mode 100644
index 000000000..508040d66
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/translate/customTranslate.js
@@ -0,0 +1,41 @@
+// import translations from "./zh";
+//
+// export default function customTranslate(template, replacements) {
+//   replacements = replacements || {};
+//
+//   // Translate
+//   template = translations[template] || template;
+//
+//   // Replace
+//   return template.replace(/{([^}]+)}/g, function(_, key) {
+//     let str = replacements[key];
+//     if (
+//       translations[replacements[key]] !== null &&
+//       translations[replacements[key]] !== "undefined"
+//     ) {
+//       // eslint-disable-next-line no-mixed-spaces-and-tabs
+//       str = translations[replacements[key]];
+//       // eslint-disable-next-line no-mixed-spaces-and-tabs
+//     }
+//     return str || "{" + key + "}";
+//   });
+// }
+
+export default function customTranslate(translations) {
+  return function(template, replacements) {
+    replacements = replacements || {};
+    // Translate
+    template = translations[template] || template;
+
+    // Replace
+    return template.replace(/{([^}]+)}/g, function(_, key) {
+      let str = replacements[key];
+      if (translations[replacements[key]] !== null && translations[replacements[key]] !== undefined) {
+        // eslint-disable-next-line no-mixed-spaces-and-tabs
+        str = translations[replacements[key]];
+        // eslint-disable-next-line no-mixed-spaces-and-tabs
+      }
+      return str || "{" + key + "}";
+    });
+  };
+}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/translate/zh.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/translate/zh.js
new file mode 100644
index 000000000..855b561ed
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/translate/zh.js
@@ -0,0 +1,238 @@
+/**
+ * This is a sample file that should be replaced with the actual translation.
+ *
+ * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
+ * translations and labels to translate.
+ */
+export default {
+  // 添加部分
+  "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}",
+  Task: "任务",
+  "Send Task": "发送任务",
+  "Receive Task": "接收任务",
+  "User Task": "用户任务",
+  "Manual Task": "手工任务",
+  "Business Rule Task": "业务规则任务",
+  "Service Task": "服务任务",
+  "Script Task": "脚本任务",
+  "Call Activity": "调用活动",
+  "Sub Process (collapsed)": "子流程（折叠的）",
+  "Sub Process (expanded)": "子流程（展开的）",
+  "Start Event": "开始事件",
+  StartEvent: "开始事件",
+  "Intermediate Throw Event": "中间事件",
+  "End Event": "结束事件",
+  EndEvent: "结束事件",
+  "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": "信号中间抛出事件",
+  "Message End Event": "消息结束事件",
+  "Escalation End Event": "定时结束事件",
+  "Error End Event": "错误结束事件",
+  "Cancel End Event": "取消结束事件",
+  "Compensation End Event": "补偿结束事件",
+  "Signal End Event": "信号结束事件",
+  "Terminate End Event": "终止结束事件",
+  "Message Boundary Event": "消息边界事件",
+  "Message Boundary Event (non-interrupting)": "消息边界事件（非中断）",
+  "Timer Boundary Event": "定时边界事件",
+  "Timer Boundary Event (non-interrupting)": "定时边界事件（非中断）",
+  "Escalation Boundary Event": "升级边界事件",
+  "Escalation Boundary Event (non-interrupting)": "升级边界事件（非中断）",
+  "Conditional Boundary Event": "条件边界事件",
+  "Conditional Boundary Event (non-interrupting)": "条件边界事件（非中断）",
+  "Error Boundary Event": "错误边界事件",
+  "Cancel Boundary Event": "取消边界事件",
+  "Signal Boundary Event": "信号边界事件",
+  "Signal Boundary Event (non-interrupting)": "信号边界事件（非中断）",
+  "Compensation Boundary Event": "补偿边界事件",
+  "Exclusive Gateway": "互斥网关",
+  "Parallel Gateway": "并行网关",
+  "Inclusive Gateway": "相容网关",
+  "Complex Gateway": "复杂网关",
+  "Event based Gateway": "事件网关",
+  Transaction: "转运",
+  "Sub Process": "子流程",
+  "Event Sub Process": "事件子流程",
+  "Collapsed Pool": "折叠池",
+  "Expanded Pool": "展开池",
+
+  // Errors
+  "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.": "指定多个组作为逗号分隔的列表。"
+};
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/index.ts b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/index.ts
new file mode 100644
index 000000000..23c773469
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/index.ts
@@ -0,0 +1,37 @@
+import { App } from 'vue'
+import MyProcessDesigner from './designer'
+import MyProcessPenal from './penal'
+import MyProcessViewer from './designer/index2'
+
+const components = [MyProcessDesigner, MyProcessPenal, MyProcessViewer]
+
+// const install = function (Vue) {
+//   components.forEach(component => {
+//     Vue.component(component.name, component)
+//   })
+// }
+
+// if (typeof window !== "undefined" && window.Vue) {
+//   install(window.Vue)
+// }
+//   components.forEach(component => {
+//     Vue.component(component.name, component)
+//   })
+const componentss = {
+  install: (Vue: App): void => {
+    components.forEach((component) => {
+      Vue.component(component.name, component)
+    })
+  }
+}
+// let version = "0.0.1"
+export const MyPD = (app) => {
+  // export default {
+  // app.use(version)
+  // app.use(install)
+  // app.use(MyProcessDesigner)
+  // app.use(MyProcessPenal)
+  // app.use(MyProcessViewer)
+  // app.use(components)
+  app.use(componentss)
+}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue
new file mode 100644
index 000000000..f52728408
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="my-process-palette">
+    <div class="test-button" @click="addTask" @mousedown="addTask">测试任务</div>
+    <div class="test-container" id="palette-container">1</div>
+  </div>
+</template>
+
+<script setup lang="ts" name="MyProcessPalette">
+import { assign } from 'min-dash'
+
+const addTask = (event, options = {}) => {
+  const ElementFactory = window.bpmnInstances.elementFactory
+  const create = window.bpmnInstances.modeler.get('create')
+
+  console.log(ElementFactory, create)
+
+  const shape = ElementFactory.createShape(assign({ type: 'bpmn:UserTask' }, options))
+
+  if (options) {
+    shape.businessObject.di.isExpanded = options.isExpanded
+  }
+
+  console.log(event, 'event')
+  console.log(shape, 'shape')
+  create.start(event, shape)
+}
+</script>
+
+<style scoped lang="scss">
+.my-process-palette {
+  box-sizing: border-box;
+  padding: 80px 20px 20px 20px;
+  .test-button {
+    box-sizing: border-box;
+    padding: 8px 16px;
+    border-radius: 4px;
+    border: 1px solid rgba(24, 144, 255, 0.8);
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
new file mode 100644
index 000000000..eef832669
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="process-panel__container" :style="{ width: `${width}px` }">
+    <el-collapse v-model="activeTab">
+      <el-collapse-item name="base">
+        <!-- class="panel-tab__title" -->
+        <template #title>
+          <Icon icon="ep:info-filled" />
+          常规</template
+        >
+        <ElementBaseInfo
+          :id-edit-disabled="idEditDisabled"
+          :business-object="elementBusinessObject"
+          :type="elementType"
+          :model="model"
+        />
+      </el-collapse-item>
+      <el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
+        <template #title><Icon icon="ep:comment" />消息与信号</template>
+        <signal-and-massage />
+      </el-collapse-item>
+      <el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
+        <template #title><Icon icon="ep:promotion" />流转条件</template>
+        <flow-condition :business-object="elementBusinessObject" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="condition" v-if="formVisible" key="form">
+        <template #title><Icon icon="ep:list" />表单</template>
+        <!-- <element-form :id="elementId" :type="elementType" /> -->
+        友情提示：使用
+        <router-link :to="{ path: '/bpm/manager/form' }"
+          ><el-link type="danger">流程表单</el-link>
+        </router-link>
+        替代，提供更好的表单设计功能
+      </el-collapse-item>
+      <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
+        <template #title><Icon icon="ep:checked" />任务</template>
+        <element-task :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item
+        name="multiInstance"
+        v-if="elementType.indexOf('Task') !== -1"
+        key="multiInstance"
+      >
+        <template #title><Icon icon="ep:help-filled" />多实例</template>
+        <element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="listeners" key="listeners">
+        <template #title><Icon icon="ep:bell-filled" />执行监听器</template>
+        <element-listeners :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
+        <template #title><Icon icon="ep:bell-filled" />任务监听器</template>
+        <user-task-listeners :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="extensions" key="extensions">
+        <template #title><Icon icon="ep:circle-plus-filled" />扩展属性</template>
+        <element-properties :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="other" key="other">
+        <template #title><Icon icon="ep:promotion" />其他</template>
+        <element-other-config :id="elementId" />
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+<script setup lang="ts" name="MyPropertiesPanel">
+import ElementBaseInfo from './base/ElementBaseInfo.vue'
+import ElementOtherConfig from './other/ElementOtherConfig.vue'
+import ElementTask from './task/ElementTask.vue'
+import ElementMultiInstance from './multi-instance/ElementMultiInstance.vue'
+import FlowCondition from './flow-condition/FlowCondition.vue'
+import SignalAndMassage from './signal-message/SignalAndMessage.vue'
+import ElementListeners from './listeners/ElementListeners.vue'
+import ElementProperties from './properties/ElementProperties.vue'
+// import ElementForm from './form/ElementForm.vue'
+import UserTaskListeners from './listeners/UserTaskListeners.vue'
+import { provide, ref, watch, onBeforeUnmount, onMounted } from 'vue'
+import { ElCollapse, ElCollapseItem, ElLink } from 'element-plus'
+/**
+ * 侧边栏
+ * @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
+  },
+  model: Object // 流程模型的数据
+})
+
+const activeTab = ref('base')
+const elementId = ref('')
+const elementType = ref('')
+const elementBusinessObject = ref({}) // 元素 businessObject 镜像，提供给需要做判断的组件使用
+const conditionFormVisible = ref(false) // 流转条件设置
+const formVisible = ref(false) // 表单配置
+const bpmnElement = ref()
+const timer = ref()
+provide('prefix', props.prefix)
+provide('width', props.width)
+const initModels = () => {
+  // console.log(props, 'props')
+  // console.log(props.bpmnModeler, 'sakdjjaskdsajdkasdjkadsjk')
+  // 初始化 modeler 以及其他 moddle
+  // nextTick(() => {
+  if (!props.bpmnModeler) {
+    // 避免加载时 流程图 并未加载完成
+    timer.value = setTimeout(() => initModels(), 10)
+    return
+  }
+  if (timer.value) {
+    clearTimeout(timer.value)
+    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')
+    }
+  }
+
+  console.log(window.bpmnInstances, 'window.bpmnInstances')
+  getActiveElement()
+  // })
+}
+const getActiveElement = () => {
+  // 初始第一个选中元素 bpmn:Process
+  initFormOnChanged(null)
+  props.bpmnModeler.on('import.done', (e) => {
+    console.log(e, 'eeeee')
+    initFormOnChanged(null)
+  })
+  // 监听选择事件，修改当前激活的元素以及表单
+  props.bpmnModeler.on('selection.changed', ({ newSelection }) => {
+    initFormOnChanged(newSelection[0] || null)
+  })
+  props.bpmnModeler.on('element.changed', ({ element }) => {
+    // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
+    if (element && element.id === elementId.value) {
+      initFormOnChanged(element)
+    }
+  })
+}
+// 初始化数据
+const 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
+  bpmnElement.value = activatedElement
+  elementId.value = activatedElement.id
+  elementType.value = activatedElement.type.split(':')[1] || ''
+  elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject))
+  conditionFormVisible.value = !!(
+    elementType.value === 'SequenceFlow' &&
+    activatedElement.source &&
+    activatedElement.source.type.indexOf('StartEvent') === -1
+  )
+  formVisible.value = elementType.value === 'UserTask' || elementType.value === 'StartEvent'
+}
+onMounted(() => {
+  setTimeout(() => {
+    initModels()
+  }, 100)
+})
+onBeforeUnmount(() => {
+  window.bpmnInstances = null
+  console.log(props, 'props1')
+  console.log(props.bpmnModeler, 'props.bpmnModeler1')
+})
+
+watch(
+  () => elementId.value,
+  () => {
+    activeTab.value = 'base'
+  }
+)
+</script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
new file mode 100644
index 000000000..9f4a9f090
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form label-width="90px" :model="needProps" :rules="rules">
+      <div v-if="elementBaseInfo == 'bpmn:Process'">
+        <!-- 如果是 Process 信息的时候，使用自定义表单 -->
+        <el-link
+          href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B"
+          type="danger"
+          target="_blank"
+          >如何实现实现会签、或签？</el-link
+        >
+        <el-form-item label="流程标识" prop="key">
+          <el-input
+            v-model="needProps.key"
+            placeholder="请输入流标标识"
+            :disabled="needProps.id !== undefined && needProps.id.length > 0"
+            @change="handleKeyUpdate"
+          />
+        </el-form-item>
+        <el-form-item label="流程名称" prop="name">
+          <el-input
+            v-model="needProps.name"
+            placeholder="请输入流程名称"
+            clearable
+            @change="handleNameUpdate"
+          />
+        </el-form-item>
+      </div>
+      <div v-else>
+        <el-form-item label="ID">
+          <el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')" />
+        </el-form-item>
+        <el-form-item label="名称">
+          <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
+        </el-form-item>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script setup lang="ts" name="ElementBaseInfo">
+import { ref, reactive, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { ElLink, ElForm, ElFormItem, ElInput } from 'element-plus'
+const props = defineProps({
+  businessObject: Object,
+  model: Object // 流程模型的数据
+})
+const needProps = ref()
+const bpmnElement = ref()
+const elementBaseInfo = ref({})
+// 流程表单的下拉框的数据
+// const forms = ref([])
+// 流程模型的校验
+const rules = reactive({
+  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
+})
+
+const resetBaseInfo = () => {
+  console.log(window, 'window')
+  console.log(bpmnElement, 'bpmnElement')
+
+  bpmnElement.value = window?.bpmnInstances?.bpmnElement
+  console.log(bpmnElement.value, 'resetBaseInfo')
+  elementBaseInfo.value = bpmnElement.value.businessObject
+  // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
+  console.log(elementBaseInfo.value, 'elementBaseInfo')
+}
+const handleKeyUpdate = (value) => {
+  // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
+  if (!value) {
+    return
+  }
+  if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
+    console.log('key 不满足 XML NCName 规则，所以不进行赋值')
+    return
+  }
+  console.log('key 满足 XML NCName 规则，所以进行赋值')
+
+  // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
+  elementBaseInfo.value['id'] = value
+  updateBaseInfo('id')
+}
+const handleNameUpdate = (value) => {
+  console.log(elementBaseInfo, 'elementBaseInfo')
+  if (!value) {
+    return
+  }
+  elementBaseInfo.value['name'] = value
+  updateBaseInfo('name')
+}
+// const handleDescriptionUpdate=(value)=> {
+// TODO 芋艿：documentation 暂时无法修改，后续在看看
+// this.elementBaseInfo['documentation'] = value;
+// this.updateBaseInfo('documentation');
+// }
+const updateBaseInfo = (key) => {
+  console.log(key, 'key')
+  // 触发 elementBaseInfo 对应的字段
+  const attrObj = Object.create(null)
+  // console.log(attrObj, 'attrObj')
+  attrObj[key] = elementBaseInfo.value[key]
+  // console.log(attrObj, 'attrObj111')
+  // const attrObj = {
+  //   id: elementBaseInfo.value[key]
+  //   // di: { id: `${elementBaseInfo.value[key]}_di` }
+  // }
+
+  if (key === 'id') {
+    console.log('jinru')
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+      id: elementBaseInfo.value[key],
+      di: { id: `${elementBaseInfo.value[key]}_di` }
+    })
+  } else {
+    console.log(attrObj, 'attrObj')
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, attrObj)
+  }
+}
+onMounted(() => {
+  // 针对上传的 bpmn 流程图时，需要延迟 1 秒的时间，保证 key 和 name 的更新
+  setTimeout(() => {
+    console.log(props.model, 'props.model')
+    handleKeyUpdate(props.model.key)
+    handleNameUpdate(props.model.name)
+    console.log(props, 'propsssssssssssssssssssss')
+  }, 1000)
+})
+
+watch(
+  () => props.businessObject,
+  (val) => {
+    console.log(val, 'val11111111111111111111')
+    if (val) {
+      nextTick(() => {
+        resetBaseInfo()
+      })
+    }
+  }
+)
+// watch(
+//   () => ({ ...props }),
+//   (oldVal, newVal) => {
+//     console.log(oldVal, 'oldVal')
+//     console.log(newVal, 'newVal')
+//     if (newVal) {
+//       needProps.value = newVal
+//     }
+//   },
+//   {
+//     immediate: true
+//   }
+// )
+// 'model.key': {
+//   immediate: false,
+//   handler: function (val) {
+//     this.handleKeyUpdate(val)
+//   }
+// }
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+</script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
new file mode 100644
index 000000000..a67b5f048
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form :model="flowConditionForm" label-width="90px" size="mini">
+      <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"
+          style="width: 192px"
+          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 setup lang="ts" name="FlowCondition">
+import { ref, nextTick, watch, onBeforeUnmount } from 'vue'
+import { ElSelect, ElForm, ElFormItem, ElInput, ElOption } from 'element-plus'
+
+const props = defineProps({
+  businessObject: Object,
+  type: String
+})
+const flowConditionForm = ref({})
+const bpmnElement = ref()
+const bpmnElementSource = ref()
+const bpmnElementSourceRef = ref()
+const flowConditionRef = ref()
+const resetFlowCondition = () => {
+  bpmnElement.value = window.bpmnInstances.bpmnElement
+  bpmnElementSource.value = bpmnElement.value.source
+  bpmnElementSourceRef.value = bpmnElement.value.businessObject.sourceRef
+  if (
+    bpmnElementSourceRef.value &&
+    bpmnElementSourceRef.value.default &&
+    bpmnElementSourceRef.value.default.id === this.bpmnElement.id
+  ) {
+    // 默认
+    flowConditionForm.value = { type: 'default' }
+  } else if (!bpmnElement.value.businessObject.conditionExpression) {
+    // 普通
+    flowConditionForm.value = { type: 'normal' }
+  } else {
+    // 带条件
+    const conditionExpression = bpmnElement.value.businessObject.conditionExpression
+    flowConditionForm.value = { ...conditionExpression, type: 'condition' }
+    // resource 可直接标识 是否是外部资源脚本
+    if (flowConditionForm.value.resource) {
+      // this.$set(this.flowConditionForm, "conditionType", "script");
+      // this.$set(this.flowConditionForm, "scriptType", "externalScript");
+      flowConditionForm.value['conditionType'] = 'script'
+      flowConditionForm.value['scriptType'] = 'externalScript'
+      return
+    }
+    if (conditionExpression.language) {
+      // this.$set(this.flowConditionForm, "conditionType", "script");
+      // this.$set(this.flowConditionForm, "scriptType", "inlineScript");
+      flowConditionForm.value['conditionType'] = 'script'
+      flowConditionForm.value['scriptType'] = 'inlineScript'
+
+      return
+    }
+    // this.$set(this.flowConditionForm, "conditionType", "expression");
+    flowConditionForm.value['conditionType'] = 'expression'
+  }
+}
+const updateFlowType = (flowType) => {
+  // 正常条件类
+  if (flowType === 'condition') {
+    flowConditionRef.value = window.bpmnInstances.moddle.create('bpmn:FormalExpression')
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+      conditionExpression: flowConditionRef.value
+    })
+    return
+  }
+  // 默认路径
+  if (flowType === 'default') {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+      conditionExpression: null
+    })
+    window.bpmnInstances.modeling.updateProperties(bpmnElementSource.value, {
+      default: bpmnElement.value
+    })
+    return
+  }
+  // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
+  if (
+    bpmnElementSourceRef.value.default &&
+    bpmnElementSourceRef.value.default.id === bpmnElement.value.id
+  ) {
+    window.bpmnInstances.modeling.updateProperties(bpmnElementSource.value, {
+      default: null
+    })
+  }
+  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    conditionExpression: null
+  })
+}
+const updateFlowCondition = () => {
+  let { conditionType, scriptType, body, resource, language } = flowConditionForm.value
+  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", "");
+      flowConditionForm.value['resource'] = ''
+    } else {
+      // this.$set(this.flowConditionForm, "body", "");
+      flowConditionForm.value['body'] = ''
+      condition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', {
+        resource,
+        language
+      })
+    }
+  }
+  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    conditionExpression: condition
+  })
+}
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+  bpmnElementSource.value = null
+  bpmnElementSourceRef.value = null
+})
+
+watch(
+  () => props.businessObject,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        resetFlowCondition()
+      })
+    }
+  }
+)
+</script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
new file mode 100644
index 000000000..79d00aca2
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
@@ -0,0 +1,456 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form label-width="80px">
+      <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><Icon icon="ep:coin" /> 表单字段</el-divider>
+      <el-table :data="fieldList" 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 #default="scope">
+            <el-button type="text" @click="openFieldForm(scope, scope.$index)">编辑</el-button>
+            <el-divider direction="vertical" />
+            <el-button type="text" style="color: #ff4d4f" @click="removeField(scope, scope.$index)"
+              >移除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="element-drawer__button">
+      <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />
+    </div>
+
+    <!--字段配置侧边栏-->
+    <el-drawer
+      v-model="fieldModelVisible"
+      title="字段配置"
+      :size="`${width}px`"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="formFieldForm" label-width="90px">
+        <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>
+
+      <!-- 枚举值设置 -->
+      <template v-if="formFieldForm.type === 'enum'">
+        <el-divider key="enum-divider" />
+        <p class="listener-filed__title" key="enum-title">
+          <span><Icon icon="ep:menu" />枚举值列表：</span>
+          <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"
+            >添加枚举值</el-button
+          >
+        </p>
+        <el-table :data="fieldEnumList" 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 #default="scope">
+              <el-button type="text" @click="openFieldOptionForm(scope, scope.$index, 'enum')"
+                >编辑</el-button
+              >
+              <el-divider direction="vertical" />
+              <el-button
+                type="text"
+                style="color: #ff4d4f"
+                @click="removeFieldOptionItem(scope, scope.$index, 'enum')"
+                >移除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+
+      <!-- 校验规则 -->
+      <el-divider key="validation-divider" />
+      <p class="listener-filed__title" key="validation-title">
+        <span><Icon icon="ep:menu" />约束条件列表：</span>
+        <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"
+          >添加约束</el-button
+        >
+      </p>
+      <el-table :data="fieldConstraintsList" 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 #default="scope">
+            <el-button type="text" @click="openFieldOptionForm(scope, scope.$index, 'constraint')"
+              >编辑</el-button
+            >
+            <el-divider direction="vertical" />
+            <el-button
+              type="text"
+              style="color: #ff4d4f"
+              @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"
+              >移除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 表单属性 -->
+      <el-divider key="property-divider" />
+      <p class="listener-filed__title" key="property-title">
+        <span><Icon icon="ep:menu" />字段属性列表：</span>
+        <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"
+          >添加属性</el-button
+        >
+      </p>
+      <el-table :data="fieldPropertiesList" 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 #default="scope">
+            <el-button type="text" @click="openFieldOptionForm(scope, scope.$index, 'property')"
+              >编辑</el-button
+            >
+            <el-divider direction="vertical" />
+            <el-button
+              type="text"
+              style="color: #ff4d4f"
+              @click="removeFieldOptionItem(scope, scope.$index, 'property')"
+              >移除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 底部按钮 -->
+      <div class="element-drawer__button">
+        <el-button>取 消</el-button>
+        <el-button type="primary" @click="saveField">保 存</el-button>
+      </div>
+    </el-drawer>
+
+    <el-dialog
+      v-model="fieldOptionModelVisible"
+      :title="optionModelTitle"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="fieldOptionForm" label-width="96px">
+        <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 #footer>
+        <el-button @click="fieldOptionModelVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveFieldOption">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="ElementForm">
+import { ref, inject, watch, nextTick } from 'vue'
+import {
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElSelect,
+  ElOption,
+  ElDivider,
+  ElTable,
+  ElTableColumn,
+  ElButton,
+  ElDrawer,
+  ElInput
+} from 'element-plus'
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+const width = inject('width')
+
+const formKey = ref('')
+const businessKey = ref('')
+const optionModelTitle = ref('')
+const fieldList = ref([])
+const formFieldForm = ref({})
+const fieldType = ref({
+  long: '长整型',
+  string: '字符串',
+  boolean: '布尔类',
+  date: '日期类',
+  enum: '枚举类',
+  custom: '自定义类型'
+})
+const formFieldIndex = ref(-1) // 编辑中的字段， -1 为新增
+const formFieldOptionIndex = ref(-1) // 编辑中的字段配置项， -1 为新增
+const fieldModelVisible = ref(false)
+const fieldOptionModelVisible = ref(false)
+const fieldOptionForm = ref({}) // 当前激活的字段配置项数据
+const fieldOptionType = ref('') // 当前激活的字段配置项弹窗 类型
+const fieldEnumList = ref([]) // 枚举值列表
+const fieldConstraintsList = ref([]) // 约束条件列表
+const fieldPropertiesList = ref([]) // 绑定属性列表
+const bpmnELement = ref()
+const elExtensionElements = ref()
+const formData = ref()
+const otherExtensions = ref()
+
+const resetFormList = () => {
+  bpmnELement.value = window.bpmnInstances.bpmnElement
+  formKey.value = bpmnELement.value.businessObject.formKey
+  // 获取元素扩展属性 或者 创建扩展属性
+  elExtensionElements.value =
+    bpmnELement.value.businessObject.get('extensionElements') ||
+    window.bpmnInstances.moddle.create('bpmn:ExtensionElements', { values: [] })
+  // 获取元素表单配置 或者 创建新的表单配置
+  formData.value =
+    elExtensionElements.value.values.filter((ex) => ex.$type === `${prefix}:FormData`)?.[0] ||
+    window.bpmnInstances.moddle.create(`${prefix}:FormData`, { fields: [] })
+
+  // 业务标识 businessKey， 绑定在 formData 中
+  businessKey.value = formData.value.businessKey
+
+  // 保留剩余扩展元素，便于后面更新该元素对应属性
+  otherExtensions.value = elExtensionElements.value.values.filter(
+    (ex) => ex.$type !== `${prefix}:FormData`
+  )
+
+  // 复制原始值，填充表格
+  fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []))
+
+  // 更新元素扩展属性，避免后续报错
+  updateElementExtensions()
+}
+const updateElementFormKey = () => {
+  window.bpmnInstances.modeling.updateProperties(bpmnELement.value, { formKey: formKey.value })
+}
+const updateElementBusinessKey = () => {
+  window.bpmnInstances.modeling.updateModdleProperties(bpmnELement.value, formData.value, {
+    businessKey: businessKey.value
+  })
+}
+// 根据类型调整字段type
+const changeFieldTypeType = (type) => {
+  // this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
+  formFieldForm.value['type'] = type === 'custom' ? '' : type
+}
+
+// 打开字段详情侧边栏
+const openFieldForm = (field, index) => {
+  formFieldIndex.value = index
+  if (index !== -1) {
+    const FieldObject = formData.value.fields[index]
+    formFieldForm.value = JSON.parse(JSON.stringify(field))
+    // 设置自定义类型
+    // this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
+    formFieldForm.value['typeType'] = !fieldType.value[field.type] ? 'custom' : field.type
+    // 初始化枚举值列表
+    field.type === 'enum' &&
+      (fieldEnumList.value = JSON.parse(JSON.stringify(FieldObject?.values || [])))
+    // 初始化约束条件列表
+    fieldConstraintsList.value = JSON.parse(
+      JSON.stringify(FieldObject?.validation?.constraints || [])
+    )
+    // 初始化自定义属性列表
+    fieldPropertiesList.value = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []))
+  } else {
+    formFieldForm.value = {}
+    // 初始化枚举值列表
+    fieldEnumList.value = []
+    // 初始化约束条件列表
+    fieldConstraintsList.value = []
+    // 初始化自定义属性列表
+    fieldPropertiesList.value = []
+  }
+  fieldModelVisible.value = true
+}
+// 打开字段 某个 配置项 弹窗
+const openFieldOptionForm = (option, index, type) => {
+  fieldOptionModelVisible.value = true
+  fieldOptionType.value = type
+  formFieldOptionIndex.value = index
+  if (type === 'property') {
+    fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
+    return (optionModelTitle.value = '属性配置')
+  }
+  if (type === 'enum') {
+    fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
+    return (optionModelTitle.value = '枚举值配置')
+  }
+  fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
+  return (optionModelTitle.value = '约束条件配置')
+}
+
+// 保存字段 某个 配置项
+const saveFieldOption = () => {
+  if (formFieldOptionIndex.value === -1) {
+    if (fieldOptionType.value === 'property') {
+      fieldPropertiesList.value.push(fieldOptionForm.value)
+    }
+    if (fieldOptionType.value === 'constraint') {
+      fieldConstraintsList.value.push(fieldOptionForm.value)
+    }
+    if (fieldOptionType.value === 'enum') {
+      fieldEnumList.value.push(fieldOptionForm.value)
+    }
+  } else {
+    fieldOptionType.value === 'property' &&
+      fieldPropertiesList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
+    fieldOptionType.value === 'constraint' &&
+      fieldConstraintsList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
+    fieldOptionType.value === 'enum' &&
+      fieldEnumList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
+  }
+  fieldOptionModelVisible.value = false
+  fieldOptionForm.value = {}
+}
+// 保存字段配置
+const saveField = () => {
+  const { id, type, label, defaultValue, datePattern } = formFieldForm.value
+  const Field = window.bpmnInstances.moddle.create(`${prefix}:FormField`, { id, type, label })
+  defaultValue && (Field.defaultValue = defaultValue)
+  datePattern && (Field.datePattern = datePattern)
+  // 构建属性
+  if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
+    const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
+      return window.bpmnInstances.moddle.create(`${prefix}:Property`, {
+        id: fp.id,
+        value: fp.value
+      })
+    })
+    Field.properties = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
+      values: fieldPropertyList
+    })
+  }
+  // 构建校验规则
+  if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
+    const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
+      return window.bpmnInstances.moddle.create(`${prefix}:Constraint`, {
+        name: fc.name,
+        config: fc.config
+      })
+    })
+    Field.validation = window.bpmnInstances.moddle.create(`${prefix}:Validation`, {
+      constraints: fieldConstraintList
+    })
+  }
+  // 构建枚举值
+  if (fieldEnumList.value && fieldEnumList.value.length) {
+    Field.values = fieldEnumList.value.map((fe) => {
+      return window.bpmnInstances.moddle.create(`${prefix}:Value`, { name: fe.name, id: fe.id })
+    })
+  }
+  // 更新数组 与 表单配置实例
+  if (formFieldIndex.value === -1) {
+    fieldList.value.push(formFieldForm.value)
+    formData.value.fields.push(Field)
+  } else {
+    fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value)
+    formData.value.fields.splice(formFieldIndex.value, 1, Field)
+  }
+  updateElementExtensions()
+  fieldModelVisible.value = false
+}
+
+// 移除某个 字段的 配置项
+const removeFieldOptionItem = (option, index, type) => {
+  console.log(option, 'option')
+  if (type === 'property') {
+    fieldPropertiesList.value.splice(index, 1)
+    return
+  }
+  if (type === 'enum') {
+    fieldEnumList.value.splice(index, 1)
+    return
+  }
+  fieldConstraintsList.value.splice(index, 1)
+}
+// 移除 字段
+const removeField = (field, index) => {
+  console.log(field, 'field')
+  fieldList.value.splice(index, 1)
+  formData.value.fields.splice(index, 1)
+  updateElementExtensions()
+}
+
+const updateElementExtensions = () => {
+  // 更新回扩展元素
+  const newElExtensionElements = window.bpmnInstances.moddle.create(`bpmn:ExtensionElements`, {
+    values: otherExtensions.value.concat(formData.value)
+  })
+  // 更新到元素上
+  window.bpmnInstances.modeling.updateProperties(bpmnELement.value, {
+    extensionElements: newElExtensionElements
+  })
+}
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length &&
+      nextTick(() => {
+        resetFormList()
+      })
+  },
+  { immediate: true }
+)
+</script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/index.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/index.js
new file mode 100644
index 000000000..6cb0c77c9
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/index.js
@@ -0,0 +1,7 @@
+import MyPropertiesPanel from "./PropertiesPanel.vue";
+
+MyPropertiesPanel.install = function(Vue) {
+  Vue.component(MyPropertiesPanel.name, MyPropertiesPanel);
+};
+
+export default MyPropertiesPanel;
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
new file mode 100644
index 000000000..74a51e7de
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
@@ -0,0 +1,415 @@
+<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 #default="scope">
+          <el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)"
+            >编辑</el-button
+          >
+          <el-divider direction="vertical" />
+          <el-button
+            size="mini"
+            type="text"
+            style="color: #ff4d4f"
+            @click="removeListener(scope, scope.$index)"
+            >移除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="element-drawer__button">
+      <XButton
+        size="mini"
+        type="primary"
+        preIcon="ep:plus"
+        title="添加监听器"
+        @click="openListenerForm(null)"
+      />
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <el-drawer
+      v-model="listenerFormModelVisible"
+      title="执行监听器"
+      :size="`${width}px`"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="listenerForm" label-width="96px" ref="listenerFormRef">
+        <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><Icon icon="ep:menu" />注入字段：</span>
+        <el-button 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 #default="scope">
+            <el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)"
+              >编辑</el-button
+            >
+            <el-divider direction="vertical" />
+            <el-button
+              size="mini"
+              type="text"
+              style="color: #ff4d4f"
+              @click="removeListenerField(scope, scope.$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="字段配置"
+      v-model="listenerFieldFormModelVisible"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form
+        :model="listenerFieldForm"
+        label-width="96spx"
+        ref="listenerFieldFormRef"
+        style="height: 136px"
+      >
+        <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 #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 setup lang="ts" name="ElementListeners">
+import { ref, inject, watch, nextTick } from 'vue'
+import {
+  ElMessageBox,
+  ElTable,
+  ElTableColumn,
+  ElDivider,
+  ElOption,
+  ElSelect,
+  ElInput,
+  ElDrawer,
+  ElDialog,
+  ElForm,
+  ElFormItem
+} from 'element-plus'
+import { createListenerObject, updateElementExtensions } from '../../utils'
+import { initListenerType, initListenerForm, listenerType, fieldType } from './utilSelf'
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+const width = inject('width')
+const elementListenersList = ref([]) // 监听器列表
+const listenerForm = ref({}) // 监听器详情表单
+const listenerFormModelVisible = ref(false) // 监听器 编辑 侧边栏显示状态
+const fieldsListOfListener = ref([])
+const listenerFieldForm = ref({}) // 监听器 注入字段 详情表单
+const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
+const editingListenerIndex = ref(-1) // 监听器所在下标，-1 为新增
+const editingListenerFieldIndex = ref(-1) // 字段所在下标，-1 为新增
+const listenerTypeObject = ref(listenerType)
+const fieldTypeObject = ref(fieldType)
+const bpmnElement = ref()
+const otherExtensionList = ref()
+const bpmnElementListeners = ref()
+const listenerFormRef = ref()
+const listenerFieldFormRef = ref()
+
+const resetListenersList = () => {
+  bpmnElement.value = window.bpmnInstances.bpmnElement
+  otherExtensionList.value = []
+  bpmnElementListeners.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type === `${prefix}:ExecutionListener`
+    ) ?? []
+  elementListenersList.value = bpmnElementListeners.value.map((listener) =>
+    initListenerType(listener)
+  )
+}
+// 打开 监听器详情 侧边栏
+const openListenerForm = (listener, index) => {
+  if (listener) {
+    listenerForm.value = initListenerForm(listener)
+    editingListenerIndex.value = index
+  } else {
+    listenerForm.value = {}
+    editingListenerIndex.value = -1 // 标记为新增
+  }
+  if (listener && listener.fields) {
+    fieldsListOfListener.value = listener.fields.map((field) => ({
+      ...field,
+      fieldType: field.string ? 'string' : 'expression'
+    }))
+  } else {
+    fieldsListOfListener.value = []
+    listenerForm.value['fields'] = []
+  }
+  // 打开侧边栏并清楚验证状态
+  listenerFormModelVisible.value = true
+  nextTick(() => {
+    if (listenerFormRef.value) listenerFormRef.value.clearValidate()
+  })
+}
+// 打开监听器字段编辑弹窗
+const openListenerFieldForm = (field, index) => {
+  listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
+  editingListenerFieldIndex.value = field ? index : -1
+  listenerFieldFormModelVisible.value = true
+  nextTick(() => {
+    if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate()
+  })
+}
+// 保存监听器注入字段
+const saveListenerFiled = async () => {
+  let validateStatus = await listenerFieldFormRef.value.validate()
+  if (!validateStatus) return // 验证不通过直接返回
+  if (editingListenerFieldIndex.value === -1) {
+    fieldsListOfListener.value.push(listenerFieldForm.value)
+    listenerForm.value.fields.push(listenerFieldForm.value)
+  } else {
+    fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
+    listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
+  }
+  listenerFieldFormModelVisible.value = false
+  nextTick(() => {
+    listenerFieldForm.value = {}
+  })
+}
+// 移除监听器字段
+const removeListenerField = (field, index) => {
+  console.log(field, 'field')
+  ElMessageBox.confirm('确认移除该字段吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      fieldsListOfListener.value.splice(index, 1)
+      listenerForm.value.fields.splice(index, 1)
+    })
+    .catch(() => console.info('操作取消'))
+}
+// 移除监听器
+const removeListener = (listener, index) => {
+  console.log(listener, 'listener')
+  ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      bpmnElementListeners.value.splice(index, 1)
+      elementListenersList.value.splice(index, 1)
+      updateElementExtensions(
+        bpmnElement.value,
+        otherExtensionList.value.concat(bpmnElementListeners.value)
+      )
+    })
+    .catch(() => console.info('操作取消'))
+}
+// 保存监听器配置
+const saveListenerConfig = async () => {
+  let validateStatus = await listenerFormRef.value.validate()
+  if (!validateStatus) return // 验证不通过直接返回
+  const listenerObject = createListenerObject(listenerForm.value, false, prefix)
+  if (editingListenerIndex.value === -1) {
+    bpmnElementListeners.value.push(listenerObject)
+    elementListenersList.value.push(listenerForm.value)
+  } else {
+    bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
+    elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
+  }
+  // 保存其他配置
+  otherExtensionList.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type !== `${prefix}:ExecutionListener`
+    ) ?? []
+  updateElementExtensions(
+    bpmnElement.value,
+    otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
+  // 4. 隐藏侧边栏
+  listenerFormModelVisible.value = false
+  listenerForm.value = {}
+}
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length &&
+      nextTick(() => {
+        resetListenersList()
+      })
+  },
+  { immediate: true }
+)
+</script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
new file mode 100644
index 000000000..8d6541fa6
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
@@ -0,0 +1,456 @@
+<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 #default="scope">
+          <el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)"
+            >编辑</el-button
+          >
+          <el-divider direction="vertical" />
+          <el-button
+            size="mini"
+            type="text"
+            style="color: #ff4d4f"
+            @click="removeListener(scope, scope.$index)"
+            >移除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="element-drawer__button">
+      <XButton
+        size="mini"
+        type="primary"
+        preIcon="ep:plus"
+        title="添加监听器"
+        @click="openListenerForm(null)"
+      />
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <el-drawer
+      v-model="listenerFormModelVisible"
+      title="任务监听器"
+      :size="`${width}px`"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef">
+        <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><Icon icon="ep:menu" />注入字段：</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 #default="scope">
+            <el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)"
+              >编辑</el-button
+            >
+            <el-divider direction="vertical" />
+            <el-button
+              size="mini"
+              type="text"
+              style="color: #ff4d4f"
+              @click="removeListenerField(scope, scope.$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="字段配置"
+      v-model="listenerFieldFormModelVisible"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form
+        :model="listenerFieldForm"
+        size="mini"
+        label-width="96px"
+        ref="listenerFieldFormRef"
+        style="height: 136px"
+      >
+        <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 #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 lang="ts" setup name="UserTaskListeners">
+import { ref, inject, watch, nextTick } from 'vue'
+import {
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElSelect,
+  ElOption,
+  ElDivider,
+  ElTable,
+  ElTableColumn,
+  ElMessageBox,
+  ElButton,
+  ElDrawer
+} from 'element-plus'
+import { createListenerObject, updateElementExtensions } from '../../utils'
+import { initListenerForm, initListenerType, eventType, listenerType, fieldType } from './utilSelf'
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+const width = inject('width')
+const elementListenersList = ref([])
+const listenerEventTypeObject = ref(eventType)
+const listenerTypeObject = ref(listenerType)
+const listenerFormModelVisible = ref(false)
+const listenerForm = ref({})
+const fieldTypeObject = ref(fieldType)
+const fieldsListOfListener = ref([])
+const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
+const editingListenerIndex = ref(-1) // 监听器所在下标，-1 为新增
+const editingListenerFieldIndex = ref(-1) // 字段所在下标，-1 为新增
+const listenerFieldForm = ref({}) // 监听器 注入字段 详情表单
+const bpmnElement = ref()
+const bpmnElementListeners = ref()
+const otherExtensionList = ref()
+const listenerFormRef = ref()
+const listenerFieldFormRef = ref()
+
+const resetListenersList = () => {
+  bpmnElement.value = window.bpmnInstances.bpmnElement
+  otherExtensionList.value = []
+  bpmnElementListeners.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type === `${prefix}:TaskListener`
+    ) ?? []
+  elementListenersList.value = bpmnElementListeners.value.map((listener) =>
+    initListenerType(listener)
+  )
+}
+const openListenerForm = (listener, index) => {
+  if (listener) {
+    listenerForm.value = initListenerForm(listener)
+    editingListenerIndex.value = index
+  } else {
+    listenerForm.value = {}
+    editingListenerIndex.value = -1 // 标记为新增
+  }
+  if (listener && listener.fields) {
+    fieldsListOfListener.value = listener.fields.map((field) => ({
+      ...field,
+      fieldType: field.string ? 'string' : 'expression'
+    }))
+  } else {
+    fieldsListOfListener.value = []
+    listenerForm.value['fields'] = []
+  }
+  // 打开侧边栏并清楚验证状态
+  listenerFormModelVisible.value = true
+  nextTick(() => {
+    if (listenerFormRef.value) listenerFormRef.value.clearValidate()
+  })
+}
+// 移除监听器
+const removeListener = (listener, index) => {
+  console.log(listener, 'listener')
+  ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      bpmnElementListeners.value.splice(index, 1)
+      elementListenersList.value.splice(index, 1)
+      updateElementExtensions(
+        bpmnElement.value,
+        otherExtensionList.value.concat(bpmnElementListeners.value)
+      )
+    })
+    .catch(() => console.info('操作取消'))
+}
+// 保存监听器
+const saveListenerConfig = async () => {
+  let validateStatus = await listenerFormRef.value.validate()
+  if (!validateStatus) return // 验证不通过直接返回
+  const listenerObject = createListenerObject(listenerForm.value, true, prefix)
+  if (editingListenerIndex.value === -1) {
+    bpmnElementListeners.value.push(listenerObject)
+    elementListenersList.value.push(listenerForm.value)
+  } else {
+    bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
+    elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
+  }
+  // 保存其他配置
+  otherExtensionList.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type !== `${prefix}:TaskListener`
+    ) ?? []
+  updateElementExtensions(
+    bpmnElement.value,
+    otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
+  // 4. 隐藏侧边栏
+  listenerFormModelVisible.value = false
+  listenerForm.value = {}
+}
+// 打开监听器字段编辑弹窗
+const openListenerFieldForm = (field, index) => {
+  listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
+  editingListenerFieldIndex.value = field ? index : -1
+  listenerFieldFormModelVisible.value = true
+  nextTick(() => {
+    if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate()
+  })
+}
+// 保存监听器注入字段
+const saveListenerFiled = async () => {
+  let validateStatus = await listenerFieldFormRef.value.validate()
+  if (!validateStatus) return // 验证不通过直接返回
+  if (editingListenerFieldIndex.value === -1) {
+    fieldsListOfListener.value.push(listenerFieldForm.value)
+    listenerForm.value.fields.push(listenerFieldForm.value)
+  } else {
+    fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
+    listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
+  }
+  listenerFieldFormModelVisible.value = false
+  nextTick(() => {
+    listenerFieldForm.value = {}
+  })
+}
+// 移除监听器字段
+const removeListenerField = (field, index) => {
+  console.log(field, 'field')
+  ElMessageBox.confirm('确认移除该字段吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      fieldsListOfListener.value.splice(index, 1)
+      listenerForm.value.fields.splice(index, 1)
+    })
+    .catch(() => console.info('操作取消'))
+}
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length &&
+      nextTick(() => {
+        resetListenersList()
+      })
+  },
+  { immediate: true }
+)
+</script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/template.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/template.js
new file mode 100644
index 000000000..5e1bc5775
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/template.js
@@ -0,0 +1,177 @@
+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 #default="scope">
+          <el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)">编辑</el-button>
+          <el-divider direction="vertical" />
+          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(scope, scope.$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 #default="scope">
+            <el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)">编辑</el-button>
+            <el-divider direction="vertical" />
+            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(scope, scope.$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 #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/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.js
new file mode 100644
index 000000000..efd13ec0a
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/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/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
new file mode 100644
index 000000000..169ac0db3
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
@@ -0,0 +1,237 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form label-width="90px">
+      <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" v-show="false">
+          <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 setup lang="ts" name="ElementMultiInstance">
+import { inject, ref, onBeforeUnmount, watch } from 'vue'
+import { ElForm, ElFormItem, ElSelect, ElOption, ElCheckbox, ElInput } from 'element-plus'
+const props = defineProps({
+  businessObject: Object,
+  type: String
+})
+const prefix = inject('prefix')
+const loopCharacteristics = ref('')
+//默认配置，用来覆盖原始不存在的选项，避免报错
+const defaultLoopInstanceForm = ref({
+  completionCondition: '',
+  loopCardinality: '',
+  extensionElements: [],
+  asyncAfter: false,
+  asyncBefore: false,
+  exclusive: false
+})
+const loopInstanceForm = ref({})
+const bpmnElement = ref()
+const multiLoopInstance = ref()
+
+const getElementLoop = (businessObject) => {
+  if (!businessObject.loopCharacteristics) {
+    loopCharacteristics.value = 'Null'
+    loopInstanceForm.value = {}
+    return
+  }
+  if (businessObject.loopCharacteristics.$type === 'bpmn:StandardLoopCharacteristics') {
+    loopCharacteristics.value = 'StandardLoop'
+    loopInstanceForm.value = {}
+    return
+  }
+  if (businessObject.loopCharacteristics.isSequential) {
+    loopCharacteristics.value = 'SequentialMultiInstance'
+  } else {
+    loopCharacteristics.value = 'ParallelMultiInstance'
+  }
+  // 合并配置
+  loopInstanceForm.value = {
+    ...defaultLoopInstanceForm.value,
+    ...businessObject.loopCharacteristics,
+    completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? '',
+    loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ''
+  }
+  // 保留当前元素 businessObject 上的 loopCharacteristics 实例
+  multiLoopInstance.value = window.bpmnInstances.bpmnElement.businessObject.loopCharacteristics
+  // 更新表单
+  if (
+    businessObject.loopCharacteristics.extensionElements &&
+    businessObject.loopCharacteristics.extensionElements.values &&
+    businessObject.loopCharacteristics.extensionElements.values.length
+  ) {
+    loopInstanceForm.value['timeCycle'] =
+      businessObject.loopCharacteristics.extensionElements.values[0].body
+  }
+}
+const changeLoopCharacteristicsType = (type) => {
+  // this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
+  // 取消多实例配置
+  if (type === 'Null') {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { loopCharacteristics: null })
+    return
+  }
+  // 配置循环
+  if (type === 'StandardLoop') {
+    const loopCharacteristicsObject = window.bpmnInstances.moddle.create(
+      'bpmn:StandardLoopCharacteristics'
+    )
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+      loopCharacteristics: loopCharacteristicsObject
+    })
+    multiLoopInstance.value = null
+    return
+  }
+  // 时序
+  if (type === 'SequentialMultiInstance') {
+    multiLoopInstance.value = window.bpmnInstances.moddle.create(
+      'bpmn:MultiInstanceLoopCharacteristics',
+      { isSequential: true }
+    )
+  } else {
+    multiLoopInstance.value = window.bpmnInstances.moddle.create(
+      'bpmn:MultiInstanceLoopCharacteristics',
+      { collection: '${coll_userList}' }
+    )
+  }
+  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    loopCharacteristics: multiLoopInstance.value
+  })
+}
+// 循环基数
+const updateLoopCardinality = (cardinality) => {
+  let loopCardinality = null
+  if (cardinality && cardinality.length) {
+    loopCardinality = window.bpmnInstances.moddle.create('bpmn:FormalExpression', {
+      body: cardinality
+    })
+  }
+  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
+    loopCardinality
+  })
+}
+// 完成条件
+const updateLoopCondition = (condition) => {
+  let completionCondition = null
+  if (condition && condition.length) {
+    completionCondition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', {
+      body: condition
+    })
+  }
+  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
+    completionCondition
+  })
+}
+// 重试周期
+const updateLoopTimeCycle = (timeCycle) => {
+  const extensionElements = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
+    values: [
+      window.bpmnInstances.moddle.create(`${prefix}:FailedJobRetryTimeCycle`, {
+        body: timeCycle
+      })
+    ]
+  })
+  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
+    extensionElements
+  })
+}
+// 直接更新的基础信息
+const updateLoopBase = () => {
+  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
+    collection: loopInstanceForm.value.collection || null,
+    elementVariable: loopInstanceForm.value.elementVariable || null
+  })
+}
+// 各异步状态
+const updateLoopAsync = (key) => {
+  const { asyncBefore, asyncAfter } = loopInstanceForm.value
+  let asyncAttr = Object.create(null)
+  if (!asyncBefore && !asyncAfter) {
+    // this.$set(this.loopInstanceForm, "exclusive", false);
+    loopInstanceForm.value['exclusive'] = false
+    asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null }
+  } else {
+    asyncAttr[key] = loopInstanceForm.value[key]
+  }
+  window.bpmnInstances.modeling.updateModdleProperties(
+    bpmnElement.value,
+    multiLoopInstance.value,
+    asyncAttr
+  )
+}
+
+onBeforeUnmount(() => {
+  multiLoopInstance.value = null
+  bpmnElement.value = null
+})
+
+watch(
+  () => props.type,
+  (val) => {
+    bpmnElement.value = window.bpmnInstances.bpmnElement
+    getElementLoop(val)
+  },
+  { immediate: true }
+)
+</script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
new file mode 100644
index 000000000..9f56209c0
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
@@ -0,0 +1,55 @@
+<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"
+          resize="vertical"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+          @input="updateDocumentation"
+          @blur="updateDocumentation"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="ElementOtherConfig">
+import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
+import { ElInput } from 'element-plus'
+const props = defineProps({
+  id: String
+})
+const documentation = ref('')
+const bpmnElement = ref()
+const updateDocumentation = () => {
+  ;(bpmnElement.value && bpmnElement.value.id === props.id) ||
+    (bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id))
+  const documentation = window.bpmnInstances.bpmnFactory.create('bpmn:Documentation', {
+    text: documentation.value
+  })
+  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    documentation: [documentation]
+  })
+}
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+
+watch(
+  () => props.id,
+  (id) => {
+    if (id && id.length) {
+      nextTick(() => {
+        const documentations = window.bpmnInstances.bpmnElement.businessObject?.documentation
+        documentation.value = documentations && documentations.length ? documentations[0].text : ''
+      })
+    } else {
+      documentation.value = ''
+    }
+  },
+  { immediate: true }
+)
+</script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
new file mode 100644
index 000000000..2b7a3c1de
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="panel-tab__content">
+    <el-table :data="elementPropertyList" 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 #default="scope">
+          <el-button type="text" @click="openAttributesForm(scope, scope.$index)">编辑</el-button>
+          <el-divider direction="vertical" />
+          <el-button
+            type="text"
+            style="color: #ff4d4f"
+            @click="removeAttributes(scope, scope.$index)"
+            >移除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="element-drawer__button">
+      <XButton
+        type="primary"
+        preIcon="ep:plus"
+        title="添加属性"
+        @click="openAttributesForm(null, -1)"
+      />
+    </div>
+
+    <el-dialog
+      v-model="propertyFormModelVisible"
+      title="属性配置"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="propertyForm" label-width="80px" ref="attributeFormRef">
+        <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 #footer>
+        <el-button @click="propertyFormModelVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveAttribute">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="ElementProperties">
+import { ref, inject, nextTick, watch } from 'vue'
+import {
+  ElMessageBox,
+  ElDialog,
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElTable,
+  ElTableColumn,
+  ElDivider,
+  ElInput
+} from 'element-plus'
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+// const width = inject('width')
+
+const elementPropertyList = ref([])
+const propertyForm = ref({})
+const editingPropertyIndex = ref(-1)
+const propertyFormModelVisible = ref(false)
+const bpmnElement = ref()
+const otherExtensionList = ref()
+const bpmnElementProperties = ref()
+const bpmnElementPropertyList = ref()
+const attributeFormRef = ref()
+
+const resetAttributesList = () => {
+  bpmnElement.value = window.bpmnInstances.bpmnElement
+  otherExtensionList.value = [] // 其他扩展配置
+  bpmnElementProperties.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter((ex) => {
+      if (ex.$type !== `${prefix.value}:Properties`) {
+        otherExtensionList.value.push(ex)
+      }
+      return ex.$type === `${prefix.value}:Properties`
+    }) ?? []
+
+  // 保存所有的 扩展属性字段
+  bpmnElementPropertyList.value = bpmnElementProperties.value.reduce(
+    (pre, current) => pre.concat(current.values),
+    []
+  )
+  // 复制 显示
+  elementPropertyList.value = JSON.parse(JSON.stringify(bpmnElementPropertyList.value ?? []))
+}
+const openAttributesForm = (attr, index) => {
+  editingPropertyIndex.value = index
+  propertyForm.value = index === -1 ? {} : JSON.parse(JSON.stringify(attr))
+  propertyFormModelVisible.value = true
+  nextTick(() => {
+    if (attributeFormRef.value) attributeFormRef.value.clearValidate()
+  })
+}
+const removeAttributes = (attr, index) => {
+  console.log(attr, 'attr')
+  ElMessageBox.confirm('确认移除该属性吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      elementPropertyList.value.splice(index, 1)
+      bpmnElementPropertyList.value.splice(index, 1)
+      // 新建一个属性字段的保存列表
+      const propertiesObject = window.bpmnInstances.moddle.create(`${prefix.value}:Properties`, {
+        values: bpmnElementPropertyList.value
+      })
+      updateElementExtensions(propertiesObject)
+      resetAttributesList()
+    })
+    .catch(() => console.info('操作取消'))
+}
+const saveAttribute = () => {
+  const { name, value } = propertyForm.value
+  console.log(bpmnElementPropertyList.value)
+  if (editingPropertyIndex.value !== -1) {
+    window.bpmnInstances.modeling.updateModdleProperties(
+      bpmnElement.value,
+      bpmnElementPropertyList.value[editingPropertyIndex.value],
+      {
+        name,
+        value
+      }
+    )
+  } else {
+    // 新建属性字段
+    const newPropertyObject = window.bpmnInstances.moddle.create(`${prefix.value}:Property`, {
+      name,
+      value
+    })
+    // 新建一个属性字段的保存列表
+    const propertiesObject = window.bpmnInstances.moddle.create(`${prefix.value}:Properties`, {
+      values: bpmnElementPropertyList.value.concat([newPropertyObject])
+    })
+    updateElementExtensions(propertiesObject)
+  }
+  propertyFormModelVisible.value = false
+  resetAttributesList()
+}
+const updateElementExtensions = (properties) => {
+  const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
+    values: otherExtensionList.value.concat([properties])
+  })
+  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    extensionElements: extensions
+  })
+}
+
+watch(
+  () => props.id,
+  (val) => {
+    if (val) {
+      val && val.length && resetAttributesList()
+    }
+  },
+  { immediate: true }
+)
+</script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue
new file mode 100644
index 000000000..8f3b9fb7c
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="panel-tab__content">
+    <div class="panel-tab__content--title">
+      <span><Icon icon="ep:menu" style="margin-right: 8px; color: #555555" />消息列表</span>
+      <XButton type="primary" title="创建新消息" preIcon="ep:plus" @click="openModel('message')" />
+    </div>
+    <el-table :data="messageList" 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><Icon icon="ep:menu" style="margin-right: 8px; color: #555555" />信号列表</span>
+      <XButton type="primary" title="创建新信号" preIcon="ep:plus" @click="openModel('signal')" />
+    </div>
+    <el-table :data="signalList" 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
+      v-model="modelVisible"
+      :title="modelConfig.title"
+      :close-on-click-modal="false"
+      width="400px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="modelObjectForm" label-width="90px">
+        <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 #footer>
+        <el-button @click="modelVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addNewObject">保 存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup lang="ts" name="SignalAndMassage">
+import {
+  ElMessage,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElTable,
+  ElTableColumn,
+  ElButton,
+  ElInput
+} from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+const signalList = ref([])
+const messageList = ref([])
+const modelVisible = ref(false)
+const modelType = ref('')
+const modelObjectForm = ref({})
+const rootElements = ref()
+const messageIdMap = ref()
+const signalIdMap = ref()
+const modelConfig = computed(() => {
+  if (modelType.value === 'message') {
+    return { title: '创建消息', idLabel: '消息ID', nameLabel: '消息名称' }
+  } else {
+    return { title: '创建信号', idLabel: '信号ID', nameLabel: '信号名称' }
+  }
+})
+
+const initDataList = () => {
+  console.log(window, 'window')
+  rootElements.value = window.bpmnInstances.modeler.getDefinitions().rootElements
+  messageIdMap.value = {}
+  signalIdMap.value = {}
+  messageList.value = []
+  signalList.value = []
+  rootElements.value.forEach((el) => {
+    if (el.$type === 'bpmn:Message') {
+      messageIdMap.value[el.id] = true
+      messageList.value.push({ ...el })
+    }
+    if (el.$type === 'bpmn:Signal') {
+      signalIdMap.value[el.id] = true
+      signalList.value.push({ ...el })
+    }
+  })
+}
+const openModel = (type) => {
+  modelType.value = type
+  modelObjectForm.value = {}
+  modelVisible.value = true
+}
+const addNewObject = () => {
+  if (modelType.value === 'message') {
+    if (messageIdMap.value[modelObjectForm.value.id]) {
+      ElMessage.error('该消息已存在，请修改id后重新保存')
+    }
+    const messageRef = window.bpmnInstances.moddle.create('bpmn:Message', modelObjectForm.value)
+    rootElements.value.push(messageRef)
+  } else {
+    if (signalIdMap.value[modelObjectForm.value.id]) {
+      ElMessage.error('该信号已存在，请修改id后重新保存')
+    }
+    const signalRef = window.bpmnInstances.moddle.create('bpmn:Signal', modelObjectForm.value)
+    rootElements.value.push(signalRef)
+  }
+  modelVisible.value = false
+  initDataList()
+}
+
+onMounted(() => {
+  initDataList()
+})
+</script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
new file mode 100644
index 000000000..bac1ccbea
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form size="mini" label-width="90px">
+      <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 setup lang="ts" name="ElementTaskConfig">
+import { ref, watch, shallowRef } from 'vue'
+import { ElForm, ElFormItem, ElCheckbox } from 'element-plus'
+import UserTask from './task-components/UserTask.vue'
+import ScriptTask from './task-components/ScriptTask.vue'
+import ReceiveTask from './task-components/ReceiveTask.vue'
+
+const props = defineProps({
+  id: String,
+  type: String
+})
+const taskConfigForm = ref({
+  asyncAfter: false,
+  asyncBefore: false,
+  exclusive: false
+})
+const witchTaskComponent = shallowRef()
+const installedComponent = ref({
+  // 手工任务与普通任务一致，不需要其他配置
+  // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
+  // 发送任务、服务任务、业务规则任务共用一个相同配置
+  UserTask: 'UserTask', // 用户任务配置
+  ScriptTask: 'ScriptTask', // 脚本任务配置
+  ReceiveTask: 'ReceiveTask' // 消息接收任务
+})
+const bpmnElement = ref()
+
+const changeTaskAsync = () => {
+  if (!taskConfigForm.value.asyncBefore && !taskConfigForm.value.asyncAfter) {
+    taskConfigForm.value.exclusive = false
+  }
+  window.bpmnInstances.modeling.updateProperties(window.bpmnInstances.bpmnElement, {
+    ...taskConfigForm.value
+  })
+}
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = window.bpmnInstances.bpmnElement
+    taskConfigForm.value.asyncBefore = bpmnElement.value?.businessObject?.asyncBefore
+    taskConfigForm.value.asyncAfter = bpmnElement.value?.businessObject?.asyncAfter
+    taskConfigForm.value.exclusive = bpmnElement.value?.businessObject?.exclusive
+  },
+  { immediate: true }
+)
+watch(
+  () => props.type,
+  () => {
+    // witchTaskComponent.value = installedComponent.value[props.type]
+    if (props.type == installedComponent.value.UserTask) {
+      witchTaskComponent.value = UserTask
+    }
+    if (props.type == installedComponent.value.ScriptTask) {
+      witchTaskComponent.value = ScriptTask
+    }
+    if (props.type == installedComponent.value.ReceiveTask) {
+      witchTaskComponent.value = ReceiveTask
+    }
+  },
+  { immediate: true }
+)
+</script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
new file mode 100644
index 000000000..9fc6c5639
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
@@ -0,0 +1,123 @@
+<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>
+        <XButton
+          size="mini"
+          type="primary"
+          preIcon="ep:plus"
+          style="margin-left: 8px"
+          @click="openMessageModel"
+        />
+      </div>
+    </el-form-item>
+    <el-dialog
+      v-model="messageModelVisible"
+      :close-on-click-modal="false"
+      title="创建新消息"
+      width="400px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="newMessageForm" size="mini" label-width="90px">
+        <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 #footer>
+        <el-button size="mini" type="primary" @click="createNewMessage">确 认</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="ReceiveTask">
+import { ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue'
+import { ElMessage, ElFormItem, ElDialog, ElForm, ElSelect, ElOption } from 'element-plus'
+const props = defineProps({
+  id: String,
+  type: String
+})
+const bindMessageId = ref('')
+const newMessageForm = ref({})
+const messageMap = ref({})
+const messageModelVisible = ref(false)
+const bpmnElement = ref()
+const bpmnMessageRefsMap = ref()
+const bpmnRootElements = ref()
+
+const getBindMessage = () => {
+  bpmnElement.value = window.bpmnInstances.bpmnElement
+  bindMessageId.value = bpmnElement.value.businessObject?.messageRef?.id || '-1'
+}
+const openMessageModel = () => {
+  messageModelVisible.value = true
+  newMessageForm.value = {}
+}
+const createNewMessage = () => {
+  if (messageMap.value[newMessageForm.value.id]) {
+    ElMessage.error('该消息已存在，请修改id后重新保存')
+    return
+  }
+  const newMessage = window.bpmnInstances.moddle.create('bpmn:Message', newMessageForm.value)
+  bpmnRootElements.value.push(newMessage)
+  messageMap.value[newMessageForm.value.id] = newMessageForm.value.name
+  bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage
+  messageModelVisible.value = false
+}
+const updateTaskMessage = (messageId) => {
+  if (messageId === '-1') {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+      messageRef: null
+    })
+  } else {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+      messageRef: bpmnMessageRefsMap.value[messageId]
+    })
+  }
+}
+
+onMounted(() => {
+  bpmnMessageRefsMap.value = Object.create(null)
+  bpmnRootElements.value = window.bpmnInstances.modeler.getDefinitions().rootElements
+  bpmnRootElements.value
+    .filter((el) => el.$type === 'bpmn:Message')
+    .forEach((m) => {
+      bpmnMessageRefsMap.value[m.id] = m
+      messageMap.value[m.id] = m.name
+    })
+  messageMap.value['-1'] = '无'
+})
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = window.bpmnInstances.bpmnElement
+    nextTick(() => {
+      getBindMessage()
+    })
+  },
+  { immediate: true }
+)
+</script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
new file mode 100644
index 000000000..714553540
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
@@ -0,0 +1,98 @@
+<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 setup lang="ts" name="ScriptTask">
+import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
+import { ElInput, ElFormItem } from 'element-plus'
+const props = defineProps({
+  id: String,
+  type: String
+})
+const defaultTaskForm = ref({
+  scriptFormat: '',
+  script: '',
+  resource: '',
+  resultVariable: ''
+})
+const scriptTaskForm = ref({})
+const bpmnElement = ref()
+
+const resetTaskForm = () => {
+  for (let key in defaultTaskForm.value) {
+    let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
+    scriptTaskForm.value[key] = value
+  }
+  scriptTaskForm.value.scriptType = scriptTaskForm.value.script ? 'inline' : 'external'
+}
+const updateElementTask = () => {
+  let taskAttr = Object.create(null)
+  taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null
+  taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null
+  if (scriptTaskForm.value.scriptType === 'inline') {
+    taskAttr.script = scriptTaskForm.value.script || null
+    taskAttr.resource = null
+  } else {
+    taskAttr.resource = scriptTaskForm.value.resource || null
+    taskAttr.script = null
+  }
+  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, taskAttr)
+}
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = window.bpmnInstances.bpmnElement
+    nextTick(() => {
+      resetTaskForm()
+    })
+  },
+  { immediate: true }
+)
+</script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
new file mode 100644
index 000000000..f9c47bc22
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
@@ -0,0 +1,97 @@
+<template>
+  <div style="margin-top: 16px">
+    <!--    <el-form-item label="处理用户">-->
+    <!--      <el-select v-model="userTaskForm.assignee" @change="updateElementTask('assignee')">-->
+    <!--        <el-option v-for="ak in mockData" :key="'ass-' + ak" :label="`用户${ak}`" :value="`user${ak}`" />-->
+    <!--      </el-select>-->
+    <!--    </el-form-item>-->
+    <!--    <el-form-item label="候选用户">-->
+    <!--      <el-select v-model="userTaskForm.candidateUsers" multiple collapse-tags @change="updateElementTask('candidateUsers')">-->
+    <!--        <el-option v-for="uk in mockData" :key="'user-' + uk" :label="`用户${uk}`" :value="`user${uk}`" />-->
+    <!--      </el-select>-->
+    <!--    </el-form-item>-->
+    <!--    <el-form-item label="候选分组">-->
+    <!--      <el-select v-model="userTaskForm.candidateGroups" multiple collapse-tags @change="updateElementTask('candidateGroups')">-->
+    <!--        <el-option v-for="gk in mockData" :key="'ass-' + gk" :label="`分组${gk}`" :value="`group${gk}`" />-->
+    <!--      </el-select>-->
+    <!--    </el-form-item>-->
+    <el-form-item label="到期时间">
+      <el-input v-model="userTaskForm.dueDate" clearable @change="updateElementTask('dueDate')" />
+    </el-form-item>
+    <el-form-item label="跟踪时间">
+      <el-input
+        v-model="userTaskForm.followUpDate"
+        clearable
+        @change="updateElementTask('followUpDate')"
+      />
+    </el-form-item>
+    <el-form-item label="优先级">
+      <el-input v-model="userTaskForm.priority" clearable @change="updateElementTask('priority')" />
+    </el-form-item>
+    友情提示：任务的分配规则，使用
+    <router-link target="_blank" :to="{ path: '/bpm/manager/model' }"
+      ><el-link type="danger">流程模型</el-link>
+    </router-link>
+    下的【分配规则】替代，提供指定角色、部门负责人、部门成员、岗位、工作组、自定义脚本等 7
+    种维护的任务分配维度，更加灵活！
+  </div>
+</template>
+
+<script setup lang="ts" name="UserTask">
+import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
+import { ElLink, ElFormItem, ElInput } from 'element-plus'
+const props = defineProps({
+  id: String,
+  type: String
+})
+const defaultTaskForm = ref({
+  assignee: '',
+  candidateUsers: [],
+  candidateGroups: [],
+  dueDate: '',
+  followUpDate: '',
+  priority: ''
+})
+const userTaskForm = ref({})
+// const mockData=ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
+const bpmnElement = ref()
+const resetTaskForm = () => {
+  for (let key in defaultTaskForm.value) {
+    let value
+    if (key === 'candidateUsers' || key === 'candidateGroups') {
+      value = bpmnElement.value?.businessObject[key]
+        ? bpmnElement.value.businessObject[key].split(',')
+        : []
+    } else {
+      value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
+    }
+    userTaskForm.value[key] = value
+  }
+}
+const updateElementTask = (key) => {
+  const taskAttr = Object.create(null)
+  if (key === 'candidateUsers' || key === 'candidateGroups') {
+    taskAttr[key] =
+      userTaskForm.value[key] && userTaskForm.value[key].length
+        ? userTaskForm.value[key].join()
+        : null
+  } else {
+    taskAttr[key] = userTaskForm.value[key] || null
+  }
+  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, taskAttr)
+}
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = window.bpmnInstances.bpmnElement
+    nextTick(() => {
+      resetTaskForm()
+    })
+  },
+  { immediate: true }
+)
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+</script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/element-variables.scss b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/element-variables.scss
new file mode 100644
index 000000000..b61f30fde
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/element-variables.scss
@@ -0,0 +1,70 @@
+/* 改变主题色变量 */
+$--color-primary: #1890ff;
+$--color-danger: #ff4d4f;
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";
+
+.el-table td,
+.el-table th {
+  color: #333;
+}
+.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;
+}
+.el-drawer__body {
+  box-sizing: border-box;
+  padding: 16px;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.el-dialog {
+  margin-top: 50vh !important;
+  transform: translateY(-50%);
+  overflow: hidden;
+}
+.el-dialog__wrapper {
+  overflow: hidden;
+  max-height: 100vh;
+}
+.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/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/index.scss b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/index.scss
new file mode 100644
index 000000000..21a388a90
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/index.scss
@@ -0,0 +1,2 @@
+@import "./process-designer.scss";
+@import "./process-panel.scss";
\ No newline at end of file
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/process-designer.scss b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/process-designer.scss
new file mode 100644
index 000000000..6af945dac
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/process-designer.scss
@@ -0,0 +1,161 @@
+@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';
+
+// 边框被 token-simulation 样式覆盖了
+.djs-palette {
+  background: var(--palette-background-color);
+  border: solid 1px var(--palette-border-color) !important;
+  border-radius: 2px;
+}
+
+.my-process-designer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  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%);
+          transform: rotate(180deg) translate(271%, -10%);
+        }
+      }
+    }
+    .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(0deg);
+      &:after {
+        // transform: rotate(90deg) translate(0, 60%);
+        transform: rotate(0deg) translate(-0%, -5%);
+      }
+    }
+    .align.align-middle i {
+      transform: rotate(-90deg);
+      &:after {
+        // transform: rotate(90deg) translate(0, 60%);
+        transform: rotate(0deg) translate(0, -10%);
+      }
+    }
+  }
+  .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 .two-column .open {
+.open {
+  // .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/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/process-panel.scss b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/process-panel.scss
new file mode 100644
index 000000000..f840cdde6
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/process-panel.scss
@@ -0,0 +1,107 @@
+.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/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js
new file mode 100644
index 000000000..d1a92a08f
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/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/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/highlight/index.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/highlight/index.js
new file mode 100644
index 000000000..bff9211b5
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/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/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/custom-renderer/CustomRenderer.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/custom-renderer/CustomRenderer.js
new file mode 100644
index 000000000..92919f63e
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/custom-renderer/CustomRenderer.js
@@ -0,0 +1,14 @@
+import BpmnRenderer from "bpmn-js/lib/draw/BpmnRenderer";
+
+export default function CustomRenderer(config, eventBus, styles, pathMap, canvas, textRenderer) {
+  BpmnRenderer.call(this, config, eventBus, styles, pathMap, canvas, textRenderer, 2000);
+
+  this.handlers["label"] = function() {
+    return null;
+  };
+}
+
+const F = function() {}; // 核心，利用空对象作为中介；
+F.prototype = BpmnRenderer.prototype; // 核心，将父类的原型赋值给空对象F；
+CustomRenderer.prototype = new F(); // 核心，将 F的实例赋值给子类；
+CustomRenderer.prototype.constructor = CustomRenderer; // 修复子类CustomRenderer的构造器指向，防止原型链的混乱；
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/custom-renderer/index.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/custom-renderer/index.js
new file mode 100644
index 000000000..5e573f13c
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/custom-renderer/index.js
@@ -0,0 +1,6 @@
+import CustomRenderer from "./CustomRenderer";
+
+export default {
+  __init__: ["customRenderer"],
+  customRenderer: ["type", CustomRenderer]
+};
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/rules/CustomRules.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/rules/CustomRules.js
new file mode 100644
index 000000000..d46078b3c
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/rules/CustomRules.js
@@ -0,0 +1,16 @@
+import BpmnRules from "bpmn-js/lib/features/rules/BpmnRules";
+import inherits from "inherits";
+
+export default function CustomRules(eventBus) {
+  BpmnRules.call(this, eventBus);
+}
+
+inherits(CustomRules, BpmnRules);
+
+CustomRules.prototype.canDrop = function() {
+  return false;
+};
+
+CustomRules.prototype.canMove = function() {
+  return false;
+};
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/rules/index.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/rules/index.js
new file mode 100644
index 000000000..ac6a7863a
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/rules/index.js
@@ -0,0 +1,6 @@
+import CustomRules from "./CustomRules";
+
+export default {
+  __init__: ["customRules"],
+  customRules: ["type", CustomRules]
+};
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/translations.ts b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/translations.ts
new file mode 100644
index 000000000..5f9b9a513
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/translations.ts
@@ -0,0 +1,25 @@
+/**
+ * This is a sample file that should be replaced with the actual translation.
+ *
+ * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
+ * translations and labels to translate.
+ */
+export default {
+  'Exclusive Gateway': 'Exklusives Gateway',
+  'Parallel Gateway': 'Paralleles Gateway',
+  'Inclusive Gateway': 'Inklusives Gateway',
+  'Complex Gateway': 'Komplexes Gateway',
+  'Event based Gateway': 'Ereignis-basiertes Gateway',
+  '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)': '升级启动事件 (非中断)'
+}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/directive/clickOutSide.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/directive/clickOutSide.js
new file mode 100644
index 000000000..fc8644ee5
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/directive/clickOutSide.js
@@ -0,0 +1,39 @@
+//outside.js
+
+const ctx = "@@clickoutsideContext";
+
+export default {
+  bind(el, binding, vnode) {
+    const ele = el;
+    const documentHandler = e => {
+      if (!vnode.context || ele.contains(e.target)) {
+        return false;
+      }
+      // 调用指令回调
+      if (binding.expression) {
+        vnode.context[el[ctx].methodName](e);
+      } else {
+        el[ctx].bindingFn(e);
+      }
+    };
+    // 将方法添加到ele
+    ele[ctx] = {
+      documentHandler,
+      methodName: binding.expression,
+      bindingFn: binding.value
+    };
+
+    setTimeout(() => {
+      document.addEventListener("touchstart", documentHandler); // 为document绑定事件
+    });
+  },
+  update(el, binding) {
+    const ele = el;
+    ele[ctx].methodName = binding.expression;
+    ele[ctx].bindingFn = binding.value;
+  },
+  unbind(el) {
+    document.removeEventListener("touchstart", el[ctx].documentHandler); // 解绑
+    delete el[ctx];
+  }
+};
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/index.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/index.js
new file mode 100644
index 000000000..18fe3dddb
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/index.js
@@ -0,0 +1,10 @@
+export function debounce(fn, delay = 500) {
+  let timer;
+  return function(...args) {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    timer = setTimeout(fn.bind(this, ...args), delay);
+  };
+}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/log.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/log.js
new file mode 100644
index 000000000..350e29070
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/log.js
@@ -0,0 +1,63 @@
+class Log {
+  static type = ["primary", "success", "warn", "error", "info"];
+
+  static typeColor(type = "default") {
+    let color = "";
+    switch (type) {
+      case "primary":
+        color = "#2d8cf0";
+        break;
+      case "success":
+        color = "#19be6b";
+        break;
+      case "info":
+        color = "#909399";
+        break;
+      case "warn":
+        color = "#ff9900";
+        break;
+      case "error":
+        color = "#f03f14";
+        break;
+      case "default":
+        color = "#35495E";
+        break;
+      default:
+        color = type;
+        break;
+    }
+    return color;
+  }
+
+  static print(text, type = "default", back = false) {
+    if (typeof text === "object") {
+      // 如果是對象則調用打印對象方式
+      console.dir(text);
+      return;
+    }
+    if (back) {
+      // 如果是打印帶背景圖的
+      console.log(`%c ${text} `, `background:${this.typeColor(type)}; padding: 2px; border-radius: 4px;color: #fff;`);
+    } else {
+      console.log(`%c ${text} `, `color: ${this.typeColor(type)};`);
+    }
+  }
+
+  static pretty(title, text, type = "primary") {
+    if (typeof text === "object") {
+      console.log(
+        `%c ${title} %c`,
+        `background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`
+      );
+      console.dir(text);
+      return;
+    }
+    console.log(
+      `%c ${title} %c ${text} %c`,
+      `background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`,
+      `border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 0 4px 4px 0; color: ${this.typeColor(type)};`,
+      "background:transparent"
+    );
+  }
+}
+export default Log;
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/xml2json.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/xml2json.js
new file mode 100644
index 000000000..01b38cafd
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/xml2json.js
@@ -0,0 +1,50 @@
+function xmlStr2XmlObj(xmlStr) {
+  let xmlObj = {};
+  if (document.all) {
+    const xmlDom = new window.ActiveXObject("Microsoft.XMLDOM");
+    xmlDom.loadXML(xmlStr);
+    xmlObj = xmlDom;
+  } else {
+    xmlObj = new DOMParser().parseFromString(xmlStr, "text/xml");
+  }
+  return xmlObj;
+}
+
+function xml2json(xml) {
+  try {
+    let obj = {};
+    if (xml.children.length > 0) {
+      for (let i = 0; i < xml.children.length; i++) {
+        const item = xml.children.item(i);
+        const nodeName = item.nodeName;
+        if (typeof obj[nodeName] == "undefined") {
+          obj[nodeName] = xml2json(item);
+        } else {
+          if (typeof obj[nodeName].push == "undefined") {
+            const old = obj[nodeName];
+            obj[nodeName] = [];
+            obj[nodeName].push(old);
+          }
+          obj[nodeName].push(xml2json(item));
+        }
+      }
+    } else {
+      obj = xml.textContent;
+    }
+    return obj;
+  } catch (e) {
+    console.log(e.message);
+  }
+}
+
+function xmlObj2json(xml) {
+  const xmlObj = xmlStr2XmlObj(xml);
+  console.log(xmlObj);
+  let jsonObj = {};
+  if (xmlObj.childNodes.length > 0) {
+    jsonObj = xml2json(xmlObj);
+  }
+  return jsonObj;
+}
+
+export default xmlObj2json;
diff --git a/yudao-ui-admin-vue3/src/main.ts b/yudao-ui-admin-vue3/src/main.ts
index 2adf9dc66..7f3ffd2d1 100644
--- a/yudao-ui-admin-vue3/src/main.ts
+++ b/yudao-ui-admin-vue3/src/main.ts
@@ -42,6 +42,13 @@ import './permission'
 
 import { isDevMode } from '@/utils/env'
 
+import { MyPD } from '@/components/bpmnProcessDesigner/package/index.js'
+import '@/components/bpmnProcessDesigner/package/theme/index.scss'
+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 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+
 // 本地开发模式 全局引入 element-plus 样式，加快第一次进入速度
 if (isDevMode()) {
   console.info(isDevMode())
@@ -54,6 +61,8 @@ const setupAll = async () => {
 
   await setupI18n(app)
 
+  MyPD(app)
+
   setupStore(app)
 
   setupGlobCom(app)
diff --git a/yudao-ui-admin-vue3/src/router/modules/remaining.ts b/yudao-ui-admin-vue3/src/router/modules/remaining.ts
index 9dc37a3c9..cb786f0cf 100644
--- a/yudao-ui-admin-vue3/src/router/modules/remaining.ts
+++ b/yudao-ui-admin-vue3/src/router/modules/remaining.ts
@@ -198,6 +198,18 @@ const remainingRouter: AppRouteRecordRaw[] = [
           activeMenu: 'bpm/manager/form/formEditor'
         }
       },
+      {
+        path: '/manager/model/edit',
+        component: () => import('@/views/bpm/model/modelEditor.vue'),
+        name: 'modelEditor',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '设计流程',
+          activeMenu: 'bpm/manager/model/design'
+        }
+      },
       {
         path: '/manager/definition',
         component: () => import('@/views/bpm/definition/index.vue'),
diff --git a/yudao-ui-admin-vue3/src/types/auto-components.d.ts b/yudao-ui-admin-vue3/src/types/auto-components.d.ts
index 0dca956f3..aaf0d35bf 100644
--- a/yudao-ui-admin-vue3/src/types/auto-components.d.ts
+++ b/yudao-ui-admin-vue3/src/types/auto-components.d.ts
@@ -21,54 +21,49 @@ declare module '@vue/runtime-core' {
     DictTag: typeof import('./../components/DictTag/src/DictTag.vue')['default']
     Echart: typeof import('./../components/Echart/src/Echart.vue')['default']
     Editor: typeof import('./../components/Editor/src/Editor.vue')['default']
-    ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElementBaseInfo: typeof import('./../components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue')['default']
+    ElementForm: typeof import('./../components/bpmnProcessDesigner/package/penal/form/ElementForm.vue')['default']
+    ElementListeners: typeof import('./../components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue')['default']
+    ElementMultiInstance: typeof import('./../components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue')['default']
+    ElementOtherConfig: typeof import('./../components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue')['default']
+    ElementProperties: typeof import('./../components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue')['default']
+    ElementTask: typeof import('./../components/bpmnProcessDesigner/package/penal/task/ElementTask.vue')['default']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
-    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTransfer: typeof import('element-plus/es')['ElTransfer']
-    ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     Error: typeof import('./../components/Error/src/Error.vue')['default']
+    FlowCondition: typeof import('./../components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue')['default']
     Form: typeof import('./../components/Form/src/Form.vue')['default']
     Highlight: typeof import('./../components/Highlight/src/Highlight.vue')['default']
     Icon: typeof import('./../components/Icon/src/Icon.vue')['default']
@@ -77,16 +72,25 @@ declare module '@vue/runtime-core' {
     ImageViewer: typeof import('./../components/ImageViewer/src/ImageViewer.vue')['default']
     Infotip: typeof import('./../components/Infotip/src/Infotip.vue')['default']
     InputPassword: typeof import('./../components/InputPassword/src/InputPassword.vue')['default']
+    ProcessDesigner: typeof import('./../components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue')['default']
+    ProcessPalette: typeof import('./../components/bpmnProcessDesigner/package/palette/ProcessPalette.vue')['default']
+    ProcessViewer: typeof import('./../components/bpmnProcessDesigner/package/designer/ProcessViewer.vue')['default']
+    PropertiesPanel: typeof import('./../components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue')['default']
     Qrcode: typeof import('./../components/Qrcode/src/Qrcode.vue')['default']
+    ReceiveTask: typeof import('./../components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ScriptTask: typeof import('./../components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue')['default']
     Search: typeof import('./../components/Search/src/Search.vue')['default']
+    SignalAndMessage: typeof import('./../components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue')['default']
     Sticky: typeof import('./../components/Sticky/src/Sticky.vue')['default']
     Table: typeof import('./../components/Table/src/Table.vue')['default']
     Tooltip: typeof import('./../components/Tooltip/src/Tooltip.vue')['default']
     UploadFile: typeof import('./../components/UploadFile/src/UploadFile.vue')['default']
     UploadImg: typeof import('./../components/UploadFile/src/UploadImg.vue')['default']
     UploadImgs: typeof import('./../components/UploadFile/src/UploadImgs.vue')['default']
+    UserTask: typeof import('./../components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue')['default']
+    UserTaskListeners: typeof import('./../components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue')['default']
     Verify: typeof import('./../components/Verifition/src/Verify.vue')['default']
     VerifyPoints: typeof import('./../components/Verifition/src/Verify/VerifyPoints.vue')['default']
     VerifySlide: typeof import('./../components/Verifition/src/Verify/VerifySlide.vue')['default']
diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue b/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
new file mode 100644
index 000000000..9aec8d344
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="app-container">
+    <!-- 流程设计器，负责绘制流程等 -->
+    <!-- <myProcessDesigner -->
+    <my-process-designer
+      :key="`designer-${reloadIndex}`"
+      v-if="xmlString != undefined"
+      v-model="xmlString"
+      :value="xmlString"
+      v-bind="controlForm"
+      keyboard
+      ref="processDesigner"
+      @init-finished="initModeler"
+      :additionalModel="controlForm.additionalModel"
+      @save="save"
+    />
+    <!-- 流程属性器，负责编辑每个流程节点的属性 -->
+    <!-- <MyProcessPalette -->
+    <my-properties-panel
+      :key="`penal-${reloadIndex}`"
+      :bpmnModeler="modeler"
+      :prefix="controlForm.prefix"
+      class="process-panel"
+      :model="model"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+// import { translations } from '@/components/bpmnProcessDesigner/src/translations'
+// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
+import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
+// 自定义左侧菜单（修改 默认任务 为 用户任务）
+import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
+// import xmlObj2json from "./utils/xml2json";
+// import myProcessDesigner from '@/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue'
+// import MyProcessPalette from '@/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue'
+import { createModelApi, getModelApi, updateModelApi } from '@/api/bpm/model'
+
+import { useRouter } from 'vue-router'
+import { onBeforeMount } from 'vue'
+const router = useRouter()
+
+// 自定义侧边栏
+// import MyProcessPanel from "../package/process-panel/ProcessPanel";
+
+const xmlString = ref(undefined) // BPMN XML
+const modeler = ref(null)
+const reloadIndex = ref(0)
+// const controlDrawerVisible = ref(false)
+// const translationsSelf = translations
+const controlForm = ref({
+  simulation: true,
+  labelEditing: false,
+  labelVisible: false,
+  prefix: 'flowable',
+  headerButtonSize: 'mini',
+  additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
+})
+// const addis = ref({
+//   CustomContentPadProvider,
+//   CustomPaletteProvider
+// })
+// 流程模型的信息
+const model = ref({})
+onBeforeMount(() => {
+  // window.bpmnInstances = {}
+})
+onMounted(() => {
+  // 如果 modelId 非空，说明是修改流程模型
+  const modelId = router.currentRoute.value.query && router.currentRoute.value.query.modelId
+  console.log(modelId, 'modelId')
+  if (modelId) {
+    let data = '4b4909d8-97e7-11ec-8e20-862bc1a4a054'
+    getModelApi(data).then((response) => {
+      console.log(response, 'response')
+      // xmlString.value = response.data.bpmnXml
+      xmlString.value =
+        '<?xml version="1.0" encoding="UTF-8"?>\n<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" id="diagram_Process_1645980650311" targetNamespace="http://activiti.org/bpmn"><bpmn2:process id="flowable_01" name="flowable测试" isExecutable="true"><bpmn2:startEvent id="Event_1iruxim"><bpmn2:outgoing>Flow_0804gmo</bpmn2:outgoing></bpmn2:startEvent><bpmn2:userTask id="task01" name="task01"><bpmn2:incoming>Flow_0804gmo</bpmn2:incoming><bpmn2:outgoing>Flow_0cx479x</bpmn2:outgoing></bpmn2:userTask><bpmn2:sequenceFlow id="Flow_0804gmo" sourceRef="Event_1iruxim" targetRef="task01" /><bpmn2:endEvent id="Event_1mdsccz"><bpmn2:incoming>Flow_0cx479x</bpmn2:incoming></bpmn2:endEvent><bpmn2:sequenceFlow id="Flow_0cx479x" sourceRef="task01" targetRef="Event_1mdsccz" /></bpmn2:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="flowable_01_di" bpmnElement="flowable_01"><bpmndi:BPMNEdge id="Flow_0cx479x_di" bpmnElement="Flow_0cx479x"><di:waypoint x="440" y="350" /><di:waypoint x="492" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_0804gmo_di" bpmnElement="Flow_0804gmo"><di:waypoint x="288" y="350" /><di:waypoint x="340" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNShape id="Event_1iruxim_di" bpmnElement="Event_1iruxim"><dc:Bounds x="252" y="332" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="task01_di" bpmnElement="task01"><dc:Bounds x="340" y="310" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Event_1mdsccz_di" bpmnElement="Event_1mdsccz"><dc:Bounds x="492" y="332" width="36" height="36" /></bpmndi:BPMNShape></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn2:definitions>'
+
+      model.value = {
+        key: 'flowable_01',
+        name: 'flowable测试',
+        description: 'ooxx',
+        category: '1',
+        formType: 10,
+        formId: 11,
+        formCustomCreatePath: null,
+        formCustomViewPath: null,
+        id: '4b4909d8-97e7-11ec-8e20-862bc1a4a054',
+        createTime: 1645978019795,
+        bpmnXml: undefined // 清空 bpmnXml 属性
+      }
+      console.log(modeler.value, 'modeler11111111')
+      // model.value = {
+      //   ...response.data,
+      //   bpmnXml: undefined // 清空 bpmnXml 属性
+      // }
+      // this.controlForm.processId = response.data.key
+    })
+  }
+})
+const initModeler = (item) => {
+  setTimeout(() => {
+    modeler.value = item
+    console.log(item, 'initModeler方法modeler')
+    console.log(modeler.value, 'initModeler方法modeler')
+    // controlForm.value.prefix = '2222'
+  }, 10)
+}
+
+const save = (bpmnXml) => {
+  const data = {
+    ...model.value,
+    bpmnXml: bpmnXml // this.bpmnXml 只是初始化流程图，后续修改无法通过它获得
+  }
+
+  // 修改的提交
+  if (data.id) {
+    updateModelApi(data).then((response) => {
+      console.log(response, 'response')
+      // this.$modal.msgSuccess("修改成功")
+      // 跳转回去
+      close()
+    })
+    return
+  }
+  // 添加的提交
+  createModelApi(data).then((response) => {
+    console.log(response, 'response1')
+    // this.$modal.msgSuccess("保存成功")
+    // 跳转回去
+    close()
+  })
+}
+/** 关闭按钮 */
+const close = () => {
+  // this.$tab.closeOpenPage({ path: "/bpm/manager/model" })
+  router.push({ path: '/bpm/manager/model' })
+}
+</script>
+
+<style lang="scss">
+//body {
+//  overflow: hidden;
+//  margin: 0;
+//  box-sizing: border-box;
+//}
+//.app {
+//  width: 100%;
+//  height: 100%;
+//  box-sizing: border-box;
+//  display: inline-grid;
+//  grid-template-columns: 100px auto max-content;
+//}
+.demo-control-bar {
+  position: fixed;
+  right: 8px;
+  bottom: 8px;
+  z-index: 1;
+  .open-control-dialog {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    font-size: 32px;
+    background: rgba(64, 158, 255, 1);
+    color: #ffffff;
+    cursor: pointer;
+  }
+}
+
+// TODO 芋艿：去掉多余的 faq
+//.info-tip {
+//  position: fixed;
+//  top: 40px;
+//  right: 500px;
+//  z-index: 10;
+//  color: #999999;
+//}
+
+.control-form {
+  .el-radio {
+    width: 100%;
+    line-height: 32px;
+  }
+}
+.element-overlays {
+  box-sizing: border-box;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  color: #fafafa;
+}
+
+.my-process-designer {
+  height: calc(100vh - 84px);
+}
+.process-panel__container {
+  position: absolute;
+  right: 0;
+  top: 55px;
+  height: calc(100vh - 84px);
+}
+</style>

From a03f702fa132524dbd444fcd281350d44894eaff Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Sat, 28 Jan 2023 11:28:52 +0800
Subject: [PATCH 37/59] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=BC=B9=E5=87=BA=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/penal/PropertiesPanel.vue         |   4 +-
 .../package/penal/base/ElementBaseInfo.vue    |  32 +++--
 .../penal/listeners/ElementListeners.vue      |  33 +++---
 .../penal/listeners/UserTaskListeners.vue     |  35 +++---
 .../bpmnProcessDesigner/package/utils.js      |  72 +++++------
 .../package/penal/base/ElementBaseInfo.vue    | 112 +++++++++++-------
 6 files changed, 167 insertions(+), 121 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
index eef832669..d7378fcb7 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="process-panel__container" :style="{ width: `${width}px` }">
+  <div class="process-panel__container" :style="{ width: `${width}px;` }">
     <el-collapse v-model="activeTab">
       <el-collapse-item name="base">
         <!-- class="panel-tab__title" -->
@@ -89,7 +89,7 @@ const props = defineProps({
   },
   width: {
     type: Number,
-    default: 480
+    default: 500
   },
   idEditDisabled: {
     type: Boolean,
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
index 9f4a9f090..7708d46df 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="panel-tab__content">
     <el-form label-width="90px" :model="needProps" :rules="rules">
-      <div v-if="elementBaseInfo == 'bpmn:Process'">
+      <div v-if="needProps.type == 'bpmn:Process'">
         <!-- 如果是 Process 信息的时候，使用自定义表单 -->
         <el-link
           href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B"
@@ -9,9 +9,9 @@
           target="_blank"
           >如何实现实现会签、或签？</el-link
         >
-        <el-form-item label="流程标识" prop="key">
+        <el-form-item label="流程标识" prop="id">
           <el-input
-            v-model="needProps.key"
+            v-model="needProps.id"
             placeholder="请输入流标标识"
             :disabled="needProps.id !== undefined && needProps.id.length > 0"
             @change="handleKeyUpdate"
@@ -38,20 +38,20 @@
   </div>
 </template>
 <script setup lang="ts" name="ElementBaseInfo">
-import { ref, reactive, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { ref, reactive, watch, onMounted, onBeforeUnmount, toRaw } from 'vue'
 import { ElLink, ElForm, ElFormItem, ElInput } from 'element-plus'
 const props = defineProps({
   businessObject: Object,
   model: Object // 流程模型的数据
 })
-const needProps = ref()
+const needProps = ref({})
 const bpmnElement = ref()
 const elementBaseInfo = ref({})
 // 流程表单的下拉框的数据
 // const forms = ref([])
 // 流程模型的校验
 const rules = reactive({
-  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
   name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
 })
 
@@ -60,10 +60,13 @@ const resetBaseInfo = () => {
   console.log(bpmnElement, 'bpmnElement')
 
   bpmnElement.value = window?.bpmnInstances?.bpmnElement
-  console.log(bpmnElement.value, 'resetBaseInfo')
+  console.log(bpmnElement.value, 'resetBaseInfo11111111111')
   elementBaseInfo.value = bpmnElement.value.businessObject
+  needProps.value['type'] = bpmnElement.value.businessObject.$type
+  // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
+
   // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
-  console.log(elementBaseInfo.value, 'elementBaseInfo')
+  console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
 }
 const handleKeyUpdate = (value) => {
   // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
@@ -104,10 +107,15 @@ const updateBaseInfo = (key) => {
   //   id: elementBaseInfo.value[key]
   //   // di: { id: `${elementBaseInfo.value[key]}_di` }
   // }
+  console.log(elementBaseInfo, 'elementBaseInfo11111111111')
+  needProps.value = { ...elementBaseInfo.value, ...needProps.value }
 
   if (key === 'id') {
     console.log('jinru')
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    console.log(window, 'window')
+    console.log(bpmnElement.value, 'bpmnElement')
+    console.log(toRaw(bpmnElement.value), 'bpmnElement')
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
       id: elementBaseInfo.value[key],
       di: { id: `${elementBaseInfo.value[key]}_di` }
     })
@@ -131,9 +139,9 @@ watch(
   (val) => {
     console.log(val, 'val11111111111111111111')
     if (val) {
-      nextTick(() => {
-        resetBaseInfo()
-      })
+      // nextTick(() => {
+      resetBaseInfo()
+      // })
     }
   }
 )
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
index 74a51e7de..b2f38e0c3 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
@@ -11,15 +11,15 @@
       />
       <el-table-column label="操作" width="90px">
         <template #default="scope">
-          <el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)"
+          <el-button size="small" type="text" @click="openListenerForm(scope.row, scope.$index)"
             >编辑</el-button
           >
           <el-divider direction="vertical" />
           <el-button
-            size="mini"
+            size="small"
             type="text"
             style="color: #ff4d4f"
-            @click="removeListener(scope, scope.$index)"
+            @click="removeListener(scope.row, scope.$index)"
             >移除</el-button
           >
         </template>
@@ -138,7 +138,7 @@
       <el-divider />
       <p class="listener-filed__title">
         <span><Icon icon="ep:menu" />注入字段：</span>
-        <el-button type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
+        <XButton type="primary" size="mini" @click="openListenerFieldForm(null)" title="添加字段" />
       </p>
       <el-table
         :data="fieldsListOfListener"
@@ -164,15 +164,18 @@
         />
         <el-table-column label="操作" width="100px">
           <template #default="scope">
-            <el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)"
+            <el-button
+              size="small"
+              type="text"
+              @click="openListenerFieldForm(scope.row, scope.$index)"
               >编辑</el-button
             >
             <el-divider direction="vertical" />
             <el-button
-              size="mini"
+              size="small"
               type="text"
               style="color: #ff4d4f"
-              @click="removeListenerField(scope, scope.$index)"
+              @click="removeListenerField(scope.row, scope.$index)"
               >移除</el-button
             >
           </template>
@@ -180,8 +183,8 @@
       </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>
+        <el-button @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveListenerConfig">保 存</el-button>
       </div>
     </el-drawer>
 
@@ -240,8 +243,8 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
+        <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
       </template>
     </el-dialog>
   </div>
@@ -392,10 +395,10 @@ const saveListenerConfig = async () => {
     bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type !== `${prefix}:ExecutionListener`
     ) ?? []
-  updateElementExtensions(
-    bpmnElement.value,
-    otherExtensionList.value.concat(bpmnElementListeners.value)
-  )
+  // updateElementExtensions(
+  //   bpmnElement.value,
+  //   otherExtensionList.value.concat(bpmnElementListeners.value)
+  // )
   // 4. 隐藏侧边栏
   listenerFormModelVisible.value = false
   listenerForm.value = {}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
index 8d6541fa6..0d4fa10c3 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="panel-tab__content">
-    <el-table :data="elementListenersList" size="mini" border>
+    <el-table :data="elementListenersList" size="small" border>
       <el-table-column label="序号" width="50px" type="index" />
       <el-table-column
         label="事件类型"
@@ -17,15 +17,15 @@
       />
       <el-table-column label="操作" width="90px">
         <template #default="scope">
-          <el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)"
+          <el-button size="small" type="text" @click="openListenerForm(scope.row, scope.$index)"
             >编辑</el-button
           >
           <el-divider direction="vertical" />
           <el-button
-            size="mini"
+            size="small"
             type="text"
             style="color: #ff4d4f"
-            @click="removeListener(scope, scope.$index)"
+            @click="removeListener(scope.row, scope.$index)"
             >移除</el-button
           >
         </template>
@@ -33,7 +33,7 @@
     </el-table>
     <div class="element-drawer__button">
       <XButton
-        size="mini"
+        size="small"
         type="primary"
         preIcon="ep:plus"
         title="添加监听器"
@@ -49,7 +49,7 @@
       append-to-body
       destroy-on-close
     >
-      <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef">
+      <el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef">
         <el-form-item
           label="事件类型"
           prop="event"
@@ -176,13 +176,13 @@
       <el-divider />
       <p class="listener-filed__title">
         <span><Icon icon="ep:menu" />注入字段：</span>
-        <el-button size="mini" type="primary" @click="openListenerFieldForm(null)"
+        <el-button size="small" type="primary" @click="openListenerFieldForm(null)"
           >添加字段</el-button
         >
       </p>
       <el-table
         :data="fieldsListOfListener"
-        size="mini"
+        size="small"
         max-height="240"
         border
         fit
@@ -204,15 +204,18 @@
         />
         <el-table-column label="操作" width="100px">
           <template #default="scope">
-            <el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)"
+            <el-button
+              size="small"
+              type="text"
+              @click="openListenerFieldForm(scope.row, scope.$index)"
               >编辑</el-button
             >
             <el-divider direction="vertical" />
             <el-button
-              size="mini"
+              size="small"
               type="text"
               style="color: #ff4d4f"
-              @click="removeListenerField(scope, scope.$index)"
+              @click="removeListenerField(scope.row, scope.$index)"
               >移除</el-button
             >
           </template>
@@ -220,8 +223,8 @@
       </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>
+        <el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
       </div>
     </el-drawer>
 
@@ -235,7 +238,7 @@
     >
       <el-form
         :model="listenerFieldForm"
-        size="mini"
+        size="small"
         label-width="96px"
         ref="listenerFieldFormRef"
         style="height: 136px"
@@ -281,8 +284,8 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
+        <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
       </template>
     </el-dialog>
   </div>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js
index d1a92a08f..58f08e1ec 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js
@@ -1,69 +1,73 @@
 // 创建监听器实例
-export function createListenerObject(options, isTask, prefix) {
-  const listenerObj = Object.create(null);
-  listenerObj.event = options.event;
-  isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段
+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;
+      listenerObj.script = createScriptObject(options, prefix)
+      break
     case "expressionListener":
-      listenerObj.expression = options.expression;
-      break;
+      listenerObj.expression = options.expression
+      break
     case "delegateExpressionListener":
-      listenerObj.delegateExpression = options.delegateExpression;
-      break;
+      listenerObj.delegateExpression = options.delegateExpression
+      break
     default:
-      listenerObj.class = options.class;
+      listenerObj.class = options.class
   }
   // 注入字段
   if (options.fields) {
     listenerObj.fields = options.fields.map(field => {
-      return createFieldObject(field, prefix);
-    });
+      return createFieldObject(field, prefix)
+    })
   }
   // 任务监听器的 定时器 设置
   if (isTask && options.event === "timeout" && !!options.eventDefinitionType) {
-    const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions });
+    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];
+    })
+    listenerObj.eventDefinitions = [TimerEventDefinition]
   }
-  return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj);
+  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 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 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) {
+export function updateElementExtensions (element, extensionList) {
+  console.log(element, 'element')
+  console.log(extensionList, 'extensionList')
   const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
     values: extensionList
-  });
+  })
+  console.log(extensions, 'extensionsextensions')
+  console.log(window.bpmnInstances.modeling, 'window.bpmnInstances.modeling')
   window.bpmnInstances.modeling.updateProperties(element, {
-    extensionElements: extensions
-  });
+    extensionElements: extensions.values
+  })
 }
 
 // 创建一个id
-export function uuid(length = 8, chars) {
-  let result = "";
-  let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+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)];
+    result += charsString[Math.floor(Math.random() * charsString.length)]
   }
-  return result;
+  return result
 }
diff --git a/yudao-ui-admin/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue b/yudao-ui-admin/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
index a032067cd..29fd32033 100644
--- a/yudao-ui-admin/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
+++ b/yudao-ui-admin/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
@@ -1,23 +1,51 @@
 <template>
   <div class="panel-tab__content">
-    <el-form size="mini" label-width="90px" :model="model" :rules="rules" @submit.native.prevent>
-      <div v-if="elementBaseInfo.$type === 'bpmn:Process'"> <!-- 如果是 Process 信息的时候，使用自定义表单 -->
-        <el-link href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B"
-                 type="danger" target="_blank">如何实现实现会签、或签？</el-link>
+    <el-form
+      size="mini"
+      label-width="90px"
+      :model="model"
+      :rules="rules"
+      @submit.native.prevent
+    >
+      <div v-if="elementBaseInfo.$type === 'bpmn:Process'">
+        <!-- 如果是 Process 信息的时候，使用自定义表单 -->
+        <el-link
+          href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B"
+          type="danger"
+          target="_blank"
+          >如何实现实现会签、或签？</el-link
+        >
         <el-form-item label="流程标识" prop="key">
-          <el-input v-model="model.key" placeholder="请输入流标标识"
-                    :disabled="model.id !== undefined && model.id.length > 0" @change="handleKeyUpdate" />
+          <el-input
+            v-model="model.key"
+            placeholder="请输入流标标识"
+            :disabled="model.id !== undefined && model.id.length > 0"
+            @change="handleKeyUpdate"
+          />
         </el-form-item>
         <el-form-item label="流程名称" prop="name">
-          <el-input v-model="model.name" placeholder="请输入流程名称" clearable @change="handleNameUpdate" />
+          <el-input
+            v-model="model.name"
+            placeholder="请输入流程名称"
+            clearable
+            @change="handleNameUpdate"
+          />
         </el-form-item>
       </div>
       <div v-else>
         <el-form-item label="ID">
-          <el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')"/>
+          <el-input
+            v-model="elementBaseInfo.id"
+            clearable
+            @change="updateBaseInfo('id')"
+          />
         </el-form-item>
         <el-form-item label="名称">
-          <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
+          <el-input
+            v-model="elementBaseInfo.name"
+            clearable
+            @change="updateBaseInfo('name')"
+          />
         </el-form-item>
       </div>
     </el-form>
@@ -31,7 +59,7 @@ export default {
     businessObject: Object,
     model: Object, // 流程模型的数据
   },
-  data() {
+  data () {
     return {
       elementBaseInfo: {},
       // 流程表单的下拉框的数据
@@ -41,14 +69,14 @@ export default {
         key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
         name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
       },
-    };
+    }
   },
   watch: {
     businessObject: {
       immediate: false,
-      handler: function(val) {
+      handler: function (val) {
         if (val) {
-          this.$nextTick(() => this.resetBaseInfo());
+          this.$nextTick(() => this.resetBaseInfo())
         }
       }
     },
@@ -59,7 +87,7 @@ export default {
     //   }
     // }
   },
-  created() {
+  created () {
     // 针对上传的 bpmn 流程图时，需要延迟 1 秒的时间，保证 key 和 name 的更新
     setTimeout(() => {
       this.handleKeyUpdate(this.model.key)
@@ -67,53 +95,53 @@ export default {
     }, 1000)
   },
   methods: {
-    resetBaseInfo() {
-      this.bpmnElement = window?.bpmnInstances?.bpmnElement;
-      this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
+    resetBaseInfo () {
+      this.bpmnElement = window?.bpmnInstances?.bpmnElement
+      this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject))
     },
-    handleKeyUpdate(value) {
+    handleKeyUpdate (value) {
       // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
-      if (!value) {
-        return;
-      }
-      if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
-        console.log('key 不满足 XML NCName 规则，所以不进行赋值');
-        return;
-      }
-      console.log('key 满足 XML NCName 规则，所以进行赋值');
-
-      // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
-      this.elementBaseInfo['id'] = value;
-      this.updateBaseInfo('id');
-    },
-    handleNameUpdate(value) {
       if (!value) {
         return
       }
-      this.elementBaseInfo['name'] = value;
-      this.updateBaseInfo('name');
+      if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
+        console.log('key 不满足 XML NCName 规则，所以不进行赋值')
+        return
+      }
+      console.log('key 满足 XML NCName 规则，所以进行赋值')
+
+      // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
+      this.elementBaseInfo['id'] = value
+      this.updateBaseInfo('id')
     },
-    handleDescriptionUpdate(value) {
+    handleNameUpdate (value) {
+      if (!value) {
+        return
+      }
+      this.elementBaseInfo['name'] = value
+      this.updateBaseInfo('name')
+    },
+    handleDescriptionUpdate (value) {
       // TODO 芋艿：documentation 暂时无法修改，后续在看看
       // this.elementBaseInfo['documentation'] = value;
       // this.updateBaseInfo('documentation');
     },
-    updateBaseInfo(key) {
+    updateBaseInfo (key) {
       // 触发 elementBaseInfo 对应的字段
-      const attrObj = Object.create(null);
-      attrObj[key] = this.elementBaseInfo[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);
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj)
       }
     }
   },
-  beforeDestroy() {
-    this.bpmnElement = null;
+  beforeDestroy () {
+    this.bpmnElement = null
   }
 };
 </script>

From 3ce663c7a5894e193fc0c57567840ff46eca2db6 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Sat, 28 Jan 2023 15:30:52 +0800
Subject: [PATCH 38/59] bug

---
 .../package/designer/ProcessDesigner.vue      | 22 ++++----
 .../package/penal/PropertiesPanel.vue         |  2 +-
 .../package/penal/base/ElementBaseInfo.vue    | 20 ++++----
 .../penal/listeners/ElementListeners.vue      | 17 ++++---
 .../penal/other/ElementOtherConfig.vue        | 11 ++--
 .../penal/properties/ElementProperties.vue    | 18 ++++---
 .../package/{utils.js => utils.ts}            | 51 ++++++++++---------
 .../src/types/auto-components.d.ts            |  3 ++
 .../src/views/bpm/model/modelEditor.vue       |  8 ++-
 9 files changed, 89 insertions(+), 63 deletions(-)
 rename yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/{utils.js => utils.ts} (50%)

diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
index 5ef0e6c1e..2e740d2a2 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -7,22 +7,24 @@
           <XButton preIcon="ep:folder-opened" title="打开文件" @click="refFile.click()" />
           <el-tooltip effect="light" placement="bottom">
             <template #content>
-              <XButton type="text" title="下载为XML文件" @click="downloadProcessAsXml()" />
-              <br />
+              <div style="color: #409eff">
+                <el-button link @click="downloadProcessAsXml()">下载为XML文件</el-button>
+                <br />
 
-              <XButton type="text" title="下载为SVG文件" @click="downloadProcessAsSvg()" />
-              <br />
+                <el-button link @click="downloadProcessAsSvg()">下载为SVG文件</el-button>
+                <br />
 
-              <XButton type="text" title="下载为BPMN文件" @click="downloadProcessAsBpmn()" />
+                <el-button link @click="downloadProcessAsBpmn()">下载为BPMN文件</el-button>
+              </div>
             </template>
             <XButton title="下载文件" preIcon="ep:download" />
           </el-tooltip>
           <el-tooltip effect="light">
             <XButton preIcon="ep:view" title="浏览" />
             <template #content>
-              <el-button type="text" @click="previewProcessXML">预览XML</el-button>
+              <el-button link @click="previewProcessXML">预览XML</el-button>
               <br />
-              <el-button type="text" @click="previewProcessJson">预览JSON</el-button>
+              <el-button link @click="previewProcessJson">预览JSON</el-button>
             </template>
           </el-tooltip>
           <el-tooltip
@@ -594,10 +596,9 @@ const elementsAlign = (align) => {
   const Align = bpmnModeler.get('alignElements')
   const Selection = bpmnModeler.get('selection')
   const SelectedElements = Selection.get()
-  console.log(SelectedElements, 'SelectedElements')
   if (!SelectedElements || SelectedElements.length <= 1) {
     ElMessage.warning('请按住 Shift 键选择多个元素对齐')
-    // alert('请按住 Ctrl 键选择多个元素对齐')
+    // alert('请按住 Ctrl 键选择多个元素对齐
     return
   }
   ElMessageBox.confirm('自动对齐可能造成图形变形，是否继续？', '警告', {
@@ -636,7 +637,10 @@ const previewProcessJson = () => {
 }
 /* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
 const processSave = async () => {
+  console.log(bpmnModeler, 'bpmnModelerbpmnModelerbpmnModelerbpmnModeler')
   const { err, xml } = await bpmnModeler.saveXML()
+  console.log(err, 'errerrerrerrerr')
+  console.log(xml, 'xmlxmlxmlxmlxml')
   // 读取异常时抛出异常
   if (err) {
     // this.$modal.msgError('保存模型失败，请重试！')
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
index d7378fcb7..a649cd733 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
@@ -89,7 +89,7 @@ const props = defineProps({
   },
   width: {
     type: Number,
-    default: 500
+    default: 480
   },
   idEditDisabled: {
     type: Boolean,
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
index 7708d46df..c29434491 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
@@ -45,7 +45,7 @@ const props = defineProps({
   model: Object // 流程模型的数据
 })
 const needProps = ref({})
-const bpmnElement = ref()
+let bpmnElement
 const elementBaseInfo = ref({})
 // 流程表单的下拉框的数据
 // const forms = ref([])
@@ -59,10 +59,10 @@ const resetBaseInfo = () => {
   console.log(window, 'window')
   console.log(bpmnElement, 'bpmnElement')
 
-  bpmnElement.value = window?.bpmnInstances?.bpmnElement
-  console.log(bpmnElement.value, 'resetBaseInfo11111111111')
-  elementBaseInfo.value = bpmnElement.value.businessObject
-  needProps.value['type'] = bpmnElement.value.businessObject.$type
+  bpmnElement = window?.bpmnInstances?.bpmnElement
+  console.log(bpmnElement, 'resetBaseInfo11111111111')
+  elementBaseInfo.value = bpmnElement.businessObject
+  needProps.value['type'] = bpmnElement.businessObject.$type
   // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
 
   // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
@@ -113,15 +113,15 @@ const updateBaseInfo = (key) => {
   if (key === 'id') {
     console.log('jinru')
     console.log(window, 'window')
-    console.log(bpmnElement.value, 'bpmnElement')
-    console.log(toRaw(bpmnElement.value), 'bpmnElement')
-    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
+    console.log(bpmnElement, 'bpmnElement')
+    console.log(toRaw(bpmnElement), 'bpmnElement')
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement), {
       id: elementBaseInfo.value[key],
       di: { id: `${elementBaseInfo.value[key]}_di` }
     })
   } else {
     console.log(attrObj, 'attrObj')
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, attrObj)
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement), attrObj)
   }
 }
 onMounted(() => {
@@ -165,6 +165,6 @@ watch(
 //   }
 // }
 onBeforeUnmount(() => {
-  bpmnElement.value = null
+  bpmnElement = null
 })
 </script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
index b2f38e0c3..f07d5d56d 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
@@ -11,13 +11,12 @@
       />
       <el-table-column label="操作" width="90px">
         <template #default="scope">
-          <el-button size="small" type="text" @click="openListenerForm(scope.row, scope.$index)"
+          <el-button size="small" @click="openListenerForm(scope.row, scope.$index)"
             >编辑</el-button
           >
           <el-divider direction="vertical" />
           <el-button
             size="small"
-            type="text"
             style="color: #ff4d4f"
             @click="removeListener(scope.row, scope.$index)"
             >移除</el-button
@@ -395,10 +394,15 @@ const saveListenerConfig = async () => {
     bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type !== `${prefix}:ExecutionListener`
     ) ?? []
-  // updateElementExtensions(
-  //   bpmnElement.value,
-  //   otherExtensionList.value.concat(bpmnElementListeners.value)
-  // )
+  console.log(bpmnElement.value.height, 'bpmnElement.value')
+  console.log(
+    otherExtensionList.value.concat(bpmnElementListeners.value),
+    'otherExtensionList.value.concat(bpmnElementListeners.value).value'
+  )
+  updateElementExtensions(
+    bpmnElement.value,
+    otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
   // 4. 隐藏侧边栏
   listenerFormModelVisible.value = false
   listenerForm.value = {}
@@ -407,6 +411,7 @@ const saveListenerConfig = async () => {
 watch(
   () => props.id,
   (val) => {
+    console.log(val, 'propsId变化')
     val &&
       val.length &&
       nextTick(() => {
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
index 9f56209c0..e65fc7db1 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
@@ -25,13 +25,16 @@ const props = defineProps({
 const documentation = ref('')
 const bpmnElement = ref()
 const updateDocumentation = () => {
-  ;(bpmnElement.value && bpmnElement.value.id === props.id) ||
-    (bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id))
-  const documentation = window.bpmnInstances.bpmnFactory.create('bpmn:Documentation', {
+  if (bpmnElement.value && bpmnElement.value.id === props.id) {
+    bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id)
+  }
+  // (bpmnElement.value && bpmnElement.value.id === props.id) ||
+  //   (bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id))
+  const documentations = window.bpmnInstances.bpmnFactory.create('bpmn:Documentation', {
     text: documentation.value
   })
   window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
-    documentation: [documentation]
+    documentation: [documentations]
   })
 }
 onBeforeUnmount(() => {
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
index 2b7a3c1de..b304bcb5e 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
@@ -6,12 +6,14 @@
       <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
       <el-table-column label="操作" width="90px">
         <template #default="scope">
-          <el-button type="text" @click="openAttributesForm(scope, scope.$index)">编辑</el-button>
+          <el-button type="text" @click="openAttributesForm(scope.row, scope.$index)"
+            >编辑</el-button
+          >
           <el-divider direction="vertical" />
           <el-button
             type="text"
             style="color: #ff4d4f"
-            @click="removeAttributes(scope, scope.$index)"
+            @click="removeAttributes(scope.roww, scope.$index)"
             >移除</el-button
           >
         </template>
@@ -84,10 +86,10 @@ const resetAttributesList = () => {
   otherExtensionList.value = [] // 其他扩展配置
   bpmnElementProperties.value =
     bpmnElement.value.businessObject?.extensionElements?.values?.filter((ex) => {
-      if (ex.$type !== `${prefix.value}:Properties`) {
+      if (ex.$type !== `${prefix}:Properties`) {
         otherExtensionList.value.push(ex)
       }
-      return ex.$type === `${prefix.value}:Properties`
+      return ex.$type === `${prefix}:Properties`
     }) ?? []
 
   // 保存所有的 扩展属性字段
@@ -116,7 +118,7 @@ const removeAttributes = (attr, index) => {
       elementPropertyList.value.splice(index, 1)
       bpmnElementPropertyList.value.splice(index, 1)
       // 新建一个属性字段的保存列表
-      const propertiesObject = window.bpmnInstances.moddle.create(`${prefix.value}:Properties`, {
+      const propertiesObject = window.bpmnInstances.moddle.create(`${prefix}:Properties`, {
         values: bpmnElementPropertyList.value
       })
       updateElementExtensions(propertiesObject)
@@ -125,8 +127,8 @@ const removeAttributes = (attr, index) => {
     .catch(() => console.info('操作取消'))
 }
 const saveAttribute = () => {
+  console.log(propertyForm.value, 'propertyForm.value')
   const { name, value } = propertyForm.value
-  console.log(bpmnElementPropertyList.value)
   if (editingPropertyIndex.value !== -1) {
     window.bpmnInstances.modeling.updateModdleProperties(
       bpmnElement.value,
@@ -138,12 +140,12 @@ const saveAttribute = () => {
     )
   } else {
     // 新建属性字段
-    const newPropertyObject = window.bpmnInstances.moddle.create(`${prefix.value}:Property`, {
+    const newPropertyObject = window.bpmnInstances.moddle.create(`${prefix}:Property`, {
       name,
       value
     })
     // 新建一个属性字段的保存列表
-    const propertiesObject = window.bpmnInstances.moddle.create(`${prefix.value}:Properties`, {
+    const propertiesObject = window.bpmnInstances.moddle.create(`${prefix}:Properties`, {
       values: bpmnElementPropertyList.value.concat([newPropertyObject])
     })
     updateElementExtensions(propertiesObject)
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
similarity index 50%
rename from yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js
rename to yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
index 58f08e1ec..5123baf9d 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
@@ -1,16 +1,16 @@
 // 创建监听器实例
-export function createListenerObject (options, isTask, prefix) {
+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":
+    case 'scriptListener':
       listenerObj.script = createScriptObject(options, prefix)
       break
-    case "expressionListener":
+    case 'expressionListener':
       listenerObj.expression = options.expression
       break
-    case "delegateExpressionListener":
+    case 'delegateExpressionListener':
       listenerObj.delegateExpression = options.delegateExpression
       break
     default:
@@ -18,54 +18,59 @@ export function createListenerObject (options, isTask, prefix) {
   }
   // 注入字段
   if (options.fields) {
-    listenerObj.fields = options.fields.map(field => {
+    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", {
+  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
+      [`time${options.eventDefinitionType.replace(/^\S/, (s) => s.toUpperCase())}`]: timeDefinition
     })
     listenerObj.eventDefinitions = [TimerEventDefinition]
   }
-  return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj)
+  return window.bpmnInstances.moddle.create(
+    `${prefix}:${isTask ? 'TaskListener' : 'ExecutionListener'}`,
+    listenerObj
+  )
 }
 
 // 创建 监听器的注入字段 实例
-export function createFieldObject (option, prefix) {
+export function createFieldObject(option, prefix) {
   const { name, fieldType, string, expression } = option
-  const fieldConfig = fieldType === "string" ? { name, string } : { name, expression }
+  const fieldConfig = fieldType === 'string' ? { name, string } : { name, expression }
   return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig)
 }
 
 // 创建脚本实例
-export function createScriptObject (options, prefix) {
+export function createScriptObject(options, prefix) {
   const { scriptType, scriptFormat, value, resource } = options
-  const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource }
+  const scriptConfig =
+    scriptType === 'inlineScript' ? { scriptFormat, value } : { scriptFormat, resource }
   return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig)
 }
 
 // 更新元素扩展属性
-export function updateElementExtensions (element, extensionList) {
-  console.log(element, 'element')
-  console.log(extensionList, 'extensionList')
-  const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
+export function updateElementExtensions(element, extensionList) {
+  const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
     values: extensionList
   })
-  console.log(extensions, 'extensionsextensions')
-  console.log(window.bpmnInstances.modeling, 'window.bpmnInstances.modeling')
+  console.log(element, 'elementelementelementelement')
+  console.log(extensions.values, 'extensionsextensionsextensions')
   window.bpmnInstances.modeling.updateProperties(element, {
     extensionElements: extensions.values
   })
+  console.log('ssss')
 }
 
 // 创建一个id
-export function uuid (length = 8, chars) {
-  let result = ""
-  let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
+export function uuid(length = 8, chars) {
+  let result = ''
+  const charsString = chars || '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
   for (let i = length; i > 0; --i) {
     result += charsString[Math.floor(Math.random() * charsString.length)]
   }
diff --git a/yudao-ui-admin-vue3/src/types/auto-components.d.ts b/yudao-ui-admin-vue3/src/types/auto-components.d.ts
index aaf0d35bf..81b2d6ab9 100644
--- a/yudao-ui-admin-vue3/src/types/auto-components.d.ts
+++ b/yudao-ui-admin-vue3/src/types/auto-components.d.ts
@@ -46,10 +46,12 @@ declare module '@vue/runtime-core' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -60,6 +62,7 @@ declare module '@vue/runtime-core' {
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     Error: typeof import('./../components/Error/src/Error.vue')['default']
diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue b/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
index 9aec8d344..a16fe1104 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onBeforeMount } from 'vue'
 // import { translations } from '@/components/bpmnProcessDesigner/src/translations'
 // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
 import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
@@ -39,7 +39,7 @@ import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/desi
 import { createModelApi, getModelApi, updateModelApi } from '@/api/bpm/model'
 
 import { useRouter } from 'vue-router'
-import { onBeforeMount } from 'vue'
+import { ElMessage } from 'element-plus'
 const router = useRouter()
 
 // 自定义侧边栏
@@ -115,12 +115,15 @@ const save = (bpmnXml) => {
     ...model.value,
     bpmnXml: bpmnXml // this.bpmnXml 只是初始化流程图，后续修改无法通过它获得
   }
+  console.log(data, 'data')
 
   // 修改的提交
   if (data.id) {
     updateModelApi(data).then((response) => {
       console.log(response, 'response')
       // this.$modal.msgSuccess("修改成功")
+      ElMessage.success('修改成功')
+
       // 跳转回去
       close()
     })
@@ -130,6 +133,7 @@ const save = (bpmnXml) => {
   createModelApi(data).then((response) => {
     console.log(response, 'response1')
     // this.$modal.msgSuccess("保存成功")
+    ElMessage.success('保存成功')
     // 跳转回去
     close()
   })

From b704aae49b50b7b0e8f2e0b49299d512a53a6d3e Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Sat, 28 Jan 2023 17:42:19 +0800
Subject: [PATCH 39/59] =?UTF-8?q?=E6=8A=A5=E9=94=99=E5=9F=BA=E6=9C=AC?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3=EF=BC=8C=E6=95=B0=E6=8D=AE=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=E8=BF=98=E6=9C=89=E4=BA=9B=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/penal/PropertiesPanel.vue         |  2 +-
 .../package/penal/base/ElementBaseInfo.vue    | 32 ++++++----
 .../penal/flow-condition/FlowCondition.vue    | 14 ++---
 .../package/penal/form/ElementForm.vue        | 10 +--
 .../penal/listeners/ElementListeners.vue      | 11 ++--
 .../penal/listeners/UserTaskListeners.vue     |  4 ++
 .../package/penal/listeners/utilSelf.js       | 62 -------------------
 .../package/penal/listeners/utilSelf.ts       | 62 +++++++++++++++++++
 .../multi-instance/ElementMultiInstance.vue   | 54 ++++++++++------
 .../penal/other/ElementOtherConfig.vue        | 17 ++++-
 .../penal/properties/ElementProperties.vue    | 10 +--
 .../task/task-components/ReceiveTask.vue      |  6 +-
 .../penal/task/task-components/ScriptTask.vue |  4 +-
 .../penal/task/task-components/UserTask.vue   |  4 +-
 .../bpmnProcessDesigner/package/utils.ts      |  6 +-
 .../src/views/bpm/model/modelEditor.vue       |  5 +-
 16 files changed, 171 insertions(+), 132 deletions(-)
 delete mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.ts

diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
index a649cd733..eef832669 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="process-panel__container" :style="{ width: `${width}px;` }">
+  <div class="process-panel__container" :style="{ width: `${width}px` }">
     <el-collapse v-model="activeTab">
       <el-collapse-item name="base">
         <!-- class="panel-tab__title" -->
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
index c29434491..1ffbd6dcf 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
@@ -45,7 +45,7 @@ const props = defineProps({
   model: Object // 流程模型的数据
 })
 const needProps = ref({})
-let bpmnElement
+const bpmnElement = ref()
 const elementBaseInfo = ref({})
 // 流程表单的下拉框的数据
 // const forms = ref([])
@@ -57,12 +57,12 @@ const rules = reactive({
 
 const resetBaseInfo = () => {
   console.log(window, 'window')
-  console.log(bpmnElement, 'bpmnElement')
+  console.log(bpmnElement.value, 'bpmnElement')
 
-  bpmnElement = window?.bpmnInstances?.bpmnElement
-  console.log(bpmnElement, 'resetBaseInfo11111111111')
-  elementBaseInfo.value = bpmnElement.businessObject
-  needProps.value['type'] = bpmnElement.businessObject.$type
+  bpmnElement.value = window?.bpmnInstances?.bpmnElement
+  console.log(bpmnElement.value, 'resetBaseInfo11111111111')
+  elementBaseInfo.value = bpmnElement.value.businessObject
+  needProps.value['type'] = bpmnElement.value.businessObject.$type
   // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
 
   // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
@@ -81,7 +81,10 @@ const handleKeyUpdate = (value) => {
 
   // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
   elementBaseInfo.value['id'] = value
-  updateBaseInfo('id')
+
+  setTimeout(() => {
+    updateBaseInfo('id')
+  }, 100)
 }
 const handleNameUpdate = (value) => {
   console.log(elementBaseInfo, 'elementBaseInfo')
@@ -89,7 +92,10 @@ const handleNameUpdate = (value) => {
     return
   }
   elementBaseInfo.value['name'] = value
-  updateBaseInfo('name')
+
+  setTimeout(() => {
+    updateBaseInfo('name')
+  }, 100)
 }
 // const handleDescriptionUpdate=(value)=> {
 // TODO 芋艿：documentation 暂时无法修改，后续在看看
@@ -113,15 +119,15 @@ const updateBaseInfo = (key) => {
   if (key === 'id') {
     console.log('jinru')
     console.log(window, 'window')
-    console.log(bpmnElement, 'bpmnElement')
-    console.log(toRaw(bpmnElement), 'bpmnElement')
-    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement), {
+    console.log(bpmnElement.value, 'bpmnElement')
+    console.log(toRaw(bpmnElement.value), 'bpmnElement')
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
       id: elementBaseInfo.value[key],
       di: { id: `${elementBaseInfo.value[key]}_di` }
     })
   } else {
     console.log(attrObj, 'attrObj')
-    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement), attrObj)
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), attrObj)
   }
 }
 onMounted(() => {
@@ -165,6 +171,6 @@ watch(
 //   }
 // }
 onBeforeUnmount(() => {
-  bpmnElement = null
+  bpmnElement.value = null
 })
 </script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
index a67b5f048..221a6a7ee 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
@@ -63,7 +63,7 @@
 </template>
 
 <script setup lang="ts" name="FlowCondition">
-import { ref, nextTick, watch, onBeforeUnmount } from 'vue'
+import { ref, nextTick, watch, onBeforeUnmount, toRaw } from 'vue'
 import { ElSelect, ElForm, ElFormItem, ElInput, ElOption } from 'element-plus'
 
 const props = defineProps({
@@ -117,17 +117,17 @@ const updateFlowType = (flowType) => {
   // 正常条件类
   if (flowType === 'condition') {
     flowConditionRef.value = window.bpmnInstances.moddle.create('bpmn:FormalExpression')
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
       conditionExpression: flowConditionRef.value
     })
     return
   }
   // 默认路径
   if (flowType === 'default') {
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
       conditionExpression: null
     })
-    window.bpmnInstances.modeling.updateProperties(bpmnElementSource.value, {
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElementSource.value), {
       default: bpmnElement.value
     })
     return
@@ -137,11 +137,11 @@ const updateFlowType = (flowType) => {
     bpmnElementSourceRef.value.default &&
     bpmnElementSourceRef.value.default.id === bpmnElement.value.id
   ) {
-    window.bpmnInstances.modeling.updateProperties(bpmnElementSource.value, {
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElementSource.value), {
       default: null
     })
   }
-  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
     conditionExpression: null
   })
 }
@@ -164,7 +164,7 @@ const updateFlowCondition = () => {
       })
     }
   }
-  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
     conditionExpression: condition
   })
 }
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
index 79d00aca2..c475a17b3 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
@@ -205,7 +205,7 @@
 </template>
 
 <script setup lang="ts" name="ElementForm">
-import { ref, inject, watch, nextTick } from 'vue'
+import { ref, inject, watch, nextTick, toRaw } from 'vue'
 import {
   ElDialog,
   ElForm,
@@ -280,10 +280,12 @@ const resetFormList = () => {
   updateElementExtensions()
 }
 const updateElementFormKey = () => {
-  window.bpmnInstances.modeling.updateProperties(bpmnELement.value, { formKey: formKey.value })
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnELement.value), {
+    formKey: formKey.value
+  })
 }
 const updateElementBusinessKey = () => {
-  window.bpmnInstances.modeling.updateModdleProperties(bpmnELement.value, formData.value, {
+  window.bpmnInstances.modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
     businessKey: businessKey.value
   })
 }
@@ -437,7 +439,7 @@ const updateElementExtensions = () => {
     values: otherExtensions.value.concat(formData.value)
   })
   // 更新到元素上
-  window.bpmnInstances.modeling.updateProperties(bpmnELement.value, {
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnELement.value), {
     extensionElements: newElExtensionElements
   })
 }
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
index f07d5d56d..cc8de5413 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
@@ -249,7 +249,7 @@
   </div>
 </template>
 <script setup lang="ts" name="ElementListeners">
-import { ref, inject, watch, nextTick } from 'vue'
+import { ref, inject, watch, nextTick, toRaw } from 'vue'
 import {
   ElMessageBox,
   ElTable,
@@ -288,8 +288,10 @@ const listenerFormRef = ref()
 const listenerFieldFormRef = ref()
 
 const resetListenersList = () => {
+  console.log(window, 'window')
   bpmnElement.value = window.bpmnInstances.bpmnElement
   otherExtensionList.value = []
+  console.log(bpmnElement.value, 'bpmnElement.value')
   bpmnElementListeners.value =
     bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type === `${prefix}:ExecutionListener`
@@ -394,14 +396,15 @@ const saveListenerConfig = async () => {
     bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type !== `${prefix}:ExecutionListener`
     ) ?? []
-  console.log(bpmnElement.value.height, 'bpmnElement.value')
+  console.log(bpmnElement.value, 'bpmnElement.value')
+  console.log(toRaw(bpmnElement.value), 'toRawtoRawtoRawtoRawtoRaw')
   console.log(
     otherExtensionList.value.concat(bpmnElementListeners.value),
     'otherExtensionList.value.concat(bpmnElementListeners.value).value'
   )
   updateElementExtensions(
-    bpmnElement.value,
-    otherExtensionList.value.concat(bpmnElementListeners.value)
+    toRaw(bpmnElement.value),
+    toRaw(otherExtensionList.value.concat(bpmnElementListeners.value))
   )
   // 4. 隐藏侧边栏
   listenerFormModelVisible.value = false
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
index 0d4fa10c3..0c81a63de 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
@@ -331,6 +331,10 @@ const listenerFormRef = ref()
 const listenerFieldFormRef = ref()
 
 const resetListenersList = () => {
+  console.log(
+    window.bpmnInstances.bpmnElement,
+    'window.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElement'
+  )
   bpmnElement.value = window.bpmnInstances.bpmnElement
   otherExtensionList.value = []
   bpmnElementListeners.value =
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.js
deleted file mode 100644
index efd13ec0a..000000000
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.js
+++ /dev/null
@@ -1,62 +0,0 @@
-// 初始化表单数据
-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/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.ts b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.ts
new file mode 100644
index 000000000..5f46abd05
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.ts
@@ -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 (const 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/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
index 169ac0db3..ce973b635 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script setup lang="ts" name="ElementMultiInstance">
-import { inject, ref, onBeforeUnmount, watch } from 'vue'
+import { inject, ref, onBeforeUnmount, watch, toRaw } from 'vue'
 import { ElForm, ElFormItem, ElSelect, ElOption, ElCheckbox, ElInput } from 'element-plus'
 const props = defineProps({
   businessObject: Object,
@@ -129,7 +129,9 @@ const changeLoopCharacteristicsType = (type) => {
   // this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
   // 取消多实例配置
   if (type === 'Null') {
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { loopCharacteristics: null })
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
+      loopCharacteristics: null
+    })
     return
   }
   // 配置循环
@@ -137,7 +139,7 @@ const changeLoopCharacteristicsType = (type) => {
     const loopCharacteristicsObject = window.bpmnInstances.moddle.create(
       'bpmn:StandardLoopCharacteristics'
     )
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
       loopCharacteristics: loopCharacteristicsObject
     })
     multiLoopInstance.value = null
@@ -155,7 +157,7 @@ const changeLoopCharacteristicsType = (type) => {
       { collection: '${coll_userList}' }
     )
   }
-  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
     loopCharacteristics: multiLoopInstance.value
   })
 }
@@ -167,9 +169,13 @@ const updateLoopCardinality = (cardinality) => {
       body: cardinality
     })
   }
-  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
-    loopCardinality
-  })
+  window.bpmnInstances.modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      loopCardinality
+    }
+  )
 }
 // 完成条件
 const updateLoopCondition = (condition) => {
@@ -179,9 +185,13 @@ const updateLoopCondition = (condition) => {
       body: condition
     })
   }
-  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
-    completionCondition
-  })
+  window.bpmnInstances.modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      completionCondition
+    }
+  )
 }
 // 重试周期
 const updateLoopTimeCycle = (timeCycle) => {
@@ -192,16 +202,24 @@ const updateLoopTimeCycle = (timeCycle) => {
       })
     ]
   })
-  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
-    extensionElements
-  })
+  window.bpmnInstances.modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      extensionElements
+    }
+  )
 }
 // 直接更新的基础信息
 const updateLoopBase = () => {
-  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
-    collection: loopInstanceForm.value.collection || null,
-    elementVariable: loopInstanceForm.value.elementVariable || null
-  })
+  window.bpmnInstances.modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      collection: loopInstanceForm.value.collection || null,
+      elementVariable: loopInstanceForm.value.elementVariable || null
+    }
+  )
 }
 // 各异步状态
 const updateLoopAsync = (key) => {
@@ -215,7 +233,7 @@ const updateLoopAsync = (key) => {
     asyncAttr[key] = loopInstanceForm.value[key]
   }
   window.bpmnInstances.modeling.updateModdleProperties(
-    bpmnElement.value,
+    toRaw(bpmnElement.value),
     multiLoopInstance.value,
     asyncAttr
   )
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
index e65fc7db1..37b180f01 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts" name="ElementOtherConfig">
-import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
+import { ref, watch, nextTick, onBeforeUnmount, toRaw } from 'vue'
 import { ElInput } from 'element-plus'
 const props = defineProps({
   id: String
@@ -25,15 +25,26 @@ const props = defineProps({
 const documentation = ref('')
 const bpmnElement = ref()
 const updateDocumentation = () => {
+  console.log(props, 'props')
+  console.log(window, 'window')
+  console.log(
+    window.bpmnInstances.elementRegistry.get(props.id),
+    'window.bpmnInstances.elementRegistry.get(props.id)'
+  )
+  console.log(bpmnElement.value, 'bpmnElement.value ')
   if (bpmnElement.value && bpmnElement.value.id === props.id) {
-    bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id)
+    bpmnElement.value = window?.bpmnInstances.elementRegistry.get(props.id)
   }
+  console.log(
+    bpmnElement.value,
+    'bpmnElement.value bpmnElement.value bpmnElement.value bpmnElement.value bpmnElement.value bpmnElement.value '
+  )
   // (bpmnElement.value && bpmnElement.value.id === props.id) ||
   //   (bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id))
   const documentations = window.bpmnInstances.bpmnFactory.create('bpmn:Documentation', {
     text: documentation.value
   })
-  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
     documentation: [documentations]
   })
 }
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
index b304bcb5e..2764fb73c 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
@@ -13,7 +13,7 @@
           <el-button
             type="text"
             style="color: #ff4d4f"
-            @click="removeAttributes(scope.roww, scope.$index)"
+            @click="removeAttributes(scope.row, scope.$index)"
             >移除</el-button
           >
         </template>
@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts" name="ElementProperties">
-import { ref, inject, nextTick, watch } from 'vue'
+import { ref, inject, nextTick, watch, toRaw } from 'vue'
 import {
   ElMessageBox,
   ElDialog,
@@ -131,8 +131,8 @@ const saveAttribute = () => {
   const { name, value } = propertyForm.value
   if (editingPropertyIndex.value !== -1) {
     window.bpmnInstances.modeling.updateModdleProperties(
-      bpmnElement.value,
-      bpmnElementPropertyList.value[editingPropertyIndex.value],
+      toRaw(bpmnElement.value),
+      toRaw(bpmnElementPropertyList.value)[toRaw(editingPropertyIndex.value)],
       {
         name,
         value
@@ -157,7 +157,7 @@ const updateElementExtensions = (properties) => {
   const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
     values: otherExtensionList.value.concat([properties])
   })
-  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
     extensionElements: extensions
   })
 }
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
index 9fc6c5639..c4816dd3e 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script setup lang="ts" name="ReceiveTask">
-import { ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue'
+import { ref, watch, onBeforeUnmount, onMounted, nextTick, toRaw } from 'vue'
 import { ElMessage, ElFormItem, ElDialog, ElForm, ElSelect, ElOption } from 'element-plus'
 const props = defineProps({
   id: String,
@@ -85,11 +85,11 @@ const createNewMessage = () => {
 }
 const updateTaskMessage = (messageId) => {
   if (messageId === '-1') {
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
       messageRef: null
     })
   } else {
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
       messageRef: bpmnMessageRefsMap.value[messageId]
     })
   }
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
index 714553540..f8583ff0c 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script setup lang="ts" name="ScriptTask">
-import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
+import { ref, watch, nextTick, onBeforeUnmount, toRaw } from 'vue'
 import { ElInput, ElFormItem } from 'element-plus'
 const props = defineProps({
   id: String,
@@ -78,7 +78,7 @@ const updateElementTask = () => {
     taskAttr.resource = scriptTaskForm.value.resource || null
     taskAttr.script = null
   }
-  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, taskAttr)
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
 }
 
 onBeforeUnmount(() => {
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
index f9c47bc22..7d279c952 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts" name="UserTask">
-import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
+import { ref, watch, nextTick, onBeforeUnmount, toRaw } from 'vue'
 import { ElLink, ElFormItem, ElInput } from 'element-plus'
 const props = defineProps({
   id: String,
@@ -78,7 +78,7 @@ const updateElementTask = (key) => {
   } else {
     taskAttr[key] = userTaskForm.value[key] || null
   }
-  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, taskAttr)
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
 }
 
 watch(
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
index 5123baf9d..c157fa2d1 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
@@ -1,3 +1,4 @@
+import { toRaw } from 'vue'
 // 创建监听器实例
 export function createListenerObject(options, isTask, prefix) {
   const listenerObj = Object.create(null)
@@ -59,12 +60,9 @@ export function updateElementExtensions(element, extensionList) {
   const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
     values: extensionList
   })
-  console.log(element, 'elementelementelementelement')
-  console.log(extensions.values, 'extensionsextensionsextensions')
-  window.bpmnInstances.modeling.updateProperties(element, {
+  window.bpmnInstances.modeling.updateProperties(toRaw(element), {
     extensionElements: extensions.values
   })
-  console.log('ssss')
 }
 
 // 创建一个id
diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue b/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
index a16fe1104..2dd70986f 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeMount } from 'vue'
+import { ref, onMounted } from 'vue'
 // import { translations } from '@/components/bpmnProcessDesigner/src/translations'
 // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
 import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
@@ -64,9 +64,6 @@ const controlForm = ref({
 // })
 // 流程模型的信息
 const model = ref({})
-onBeforeMount(() => {
-  // window.bpmnInstances = {}
-})
 onMounted(() => {
   // 如果 modelId 非空，说明是修改流程模型
   const modelId = router.currentRoute.value.query && router.currentRoute.value.query.modelId

From ba11e6612e4cf00b9c1e5ed810658d932d760393 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Sat, 28 Jan 2023 18:07:17 +0800
Subject: [PATCH 40/59] =?UTF-8?q?=E5=90=84=E4=B8=AA=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=91=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/penal/listeners/ElementListeners.vue              | 4 +++-
 .../package/penal/listeners/UserTaskListeners.vue             | 3 ++-
 .../package/penal/properties/ElementProperties.vue            | 4 +++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
index cc8de5413..739c2cd98 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
@@ -293,7 +293,9 @@ const resetListenersList = () => {
   otherExtensionList.value = []
   console.log(bpmnElement.value, 'bpmnElement.value')
   bpmnElementListeners.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    // bpmnElement.value.businessObject?.extensionElements?.filter(
+    bpmnElement.value.businessObject?.extensionElements?.filter(
+      // bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type === `${prefix}:ExecutionListener`
     ) ?? []
   elementListenersList.value = bpmnElementListeners.value.map((listener) =>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
index 0c81a63de..ebafc1cdd 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
@@ -338,7 +338,8 @@ const resetListenersList = () => {
   bpmnElement.value = window.bpmnInstances.bpmnElement
   otherExtensionList.value = []
   bpmnElementListeners.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    // bpmnElement.value.businessObject?.extensionElements?.filter(
+    bpmnElement.value.businessObject?.extensionElements?.filter(
       (ex) => ex.$type === `${prefix}:TaskListener`
     ) ?? []
   elementListenersList.value = bpmnElementListeners.value.map((listener) =>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
index 2764fb73c..33b53b3a1 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
@@ -82,10 +82,12 @@ const bpmnElementPropertyList = ref()
 const attributeFormRef = ref()
 
 const resetAttributesList = () => {
+  console.log(window, 'windowwindowwindowwindowwindowwindowwindow')
   bpmnElement.value = window.bpmnInstances.bpmnElement
   otherExtensionList.value = [] // 其他扩展配置
   bpmnElementProperties.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter((ex) => {
+    // bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
+    bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
       if (ex.$type !== `${prefix}:Properties`) {
         otherExtensionList.value.push(ex)
       }

From 0d0554e76c16acc513cc992688b4235f976e4a09 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Sat, 28 Jan 2023 18:10:51 +0800
Subject: [PATCH 41/59] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=91=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/penal/properties/ElementProperties.vue              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
index 33b53b3a1..07770f62c 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
@@ -87,7 +87,7 @@ const resetAttributesList = () => {
   otherExtensionList.value = [] // 其他扩展配置
   bpmnElementProperties.value =
     // bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
-    bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
+    bpmnElement.value.businessObject?.extensionElements?.values.filter((ex) => {
       if (ex.$type !== `${prefix}:Properties`) {
         otherExtensionList.value.push(ex)
       }

From 548f8bc32cf8b733565f073a75f594802012e3ba Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Sun, 29 Jan 2023 10:57:04 +0800
Subject: [PATCH 42/59] =?UTF-8?q?=E9=83=A8=E5=88=86=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=E5=80=BC=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../penal/flow-condition/FlowCondition.vue    |  2 +-
 .../penal/listeners/ElementListeners.vue      | 30 +++++++++++++------
 .../penal/listeners/UserTaskListeners.vue     |  2 +-
 .../penal/other/ElementOtherConfig.vue        | 18 ++---------
 .../penal/properties/ElementProperties.vue    |  4 +--
 .../package/penal/task/ElementTask.vue        |  2 +-
 .../task/task-components/ReceiveTask.vue      |  4 +--
 7 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
index 221a6a7ee..f508ee42b 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="panel-tab__content">
-    <el-form :model="flowConditionForm" label-width="90px" size="mini">
+    <el-form :model="flowConditionForm" label-width="90px" size="small">
       <el-form-item label="流转类型">
         <el-select v-model="flowConditionForm.type" @change="updateFlowType">
           <el-option label="普通流转路径" value="normal" />
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
index 739c2cd98..b0a277ba9 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="panel-tab__content">
-    <el-table :data="elementListenersList" size="mini" border>
+    <el-table :data="elementListenersList" size="small" border>
       <el-table-column label="序号" width="50px" type="index" />
       <el-table-column label="事件类型" min-width="100px" prop="event" />
       <el-table-column
@@ -9,7 +9,7 @@
         show-overflow-tooltip
         :formatter="(row) => listenerTypeObject[row.listenerType]"
       />
-      <el-table-column label="操作" width="90px">
+      <el-table-column label="操作" width="130px">
         <template #default="scope">
           <el-button size="small" @click="openListenerForm(scope.row, scope.$index)"
             >编辑</el-button
@@ -141,7 +141,7 @@
       </p>
       <el-table
         :data="fieldsListOfListener"
-        size="mini"
+        size="small"
         max-height="240"
         border
         fit
@@ -161,7 +161,7 @@
           show-overflow-tooltip
           :formatter="(row) => row.string || row.expression"
         />
-        <el-table-column label="操作" width="100px">
+        <el-table-column label="操作" width="130px">
           <template #default="scope">
             <el-button
               size="small"
@@ -394,8 +394,10 @@ const saveListenerConfig = async () => {
     elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
   }
   // 保存其他配置
+  console.log(bpmnElement.value, 'bpmnElement.value')
   otherExtensionList.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    bpmnElement.value.businessObject?.extensionElements?.filter(
+      // bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type !== `${prefix}:ExecutionListener`
     ) ?? []
   console.log(bpmnElement.value, 'bpmnElement.value')
@@ -404,10 +406,20 @@ const saveListenerConfig = async () => {
     otherExtensionList.value.concat(bpmnElementListeners.value),
     'otherExtensionList.value.concat(bpmnElementListeners.value).value'
   )
-  updateElementExtensions(
-    toRaw(bpmnElement.value),
-    toRaw(otherExtensionList.value.concat(bpmnElementListeners.value))
-  )
+  // updateElementExtensions(
+  //   bpmnElement.value,
+  //   // toRaw(bpmnElement.value),
+  //   otherExtensionList.value.concat(bpmnElementListeners.value)
+  //   // toRaw(otherExtensionList.value.concat(bpmnElementListeners.value))
+  // )
+  const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
+    values: otherExtensionList.value.concat(bpmnElementListeners.value)
+  })
+  console.log(extensions, 'extensionsextensionsextensions')
+  console.log(extensions.values, 'extensionsextensionsextensions')
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions.values
+  })
   // 4. 隐藏侧边栏
   listenerFormModelVisible.value = false
   listenerForm.value = {}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
index ebafc1cdd..93c881bbd 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
@@ -338,8 +338,8 @@ const resetListenersList = () => {
   bpmnElement.value = window.bpmnInstances.bpmnElement
   otherExtensionList.value = []
   bpmnElementListeners.value =
-    // bpmnElement.value.businessObject?.extensionElements?.filter(
     bpmnElement.value.businessObject?.extensionElements?.filter(
+      // bpmnElement.value.businessObject?.extensionElements?.values.filter(
       (ex) => ex.$type === `${prefix}:TaskListener`
     ) ?? []
   elementListenersList.value = bpmnElementListeners.value.map((listener) =>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
index 37b180f01..2ba1ee710 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
@@ -25,22 +25,8 @@ const props = defineProps({
 const documentation = ref('')
 const bpmnElement = ref()
 const updateDocumentation = () => {
-  console.log(props, 'props')
-  console.log(window, 'window')
-  console.log(
-    window.bpmnInstances.elementRegistry.get(props.id),
-    'window.bpmnInstances.elementRegistry.get(props.id)'
-  )
-  console.log(bpmnElement.value, 'bpmnElement.value ')
-  if (bpmnElement.value && bpmnElement.value.id === props.id) {
-    bpmnElement.value = window?.bpmnInstances.elementRegistry.get(props.id)
-  }
-  console.log(
-    bpmnElement.value,
-    'bpmnElement.value bpmnElement.value bpmnElement.value bpmnElement.value bpmnElement.value bpmnElement.value '
-  )
-  // (bpmnElement.value && bpmnElement.value.id === props.id) ||
-  //   (bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id))
+  ;(bpmnElement.value && bpmnElement.value.id === props.id) ||
+    (bpmnElement.value = (window as any).bpmnInstances.elementRegistry.get(props.id))
   const documentations = window.bpmnInstances.bpmnFactory.create('bpmn:Documentation', {
     text: documentation.value
   })
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
index 07770f62c..296dbcbd5 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
@@ -86,8 +86,8 @@ const resetAttributesList = () => {
   bpmnElement.value = window.bpmnInstances.bpmnElement
   otherExtensionList.value = [] // 其他扩展配置
   bpmnElementProperties.value =
-    // bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
-    bpmnElement.value.businessObject?.extensionElements?.values.filter((ex) => {
+    bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
+      // bpmnElement.value.businessObject?.extensionElements?.values.filter((ex) => {
       if (ex.$type !== `${prefix}:Properties`) {
         otherExtensionList.value.push(ex)
       }
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
index bac1ccbea..b5f6f1c21 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="panel-tab__content">
-    <el-form size="mini" label-width="90px">
+    <el-form size="small" label-width="90px">
       <el-form-item label="异步延续">
         <el-checkbox
           v-model="taskConfigForm.asyncBefore"
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
index c4816dd3e..c3fef8bde 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
@@ -34,7 +34,7 @@
       append-to-body
       destroy-on-close
     >
-      <el-form :model="newMessageForm" size="mini" label-width="90px">
+      <el-form :model="newMessageForm" size="small" label-width="90px">
         <el-form-item label="消息ID">
           <el-input v-model="newMessageForm.id" clearable />
         </el-form-item>
@@ -43,7 +43,7 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button size="mini" type="primary" @click="createNewMessage">确 认</el-button>
+        <el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
       </template>
     </el-dialog>
   </div>

From 756dca633219fee75251cf5798dd85e841e4f9ac Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Sun, 29 Jan 2023 12:09:41 +0800
Subject: [PATCH 43/59] update: springboot 2.7.8

---
 pom.xml                    | 2 +-
 yudao-dependencies/pom.xml | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/pom.xml b/pom.xml
index 44da8dcb2..a6f16c8b1 100644
--- a/pom.xml
+++ b/pom.xml
@@ -39,7 +39,7 @@
         <maven-compiler-plugin.version>3.8.1</maven-compiler-plugin.version>
         <!-- 看看咋放到 bom 里 -->
         <lombok.version>1.18.24</lombok.version>
-        <spring.boot.version>2.7.7</spring.boot.version>
+        <spring.boot.version>2.7.8</spring.boot.version>
         <mapstruct.version>1.5.3.Final</mapstruct.version>
         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
     </properties>
diff --git a/yudao-dependencies/pom.xml b/yudao-dependencies/pom.xml
index 5964f8c1c..523ced05c 100644
--- a/yudao-dependencies/pom.xml
+++ b/yudao-dependencies/pom.xml
@@ -36,7 +36,7 @@
         <opentracing.version>0.33.0</opentracing.version>
         <!-- Test 测试相关 -->
         <podam.version>7.2.11.RELEASE</podam.version>
-        <jedis-mock.version>1.0.5</jedis-mock.version>
+        <jedis-mock.version>1.0.6</jedis-mock.version>
         <mockito-inline.version>4.11.0</mockito-inline.version>
         <!-- Bpm 工作流相关 -->
         <flowable.version>6.8.0</flowable.version>
@@ -46,7 +46,7 @@
         <lombok.version>1.18.24</lombok.version>
         <mapstruct.version>1.5.3.Final</mapstruct.version>
         <hutool.version>5.8.11</hutool.version>
-        <easyexcel.verion>3.1.5</easyexcel.verion>
+        <easyexcel.verion>3.2.0</easyexcel.verion>
         <velocity.version>2.3</velocity.version>
         <screw.version>1.0.5</screw.version>
         <fastjson.version>1.2.83</fastjson.version>
@@ -230,8 +230,6 @@
                 <version>${redisson.version}</version>
             </dependency>
 
-            <!-- Config 配置中心相关 -->
-
             <!-- Job 定时任务相关 -->
             <dependency>
                 <groupId>cn.iocoder.boot</groupId>

From 2be0ea5ffb64231d006e215ccbb6f630c3b752e6 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Sun, 29 Jan 2023 14:12:16 +0800
Subject: [PATCH 44/59] =?UTF-8?q?=E5=90=84=E4=B8=AA=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A=E5=80=BC=20=E4=BF=AE=E6=94=B9=E7=AD=89bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../penal/listeners/ElementListeners.vue      | 41 ++++++-------------
 .../penal/listeners/UserTaskListeners.vue     | 14 +++----
 .../package/penal/listeners/template.js       | 28 ++++++-------
 .../penal/properties/ElementProperties.vue    | 11 ++---
 .../task/task-components/ReceiveTask.vue      |  1 -
 .../bpmnProcessDesigner/package/utils.ts      |  2 +-
 6 files changed, 39 insertions(+), 58 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
index b0a277ba9..b438bf7e0 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
@@ -9,14 +9,15 @@
         show-overflow-tooltip
         :formatter="(row) => listenerTypeObject[row.listenerType]"
       />
-      <el-table-column label="操作" width="130px">
+      <el-table-column label="操作" width="100px">
         <template #default="scope">
-          <el-button size="small" @click="openListenerForm(scope.row, scope.$index)"
+          <el-button size="small" link @click="openListenerForm(scope.row, scope.$index)"
             >编辑</el-button
           >
           <el-divider direction="vertical" />
           <el-button
             size="small"
+            link
             style="color: #ff4d4f"
             @click="removeListener(scope.row, scope.$index)"
             >移除</el-button
@@ -26,7 +27,6 @@
     </el-table>
     <div class="element-drawer__button">
       <XButton
-        size="mini"
         type="primary"
         preIcon="ep:plus"
         title="添加监听器"
@@ -137,7 +137,7 @@
       <el-divider />
       <p class="listener-filed__title">
         <span><Icon icon="ep:menu" />注入字段：</span>
-        <XButton type="primary" size="mini" @click="openListenerFieldForm(null)" title="添加字段" />
+        <XButton type="primary" @click="openListenerFieldForm(null)" title="添加字段" />
       </p>
       <el-table
         :data="fieldsListOfListener"
@@ -163,16 +163,13 @@
         />
         <el-table-column label="操作" width="130px">
           <template #default="scope">
-            <el-button
-              size="small"
-              type="text"
-              @click="openListenerFieldForm(scope.row, scope.$index)"
+            <el-button size="small" link @click="openListenerFieldForm(scope.row, scope.$index)"
               >编辑</el-button
             >
             <el-divider direction="vertical" />
             <el-button
               size="small"
-              type="text"
+              link
               style="color: #ff4d4f"
               @click="removeListenerField(scope.row, scope.$index)"
               >移除</el-button
@@ -293,9 +290,7 @@ const resetListenersList = () => {
   otherExtensionList.value = []
   console.log(bpmnElement.value, 'bpmnElement.value')
   bpmnElementListeners.value =
-    // bpmnElement.value.businessObject?.extensionElements?.filter(
-    bpmnElement.value.businessObject?.extensionElements?.filter(
-      // bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type === `${prefix}:ExecutionListener`
     ) ?? []
   elementListenersList.value = bpmnElementListeners.value.map((listener) =>
@@ -396,8 +391,8 @@ const saveListenerConfig = async () => {
   // 保存其他配置
   console.log(bpmnElement.value, 'bpmnElement.value')
   otherExtensionList.value =
-    bpmnElement.value.businessObject?.extensionElements?.filter(
-      // bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    // bpmnElement.value.businessObject?.extensionElements?.filter(
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type !== `${prefix}:ExecutionListener`
     ) ?? []
   console.log(bpmnElement.value, 'bpmnElement.value')
@@ -406,20 +401,10 @@ const saveListenerConfig = async () => {
     otherExtensionList.value.concat(bpmnElementListeners.value),
     'otherExtensionList.value.concat(bpmnElementListeners.value).value'
   )
-  // updateElementExtensions(
-  //   bpmnElement.value,
-  //   // toRaw(bpmnElement.value),
-  //   otherExtensionList.value.concat(bpmnElementListeners.value)
-  //   // toRaw(otherExtensionList.value.concat(bpmnElementListeners.value))
-  // )
-  const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
-    values: otherExtensionList.value.concat(bpmnElementListeners.value)
-  })
-  console.log(extensions, 'extensionsextensionsextensions')
-  console.log(extensions.values, 'extensionsextensionsextensions')
-  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
-    extensionElements: extensions.values
-  })
+  updateElementExtensions(
+    bpmnElement.value,
+    otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
   // 4. 隐藏侧边栏
   listenerFormModelVisible.value = false
   listenerForm.value = {}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
index 93c881bbd..2b559a842 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
@@ -17,13 +17,13 @@
       />
       <el-table-column label="操作" width="90px">
         <template #default="scope">
-          <el-button size="small" type="text" @click="openListenerForm(scope.row, scope.$index)"
+          <el-button size="small" link @click="openListenerForm(scope.row, scope.$index)"
             >编辑</el-button
           >
           <el-divider direction="vertical" />
           <el-button
             size="small"
-            type="text"
+            link
             style="color: #ff4d4f"
             @click="removeListener(scope.row, scope.$index)"
             >移除</el-button
@@ -204,16 +204,13 @@
         />
         <el-table-column label="操作" width="100px">
           <template #default="scope">
-            <el-button
-              size="small"
-              type="text"
-              @click="openListenerFieldForm(scope.row, scope.$index)"
+            <el-button size="small" link @click="openListenerFieldForm(scope.row, scope.$index)"
               >编辑</el-button
             >
             <el-divider direction="vertical" />
             <el-button
               size="small"
-              type="text"
+              link
               style="color: #ff4d4f"
               @click="removeListenerField(scope.row, scope.$index)"
               >移除</el-button
@@ -338,8 +335,7 @@ const resetListenersList = () => {
   bpmnElement.value = window.bpmnInstances.bpmnElement
   otherExtensionList.value = []
   bpmnElementListeners.value =
-    bpmnElement.value.businessObject?.extensionElements?.filter(
-      // bpmnElement.value.businessObject?.extensionElements?.values.filter(
+    bpmnElement.value.businessObject?.extensionElements?.values.filter(
       (ex) => ex.$type === `${prefix}:TaskListener`
     ) ?? []
   elementListenersList.value = bpmnElementListeners.value.map((listener) =>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/template.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/template.js
index 5e1bc5775..07c2187bd 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/template.js
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/template.js
@@ -1,25 +1,25 @@
 export const template = isTaskListener => {
   return `
   <div class="panel-tab__content">
-    <el-table :data="elementListenersList" size="mini" border>
+    <el-table :data="elementListenersList" size="small" 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 #default="scope">
-          <el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)">编辑</el-button>
+          <el-button size="small" type="text" @click="openListenerForm(scope, scope.$index)">编辑</el-button>
           <el-divider direction="vertical" />
-          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(scope, scope.$index)">移除</el-button>
+          <el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(scope, scope.$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>
+      <el-button size="small" 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 size="small" :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" />
@@ -115,31 +115,31 @@ export const template = isTaskListener => {
       <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>
+        <el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
       </p>
-      <el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
+      <el-table :data="fieldsListOfListener" size="small" 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 #default="scope">
-            <el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)">编辑</el-button>
+            <el-button size="small" type="text" @click="openListenerFieldForm(scope, scope.$index)">编辑</el-button>
             <el-divider direction="vertical" />
-            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(scope, scope.$index)">移除</el-button>
+            <el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(scope, scope.$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>
+        <el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button size="small" 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 :model="listenerFieldForm" size="small" 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>
@@ -168,8 +168,8 @@ export const template = isTaskListener => {
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
+        <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
       </template>
     </el-dialog>
   </div>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
index 296dbcbd5..bb5656101 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
@@ -4,14 +4,15 @@
       <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">
+      <el-table-column label="操作" width="110px">
         <template #default="scope">
-          <el-button type="text" @click="openAttributesForm(scope.row, scope.$index)"
+          <el-button link @click="openAttributesForm(scope.row, scope.$index)" size="small"
             >编辑</el-button
           >
           <el-divider direction="vertical" />
           <el-button
-            type="text"
+            link
+            size="small"
             style="color: #ff4d4f"
             @click="removeAttributes(scope.row, scope.$index)"
             >移除</el-button
@@ -86,8 +87,8 @@ const resetAttributesList = () => {
   bpmnElement.value = window.bpmnInstances.bpmnElement
   otherExtensionList.value = [] // 其他扩展配置
   bpmnElementProperties.value =
-    bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
-      // bpmnElement.value.businessObject?.extensionElements?.values.filter((ex) => {
+    // bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
+    bpmnElement.value.businessObject?.extensionElements?.values.filter((ex) => {
       if (ex.$type !== `${prefix}:Properties`) {
         otherExtensionList.value.push(ex)
       }
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
index c3fef8bde..669295534 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
@@ -18,7 +18,6 @@
           />
         </el-select>
         <XButton
-          size="mini"
           type="primary"
           preIcon="ep:plus"
           style="margin-left: 8px"
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
index c157fa2d1..41f068011 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
@@ -61,7 +61,7 @@ export function updateElementExtensions(element, extensionList) {
     values: extensionList
   })
   window.bpmnInstances.modeling.updateProperties(toRaw(element), {
-    extensionElements: extensions.values
+    extensionElements: extensions
   })
 }
 

From 3b9fe770361f9082e4df3a20a4457c4c9057a65d Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Sun, 29 Jan 2023 14:46:08 +0800
Subject: [PATCH 45/59] =?UTF-8?q?=E9=AB=98=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/designer/ProcessDesigner.vue      | 22 +++++++++++++------
 .../penal/listeners/ElementListeners.vue      | 15 +------------
 yudao-ui-admin-vue3/src/main.ts               | 11 ++++++++++
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
index 2e740d2a2..0141d2483 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -183,18 +183,26 @@
       <!-- <div id="js-properties-panel" class="panel"></div> -->
       <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
     </div>
-    <el-dialog
+    <XModal
       title="预览"
       width="80%"
+      height="90%"
       v-model="previewModelVisible"
       append-to-body
       destroy-on-close
     >
-      <pre>
-        <!-- <code class="hljs" v-html="highlightedCode(previewType, previewResult)"></code> -->
-        {{ previewResult }}
-      </pre>
-    </el-dialog>
+      <div v-highlight>
+        <pre>
+            <code>
+            <!-- 高亮代码块 -->
+            {{ previewResult }}
+            </code>
+        </pre>
+      </div>
+      <!-- <pre>
+        <code class="hljs" v-html="highlightedCode(previewType, previewResult)"></code>
+      </pre> -->
+    </XModal>
   </div>
 </template>
 
@@ -204,7 +212,7 @@
 // import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
 // import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
 // import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右侧框样式
-import { ElTooltip, ElButtonGroup, ElDialog, ElButton, ElMessage, ElMessageBox } from 'element-plus'
+import { ElTooltip, ElButtonGroup, ElButton, ElMessage, ElMessageBox } from 'element-plus'
 import { computed, onBeforeMount, onBeforeUnmount, onMounted, provide, ref } from 'vue'
 import BpmnModeler from 'bpmn-js/lib/Modeler'
 import DefaultEmptyXML from './plugins/defaultEmpty'
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
index b438bf7e0..332ff2538 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
@@ -246,7 +246,7 @@
   </div>
 </template>
 <script setup lang="ts" name="ElementListeners">
-import { ref, inject, watch, nextTick, toRaw } from 'vue'
+import { ref, inject, watch, nextTick } from 'vue'
 import {
   ElMessageBox,
   ElTable,
@@ -285,10 +285,8 @@ const listenerFormRef = ref()
 const listenerFieldFormRef = ref()
 
 const resetListenersList = () => {
-  console.log(window, 'window')
   bpmnElement.value = window.bpmnInstances.bpmnElement
   otherExtensionList.value = []
-  console.log(bpmnElement.value, 'bpmnElement.value')
   bpmnElementListeners.value =
     bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type === `${prefix}:ExecutionListener`
@@ -348,7 +346,6 @@ const saveListenerFiled = async () => {
 }
 // 移除监听器字段
 const removeListenerField = (field, index) => {
-  console.log(field, 'field')
   ElMessageBox.confirm('确认移除该字段吗？', '提示', {
     confirmButtonText: '确 认',
     cancelButtonText: '取 消'
@@ -361,7 +358,6 @@ const removeListenerField = (field, index) => {
 }
 // 移除监听器
 const removeListener = (listener, index) => {
-  console.log(listener, 'listener')
   ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
     confirmButtonText: '确 认',
     cancelButtonText: '取 消'
@@ -389,18 +385,10 @@ const saveListenerConfig = async () => {
     elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
   }
   // 保存其他配置
-  console.log(bpmnElement.value, 'bpmnElement.value')
   otherExtensionList.value =
-    // bpmnElement.value.businessObject?.extensionElements?.filter(
     bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type !== `${prefix}:ExecutionListener`
     ) ?? []
-  console.log(bpmnElement.value, 'bpmnElement.value')
-  console.log(toRaw(bpmnElement.value), 'toRawtoRawtoRawtoRawtoRaw')
-  console.log(
-    otherExtensionList.value.concat(bpmnElementListeners.value),
-    'otherExtensionList.value.concat(bpmnElementListeners.value).value'
-  )
   updateElementExtensions(
     bpmnElement.value,
     otherExtensionList.value.concat(bpmnElementListeners.value)
@@ -413,7 +401,6 @@ const saveListenerConfig = async () => {
 watch(
   () => props.id,
   (val) => {
-    console.log(val, 'propsId变化')
     val &&
       val.length &&
       nextTick(() => {
diff --git a/yudao-ui-admin-vue3/src/main.ts b/yudao-ui-admin-vue3/src/main.ts
index 7f3ffd2d1..9f1427958 100644
--- a/yudao-ui-admin-vue3/src/main.ts
+++ b/yudao-ui-admin-vue3/src/main.ts
@@ -49,6 +49,9 @@ import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
 
+import hljs from 'highlight.js' //导入代码高亮文件
+import 'highlight.js/styles/github-gist.css' //导入代码高亮样式
+
 // 本地开发模式 全局引入 element-plus 样式，加快第一次进入速度
 if (isDevMode()) {
   console.info(isDevMode())
@@ -59,6 +62,14 @@ if (isDevMode()) {
 const setupAll = async () => {
   const app = createApp(App)
 
+  //自定义一个代码高亮指令
+  app.directive('highlight', function (el) {
+    const blocks = el.querySelectorAll('code')
+    blocks.forEach((block: any) => {
+      hljs.highlightBlock(block)
+    })
+  })
+
   await setupI18n(app)
 
   MyPD(app)

From 252ef55a6c8220ce53e4076c62141cc70decc152 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Sun, 29 Jan 2023 14:50:27 +0800
Subject: [PATCH 46/59] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E5=81=87=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bpm/model/modelEditor.vue       | 39 ++++++++++---------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue b/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
index 2dd70986f..fe555123b 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
@@ -69,32 +69,33 @@ onMounted(() => {
   const modelId = router.currentRoute.value.query && router.currentRoute.value.query.modelId
   console.log(modelId, 'modelId')
   if (modelId) {
-    let data = '4b4909d8-97e7-11ec-8e20-862bc1a4a054'
-    getModelApi(data).then((response) => {
+    // let data = '4b4909d8-97e7-11ec-8e20-862bc1a4a054'
+    getModelApi(modelId).then((response) => {
       console.log(response, 'response')
-      // xmlString.value = response.data.bpmnXml
-      xmlString.value =
-        '<?xml version="1.0" encoding="UTF-8"?>\n<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" id="diagram_Process_1645980650311" targetNamespace="http://activiti.org/bpmn"><bpmn2:process id="flowable_01" name="flowable测试" isExecutable="true"><bpmn2:startEvent id="Event_1iruxim"><bpmn2:outgoing>Flow_0804gmo</bpmn2:outgoing></bpmn2:startEvent><bpmn2:userTask id="task01" name="task01"><bpmn2:incoming>Flow_0804gmo</bpmn2:incoming><bpmn2:outgoing>Flow_0cx479x</bpmn2:outgoing></bpmn2:userTask><bpmn2:sequenceFlow id="Flow_0804gmo" sourceRef="Event_1iruxim" targetRef="task01" /><bpmn2:endEvent id="Event_1mdsccz"><bpmn2:incoming>Flow_0cx479x</bpmn2:incoming></bpmn2:endEvent><bpmn2:sequenceFlow id="Flow_0cx479x" sourceRef="task01" targetRef="Event_1mdsccz" /></bpmn2:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="flowable_01_di" bpmnElement="flowable_01"><bpmndi:BPMNEdge id="Flow_0cx479x_di" bpmnElement="Flow_0cx479x"><di:waypoint x="440" y="350" /><di:waypoint x="492" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_0804gmo_di" bpmnElement="Flow_0804gmo"><di:waypoint x="288" y="350" /><di:waypoint x="340" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNShape id="Event_1iruxim_di" bpmnElement="Event_1iruxim"><dc:Bounds x="252" y="332" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="task01_di" bpmnElement="task01"><dc:Bounds x="340" y="310" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Event_1mdsccz_di" bpmnElement="Event_1mdsccz"><dc:Bounds x="492" y="332" width="36" height="36" /></bpmndi:BPMNShape></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn2:definitions>'
-
+      xmlString.value = response.data.bpmnXml
       model.value = {
-        key: 'flowable_01',
-        name: 'flowable测试',
-        description: 'ooxx',
-        category: '1',
-        formType: 10,
-        formId: 11,
-        formCustomCreatePath: null,
-        formCustomViewPath: null,
-        id: '4b4909d8-97e7-11ec-8e20-862bc1a4a054',
-        createTime: 1645978019795,
+        ...response.data,
         bpmnXml: undefined // 清空 bpmnXml 属性
       }
-      console.log(modeler.value, 'modeler11111111')
+      // this.controlForm.processId = response.data.key
+
+      // xmlString.value =
+      //   '<?xml version="1.0" encoding="UTF-8"?>\n<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" id="diagram_Process_1645980650311" targetNamespace="http://activiti.org/bpmn"><bpmn2:process id="flowable_01" name="flowable测试" isExecutable="true"><bpmn2:startEvent id="Event_1iruxim"><bpmn2:outgoing>Flow_0804gmo</bpmn2:outgoing></bpmn2:startEvent><bpmn2:userTask id="task01" name="task01"><bpmn2:incoming>Flow_0804gmo</bpmn2:incoming><bpmn2:outgoing>Flow_0cx479x</bpmn2:outgoing></bpmn2:userTask><bpmn2:sequenceFlow id="Flow_0804gmo" sourceRef="Event_1iruxim" targetRef="task01" /><bpmn2:endEvent id="Event_1mdsccz"><bpmn2:incoming>Flow_0cx479x</bpmn2:incoming></bpmn2:endEvent><bpmn2:sequenceFlow id="Flow_0cx479x" sourceRef="task01" targetRef="Event_1mdsccz" /></bpmn2:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="flowable_01_di" bpmnElement="flowable_01"><bpmndi:BPMNEdge id="Flow_0cx479x_di" bpmnElement="Flow_0cx479x"><di:waypoint x="440" y="350" /><di:waypoint x="492" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_0804gmo_di" bpmnElement="Flow_0804gmo"><di:waypoint x="288" y="350" /><di:waypoint x="340" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNShape id="Event_1iruxim_di" bpmnElement="Event_1iruxim"><dc:Bounds x="252" y="332" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="task01_di" bpmnElement="task01"><dc:Bounds x="340" y="310" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Event_1mdsccz_di" bpmnElement="Event_1mdsccz"><dc:Bounds x="492" y="332" width="36" height="36" /></bpmndi:BPMNShape></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn2:definitions>'
+
       // model.value = {
-      //   ...response.data,
+      //   key: 'flowable_01',
+      //   name: 'flowable测试',
+      //   description: 'ooxx',
+      //   category: '1',
+      //   formType: 10,
+      //   formId: 11,
+      //   formCustomCreatePath: null,
+      //   formCustomViewPath: null,
+      //   id: '4b4909d8-97e7-11ec-8e20-862bc1a4a054',
+      //   createTime: 1645978019795,
       //   bpmnXml: undefined // 清空 bpmnXml 属性
       // }
-      // this.controlForm.processId = response.data.key
+      // console.log(modeler.value, 'modeler11111111')
     })
   }
 })

From d6a4dc7d11d2711cb61017e67e7d0059cc92c040 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Mon, 30 Jan 2023 10:18:49 +0800
Subject: [PATCH 47/59] bug

---
 .../package/designer/ProcessDesigner.vue      | 24 ++++++++++++++-----
 .../package/designer/ProcessViewer.vue        |  4 ++++
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
index 0141d2483..b5e772925 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -8,13 +8,16 @@
           <el-tooltip effect="light" placement="bottom">
             <template #content>
               <div style="color: #409eff">
-                <el-button link @click="downloadProcessAsXml()">下载为XML文件</el-button>
+                <!-- <el-button link @click="downloadProcessAsXml()">下载为XML文件</el-button> -->
+                <XTextButton title="下载为XML文件" @click="downloadProcessAsXml()" />
                 <br />
 
-                <el-button link @click="downloadProcessAsSvg()">下载为SVG文件</el-button>
+                <!-- <el-button link @click="downloadProcessAsSvg()">下载为SVG文件</el-button> -->
+                <XTextButton title="下载为SVG文件" @click="downloadProcessAsSvg()" />
                 <br />
 
-                <el-button link @click="downloadProcessAsBpmn()">下载为BPMN文件</el-button>
+                <!-- <el-button link @click="downloadProcessAsBpmn()">下载为BPMN文件</el-button> -->
+                <XTextButton title="下载为BPMN文件" @click="downloadProcessAsBpmn()" />
               </div>
             </template>
             <XButton title="下载文件" preIcon="ep:download" />
@@ -22,9 +25,11 @@
           <el-tooltip effect="light">
             <XButton preIcon="ep:view" title="浏览" />
             <template #content>
-              <el-button link @click="previewProcessXML">预览XML</el-button>
+              <!-- <el-button link @click="previewProcessXML">预览XML</el-button> -->
+              <XTextButton title="预览XML" @click="previewProcessXML" />
               <br />
-              <el-button link @click="previewProcessJson">预览JSON</el-button>
+              <!-- <el-button link @click="previewProcessJson">预览JSON</el-button> -->
+              <XTextButton title="预览JSON" @click="previewProcessJson" />
             </template>
           </el-tooltip>
           <el-tooltip
@@ -236,7 +241,7 @@ import flowableModdleExtension from './plugins/extension-moddle/flowable'
 // 引入json转换与高亮
 // import xml2js from 'xml-js'
 import xml2js from 'fast-xml-parser'
-
+import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
 // 代码高亮插件
 // import hljs from 'highlight.js/lib/highlight'
 // import 'highlight.js/styles/github-gist.css'
@@ -630,6 +635,13 @@ const previewProcessXML = () => {
 const previewProcessJson = () => {
   bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
     console.log(xml, 'xml')
+
+    const rootNode = parseXmlString(xml)
+    console.log(rootNode, 'rootNoderootNode')
+    const rootNodes = new XmlNode(XmlNodeType.Root)
+    rootNodes.toJsObject()
+    console.log(JSON.stringify(rootNodes), ';;;;;;;;;;;;;;;')
+
     const parser = new xml2js.XMLParser()
     let jObj = parser.parse(xml)
     // console.log(jObj, 'jObjjObjjObjjObjjObj')
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
index e222ace18..1b698388b 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -39,6 +39,10 @@ const props = defineProps({
 
 provide('configGlobal', props)
 
+const emit = defineEmits(['destroy'])
+
+let bpmnModeler
+
 const xml = ref('')
 const activityList = ref([])
 const processInstance = ref(undefined)

From 00a93ab9bf1622af68b32a2f1dddeaa57758fb35 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Mon, 30 Jan 2023 10:30:08 +0800
Subject: [PATCH 48/59] =?UTF-8?q?=E6=97=A0=E7=94=A8=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/designer/ProcessDesigner.vue             | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
index b5e772925..5be0f9148 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -241,7 +241,7 @@ import flowableModdleExtension from './plugins/extension-moddle/flowable'
 // 引入json转换与高亮
 // import xml2js from 'xml-js'
 import xml2js from 'fast-xml-parser'
-import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
+// import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
 // 代码高亮插件
 // import hljs from 'highlight.js/lib/highlight'
 // import 'highlight.js/styles/github-gist.css'
@@ -636,11 +636,11 @@ const previewProcessJson = () => {
   bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
     console.log(xml, 'xml')
 
-    const rootNode = parseXmlString(xml)
-    console.log(rootNode, 'rootNoderootNode')
-    const rootNodes = new XmlNode(XmlNodeType.Root)
-    rootNodes.toJsObject()
-    console.log(JSON.stringify(rootNodes), ';;;;;;;;;;;;;;;')
+    // const rootNode = parseXmlString(xml)
+    // console.log(rootNode, 'rootNoderootNode')
+    // const rootNodes = new XmlNode(XmlNodeType.Root)
+    // rootNodes.toJsObject()
+    // console.log(JSON.stringify(rootNodes), ';;;;;;;;;;;;;;;')
 
     const parser = new xml2js.XMLParser()
     let jObj = parser.parse(xml)

From 8ce0c8081c6bb4d0368222a2c255273e26f0faf3 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 30 Jan 2023 22:03:03 +0800
Subject: [PATCH 49/59] =?UTF-8?q?vue3=20=E5=B7=A5=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?=EF=BC=9A1.=20=E5=AE=8C=E6=88=90=E6=B5=81=E7=A8=8B=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E7=9A=84=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5=EF=BC=9B?=
 =?UTF-8?q?2.=20=E6=B5=81=E7=A8=8B=E4=BB=BB=E5=8A=A1=E7=9A=84=E5=88=86?=
 =?UTF-8?q?=E9=85=8D=E8=A7=84=E5=88=99=E7=9A=84=20modelId=20=E4=B8=8D?=
 =?UTF-8?q?=E5=AD=98=E5=9C=A8=E7=9A=84=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-ui-admin-vue3/package.json              |  19 +-
 yudao-ui-admin-vue3/pnpm-lock.yaml            | 523 +++++++++++++++---
 .../src/views/bpm/model/modelEditor.vue       |  12 +-
 .../src/views/bpm/taskAssignRule/index.vue    |   1 +
 4 files changed, 456 insertions(+), 99 deletions(-)

diff --git a/yudao-ui-admin-vue3/package.json b/yudao-ui-admin-vue3/package.json
index bd47f804c..dd9377ade 100644
--- a/yudao-ui-admin-vue3/package.json
+++ b/yudao-ui-admin-vue3/package.json
@@ -33,15 +33,21 @@
     "@zxcvbn-ts/core": "^2.2.0",
     "animate.css": "^4.1.1",
     "axios": "^1.2.5",
+    "bpmn-js-token-simulation": "^0.10.0",
+    "camunda-bpmn-moddle": "^7.0.1",
     "cropperjs": "^1.5.13",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.7",
+    "diagram-js": "^11.6.0",
     "echarts": "^5.4.1",
     "echarts-wordcloud": "^2.1.0",
     "element-plus": "2.2.28",
+    "fast-xml-parser": "^4.0.13",
+    "highlight.js": "^9.18.5",
     "intro.js": "^6.0.0",
     "jsencrypt": "^3.3.1",
     "lodash-es": "^4.17.21",
+    "min-dash": "^4.0.0",
     "mitt": "^3.0.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.29",
@@ -52,16 +58,11 @@
     "vue-i18n": "9.2.2",
     "vue-router": "^4.1.6",
     "vue-types": "^5.0.2",
+    "vue3-treeselect": "^0.1.10",
+    "vuedraggable": "^4.1.0",
     "vxe-table": "^4.3.9",
     "web-storage-cache": "^1.1.1",
     "xe-utils": "^3.5.7",
-    "bpmn-js-token-simulation": "^0.10.0",
-    "camunda-bpmn-moddle": "^7.0.1",
-    "fast-xml-parser": "^4.0.13",
-    "highlight.js": "^9.18.5",
-    "min-dash": "^4.0.0",
-    "vue3-treeselect": "^0.1.10",
-    "vuedraggable": "^4.1.0",
     "xml-js": "^1.6.11"
   },
   "devDependencies": {
@@ -82,10 +83,10 @@
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "autoprefixer": "^10.4.13",
-    "consola": "^2.15.3",
-    "eslint": "^8.32.0",
     "bpmn-js": "^8.9.0",
     "bpmn-js-properties-panel": "^0.46.0",
+    "consola": "^2.15.3",
+    "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-define-config": "^1.14.0",
     "eslint-plugin-prettier": "^4.2.1",
diff --git a/yudao-ui-admin-vue3/pnpm-lock.yaml b/yudao-ui-admin-vue3/pnpm-lock.yaml
index 46ac946da..c5b7b725b 100644
--- a/yudao-ui-admin-vue3/pnpm-lock.yaml
+++ b/yudao-ui-admin-vue3/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: 5.4
+lockfileVersion: 5.3
 
 specifiers:
   '@commitlint/cli': ^17.4.2
@@ -27,10 +27,15 @@ specifiers:
   animate.css: ^4.1.1
   autoprefixer: ^10.4.13
   axios: ^1.2.5
+  bpmn-js: ^8.9.0
+  bpmn-js-properties-panel: ^0.46.0
+  bpmn-js-token-simulation: ^0.10.0
+  camunda-bpmn-moddle: ^7.0.1
   consola: ^2.15.3
   cropperjs: ^1.5.13
   crypto-js: ^4.1.1
   dayjs: ^1.11.7
+  diagram-js: ^11.6.0
   echarts: ^5.4.1
   echarts-wordcloud: ^2.1.0
   element-plus: 2.2.28
@@ -39,10 +44,13 @@ specifiers:
   eslint-define-config: ^1.14.0
   eslint-plugin-prettier: ^4.2.1
   eslint-plugin-vue: ^9.9.0
+  fast-xml-parser: ^4.0.13
+  highlight.js: ^9.18.5
   intro.js: ^6.0.0
   jsencrypt: ^3.3.1
   lint-staged: ^13.1.0
   lodash-es: ^4.17.21
+  min-dash: ^4.0.0
   mitt: ^3.0.0
   nprogress: ^0.2.0
   pinia: ^2.0.29
@@ -81,10 +89,13 @@ specifiers:
   vue-router: ^4.1.6
   vue-tsc: ^1.0.24
   vue-types: ^5.0.2
+  vue3-treeselect: ^0.1.10
+  vuedraggable: ^4.1.0
   vxe-table: ^4.3.9
   web-storage-cache: ^1.1.1
   windicss: ^3.5.6
   xe-utils: ^3.5.7
+  xml-js: ^1.6.11
 
 dependencies:
   '@form-create/designer': 3.1.0_vue@3.2.45
@@ -92,22 +103,28 @@ dependencies:
   '@iconify/iconify': 3.1.0
   '@vueuse/core': 9.11.1_vue@3.2.45
   '@wangeditor/editor': 5.1.23
-  '@wangeditor/editor-for-vue': 5.1.12_3apfu3xbp6awzuex7ed3sbrv6y
+  '@wangeditor/editor-for-vue': 5.1.12_d81e5a6ee17f816cd097f907b90635f6
   '@zxcvbn-ts/core': 2.2.0
   animate.css: 4.1.1
   axios: 1.2.5
+  bpmn-js-token-simulation: 0.10.0
+  camunda-bpmn-moddle: 7.0.1
   cropperjs: 1.5.13
   crypto-js: 4.1.1
   dayjs: 1.11.7
+  diagram-js: 11.6.0
   echarts: 5.4.1
   echarts-wordcloud: 2.1.0_echarts@5.4.1
   element-plus: 2.2.28_vue@3.2.45
+  fast-xml-parser: 4.0.15
+  highlight.js: 9.18.5
   intro.js: 6.0.0
   jsencrypt: 3.3.1
   lodash-es: 4.17.21
+  min-dash: 4.0.0
   mitt: 3.0.0
   nprogress: 0.2.0
-  pinia: 2.0.29_prq2uz4lho2pwp6irk4cfkrxwu
+  pinia: 2.0.29_typescript@4.9.4+vue@3.2.45
   qrcode: 1.5.1
   qs: 6.11.0
   url: 0.11.0
@@ -115,9 +132,12 @@ dependencies:
   vue-i18n: 9.2.2_vue@3.2.45
   vue-router: 4.1.6_vue@3.2.45
   vue-types: 5.0.2_vue@3.2.45
+  vue3-treeselect: 0.1.10_vue@3.2.45
+  vuedraggable: 4.1.0_vue@3.2.45
   vxe-table: 4.3.9_vue@3.2.45+xe-utils@3.5.7
   web-storage-cache: 1.1.1
   xe-utils: 3.5.7
+  xml-js: 1.6.11
 
 devDependencies:
   '@commitlint/cli': 17.4.2
@@ -131,17 +151,19 @@ devDependencies:
   '@types/nprogress': 0.2.0
   '@types/qrcode': 1.5.0
   '@types/qs': 6.9.7
-  '@typescript-eslint/eslint-plugin': 5.49.0_iu322prlnwsygkcra5kbpy22si
-  '@typescript-eslint/parser': 5.49.0_7uibuqfxkfaozanbtbziikiqje
+  '@typescript-eslint/eslint-plugin': 5.49.0_4537ad3e2b6da5832851075417e35a92
+  '@typescript-eslint/parser': 5.49.0_eslint@8.32.0+typescript@4.9.4
   '@vitejs/plugin-legacy': 3.0.2_terser@5.16.1+vite@4.0.4
   '@vitejs/plugin-vue': 4.0.0_vite@4.0.4+vue@3.2.45
   '@vitejs/plugin-vue-jsx': 3.0.0_vite@4.0.4+vue@3.2.45
   autoprefixer: 10.4.13_postcss@8.4.21
+  bpmn-js: 8.10.0
+  bpmn-js-properties-panel: 0.46.0_bpmn-js@8.10.0
   consola: 2.15.3
   eslint: 8.32.0
   eslint-config-prettier: 8.6.0_eslint@8.32.0
   eslint-define-config: 1.14.0
-  eslint-plugin-prettier: 4.2.1_cn4lalcyadplruoxa5mhp7j3dq
+  eslint-plugin-prettier: 4.2.1_1378b02c5800deb8d1d7075877fd3b1c
   eslint-plugin-vue: 9.9.0_eslint@8.32.0
   lint-staged: 13.1.0
   postcss: 8.4.21
@@ -152,17 +174,17 @@ devDependencies:
   rollup: 3.11.0
   sass: 1.57.1
   stylelint: 14.16.1
-  stylelint-config-html: 1.1.0_kbto3rg3njmczth2rrsgfnlsqa
+  stylelint-config-html: 1.1.0_5066edc4db6a582cccfa8c6462b57280
   stylelint-config-prettier: 9.0.4_stylelint@14.16.1
   stylelint-config-recommended: 9.0.0_stylelint@14.16.1
   stylelint-config-standard: 29.0.0_stylelint@14.16.1
   stylelint-order: 6.0.1_stylelint@14.16.1
   terser: 5.16.1
   typescript: 4.9.4
-  unplugin-auto-import: 0.12.2_6cqwe7wq6jqijtkao3lw26pm3a
+  unplugin-auto-import: 0.12.2_f0a1627ed0f26084cd4076d76d79ecd8
   unplugin-element-plus: 0.4.1_rollup@3.11.0+vite@4.0.4
   unplugin-vue-components: 0.22.12_rollup@3.11.0+vue@3.2.45
-  vite: 4.0.4_zxbrnrc4iyldik6mikh3pswz4i
+  vite: 4.0.4_cdc316c45c4616342bcc428fb7cad9e2
   vite-plugin-compression: 0.5.1_vite@4.0.4
   vite-plugin-ejs: 1.6.4
   vite-plugin-eslint: 1.8.1_eslint@8.32.0+vite@4.0.4
@@ -522,6 +544,31 @@ packages:
       '@babel/helper-validator-identifier': 7.19.1
       to-fast-properties: 2.0.0
 
+  /@bpmn-io/diagram-js-ui/0.2.2:
+    resolution: {integrity: sha512-IgOIxOwoqsFB2mMPdXtcbPVPjdYkZ3huW7ipowYLhg5jdRGHlBronQ+LER+lfWro6sPtzEsw7qX8D8Yq9M2S5g==}
+    dependencies:
+      htm: 3.1.1
+      preact: 10.11.3
+    dev: false
+
+  /@bpmn-io/element-templates-validator/0.2.0:
+    resolution: {integrity: sha512-/ogp0+6zUFdoiY09NYaHL5JtapB8zN1spG8hpML96qetXDCODRxnsqlHTvSwxtZHUDcgun+lxcK8b4wgtCP+6Q==}
+    dependencies:
+      '@camunda/element-templates-json-schema': 0.4.0
+      json-source-map: 0.6.1
+      min-dash: 3.8.1
+    dev: true
+
+  /@bpmn-io/extract-process-variables/0.4.5:
+    resolution: {integrity: sha512-LtHx5b9xqS8avRLrq/uTlKhWzMeV3bWQKIdDic2bdo5n9roitX13GRb01u2S0hSsKDWEhXQtydFYN2b6G7bqfw==}
+    dependencies:
+      min-dash: 3.8.1
+    dev: true
+
+  /@camunda/element-templates-json-schema/0.4.0:
+    resolution: {integrity: sha512-M5xW61ba7z2maBxfoT4c1bjuLD8OIL7863et/hULiNG6+R/B9CZ4Qze1juuIfXv4zpF2fYSuUsTPkTtiZrcspQ==}
+    dev: true
+
   /@commitlint/cli/17.4.2:
     resolution: {integrity: sha512-0rPGJ2O1owhpxMIXL9YJ2CgPkdrFLKZElIZHXDN8L8+qWK1DGH7Q7IelBT1pchXTYTuDlqkOTdh//aTvT3bSUA==}
     engines: {node: '>=v14'}
@@ -611,12 +658,12 @@ packages:
       '@types/node': 18.11.18
       chalk: 4.1.2
       cosmiconfig: 8.0.0
-      cosmiconfig-typescript-loader: 4.2.0_bxtyj3et3xbsdyxhh3oblnfbj4
+      cosmiconfig-typescript-loader: 4.2.0_0de784ec93ddc321e2e73edc15b4a14f
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
       resolve-from: 5.0.0
-      ts-node: 10.9.1_awa2wsr5thmg3i7jqycphctjfq
+      ts-node: 10.9.1_0581ab4a3d99d86da3e98604f38a692c
       typescript: 4.9.4
     transitivePeerDependencies:
       - '@swc/core'
@@ -697,7 +744,7 @@ packages:
       '@jridgewell/trace-mapping': 0.3.9
     dev: true
 
-  /@csstools/selector-specificity/2.0.2_wajs5nedgkikc5pcuwett7legi:
+  /@csstools/selector-specificity/2.0.2_b0132eb4833290a175e2a58939fd6432:
     resolution: {integrity: sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
@@ -1111,12 +1158,14 @@ packages:
       '@intlify/message-compiler': 9.2.2
       '@intlify/shared': 9.2.2
       '@intlify/vue-devtools': 9.2.2
+    dev: false
 
   /@intlify/devtools-if/9.2.2:
     resolution: {integrity: sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==}
     engines: {node: '>= 14'}
     dependencies:
       '@intlify/shared': 9.2.2
+    dev: false
 
   /@intlify/message-compiler/9.2.2:
     resolution: {integrity: sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==}
@@ -1124,6 +1173,7 @@ packages:
     dependencies:
       '@intlify/shared': 9.2.2
       source-map: 0.6.1
+    dev: false
 
   /@intlify/message-compiler/9.3.0-beta.16:
     resolution: {integrity: sha512-CGQI3xRcs1ET75eDQ0DUy3MRYOqTauRIIgaMoISKiF83gqRWg93FqN8lGMKcpBqaF4tI0JhsfosCaGiBL9+dnw==}
@@ -1136,6 +1186,7 @@ packages:
   /@intlify/shared/9.2.2:
     resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
     engines: {node: '>= 14'}
+    dev: false
 
   /@intlify/shared/9.3.0-beta.16:
     resolution: {integrity: sha512-kXbm4svALe3lX+EjdJxfnabOphqS4yQ1Ge/iIlR8tvUiYRCoNz3hig1M4336iY++Dfx5ytEQJPNjIcknNIuvig==}
@@ -1180,6 +1231,7 @@ packages:
     dependencies:
       '@intlify/core-base': 9.2.2
       '@intlify/shared': 9.2.2
+    dev: false
 
   /@jridgewell/gen-mapping/0.1.1:
     resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz}
@@ -1402,8 +1454,9 @@ packages:
 
   /@types/web-bluetooth/0.0.16:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+    dev: false
 
-  /@typescript-eslint/eslint-plugin/5.49.0_iu322prlnwsygkcra5kbpy22si:
+  /@typescript-eslint/eslint-plugin/5.49.0_4537ad3e2b6da5832851075417e35a92:
     resolution: {integrity: sha512-IhxabIpcf++TBaBa1h7jtOWyon80SXPRLDq0dVz5SLFC/eW6tofkw/O7Ar3lkx5z5U6wzbKDrl2larprp5kk5Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1414,10 +1467,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.49.0_7uibuqfxkfaozanbtbziikiqje
+      '@typescript-eslint/parser': 5.49.0_eslint@8.32.0+typescript@4.9.4
       '@typescript-eslint/scope-manager': 5.49.0
-      '@typescript-eslint/type-utils': 5.49.0_7uibuqfxkfaozanbtbziikiqje
-      '@typescript-eslint/utils': 5.49.0_7uibuqfxkfaozanbtbziikiqje
+      '@typescript-eslint/type-utils': 5.49.0_eslint@8.32.0+typescript@4.9.4
+      '@typescript-eslint/utils': 5.49.0_eslint@8.32.0+typescript@4.9.4
       debug: 4.3.4
       eslint: 8.32.0
       ignore: 5.2.1
@@ -1430,7 +1483,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.49.0_7uibuqfxkfaozanbtbziikiqje:
+  /@typescript-eslint/parser/5.49.0_eslint@8.32.0+typescript@4.9.4:
     resolution: {integrity: sha512-veDlZN9mUhGqU31Qiv2qEp+XrJj5fgZpJ8PW30sHU+j/8/e5ruAhLaVDAeznS7A7i4ucb/s8IozpDtt9NqCkZg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1458,7 +1511,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.49.0
     dev: true
 
-  /@typescript-eslint/type-utils/5.49.0_7uibuqfxkfaozanbtbziikiqje:
+  /@typescript-eslint/type-utils/5.49.0_eslint@8.32.0+typescript@4.9.4:
     resolution: {integrity: sha512-eUgLTYq0tR0FGU5g1YHm4rt5H/+V2IPVkP0cBmbhRyEmyGe4XvJ2YJ6sYTmONfjmdMqyMLad7SB8GvblbeESZA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1469,7 +1522,7 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/typescript-estree': 5.49.0_typescript@4.9.4
-      '@typescript-eslint/utils': 5.49.0_7uibuqfxkfaozanbtbziikiqje
+      '@typescript-eslint/utils': 5.49.0_eslint@8.32.0+typescript@4.9.4
       debug: 4.3.4
       eslint: 8.32.0
       tsutils: 3.21.0_typescript@4.9.4
@@ -1504,7 +1557,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.49.0_7uibuqfxkfaozanbtbziikiqje:
+  /@typescript-eslint/utils/5.49.0_eslint@8.32.0+typescript@4.9.4:
     resolution: {integrity: sha512-cPJue/4Si25FViIb74sHCLtM4nTSBXtLx1d3/QT6mirQ/c65bV8arBEebBJJizfq8W2YyMoPI/WWPFWitmNqnQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1586,7 +1639,7 @@ packages:
       regenerator-runtime: 0.13.11
       systemjs: 6.13.0
       terser: 5.16.1
-      vite: 4.0.4_zxbrnrc4iyldik6mikh3pswz4i
+      vite: 4.0.4_cdc316c45c4616342bcc428fb7cad9e2
     dev: true
 
   /@vitejs/plugin-vue-jsx/3.0.0_vite@4.0.4+vue@3.2.45:
@@ -1599,7 +1652,7 @@ packages:
       '@babel/core': 7.20.5
       '@babel/plugin-transform-typescript': 7.20.2_@babel+core@7.20.5
       '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.20.5
-      vite: 4.0.4_zxbrnrc4iyldik6mikh3pswz4i
+      vite: 4.0.4_cdc316c45c4616342bcc428fb7cad9e2
       vue: 3.2.45
     transitivePeerDependencies:
       - supports-color
@@ -1612,7 +1665,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.0.4_zxbrnrc4iyldik6mikh3pswz4i
+      vite: 4.0.4_cdc316c45c4616342bcc428fb7cad9e2
       vue: 3.2.45
     dev: true
 
@@ -1712,6 +1765,7 @@ packages:
 
   /@vue/devtools-api/6.4.5:
     resolution: {integrity: sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz}
+    dev: false
 
   /@vue/reactivity-transform/3.2.45:
     resolution: {integrity: sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==}
@@ -1732,6 +1786,7 @@ packages:
     dependencies:
       '@vue/reactivity': 3.2.45
       '@vue/shared': 3.2.45
+    dev: false
 
   /@vue/runtime-dom/3.2.45:
     resolution: {integrity: sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==}
@@ -1739,6 +1794,7 @@ packages:
       '@vue/runtime-core': 3.2.45
       '@vue/shared': 3.2.45
       csstype: 2.6.21
+    dev: false
 
   /@vue/server-renderer/3.2.45_vue@3.2.45:
     resolution: {integrity: sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==}
@@ -1748,6 +1804,7 @@ packages:
       '@vue/compiler-ssr': 3.2.45
       '@vue/shared': 3.2.45
       vue: 3.2.45
+    dev: false
 
   /@vue/shared/3.2.45:
     resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==}
@@ -1762,9 +1819,11 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
+    dev: false
 
   /@vueuse/metadata/9.11.1:
     resolution: {integrity: sha512-ABjkrG+VXggNhjfGyw5e/sekxTZfXTwjrYXkkWQmQ7Biyv+Gq9UD6IDNfeGvQZEINI0Qzw6nfuO2UFCd3hlrxQ==}
+    dev: false
 
   /@vueuse/shared/9.11.1_vue@3.2.45:
     resolution: {integrity: sha512-UTZYGAjT96hWn4buf4wstZbeheBVNcKPQuej6qpoSkjF1atdaeCD6kqm9uGL2waHfisSgH9mq0qCRiBOk5C/2w==}
@@ -1773,8 +1832,9 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
+    dev: false
 
-  /@wangeditor/basic-modules/1.1.7_j7icpicfeimtkldwmemjnpdjs4:
+  /@wangeditor/basic-modules/1.1.7_4fd027a0452219352c76611896bc6997:
     resolution: {integrity: sha512-cY9CPkLJaqF05STqfpZKWG4LpxTMeGSIIF1fHvfm/mz+JXatCagjdkbxdikOuKYlxDdeqvOeBmsUBItufDLXZg==}
     peerDependencies:
       '@wangeditor/core': 1.x
@@ -1784,7 +1844,7 @@ packages:
       slate: ^0.72.0
       snabbdom: ^3.1.0
     dependencies:
-      '@wangeditor/core': 1.1.19_qokc4m5r26t2nkvzejrgzroa7e
+      '@wangeditor/core': 1.1.19_83942e33b1d7a7a6aab922626cc5c0f9
       dom7: 3.0.0
       is-url: 1.2.4
       lodash.throttle: 4.1.1
@@ -1793,7 +1853,7 @@ packages:
       snabbdom: 3.5.1
     dev: false
 
-  /@wangeditor/code-highlight/1.0.3_tztyh2vh7kwzpeloifaekkk3my:
+  /@wangeditor/code-highlight/1.0.3_9e6783eaa7faad97916e414045295b66:
     resolution: {integrity: sha512-iazHwO14XpCuIWJNTQTikqUhGKyqj+dUNWJ9288Oym9M2xMVHvnsOmDU2sgUDWVy+pOLojReMPgXCsvvNlOOhw==}
     peerDependencies:
       '@wangeditor/core': 1.x
@@ -1801,14 +1861,14 @@ packages:
       slate: ^0.72.0
       snabbdom: ^3.1.0
     dependencies:
-      '@wangeditor/core': 1.1.19_qokc4m5r26t2nkvzejrgzroa7e
+      '@wangeditor/core': 1.1.19_83942e33b1d7a7a6aab922626cc5c0f9
       dom7: 3.0.0
       prismjs: 1.29.0
       slate: 0.72.8
       snabbdom: 3.5.1
     dev: false
 
-  /@wangeditor/core/1.1.19_qokc4m5r26t2nkvzejrgzroa7e:
+  /@wangeditor/core/1.1.19_83942e33b1d7a7a6aab922626cc5c0f9:
     resolution: {integrity: sha512-KevkB47+7GhVszyYF2pKGKtCSj/YzmClsD03C3zTt+9SR2XWT5T0e3yQqg8baZpcMvkjs1D8Dv4fk8ok/UaS2Q==}
     peerDependencies:
       '@uppy/core': ^2.1.1
@@ -1848,7 +1908,7 @@ packages:
       snabbdom: 3.5.1
     dev: false
 
-  /@wangeditor/editor-for-vue/5.1.12_3apfu3xbp6awzuex7ed3sbrv6y:
+  /@wangeditor/editor-for-vue/5.1.12_d81e5a6ee17f816cd097f907b90635f6:
     resolution: {integrity: sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==}
     peerDependencies:
       '@wangeditor/editor': '>=5.1.0'
@@ -1863,13 +1923,13 @@ packages:
     dependencies:
       '@uppy/core': 2.3.4
       '@uppy/xhr-upload': 2.1.3_@uppy+core@2.3.4
-      '@wangeditor/basic-modules': 1.1.7_j7icpicfeimtkldwmemjnpdjs4
-      '@wangeditor/code-highlight': 1.0.3_tztyh2vh7kwzpeloifaekkk3my
-      '@wangeditor/core': 1.1.19_qokc4m5r26t2nkvzejrgzroa7e
-      '@wangeditor/list-module': 1.0.5_tztyh2vh7kwzpeloifaekkk3my
-      '@wangeditor/table-module': 1.1.4_2dde2uzwslfxq2cqrl35sl4erm
-      '@wangeditor/upload-image-module': 1.0.2_dwqga4onuah5imhngzkgmw6t5a
-      '@wangeditor/video-module': 1.1.4_i6gxywmu7tvxmjxypclnjlcil4
+      '@wangeditor/basic-modules': 1.1.7_4fd027a0452219352c76611896bc6997
+      '@wangeditor/code-highlight': 1.0.3_9e6783eaa7faad97916e414045295b66
+      '@wangeditor/core': 1.1.19_83942e33b1d7a7a6aab922626cc5c0f9
+      '@wangeditor/list-module': 1.0.5_9e6783eaa7faad97916e414045295b66
+      '@wangeditor/table-module': 1.1.4_d0c64d533692cb7868508af7d92f848b
+      '@wangeditor/upload-image-module': 1.0.2_1da06071cda00fd430ed3654665bd3e8
+      '@wangeditor/video-module': 1.1.4_478d7c5994fceb7626f87896d4ac485f
       dom7: 3.0.0
       is-hotkey: 0.2.0
       lodash.camelcase: 4.3.0
@@ -1884,7 +1944,7 @@ packages:
       snabbdom: 3.5.1
     dev: false
 
-  /@wangeditor/list-module/1.0.5_tztyh2vh7kwzpeloifaekkk3my:
+  /@wangeditor/list-module/1.0.5_9e6783eaa7faad97916e414045295b66:
     resolution: {integrity: sha512-uDuYTP6DVhcYf7mF1pTlmNn5jOb4QtcVhYwSSAkyg09zqxI1qBqsfUnveeDeDqIuptSJhkh81cyxi+MF8sEPOQ==}
     peerDependencies:
       '@wangeditor/core': 1.x
@@ -1892,13 +1952,13 @@ packages:
       slate: ^0.72.0
       snabbdom: ^3.1.0
     dependencies:
-      '@wangeditor/core': 1.1.19_qokc4m5r26t2nkvzejrgzroa7e
+      '@wangeditor/core': 1.1.19_83942e33b1d7a7a6aab922626cc5c0f9
       dom7: 3.0.0
       slate: 0.72.8
       snabbdom: 3.5.1
     dev: false
 
-  /@wangeditor/table-module/1.1.4_2dde2uzwslfxq2cqrl35sl4erm:
+  /@wangeditor/table-module/1.1.4_d0c64d533692cb7868508af7d92f848b:
     resolution: {integrity: sha512-5saanU9xuEocxaemGdNi9t8MCDSucnykEC6jtuiT72kt+/Hhh4nERYx1J20OPsTCCdVr7hIyQenFD1iSRkIQ6w==}
     peerDependencies:
       '@wangeditor/core': 1.x
@@ -1909,7 +1969,7 @@ packages:
       slate: ^0.72.0
       snabbdom: ^3.1.0
     dependencies:
-      '@wangeditor/core': 1.1.19_qokc4m5r26t2nkvzejrgzroa7e
+      '@wangeditor/core': 1.1.19_83942e33b1d7a7a6aab922626cc5c0f9
       dom7: 3.0.0
       lodash.isequal: 4.5.0
       lodash.throttle: 4.1.1
@@ -1918,7 +1978,7 @@ packages:
       snabbdom: 3.5.1
     dev: false
 
-  /@wangeditor/upload-image-module/1.0.2_dwqga4onuah5imhngzkgmw6t5a:
+  /@wangeditor/upload-image-module/1.0.2_1da06071cda00fd430ed3654665bd3e8:
     resolution: {integrity: sha512-z81lk/v71OwPDYeQDxj6cVr81aDP90aFuywb8nPD6eQeECtOymrqRODjpO6VGvCVxVck8nUxBHtbxKtjgcwyiA==}
     peerDependencies:
       '@uppy/core': ^2.0.3
@@ -1932,15 +1992,15 @@ packages:
     dependencies:
       '@uppy/core': 2.3.4
       '@uppy/xhr-upload': 2.1.3_@uppy+core@2.3.4
-      '@wangeditor/basic-modules': 1.1.7_j7icpicfeimtkldwmemjnpdjs4
-      '@wangeditor/core': 1.1.19_qokc4m5r26t2nkvzejrgzroa7e
+      '@wangeditor/basic-modules': 1.1.7_4fd027a0452219352c76611896bc6997
+      '@wangeditor/core': 1.1.19_83942e33b1d7a7a6aab922626cc5c0f9
       dom7: 3.0.0
       lodash.foreach: 4.5.0
       slate: 0.72.8
       snabbdom: 3.5.1
     dev: false
 
-  /@wangeditor/video-module/1.1.4_i6gxywmu7tvxmjxypclnjlcil4:
+  /@wangeditor/video-module/1.1.4_478d7c5994fceb7626f87896d4ac485f:
     resolution: {integrity: sha512-ZdodDPqKQrgx3IwWu4ZiQmXI8EXZ3hm2/fM6E3t5dB8tCaIGWQZhmqd6P5knfkRAd3z2+YRSRbxOGfoRSp/rLg==}
     peerDependencies:
       '@uppy/core': ^2.1.4
@@ -1953,7 +2013,7 @@ packages:
     dependencies:
       '@uppy/core': 2.3.4
       '@uppy/xhr-upload': 2.1.3_@uppy+core@2.3.4
-      '@wangeditor/core': 1.1.19_qokc4m5r26t2nkvzejrgzroa7e
+      '@wangeditor/core': 1.1.19_83942e33b1d7a7a6aab922626cc5c0f9
       dom7: 3.0.0
       nanoid: 3.3.4
       slate: 0.72.8
@@ -2255,6 +2315,54 @@ packages:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
     dev: true
 
+  /bpmn-js-properties-panel/0.46.0_bpmn-js@8.10.0:
+    resolution: {integrity: sha512-8MlNvHklIZZQH9vtoKf0A0A1v0sHO4Iz19jGhHeX15czOOiCfdavjo+q23GHWNKzQA9347F91XYFcrnM6FO8zw==}
+    peerDependencies:
+      bpmn-js: ^3.x || ^4.x || ^5.x || ^6.x || ^7.x || ^8.x
+    dependencies:
+      '@bpmn-io/element-templates-validator': 0.2.0
+      '@bpmn-io/extract-process-variables': 0.4.5
+      bpmn-js: 8.10.0
+      ids: 1.0.0
+      inherits: 2.0.4
+      lodash: 4.17.21
+      min-dom: 3.2.1
+      scroll-tabs: 1.0.1
+      selection-update: 0.1.2
+      semver: 6.3.0
+    dev: true
+
+  /bpmn-js-token-simulation/0.10.0:
+    resolution: {integrity: sha512-QuZQ/KVXKt9Vl+XENyOBoTW2Aw+uKjuBlKdCJL6El7AyM7DkJ5bZkSYURshId1SkBDdYg2mJ1flSmsrhGuSfwg==}
+    dependencies:
+      min-dash: 3.8.1
+      min-dom: 0.2.0
+      svg.js: 2.7.1
+    dev: false
+
+  /bpmn-js/8.10.0:
+    resolution: {integrity: sha512-NozeOi01qL0ZdVq8+5hWZcikyEvgrP1yzCBqlhSufJdHFsnEMBCwn2bJJ0B/6JgX+IBwy1sk/Uw+Ds8rQ8vfrw==}
+    dependencies:
+      bpmn-moddle: 7.1.3
+      css.escape: 1.5.1
+      diagram-js: 7.9.0
+      diagram-js-direct-editing: 1.8.0_diagram-js@7.9.0
+      ids: 1.0.0
+      inherits: 2.0.4
+      min-dash: 3.8.1
+      min-dom: 3.2.1
+      object-refs: 0.3.0
+      tiny-svg: 2.2.4
+    dev: true
+
+  /bpmn-moddle/7.1.3:
+    resolution: {integrity: sha512-ZcBfw0NSOdYTSXFKEn7MOXHItz7VfLZTrFYKO8cK6V8ZzGjCcdiLIOiw7Lctw1PJsihhLiZQS8Htj2xKf+NwCg==}
+    dependencies:
+      min-dash: 3.8.1
+      moddle: 5.0.4
+      moddle-xml: 9.0.6
+    dev: true
+
   /brace-expansion/1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:
@@ -2282,8 +2390,6 @@ packages:
       snapdragon-node: 2.1.1
       split-string: 3.1.0
       to-regex: 3.0.2
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /braces/3.0.2:
@@ -2353,6 +2459,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /camunda-bpmn-moddle/7.0.1:
+    resolution: {integrity: sha512-Br8Diu6roMpziHdpl66Dhnm0DTnCFMrSD9zwLV08LpD52QA0UsXxU87XfHf08HjuB7ly0Hd1bvajZRpf9hbmYQ==}
+    dev: false
+
   /caniuse-lite/1.0.30001431:
     resolution: {integrity: sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==}
     dev: true
@@ -2460,6 +2570,11 @@ packages:
     engines: {node: '>=0.8'}
     dev: true
 
+  /clsx/1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /collection-visit/1.0.0:
     resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==}
     engines: {node: '>=0.10.0'}
@@ -2523,10 +2638,51 @@ packages:
       dot-prop: 5.3.0
     dev: true
 
+  /component-classes/1.2.6:
+    resolution: {integrity: sha512-hPFGULxdwugu1QWW3SvVOCUHLzO34+a2J6Wqy0c5ASQkfi9/8nZcBB0ZohaEbXOQlCflMAEMmEWk7u7BVs4koA==}
+    dependencies:
+      component-indexof: 0.0.3
+    dev: false
+
+  /component-closest/0.1.4:
+    resolution: {integrity: sha512-NF9hMj6JKGM5sb6wP/dg7GdJOttaIH9PcTsUNdWcrvu7Kw/5R5swQAFpgaYEHlARrNMyn4Wf7O1PlRej+pt76Q==}
+    dependencies:
+      component-matches-selector: 0.1.7
+    dev: false
+
+  /component-delegate/0.2.4:
+    resolution: {integrity: sha512-OlpcB/6Fi+kXQPh/TfXnSvvmrU04ghz7vcJh/jgLF0Ni+I+E3WGlKJQbBGDa5X+kVUG8WxOgjP+8iWbz902fPg==}
+    dependencies:
+      component-closest: 0.1.4
+      component-event: 0.1.4
+    dev: false
+
   /component-emitter/1.3.0:
     resolution: {integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==}
     dev: true
 
+  /component-event/0.1.4:
+    resolution: {integrity: sha512-GMwOG8MnUHP1l8DZx1ztFO0SJTFnIzZnBDkXAj8RM2ntV2A6ALlDxgbMY1Fvxlg6WPQ+5IM/a6vg4PEYbjg/Rw==}
+
+  /component-event/0.2.1:
+    resolution: {integrity: sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==}
+    dev: false
+
+  /component-indexof/0.0.3:
+    resolution: {integrity: sha512-puDQKvx/64HZXb4hBwIcvQLaLgux8o1CbWl39s41hrIIZDl1lJiD5jc22gj3RBeGK0ovxALDYpIbyjqDUUl0rw==}
+    dev: false
+
+  /component-matches-selector/0.1.7:
+    resolution: {integrity: sha512-Yb2+pVBvrqkQVpPaDBF0DYXRreBveXJNrpJs9FnFu8PF6/5IIcz5oDZqiH9nB5hbD2/TmFVN5ZCxBzqu7yFFYQ==}
+    dependencies:
+      component-query: 0.0.3
+      global-object: 1.0.0
+    dev: false
+
+  /component-query/0.0.3:
+    resolution: {integrity: sha512-VgebQseT1hz1Ps7vVp2uaSg+N/gsI5ts3AZUSnN6GMA2M82JH7o+qYifWhmVE/e8w/H48SJuA3nA9uX8zRe95Q==}
+    dev: false
+
   /compute-scroll-into-view/1.0.17:
     resolution: {integrity: sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==}
     dev: false
@@ -2561,8 +2717,8 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
-      JSONStream: 1.3.5
       is-text-path: 1.0.1
+      JSONStream: 1.3.5
       lodash: 4.17.21
       meow: 8.1.2
       split2: 3.2.2
@@ -2596,7 +2752,7 @@ packages:
       vary: 1.1.2
     dev: true
 
-  /cosmiconfig-typescript-loader/4.2.0_bxtyj3et3xbsdyxhh3oblnfbj4:
+  /cosmiconfig-typescript-loader/4.2.0_0de784ec93ddc321e2e73edc15b4a14f:
     resolution: {integrity: sha512-NkANeMnaHrlaSSlpKGyvn2R4rqUDeE/9E5YHx+b4nwo0R8dZyAqcih8/gxpCZvqWP9Vf6xuLpMSzSgdVEIM78g==}
     engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
@@ -2607,7 +2763,7 @@ packages:
     dependencies:
       '@types/node': 18.11.18
       cosmiconfig: 8.0.0
-      ts-node: 10.9.1_awa2wsr5thmg3i7jqycphctjfq
+      ts-node: 10.9.1_0581ab4a3d99d86da3e98604f38a692c
       typescript: 4.9.4
     dev: true
 
@@ -2689,6 +2845,9 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
+  /css.escape/1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
   /cssesc/3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -2704,6 +2863,7 @@ packages:
 
   /csstype/2.6.21:
     resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
+    dev: false
 
   /d/1.0.1:
     resolution: {integrity: sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==}
@@ -2727,11 +2887,6 @@ packages:
 
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.0.0
     dev: true
@@ -2796,6 +2951,54 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: false
 
+  /diagram-js-direct-editing/1.8.0_diagram-js@7.9.0:
+    resolution: {integrity: sha512-B4Xj+PJfgBjbPEzT3uZQEkZI5xHFB0Izc+7BhDFuHidzrEMzQKZrFGdA3PqfWhReHf3dp+iB6Tt11G9eGNjKMw==}
+    peerDependencies:
+      diagram-js: '*'
+    dependencies:
+      diagram-js: 7.9.0
+      min-dash: 3.8.1
+      min-dom: 3.2.1
+    dev: true
+
+  /diagram-js/11.6.0:
+    resolution: {integrity: sha512-84qw+D3WVMRP25DSRSUSaXp1he65e49EXP59mTUh3OSBPllSL/5s28Cx3uyCt6441Sw11LTQ0ZujSvCt8r6V+A==}
+    dependencies:
+      '@bpmn-io/diagram-js-ui': 0.2.2
+      clsx: 1.2.1
+      css.escape: 1.5.1
+      didi: 9.0.2
+      hammerjs: 2.0.8
+      inherits-browser: 0.1.0
+      min-dash: 4.0.0
+      min-dom: 4.1.0
+      object-refs: 0.3.0
+      path-intersection: 2.2.1
+      tiny-svg: 3.0.0
+    dev: false
+
+  /diagram-js/7.9.0:
+    resolution: {integrity: sha512-o1yUtX5TXV1pmpevP55gxU/AEG6nCidOXGs/HLuxNXG0zMZ3jQta7kMqRxTK93rNw/XuHmP1eMOwdvdJ2RP5qA==}
+    dependencies:
+      css.escape: 1.5.1
+      didi: 5.2.1
+      hammerjs: 2.0.8
+      inherits: 2.0.4
+      min-dash: 3.8.1
+      min-dom: 3.2.1
+      object-refs: 0.3.0
+      path-intersection: 2.2.1
+      tiny-svg: 2.2.4
+    dev: true
+
+  /didi/5.2.1:
+    resolution: {integrity: sha512-IKNnajUlD4lWMy/Q9Emkk7H1qnzREgY4UyE3IhmOi/9IKua0JYtYldk928bOdt1yNxN8EiOy1sqtSozEYsmjCg==}
+    dev: true
+
+  /didi/9.0.2:
+    resolution: {integrity: sha512-q2+aj+lnJcUweV7A9pdUrwFr4LHVmRPwTmQLtHPFz4aT7IBoryN6Iy+jmFku+oIzr5ebBkvtBCOb87+dJhb7bg==}
+    dev: false
+
   /diff/4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
@@ -2876,6 +3079,9 @@ packages:
       domelementtype: 2.3.0
     dev: true
 
+  /domify/1.4.1:
+    resolution: {integrity: sha512-x18nuiDHMCZGXr4KJSRMf/TWYtiaRo6RX8KN9fEbW54mvbQ6pieUuerC2ahBg+kEp1wycFj8MPUI0WkIOw5E9w==}
+
   /domutils/1.7.0:
     resolution: {integrity: sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==}
     dependencies:
@@ -2954,7 +3160,7 @@ packages:
       escape-html: 1.0.3
       lodash: 4.17.21
       lodash-es: 4.17.21
-      lodash-unified: 1.0.3_3ib2ivapxullxkx3xftsimdk7u
+      lodash-unified: 1.0.3_da03a4540fbd16bbaafbb96724306afd
       memoize-one: 6.0.0
       normalize-wheel-es: 1.2.0
       vue: 3.2.45
@@ -3094,7 +3300,7 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13', pnpm: '>= 7.0.0'}
     dev: true
 
-  /eslint-plugin-prettier/4.2.1_cn4lalcyadplruoxa5mhp7j3dq:
+  /eslint-plugin-prettier/4.2.1_1378b02c5800deb8d1d7075877fd3b1c:
     resolution: {integrity: sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -3328,8 +3534,6 @@ packages:
       regex-not: 1.0.2
       snapdragon: 0.8.2
       to-regex: 3.0.2
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /ext/1.7.0:
@@ -3365,8 +3569,6 @@ packages:
       regex-not: 1.0.2
       snapdragon: 0.8.2
       to-regex: 3.0.2
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /fast-deep-equal/3.1.3:
@@ -3396,6 +3598,13 @@ packages:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
     dev: true
 
+  /fast-xml-parser/4.0.15:
+    resolution: {integrity: sha512-bF4/E33/K/EZDHV23IJpSK2SU7rZTaSkDH5G85nXX8SKlQ9qBpWQhyPpm2nlTBewDJgtpd6+1x4TNpKmocmthQ==}
+    hasBin: true
+    dependencies:
+      strnum: 1.0.5
+    dev: false
+
   /fastest-levenshtein/1.0.16:
     resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
     engines: {node: '>= 4.9.1'}
@@ -3608,6 +3817,10 @@ packages:
       global-prefix: 3.0.0
     dev: true
 
+  /global-object/1.0.0:
+    resolution: {integrity: sha512-mSPSkY6UsHv6hgW0V2dfWBWTS8TnPnLx3ECVNoWp6rBI2Bg66VYoqGoTFlH/l7XhAZ/l+StYlntXlt87BEeCcg==}
+    dev: false
+
   /global-prefix/3.0.0:
     resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
     engines: {node: '>=6'}
@@ -3653,6 +3866,10 @@ packages:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: true
 
+  /hammerjs/2.0.8:
+    resolution: {integrity: sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==}
+    engines: {node: '>=0.8.0'}
+
   /hard-rejection/2.1.0:
     resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
     engines: {node: '>=6'}
@@ -3727,6 +3944,12 @@ packages:
     hasBin: true
     dev: true
 
+  /highlight.js/9.18.5:
+    resolution: {integrity: sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==}
+    deprecated: Support has ended for 9.x series. Upgrade to @latest
+    requiresBuild: true
+    dev: false
+
   /hosted-git-info/2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
     dev: true
@@ -3738,6 +3961,10 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
+  /htm/3.1.1:
+    resolution: {integrity: sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==}
+    dev: false
+
   /html-tags/3.2.0:
     resolution: {integrity: sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==}
     engines: {node: '>=8'}
@@ -3783,6 +4010,10 @@ packages:
       '@babel/runtime': 7.20.1
     dev: false
 
+  /ids/1.0.0:
+    resolution: {integrity: sha512-Zvtq1xUto4LttpstyOlFum8lKx+i1OmRfg+6A9drFS9iSZsDPMHG4Sof/qwNR4kCU7jBeWFPrY2ocHxiz7cCRw==}
+    dev: true
+
   /ignore/5.2.1:
     resolution: {integrity: sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==}
     engines: {node: '>= 4'}
@@ -3825,6 +4056,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /indexof/0.0.1:
+    resolution: {integrity: sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==}
+    dev: true
+
   /inflight/1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     dependencies:
@@ -3832,6 +4067,10 @@ packages:
       wrappy: 1.0.2
     dev: true
 
+  /inherits-browser/0.1.0:
+    resolution: {integrity: sha512-CJHHvW3jQ6q7lzsXPpapLdMx5hDpSF3FSh45pwsj6bKxJJ8Nl8v43i5yXnr3BdfOimGHKyniewQtnAIp3vyJJw==}
+    dev: false
+
   /inherits/2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     dev: true
@@ -4093,6 +4332,10 @@ packages:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
     dev: true
 
+  /json-source-map/0.6.1:
+    resolution: {integrity: sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg==}
+    dev: true
+
   /json-stable-stringify-without-jsonify/1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
@@ -4265,7 +4508,7 @@ packages:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
     dev: false
 
-  /lodash-unified/1.0.3_3ib2ivapxullxkx3xftsimdk7u:
+  /lodash-unified/1.0.3_da03a4540fbd16bbaafbb96724306afd:
     resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
     peerDependencies:
       '@types/lodash-es': '*'
@@ -4409,6 +4652,10 @@ packages:
       object-visit: 1.0.1
     dev: true
 
+  /matches-selector/1.2.0:
+    resolution: {integrity: sha512-c4vLwYWyl+Ji+U43eU/G5FwxWd4ZH0ePUsFs5y0uwD9HUEFBXUQ1zUUan+78IpRD+y4pUfG0nAzNM292K7ItvA==}
+    dev: true
+
   /mathml-tag-names/2.1.3:
     resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
     dev: true
@@ -4489,8 +4736,6 @@ packages:
       regex-not: 1.0.2
       snapdragon: 0.8.2
       to-regex: 3.0.2
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /micromatch/4.0.5:
@@ -4529,6 +4774,43 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /min-dash/3.8.1:
+    resolution: {integrity: sha512-evumdlmIlg9mbRVPbC4F5FuRhNmcMS5pvuBUbqb1G9v09Ro0ImPEgz5n3khir83lFok1inKqVDjnKEg3GpDxQg==}
+
+  /min-dash/4.0.0:
+    resolution: {integrity: sha512-piIvVJ/nxuA4+LpnYIzF6oCtRvdtDvQJteSC+H768H2UvPKFKIt5oiJnUVtr0ZdchneXTcvUZ91vIrvWVIN0AA==}
+    dev: false
+
+  /min-dom/0.2.0:
+    resolution: {integrity: sha512-VmxugbnAcVZGqvepjhOA4d4apmrpX8mMaRS+/jo0dI5Yorzrr4Ru9zc9KVALlY/+XakVCb8iQ+PYXljihQcsNw==}
+    dependencies:
+      component-classes: 1.2.6
+      component-closest: 0.1.4
+      component-delegate: 0.2.4
+      component-event: 0.1.4
+      component-matches-selector: 0.1.7
+      component-query: 0.0.3
+      domify: 1.4.1
+    dev: false
+
+  /min-dom/3.2.1:
+    resolution: {integrity: sha512-v6YCmnDzxk4rRJntWTUiwggLupPw/8ZSRqUq0PDaBwVZEO/wYzCH4SKVBV+KkEvf3u0XaWHly5JEosPtqRATZA==}
+    dependencies:
+      component-event: 0.1.4
+      domify: 1.4.1
+      indexof: 0.0.1
+      matches-selector: 1.2.0
+      min-dash: 3.8.1
+    dev: true
+
+  /min-dom/4.1.0:
+    resolution: {integrity: sha512-1lj1EyoSwY/UmTeT/hhPiZTsq+vK9D+8FAJ/53iK5jT1otkG9rJTixSKdjmTieEvdfES+sKbbTptzaQJhnacjA==}
+    dependencies:
+      component-event: 0.2.1
+      domify: 1.4.1
+      min-dash: 4.0.0
+    dev: false
+
   /min-indent/1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -4560,6 +4842,10 @@ packages:
     resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
     dev: true
 
+  /mitt/1.2.0:
+    resolution: {integrity: sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw==}
+    dev: true
+
   /mitt/3.0.0:
     resolution: {integrity: sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==}
     dev: false
@@ -4581,6 +4867,20 @@ packages:
       ufo: 1.0.1
     dev: true
 
+  /moddle-xml/9.0.6:
+    resolution: {integrity: sha512-tl0reHpsY/aKlLGhXeFlQWlYAQHFxTkFqC8tq8jXRYpQSnLVw13T6swMaourLd7EXqHdWsc+5ggsB+fEep6xZQ==}
+    dependencies:
+      min-dash: 3.8.1
+      moddle: 5.0.4
+      saxen: 8.1.2
+    dev: true
+
+  /moddle/5.0.4:
+    resolution: {integrity: sha512-Kjb+hjuzO+YlojNGxEUXvdhLYTHTtAABDlDcJTtTcn5MbJF9Zkv4I1Fyvp3Ypmfgg1EfHDZ3PsCQTuML9JD6wg==}
+    dependencies:
+      min-dash: 3.8.1
+    dev: true
+
   /ms/2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
     dev: true
@@ -4617,8 +4917,6 @@ packages:
       regex-not: 1.0.2
       snapdragon: 0.8.2
       to-regex: 3.0.2
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /natural-compare-lite/1.4.0:
@@ -4723,6 +5021,9 @@ packages:
   /object-inspect/1.12.2:
     resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
 
+  /object-refs/0.3.0:
+    resolution: {integrity: sha512-eP0ywuoWOaDoiake/6kTJlPJhs+k0qNm4nYRzXLNHj6vh+5M3i9R1epJTdxIPGlhWc4fNRQ7a6XJNCX+/L4FOQ==}
+
   /object-visit/1.0.1:
     resolution: {integrity: sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==}
     engines: {node: '>=0.10.0'}
@@ -4832,6 +5133,9 @@ packages:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
 
+  /path-intersection/2.2.1:
+    resolution: {integrity: sha512-9u8xvMcSfuOiStv9bPdnRJQhGQXLKurew94n4GPQCdH1nj9QKC9ObbNoIpiRq8skiOBxKkt277PgOoFgAt3/rA==}
+
   /path-is-absolute/1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
@@ -4882,7 +5186,7 @@ packages:
     hasBin: true
     dev: true
 
-  /pinia/2.0.29_prq2uz4lho2pwp6irk4cfkrxwu:
+  /pinia/2.0.29_typescript@4.9.4+vue@3.2.45:
     resolution: {integrity: sha512-5z/KpFecq/cIgfeTnulJXldiLcTITRkTe3N58RKYSj0Pc1EdR6oyCdnf5A9jLoVwBqX5LtHhd0kGlpzWvk9oiQ==}
     peerDependencies:
       '@vue/composition-api': ^1.4.0
@@ -5339,16 +5643,36 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /sax/1.2.4:
+    resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
+    dev: false
+
+  /saxen/8.1.2:
+    resolution: {integrity: sha512-xUOiiFbc3Ow7p8KMxwsGICPx46ZQvy3+qfNVhrkwfz3Vvq45eGt98Ft5IQaA1R/7Tb5B5MKh9fUR9x3c3nDTxw==}
+    dev: true
+
   /scroll-into-view-if-needed/2.2.29:
     resolution: {integrity: sha512-hxpAR6AN+Gh53AdAimHM6C8oTN1ppwVZITihix+WqalywBeFcQ6LdQP5ABNl26nX8GTEL7VT+b8lKpdqq65wXg==}
     dependencies:
       compute-scroll-into-view: 1.0.17
     dev: false
 
+  /scroll-tabs/1.0.1:
+    resolution: {integrity: sha512-W4xjEwNS4QAyQnaJ450vQTcKpbnalBAfsTDV926WrxEMOqjyj2To8uv2d0Cp0oxMdk5TkygtzXmctPNc2zgBcg==}
+    dependencies:
+      min-dash: 3.8.1
+      min-dom: 3.2.1
+      mitt: 1.2.0
+    dev: true
+
   /scule/1.0.0:
     resolution: {integrity: sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==}
     dev: true
 
+  /selection-update/0.1.2:
+    resolution: {integrity: sha512-4jzoJNh7VT2s2tvm/kUSskSw7pD0BVcrrGccbfOMK+3AXLBPz6nIy1yo+pbXgvNoTNII96Pq92+sAY+rF0LUAA==}
+    dev: true
+
   /semver/5.7.1:
     resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
     hasBin: true
@@ -5486,8 +5810,6 @@ packages:
       source-map: 0.5.7
       source-map-resolve: 0.5.3
       use: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /sortablejs/1.14.0:
@@ -5667,11 +5989,15 @@ packages:
       acorn: 8.8.1
     dev: true
 
+  /strnum/1.0.5:
+    resolution: {integrity: sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==}
+    dev: false
+
   /style-search/0.1.0:
     resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
     dev: true
 
-  /stylelint-config-html/1.1.0_kbto3rg3njmczth2rrsgfnlsqa:
+  /stylelint-config-html/1.1.0_5066edc4db6a582cccfa8c6462b57280:
     resolution: {integrity: sha512-IZv4IVESjKLumUGi+HWeb7skgO6/g4VMuAYrJdlqQFndgbj6WJAXPhaysvBiXefX79upBdQVumgYcdd17gCpjQ==}
     engines: {node: ^12 || >=14}
     peerDependencies:
@@ -5724,7 +6050,7 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
     dependencies:
-      '@csstools/selector-specificity': 2.0.2_wajs5nedgkikc5pcuwett7legi
+      '@csstools/selector-specificity': 2.0.2_b0132eb4833290a175e2a58939fd6432
       balanced-match: 2.0.0
       colord: 2.9.3
       cosmiconfig: 7.1.0
@@ -5821,14 +6147,16 @@ packages:
       posthtml-svg-mode: 1.0.3
       query-string: 4.3.4
       traverse: 0.6.7
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /svg-tags/1.0.0:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
     dev: true
 
+  /svg.js/2.7.1:
+    resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==}
+    dev: false
+
   /svgo/2.8.0:
     resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}
     engines: {node: '>=10.13.0'}
@@ -5888,6 +6216,14 @@ packages:
       readable-stream: 3.6.0
     dev: true
 
+  /tiny-svg/2.2.4:
+    resolution: {integrity: sha512-NOi39lBknf4UdDEahNkbEAJnzhu1ZcN2j75IS2vLRmIhsfxdZpTChfLKBcN1ShplVmPIXJAIafk6YY5/Aa80lQ==}
+    dev: true
+
+  /tiny-svg/3.0.0:
+    resolution: {integrity: sha512-+u6VomQO7MbI7CQe5q1IwNePpbVKG/HVdUQBmaEpSCdP/QmeyjhrS6WKFsNetXlvf9LWu/f5woRqjMdxBMe/0w==}
+    dev: false
+
   /tiny-warning/1.0.3:
     resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
     dev: false
@@ -5941,7 +6277,7 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /ts-node/10.9.1_awa2wsr5thmg3i7jqycphctjfq:
+  /ts-node/10.9.1_0581ab4a3d99d86da3e98604f38a692c:
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
     peerDependencies:
@@ -6037,6 +6373,7 @@ packages:
     resolution: {integrity: sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==}
     engines: {node: '>=4.2.0'}
     hasBin: true
+    dev: true
 
   /ufo/1.0.1:
     resolution: {integrity: sha512-boAm74ubXHY7KJQZLlXrtMz52qFvpsbOxDcZOnw/Wf+LS4Mmyu7JxmzD4tDLtUQtmZECypJ0FrCz4QIe6dvKRA==}
@@ -6075,7 +6412,7 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unplugin-auto-import/0.12.2_6cqwe7wq6jqijtkao3lw26pm3a:
+  /unplugin-auto-import/0.12.2_f0a1627ed0f26084cd4076d76d79ecd8:
     resolution: {integrity: sha512-hC4w0GZjPjmLtrxV0u10XO350V9eCtQyEyifXr7B9UGD7SvbbIvKuOcHt58Zd4FAqZJXKWoXkpr9mdhBp85Usw==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -6156,7 +6493,7 @@ packages:
       acorn: 8.8.1
       chokidar: 3.5.3
       rollup: 3.11.0
-      vite: 4.0.4_zxbrnrc4iyldik6mikh3pswz4i
+      vite: 4.0.4_cdc316c45c4616342bcc428fb7cad9e2
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.4.6
     dev: true
@@ -6244,7 +6581,7 @@ packages:
       chalk: 4.1.2
       debug: 4.3.4
       fs-extra: 10.1.0
-      vite: 4.0.4_zxbrnrc4iyldik6mikh3pswz4i
+      vite: 4.0.4_cdc316c45c4616342bcc428fb7cad9e2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -6265,7 +6602,7 @@ packages:
       '@types/eslint': 8.4.10
       eslint: 8.32.0
       rollup: 2.79.1
-      vite: 4.0.4_zxbrnrc4iyldik6mikh3pswz4i
+      vite: 4.0.4_cdc316c45c4616342bcc428fb7cad9e2
     dev: true
 
   /vite-plugin-progress/0.0.6_vite@4.0.4:
@@ -6277,7 +6614,7 @@ packages:
       picocolors: 1.0.0
       progress: 2.0.3
       rd: 2.0.1
-      vite: 4.0.4_zxbrnrc4iyldik6mikh3pswz4i
+      vite: 4.0.4_cdc316c45c4616342bcc428fb7cad9e2
     dev: true
 
   /vite-plugin-purge-icons/0.9.2_vite@4.0.4:
@@ -6289,7 +6626,7 @@ packages:
       '@purge-icons/core': 0.9.1
       '@purge-icons/generated': 0.9.0
       rollup-plugin-purge-icons: 0.9.1
-      vite: 4.0.4_zxbrnrc4iyldik6mikh3pswz4i
+      vite: 4.0.4_cdc316c45c4616342bcc428fb7cad9e2
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -6308,7 +6645,7 @@ packages:
       pathe: 0.2.0
       svg-baker: 1.7.0
       svgo: 2.8.0
-      vite: 4.0.4_zxbrnrc4iyldik6mikh3pswz4i
+      vite: 4.0.4_cdc316c45c4616342bcc428fb7cad9e2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -6320,7 +6657,7 @@ packages:
     dependencies:
       '@vue/compiler-sfc': 3.2.45
       magic-string: 0.25.9
-      vite: 4.0.4_zxbrnrc4iyldik6mikh3pswz4i
+      vite: 4.0.4_cdc316c45c4616342bcc428fb7cad9e2
     dev: true
 
   /vite-plugin-windicss/1.8.10_vite@4.0.4:
@@ -6331,13 +6668,13 @@ packages:
       '@windicss/plugin-utils': 1.8.10
       debug: 4.3.4
       kolorist: 1.6.0
-      vite: 4.0.4_zxbrnrc4iyldik6mikh3pswz4i
+      vite: 4.0.4_cdc316c45c4616342bcc428fb7cad9e2
       windicss: 3.5.6
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite/4.0.4_zxbrnrc4iyldik6mikh3pswz4i:
+  /vite/4.0.4_cdc316c45c4616342bcc428fb7cad9e2:
     resolution: {integrity: sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -6386,6 +6723,7 @@ packages:
         optional: true
     dependencies:
       vue: 3.2.45
+    dev: false
 
   /vue-eslint-parser/9.1.0_eslint@8.32.0:
     resolution: {integrity: sha512-NGn/iQy8/Wb7RrRa4aRkokyCZfOUWk19OP5HP6JEozQFX5AoS/t+Z0ZN7FY4LlmWc4FNI922V7cvX28zctN8dQ==}
@@ -6416,6 +6754,7 @@ packages:
       '@intlify/vue-devtools': 9.2.2
       '@vue/devtools-api': 6.4.5
       vue: 3.2.45
+    dev: false
 
   /vue-router/4.1.6_vue@3.2.45:
     resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
@@ -6465,6 +6804,15 @@ packages:
       '@vue/runtime-dom': 3.2.45
       '@vue/server-renderer': 3.2.45_vue@3.2.45
       '@vue/shared': 3.2.45
+    dev: false
+
+  /vue3-treeselect/0.1.10_vue@3.2.45:
+    resolution: {integrity: sha512-QawdAbzmlZ7T3uBdSU4FRnrnmcV0Q9Jrph5hUBQJcXmM9OZ8lULQo7O7YbKxkOyuDX9Yx2rGjs6L5FKcL1FeXA==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.2.45
+    dev: false
 
   /vuedraggable/4.1.0_vue@3.2.45:
     resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
@@ -6588,6 +6936,13 @@ packages:
     resolution: {integrity: sha512-3H+fDBKBR2wLJgyA7k9C/w1Xljx6Maml5ukV0WDY06HjYyGs2FEz6XhcwRCLIDXX4pBP3Gu0nX9DbCeuuRA2Ew==}
     dev: false
 
+  /xml-js/1.6.11:
+    resolution: {integrity: sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==}
+    hasBin: true
+    dependencies:
+      sax: 1.2.4
+    dev: false
+
   /xml-name-validator/4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue b/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
index fe555123b..7ad2e0e85 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
@@ -4,7 +4,7 @@
     <!-- <myProcessDesigner -->
     <my-process-designer
       :key="`designer-${reloadIndex}`"
-      v-if="xmlString != undefined"
+      v-if="xmlString !== undefined"
       v-model="xmlString"
       :value="xmlString"
       v-bind="controlForm"
@@ -70,14 +70,14 @@ onMounted(() => {
   console.log(modelId, 'modelId')
   if (modelId) {
     // let data = '4b4909d8-97e7-11ec-8e20-862bc1a4a054'
-    getModelApi(modelId).then((response) => {
-      console.log(response, 'response')
-      xmlString.value = response.data.bpmnXml
+    getModelApi(modelId).then((data) => {
+      console.log(data, 'response')
+      xmlString.value = data.bpmnXml
       model.value = {
-        ...response.data,
+        ...data,
         bpmnXml: undefined // 清空 bpmnXml 属性
       }
-      // this.controlForm.processId = response.data.key
+      // this.controlForm.processId = data.key
 
       // xmlString.value =
       //   '<?xml version="1.0" encoding="UTF-8"?>\n<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" id="diagram_Process_1645980650311" targetNamespace="http://activiti.org/bpmn"><bpmn2:process id="flowable_01" name="flowable测试" isExecutable="true"><bpmn2:startEvent id="Event_1iruxim"><bpmn2:outgoing>Flow_0804gmo</bpmn2:outgoing></bpmn2:startEvent><bpmn2:userTask id="task01" name="task01"><bpmn2:incoming>Flow_0804gmo</bpmn2:incoming><bpmn2:outgoing>Flow_0cx479x</bpmn2:outgoing></bpmn2:userTask><bpmn2:sequenceFlow id="Flow_0804gmo" sourceRef="Event_1iruxim" targetRef="task01" /><bpmn2:endEvent id="Event_1mdsccz"><bpmn2:incoming>Flow_0cx479x</bpmn2:incoming></bpmn2:endEvent><bpmn2:sequenceFlow id="Flow_0cx479x" sourceRef="task01" targetRef="Event_1mdsccz" /></bpmn2:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="flowable_01_di" bpmnElement="flowable_01"><bpmndi:BPMNEdge id="Flow_0cx479x_di" bpmnElement="Flow_0cx479x"><di:waypoint x="440" y="350" /><di:waypoint x="492" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_0804gmo_di" bpmnElement="Flow_0804gmo"><di:waypoint x="288" y="350" /><di:waypoint x="340" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNShape id="Event_1iruxim_di" bpmnElement="Event_1iruxim"><dc:Bounds x="252" y="332" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="task01_di" bpmnElement="task01"><dc:Bounds x="340" y="310" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Event_1mdsccz_di" bpmnElement="Event_1mdsccz"><dc:Bounds x="492" y="332" width="36" height="36" /></bpmndi:BPMNShape></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn2:definitions>'
diff --git a/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue
index 736888c54..f93e45914 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/taskAssignRule/index.vue
@@ -289,6 +289,7 @@ const handleUpdate = (row) => {
   // 2. 再设置表单
   formData.value = {
     ...row,
+    modelId: modelId,
     options: [],
     roleIds: [],
     deptIds: [],

From 1e8a379ed07d8ee1acb7fb45301c9c92a6abc840 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 30 Jan 2023 22:10:41 +0800
Subject: [PATCH 50/59] =?UTF-8?q?vue3=20=E5=B7=A5=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?=EF=BC=9A=E4=BF=AE=E5=A4=8D=E6=B5=81=E7=A8=8B=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E7=9A=84=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-ui-admin-vue3/src/types/auto-components.d.ts     |  3 +++
 .../src/views/bpm/processInstance/detail.vue           | 10 +++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/types/auto-components.d.ts b/yudao-ui-admin-vue3/src/types/auto-components.d.ts
index 81b2d6ab9..b8419b5b6 100644
--- a/yudao-ui-admin-vue3/src/types/auto-components.d.ts
+++ b/yudao-ui-admin-vue3/src/types/auto-components.d.ts
@@ -24,6 +24,7 @@ declare module '@vue/runtime-core' {
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -61,6 +62,8 @@ declare module '@vue/runtime-core' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
index 890cddb24..d0d256128 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
@@ -209,9 +209,9 @@ const { proxy } = getCurrentInstance()
 // ========== 审批信息 ==========
 const id = query.id as unknown as number
 const processInstanceLoading = ref(false) // 流程实例的加载中
-const processInstance = ref() // 流程实例
-const runningTasks = ref() // 运行中的任务
-const auditForms = ref() // 审批任务的表单
+const processInstance = ref({}) // 流程实例
+const runningTasks = ref([]) // 运行中的任务
+const auditForms = ref([]) // 审批任务的表单
 const auditRule = reactive({
   reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
 })
@@ -257,7 +257,7 @@ const detailForm = ref({
 
 // ========== 审批记录 ==========
 const tasksLoad = ref(true)
-const tasks = ref()
+const tasks = ref([])
 
 const getTimelineItemIcon = (item) => {
   if (item.result === 1) {
@@ -301,7 +301,7 @@ const updateAssigneeRules = ref({
   assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
 })
 const updateAssigneeFormRef = ref()
-const userOptions = ref()
+const userOptions = ref([])
 
 // 处理转派审批人
 const handleUpdateAssignee = (task) => {

From b700b316cda80690f4f04a63c69075eecd9c1692 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Tue, 31 Jan 2023 10:37:35 +0800
Subject: [PATCH 51/59] bug

---
 .../package/penal/listeners/ElementListeners.vue     | 12 ++++++++----
 .../penal/multi-instance/ElementMultiInstance.vue    |  8 ++++----
 .../package/penal/task/ElementTask.vue               |  4 ++--
 .../penal/task/task-components/ReceiveTask.vue       |  2 +-
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
index 332ff2538..bc261fb8f 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
@@ -316,7 +316,9 @@ const openListenerForm = (listener, index) => {
   // 打开侧边栏并清楚验证状态
   listenerFormModelVisible.value = true
   nextTick(() => {
-    if (listenerFormRef.value) listenerFormRef.value.clearValidate()
+    if (listenerFormRef.value) {
+      listenerFormRef.value.clearValidate()
+    }
   })
 }
 // 打开监听器字段编辑弹窗
@@ -325,7 +327,9 @@ const openListenerFieldForm = (field, index) => {
   editingListenerFieldIndex.value = field ? index : -1
   listenerFieldFormModelVisible.value = true
   nextTick(() => {
-    if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate()
+    if (listenerFieldFormRef.value) {
+      listenerFieldFormRef.value.clearValidate()
+    }
   })
 }
 // 保存监听器注入字段
@@ -345,7 +349,7 @@ const saveListenerFiled = async () => {
   })
 }
 // 移除监听器字段
-const removeListenerField = (field, index) => {
+const removeListenerField = (index) => {
   ElMessageBox.confirm('确认移除该字段吗？', '提示', {
     confirmButtonText: '确 认',
     cancelButtonText: '取 消'
@@ -357,7 +361,7 @@ const removeListenerField = (field, index) => {
     .catch(() => console.info('操作取消'))
 }
 // 移除监听器
-const removeListener = (listener, index) => {
+const removeListener = (index) => {
   ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
     confirmButtonText: '确 认',
     cancelButtonText: '取 消'
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
index ce973b635..d187684d1 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
@@ -87,8 +87,8 @@ const defaultLoopInstanceForm = ref({
   exclusive: false
 })
 const loopInstanceForm = ref({})
-const bpmnElement = ref()
-const multiLoopInstance = ref()
+const bpmnElement = ref(null)
+const multiLoopInstance = ref(null)
 
 const getElementLoop = (businessObject) => {
   if (!businessObject.loopCharacteristics) {
@@ -158,7 +158,7 @@ const changeLoopCharacteristicsType = (type) => {
     )
   }
   window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
-    loopCharacteristics: multiLoopInstance.value
+    loopCharacteristics: toRaw(multiLoopInstance.value)
   })
 }
 // 循环基数
@@ -245,7 +245,7 @@ onBeforeUnmount(() => {
 })
 
 watch(
-  () => props.type,
+  () => props.businessObject,
   (val) => {
     bpmnElement.value = window.bpmnInstances.bpmnElement
     getElementLoop(val)
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
index b5f6f1c21..946daaeab 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts" name="ElementTaskConfig">
-import { ref, watch, shallowRef } from 'vue'
+import { ref, watch } from 'vue'
 import { ElForm, ElFormItem, ElCheckbox } from 'element-plus'
 import UserTask from './task-components/UserTask.vue'
 import ScriptTask from './task-components/ScriptTask.vue'
@@ -36,7 +36,7 @@ const taskConfigForm = ref({
   asyncBefore: false,
   exclusive: false
 })
-const witchTaskComponent = shallowRef()
+const witchTaskComponent = ref()
 const installedComponent = ref({
   // 手工任务与普通任务一致，不需要其他配置
   // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
index 669295534..52c0a59e4 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
@@ -112,7 +112,7 @@ onBeforeUnmount(() => {
 watch(
   () => props.id,
   () => {
-    bpmnElement.value = window.bpmnInstances.bpmnElement
+    // bpmnElement.value = window.bpmnInstances.bpmnElement
     nextTick(() => {
       getBindMessage()
     })

From 3a954b47bb9ee1fe9c69a05e58f9bb348a69867a Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Tue, 31 Jan 2023 14:12:29 +0800
Subject: [PATCH 52/59] =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=B5=8F=E8=A7=88bpmn?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/designer/ProcessViewer.vue        | 15 ++++++------
 .../package/designer/index.js                 |  8 -------
 .../package/designer/index.ts                 |  8 +++++++
 .../package/designer/index2.js                |  8 -------
 .../package/designer/index2.ts                |  8 +++++++
 .../src/views/bpm/model/index.vue             | 24 ++++++++++++++++++-
 6 files changed, 46 insertions(+), 25 deletions(-)
 delete mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index.ts
 delete mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index2.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index2.ts

diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
index 1b698388b..33b848f7d 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="my-process-designer">
     <div class="my-process-designer__container">
-      <div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
+      <div class="my-process-designer__canvas" style="height: 760px" ref="bpmnCanvas"></div>
     </div>
   </div>
 </template>
@@ -9,8 +9,7 @@
 <script setup lang="ts" name="MyProcessViewer">
 import BpmnViewer from 'bpmn-js/lib/Viewer'
 import DefaultEmptyXML from './plugins/defaultEmpty'
-import { onMounted } from 'vue'
-import { onBeforeUnmount, provide, ref, watch } from 'vue'
+import { onMounted, onBeforeUnmount, provide, ref, watch } from 'vue'
 const props = defineProps({
   value: {
     // BPMN XML 字符串
@@ -44,7 +43,7 @@ const emit = defineEmits(['destroy'])
 let bpmnModeler
 
 const xml = ref('')
-const activityList = ref([])
+const activityLists = ref([])
 const processInstance = ref(undefined)
 const taskList = ref([])
 const bpmnCanvas = ref()
@@ -84,7 +83,7 @@ const createNewDiagram = async (xml) => {
 /* 高亮流程图 */
 // TODO 芋艿：如果多个 endActivity 的话，目前的逻辑可能有一定的问题。https://www.jdon.com/workflow/multi-events.html
 const highlightDiagram = async () => {
-  const activityList = activityList.value
+  const activityList = activityLists.value
   if (activityList.length === 0) {
     return
   }
@@ -266,7 +265,7 @@ const elementHover = (element) => {
   !elementOverlayIds.value && (elementOverlayIds.value = {})
   !overlays.value && (overlays.value = bpmnModeler.get('overlays'))
   // 展示信息
-  const activity = activityList.value.find((m) => m.key === element.value.id)
+  const activity = activityLists.value.find((m) => m.key === element.value.id)
   if (!activity) {
     return
   }
@@ -329,7 +328,7 @@ const elementOut = (element) => {
 
 onMounted(() => {
   xml.value = props.value
-  activityList.value = props.activityData
+  activityLists.value = props.activityData
   // 初始化
   initBpmnModeler()
   createNewDiagram(xml.value)
@@ -355,7 +354,7 @@ watch(
 watch(
   () => props.activityData,
   (newActivityData) => {
-    activityList.value = newActivityData
+    activityLists.value = newActivityData
     createNewDiagram(xml.value)
   }
 )
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index.js
deleted file mode 100644
index 03a814c8c..000000000
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import MyProcessDesigner from "./ProcessDesigner.vue";
-
-MyProcessDesigner.install = function(Vue) {
-  Vue.component(MyProcessDesigner.name, MyProcessDesigner);
-};
-
-// 流程图的设计器，可编辑
-export default MyProcessDesigner;
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index.ts b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index.ts
new file mode 100644
index 000000000..852284688
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index.ts
@@ -0,0 +1,8 @@
+import MyProcessDesigner from './ProcessDesigner.vue'
+
+MyProcessDesigner.install = function (Vue) {
+  Vue.component(MyProcessDesigner.name, MyProcessDesigner)
+}
+
+// 流程图的设计器，可编辑
+export default MyProcessDesigner
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index2.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index2.js
deleted file mode 100644
index 55974693a..000000000
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index2.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import MyProcessViewer from "./ProcessViewer.vue";
-
-MyProcessViewer.install = function(Vue) {
-  Vue.component(MyProcessViewer.name, MyProcessViewer);
-};
-
-// 流程图的查看器，不可编辑
-export default MyProcessViewer;
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index2.ts b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index2.ts
new file mode 100644
index 000000000..ebe8ca78c
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index2.ts
@@ -0,0 +1,8 @@
+import MyProcessViewer from './ProcessViewer.vue'
+
+MyProcessViewer.install = function (Vue) {
+  Vue.component(MyProcessViewer.name, MyProcessViewer)
+}
+
+// 流程图的查看器，不可编辑
+export default MyProcessViewer
diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
index b541e0756..3ef26e59a 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
@@ -298,6 +298,17 @@
         v-if="formDetailVisible"
       />
     </XModal>
+
+    <!-- 流程模型图的预览 -->
+    <XModal title="流程图" v-model="showBpmnOpen" width="80%" height="90%">
+      <my-process-viewer
+        key="designer"
+        v-model="bpmnXML"
+        :value="bpmnXML"
+        v-bind="bpmnControlForm"
+        :prefix="bpmnControlForm.prefix"
+      />
+    </XModal>
   </ContentWrap>
 </template>
 
@@ -317,6 +328,11 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const router = useRouter() // 路由
 
+const showBpmnOpen = ref(false)
+const bpmnXML = ref(null)
+const bpmnControlForm = ref({
+  prefix: 'flowable'
+})
 // ========== 列表相关 ==========
 const [registerTable, { reload }] = useXTable({
   allSchemas: allSchemas,
@@ -369,7 +385,13 @@ const handleFormDetail = async (row) => {
 const handleBpmnDetail = (row) => {
   // TODO 芋艿：流程组件开发中
   console.log(row)
-  message.success('流程组件开发中，预计 2 月底完成')
+  ModelApi.getModelApi(row).then((response) => {
+    console.log(response, 'response')
+    bpmnXML.value = response.bpmnXml
+    // 弹窗打开
+    showBpmnOpen.value = true
+  })
+  // message.success('流程组件开发中，预计 2 月底完成')
 }
 
 // 点击任务分配按钮

From 63055cc559f8eef3fc4d621fb72584115260d69f Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Tue, 31 Jan 2023 16:17:11 +0800
Subject: [PATCH 53/59] =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=98=BE=E7=A4=BAbpmn?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/designer/ProcessViewer.vue        | 74 ++++++++++++++++++-
 .../src/views/bpm/processInstance/create.vue  | 16 ++--
 .../src/views/bpm/processInstance/detail.vue  |  2 +
 3 files changed, 85 insertions(+), 7 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
index 33b848f7d..f2738e47c 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -10,6 +10,7 @@
 import BpmnViewer from 'bpmn-js/lib/Viewer'
 import DefaultEmptyXML from './plugins/defaultEmpty'
 import { onMounted, onBeforeUnmount, provide, ref, watch } from 'vue'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 const props = defineProps({
   value: {
     // BPMN XML 字符串
@@ -265,15 +266,31 @@ const elementHover = (element) => {
   !elementOverlayIds.value && (elementOverlayIds.value = {})
   !overlays.value && (overlays.value = bpmnModeler.get('overlays'))
   // 展示信息
+  console.log(activityLists.value, 'activityLists.value')
+  console.log(element.value, 'element.value')
   const activity = activityLists.value.find((m) => m.key === element.value.id)
+  console.log(activity, 'activityactivityactivityactivity')
   if (!activity) {
     return
   }
+  console.log(elementOverlayIds.value, 'elementOverlayIds.value')
+  console.log(element.value.id, 'element.value.id')
+  console.log(
+    elementOverlayIds.value[element.value.id],
+    'elementOverlayIds.value[element.value.id]'
+  )
+  console.log(
+    !elementOverlayIds.value[element.value.id],
+    '!elementOverlayIds.value[element.value.id]'
+  )
+  console.log(element.value.type, 'element.value.type')
   if (!elementOverlayIds.value[element.value.id] && element.value.type !== 'bpmn:Process') {
+    console.log('进入')
     let html = `<div class="element-overlays">
             <p>Elemet id: ${element.value.id}</p>
             <p>Elemet type: ${element.value.type}</p>
           </div>` // 默认值
+    console.log(processInstance.value, 'processInstance')
     if (element.value.type === 'bpmn:StartEvent' && processInstance.value) {
       html = `<p>发起人：${processInstance.value.startUser.nickname}</p>
                   <p>部门：${processInstance.value.startUser.deptName}</p>
@@ -286,7 +303,7 @@ const elementHover = (element) => {
       }
       html = `<p>审批人：${task.assigneeUser.nickname}</p>
                   <p>部门：${task.assigneeUser.deptName}</p>
-                  <p>结果：${getDictDataLabel(
+                  <p>结果：${getIntDictOptions(
                     DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
                     task.result
                   )}</p>
@@ -306,7 +323,7 @@ const elementHover = (element) => {
       }
       console.log(html)
     } else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
-      html = `<p>结果：${getDictDataLabel(
+      html = `<p>结果：${getIntDictOptions(
         DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
         processInstance.value.result
       )}</p>`
@@ -314,10 +331,19 @@ const elementHover = (element) => {
         html += `<p>结束时间：${parseTime(processInstance.value.endTime)}</p>`
       }
     }
+    console.log(html, 'html111111111111111')
+    console.log(
+      elementOverlayIds.value[element.value.id],
+      'elementOverlayIds.value[element.value.id]'
+    )
     elementOverlayIds.value[element.value.id] = overlays.value.add(element.value, {
       position: { left: 0, bottom: 0 },
       html: `<div class="element-overlays">${html}</div>`
     })
+    console.log(
+      elementOverlayIds.value[element.value.id],
+      'elementOverlayIds.value[element.value.id]'
+    )
   }
 }
 // 流程图的元素被 out
@@ -325,6 +351,50 @@ const elementOut = (element) => {
   overlays.value.remove({ element })
   elementOverlayIds.value[element.id] = null
 }
+const parseTime = (time) => {
+  if (!time) {
+    return null
+  }
+  const format = '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
+      time = parseInt(time)
+    } else if (typeof time === 'string') {
+      time = time
+        .replace(new RegExp(/-/gm), '/')
+        .replace('T', ' ')
+        .replace(new RegExp(/\.[\d]{3}/gm), '')
+    }
+    if (typeof time === 'number' && time.toString().length === 10) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
 
 onMounted(() => {
   xml.value = props.value
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
index 6be6747b6..c0542b227 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
@@ -38,7 +38,13 @@
           <span class="el-icon-picture-outline">流程图</span>
         </div>
         <!-- TODO 芋艿：待完成？？？ -->
-        <!-- <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" /> -->
+        <my-process-viewer
+          key="designer"
+          v-model="bpmnXML"
+          :value="bpmnXML"
+          v-bind="bpmnControlForm"
+          :prefix="bpmnControlForm.prefix"
+        />
       </el-card>
     </div>
   </ContentWrap>
@@ -89,7 +95,7 @@ const handleSelect = async (row) => {
 
     // 加载流程图
     DefinitionApi.getProcessDefinitionBpmnXMLApi(row.id).then((response) => {
-      bpmnXML.value = response.data
+      bpmnXML.value = response
     })
     // 情况二：业务表单
   } else if (row.formCustomCreatePath) {
@@ -126,9 +132,9 @@ const submitForm = async (formData) => {
 
 // // BPMN 数据
 const bpmnXML = ref(null)
-// const bpmnControlForm=ref( {
-//   prefix: "flowable"
-// })
+const bpmnControlForm = ref({
+  prefix: 'flowable'
+})
 </script>
 
 <style lang="scss">
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
index d0d256128..f6703e41a 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
@@ -144,7 +144,9 @@
       <my-process-viewer
         key="designer"
         v-model="bpmnXML"
+        :value="bpmnXML"
         v-bind="bpmnControlForm"
+        :prefix="bpmnControlForm.prefix"
         :activityData="activityList"
         :processInstanceData="processInstance"
         :taskData="tasks"

From 9e35ca512cdf78e570c4226f601a5488ff65f64d Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Wed, 1 Feb 2023 14:16:32 +0800
Subject: [PATCH 54/59] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E6=B5=81=E9=80=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-ui-admin-vue3/src/views/bpm/model/index.vue      |  2 +-
 yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue  |  4 ++--
 .../src/views/bpm/processInstance/detail.vue           | 10 ++++++++--
 yudao-ui-admin-vue3/src/views/bpm/task/done/index.vue  |  2 +-
 yudao-ui-admin-vue3/src/views/bpm/task/todo/index.vue  |  2 +-
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
index 3ef26e59a..5fafb9606 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/index.vue
@@ -426,7 +426,7 @@ const handleCreate = async () => {
 // 修改操作
 const handleUpdate = async (rowId: number) => {
   resetForm()
-  await setDialogTile('create')
+  await setDialogTile('edit')
   // 设置数据
   saveForm.value = await ModelApi.getModelApi(rowId)
 }
diff --git a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
index bbdeca772..0e55ceda8 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
@@ -45,8 +45,8 @@ const submitForm = async () => {
       await LeaveApi.createLeaveApi(data)
       message.success(t('common.createSuccess'))
       // 关闭窗口
-      await router.push({
-        path: '/oa/leave/create'
+      router.push({
+        path: '/bpm/oa/leave'
       })
     } finally {
       actionLoading.value = false
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
index f6703e41a..d6ca8faa6 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
@@ -71,7 +71,7 @@
       <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="16" :offset="6">
         <form-create
           :rule="detailForm.rule"
-          v-model:api="fApi"
+          :api="fApi"
           :option="detailForm.option"
           v-model="detailForm.value"
         />
@@ -108,7 +108,7 @@
               <el-card :body-style="{ padding: '10px' }">
                 <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
                   审批人：{{ item.assigneeUser.nickname }}
-                  <el-tag type="info" size="mini">{{ item.assigneeUser.deptName }}</el-tag>
+                  <el-tag type="info" size="small">{{ item.assigneeUser.deptName }}</el-tag>
                 </label>
                 <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
                 <label style="color: #8a909c; font-weight: normal">
@@ -220,6 +220,9 @@ const auditRule = reactive({
 
 // 处理审批通过和不通过的操作
 const handleAudit = async (task, pass) => {
+  console.log(task, 'task')
+  console.log(pass, 'pass')
+  console.log(runningTasks.value, 'runningTasks.value')
   // 1.1 获得对应表单
   const index = runningTasks.value.indexOf(task)
   const auditFormRef = proxy.$refs['form' + index][0]
@@ -236,6 +239,9 @@ const handleAudit = async (task, pass) => {
     id: task.id,
     reason: auditForms.value[index].reason
   }
+  console.log(data, '是否通过')
+  console.log(pass, 'pass是否通过')
+  console.log(task, 'task')
   if (pass) {
     await TaskApi.approveTask(data)
     message.success('审批通过成功')
diff --git a/yudao-ui-admin-vue3/src/views/bpm/task/done/index.vue b/yudao-ui-admin-vue3/src/views/bpm/task/done/index.vue
index f6314cb6f..978aa2e58 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/task/done/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/task/done/index.vue
@@ -30,7 +30,7 @@ const handleAudit = (row) => {
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: {
-      id: row.processInstanceId
+      id: row.processInstance.id
     }
   })
 }
diff --git a/yudao-ui-admin-vue3/src/views/bpm/task/todo/index.vue b/yudao-ui-admin-vue3/src/views/bpm/task/todo/index.vue
index a2843440b..28210cf48 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/task/todo/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/task/todo/index.vue
@@ -30,7 +30,7 @@ const handleAudit = (row) => {
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: {
-      id: row.processInstanceId
+      id: row.processInstance.id
     }
   })
 }

From e718263f5fb8f3cddc0ce2b58f7e41a44a542420 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Wed, 1 Feb 2023 15:18:59 +0800
Subject: [PATCH 55/59] =?UTF-8?q?=E6=97=B6=E9=97=B4=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
index 0e55ceda8..60ee85ea1 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
@@ -13,7 +13,7 @@
 </template>
 <script setup lang="ts">
 import { FormExpose } from '@/components/Form'
-import XEUtils from 'xe-utils'
+// import XEUtils from 'xe-utils'
 
 // 业务相关的 import
 import * as LeaveApi from '@/api/bpm/leave'
@@ -39,8 +39,10 @@ const submitForm = async () => {
       // 设置提交中
       actionLoading.value = true
       const data = unref(formRef)?.formModel as LeaveApi.LeaveVO
-      data.startTime = XEUtils.toDateString(data.startTime, 'yyyy-MM-dd HH:mm:ss')
-      data.endTime = XEUtils.toDateString(data.endTime, 'yyyy-MM-dd HH:mm:ss')
+      // data.startTime = XEUtils.toDateString(data.startTime, 'yyyy-MM-dd HH:mm:ss')
+      // data.endTime = XEUtils.toDateString(data.endTime, 'yyyy-MM-dd HH:mm:ss')
+      data.startTime = Date.parse(new Date(data.startTime).toString())
+      data.endTime = Date.parse(new Date(data.endTime).toString())
       // 添加的提交
       await LeaveApi.createLeaveApi(data)
       message.success(t('common.createSuccess'))

From 467a984955406c4364d694c1d1bfcebbcabc6ffa Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Wed, 1 Feb 2023 15:37:58 +0800
Subject: [PATCH 56/59] =?UTF-8?q?=E8=B7=AF=E7=94=B1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-ui-admin-vue3/src/router/modules/remaining.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/router/modules/remaining.ts b/yudao-ui-admin-vue3/src/router/modules/remaining.ts
index 83f2374eb..433759612 100644
--- a/yudao-ui-admin-vue3/src/router/modules/remaining.ts
+++ b/yudao-ui-admin-vue3/src/router/modules/remaining.ts
@@ -270,7 +270,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
         }
       },
       {
-        path: '/oa/leave/create',
+        path: '/bpm/oa/leave/create',
         component: () => import('@/views/bpm/oa/leave/create.vue'),
         name: 'OALeaveCreate',
         meta: {
@@ -282,7 +282,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
         }
       },
       {
-        path: '/oa/leave/detail',
+        path: '/bpm/oa/leave/detail',
         component: () => import('@/views/bpm/oa/leave/detail.vue'),
         name: 'OALeaveDetail',
         meta: {

From bdf8bafec59ec280e843685859947479993234b0 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Wed, 1 Feb 2023 16:20:16 +0800
Subject: [PATCH 57/59] =?UTF-8?q?bpmnjs=E5=9B=BE=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E6=A1=86=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/designer/ProcessViewer.vue        | 75 +++++++++----------
 1 file changed, 35 insertions(+), 40 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
index f2738e47c..4f22ca521 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -9,7 +9,7 @@
 <script setup lang="ts" name="MyProcessViewer">
 import BpmnViewer from 'bpmn-js/lib/Viewer'
 import DefaultEmptyXML from './plugins/defaultEmpty'
-import { onMounted, onBeforeUnmount, provide, ref, watch } from 'vue'
+import { onMounted, onBeforeUnmount, provide, ref, watch, toRaw } from 'vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 const props = defineProps({
   value: {
@@ -49,8 +49,8 @@ const processInstance = ref(undefined)
 const taskList = ref([])
 const bpmnCanvas = ref()
 // const element = ref()
-const elementOverlayIds = ref()
-const overlays = ref()
+const elementOverlayIds = ref(null)
+const overlays = ref(null)
 
 const initBpmnModeler = () => {
   if (bpmnModeler) return
@@ -67,7 +67,6 @@ const createNewDiagram = async (xml) => {
   let newName = `业务流程_${new Date().getTime()}`
   let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix)
   try {
-    // console.log(this.bpmnModeler.importXML);
     let { warnings } = await bpmnModeler.importXML(xmlString)
     if (warnings && warnings.length) {
       warnings.forEach((warn) => console.warn(warn))
@@ -94,7 +93,6 @@ const highlightDiagram = async () => {
   let todoActivity = activityList.find((m) => !m.endTime) // 找到待办的任务
   let endActivity = activityList[activityList.length - 1] // 获得最后一个任务
   // debugger
-  // console.log(this.bpmnModeler.getDefinitions().rootElements[0].flowElements);
   bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach((n) => {
     let activity = activityList.find((m) => m.key === n.id) // 找到对应的活动
     if (!activity) {
@@ -270,27 +268,14 @@ const elementHover = (element) => {
   console.log(element.value, 'element.value')
   const activity = activityLists.value.find((m) => m.key === element.value.id)
   console.log(activity, 'activityactivityactivityactivity')
-  if (!activity) {
-    return
-  }
-  console.log(elementOverlayIds.value, 'elementOverlayIds.value')
-  console.log(element.value.id, 'element.value.id')
-  console.log(
-    elementOverlayIds.value[element.value.id],
-    'elementOverlayIds.value[element.value.id]'
-  )
-  console.log(
-    !elementOverlayIds.value[element.value.id],
-    '!elementOverlayIds.value[element.value.id]'
-  )
-  console.log(element.value.type, 'element.value.type')
+  // if (!activity) {
+  //   return
+  // }
   if (!elementOverlayIds.value[element.value.id] && element.value.type !== 'bpmn:Process') {
-    console.log('进入')
     let html = `<div class="element-overlays">
             <p>Elemet id: ${element.value.id}</p>
             <p>Elemet type: ${element.value.type}</p>
           </div>` // 默认值
-    console.log(processInstance.value, 'processInstance')
     if (element.value.type === 'bpmn:StartEvent' && processInstance.value) {
       html = `<p>发起人：${processInstance.value.startUser.nickname}</p>
                   <p>部门：${processInstance.value.startUser.deptName}</p>
@@ -301,13 +286,24 @@ const elementHover = (element) => {
       if (!task) {
         return
       }
+      let optionData = getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)
+      let dataResult = ''
+      optionData.forEach((element) => {
+        if (element.value == task.result) {
+          dataResult = element.label
+        }
+      })
       html = `<p>审批人：${task.assigneeUser.nickname}</p>
                   <p>部门：${task.assigneeUser.deptName}</p>
-                  <p>结果：${getIntDictOptions(
-                    DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
-                    task.result
-                  )}</p>
+                  <p>结果：${dataResult}</p>
                   <p>创建时间：${parseTime(task.createTime)}</p>`
+      // html = `<p>审批人：${task.assigneeUser.nickname}</p>
+      //             <p>部门：${task.assigneeUser.deptName}</p>
+      //             <p>结果：${getIntDictOptions(
+      //               DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
+      //               task.result
+      //             )}</p>
+      //             <p>创建时间：${parseTime(task.createTime)}</p>`
       if (task.endTime) {
         html += `<p>结束时间：${parseTime(task.endTime)}</p>`
       }
@@ -323,32 +319,32 @@ const elementHover = (element) => {
       }
       console.log(html)
     } else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
-      html = `<p>结果：${getIntDictOptions(
-        DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
-        processInstance.value.result
-      )}</p>`
+      let optionData = getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)
+      let dataResult = ''
+      optionData.forEach((element) => {
+        if (element.value == processInstance.value.result) {
+          dataResult = element.label
+        }
+      })
+      html = `<p>结果：${dataResult}</p>`
+      // html = `<p>结果：${getIntDictOptions(
+      //   DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
+      //   processInstance.value.result
+      // )}</p>`
       if (processInstance.value.endTime) {
         html += `<p>结束时间：${parseTime(processInstance.value.endTime)}</p>`
       }
     }
     console.log(html, 'html111111111111111')
-    console.log(
-      elementOverlayIds.value[element.value.id],
-      'elementOverlayIds.value[element.value.id]'
-    )
-    elementOverlayIds.value[element.value.id] = overlays.value.add(element.value, {
+    elementOverlayIds.value[element.value.id] = toRaw(overlays.value).add(element.value, {
       position: { left: 0, bottom: 0 },
       html: `<div class="element-overlays">${html}</div>`
     })
-    console.log(
-      elementOverlayIds.value[element.value.id],
-      'elementOverlayIds.value[element.value.id]'
-    )
   }
 }
 // 流程图的元素被 out
 const elementOut = (element) => {
-  overlays.value.remove({ element })
+  toRaw(overlays.value).remove({ element })
   elementOverlayIds.value[element.id] = null
 }
 const parseTime = (time) => {
@@ -416,7 +412,6 @@ onBeforeUnmount(() => {
 watch(
   () => props.value,
   (newValue) => {
-    console.log(newValue, 'oldVal')
     xml.value = newValue
     createNewDiagram(xml.value)
   }

From ff147137c80d41c74e2238245dfd35a0fc41eb85 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Thu, 2 Feb 2023 09:44:10 +0800
Subject: [PATCH 58/59] =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E9=9A=90=E8=97=8F=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4=E9=87=8D=E7=BD=AE=E6=8C=89=E9=92=AE=EF=BC=8C=E4=B8=8D?=
 =?UTF-8?q?=E5=8F=AF=E5=A1=AB=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bpm/processInstance/detail.vue       | 14 +++++---------
 .../src/views/bpm/processInstance/index.vue        |  2 +-
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
index d6ca8faa6..255e1d0c6 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue
@@ -70,8 +70,8 @@
       <!-- 情况一：流程表单 -->
       <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="16" :offset="6">
         <form-create
+          ref="fApi"
           :rule="detailForm.rule"
-          :api="fApi"
           :option="detailForm.option"
           v-model="detailForm.value"
         />
@@ -200,6 +200,7 @@ import * as TaskApi from '@/api/bpm/task'
 import * as ActivityApi from '@/api/bpm/activity'
 import { formatPast2 } from '@/utils/formatTime'
 import { setConfAndFields2 } from '@/utils/formCreate'
+// import { OptionAttrs } from '@form-create/element-ui/types/config'
 import { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useUserStore } from '@/store/modules/user'
 
@@ -220,9 +221,6 @@ const auditRule = reactive({
 
 // 处理审批通过和不通过的操作
 const handleAudit = async (task, pass) => {
-  console.log(task, 'task')
-  console.log(pass, 'pass')
-  console.log(runningTasks.value, 'runningTasks.value')
   // 1.1 获得对应表单
   const index = runningTasks.value.indexOf(task)
   const auditFormRef = proxy.$refs['form' + index][0]
@@ -239,9 +237,6 @@ const handleAudit = async (task, pass) => {
     id: task.id,
     reason: auditForms.value[index].reason
   }
-  console.log(data, '是否通过')
-  console.log(pass, 'pass是否通过')
-  console.log(task, 'task')
   if (pass) {
     await TaskApi.approveTask(data)
     message.success('审批通过成功')
@@ -409,8 +404,9 @@ const getDetail = () => {
           data.formVariables
         )
         nextTick().then(() => {
-          fApi.value?.btn.show(false)
-          fApi.value?.resetBtn.show(false)
+          fApi.value?.fapi.btn.show(false)
+          fApi.value?.fapi.resetBtn.show(false)
+          fApi.value?.fapi.disabled(true)
         })
       }
 
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
index c648318e7..d2f817532 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
@@ -14,7 +14,7 @@
       </template>
       <!-- 当前审批任务 -->
       <template #tasks_default="{ row }">
-        <el-button v-for="task in row.tasks" :key="task.id" type="text">
+        <el-button v-for="task in row.tasks" :key="task.id" link>
           <span>{{ task.name }}</span>
         </el-button>
       </template>

From 2d5470bcf3bc85c703f5fd6e7c56ac480cd53265 Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Thu, 2 Feb 2023 13:35:58 +0800
Subject: [PATCH 59/59] =?UTF-8?q?xml=E8=BD=ACjson?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-ui-admin-vue3/package.json              |  3 +-
 .../package/designer/ProcessDesigner.vue      | 31 ++++++++-----------
 yudao-ui-admin-vue3/src/main.ts               |  4 +--
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/yudao-ui-admin-vue3/package.json b/yudao-ui-admin-vue3/package.json
index dd9377ade..7fd3f96ed 100644
--- a/yudao-ui-admin-vue3/package.json
+++ b/yudao-ui-admin-vue3/package.json
@@ -43,7 +43,7 @@
     "echarts-wordcloud": "^2.1.0",
     "element-plus": "2.2.28",
     "fast-xml-parser": "^4.0.13",
-    "highlight.js": "^9.18.5",
+    "highlight.js": "^11.7.0",
     "intro.js": "^6.0.0",
     "jsencrypt": "^3.3.1",
     "lodash-es": "^4.17.21",
@@ -53,6 +53,7 @@
     "pinia": "^2.0.29",
     "qrcode": "^1.5.1",
     "qs": "^6.11.0",
+    "steady-xml": "^0.1.0",
     "url": "^0.11.0",
     "vue": "3.2.45",
     "vue-i18n": "9.2.2",
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
index 5be0f9148..edc110dcc 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -188,22 +188,14 @@
       <!-- <div id="js-properties-panel" class="panel"></div> -->
       <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
     </div>
-    <XModal
-      title="预览"
-      width="80%"
-      height="90%"
-      v-model="previewModelVisible"
-      append-to-body
-      destroy-on-close
-    >
-      <div v-highlight>
-        <pre>
-            <code>
+    <XModal title="预览" width="80%" height="90%" v-model="previewModelVisible" destroy-on-close>
+      <!-- append-to-body -->
+      <pre v-highlight>
+            <code class="hljs">
             <!-- 高亮代码块 -->
             {{ previewResult }}
             </code>
         </pre>
-      </div>
       <!-- <pre>
         <code class="hljs" v-html="highlightedCode(previewType, previewResult)"></code>
       </pre> -->
@@ -241,7 +233,7 @@ import flowableModdleExtension from './plugins/extension-moddle/flowable'
 // 引入json转换与高亮
 // import xml2js from 'xml-js'
 import xml2js from 'fast-xml-parser'
-// import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
+import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
 // 代码高亮插件
 // import hljs from 'highlight.js/lib/highlight'
 // import 'highlight.js/styles/github-gist.css'
@@ -638,18 +630,21 @@ const previewProcessJson = () => {
 
     // const rootNode = parseXmlString(xml)
     // console.log(rootNode, 'rootNoderootNode')
-    // const rootNodes = new XmlNode(XmlNodeType.Root)
-    // rootNodes.toJsObject()
-    // console.log(JSON.stringify(rootNodes), ';;;;;;;;;;;;;;;')
+    const rootNodes = new XmlNode(XmlNodeType.Root, parseXmlString(xml))
+    // console.log(rootNodes, 'rootNodesrootNodesrootNodes')
+    // console.log(rootNodes.parent.toJsObject(), 'rootNodes.toJSON()')
+    // console.log(JSON.stringify(rootNodes.parent.toJsObject()), 'rootNodes.toJSON()')
+    // console.log(JSON.stringify(rootNodes.parent.toJSON()), 'rootNodes.toJSON()')
 
     const parser = new xml2js.XMLParser()
     let jObj = parser.parse(xml)
-    // console.log(jObj, 'jObjjObjjObjjObjjObj')
+    console.log(jObj, 'jObjjObjjObjjObjjObj')
     // const builder = new xml2js.XMLBuilder(xml)
     // const xmlContent = builder
     // console.log(xmlContent, 'xmlContent')
     // console.log(xml2js, 'convertconvertconvert')
-    previewResult.value = jObj
+    previewResult.value = rootNodes.parent.toJSON()
+    // previewResult.value = jObj
     // previewResult.value = convert.xml2json(xml,  {explicitArray : false},{ spaces: 2 })
     previewType.value = 'json'
     previewModelVisible.value = true
diff --git a/yudao-ui-admin-vue3/src/main.ts b/yudao-ui-admin-vue3/src/main.ts
index 9f1427958..6e32beff3 100644
--- a/yudao-ui-admin-vue3/src/main.ts
+++ b/yudao-ui-admin-vue3/src/main.ts
@@ -50,7 +50,7 @@ import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
 
 import hljs from 'highlight.js' //导入代码高亮文件
-import 'highlight.js/styles/github-gist.css' //导入代码高亮样式
+import 'highlight.js/styles/github.css' //导入代码高亮样式  新版
 
 // 本地开发模式 全局引入 element-plus 样式，加快第一次进入速度
 if (isDevMode()) {
@@ -66,7 +66,7 @@ const setupAll = async () => {
   app.directive('highlight', function (el) {
     const blocks = el.querySelectorAll('code')
     blocks.forEach((block: any) => {
-      hljs.highlightBlock(block)
+      hljs.highlightElement(block)
     })
   })