Merge branch 'feature/bpm' of https://github.com/GoldenZqqq/yudao-ui-admin-vue3 into feature/bpm

.env.dev

@@ -32,3 +32,6 @@ VITE_MALL_H5_DOMAIN='http://mall.yudao.iocoder.cn'
 
 # 验证码的开关
 VITE_APP_CAPTCHA_ENABLE=true
+
+# GoView域名
+VITE_GOVIEW_URL='http://127.0.0.1:3000'

.env.local

@@ -29,3 +29,6 @@ VITE_MALL_H5_DOMAIN='http://localhost:3000'
 
 # 验证码的开关
 VITE_APP_CAPTCHA_ENABLE=false
+
+# GoView域名
+VITE_GOVIEW_URL='http://127.0.0.1:3000'

.env.prod

@@ -29,3 +29,6 @@ VITE_OUT_DIR=dist-prod
 
 # 商城H5会员端域名
 VITE_MALL_H5_DOMAIN='http://mall.yudao.iocoder.cn'
+
+# GoView域名
+VITE_GOVIEW_URL='http://127.0.0.1:3000'

.env.stage

@@ -29,3 +29,6 @@ VITE_OUT_DIR=dist-stage
 
 # 商城H5会员端域名
 VITE_MALL_H5_DOMAIN='http://mall.yudao.iocoder.cn'
+
+# GoView域名
+VITE_GOVIEW_URL='http://127.0.0.1:3000'

.env.test

@@ -29,3 +29,6 @@ VITE_OUT_DIR=dist-test
 
 # 商城H5会员端域名
 VITE_MALL_H5_DOMAIN='http://mall.yudao.iocoder.cn'
+
+# GoView域名
+VITE_GOVIEW_URL='http://127.0.0.1:3000'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yudao-ui-admin-vue3",
-  "version": "2.3.0-snapshot",
+  "version": "2.4.0-snapshot",
   "description": "基于vue3、vite4、element-plus、typesScript",
   "author": "xingyu",
   "private": false,
@@ -38,7 +38,7 @@
     "animate.css": "^4.1.1",
     "axios": "^1.6.8",
     "benz-amr-recorder": "^1.1.5",
-    "bpmn-js-token-simulation": "^0.10.0",
+    "bpmn-js-token-simulation": "^0.36.0",
     "camunda-bpmn-moddle": "^7.0.1",
     "cropperjs": "^1.6.1",
     "crypto-js": "^4.2.0",
@@ -47,7 +47,7 @@
     "driver.js": "^1.3.1",
     "echarts": "^5.5.0",
     "echarts-wordcloud": "^2.1.0",
-    "element-plus": "2.8.4",
+    "element-plus": "2.9.1",
     "fast-xml-parser": "^4.3.2",
     "highlight.js": "^11.9.0",
     "jsencrypt": "^3.3.2",
@@ -73,6 +73,7 @@
     "vue-i18n": "9.10.2",
     "vue-router": "4.4.5",
     "vue-types": "^5.1.1",
+    "vue3-signature": "^0.2.4",
     "vuedraggable": "^4.1.0",
     "web-storage-cache": "^1.1.1",
     "xml-js": "^1.6.11"

pnpm-lock.yaml

@@ -45,8 +45,8 @@ dependencies:
     specifier: ^1.1.5
     version: 1.1.5
   bpmn-js-token-simulation:
-    specifier: ^0.10.0
-    version: 0.10.0
+    specifier: ^0.36.0
+    version: 0.36.0
   camunda-bpmn-moddle:
     specifier: ^7.0.1
     version: 7.0.1
@@ -72,8 +72,8 @@ dependencies:
     specifier: ^2.1.0
     version: 2.1.0(echarts@5.5.1)
   element-plus:
-    specifier: 2.8.4
-    version: 2.8.4(vue@3.5.12)
+    specifier: 2.9.1
+    version: 2.9.1(vue@3.5.12)
   fast-xml-parser:
     specifier: ^4.3.2
     version: 4.5.0
@@ -149,6 +149,9 @@ dependencies:
   vue-types:
     specifier: ^5.1.1
     version: 5.1.3(vue@3.5.12)
+  vue3-signature:
+    specifier: ^0.2.4
+    version: 0.2.4(vue@3.5.12)
   vuedraggable:
     specifier: ^4.1.0
     version: 4.1.0(vue@3.5.12)
@@ -2122,7 +2125,7 @@ packages:
       '@form-create/element-ui': 3.2.14(vue@3.5.12)
       '@form-create/utils': 3.2.14
       codemirror: 6.65.7
-      element-plus: 2.8.4(vue@3.5.12)
+      element-plus: 2.9.1(vue@3.5.12)
       vue: 3.5.12(typescript@5.3.3)
       vuedraggable: 4.1.0(vue@3.5.12)
     transitivePeerDependencies:
@@ -4581,12 +4584,14 @@ packages:
       min-dom: 4.2.1
     dev: true
 
-  /bpmn-js-token-simulation@0.10.0:
-    resolution: {integrity: sha512-QuZQ/KVXKt9Vl+XENyOBoTW2Aw+uKjuBlKdCJL6El7AyM7DkJ5bZkSYURshId1SkBDdYg2mJ1flSmsrhGuSfwg==, tarball: https://registry.npmmirror.com/bpmn-js-token-simulation/-/bpmn-js-token-simulation-0.10.0.tgz}
+  /bpmn-js-token-simulation@0.36.0:
+    resolution: {integrity: sha512-vz+RHlbZCev/6dzk6FhJRz8M0aZ1GL7Xrza0ecWqeg4tHbgPozgyOm3tXTz75XdtOwRVVBzmCjcciXQX7A55wQ==, tarball: https://registry.npmmirror.com/bpmn-js-token-simulation/-/bpmn-js-token-simulation-0.36.0.tgz}
+    engines: {node: '>= 16'}
     dependencies:
-      min-dash: 3.8.1
-      min-dom: 0.2.0
-      svg.js: 2.7.1
+      inherits-browser: 0.1.0
+      min-dash: 4.2.2
+      min-dom: 4.2.1
+      randomcolor: 0.6.2
     dev: false
 
   /bpmn-js@17.11.1:
@@ -4927,51 +4932,13 @@ packages:
       dot-prop: 5.3.0
     dev: true
 
-  /component-classes@1.2.6:
-    resolution: {integrity: sha512-hPFGULxdwugu1QWW3SvVOCUHLzO34+a2J6Wqy0c5ASQkfi9/8nZcBB0ZohaEbXOQlCflMAEMmEWk7u7BVs4koA==, tarball: https://registry.npmmirror.com/component-classes/-/component-classes-1.2.6.tgz}
-    dependencies:
-      component-indexof: 0.0.3
-    dev: false
-
-  /component-closest@0.1.4:
-    resolution: {integrity: sha512-NF9hMj6JKGM5sb6wP/dg7GdJOttaIH9PcTsUNdWcrvu7Kw/5R5swQAFpgaYEHlARrNMyn4Wf7O1PlRej+pt76Q==, tarball: https://registry.npmmirror.com/component-closest/-/component-closest-0.1.4.tgz}
-    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==, tarball: https://registry.npmmirror.com/component-delegate/-/component-delegate-0.2.4.tgz}
-    dependencies:
-      component-closest: 0.1.4
-      component-event: 0.1.4
-    dev: false
-
   /component-emitter@1.3.1:
     resolution: {integrity: sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==, tarball: https://registry.npmmirror.com/component-emitter/-/component-emitter-1.3.1.tgz}
     dev: true
 
-  /component-event@0.1.4:
-    resolution: {integrity: sha512-GMwOG8MnUHP1l8DZx1ztFO0SJTFnIzZnBDkXAj8RM2ntV2A6ALlDxgbMY1Fvxlg6WPQ+5IM/a6vg4PEYbjg/Rw==, tarball: https://registry.npmmirror.com/component-event/-/component-event-0.1.4.tgz}
-    dev: false
-
   /component-event@0.2.1:
     resolution: {integrity: sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==, tarball: https://registry.npmmirror.com/component-event/-/component-event-0.2.1.tgz}
 
-  /component-indexof@0.0.3:
-    resolution: {integrity: sha512-puDQKvx/64HZXb4hBwIcvQLaLgux8o1CbWl39s41hrIIZDl1lJiD5jc22gj3RBeGK0ovxALDYpIbyjqDUUl0rw==, tarball: https://registry.npmmirror.com/component-indexof/-/component-indexof-0.0.3.tgz}
-    dev: false
-
-  /component-matches-selector@0.1.7:
-    resolution: {integrity: sha512-Yb2+pVBvrqkQVpPaDBF0DYXRreBveXJNrpJs9FnFu8PF6/5IIcz5oDZqiH9nB5hbD2/TmFVN5ZCxBzqu7yFFYQ==, tarball: https://registry.npmmirror.com/component-matches-selector/-/component-matches-selector-0.1.7.tgz}
-    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==, tarball: https://registry.npmmirror.com/component-query/-/component-query-0.0.3.tgz}
-    dev: false
-
   /compute-scroll-into-view@1.0.20:
     resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==, tarball: https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz}
     dev: false
@@ -5521,6 +5488,10 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==, tarball: https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz}
     dev: true
 
+  /default-passive-events@2.0.0:
+    resolution: {integrity: sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ==, tarball: https://registry.npmmirror.com/default-passive-events/-/default-passive-events-2.0.0.tgz}
+    dev: false
+
   /define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==, tarball: https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.4.tgz}
     engines: {node: '>= 0.4'}
@@ -5795,8 +5766,8 @@ packages:
     resolution: {integrity: sha512-nz88NNBsD7kQSAGGJyp8hS6xSPtWwqNogA0mjtc2nUYeEf3nURK9qpV18TuBdDmEDgVWotS8Wkzf+V52dSQ/LQ==, tarball: https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.67.tgz}
     dev: true
 
-  /element-plus@2.8.4(vue@3.5.12):
-    resolution: {integrity: sha512-ZlVAdUOoJliv4kW3ntWnnSHMT+u/Os7mXJjk2xzOlqNeHaI2/ozlF+R58ZCEak8ZnDi6+5A2viWEYRsq64IuiA==, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.8.4.tgz}
+  /element-plus@2.9.1(vue@3.5.12):
+    resolution: {integrity: sha512-9Agqf/jt4Ugk7EZ6C5LME71sgkvauPCsnvJN12Xid2XVobjufxMGpRE4L7pS4luJMOmFAH3J0NgYEGZT5r+NDg==, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.9.1.tgz}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
@@ -6674,10 +6645,6 @@ packages:
       global-prefix: 3.0.0
     dev: true
 
-  /global-object@1.0.0:
-    resolution: {integrity: sha512-mSPSkY6UsHv6hgW0V2dfWBWTS8TnPnLx3ECVNoWp6rBI2Bg66VYoqGoTFlH/l7XhAZ/l+StYlntXlt87BEeCcg==, tarball: https://registry.npmmirror.com/global-object/-/global-object-1.0.0.tgz}
-    dev: false
-
   /global-prefix@3.0.0:
     resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==, tarball: https://registry.npmmirror.com/global-prefix/-/global-prefix-3.0.0.tgz}
     engines: {node: '>=6'}
@@ -7899,10 +7866,6 @@ packages:
     engines: {node: '>=18'}
     dev: true
 
-  /min-dash@3.8.1:
-    resolution: {integrity: sha512-evumdlmIlg9mbRVPbC4F5FuRhNmcMS5pvuBUbqb1G9v09Ro0ImPEgz5n3khir83lFok1inKqVDjnKEg3GpDxQg==, tarball: https://registry.npmmirror.com/min-dash/-/min-dash-3.8.1.tgz}
-    dev: false
-
   /min-dash@4.2.2:
     resolution: {integrity: sha512-qbhSYUxk6mBaF096B3JOQSumXbKWHenmT97cSpdNzgkWwGjhjhE/KZODCoDNhI2I4C9Cb6R/Q13S4BYkUSXoXQ==, tarball: https://registry.npmmirror.com/min-dash/-/min-dash-4.2.2.tgz}
 
@@ -7912,18 +7875,6 @@ packages:
       dom-walk: 0.1.2
     dev: false
 
-  /min-dom@0.2.0:
-    resolution: {integrity: sha512-VmxugbnAcVZGqvepjhOA4d4apmrpX8mMaRS+/jo0dI5Yorzrr4Ru9zc9KVALlY/+XakVCb8iQ+PYXljihQcsNw==, tarball: https://registry.npmmirror.com/min-dom/-/min-dom-0.2.0.tgz}
-    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.2
-    dev: false
-
   /min-dom@4.2.1:
     resolution: {integrity: sha512-TMoL8SEEIhUWYgkj7XMSgxmwSyGI+4fP2KFFGnN3FbHfbGHVdsLYSz8LoIsgPhz4dWRmLvxWWSMgzZMJW5sZuA==, tarball: https://registry.npmmirror.com/min-dom/-/min-dom-4.2.1.tgz}
     dependencies:
@@ -8714,6 +8665,10 @@ packages:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==, tarball: https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz}
     dev: true
 
+  /randomcolor@0.6.2:
+    resolution: {integrity: sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A==, tarball: https://registry.npmmirror.com/randomcolor/-/randomcolor-0.6.2.tgz}
+    dev: false
+
   /rd@2.0.1:
     resolution: {integrity: sha512-/XdKU4UazUZTXFmI0dpABt8jSXPWcEyaGdk340KdHnsEOdkTctlX23aAK7ChQDn39YGNlAJr1M5uvaKt4QnpNw==, tarball: https://registry.npmmirror.com/rd/-/rd-2.0.1.tgz}
     dependencies:
@@ -9128,6 +9083,10 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
+  /signature_pad@3.0.0-beta.4:
+    resolution: {integrity: sha512-cOf2NhVuTiuNqe2X/ycEmizvCDXk0DoemhsEpnkcGnA4kS5iJYTCqZ9As7tFBbsch45Q1EdX61833+6sjJ8rrw==, tarball: https://registry.npmmirror.com/signature_pad/-/signature_pad-3.0.0-beta.4.tgz}
+    dev: false
+
   /sirv@2.0.4:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==, tarball: https://registry.npmmirror.com/sirv/-/sirv-2.0.4.tgz}
     engines: {node: '>= 10'}
@@ -9561,10 +9520,6 @@ packages:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==, tarball: https://registry.npmmirror.com/svg-tags/-/svg-tags-1.0.0.tgz}
     dev: true
 
-  /svg.js@2.7.1:
-    resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==, tarball: https://registry.npmmirror.com/svg.js/-/svg.js-2.7.1.tgz}
-    dev: false
-
   /svgo@2.8.0:
     resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==, tarball: https://registry.npmmirror.com/svgo/-/svgo-2.8.0.tgz}
     engines: {node: '>=10.13.0'}
@@ -10324,6 +10279,16 @@ packages:
       vue: 3.5.12(typescript@5.3.3)
     dev: false
 
+  /vue3-signature@0.2.4(vue@3.5.12):
+    resolution: {integrity: sha512-XFwwFVK9OG3F085pKIq2SlNVqx32WdFH+TXbGEWc5FfEKpx8oMmZuAwZZ50K/pH2FgmJSE8IRwU9DDhrLpd6iA==, tarball: https://registry.npmmirror.com/vue3-signature/-/vue3-signature-0.2.4.tgz}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      default-passive-events: 2.0.0
+      signature_pad: 3.0.0-beta.4
+      vue: 3.5.12(typescript@5.3.3)
+    dev: false
+
   /vue@3.5.12(typescript@5.3.3):
     resolution: {integrity: sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==, tarball: https://registry.npmmirror.com/vue/-/vue-3.5.12.tgz}
     peerDependencies:

src/api/bpm/model/index.ts

@@ -72,3 +72,7 @@ export const deleteModel = async (id: number) => {
 export const deployModel = async (id: number) => {
   return await request.post({ url: '/bpm/model/deploy?id=' + id })
 }
+
+export const cleanModel = async (id: number) => {
+  return await request.delete({ url: '/bpm/model/clean?id=' + id })
+}

src/api/bpm/processInstance/index.ts

@@ -36,6 +36,7 @@ export type ApprovalTaskInfo = {
   assigneeUser: User
   status: number
   reason: string
+  signPicUrl: string
 }
 
 // 审批节点信息
@@ -89,7 +90,7 @@ export const getProcessInstanceCopyPage = async (params: any) => {
 
 // 获取审批详情
 export const getApprovalDetail = async (params: any) => {
-  return await request.get({ url: 'bpm/process-instance/get-approval-detail' , params })
+  return await request.get({ url: 'bpm/process-instance/get-approval-detail', params })
 }
 
 // 获取表单字段权限

src/api/login/index.ts

@@ -22,11 +22,6 @@ export const register = (data: RegisterVO) => {
   return request.post({ url: '/system/auth/register', data })
 }
 
-// 刷新访问令牌
-export const refreshToken = () => {
-  return request.post({ url: '/system/auth/refresh-token?refreshToken=' + getRefreshToken() })
-}
-
 // 使用租户名，获得租户编号
 export const getTenantIdByName = (name: string) => {
   return request.get({ url: '/system/tenant/get-id-by-name?name=' + name })
@@ -76,11 +71,17 @@ export const socialAuthRedirect = (type: number, redirectUri: string) => {
   })
 }
 // 获取验证图片以及 token
-export const getCode = (data) => {
+export const getCode = (data: any) => {
+  debugger
   return request.postOriginal({ url: 'system/captcha/get', data })
 }
 
 // 滑动或者点选验证
-export const reqCheck = (data) => {
+export const reqCheck = (data: any) => {
   return request.postOriginal({ url: 'system/captcha/check', data })
 }
+
+// 通过短信重置密码
+export const smsResetPassword = (data: any) => {
+  return request.post({ url: '/system/auth/sms-reset-password', data })
+}

src/api/mall/trade/brokerage/user/index.ts

@@ -13,6 +13,11 @@ export interface BrokerageUserVO {
   avatar: string
 }
 
+// 创建分销用户
+export const createBrokerageUser = (data: any) => {
+  return request.post({ url: '/trade/brokerage-user/create', data })
+}
+
 // 查询分销用户列表
 export const getBrokerageUserPage = async (params: any) => {
   return await request.get({ url: `/trade/brokerage-user/page`, params })

src/assets/svgs/bpm/delay.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735905505218" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4277" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M561.778 454.929h198.117c0.549 0 0.994 0.444 0.994 1.001v97.553a0.998 0.998 0 0 1-0.994 1.001H463.224a1.005 1.005 0 0 1-1.002-1V207.04c0-0.552 0.444-1 1.002-1h97.552c0.553 0 1.002 0.455 1.002 1v247.89zM512 952.706c-247.424 0-448-200.576-448-448 0-247.423 200.576-448 448-448s448 200.577 448 448c0 247.424-200.576 448-448 448z m0-99.555c192.44 0 348.444-156.004 348.444-348.445 0-192.44-156.003-348.444-348.444-348.444-192.44 0-348.444 156.004-348.444 348.444 0 192.441 156.003 348.445 348.444 348.445z" fill="#3296FA" p-id="4278"></path></svg>

src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue

@@ -2,17 +2,17 @@
   <div class="h-40px flex items-center justify-center">
     <MagicCubeEditor
       v-model="cellList"
-      class="m-b-16px"
-      :rows="1"
       :cols="cellCount"
       :cube-size="38"
+      :rows="1"
+      class="m-b-16px"
       @hot-area-selected="handleHotAreaSelected"
     />
-    <img src="@/assets/imgs/diy/app-nav-bar-mp.png" alt="" class="h-30px w-76px" v-if="isMp" />
+    <img v-if="isMp" alt="" class="h-30px w-76px" src="@/assets/imgs/diy/app-nav-bar-mp.png" />
   </div>
   <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
     <template v-if="selectedHotAreaIndex === cellIndex">
-      <el-form-item label="类型" :prop="`cell[${cellIndex}].type`">
+      <el-form-item :prop="`cell[${cellIndex}].type`" label="类型">
         <el-radio-group v-model="cell.type">
           <el-radio value="text">文字</el-radio>
           <el-radio value="image">图片</el-radio>
@@ -21,37 +21,40 @@
       </el-form-item>
       <!-- 1. 文字 -->
       <template v-if="cell.type === 'text'">
-        <el-form-item label="内容" :prop="`cell[${cellIndex}].text`">
+        <el-form-item :prop="`cell[${cellIndex}].text`" label="内容">
           <el-input v-model="cell!.text" maxlength="10" show-word-limit />
         </el-form-item>
-        <el-form-item label="颜色" :prop="`cell[${cellIndex}].text`">
+        <el-form-item :prop="`cell[${cellIndex}].text`" label="颜色">
           <ColorInput v-model="cell!.textColor" />
         </el-form-item>
+        <el-form-item :prop="`cell[${cellIndex}].url`" label="链接">
+          <AppLinkInput v-model="cell.url" />
+        </el-form-item>
       </template>
       <!-- 2. 图片 -->
       <template v-else-if="cell.type === 'image'">
-        <el-form-item label="图片" :prop="`cell[${cellIndex}].imgUrl`">
+        <el-form-item :prop="`cell[${cellIndex}].imgUrl`" label="图片">
           <UploadImg v-model="cell.imgUrl" :limit="1" height="56px" width="56px">
             <template #tip>建议尺寸 56*56</template>
           </UploadImg>
         </el-form-item>
-        <el-form-item label="链接" :prop="`cell[${cellIndex}].url`">
+        <el-form-item :prop="`cell[${cellIndex}].url`" label="链接">
           <AppLinkInput v-model="cell.url" />
         </el-form-item>
       </template>
       <!-- 3. 搜索框 -->
       <template v-else>
-        <el-form-item label="提示文字" :prop="`cell[${cellIndex}].placeholder`">
+        <el-form-item :prop="`cell[${cellIndex}].placeholder`" label="提示文字">
           <el-input v-model="cell.placeholder" maxlength="10" show-word-limit />
         </el-form-item>
-        <el-form-item label="圆角" :prop="`cell[${cellIndex}].borderRadius`">
+        <el-form-item :prop="`cell[${cellIndex}].borderRadius`" label="圆角">
           <el-slider
             v-model="cell.borderRadius"
             :max="100"
             :min="0"
-            show-input
-            input-size="small"
             :show-input-controls="false"
+            input-size="small"
+            show-input
           />
         </el-form-item>
       </template>
@@ -59,7 +62,7 @@
   </template>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { NavigationBarCellProperty } from '../config'
 import { usePropertyForm } from '@/components/DiyEditor/util'
 // 导航栏属性面板
@@ -87,4 +90,4 @@ const handleHotAreaSelected = (cellValue: NavigationBarCellProperty, index: numb
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>

src/components/DiyEditor/components/mobile/TitleBar/config.ts

@@ -1,9 +1,7 @@
-import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+import {ComponentStyle, DiyComponent} from '@/components/DiyEditor/util'
 
 /** 标题栏属性 */
 export interface TitleBarProperty {
-  // 背景图
-  bgImgUrl: string
   // 偏移
   marginLeft: number
   // 显示位置

src/components/DiyEditor/components/mobile/TitleBar/index.vue

@@ -1,21 +1,30 @@
 <template>
-  <div class="title-bar">
-    <el-image v-if="property.bgImgUrl" :src="property.bgImgUrl" fit="cover" class="w-full" />
-    <div class="absolute left-0 top-0 w-full">
+  <div
+    :style="{
+      background:
+        property.style.bgType === 'color' ? property.style.bgColor : `url(${property.style.bgImg})`,
+      backgroundSize: '100% 100%',
+      backgroundRepeat: 'no-repeat'
+    }"
+    class="title-bar"
+  >
+    <!-- 内容 -->
+    <div>
       <!-- 标题 -->
       <div
+        v-if="property.title"
         :style="{
           fontSize: `${property.titleSize}px`,
           fontWeight: property.titleWeight,
           color: property.titleColor,
           textAlign: property.textAlign
         }"
-        v-if="property.title"
       >
         {{ property.title }}
       </div>
       <!-- 副标题 -->
       <div
+        v-if="property.description"
         :style="{
           fontSize: `${property.descriptionSize}px`,
           fontWeight: property.descriptionWeight,
@@ -23,25 +32,24 @@
           textAlign: property.textAlign
         }"
         class="m-t-8px"
-        v-if="property.description"
       >
         {{ property.description }}
       </div>
     </div>
     <!-- 更多 -->
     <div
-      class="more"
       v-show="property.more.show"
       :style="{
         color: property.descriptionColor
       }"
+      class="more"
     >
       <span v-if="property.more.type !== 'icon'"> {{ property.more.text }} </span>
-      <Icon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
+      <Icon v-if="property.more.type !== 'text'" icon="ep:arrow-right" />
     </div>
   </div>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import { TitleBarProperty } from './config'
 
 /** 标题栏 */
@@ -49,7 +57,7 @@ defineOptions({ name: 'TitleBar' })
 
 defineProps<{ property: TitleBarProperty }>()
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .title-bar {
   position: relative;
   width: 100%;

src/components/DiyEditor/components/mobile/TitleBar/property.vue

@@ -1,12 +1,7 @@
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <el-form label-width="85px" :model="formData" :rules="rules">
-      <el-card header="风格" class="property-group" shadow="never">
-        <el-form-item label="背景图片" prop="bgImgUrl">
-          <UploadImg v-model="formData.bgImgUrl" width="100%" height="40px">
-            <template #tip>建议尺寸 750*80</template>
-          </UploadImg>
-        </el-form-item>
+    <el-form :model="formData" :rules="rules" label-width="85px">
+      <el-card class="property-group" header="风格" shadow="never">
         <el-form-item label="标题位置" prop="textAlign">
           <el-radio-group v-model="formData!.textAlign">
             <el-tooltip content="居左" placement="top">
@@ -22,65 +17,65 @@
           </el-radio-group>
         </el-form-item>
       </el-card>
-      <el-card header="主标题" class="property-group" shadow="never">
-        <el-form-item label="文字" prop="title" label-width="40px">
+      <el-card class="property-group" header="主标题" shadow="never">
+        <el-form-item label="文字" label-width="40px" prop="title">
           <InputWithColor
             v-model="formData.title"
             v-model:color="formData.titleColor"
-            show-word-limit
             maxlength="20"
+            show-word-limit
           />
         </el-form-item>
-        <el-form-item label="大小" prop="titleSize" label-width="40px">
+        <el-form-item label="大小" label-width="40px" prop="titleSize">
           <el-slider
             v-model="formData.titleSize"
             :max="60"
             :min="10"
-            show-input
             input-size="small"
+            show-input
           />
         </el-form-item>
-        <el-form-item label="粗细" prop="titleWeight" label-width="40px">
+        <el-form-item label="粗细" label-width="40px" prop="titleWeight">
           <el-slider
             v-model="formData.titleWeight"
-            :min="100"
             :max="900"
+            :min="100"
             :step="100"
-            show-input
             input-size="small"
+            show-input
           />
         </el-form-item>
       </el-card>
-      <el-card header="副标题" class="property-group" shadow="never">
-        <el-form-item label="文字" prop="description" label-width="40px">
+      <el-card class="property-group" header="副标题" shadow="never">
+        <el-form-item label="文字" label-width="40px" prop="description">
           <InputWithColor
             v-model="formData.description"
             v-model:color="formData.descriptionColor"
-            show-word-limit
             maxlength="50"
+            show-word-limit
           />
         </el-form-item>
-        <el-form-item label="大小" prop="descriptionSize" label-width="40px">
+        <el-form-item label="大小" label-width="40px" prop="descriptionSize">
           <el-slider
             v-model="formData.descriptionSize"
             :max="60"
             :min="10"
-            show-input
             input-size="small"
+            show-input
           />
         </el-form-item>
-        <el-form-item label="粗细" prop="descriptionWeight" label-width="40px">
+        <el-form-item label="粗细" label-width="40px" prop="descriptionWeight">
           <el-slider
             v-model="formData.descriptionWeight"
-            :min="100"
             :max="900"
+            :min="100"
             :step="100"
-            show-input
             input-size="small"
+            show-input
           />
         </el-form-item>
       </el-card>
-      <el-card header="查看更多" class="property-group" shadow="never">
+      <el-card class="property-group" header="查看更多" shadow="never">
         <el-form-item label="是否显示" prop="more.show">
           <el-checkbox v-model="formData.more.show" />
         </el-form-item>
@@ -93,7 +88,7 @@
               <el-radio value="all">文字+图标</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="更多文字" prop="more.text" v-show="formData.more.type !== 'icon'">
+          <el-form-item v-show="formData.more.type !== 'icon'" label="更多文字" prop="more.text">
             <el-input v-model="formData.more.text" />
           </el-form-item>
           <el-form-item label="跳转链接" prop="more.url">
@@ -104,7 +99,7 @@
     </el-form>
   </ComponentContainerProperty>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import { TitleBarProperty } from './config'
 import { usePropertyForm } from '@/components/DiyEditor/util'
 // 导航栏属性面板
@@ -118,4 +113,4 @@ const { formData } = usePropertyForm(props.modelValue, emit)
 const rules = {}
 </script>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>

src/components/DiyEditor/index.vue

@@ -12,17 +12,17 @@
       <el-button-group class="header-right">
         <el-tooltip content="重置">
           <el-button @click="handleReset">
-            <Icon icon="system-uicons:reset-alt" :size="24" />
+            <Icon :size="24" icon="system-uicons:reset-alt" />
           </el-button>
         </el-tooltip>
-        <el-tooltip content="预览" v-if="previewUrl">
+        <el-tooltip v-if="previewUrl" content="预览">
           <el-button @click="handlePreview">
-            <Icon icon="ep:view" :size="24" />
+            <Icon :size="24" icon="ep:view" />
           </el-button>
         </el-tooltip>
         <el-tooltip content="保存">
           <el-button @click="handleSave">
-            <Icon icon="ep:check" :size="24" />
+            <Icon :size="24" icon="ep:check" />
           </el-button>
         </el-tooltip>
       </el-button-group>
@@ -31,21 +31,21 @@
     <!-- 中心区域 -->
     <el-container class="editor-container">
       <!-- 左侧：组件库（ComponentLibrary） -->
-      <ComponentLibrary ref="componentLibrary" :list="libs" v-if="libs && libs.length > 0" />
+      <ComponentLibrary v-if="libs && libs.length > 0" ref="componentLibrary" :list="libs" />
       <!-- 中心：设计区域（ComponentContainer） -->
       <div class="editor-center page-prop-area" @click="handlePageSelected">
         <!-- 手机顶部 -->
         <div class="editor-design-top">
           <!-- 手机顶部状态栏 -->
-          <img src="@/assets/imgs/diy/statusBar.png" alt="" class="status-bar" />
+          <img alt="" class="status-bar" src="@/assets/imgs/diy/statusBar.png" />
           <!-- 手机顶部导航栏 -->
           <ComponentContainer
             v-if="showNavigationBar"
+            :active="selectedComponent?.id === navigationBarComponent.id"
             :component="navigationBarComponent"
             :show-toolbar="false"
-            :active="selectedComponent?.id === navigationBarComponent.id"
-            @click="handleNavigationBarSelected"
             class="cursor-pointer!"
+            @click="handleNavigationBarSelected"
           />
         </div>
         <!-- 绝对定位的组件：例如 弹窗、浮动按钮等 -->
@@ -55,43 +55,43 @@
           @click="handleComponentSelected(component, index)"
         >
           <component
-            v-if="component.position === 'fixed' && selectedComponent?.uid === component.uid"
             :is="component.id"
+            v-if="component.position === 'fixed' && selectedComponent?.uid === component.uid"
             :property="component.property"
           />
         </div>
         <!-- 手机页面编辑区域 -->
         <el-scrollbar
-          height="100%"
-          wrap-class="editor-design-center page-prop-area"
-          view-class="phone-container"
           :view-style="{
             backgroundColor: pageConfigComponent.property.backgroundColor,
             backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`
           }"
+          height="100%"
+          view-class="phone-container"
+          wrap-class="editor-design-center page-prop-area"
         >
           <draggable
-            class="page-prop-area drag-area"
             v-model="pageComponents"
-            item-key="index"
             :animation="200"
+            :force-fallback="true"
+            class="page-prop-area drag-area"
             filter=".component-toolbar"
             ghost-class="draggable-ghost"
-            :force-fallback="true"
             group="component"
+            item-key="index"
             @change="handleComponentChange"
           >
             <template #item="{ element, index }">
               <ComponentContainer
                 v-if="!element.position || element.position === 'center'"
-                :component="element"
                 :active="selectedComponentIndex === index"
-                :can-move-up="index > 0"
                 :can-move-down="index < pageComponents.length - 1"
-                @move="(direction) => handleMoveComponent(index, direction)"
+                :can-move-up="index > 0"
+                :component="element"
+                @click="handleComponentSelected(element, index)"
                 @copy="handleCopyComponent(index)"
                 @delete="handleDeleteComponent(index)"
-                @click="handleComponentSelected(element, index)"
+                @move="(direction) => handleMoveComponent(index, direction)"
               />
             </template>
           </draggable>
@@ -99,9 +99,9 @@
         <!-- 手机底部导航 -->
         <div v-if="showTabBar" :class="['editor-design-bottom', 'component', 'cursor-pointer!']">
           <ComponentContainer
+            :active="selectedComponent?.id === tabBarComponent.id"
             :component="tabBarComponent"
             :show-toolbar="false"
-            :active="selectedComponent?.id === tabBarComponent.id"
             @click="handleTabBarSelected"
           />
         </div>
@@ -109,9 +109,9 @@
         <div class="fixed-component-action-group">
           <el-tag
             v-if="showPageConfig"
-            size="large"
             :effect="selectedComponent?.uid === pageConfigComponent.uid ? 'dark' : 'plain'"
             :type="selectedComponent?.uid === pageConfigComponent.uid ? '' : 'info'"
+            size="large"
             @click="handleComponentSelected(pageConfigComponent)"
           >
             <Icon :icon="pageConfigComponent.icon" :size="12" />
@@ -120,10 +120,10 @@
           <template v-for="(component, index) in pageComponents" :key="index">
             <el-tag
               v-if="component.position === 'fixed'"
-              size="large"
-              closable
               :effect="selectedComponent?.uid === component.uid ? 'dark' : 'plain'"
               :type="selectedComponent?.uid === component.uid ? '' : 'info'"
+              closable
+              size="large"
               @click="handleComponentSelected(component)"
               @close="handleDeleteComponent(index)"
             >
@@ -134,11 +134,11 @@
         </div>
       </div>
       <!-- 右侧：属性面板（ComponentContainerProperty） -->
-      <el-aside class="editor-right" width="350px" v-if="selectedComponent?.property">
+      <el-aside v-if="selectedComponent?.property" class="editor-right" width="350px">
         <el-card
-          shadow="never"
           body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
           class="h-full"
+          shadow="never"
         >
           <!-- 组件名称 -->
           <template #header>
@@ -152,8 +152,8 @@
             view-class="p-[var(--el-card-padding)] p-b-[calc(var(--el-card-padding)+var(--el-card-padding))] property"
           >
             <component
-              :key="selectedComponent?.uid || selectedComponent?.id"
               :is="selectedComponent?.id + 'Property'"
+              :key="selectedComponent?.uid || selectedComponent?.id"
               v-model="selectedComponent.property"
             />
           </el-scrollbar>
@@ -166,8 +166,8 @@
   <Dialog v-model="previewDialogVisible" title="预览" width="700">
     <div class="flex justify-around">
       <IFrame
-        class="w-375px border-4px border-rounded-8px border-solid p-2px h-667px!"
         :src="previewUrl"
+        class="w-375px border-4px border-rounded-8px border-solid p-2px h-667px!"
       />
       <div class="flex flex-col">
         <el-text>手机扫码预览</el-text>
@@ -179,6 +179,7 @@
 <script lang="ts">
 // 注册所有的组件
 import { components } from './components/mobile/index'
+
 export default {
   components: { ...components }
 }
@@ -257,6 +258,11 @@ watch(
 
 // 保存
 const handleSave = () => {
+  // 发送保存通知
+  emits('save')
+}
+// 监听配置修改
+const pageConfigChange = () => {
   const pageConfig = {
     page: pageConfigComponent.value.property,
     navigationBar: navigationBarComponent.value.property,
@@ -272,10 +278,19 @@ const handleSave = () => {
   // 发送数据更新通知
   const modelValue = isString(props.modelValue) ? JSON.stringify(pageConfig) : pageConfig
   emits('update:modelValue', modelValue)
-  // 发送保存通知
-  emits('save', pageConfig)
 }
-
+watch(
+  () => [
+    pageConfigComponent.value.property,
+    navigationBarComponent.value.property,
+    tabBarComponent.value.property,
+    pageComponents.value
+  ],
+  () => {
+    pageConfigChange()
+  },
+  { deep: true }
+)
 // 处理页面选中：显示属性表单
 const handlePageSelected = (event: any) => {
   if (!props.showPageConfig) return
@@ -547,6 +562,7 @@ $toolbar-height: 42px;
         :deep(.el-tag) {
           box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
           border: none;
+
           .el-tag__content {
             width: 100%;
             display: flex;

src/components/Echart/src/Echart.vue

@@ -9,6 +9,10 @@ import { useAppStore } from '@/store/modules/app'
 import { isString } from '@/utils/is'
 import { useDesign } from '@/hooks/web/useDesign'
 
+import 'echarts/lib/component/markPoint'
+import 'echarts/lib/component/markLine'
+import 'echarts/lib/component/markArea'
+
 defineOptions({ name: 'EChart' })
 
 const { getPrefixCls, variables } = useDesign()

src/components/Editor/src/Editor.vue

@@ -6,7 +6,7 @@ import { propTypes } from '@/utils/propTypes'
 import { isNumber } from '@/utils/is'
 import { ElMessage } from 'element-plus'
 import { useLocaleStore } from '@/store/modules/locale'
-import { getAccessToken, getTenantId } from '@/utils/auth'
+import { getRefreshToken, getTenantId } from '@/utils/auth'
 import { getUploadUrl } from '@/components/UploadFile/src/useUpload'
 
 defineOptions({ name: 'Editor' })
@@ -100,7 +100,7 @@ const editorConfig = computed((): IEditorConfig => {
           // 自定义增加 http  header
           headers: {
             Accept: '*',
-            Authorization: 'Bearer ' + getAccessToken(),
+            Authorization: 'Bearer ' + getRefreshToken(), // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：Editor 无法方便的刷新访问令牌
             'tenant-id': getTenantId()
           },
 
@@ -148,7 +148,7 @@ const editorConfig = computed((): IEditorConfig => {
           // 自定义增加 http  header
           headers: {
             Accept: '*',
-            Authorization: 'Bearer ' + getAccessToken(),
+            Authorization: 'Bearer ' + getRefreshToken(), // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：Editor 无法方便的刷新访问令牌
             'tenant-id': getTenantId()
           },
 

src/components/RouterSearch/index.vue

@@ -79,9 +79,14 @@ function remoteMethod(data) {
 
 function handleChange(path) {
   router.push({ path })
+  hiddenSearch()
   hiddenTopSearch()
 }
 
+function hiddenSearch() {
+  showSearch.value = false
+}
+
 function hiddenTopSearch() {
   showTopSearch.value = false
 }
@@ -99,6 +104,8 @@ onUnmounted(() => {
 // 监听 ctrl + k
 function listenKey(event) {
   if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+    // 阻止触发浏览器默认事件
+    event.preventDefault()
     showSearch.value = !showSearch.value
     // 这里可以执行相应的操作（例如打开搜索框等）
   }

src/components/SimpleProcessDesignerV2/src/NodeHandler.vue

@@ -39,6 +39,20 @@
             </div>
             <div class="handler-item-text">包容分支</div>
           </div>
+          <div class="handler-item" @click="addNode(NodeType.DELAY_TIMER_NODE)">
+            <!-- TODO @芋艿 需要更换一下iconfont的图标 -->
+            <div class="handler-item-icon copy">
+              <span class="iconfont icon-size icon-copy"></span>
+            </div>
+            <div class="handler-item-text">延迟器</div>
+          </div>
+          <div class="handler-item" @click="addNode(NodeType.ROUTER_BRANCH_NODE)">
+            <!-- TODO @芋艿 需要更换一下iconfont的图标 -->
+            <div class="handler-item-icon copy">
+              <span class="iconfont icon-size icon-copy"></span>
+            </div>
+            <div class="handler-item-text">路由分支</div>
+          </div>
         </div>
         <template #reference>
           <div class="add-icon"><Icon icon="ep:plus" /></div>
@@ -53,12 +67,13 @@ import {
   ApproveMethodType,
   AssignEmptyHandlerType,
   AssignStartUserHandlerType,
+  ConditionType,
   NODE_DEFAULT_NAME,
   NodeType,
   RejectHandlerType,
   SimpleFlowNode
 } from './consts'
-import { generateUUID } from '@/utils'
+import {generateUUID} from '@/utils'
 
 defineOptions({
   name: 'NodeHandler'
@@ -113,7 +128,16 @@ const addNode = (type: number) => {
         type: AssignEmptyHandlerType.APPROVE
       },
       assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
-      childNode: props.childNode
+      childNode: props.childNode,
+      taskCreateListener: {
+        enable: false
+      },
+      taskAssignListener: {
+        enable: false
+      },
+      taskCompleteListener: {
+        enable: false
+      }
     }
     emits('update:childNode', data)
   }
@@ -140,7 +164,7 @@ const addNode = (type: number) => {
           showText: '',
           type: NodeType.CONDITION_NODE,
           childNode: undefined,
-          conditionType: 1,
+          conditionType: ConditionType.RULE,
           defaultFlow: false
         },
         {
@@ -208,6 +232,26 @@ const addNode = (type: number) => {
     }
     emits('update:childNode', data)
   }
+  if (type === NodeType.DELAY_TIMER_NODE) {
+    const data: SimpleFlowNode = {
+      id: 'Activity_' + generateUUID(),
+      name: NODE_DEFAULT_NAME.get(NodeType.DELAY_TIMER_NODE) as string,
+      showText: '',
+      type: NodeType.DELAY_TIMER_NODE,
+      childNode: props.childNode
+    }
+    emits('update:childNode', data)
+  }
+  if (type === NodeType.ROUTER_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      id: 'GateWay_' + generateUUID(),
+      name: NODE_DEFAULT_NAME.get(NodeType.ROUTER_BRANCH_NODE) as string,
+      showText: '',
+      type: NodeType.ROUTER_BRANCH_NODE,
+      childNode: props.childNode
+    }
+    emits('update:childNode', data)
+  }
 }
 </script>
 

src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue

@@ -38,6 +38,18 @@
     @update:model-value="handleModelValueUpdate"
     @find:parent-node="findFromParentNode"
   />
+  <!-- 延迟器节点 -->
+  <DelayTimerNode
+    v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
+  <!-- 路由分支节点 -->
+  <RouterNode
+    v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
+    :flow-node="currentNode"
+    @update:flow-node="handleModelValueUpdate"
+  />
   <!-- 递归显示孩子节点  -->
   <ProcessNodeTree
     v-if="currentNode && currentNode.childNode"
@@ -60,6 +72,8 @@ import CopyTaskNode from './nodes/CopyTaskNode.vue'
 import ExclusiveNode from './nodes/ExclusiveNode.vue'
 import ParallelNode from './nodes/ParallelNode.vue'
 import InclusiveNode from './nodes/InclusiveNode.vue'
+import DelayTimerNode from './nodes/DelayTimerNode.vue'
+import RouterNode from './nodes/RouterNode.vue'
 import { SimpleFlowNode, NodeType } from './consts'
 import { useWatchNode } from './node'
 defineOptions({

src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue

@@ -59,13 +59,10 @@ const props = defineProps({
   startUserIds: {
     type: Array,
     required: false
-  },
-  value: {
-    type: [String, Object],
-    required: false
   }
 })
 
+const processData = inject('processData') as Ref
 const loading = ref(false)
 const formFields = ref<string[]>([])
 const formType = ref(20)
@@ -77,9 +74,6 @@ const deptTreeOptions = ref()
 const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
 const isDataInitialized = ref(false) // 添加标记，用于判断数据是否已初始化
 
-// 添加当前值的引用
-const currentValue = ref<SimpleFlowNode | undefined>()
-
 provide('formFields', formFields)
 provide('formType', formType)
 provide('roleList', roleOptions)
@@ -89,9 +83,11 @@ provide('deptList', deptOptions)
 provide('userGroupList', userGroupOptions)
 provide('deptTree', deptTreeOptions)
 provide('startUserIds', props.startUserIds)
-
+provide('tasks', [])
+provide('processInstance', {})
 const message = useMessage() // 国际化
 const processNodeTree = ref<SimpleFlowNode | undefined>()
+provide('processNodeTree', processNodeTree)
 const errorDialogVisible = ref(false)
 let errorNodes: SimpleFlowNode[] = []
 
@@ -113,70 +109,13 @@ const updateModel = () => {
   }
 }
 
-// 加载流程数据
-const loadProcessData = async (data: any) => {
-  try {
-    if (data) {
-      const parsedData = typeof data === 'string' ? JSON.parse(data) : data
-      processNodeTree.value = parsedData
-      currentValue.value = parsedData
-      // 确保数据加载后刷新视图
-      await nextTick()
-      if (simpleProcessModelRef.value?.refresh) {
-        await simpleProcessModelRef.value.refresh()
-      }
-    }
-  } catch (error) {
-    console.error('加载流程数据失败:', error)
-  }
-}
-
-// 监听属性变化
-watch(
-  () => props.value,
-  async (newValue, oldValue) => {
-    if (newValue && newValue !== oldValue) {
-      await loadProcessData(newValue)
-    }
-  },
-  { immediate: true, deep: true }
-)
-
-// 监听流程节点树变化，自动保存
-watch(
-  () => processNodeTree.value,
-  async (newValue, oldValue) => {
-    if (newValue && oldValue && JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
-      await saveSimpleFlowModel(newValue)
-    }
-  },
-  { deep: true }
-)
-
 const saveSimpleFlowModel = async (simpleModelNode: SimpleFlowNode) => {
   if (!simpleModelNode) {
     return
   }
 
-  // 校验节点
-  errorNodes = []
-  validateNode(simpleModelNode, errorNodes)
-  if (errorNodes.length > 0) {
-    errorDialogVisible.value = true
-    return
-  }
-
   try {
-    if (props.modelId) {
-      // 编辑模式
-      const data = {
-        id: props.modelId,
-        simpleModel: simpleModelNode
-      }
-      await updateBpmSimpleModel(data)
-    }
-    // 无论是编辑还是新建模式，都更新当前值并触发事件
-    currentValue.value = simpleModelNode
+    processData.value = simpleModelNode
     emits('success', simpleModelNode)
   } catch (error) {
     console.error('保存失败:', error)
@@ -258,16 +197,21 @@ const initializeData = async () => {
           formFields.value = bpmnForm?.fields
         }
       }
-
-      // 获取 SIMPLE 设计器模型
-      const result = await getBpmSimpleModel(props.modelId)
-      if (result) {
-        await loadProcessData(result)
-      } else {
-        updateModel()
-      }
-    } else if (props.value) {
-      await loadProcessData(props.value)
+    }
+    // 获得角色列表
+    roleOptions.value = await RoleApi.getSimpleRoleList()
+    // 获得岗位列表
+    postOptions.value = await PostApi.getSimplePostList()
+    // 获得用户列表
+    userOptions.value = await UserApi.getSimpleUserList()
+    // 获得部门列表
+    deptOptions.value = await DeptApi.getSimpleDeptList()
+    deptTreeOptions.value = handleTree(deptOptions.value as DeptApi.DeptVO[], 'id')
+    // 获取用户组列表
+    userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
+    // 加载流程数据
+    if (processData.value) {
+      processNodeTree.value = processData?.value
     } else {
       updateModel()
     }
@@ -296,38 +240,5 @@ onActivated(() => {
 
 const simpleProcessModelRef = ref()
 
-/** 获取当前流程数据 */
-const getCurrentFlowData = async () => {
-  try {
-    if (simpleProcessModelRef.value) {
-      const data = await simpleProcessModelRef.value.getCurrentFlowData()
-      if (data) {
-        currentValue.value = data
-        return data
-      }
-    }
-    return currentValue.value
-  } catch (error) {
-    console.error('获取流程数据失败:', error)
-    return currentValue.value
-  }
-}
-
-// 刷新方法
-const refresh = async () => {
-  try {
-    if (currentValue.value) {
-      await loadProcessData(currentValue.value)
-    }
-  } catch (error) {
-    console.error('刷新失败:', error)
-  }
-}
-
-defineExpose({
-  getCurrentFlowData,
-  updateModel,
-  loadProcessData,
-  refresh
-})
+defineExpose({})
 </script>

src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue

@@ -3,6 +3,22 @@
     <div class="position-absolute top-0px right-0px bg-#fff">
       <el-row type="flex" justify="end">
         <el-button-group key="scale-control" size="default">
+          <el-button v-if="!readonly" size="default" @click="exportJson">
+            <Icon icon="ep:download" /> 导出
+          </el-button>
+          <el-button v-if="!readonly" size="default" @click="importJson">
+            <Icon icon="ep:upload" />导入
+          </el-button>
+          <!-- 用于打开本地文件-->
+          <input
+            v-if="!readonly"
+            type="file"
+            id="files"
+            ref="refFile"
+            style="display: none"
+            accept=".json"
+            @change="importLocalFile"
+          />
           <el-button size="default" :icon="ScaleToOriginal" @click="processReZoom()" />
           <el-button size="default" :plain="true" :icon="ZoomOut" @click="zoomOut()" />
           <el-button size="default" class="w-80px"> {{ scaleValue }}% </el-button>
@@ -34,6 +50,8 @@ import ProcessNodeTree from './ProcessNodeTree.vue'
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from './consts'
 import { useWatchNode } from './node'
 import { ZoomOut, ZoomIn, ScaleToOriginal } from '@element-plus/icons-vue'
+import { isString } from '@/utils/is'
+import download from '@/utils/download'
 
 defineOptions({
   name: 'SimpleProcessModel'
@@ -52,7 +70,7 @@ const props = defineProps({
 })
 
 const emits = defineEmits<{
-  'save': [node: SimpleFlowNode | undefined]
+  save: [node: SimpleFlowNode | undefined]
 }>()
 
 const processNodeTree = useWatchNode(props)
@@ -85,6 +103,16 @@ const processReZoom = () => {
 const errorDialogVisible = ref(false)
 let errorNodes: SimpleFlowNode[] = []
 
+const saveSimpleFlowModel = async () => {
+  errorNodes = []
+  validateNode(processNodeTree.value, errorNodes)
+  if (errorNodes.length > 0) {
+    errorDialogVisible.value = true
+    return
+  }
+  emits('save', processNodeTree.value)
+}
+
 // 校验节点设置。 暂时以 showText 为空 未节点错误配置
 const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
   if (node) {
@@ -143,6 +171,28 @@ const getCurrentFlowData = async () => {
 defineExpose({
   getCurrentFlowData
 })
+
+/** 导出 JSON */
+const exportJson = () => {
+  download.json(new Blob([JSON.stringify(processNodeTree.value)]), 'model.json')
+}
+
+/** 导入 JSON */
+const refFile = ref()
+const importJson = () => {
+  refFile.value.click()
+}
+const importLocalFile = () => {
+  const file = refFile.value.files[0]
+  const reader = new FileReader()
+  reader.readAsText(file)
+  reader.onload = function () {
+    if (isString(this.result)) {
+      processNodeTree.value = JSON.parse(this.result)
+      emits('save', processNodeTree.value)
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/SimpleProcessDesignerV2/src/consts.ts

@@ -23,6 +23,11 @@ export enum NodeType {
    */
   COPY_TASK_NODE = 12,
 
+  /**
+   * 延迟器节点
+   */
+  DELAY_TIMER_NODE = 14,
+
   /**
    * 条件节点
    */
@@ -39,7 +44,11 @@ export enum NodeType {
   /**
    * 包容分支节点 (对应包容网关)
    */
-  INCLUSIVE_BRANCH_NODE = 53
+  INCLUSIVE_BRANCH_NODE = 53,
+  /**
+   * 路由分支节点
+   */
+  ROUTER_BRANCH_NODE = 54
 }
 
 export enum NodeId {
@@ -88,6 +97,12 @@ export interface SimpleFlowNode {
   assignEmptyHandler?: AssignEmptyHandler
   // 审批节点的审批人与发起人相同时，对应的处理类型
   assignStartUserHandlerType?: number
+  // 创建任务监听器
+  taskCreateListener?: ListenerHandler
+  // 创建任务监听器
+  taskAssignListener?: ListenerHandler
+  // 创建任务监听器
+  taskCompleteListener?: ListenerHandler
   // 条件类型
   conditionType?: ConditionType
   // 条件表达式
@@ -98,6 +113,13 @@ export interface SimpleFlowNode {
   defaultFlow?: boolean
   // 活动的状态，用于前端节点状态展示
   activityStatus?: TaskStatusEnum
+  // 延迟设置
+  delaySetting?: DelaySetting
+  // 路由分支
+  routerGroups?: RouterCondition[]
+  defaultFlowId?: string
+  // 签名
+  signEnable?: boolean
 }
 // 候选人策略枚举 （ 用于审批节点。抄送节点 )
 export enum CandidateStrategy {
@@ -215,6 +237,41 @@ export type AssignEmptyHandler = {
   userIds?: number[]
 }
 
+/**
+ * 监听器的结构定义
+ */
+export type ListenerHandler = {
+  enable: boolean
+  path?: string
+  header?: ListenerParam[]
+  body?: ListenerParam[]
+}
+export type ListenerParam = {
+  key: string
+  type: number
+  value: string
+}
+export enum ListenerParamTypeEnum {
+  /**
+   * 固定值
+   */
+  FIXED_VALUE = 1,
+  /**
+   * 表单
+   */
+  FROM_FORM = 2
+}
+export const LISTENER_MAP_TYPES = [
+  {
+    value: 1,
+    label: '固定值'
+  },
+  {
+    value: 2,
+    label: '表单'
+  }
+]
+
 // 审批拒绝类型枚举
 export enum RejectHandlerType {
   /**
@@ -382,8 +439,6 @@ export enum OperationButtonType {
  * 条件规则结构定义
  */
 export type ConditionRule = {
-  type: number
-  opName: string
   opCode: string
   leftSide: string
   rightSide: string
@@ -413,12 +468,16 @@ NODE_DEFAULT_TEXT.set(NodeType.USER_TASK_NODE, '请配置审批人')
 NODE_DEFAULT_TEXT.set(NodeType.COPY_TASK_NODE, '请配置抄送人')
 NODE_DEFAULT_TEXT.set(NodeType.CONDITION_NODE, '请设置条件')
 NODE_DEFAULT_TEXT.set(NodeType.START_USER_NODE, '请设置发起人')
+NODE_DEFAULT_TEXT.set(NodeType.DELAY_TIMER_NODE, '请设置延迟器')
+NODE_DEFAULT_TEXT.set(NodeType.ROUTER_BRANCH_NODE, '请设置路由节点')
 
 export const NODE_DEFAULT_NAME = new Map<number, string>()
 NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人')
 NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人')
 NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
 NODE_DEFAULT_NAME.set(NodeType.START_USER_NODE, '发起人')
+NODE_DEFAULT_NAME.set(NodeType.DELAY_TIMER_NODE, '延迟器')
+NODE_DEFAULT_NAME.set(NodeType.ROUTER_BRANCH_NODE, '路由分支')
 
 // 候选人策略。暂时不从字典中取。 后续可能调整。控制显示顺序
 export const CANDIDATE_STRATEGY: DictDataVO[] = [
@@ -451,8 +510,8 @@ export const APPROVE_METHODS: DictDataVO[] = [
 ]
 
 export const CONDITION_CONFIG_TYPES: DictDataVO[] = [
-  { label: '条件表达式', value: ConditionType.EXPRESSION },
-  { label: '条件规则', value: ConditionType.RULE }
+  { label: '条件规则', value: ConditionType.RULE },
+  { label: '条件表达式', value: ConditionType.EXPRESSION }
 ]
 
 // 时间单位类型
@@ -568,3 +627,40 @@ export enum ProcessVariableEnum {
    */
   START_USER_ID = 'PROCESS_START_USER_ID'
 }
+
+/**
+ * 延迟设置
+ */
+export type DelaySetting = {
+  // 延迟类型
+  delayType: number
+  // 延迟时间表达式
+  delayTime: string
+}
+/**
+ * 延迟类型
+ */
+export enum DelayTypeEnum {
+  /**
+   * 固定时长
+   */
+  FIXED_TIME_DURATION = 1,
+  /**
+   * 固定日期时间
+   */
+  FIXED_DATE_TIME = 2
+}
+export const DELAY_TYPE = [
+  { label: '固定时长', value: DelayTypeEnum.FIXED_TIME_DURATION },
+  { label: '固定日期', value: DelayTypeEnum.FIXED_DATE_TIME }
+]
+
+/**
+ * 路由分支结构定义
+ */
+export type RouterCondition = {
+  nodeId: string
+  conditionType: ConditionType
+  conditionExpression: string
+  conditionGroups: ConditionGroup
+}

src/components/SimpleProcessDesignerV2/src/node.ts

@@ -1,4 +1,3 @@
-import { cloneDeep } from 'lodash-es'
 import { TaskStatusEnum } from '@/api/bpm/task'
 import * as RoleApi from '@/api/system/role'
 import * as DeptApi from '@/api/system/dept'
@@ -14,7 +13,8 @@ import {
   NODE_DEFAULT_NAME,
   AssignStartUserHandlerType,
   AssignEmptyHandlerType,
-  FieldPermissionType
+  FieldPermissionType,
+  ListenerParam
 } from './consts'
 import { parseFormFields } from '@/components/FormCreate/src/utils/index'
 export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlowNode> {
@@ -46,9 +46,9 @@ export function useFormFieldsPermission(defaultPermission: FieldPermissionType)
   // 字段权限配置. 需要有 field, title,  permissioin 属性
   const fieldsPermissionConfig = ref<Array<Record<string, any>>>([])
 
-  const formType = inject<Ref<number>>('formType') // 表单类型
+  const formType = inject<Ref<number|undefined>>('formType', ref()) // 表单类型
 
-  const formFields = inject<Ref<string[]>>('formFields') // 流程表单字段
+  const formFields = inject<Ref<string[]>>('formFields', ref([])) // 流程表单字段
 
   const getNodeConfigFormFields = (nodeFormFields?: Array<Record<string, string>>) => {
     nodeFormFields = toRaw(nodeFormFields)
@@ -136,6 +136,19 @@ export type UserTaskFormType = {
   timeDuration?: number
   maxRemindCount?: number
   buttonsSetting: any[]
+  taskCreateListenerEnable?: boolean
+  taskCreateListenerPath?: string
+  taskCreateListenerHeader?: ListenerParam[]
+  taskCreateListenerBody?: ListenerParam[]
+  taskAssignListenerEnable?: boolean
+  taskAssignListenerPath?: string
+  taskAssignListenerHeader?: ListenerParam[]
+  taskAssignListenerBody?: ListenerParam[]
+  taskCompleteListenerEnable?: boolean
+  taskCompleteListenerPath?: string
+  taskCompleteListenerHeader?: ListenerParam[]
+  taskCompleteListenerBody?: ListenerParam[]
+  signEnable: boolean
 }
 
 export type CopyTaskFormType = {
@@ -156,13 +169,13 @@ export type CopyTaskFormType = {
  * @description 节点表单数据。 用于审批节点、抄送节点
  */
 export function useNodeForm(nodeType: NodeType) {
-  const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList') // 角色列表
-  const postOptions = inject<Ref<PostApi.PostVO[]>>('postList') // 岗位列表
-  const userOptions = inject<Ref<UserApi.UserVO[]>>('userList') // 用户列表
-  const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList') // 部门列表
-  const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // 用户组列表
-  const deptTreeOptions = inject('deptTree') // 部门树
-  const formFields = inject<Ref<string[]>>('formFields') // 流程表单字段
+  const roleOptions = inject<Ref<RoleApi.RoleVO[]>>('roleList', ref([])) // 角色列表
+  const postOptions = inject<Ref<PostApi.PostVO[]>>('postList', ref([])) // 岗位列表
+  const userOptions = inject<Ref<UserApi.UserVO[]>>('userList', ref([])) // 用户列表
+  const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList', ref([])) // 部门列表
+  const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList',ref([])) // 用户组列表
+  const deptTreeOptions = inject('deptTree', ref()) // 部门树
+  const formFields = inject<Ref<string[]>>('formFields', ref([])) // 流程表单字段
   const configForm = ref<UserTaskFormType | CopyTaskFormType>()
   if (nodeType === NodeType.USER_TASK_NODE) {
     configForm.value = {

src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue

@@ -30,117 +30,7 @@
         >未满足其它条件时，将进入此分支（该分支不可编辑和删除）</div
       >
       <div v-else>
-        <el-form ref="formRef" :model="currentNode" :rules="formRules" label-position="top">
-          <el-form-item label="配置方式" prop="conditionType">
-            <el-radio-group v-model="currentNode.conditionType" @change="changeConditionType">
-              <el-radio
-                v-for="(dict, index) in conditionConfigTypes"
-                :key="index"
-                :value="dict.value"
-                :label="dict.value"
-              >
-                {{ dict.label }}
-              </el-radio>
-            </el-radio-group>
-          </el-form-item>
-
-          <el-form-item
-            v-if="currentNode.conditionType === 1"
-            label="条件表达式"
-            prop="conditionExpression"
-          >
-            <el-input
-              type="textarea"
-              v-model="currentNode.conditionExpression"
-              clearable
-              style="width: 100%"
-            />
-          </el-form-item>
-          <el-form-item v-if="currentNode.conditionType === 2" label="条件规则">
-            <div class="condition-group-tool">
-              <div class="flex items-center">
-                <div class="mr-4">条件组关系</div>
-                <el-switch
-                  v-model="conditionGroups.and"
-                  inline-prompt
-                  active-text="且"
-                  inactive-text="或"
-                />
-              </div>
-            </div>
-            <el-space direction="vertical" :spacer="conditionGroups.and ? '且' : '或'">
-              <el-card
-                class="condition-group"
-                style="width: 530px"
-                v-for="(condition, cIdx) in conditionGroups.conditions"
-                :key="cIdx"
-              >
-                <div class="condition-group-delete" v-if="conditionGroups.conditions.length > 1">
-                  <Icon
-                    color="#0089ff"
-                    icon="ep:circle-close-filled"
-                    :size="18"
-                    @click="deleteConditionGroup(cIdx)"
-                  />
-                </div>
-                <template #header>
-                  <div class="flex items-center justify-between">
-                    <div>条件组</div>
-                    <div class="flex">
-                      <div class="mr-4">规则关系</div>
-                      <el-switch
-                        v-model="condition.and"
-                        inline-prompt
-                        active-text="且"
-                        inactive-text="或"
-                      />
-                    </div>
-                  </div>
-                </template>
-
-                <div class="flex pt-2" v-for="(rule, rIdx) in condition.rules" :key="rIdx">
-                  <div class="mr-2">
-                    <el-select style="width: 160px" v-model="rule.leftSide">
-                      <el-option
-                        v-for="(item, index) in fieldOptions"
-                        :key="index"
-                        :label="item.title"
-                        :value="item.field"
-                        :disabled="!item.required"
-                      />
-                    </el-select>
-                  </div>
-                  <div class="mr-2">
-                    <el-select v-model="rule.opCode" style="width: 100px">
-                      <el-option
-                        v-for="item in COMPARISON_OPERATORS"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
-                    </el-select>
-                  </div>
-                  <div class="mr-2">
-                    <el-input v-model="rule.rightSide" style="width: 160px" />
-                  </div>
-                  <div class="mr-1 flex items-center" v-if="condition.rules.length > 1">
-                    <Icon
-                      icon="ep:delete"
-                      :size="18"
-                      @click="deleteConditionRule(condition, rIdx)"
-                    />
-                  </div>
-                  <div class="flex items-center">
-                    <Icon icon="ep:plus" :size="18" @click="addConditionRule(condition, rIdx)" />
-                  </div>
-                </div>
-              </el-card>
-            </el-space>
-            <div title="添加条件组" class="mt-4 cursor-pointer">
-              <Icon color="#0089ff" icon="ep:plus" :size="24" @click="addConditionGroup" />
-            </div>
-          </el-form-item>
-        </el-form>
+        <Condition ref="conditionRef" v-model="condition" />
       </div>
     </div>
     <template #footer>
@@ -155,33 +45,17 @@
 <script setup lang="ts">
 import {
   SimpleFlowNode,
-  CONDITION_CONFIG_TYPES,
   ConditionType,
   COMPARISON_OPERATORS,
-  ConditionGroup,
-  Condition,
-  ConditionRule,
   ProcessVariableEnum
 } from '../consts'
 import { getDefaultConditionNodeName } from '../utils'
 import { useFormFields } from '../node'
-import { BpmModelFormType } from '@/utils/constants'
+import Condition from './components/Condition.vue'
 const message = useMessage() // 消息弹窗
 defineOptions({
   name: 'ConditionNodeConfig'
 })
-const formType = inject<Ref<number>>('formType') // 表单类型
-const conditionConfigTypes = computed(() => {
-  return CONDITION_CONFIG_TYPES.filter((item) => {
-    // 业务表单暂时去掉条件规则选项
-    if (formType?.value === BpmModelFormType.CUSTOM && item.value === ConditionType.RULE) {
-      return false
-    } else {
-      return true
-    }
-  })
-})
-
 const props = defineProps({
   conditionNode: {
     type: Object as () => SimpleFlowNode,
@@ -193,11 +67,26 @@ const props = defineProps({
   }
 })
 const settingVisible = ref(false)
+const condition = ref<any>()
 const open = () => {
-  if (currentNode.value.conditionType === ConditionType.RULE) {
-    if (currentNode.value.conditionGroups) {
-      conditionGroups.value = currentNode.value.conditionGroups
-    }
+  condition.value = {
+    conditionType: currentNode.value.conditionType,
+    conditionExpression: currentNode.value.conditionExpression ?? '',
+    conditionGroups: currentNode.value.conditionGroups ?? {
+      and: true,
+      conditions: [
+        {
+          and: true,
+          rules: [
+            {
+              opCode: '==',
+              leftSide: '',
+              rightSide: ''
+            }
+          ]
+        }
+      ]
+    },
   }
   settingVisible.value = true
 }
@@ -239,31 +128,27 @@ const handleClose = async (done: (cancel?: boolean) => void) => {
     done()
   }
 }
-// 表单校验规则
-const formRules = reactive({
-  conditionType: [{ required: true, message: '配置方式不能为空', trigger: 'blur' }],
-  conditionExpression: [{ required: true, message: '条件表达式不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
 
+const conditionRef = ref()
 // 保存配置
 const saveConfig = async () => {
   if (!currentNode.value.defaultFlow) {
     // 校验表单
-    if (!formRef) return false
-    const valid = await formRef.value.validate()
+    const valid = await conditionRef.value.validate()
     if (!valid) return false
     const showText = getShowText()
     if (!showText) {
       return false
     }
     currentNode.value.showText = showText
+    currentNode.value.conditionType = condition.value.conditionType
     if (currentNode.value.conditionType === ConditionType.EXPRESSION) {
       currentNode.value.conditionGroups = undefined
+      currentNode.value.conditionExpression = condition.value.conditionExpression
     }
     if (currentNode.value.conditionType === ConditionType.RULE) {
       currentNode.value.conditionExpression = undefined
-      currentNode.value.conditionGroups = conditionGroups.value
+      currentNode.value.conditionGroups = condition.value.conditionGroups
     }
   }
   settingVisible.value = false
@@ -271,16 +156,16 @@ const saveConfig = async () => {
 }
 const getShowText = (): string => {
   let showText = ''
-  if (currentNode.value.conditionType === ConditionType.EXPRESSION) {
-    if (currentNode.value.conditionExpression) {
-      showText = `表达式：${currentNode.value.conditionExpression}`
+  if (condition.value.conditionType === ConditionType.EXPRESSION) {
+    if (condition.value.conditionExpression) {
+      showText = `表达式：${condition.value.conditionExpression}`
     }
   }
-  if (currentNode.value.conditionType === ConditionType.RULE) {
+  if (condition.value.conditionType === ConditionType.RULE) {
     // 条件组是否为与关系
-    const groupAnd = conditionGroups.value.and
+    const groupAnd = condition.value.conditionGroups.and
     let warningMesg: undefined | string = undefined
-    const conditionGroup = conditionGroups.value.conditions.map((item) => {
+    const conditionGroup = condition.value.conditionGroups.conditions.map((item) => {
       return (
         '(' +
         item.rules
@@ -309,64 +194,7 @@ const getShowText = (): string => {
   return showText
 }
 
-// 改变条件配置方式
-const changeConditionType = () => {}
-
-const conditionGroups = ref<ConditionGroup>({
-  and: true,
-  conditions: [
-    {
-      and: true,
-      rules: [
-        {
-          type: 1,
-          opName: '等于',
-          opCode: '==',
-          leftSide: '',
-          rightSide: ''
-        }
-      ]
-    }
-  ]
-})
-// 添加条件组
-const addConditionGroup = () => {
-  const condition = {
-    and: true,
-    rules: [
-      {
-        type: 1,
-        opName: '等于',
-        opCode: '==',
-        leftSide: '',
-        rightSide: ''
-      }
-    ]
-  }
-  conditionGroups.value.conditions.push(condition)
-}
-// 删除条件组
-const deleteConditionGroup = (idx: number) => {
-  conditionGroups.value.conditions.splice(idx, 1)
-}
-
-// 添加条件规则
-const addConditionRule = (condition: Condition, idx: number) => {
-  const rule: ConditionRule = {
-    type: 1,
-    opName: '等于',
-    opCode: '==',
-    leftSide: '',
-    rightSide: ''
-  }
-  condition.rules.splice(idx + 1, 0, rule)
-}
-
-const deleteConditionRule = (condition: Condition, idx: number) => {
-  condition.rules.splice(idx, 1)
-}
 const fieldsInfo = useFormFields()
-
 /** 条件规则可选择的表单字段 */
 const fieldOptions = computed(() => {
   const fieldsCopy = fieldsInfo.slice()

src/components/SimpleProcessDesignerV2/src/nodes-config/DelayTimerNodeConfig.vue

@@ -0,0 +1,189 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="settingVisible"
+    :show-close="false"
+    :size="550"
+    :before-close="saveConfig"
+  >
+    <template #header>
+      <div class="config-header">
+        <input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-mountedFocus
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
+        </div>
+        <div class="divide-line"></div>
+      </div>
+    </template>
+    <div>
+      <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
+        <el-form-item label="延迟时间" prop="delayType">
+          <el-radio-group v-model="configForm.delayType">
+            <el-radio-button
+              v-for="item in DELAY_TYPE"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="configForm.delayType === DelayTypeEnum.FIXED_TIME_DURATION">
+          <el-form-item prop="timeDuration">
+            <el-input-number
+              class="mr-2"
+              :style="{ width: '100px' }"
+              v-model="configForm.timeDuration"
+              :min="1"
+              controls-position="right"
+            />
+          </el-form-item>
+          <el-select v-model="configForm.timeUnit" class="mr-2" :style="{ width: '100px' }">
+            <el-option
+              v-for="item in TIME_UNIT_TYPES"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-text>后进入下一节点</el-text>
+        </el-form-item>
+        <el-form-item v-if="configForm.delayType === DelayTypeEnum.FIXED_DATE_TIME" prop="dateTime">
+          <el-date-picker
+            class="mr-2"
+            v-model="configForm.dateTime"
+            type="datetime"
+            placeholder="请选择日期和时间"
+            value-format="YYYY-MM-DDTHH:mm:ss"
+          />
+          <el-text>后进入下一节点</el-text>
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang="ts">
+import {
+  SimpleFlowNode,
+  NodeType,
+  TIME_UNIT_TYPES,
+  TimeUnitType,
+  DelayTypeEnum,
+  DELAY_TYPE
+} from '../consts'
+import { useWatchNode, useDrawer, useNodeName } from '../node'
+import { convertTimeUnit } from '../utils'
+defineOptions({
+  name: 'DelayTimerNodeConfig'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 抽屉配置
+const { settingVisible, closeDrawer, openDrawer } = useDrawer()
+// 当前节点
+const currentNode = useWatchNode(props)
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.DELAY_TIMER_NODE)
+// 抄送人表单配置
+const formRef = ref() // 表单 Ref
+// 表单校验规则
+const formRules = reactive({
+  delayType: [{ required: true, message: '延迟时间不能为空', trigger: 'change' }],
+  timeDuration: [{ required: true, message: '延迟时间不能为空', trigger: 'change' }],
+  dateTime: [{ required: true, message: '延迟时间不能为空', trigger: 'change' }]
+})
+// 配置表单数据
+const configForm = ref({
+  delayType: DelayTypeEnum.FIXED_TIME_DURATION,
+  timeDuration: 1,
+  timeUnit: TimeUnitType.HOUR,
+  dateTime: ''
+})
+// 保存配置
+const saveConfig = async () => {
+  if (!formRef) return false
+  const valid = await formRef.value.validate()
+  if (!valid) return false
+  const showText = getShowText()
+  if (!showText) return false
+  currentNode.value.showText = showText
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+    currentNode.value.delaySetting = {
+      delayType: configForm.value.delayType,
+      delayTime: getIsoTimeDuration()
+    }
+  }
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+    currentNode.value.delaySetting = {
+      delayType: configForm.value.delayType,
+      delayTime: configForm.value.dateTime
+    }
+  }
+  settingVisible.value = false
+  return true
+}
+const getShowText = (): string => {
+  let showText = ''
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+    showText = `延迟${configForm.value.timeDuration}${TIME_UNIT_TYPES.find((item) => item.value === configForm.value.timeUnit).label}`
+  }
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+    showText = `延迟至${configForm.value.dateTime.replace('T', ' ')}`
+  }
+  return showText
+}
+const getIsoTimeDuration = () => {
+  let strTimeDuration = 'PT'
+  if (configForm.value.timeUnit === TimeUnitType.MINUTE) {
+    strTimeDuration += configForm.value.timeDuration + 'M'
+  }
+  if (configForm.value.timeUnit === TimeUnitType.HOUR) {
+    strTimeDuration += configForm.value.timeDuration + 'H'
+  }
+  if (configForm.value.timeUnit === TimeUnitType.DAY) {
+    strTimeDuration += configForm.value.timeDuration + 'D'
+  }
+  return strTimeDuration
+}
+// 显示延迟器节点配置， 由父组件传过来
+const showDelayTimerNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name
+  if (node.delaySetting) {
+    configForm.value.delayType = node.delaySetting.delayType
+    // 固定时长
+    if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+      const strTimeDuration = node.delaySetting.delayTime
+      let parseTime = strTimeDuration.slice(2, strTimeDuration.length - 1)
+      let parseTimeUnit = strTimeDuration.slice(strTimeDuration.length - 1)
+      configForm.value.timeDuration = parseInt(parseTime)
+      configForm.value.timeUnit = convertTimeUnit(parseTimeUnit)
+    }
+    // 固定日期时间
+    if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+      configForm.value.dateTime = node.delaySetting.delayTime
+    }
+  }
+}
+
+defineExpose({ openDrawer, showDelayTimerNodeConfig }) // 暴露方法给父组件
+</script>
+
+<style lang="scss" scoped></style>

src/components/SimpleProcessDesignerV2/src/nodes-config/RouterNodeConfig.vue

@@ -0,0 +1,201 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    v-model="settingVisible"
+    :show-close="false"
+    :size="630"
+    :before-close="saveConfig"
+  >
+    <template #header>
+      <div class="config-header">
+        <input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-mountedFocus
+          v-model="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
+        </div>
+        <div class="divide-line"></div>
+      </div>
+    </template>
+    <div>
+      <el-form label-position="top">
+        <el-card class="mb-15px" v-for="(item, index) in routerGroups" :key="index">
+          <template #header>
+            <div class="flex flex-items-center">
+              <el-text size="large">路由{{ index + 1 }}</el-text>
+              <el-select class="ml-15px" v-model="item.nodeId" style="width: 180px">
+                <el-option
+                  v-for="node in nodeOptions"
+                  :key="node.value"
+                  :label="node.label"
+                  :value="node.value"
+                />
+              </el-select>
+              <el-button class="mla" type="danger" link @click="deleteRouterGroup(index)">
+                删除
+              </el-button>
+            </div>
+          </template>
+          <Condition
+            :ref="($event) => (conditionRef[index] = $event)"
+            v-model="routerGroups[index]"
+          />
+        </el-card>
+      </el-form>
+
+      <el-button class="w-1/1" type="primary" :icon="Plus" @click="addRouterGroup">
+        新增路由分支
+      </el-button>
+    </div>
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { SimpleFlowNode, NodeType, ConditionType, RouterCondition } from '../consts'
+import { useWatchNode, useDrawer, useNodeName } from '../node'
+import Condition from './components/Condition.vue'
+
+defineOptions({
+  name: 'RouterNodeConfig'
+})
+const message = useMessage() // 消息弹窗
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree')
+// 抽屉配置
+const { settingVisible, closeDrawer, openDrawer } = useDrawer()
+// 当前节点
+const currentNode = useWatchNode(props)
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.ROUTER_BRANCH_NODE)
+const routerGroups = ref<RouterCondition[]>([])
+const nodeOptions = ref<any>([])
+const conditionRef = ref([])
+
+/** 保存配置 */
+const saveConfig = async () => {
+  // 校验表单
+  let valid = true
+  for (const item of conditionRef.value) {
+    if (item && !(await item.validate())) {
+      valid = false
+    }
+  }
+  if (!valid) return false
+  const showText = getShowText()
+  if (!showText) return false
+  currentNode.value.name = nodeName.value!
+  currentNode.value.showText = showText
+  currentNode.value.routerGroups = routerGroups.value
+  settingVisible.value = false
+  return true
+}
+// 显示路由分支节点配置， 由父组件传过来
+const showRouteNodeConfig = (node: SimpleFlowNode) => {
+  getRouterNode(processNodeTree?.value)
+  routerGroups.value = []
+  nodeName.value = node.name
+  if (node.routerGroups) {
+    routerGroups.value = node.routerGroups
+  }
+}
+
+const getShowText = () => {
+  if (!routerGroups.value || !Array.isArray(routerGroups.value) || routerGroups.value.length <= 0) {
+    message.warning('请配置路由！')
+    return ''
+  }
+  for (const route of routerGroups.value) {
+    if (!route.nodeId || !route.conditionType) {
+      message.warning('请完善路由配置项！')
+      return ''
+    }
+    if (route.conditionType === ConditionType.EXPRESSION && !route.conditionExpression) {
+      message.warning('请完善路由配置项！')
+      return ''
+    }
+    if (route.conditionType === ConditionType.RULE) {
+      for (const condition of route.conditionGroups.conditions) {
+        for (const rule of condition.rules) {
+          if (!rule.leftSide || !rule.rightSide) {
+            message.warning('请完善路由配置项！')
+            return ''
+          }
+        }
+      }
+    }
+  }
+  return `${routerGroups.value.length}条路由分支`
+}
+
+const addRouterGroup = () => {
+  routerGroups.value.push({
+    nodeId: '',
+    conditionType: ConditionType.RULE,
+    conditionExpression: '',
+    conditionGroups: {
+      and: true,
+      conditions: [
+        {
+          and: true,
+          rules: [
+            {
+              opCode: '==',
+              leftSide: '',
+              rightSide: ''
+            }
+          ]
+        }
+      ]
+    }
+  })
+}
+
+const deleteRouterGroup = (index: number) => {
+  routerGroups.value.splice(index, 1)
+}
+
+// 递归获取所有节点
+const getRouterNode = (node) => {
+  // TODO 最好还需要满足以下要求
+  // 并行分支、包容分支内部节点不能跳转到外部节点
+  // 条件分支节点可以向上跳转到外部节点
+  while (true) {
+    if (!node) break
+    if (node.type !== NodeType.ROUTER_BRANCH_NODE && node.type !== NodeType.CONDITION_NODE) {
+      nodeOptions.value.push({
+        label: node.name,
+        value: node.id
+      })
+    }
+    if (!node.childNode || node.type === NodeType.END_EVENT_NODE) {
+      break
+    }
+    if (node.conditionNodes && node.conditionNodes.length) {
+      node.conditionNodes.forEach((item) => {
+        getRouterNode(item)
+      })
+    }
+    node = node.childNode
+  }
+}
+
+defineExpose({ openDrawer, showRouteNodeConfig }) // 暴露方法给父组件
+</script>

src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue

@@ -3,7 +3,7 @@
     :append-to-body="true"
     v-model="settingVisible"
     :show-close="false"
-    :size="550"
+    :size="580"
     :before-close="saveConfig"
     class="justify-start"
   >
@@ -19,7 +19,8 @@
           :placeholder="nodeName"
         />
         <div v-else class="node-name">
-          {{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
+          {{ nodeName }}
+          <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
         </div>
         <div class="divide-line"></div>
       </div>
@@ -46,14 +47,13 @@
                 v-model="configForm.candidateStrategy"
                 @change="changeCandidateStrategy"
               >
-                <el-radio
-                  v-for="(dict, index) in CANDIDATE_STRATEGY"
-                  :key="index"
-                  :value="dict.value"
-                  :label="dict.value"
-                >
-                  {{ dict.label }}
-                </el-radio>
+                <el-row>
+                  <el-col v-for="(dict, index) in CANDIDATE_STRATEGY" :key="index" :span="8">
+                    <el-radio :value="dict.value" :label="dict.value">
+                      {{ dict.label }}
+                    </el-radio>
+                  </el-col>
+                </el-row>
               </el-radio-group>
             </el-form-item>
             <el-form-item
@@ -148,7 +148,7 @@
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
-                  :disabled ="!item.required"
+                  :disabled="!item.required"
                 />
               </el-select>
             </el-form-item>
@@ -163,7 +163,7 @@
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
-                  :disabled ="!item.required"
+                  :disabled="!item.required"
                 />
               </el-select>
             </el-form-item>
@@ -356,6 +356,11 @@
                 </div>
               </el-radio-group>
             </el-form-item>
+
+            <el-divider content-position="left">是否需要签名</el-divider>
+            <el-form-item prop="signEnable">
+              <el-switch v-model="configForm.signEnable" active-text="是" inactive-text="否" />
+            </el-form-item>
           </el-form>
         </div>
       </el-tab-pane>
@@ -435,6 +440,9 @@
           </div>
         </div>
       </el-tab-pane>
+      <el-tab-pane label="监听器" name="listener">
+        <UserTaskListener ref="userTaskListenerRef" v-model="configForm" :form-field-options="formFieldOptions" />
+      </el-tab-pane>
     </el-tabs>
     <template #footer>
       <el-divider />
@@ -484,6 +492,7 @@ import {
 import { defaultProps } from '@/utils/tree'
 import { cloneDeep } from 'lodash-es'
 import { convertTimeUnit, getApproveTypeText } from '../utils'
+import UserTaskListener from './components/UserTaskListener.vue'
 defineOptions({
   name: 'UserTaskNodeConfig'
 })
@@ -609,6 +618,8 @@ const {
   cTimeoutMaxRemindCount
 } = useTimeoutHandler()
 
+const userTaskListenerRef = ref()
+
 // 保存配置
 const saveConfig = async () => {
   activeTabName.value = 'user'
@@ -624,7 +635,8 @@ const saveConfig = async () => {
   }
 
   if (!formRef) return false
-  const valid = await formRef.value.validate()
+  if (!userTaskListenerRef) return false
+  const valid = (await formRef.value.validate()) && (await userTaskListenerRef.value.validate())
   if (!valid) return false
   const showText = getShowText()
   if (!showText) return false
@@ -663,6 +675,29 @@ const saveConfig = async () => {
   currentNode.value.fieldsPermission = fieldsPermissionConfig.value
   // 设置按钮权限
   currentNode.value.buttonsSetting = buttonsSetting.value
+  // 创建任务监听器
+  currentNode.value.taskCreateListener = {
+    enable: configForm.value.taskCreateListenerEnable ?? false,
+    path: configForm.value.taskCreateListenerPath,
+    header: configForm.value.taskCreateListenerHeader,
+    body: configForm.value.taskCreateListenerBody
+  }
+  // 指派任务监听器
+  currentNode.value.taskAssignListener = {
+    enable: configForm.value.taskAssignListenerEnable ?? false,
+    path: configForm.value.taskAssignListenerPath,
+    header: configForm.value.taskAssignListenerHeader,
+    body: configForm.value.taskAssignListenerBody
+  }
+  // 完成任务监听器
+  currentNode.value.taskCompleteListener = {
+    enable: configForm.value.taskCompleteListenerEnable ?? false,
+    path: configForm.value.taskCompleteListenerPath,
+    header: configForm.value.taskCompleteListenerHeader,
+    body: configForm.value.taskCompleteListenerBody
+  }
+  // 签名
+  currentNode.value.signEnable = configForm.value.signEnable
 
   currentNode.value.showText = showText
   settingVisible.value = false
@@ -714,6 +749,24 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
   buttonsSetting.value = cloneDeep(node.buttonsSetting) || DEFAULT_BUTTON_SETTING
   // 4. 表单字段权限配置
   getNodeConfigFormFields(node.fieldsPermission)
+  // 5. 监听器
+  // 5.1 创建任务
+  configForm.value.taskCreateListenerEnable = node.taskCreateListener!.enable
+  configForm.value.taskCreateListenerPath = node.taskCreateListener!.path
+  configForm.value.taskCreateListenerHeader = node.taskCreateListener?.header ?? []
+  configForm.value.taskCreateListenerBody = node.taskCreateListener?.body ?? []
+  // 5.2 指派任务
+  configForm.value.taskAssignListenerEnable = node.taskAssignListener!.enable
+  configForm.value.taskAssignListenerPath = node.taskAssignListener!.path
+  configForm.value.taskAssignListenerHeader = node.taskAssignListener?.header ?? []
+  configForm.value.taskAssignListenerBody = node.taskAssignListener?.body ?? []
+  // 5.3 完成任务
+  configForm.value.taskCompleteListenerEnable = node.taskCompleteListener!.enable
+  configForm.value.taskCompleteListenerPath = node.taskCompleteListener!.path
+  configForm.value.taskCompleteListenerHeader = node.taskCompleteListener?.header ?? []
+  configForm.value.taskCompleteListenerBody = node.taskCompleteListener?.body ?? []
+  // 6. 签名
+  configForm.value.signEnable = node?.signEnable ?? false
 }
 
 defineExpose({ openDrawer, showUserTaskNodeConfig }) // 暴露方法给父组件

src/components/SimpleProcessDesignerV2/src/nodes-config/components/Condition.vue

@@ -0,0 +1,263 @@
+<template>
+  <el-form ref="formRef" :model="condition" :rules="formRules" label-position="top">
+    <el-form-item label="配置方式" prop="conditionType">
+      <el-radio-group v-model="condition.conditionType">
+        <el-radio
+          v-for="(dict, indexConditionType) in conditionConfigTypes"
+          :key="indexConditionType"
+          :value="dict.value"
+          :label="dict.value"
+        >
+          {{ dict.label }}
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item v-if="condition.conditionType === ConditionType.RULE" label="条件规则">
+      <div class="condition-group-tool">
+        <div class="flex items-center">
+          <div class="mr-4">条件组关系</div>
+          <el-switch
+            v-model="condition.conditionGroups.and"
+            inline-prompt
+            active-text="且"
+            inactive-text="或"
+          />
+        </div>
+      </div>
+      <el-space direction="vertical" :spacer="condition.conditionGroups.and ? '且' : '或'">
+        <el-card
+          class="condition-group"
+          style="width: 530px"
+          v-for="(equation, cIdx) in condition.conditionGroups.conditions"
+          :key="cIdx"
+        >
+          <div
+            class="condition-group-delete"
+            v-if="condition.conditionGroups.conditions.length > 1"
+          >
+            <Icon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              :size="18"
+              @click="deleteConditionGroup(condition.conditionGroups.conditions, cIdx)"
+            />
+          </div>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <div>条件组</div>
+              <div class="flex">
+                <div class="mr-4">规则关系</div>
+                <el-switch
+                  v-model="equation.and"
+                  inline-prompt
+                  active-text="且"
+                  inactive-text="或"
+                />
+              </div>
+            </div>
+          </template>
+
+          <div class="flex pt-2" v-for="(rule, rIdx) in equation.rules" :key="rIdx">
+            <div class="mr-2">
+              <el-form-item
+                :prop="`conditionGroups.conditions.${cIdx}.rules.${rIdx}.leftSide`"
+                :rules="{
+                  required: true,
+                  message: '左值不能为空',
+                  trigger: 'change'
+                }"
+              >
+                <el-select style="width: 160px" v-model="rule.leftSide">
+                  <el-option
+                    v-for="(field, fIdx) in fieldOptions"
+                    :key="fIdx"
+                    :label="field.title"
+                    :value="field.field"
+                    :disabled="!field.required"
+                  />
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="mr-2">
+              <el-select v-model="rule.opCode" style="width: 100px">
+                <el-option
+                  v-for="operator in COMPARISON_OPERATORS"
+                  :key="operator.value"
+                  :label="operator.label"
+                  :value="operator.value"
+                />
+              </el-select>
+            </div>
+            <div class="mr-2">
+              <el-form-item
+                :prop="`conditionGroups.conditions.${cIdx}.rules.${rIdx}.rightSide`"
+                :rules="{
+                  required: true,
+                  message: '右值不能为空',
+                  trigger: 'blur'
+                }"
+              >
+                <el-input v-model="rule.rightSide" style="width: 160px" />
+              </el-form-item>
+            </div>
+            <div class="mr-1 flex items-center" v-if="equation.rules.length > 1">
+              <Icon icon="ep:delete" :size="18" @click="deleteConditionRule(equation, rIdx)" />
+            </div>
+            <div class="flex items-center">
+              <Icon icon="ep:plus" :size="18" @click="addConditionRule(equation, rIdx)" />
+            </div>
+          </div>
+        </el-card>
+      </el-space>
+      <div title="添加条件组" class="mt-4 cursor-pointer">
+        <Icon
+          color="#0089ff"
+          icon="ep:plus"
+          :size="24"
+          @click="addConditionGroup(condition.conditionGroups.conditions)"
+        />
+      </div>
+    </el-form-item>
+    <el-form-item
+      v-if="condition.conditionType === ConditionType.EXPRESSION"
+      label="条件表达式"
+      prop="conditionExpression"
+    >
+      <el-input
+        type="textarea"
+        v-model="condition.conditionExpression"
+        clearable
+        style="width: 100%"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import {
+  COMPARISON_OPERATORS,
+  CONDITION_CONFIG_TYPES,
+  ConditionType,
+  ProcessVariableEnum
+} from '../../consts'
+import { BpmModelFormType } from '@/utils/constants'
+import { useFormFields } from '../../node'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  }
+})
+const emit = defineEmits(['update:modelValue'])
+const condition = computed({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue)
+  }
+})
+const formType = inject<Ref<number>>('formType') // 表单类型
+const conditionConfigTypes = computed(() => {
+  return CONDITION_CONFIG_TYPES.filter((item) => {
+    // 业务表单暂时去掉条件规则选项
+    if (formType?.value === BpmModelFormType.CUSTOM && item.value === ConditionType.RULE) {
+      return false
+    } else {
+      return true
+    }
+  })
+})
+/** 条件规则可选择的表单字段 */
+const fieldOptions = computed(() => {
+  const fieldsCopy = useFormFields().slice()
+  // 固定添加发起人 ID 字段
+  fieldsCopy.unshift({
+    field: ProcessVariableEnum.START_USER_ID,
+    title: '发起人',
+    required: true
+  })
+  return fieldsCopy
+})
+// 表单校验规则
+const formRules = reactive({
+  conditionType: [{ required: true, message: '配置方式不能为空', trigger: 'blur' }],
+  conditionExpression: [{ required: true, message: '条件表达式不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+const deleteConditionGroup = (conditions, index) => {
+  conditions.splice(index, 1)
+}
+
+const deleteConditionRule = (condition, index) => {
+  condition.rules.splice(index, 1)
+}
+
+const addConditionRule = (condition, index) => {
+  const rule = {
+    opCode: '==',
+    leftSide: '',
+    rightSide: ''
+  }
+  condition.rules.splice(index + 1, 0, rule)
+}
+
+const addConditionGroup = (conditions) => {
+  const condition = {
+    and: true,
+    rules: [
+      {
+        opCode: '==',
+        leftSide: '',
+        rightSide: ''
+      }
+    ]
+  }
+  conditions.push(condition)
+}
+
+const validate = async () => {
+  if (!formRef) return false
+  return await formRef.value.validate()
+}
+
+defineExpose({ validate })
+</script>
+
+<style lang="scss" scoped>
+.condition-group-tool {
+  display: flex;
+  justify-content: space-between;
+  width: 500px;
+  margin-bottom: 20px;
+}
+
+.condition-group {
+  position: relative;
+
+  &:hover {
+    border-color: #0089ff;
+
+    .condition-group-delete {
+      opacity: 1;
+    }
+  }
+
+  .condition-group-delete {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    cursor: pointer;
+    opacity: 0;
+  }
+}
+
+::v-deep(.el-card__header) {
+  padding: 8px var(--el-card-padding);
+  border-bottom: 1px solid var(--el-card-border-color);
+  box-sizing: border-box;
+}
+</style>

src/components/SimpleProcessDesignerV2/src/nodes-config/components/UserTaskListener.vue

@@ -0,0 +1,261 @@
+<template>
+  <el-form ref="listenerFormRef" :model="configForm" label-position="top">
+    <div v-for="(listener, listenerIdx) in taskListener" :key="listenerIdx">
+      <el-divider content-position="left">
+        <el-text tag="b" size="large">{{ listener.name }}</el-text>
+      </el-divider>
+      <el-form-item>
+        <el-switch
+          v-model="configForm[`task${listener.type}ListenerEnable`]"
+          active-text="开启"
+          inactive-text="关闭"
+        />
+      </el-form-item>
+      <div v-if="configForm[`task${listener.type}ListenerEnable`]">
+        <el-form-item>
+          <el-alert
+            title="仅支持 POST 请求，以请求体方式接收参数"
+            type="warning"
+            show-icon
+            :closable="false"
+          />
+        </el-form-item>
+        <el-form-item
+          label="请求地址"
+          :prop="`task${listener.type}ListenerPath`"
+          :rules="{
+            required: true,
+            message: '请求地址不能为空',
+            trigger: 'blur'
+          }"
+        >
+          <el-input v-model="configForm[`task${listener.type}ListenerPath`]" />
+        </el-form-item>
+        <el-form-item label="请求头">
+          <div
+            class="flex pt-2"
+            v-for="(item, index) in configForm[`task${listener.type}ListenerHeader`]"
+            :key="index"
+          >
+            <div class="mr-2">
+              <el-form-item
+                :prop="`task${listener.type}ListenerHeader.${index}.key`"
+                :rules="{
+                  required: true,
+                  message: '参数名不能为空',
+                  trigger: 'blur'
+                }"
+              >
+                <el-input class="w-160px" v-model="item.key" />
+              </el-form-item>
+            </div>
+            <div class="mr-2">
+              <el-select class="w-100px!" v-model="item.type">
+                <el-option
+                  v-for="types in LISTENER_MAP_TYPES"
+                  :key="types.value"
+                  :label="types.label"
+                  :value="types.value"
+                />
+              </el-select>
+            </div>
+            <div class="mr-2">
+              <el-form-item
+                :prop="`task${listener.type}ListenerHeader.${index}.value`"
+                :rules="{
+                  required: true,
+                  message: '参数值不能为空',
+                  trigger: 'blur'
+                }"
+              >
+                <el-input
+                  v-if="item.type === ListenerParamTypeEnum.FIXED_VALUE"
+                  class="w-160px"
+                  v-model="item.value"
+                />
+              </el-form-item>
+              <el-form-item
+                :prop="`task${listener.type}ListenerHeader.${index}.value`"
+                :rules="{
+                  required: true,
+                  message: '参数值不能为空',
+                  trigger: 'change'
+                }"
+              >
+                <el-select
+                  v-if="item.type === ListenerParamTypeEnum.FROM_FORM"
+                  class="w-160px!"
+                  v-model="item.value"
+                >
+                  <el-option
+                    v-for="(field, fIdx) in formFieldOptions"
+                    :key="fIdx"
+                    :label="field.title"
+                    :value="field.field"
+                    :disabled="!field.required"
+                  />
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="mr-1 flex items-center">
+              <Icon
+                icon="ep:delete"
+                :size="18"
+                @click="
+                  deleteTaskListenerParam(configForm[`task${listener.type}ListenerHeader`], index)
+                "
+              />
+            </div>
+          </div>
+          <el-button
+            type="primary"
+            text
+            @click="addTaskListenerParam(configForm[`task${listener.type}ListenerHeader`])"
+          >
+            <Icon icon="ep:plus" class="mr-5px" />添加一行
+          </el-button>
+        </el-form-item>
+        <el-form-item label="请求体">
+          <div
+            class="flex pt-2"
+            v-for="(item, index) in configForm[`task${listener.type}ListenerBody`]"
+            :key="index"
+          >
+            <div class="mr-2">
+              <el-form-item
+                :prop="`task${listener.type}ListenerBody.${index}.key`"
+                :rules="{
+                  required: true,
+                  message: '参数名不能为空',
+                  trigger: 'blur'
+                }"
+              >
+                <el-input class="w-160px" v-model="item.key" />
+              </el-form-item>
+            </div>
+            <div class="mr-2">
+              <el-select class="w-100px!" v-model="item.type">
+                <el-option
+                  v-for="types in LISTENER_MAP_TYPES"
+                  :key="types.value"
+                  :label="types.label"
+                  :value="types.value"
+                />
+              </el-select>
+            </div>
+            <div class="mr-2">
+              <el-form-item
+                :prop="`task${listener.type}ListenerBody.${index}.value`"
+                :rules="{
+                  required: true,
+                  message: '参数值不能为空',
+                  trigger: 'blur'
+                }"
+              >
+                <el-input
+                  v-if="item.type === ListenerParamTypeEnum.FIXED_VALUE"
+                  class="w-160px"
+                  v-model="item.value"
+                />
+              </el-form-item>
+              <el-form-item
+                :prop="`task${listener.type}ListenerBody.${index}.value`"
+                :rules="{
+                  required: true,
+                  message: '参数值不能为空',
+                  trigger: 'change'
+                }"
+              >
+                <el-select
+                  v-if="item.type === ListenerParamTypeEnum.FROM_FORM"
+                  class="w-160px!"
+                  v-model="item.value"
+                >
+                  <el-option
+                    v-for="(field, fIdx) in formFieldOptions"
+                    :key="fIdx"
+                    :label="field.title"
+                    :value="field.field"
+                    :disabled="!field.required"
+                  />
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="mr-1 flex items-center">
+              <Icon
+                icon="ep:delete"
+                :size="18"
+                @click="
+                  deleteTaskListenerParam(configForm[`task${listener.type}ListenerBody`], index)
+                "
+              />
+            </div>
+          </div>
+          <el-button
+            type="primary"
+            text
+            @click="addTaskListenerParam(configForm[`task${listener.type}ListenerBody`])"
+          >
+            <Icon icon="ep:plus" class="mr-5px" />添加一行
+          </el-button>
+        </el-form-item>
+      </div>
+    </div>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { LISTENER_MAP_TYPES, ListenerParamTypeEnum } from '../../consts'
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  },
+  formFieldOptions: {
+    type: Object,
+    required: true
+  }
+})
+const emit = defineEmits(['update:modelValue'])
+const listenerFormRef = ref()
+const configForm = computed({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue)
+  }
+})
+const taskListener = ref([
+  {
+    name: '创建任务',
+    type: 'Create'
+  },
+  {
+    name: '指派任务执行人员',
+    type: 'Assign'
+  },
+  {
+    name: '完成任务',
+    type: 'Complete'
+  }
+])
+
+const addTaskListenerParam = (arr) => {
+  arr.push({
+    key: '',
+    type: 1,
+    value: ''
+  })
+}
+const deleteTaskListenerParam = (arr, index) => {
+  arr.splice(index, 1)
+}
+
+const validate = async () => {
+  if (!listenerFormRef) return false
+  return await listenerFormRef.value.validate()
+}
+
+defineExpose({ validate })
+</script>

src/components/SimpleProcessDesignerV2/src/nodes/DelayTimerNode.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`
+        ]"
+      >
+        <div class="node-title-container">
+          <!-- TODO @芋艿 需要更换图标 -->
+          <div class="node-title-icon copy-task"><span class="iconfont icon-copy"></span></div>
+          <input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-mountedFocus
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.DELAY_TIMER_NODE) }}
+          </div>
+          <Icon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon"
+            ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
+          /></div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <DelayTimerNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import NodeHandler from '../NodeHandler.vue'
+import { useNodeName2, useWatchNode, useTaskStatusClass } from '../node'
+import DelayTimerNodeConfig from '../nodes-config/DelayTimerNodeConfig.vue'
+defineOptions({
+  name: 'DelayTimerNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined]
+}>()
+// 是否只读
+const readonly = inject<Boolean>('readonly')
+// 监控节点的变化
+const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.DELAY_TIMER_NODE)
+
+const nodeSetting = ref()
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    return
+  }
+  nodeSetting.value.showDelayTimerNodeConfig(currentNode.value)
+  nodeSetting.value.openDrawer()
+}
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode)
+}
+</script>
+
+<style lang="scss" scoped></style>

src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue

@@ -77,7 +77,7 @@ const props = defineProps({
 const currentNode = useWatchNode(props)
 // 是否只读
 const readonly = inject<Boolean>('readonly')
-const processInstance = inject<Ref<any>>('processInstance')
+const processInstance = inject<Ref<any>>('processInstance', ref({}))
 // 审批信息的弹窗显示，用于只读模式
 const dialogVisible = ref(false) // 弹窗可见性
 const processInstanceInfos = ref<any[]>([]) // 流程的审批信息

src/components/SimpleProcessDesignerV2/src/nodes/RouterNode.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`
+        ]"
+      >
+        <div class="node-title-container">
+          <!-- TODO @芋艿 需要更换一下iconfont的图标 -->
+          <div class="node-title-icon copy-task">
+            <span class="iconfont icon-copy"></span>
+          </div>
+          <input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-mountedFocus
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.ROUTER_BRANCH_NODE) }}
+          </div>
+          <Icon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon"
+            ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
+          /></div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <RouterNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
+  </div>
+</template>
+<script setup lang="ts">
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import NodeHandler from '../NodeHandler.vue'
+import { useNodeName2, useWatchNode, useTaskStatusClass } from '../node'
+import RouterNodeConfig from '../nodes-config/RouterNodeConfig.vue'
+
+defineOptions({
+  name: 'RouterNode'
+})
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined]
+}>()
+// 是否只读
+const readonly = inject<Boolean>('readonly')
+// 监控节点的变化
+const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.ROUTER_BRANCH_NODE)
+
+const nodeSetting = ref()
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    return
+  }
+  nodeSetting.value.showRouteNodeConfig(currentNode.value)
+  nodeSetting.value.openDrawer()
+}
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode)
+}
+</script>
+
+<style lang="scss" scoped></style>

src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue

@@ -13,7 +13,7 @@
             ><span class="iconfont icon-start-user"></span
           ></div>
           <input
-            v-if="showInput"
+            v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
             @blur="blurEvent()"
@@ -117,7 +117,7 @@ const props = defineProps({
   }
 })
 const readonly = inject<Boolean>('readonly') // 是否只读
-const tasks = inject<Ref<any[]>>('tasks')
+const tasks = inject<Ref<any[]>>('tasks', ref([]))
 // 定义事件，更新父组件。
 const emits = defineEmits<{
   'update:modelValue': [node: SimpleFlowNode | undefined]

src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue

@@ -131,7 +131,7 @@ const emits = defineEmits<{
 
 // 是否只读
 const readonly = inject<Boolean>('readonly')
-const tasks = inject<Ref<any[]>>('tasks')
+const tasks = inject<Ref<any[]>>('tasks', ref([]))
 // 监控节点变化
 const currentNode = useWatchNode(props)
 // 节点名称编辑

src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue

@@ -308,28 +308,6 @@ const props = defineProps({
   }
 })
 
-// 监听value变化,重新加载流程图
-watch(
-  () => props.value,
-  (newValue) => {
-    if (newValue && bpmnModeler) {
-      createNewDiagram(newValue)
-    }
-  },
-  { immediate: true }
-)
-
-// 监听processId和processName变化
-watch(
-  [() => props.processId, () => props.processName],
-  ([newId, newName]) => {
-    if (newId && newName && !props.value) {
-      createNewDiagram(null)
-    }
-  },
-  { immediate: true }
-)
-
 provide('configGlobal', props)
 let bpmnModeler: any = null
 const defaultZoom = ref(1)
@@ -480,6 +458,7 @@ const initModelListeners = () => {
       emit('commandStack-changed', event)
       emit('input', xml)
       emit('change', xml)
+      emit('save', xml)
     } catch (e: any) {
       console.error(`[Process Designer Warn]: ${e.message || e}`)
     }
@@ -568,6 +547,7 @@ const importLocalFile = () => {
   reader.onload = function () {
     let xmlStr = this.result
     createNewDiagram(xmlStr)
+    emit('save', xmlStr)
   }
 }
 /* ------------------------------------------------ refs methods ------------------------------------------------------ */

src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json

@@ -1438,6 +1438,31 @@
           "isBody": true
         }
       ]
+    },
+    {
+      "name": "SignEnable",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Boolean",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "SkipExpression",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "skipExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
     }
   ],
   "emumerations": []

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`, maxHeight: '600px' }">
     <el-collapse v-model="activeTab" v-if="isReady">
       <el-collapse-item name="base">
         <!-- class="panel-tab__title" -->

src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue

@@ -152,6 +152,9 @@ watch(
       handleKeyUpdate(props.model.key)
       handleNameUpdate(props.model.name)
     }
+  },
+  {
+    immediate: true
   }
 )
 

src/components/bpmnProcessDesigner/package/penal/custom-config/components/UserTaskCustomConfig.vue

@@ -5,6 +5,7 @@
      4. 操作按钮
      5. 字段权限
      6. 审批类型
+     7. 是否需要签名
 -->
 <template>
   <div>
@@ -161,6 +162,11 @@
         </el-radio-group>
       </div>
     </div>
+
+    <el-divider content-position="left">是否需要签名</el-divider>
+    <el-form-item prop="signEnable">
+      <el-switch v-model="signEnable.value" active-text="是" inactive-text="否" />
+    </el-form-item>
   </div>
 </template>
 
@@ -218,6 +224,9 @@ const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFie
 // 审批类型
 const approveType = ref({ value: ApproveType.USER })
 
+// 是否需要签名
+const signEnable = ref({ value: false })
+
 const elExtensionElements = ref()
 const otherExtensions = ref()
 const bpmnElement = ref()
@@ -325,6 +334,11 @@ const resetCustomConfigList = () => {
         ex.$type !== `${prefix}:ApproveType`
     ) ?? []
 
+  // 是否需要签名
+  signEnable.value =
+    elExtensionElements.value.values?.filter((ex) => ex.$type === `${prefix}:SignEnable`)?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:SignEnable`, { value: false })
+
   // 更新元素扩展属性，避免后续报错
   updateElementExtensions()
 }
@@ -373,7 +387,8 @@ const updateElementExtensions = () => {
       assignEmptyUserIdsEl.value,
       approveType.value,
       ...buttonsSettingEl.value,
-      ...fieldsPermissionEl.value
+      ...fieldsPermissionEl.value,
+      signEnable.value
     ]
   })
   bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {

src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue

@@ -192,6 +192,16 @@
       <!-- 选择弹窗 -->
       <ProcessExpressionDialog ref="processExpressionDialogRef" @select="selectProcessExpression" />
     </el-form-item>
+
+    <el-form-item label="跳过表达式" prop="skipExpression">
+      <el-input
+        type="textarea"
+        v-model="userTaskForm.skipExpression"
+        clearable
+        style="width: 100%"
+        @change="updateSkipExpression"
+      />
+    </el-form-item>
   </el-form>
 </template>
 
@@ -220,7 +230,8 @@ const props = defineProps({
 const prefix = inject('prefix')
 const userTaskForm = ref({
   candidateStrategy: undefined, // 分配规则
-  candidateParam: [] // 分配选项
+  candidateParam: [], // 分配选项
+  skipExpression: '' // 跳过表达式
 })
 const bpmnElement = ref()
 const bpmnInstances = () => (window as any)?.bpmnInstances
@@ -311,6 +322,13 @@ const resetTaskForm = () => {
       (ex) => ex.$type !== `${prefix}:CandidateStrategy` && ex.$type !== `${prefix}:CandidateParam`
     ) ?? []
 
+  // 跳过表达式
+  if (businessObject.skipExpression != undefined) {
+    userTaskForm.value.skipExpression = businessObject.skipExpression
+  } else {
+    userTaskForm.value.skipExpression = ''
+  }
+
   // 改用通过extensionElements来存储数据
   return
   if (businessObject.candidateStrategy != undefined) {
@@ -390,6 +408,18 @@ const updateElementTask = () => {
   })
 }
 
+const updateSkipExpression = () => {
+  if (userTaskForm.value.skipExpression && userTaskForm.value.skipExpression !== '') {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      skipExpression: userTaskForm.value.skipExpression
+    })
+  } else {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      skipExpression: null
+    })
+  }
+}
+
 // 打开监听器弹窗
 const processExpressionDialogRef = ref()
 const openProcessExpressionDialog = async () => {

src/components/bpmnProcessDesigner/package/theme/process-designer.scss

@@ -1,6 +1,4 @@
 @use 'bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css';
-@use 'bpmn-js-token-simulation/assets/css/font-awesome.min.css';
-@use 'bpmn-js-token-simulation/assets/css/normalize.css';
 
 // 边框被 token-simulation 样式覆盖了
 .djs-palette {
@@ -97,12 +95,12 @@
         box-sizing: border-box;
       }
     }
-    svg {
-      width: 100%;
-      height: 100%;
-      min-height: 100%;
-      overflow: hidden;
-    }
+    // svg {
+    //   width: 100%;
+    //   height: 100%;
+    //   min-height: 100%;
+    //   overflow: hidden;
+    // }
   }
 }
 

src/directives/permission/hasPermi.ts

@@ -5,18 +5,10 @@ const { t } = useI18n() // 国际化
 
 export function hasPermi(app: App<Element>) {
   app.directive('hasPermi', (el, binding) => {
-    const { wsCache } = useCache()
     const { value } = binding
-    const all_permission = '*:*:*'
-    const userInfo = wsCache.get(CACHE_KEY.USER)
-    const permissions = userInfo?.permissions || []
 
     if (value && value instanceof Array && value.length > 0) {
-      const permissionFlag = value
-
-      const hasPermissions = permissions.some((permission: string) => {
-        return all_permission === permission || permissionFlag.includes(permission)
-      })
+      const hasPermissions = hasPermission(value)
 
       if (!hasPermissions) {
         el.parentNode && el.parentNode.removeChild(el)
@@ -26,3 +18,14 @@ export function hasPermi(app: App<Element>) {
     }
   })
 }
+
+export const hasPermission = (permission: string[]) => {
+  const { wsCache } = useCache()
+  const all_permission = '*:*:*'
+  const userInfo = wsCache.get(CACHE_KEY.USER)
+  const permissions = userInfo?.permissions || []
+
+  return permissions.some((p: string) => {
+    return all_permission === p || permission.includes(p)
+  })
+}

src/layout/components/Footer/src/Footer.vue

@@ -12,6 +12,9 @@ const prefixCls = getPrefixCls('footer')
 const appStore = useAppStore()
 
 const title = computed(() => appStore.getTitle)
+
+// 添加当前年份计算属性
+const currentYear = computed(() => new Date().getFullYear())
 </script>
 
 <template>
@@ -19,6 +22,6 @@ const title = computed(() => appStore.getTitle)
     :class="prefixCls"
     class="h-[var(--app-footer-height)] bg-[var(--app-content-bg-color)] text-center leading-[var(--app-footer-height)] text-[var(--el-text-color-placeholder)] dark:bg-[var(--el-bg-color)] overflow-hidden"
   >
-    <span class="text-14px">Copyright ©2022-{{ title }}</span>
+    <span class="text-14px">Copyright ©{{ currentYear }} {{ title }}</span>
   </div>
 </template>

src/layout/components/TagsView/src/TagsView.vue

@@ -12,6 +12,10 @@ import { useDesign } from '@/hooks/web/useDesign'
 import { useTemplateRefsList } from '@vueuse/core'
 import { ElScrollbar } from 'element-plus'
 import { useScrollTo } from '@/hooks/event/useScrollTo'
+import { useTagsView } from '@/hooks/web/useTagsView'
+import { cloneDeep } from 'lodash-es'
+
+defineOptions({ name: 'TagsView' })
 
 const { getPrefixCls } = useDesign()
 
@@ -19,7 +23,9 @@ const prefixCls = getPrefixCls('tags-view')
 
 const { t } = useI18n()
 
-const { currentRoute, push, replace } = useRouter()
+const { currentRoute, push } = useRouter()
+
+const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage } = useTagsView()
 
 const permissionStore = usePermissionStore()
 
@@ -31,6 +37,10 @@ const visitedViews = computed(() => tagsViewStore.getVisitedViews)
 
 const affixTagArr = ref<RouteLocationNormalizedLoaded[]>([])
 
+const selectedTag = computed(() => tagsViewStore.getSelectedTag)
+
+const setSelectTag = tagsViewStore.setSelectedTag
+
 const appStore = useAppStore()
 
 const tagsViewImmerse = computed(() => appStore.getTagsViewImmerse)
@@ -45,82 +55,73 @@ const initTags = () => {
   for (const tag of unref(affixTagArr)) {
     // Must have tag name
     if (tag.name) {
-      tagsViewStore.addVisitedView(tag)
+      tagsViewStore.addVisitedView(cloneDeep(tag))
     }
   }
 }
 
-const selectedTag = ref<RouteLocationNormalizedLoaded>()
-
 // 新增tag
 const addTags = () => {
   const { name } = unref(currentRoute)
   if (name) {
-    selectedTag.value = unref(currentRoute)
+    setSelectTag(unref(currentRoute))
     tagsViewStore.addView(unref(currentRoute))
   }
-  return false
 }
 
 // 关闭选中的tag
 const closeSelectedTag = (view: RouteLocationNormalizedLoaded) => {
-  if (view?.meta?.affix) return
-  tagsViewStore.delView(view)
-  if (isActive(view)) {
-    toLastView()
+  closeCurrent(view, () => {
+    if (isActive(view)) {
+      toLastView()
+    }
+  })
+}
+
+// 去最后一个
+const toLastView = () => {
+  const visitedViews = tagsViewStore.getVisitedViews
+  const latestView = visitedViews.slice(-1)[0]
+  if (latestView) {
+    push(latestView)
+  } else {
+    if (
+      unref(currentRoute).path === permissionStore.getAddRouters[0].path ||
+      unref(currentRoute).path === permissionStore.getAddRouters[0].redirect
+    ) {
+      addTags()
+      return
+    }
+    // You can set another route
+    push(permissionStore.getAddRouters[0].path)
   }
 }
 
 // 关闭全部
 const closeAllTags = () => {
-  tagsViewStore.delAllViews()
-  toLastView()
+  closeAll(() => {
+    toLastView()
+  })
 }
 
 // 关闭其它
 const closeOthersTags = () => {
-  tagsViewStore.delOthersViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+  closeOther()
 }
 
 // 重新加载
 const refreshSelectedTag = async (view?: RouteLocationNormalizedLoaded) => {
-  if (!view) return
-  tagsViewStore.delCachedView()
-  const { path, query } = view
-  await nextTick()
-  replace({
-    path: '/redirect' + path,
-    query: query
-  })
+  refreshPage(view)
 }
 
 // 关闭左侧
 const closeLeftTags = () => {
-  tagsViewStore.delLeftViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+  closeLeft()
 }
 
 // 关闭右侧
 const closeRightTags = () => {
-  tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
-}
-
-// 跳转到最后一个
-const toLastView = () => {
-  const visitedViews = tagsViewStore.getVisitedViews
-  const latestView = visitedViews.slice(-1)[0]
-  if (latestView) {
-    push(latestView)
-  } else {
-    if (
-      unref(currentRoute).path === permissionStore.getAddRouters[0].path ||
-      unref(currentRoute).path === permissionStore.getAddRouters[0].redirect
-    ) {
-      addTags()
-      return
-    }
-    // TODO: You can set another route
-    push('/')
-  }
+  closeRight()
 }
 
 // 滚动到选中的tag
@@ -209,13 +210,14 @@ const isActive = (route: RouteLocationNormalizedLoaded): boolean => {
 // 所有右键菜单组件的元素
 const itemRefs = useTemplateRefsList<ComponentRef<typeof ContextMenu & ContextMenuExpose>>()
 
-// 右键菜单装填改变的时候
+// 右键菜单状态改变的时候
 const visibleChange = (visible: boolean, tagItem: RouteLocationNormalizedLoaded) => {
   if (visible) {
     for (const v of unref(itemRefs)) {
       const elDropdownMenuRef = v.elDropdownMenuRef
       if (tagItem.fullPath !== v.tagItem.fullPath) {
         elDropdownMenuRef?.handleClose()
+        setSelectTag(tagItem)
       }
     }
   }
@@ -243,7 +245,17 @@ const move = (to: number) => {
   start()
 }
 
-onMounted(() => {
+const canShowIcon = (item: RouteLocationNormalizedLoaded) => {
+  if (
+    (item?.matched?.[1]?.meta?.icon && unref(tagsViewIcon)) ||
+    (item?.meta?.affix && unref(tagsViewIcon) && item?.meta?.icon)
+  ) {
+    return true
+  }
+  return false
+}
+
+onBeforeMount(() => {
   initTags()
   addTags()
 })

src/layout/components/useRenderLayout.tsx

@@ -197,7 +197,7 @@ export const useRenderLayout = () => {
               `${prefixCls}-content-scrollbar`,
               {
                 '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
-                  fixedHeader.value
+                  fixedHeader.value && tagsView.value
               }
             ]}
           >

src/locales/en.ts

@@ -140,7 +140,10 @@ export default {
     btnQRCode: 'QR code sign in',
     qrcode: 'Scan the QR code to log in',
     btnRegister: 'Sign up',
-    SmsSendMsg: 'code has been sent'
+    SmsSendMsg: 'code has been sent',
+    resetPassword: "Reset Password",
+    resetPasswordSuccess: "Reset Password Success",
+    invalidTenantName:"Invalid Tenant Name"
   },
   captcha: {
     verification: 'Please complete security verification',

src/locales/zh-CN.ts

@@ -141,7 +141,10 @@ export default {
     btnQRCode: '二维码登录',
     qrcode: '扫描二维码登录',
     btnRegister: '注册',
-    SmsSendMsg: '验证码已发送'
+    SmsSendMsg: '验证码已发送',
+    resetPassword: "重置密码",
+    resetPasswordSuccess: "重置密码成功",
+    invalidTenantName: "无效的租户名称"
   },
   captcha: {
     verification: '请完成安全验证',

src/router/modules/remaining.ts

@@ -344,7 +344,8 @@ const remainingRouter: AppRouteRecordRaw[] = [
         }
       },
       {
-        path: 'manager/model/update/:id',
+        // TODO @zws：1）建议，在加一个路由。然后标题是“复制流程”，这样体验会好点；2）复制出来的数据，在名字前面，加“副本 ”，和钉钉保持一致！
+        path: 'manager/model/:type/:id',
         component: () => import('@/views/bpm/model/form/index.vue'),
         name: 'BpmModelUpdate',
         meta: {

src/store/modules/tagsView.ts

@@ -4,16 +4,19 @@ import { getRawRoute } from '@/utils/routerHelper'
 import { defineStore } from 'pinia'
 import { store } from '../index'
 import { findIndex } from '@/utils'
+import { useUserStoreWithOut } from './user'
 
 export interface TagsViewState {
   visitedViews: RouteLocationNormalizedLoaded[]
   cachedViews: Set<string>
+  selectedTag?: RouteLocationNormalizedLoaded
 }
 
 export const useTagsViewStore = defineStore('tagsView', {
   state: (): TagsViewState => ({
     visitedViews: [],
-    cachedViews: new Set()
+    cachedViews: new Set(),
+    selectedTag: undefined
   }),
   getters: {
     getVisitedViews(): RouteLocationNormalizedLoaded[] {
@@ -21,6 +24,9 @@ export const useTagsViewStore = defineStore('tagsView', {
     },
     getCachedViews(): string[] {
       return Array.from(this.cachedViews)
+    },
+    getSelectedTag(): RouteLocationNormalizedLoaded | undefined {
+      return this.selectedTag
     }
   },
   actions: {
@@ -98,8 +104,12 @@ export const useTagsViewStore = defineStore('tagsView', {
     },
     // 删除所有tag
     delAllVisitedViews() {
+      const userStore = useUserStoreWithOut()
+
       // const affixTags = this.visitedViews.filter((tag) => tag.meta.affix)
-      this.visitedViews = []
+      this.visitedViews = userStore.getUser
+        ? this.visitedViews.filter((tag) => tag?.meta?.affix)
+        : []
     },
     // 删除其他
     delOthersViews(view: RouteLocationNormalizedLoaded) {
@@ -145,6 +155,18 @@ export const useTagsViewStore = defineStore('tagsView', {
           break
         }
       }
+    },
+    // 设置当前选中的 tag
+    setSelectedTag(tag: RouteLocationNormalizedLoaded) {
+      this.selectedTag = tag
+    },
+    setTitle(title: string, path?: string) {
+      for (const v of this.visitedViews) {
+        if (v.path === (path ?? this.selectedTag?.path)) {
+          v.meta.title = title
+          break
+        }
+      }
     }
   },
   persist: false

src/utils/download.ts

@@ -33,6 +33,10 @@ const download = {
   markdown: (data: Blob, fileName: string) => {
     download0(data, fileName, 'text/markdown')
   },
+  // 下载 Json 方法
+  json: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/json')
+  },
   // 下载图片（允许跨域）
   image: ({
     url,
@@ -65,6 +69,31 @@ const download = {
       a.download = 'image.png'
       a.click()
     }
+  },
+  base64ToFile: (base64: any, fileName: string) => {
+    // 将base64按照 , 进行分割 将前缀  与后续内容分隔开
+    const data = base64.split(',')
+    // 利用正则表达式 从前缀中获取图片的类型信息（image/png、image/jpeg、image/webp等）
+    const type = data[0].match(/:(.*?);/)[1]
+    // 从图片的类型信息中 获取具体的文件格式后缀（png、jpeg、webp）
+    const suffix = type.split('/')[1]
+    // 使用atob()对base64数据进行解码  结果是一个文件数据流 以字符串的格式输出
+    const bstr = window.atob(data[1])
+    // 获取解码结果字符串的长度
+    let n = bstr.length
+    // 根据解码结果字符串的长度创建一个等长的整形数字数组
+    // 但在创建时 所有元素初始值都为 0
+    const u8arr = new Uint8Array(n)
+    // 将整形数组的每个元素填充为解码结果字符串对应位置字符的UTF-16 编码单元
+    while (n--) {
+      // charCodeAt()：获取给定索引处字符对应的 UTF-16 代码单元
+      u8arr[n] = bstr.charCodeAt(n)
+    }
+
+    // 将File文件对象返回给方法的调用者
+    return new File([u8arr], `${fileName}.${suffix}`, {
+      type: type
+    })
   }
 }
 

src/utils/routerHelper.ts

@@ -73,7 +73,7 @@ export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecord
       noCache: !route.keepAlive,
       alwaysShow:
         route.children &&
-        route.children.length === 1 &&
+        route.children.length > 0 &&
         (route.alwaysShow !== undefined ? route.alwaysShow : true)
     } as any
     // 特殊逻辑：如果后端配置的 MenuDO.component 包含 ?，则表示需要传递参数
@@ -100,7 +100,6 @@ export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecord
     //处理顶级非目录路由
     if (!route.children && route.parentId == 0 && route.component) {
       data.component = Layout
-      data.meta = {}
       data.name = toCamelCase(route.path, true) + 'Parent'
       data.redirect = ''
       meta.alwaysShow = true

src/utils/tree.ts

@@ -376,6 +376,9 @@ export const treeToString = (tree: any[], nodeId) => {
   let str = ''
 
   function performAThoroughValidation(arr) {
+    if (typeof arr === 'undefined' || !Array.isArray(arr) || arr.length === 0) {
+      return false
+    }
     for (const item of arr) {
       if (item.id === nodeId) {
         str += ` / ${item.name}`

src/views/Login/Login.vue

@@ -59,6 +59,8 @@
             <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
             <!-- 三方登录 -->
             <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
+            <!-- 忘记密码 -->
+            <ForgetPasswordForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
           </div>
         </Transition>
       </div>
@@ -73,7 +75,7 @@ import { useAppStore } from '@/store/modules/app'
 import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
 import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
 
-import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue } from './components'
+import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue, ForgetPasswordForm } from './components'
 
 defineOptions({ name: 'Login' })
 

src/views/Login/SocialLogin.vue

@@ -133,6 +133,7 @@
                   </el-form-item>
                 </el-col>
                 <Verify
+                  v-if="loginData.captchaEnable === 'true'"
                   ref="verify"
                   :captchaType="captchaType"
                   :imgSize="{ width: '400px', height: '200px' }"

src/views/Login/components/ForgetPasswordForm.vue

@@ -0,0 +1,278 @@
+<template>
+  <el-form
+    v-show="getShow"
+    ref="formSmsResetPassword"
+    :model="resetPasswordData"
+    :rules="rules"
+    class="login-form"
+    label-position="top"
+    label-width="120px"
+    size="large"
+  >
+    <el-row style="margin-right: -10px; margin-left: -10px">
+      <!-- 租户名 -->
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <LoginFormTitle style="width: 100%" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item v-if="resetPasswordData.tenantEnable === 'true'" prop="tenantName">
+          <el-input
+            v-model="resetPasswordData.tenantName"
+            :placeholder="t('login.tenantNamePlaceholder')"
+            :prefix-icon="iconHouse"
+            type="primary"
+            link
+          />
+        </el-form-item>
+      </el-col>
+      <!-- 手机号 -->
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="mobile">
+          <el-input
+            v-model="resetPasswordData.mobile"
+            :placeholder="t('login.mobileNumberPlaceholder')"
+            :prefix-icon="iconCellphone"
+          />
+        </el-form-item>
+      </el-col>
+      <Verify
+        ref="verify"
+        :captchaType="captchaType"
+        :imgSize="{ width: '400px', height: '200px' }"
+        mode="pop"
+        @success="getSmsCode"
+      />
+      <!-- 验证码 -->
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="code">
+          <el-row :gutter="5" justify="space-between" style="width: 100%">
+            <el-col :span="24">
+              <el-input
+                v-model="resetPasswordData.code"
+                :placeholder="t('login.codePlaceholder')"
+                :prefix-icon="iconCircleCheck"
+              >
+                <template #append>
+                  <span
+                    v-if="mobileCodeTimer <= 0"
+                    class="getMobileCode"
+                    style="cursor: pointer"
+                    @click="getCode"
+                  >
+                    {{ t('login.getSmsCode') }}
+                  </span>
+                  <span v-if="mobileCodeTimer > 0" class="getMobileCode" style="cursor: pointer">
+                    {{ mobileCodeTimer }}秒后可重新获取
+                  </span>
+                </template>
+              </el-input>
+              <!-- </el-button> -->
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="password">
+          <InputPassword
+            v-model="resetPasswordData.password"
+            :placeholder="t('login.passwordPlaceholder')"
+            style="width: 100%"
+            strength="true"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="check_password">
+          <InputPassword
+            v-model="resetPasswordData.check_password"
+            :placeholder="t('login.checkPassword')"
+            style="width: 100%"
+            strength="true"
+          />
+        </el-form-item>
+      </el-col>
+      <!-- 登录按钮 / 返回按钮 -->
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <XButton
+            :loading="loginLoading"
+            :title="t('login.resetPassword')"
+            class="w-[100%]"
+            type="primary"
+            @click="resetPassword()"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <XButton
+            :loading="loginLoading"
+            :title="t('login.backLogin')"
+            class="w-[100%]"
+            @click="handleBackLogin()"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script lang="ts" setup>
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+import { useIcon } from '@/hooks/web/useIcon'
+
+import { sendSmsCode, smsResetPassword } from '@/api/login'
+import LoginFormTitle from './LoginFormTitle.vue'
+import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
+import { ElLoading } from 'element-plus'
+import * as authUtil from '@/utils/auth'
+import * as LoginApi from '@/api/login'
+defineOptions({ name: 'ForgetPasswordForm' })
+const verify = ref()
+
+const { t } = useI18n()
+const message = useMessage()
+const { currentRoute, push } = useRouter()
+const formSmsResetPassword = ref()
+const loginLoading = ref(false)
+const iconHouse = useIcon({ icon: 'ep:house' })
+const iconCellphone = useIcon({ icon: 'ep:cellphone' })
+const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
+const { validForm } = useFormValid(formSmsResetPassword)
+const { handleBackLogin, getLoginState, setLoginState } = useLoginState()
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD)
+const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
+
+const validatePass2 = (rule, value, callback) => {
+  if (value === '') {
+    callback(new Error('请再次输入密码'))
+  } else if (value !== resetPasswordData.password) {
+    callback(new Error('两次输入密码不一致!'))
+  } else {
+    callback()
+  }
+}
+
+const rules = {
+  tenantName: [{ required: true, min: 2, max: 20, trigger: 'blur', message: '长度为4到16位' }],
+  mobile: [{ required: true, min: 11, max: 11, trigger: 'blur', message: '手机号长度为11位' }],
+  password: [
+    {
+      required: true,
+      min: 4,
+      max: 16,
+      validator: validatePass2,
+      trigger: 'blur',
+      message: '密码长度为4到16位'
+    }
+  ],
+  check_password: [{ required: true, validator: validatePass2, trigger: 'blur' }],
+  code: [required]
+}
+
+const resetPasswordData = reactive({
+  captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
+  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
+  tenantName: '',
+  username: '',
+  password: '',
+  check_password: '',
+  mobile: '',
+  code: ''
+})
+
+const smsVO = reactive({
+  tenantName: '',
+  mobile: '',
+  captchaVerification: '',
+  scene: 23
+})
+const mobileCodeTimer = ref(0)
+const redirect = ref<string>('')
+
+// 获取验证码
+const getCode = async () => {
+  // 情况一，未开启：则直接发送验证码
+  if (resetPasswordData.captchaEnable === 'false') {
+    await getSmsCode({})
+  } else {
+    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行发送验证码
+    // 弹出验证码
+    verify.value.show()
+  }
+}
+
+const getSmsCode = async (params) => {
+  if (resetPasswordData.tenantEnable === 'true') {
+    await getTenantId()
+  }
+  smsVO.captchaVerification = params.captchaVerification
+  smsVO.mobile = resetPasswordData.mobile
+  await sendSmsCode(smsVO).then(async () => {
+    message.success(t('login.SmsSendMsg'))
+    // 设置倒计时
+    mobileCodeTimer.value = 60
+    let msgTimer = setInterval(() => {
+      mobileCodeTimer.value = mobileCodeTimer.value - 1
+      if (mobileCodeTimer.value <= 0) {
+        clearInterval(msgTimer)
+      }
+    }, 1000)
+  })
+}
+watch(
+  () => currentRoute.value,
+  (route: RouteLocationNormalizedLoaded) => {
+    redirect.value = route?.query?.redirect as string
+  },
+  {
+    immediate: true
+  }
+)
+
+const getTenantId = async () => {
+  if (resetPasswordData.tenantEnable === 'true') {
+    const res = await LoginApi.getTenantIdByName(resetPasswordData.tenantName)
+    if (res == null) {
+      message.error(t('login.invalidTenantName'))
+      throw t('login.invalidTenantName')
+    }
+    authUtil.setTenantId(res)
+  }
+}
+
+// 重置密码
+const resetPassword = async () => {
+  const data = await validForm()
+  if (!data) return
+  await getTenantId()
+  loginLoading.value = true
+  await smsResetPassword(resetPasswordData)
+    .then(async () => {
+      message.success(t('login.resetPasswordSuccess'))
+      setLoginState(LoginStateEnum.LOGIN)
+    })
+    .catch(() => {})
+    .finally(() => {
+      loginLoading.value = false
+      setTimeout(() => {
+        const loadingInstance = ElLoading.service()
+        loadingInstance.close()
+      }, 400)
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.anticon) {
+  &:hover {
+    color: var(--el-color-primary) !important;
+  }
+}
+
+.smsbtn {
+  margin-top: 33px;
+}
+</style>

src/views/Login/components/LoginForm.vue

@@ -59,7 +59,13 @@
               </el-checkbox>
             </el-col>
             <el-col :offset="6" :span="12">
-              <el-link style="float: right" type="primary">{{ t('login.forgetPassword') }}</el-link>
+              <el-link
+                style="float: right"
+                type="primary"
+                @click="setLoginState(LoginStateEnum.RESET_PASSWORD)"
+              >
+                {{ t('login.forgetPassword') }}
+              </el-link>
             </el-col>
           </el-row>
         </el-form-item>
@@ -76,6 +82,7 @@
         </el-form-item>
       </el-col>
       <Verify
+        v-if="loginData.captchaEnable === 'true'"
         ref="verify"
         :captchaType="captchaType"
         :imgSize="{ width: '400px', height: '200px' }"
@@ -241,7 +248,7 @@ const getTenantByWebsite = async () => {
 }
 const loading = ref() // ElLoading.service 返回的实例
 // 登录
-const handleLogin = async (params) => {
+const handleLogin = async (params: any) => {
   loginLoading.value = true
   try {
     await getTenantId()
@@ -273,7 +280,7 @@ const handleLogin = async (params) => {
     if (redirect.value.indexOf('sso') !== -1) {
       window.location.href = window.location.href.replace('/login?redirect=', '')
     } else {
-      push({ path: redirect.value || permissionStore.addRouters[0].path })
+      await push({ path: redirect.value || permissionStore.addRouters[0].path })
     }
   } finally {
     loginLoading.value = false
@@ -313,8 +320,7 @@ const doSocialLogin = async (type: number) => {
       encodeURIComponent(`type=${type}&redirect=${redirect.value || '/'}`)
 
     // 进行跳转
-    const res = await LoginApi.socialAuthRedirect(type, encodeURIComponent(redirectUri))
-    window.location.href = res
+    window.location.href = await LoginApi.socialAuthRedirect(type, encodeURIComponent(redirectUri))
   }
 }
 watch(

src/views/Login/components/RegisterForm.vue

@@ -85,6 +85,7 @@
         </el-form-item>
       </el-col>
       <Verify
+        v-if="registerData.captchaEnable === 'true'"
         ref="verify"
         :captchaType="captchaType"
         :imgSize="{ width: '400px', height: '200px' }"

src/views/Login/components/index.ts

@@ -4,5 +4,6 @@ import LoginFormTitle from './LoginFormTitle.vue'
 import RegisterForm from './RegisterForm.vue'
 import QrCodeForm from './QrCodeForm.vue'
 import SSOLoginVue from './SSOLogin.vue'
+import ForgetPasswordForm from './ForgetPasswordForm.vue'
 
-export { LoginForm, MobileForm, LoginFormTitle, RegisterForm, QrCodeForm, SSOLoginVue }
+export { LoginForm, MobileForm, LoginFormTitle, RegisterForm, QrCodeForm, SSOLoginVue, ForgetPasswordForm }

src/views/bpm/model/CategoryDraggableModel.vue

@@ -64,6 +64,7 @@
       </div>
     </div>
   </div>
+
   <!-- 模型列表 -->
   <el-collapse-transition>
     <div v-show="isExpand">
@@ -90,7 +91,7 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="可见范围" prop="startUserIds" min-width="100">
+        <el-table-column label="可见范围" prop="startUserIds" min-width="150">
           <template #default="scope">
             <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
               全部可见
@@ -110,7 +111,7 @@
             </el-text>
           </template>
         </el-table-column>
-        <el-table-column label="表单信息" prop="formType" min-width="200">
+        <el-table-column label="表单信息" prop="formType" min-width="150">
           <template #default="scope">
             <el-button
               v-if="scope.row.formType === BpmModelFormType.NORMAL"
@@ -164,13 +165,12 @@
             </el-button>
             <el-button
               link
-              class="!ml-5px"
               type="primary"
-              @click="handleDesign(scope.row)"
+              @click="openModelForm('copy', scope.row.id)"
               v-hasPermi="['bpm:model:update']"
               :disabled="!isManagerUser(scope.row)"
             >
-              设计
+              复制
             </el-button>
             <el-button
               link
@@ -203,6 +203,14 @@
                   >
                     {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
                   </el-dropdown-item>
+                  <el-dropdown-item
+                    type="danger"
+                    command="handleClean"
+                    v-if="checkPermi(['bpm:model:clean'])"
+                    :disabled="!isManagerUser(scope.row)"
+                  >
+                    清理
+                  </el-dropdown-item>
                   <el-dropdown-item
                     type="danger"
                     command="handleDelete"
@@ -235,13 +243,9 @@
       </div>
     </template>
   </Dialog>
-
-  <!-- 表单弹窗：添加流程模型 -->
-  <ModelForm :categoryId="categoryInfo.code" ref="modelFormRef" @success="emit('success')" />
 </template>
 
 <script lang="ts" setup>
-import ModelForm from './ModelForm.vue'
 import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import Sortable from 'sortablejs'
 import { propTypes } from '@/utils/propTypes'
@@ -254,6 +258,7 @@ import { checkPermi } from '@/utils/permission'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { useAppStore } from '@/store/modules/app'
 import { cloneDeep } from 'lodash-es'
+import { useTagsView } from '@/hooks/web/useTagsView'
 
 defineOptions({ name: 'BpmModel' })
 
@@ -285,6 +290,9 @@ const handleModelCommand = (command: string, row: any) => {
     case 'handleChangeState':
       handleChangeState(row)
       break
+    case 'handleClean':
+      handleClean(row)
+      break
     default:
       break
   }
@@ -318,6 +326,19 @@ const handleDelete = async (row: any) => {
   } catch {}
 }
 
+/** 清理按钮操作 */
+const handleClean = async (row: any) => {
+  try {
+    // 清理的二次确认
+    await message.confirm('是否确认清理流程名字为"' + row.name + '"的数据项?')
+    // 发起清理
+    await ModelApi.cleanModel(row.id)
+    message.success('清理成功')
+    // 刷新列表
+    emit('success')
+  } catch {}
+}
+
 /** 更新状态操作 */
 const handleChangeState = async (row: any) => {
   const state = row.processDefinition.suspensionState
@@ -337,14 +358,6 @@ const handleChangeState = async (row: any) => {
   } catch {}
 }
 
-/** 设计流程 */
-const handleDesign = (row: any) => {
-  push({
-    name: 'BpmModelUpdate',
-    params: { id: row.id }
-  })
-}
-
 /** 发布流程 */
 const handleDeploy = async (row: any) => {
   try {
@@ -483,15 +496,19 @@ const handleDeleteCategory = async () => {
 }
 
 /** 添加流程模型弹窗 */
-const modelFormRef = ref()
-const openModelForm = (type: string, id?: number) => {
+const tagsView = useTagsView()
+const openModelForm = async (type: string, id?: number) => {
   if (type === 'create') {
-    push({ name: 'BpmModelCreate' })
+    await push({ name: 'BpmModelCreate' })
   } else {
-    push({
+    await push({
       name: 'BpmModelUpdate',
-      params: { id }
+      params: { id, type }
     })
+    // 设置标题
+    if (type === 'copy') {
+      tagsView.setTitle('复制流程')
+    }
   }
 }
 

src/views/bpm/model/ModelForm.vue

@@ -1,440 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" :title="dialogTitle" width="600">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="流程标识" prop="key">
-        <el-input v-model="formData.key" :disabled="!!formData.id" placeholder="请输入流标标识" />
-        <el-tooltip
-          v-if="!formData.id"
-          class="item"
-          content="新建后，流程标识不可修改！"
-          effect="light"
-          placement="top"
-        >
-          <i class="el-icon-question" style="padding-left: 5px"></i>
-        </el-tooltip>
-        <el-tooltip v-else class="item" content="流程标识不可修改！" effect="light" placement="top">
-          <i class="el-icon-question" style="padding-left: 5px"></i>
-        </el-tooltip>
-      </el-form-item>
-      <el-form-item label="流程名称" prop="name">
-        <el-input
-          v-model="formData.name"
-          :disabled="!!formData.id"
-          clearable
-          placeholder="请输入流程名称"
-        />
-      </el-form-item>
-      <el-form-item label="流程分类" prop="category">
-        <el-select
-          v-model="formData.category"
-          clearable
-          placeholder="请选择流程分类"
-          style="width: 100%"
-        >
-          <el-option
-            v-for="category in categoryList"
-            :key="category.code"
-            :label="category.name"
-            :value="category.code"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="流程图标" prop="icon">
-        <UploadImg v-model="formData.icon" :limit="1" height="64px" width="64px" />
-      </el-form-item>
-      <el-form-item label="流程描述" prop="description">
-        <el-input v-model="formData.description" clearable type="textarea" />
-      </el-form-item>
-      <el-form-item label="流程类型" prop="type">
-        <el-radio-group v-model="formData.type">
-          <el-radio
-            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="表单类型" prop="formType">
-        <el-radio-group v-model="formData.formType">
-          <el-radio
-            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
-        <el-select v-model="formData.formId" clearable style="width: 100%">
-          <el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-        v-if="formData.formType === 20"
-        label="表单提交路由"
-        prop="formCustomCreatePath"
-      >
-        <el-input
-          v-model="formData.formCustomCreatePath"
-          placeholder="请输入表单提交路由"
-          style="width: 330px"
-        />
-        <el-tooltip
-          class="item"
-          content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create.vue"
-          effect="light"
-          placement="top"
-        >
-          <i class="el-icon-question" style="padding-left: 5px"></i>
-        </el-tooltip>
-      </el-form-item>
-      <el-form-item v-if="formData.formType === 20" label="表单查看地址" prop="formCustomViewPath">
-        <el-input
-          v-model="formData.formCustomViewPath"
-          placeholder="请输入表单查看的组件地址"
-          style="width: 330px"
-        />
-        <el-tooltip
-          class="item"
-          content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail.vue"
-          effect="light"
-          placement="top"
-        >
-          <i class="el-icon-question" style="padding-left: 5px"></i>
-        </el-tooltip>
-      </el-form-item>
-      <el-form-item label="是否可见" prop="visible">
-        <el-radio-group v-model="formData.visible">
-          <el-radio
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value as string"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="谁可以发起" prop="startUserType">
-        <el-select
-          v-model="formData.startUserType"
-          placeholder="请选择谁可以发起"
-          @change="handleStartUserTypeChange"
-        >
-          <el-option label="全员" :value="0" />
-          <el-option label="指定人员" :value="1" />
-          <el-option label="均不可提交" :value="2" />
-        </el-select>
-        <div v-if="formData.startUserType === 1" class="mt-2 flex flex-wrap gap-2">
-          <div
-            v-for="user in selectedStartUsers"
-            :key="user.id"
-            class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
-          >
-            <el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
-            <el-avatar class="!m-5px" :size="28" v-else>
-              {{ user.nickname.substring(0, 1) }}
-            </el-avatar>
-            {{ user.nickname }}
-            <Icon
-              icon="ep:close"
-              class="ml-2 cursor-pointer hover:text-red-500"
-              @click="handleRemoveStartUser(user)"
-            />
-          </div>
-          <el-button type="primary" link @click="openStartUserSelect">
-            <Icon icon="ep:plus" />选择人员
-          </el-button>
-        </div>
-      </el-form-item>
-      <el-form-item label="流程管理员" prop="managerUserType">
-        <el-select
-          v-model="formData.managerUserType"
-          placeholder="请选择流程管理员"
-          @change="handleManagerUserTypeChange"
-        >
-          <el-option label="全员" :value="0" />
-          <el-option label="指定人员" :value="1" />
-          <el-option label="均不可提交" :value="2" />
-        </el-select>
-        <div v-if="formData.managerUserType === 1" class="mt-2 flex flex-wrap gap-2">
-          <div
-            v-for="user in selectedManagerUsers"
-            :key="user.id"
-            class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
-          >
-            <el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
-            <el-avatar class="!m-5px" :size="28" v-else>
-              {{ user.nickname.substring(0, 1) }}
-            </el-avatar>
-            {{ user.nickname }}
-            <Icon
-              icon="ep:close"
-              class="ml-2 cursor-pointer hover:text-red-500"
-              @click="handleRemoveManagerUser(user)"
-            />
-          </div>
-          <el-button type="primary" link @click="openManagerUserSelect">
-            <Icon icon="ep:plus" />选择人员
-          </el-button>
-        </div>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-  <UserSelectForm ref="userSelectFormRef" @confirm="handleUserSelectConfirm" />
-</template>
-<script lang="ts" setup>
-import { propTypes } from '@/utils/propTypes'
-import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
-import { ElMessageBox } from 'element-plus'
-import * as ModelApi from '@/api/bpm/model'
-import * as FormApi from '@/api/bpm/form'
-import { CategoryApi, CategoryVO } from '@/api/bpm/category'
-import { BpmModelFormType, BpmModelType } from '@/utils/constants'
-import { UserVO } from '@/api/system/user'
-import * as UserApi from '@/api/system/user'
-import { useUserStoreWithOut } from '@/store/modules/user'
-import { FormVO } from '@/api/bpm/form'
-
-defineOptions({ name: 'ModelForm' })
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-const userStore = useUserStoreWithOut() // 用户信息缓存
-const props = defineProps({
-  categoryId: propTypes.number
-})
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData: any = ref({
-  id: undefined,
-  name: '',
-  key: '',
-  category: undefined,
-  icon: undefined,
-  description: '',
-  type: BpmModelType.BPMN,
-  formType: BpmModelFormType.NORMAL,
-  formId: '',
-  formCustomCreatePath: '',
-  formCustomViewPath: '',
-  visible: true,
-  startUserType: undefined,
-  managerUserType: undefined,
-  startUserIds: [],
-  managerUserIds: []
-})
-const formRules = reactive({
-  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
-  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
-  category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
-  icon: [{ required: true, message: '流程图标不能为空', trigger: 'blur' }],
-  type: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
-  formType: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
-  formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
-  formCustomCreatePath: [{ required: true, message: '表单提交路由不能为空', trigger: 'blur' }],
-  formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }],
-  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
-  managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-const formList = ref<FormVO[]>([]) // 流程表单的下拉框的数据
-const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
-const userList = ref<UserVO[]>([]) // 用户列表
-const selectedStartUsers = ref<UserVO[]>([]) // 已选择的发起人列表
-const selectedManagerUsers = ref<UserVO[]>([]) // 已选择的管理员列表
-const userSelectFormRef = ref() // 用户选择弹窗 ref
-const currentSelectType = ref<'start' | 'manager'>('start') // 当前选择的是发起人还是管理员
-
-/** 打开弹窗 */
-const open = async (type: string, id?: string) => {
-  dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
-  formType.value = type
-  resetForm()
-  // 修改时，设置数据
-  if (id) {
-    formLoading.value = true
-    try {
-      formData.value = await ModelApi.getModel(id)
-    } finally {
-      formLoading.value = false
-    }
-    // 加载数据时，根据已有的用户ID列表初始化已选用户
-    if (formData.value.startUserIds?.length) {
-      formData.value.startUserType = 1
-      selectedStartUsers.value = userList.value.filter((user) =>
-        formData.value.startUserIds.includes(user.id)
-      )
-    }
-    if (formData.value.managerUserIds?.length) {
-      formData.value.managerUserType = 1
-      selectedManagerUsers.value = userList.value.filter((user) =>
-        formData.value.managerUserIds.includes(user.id)
-      )
-    }
-  } else {
-    formData.value.managerUserIds.push(userStore.getUser.id)
-  }
-  // 获得流程表单的下拉框的数据
-  formList.value = await FormApi.getFormSimpleList()
-  // 查询流程分类列表
-  categoryList.value = await CategoryApi.getCategorySimpleList()
-  // 查询用户列表
-  userList.value = await UserApi.getSimpleUserList()
-  if (props.categoryId) {
-    formData.value.category = props.categoryId
-  }
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    const data = formData.value as unknown as ModelApi.ModelVO
-    if (formType.value === 'create') {
-      await ModelApi.createModel(data)
-      // 提示，引导用户做后续的操作
-      await ElMessageBox.alert(
-        '<strong>新建模型成功！</strong>后续需要执行如下 2 个步骤：' +
-          '<div>1. 点击【设计流程】按钮，绘制流程图</div>' +
-          '<div>2. 点击【发布流程】按钮，完成流程的最终发布</div>' +
-          '另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
-        '重要提示',
-        {
-          dangerouslyUseHTMLString: true,
-          type: 'success'
-        }
-      )
-    } else {
-      await ModelApi.updateModel(data)
-      message.success(t('common.updateSuccess'))
-    }
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    name: '',
-    key: '',
-    category: undefined,
-    icon: undefined,
-    description: '',
-    type: BpmModelType.BPMN,
-    formType: BpmModelFormType.NORMAL,
-    formId: '',
-    formCustomCreatePath: '',
-    formCustomViewPath: '',
-    visible: true,
-    startUserType: undefined,
-    managerUserType: undefined,
-    startUserIds: [],
-    managerUserIds: []
-  }
-  formRef.value?.resetFields()
-  selectedStartUsers.value = []
-  selectedManagerUsers.value = []
-}
-
-/** 处理发起人类型变化 */
-const handleStartUserTypeChange = (value: number) => {
-  if (value !== 1) {
-    selectedStartUsers.value = []
-    formData.value.startUserIds = []
-  }
-}
-
-/** 处理管理员类型变化 */
-const handleManagerUserTypeChange = (value: number) => {
-  if (value !== 1) {
-    selectedManagerUsers.value = []
-    formData.value.managerUserIds = []
-  }
-}
-
-/** 打开发起人选择 */
-const openStartUserSelect = () => {
-  currentSelectType.value = 'start'
-  userSelectFormRef.value.open(0, selectedStartUsers.value)
-}
-
-/** 打开管理员选择 */
-const openManagerUserSelect = () => {
-  currentSelectType.value = 'manager'
-  userSelectFormRef.value.open(0, selectedManagerUsers.value)
-}
-
-/** 处理用户选择确认 */
-const handleUserSelectConfirm = (_, users: UserVO[]) => {
-  if (currentSelectType.value === 'start') {
-    selectedStartUsers.value = users
-    formData.value.startUserIds = users.map((u) => u.id)
-  } else {
-    selectedManagerUsers.value = users
-    formData.value.managerUserIds = users.map((u) => u.id)
-  }
-}
-
-/** 移除发起人 */
-const handleRemoveStartUser = (user: UserVO) => {
-  selectedStartUsers.value = selectedStartUsers.value.filter((u) => u.id !== user.id)
-  formData.value.startUserIds = formData.value.startUserIds.filter((id: number) => id !== user.id)
-}
-
-/** 移除管理员 */
-const handleRemoveManagerUser = (user: UserVO) => {
-  selectedManagerUsers.value = selectedManagerUsers.value.filter((u) => u.id !== user.id)
-  formData.value.managerUserIds = formData.value.managerUserIds.filter(
-    (id: number) => id !== user.id
-  )
-}
-</script>
-
-<style lang="scss" scoped>
-.bg-gray-100 {
-  background-color: #f5f7fa;
-  transition: all 0.3s;
-
-  &:hover {
-    background-color: #e6e8eb;
-  }
-
-  .ep-close {
-    font-size: 14px;
-    color: #909399;
-    transition: color 0.3s;
-
-    &:hover {
-      color: #f56c6c;
-    }
-  }
-}
-</style>

src/views/bpm/model/editor/index.vue

@@ -12,10 +12,12 @@
       :additionalModel="controlForm.additionalModel"
       :model="model"
       @save="save"
+      :process-id="modelKey"
+      :process-name="modelName"
     />
     <!-- 流程属性器，负责编辑每个流程节点的属性 -->
     <MyProcessPenal
-      v-if="isModelerReady && modeler"
+      v-if="modeler"
       key="penal"
       :bpmnModeler="modeler"
       :prefix="controlForm.prefix"
@@ -37,8 +39,8 @@ defineOptions({ name: 'BpmModelEditor' })
 
 const props = defineProps<{
   modelId?: string
-  modelKey?: string
-  modelName?: string
+  modelKey: string
+  modelName: string
   value?: string
 }>()
 
@@ -51,10 +53,13 @@ const formType = ref(20)
 provide('formFields', formFields)
 provide('formType', formType)
 
-const xmlString = ref<string>('') // BPMN XML
+// 注入流程数据
+const xmlString = inject('processData') as Ref
+// 注入模型数据
+const modelData = inject('modelData') as Ref
+
 const modeler = shallowRef() // BPMN Modeler
 const processDesigner = ref()
-const isModelerReady = ref(false)
 const controlForm = ref({
   simulation: true,
   labelEditing: false,
@@ -65,154 +70,26 @@ const controlForm = ref({
 })
 const model = ref<ModelApi.ModelVO>() // 流程模型的信息
 
-// 初始化 bpmnInstances
-const initBpmnInstances = () => {
-  if (!modeler.value) return false
-  try {
-    const instances = {
-      modeler: modeler.value,
-      modeling: modeler.value.get('modeling'),
-      moddle: modeler.value.get('moddle'),
-      eventBus: modeler.value.get('eventBus'),
-      bpmnFactory: modeler.value.get('bpmnFactory'),
-      elementFactory: modeler.value.get('elementFactory'),
-      elementRegistry: modeler.value.get('elementRegistry'),
-      replace: modeler.value.get('replace'),
-      selection: modeler.value.get('selection')
-    }
-
-    // 检查所有实例是否都存在
-    return Object.values(instances).every((instance) => instance)
-  } catch (error) {
-    console.error('初始化 bpmnInstances 失败:', error)
-    return false
-  }
-}
-
 /** 初始化 modeler */
-const initModeler = async (item) => {
-  try {
-    modeler.value = item
-    // 等待 modeler 初始化完成
-    await nextTick()
-
-    // 确保 modeler 的所有实例都已经准备好
-    if (initBpmnInstances()) {
-      isModelerReady.value = true
-      emit('init-finished')
-
-      // 初始化完成后，设置初始值
-      if (props.modelId) {
-        // 编辑模式
-        const data = await ModelApi.getModel(props.modelId)
-        model.value = {
-          ...data,
-          bpmnXml: undefined // 清空 bpmnXml 属性
-        }
-        xmlString.value = data.bpmnXml || getDefaultBpmnXml(data.key, data.name)
-      } else if (props.modelKey && props.modelName) {
-        // 新建模式
-        xmlString.value = props.value || getDefaultBpmnXml(props.modelKey, props.modelName)
-        model.value = {
-          key: props.modelKey,
-          name: props.modelName
-        } as ModelApi.ModelVO
-      }
-
-      // 导入XML并刷新视图
-      await nextTick()
-      try {
-        await modeler.value.importXML(xmlString.value)
-        if (processDesigner.value?.refresh) {
-          processDesigner.value.refresh()
-        }
-      } catch (error) {
-        console.error('导入XML失败:', error)
-      }
-    } else {
-      console.error('modeler 实例未完全初始化')
-    }
-  } catch (error) {
-    console.error('初始化 modeler 失败:', error)
-  }
-}
-
-/** 获取默认的BPMN XML */
-const getDefaultBpmnXml = (key: string, name: string) => {
-  return `<?xml version="1.0" encoding="UTF-8"?>
-<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.activiti.org/processdef">
-  <process id="${key}" name="${name}" isExecutable="true" />
-  <bpmndi:BPMNDiagram id="BPMNDiagram">
-    <bpmndi:BPMNPlane id="${key}_di" bpmnElement="${key}" />
-  </bpmndi:BPMNDiagram>
-</definitions>`
+const initModeler = async (item: any) => {
+  //先初始化模型数据
+  model.value = modelData.value
+  modeler.value = item
 }
 
 /** 添加/修改模型 */
 const save = async (bpmnXml: string) => {
   try {
     xmlString.value = bpmnXml
-    if (props.modelId) {
-      // 编辑模式
-      const data = {
-        ...model.value,
-        bpmnXml: bpmnXml
-      } as unknown as ModelApi.ModelVO
-      await ModelApi.updateModelBpmn(data)
-      emit('success')
-    } else {
-      // 新建模式，直接返回XML
-      emit('success', bpmnXml)
-    }
+    emit('success', bpmnXml)
   } catch (error) {
     console.error('保存失败:', error)
     message.error('保存失败')
   }
 }
 
-// 监听 key、name 和 value 的变化
-watch(
-  [() => props.modelKey, () => props.modelName, () => props.value],
-  async ([newKey, newName, newValue]) => {
-    if (!props.modelId && isModelerReady.value) {
-      let shouldRefresh = false
-
-      if (newKey && newName) {
-        const newXml = newValue || getDefaultBpmnXml(newKey, newName)
-        if (newXml !== xmlString.value) {
-          xmlString.value = newXml
-          shouldRefresh = true
-        }
-        model.value = {
-          ...model.value,
-          key: newKey,
-          name: newName
-        } as ModelApi.ModelVO
-      } else if (newValue && newValue !== xmlString.value) {
-        xmlString.value = newValue
-        shouldRefresh = true
-      }
-
-      if (shouldRefresh) {
-        // 确保更新后重新渲染
-        await nextTick()
-        if (processDesigner.value?.refresh) {
-          try {
-            await modeler.value?.importXML(xmlString.value)
-            processDesigner.value.refresh()
-          } catch (error) {
-            console.error('导入XML失败:', error)
-          }
-        }
-      }
-    }
-  },
-  { deep: true }
-)
-
 // 在组件卸载时清理
 onBeforeUnmount(() => {
-  isModelerReady.value = false
   modeler.value = null
   // 清理全局实例
   const w = window as any
@@ -220,55 +97,6 @@ onBeforeUnmount(() => {
     w.bpmnInstances = null
   }
 })
-
-/** 获取 XML 字符串 */
-const saveXML = async () => {
-  if (!modeler.value) {
-    return { xml: xmlString.value }
-  }
-  try {
-    const result = await modeler.value.saveXML({ format: true })
-    xmlString.value = result.xml
-    return result
-  } catch (error) {
-    console.error('获取XML失败:', error)
-    return { xml: xmlString.value }
-  }
-}
-
-/** 获取SVG字符串 */
-const saveSVG = async () => {
-  if (!modeler.value) {
-    return { svg: undefined }
-  }
-  try {
-    return await modeler.value.saveSVG()
-  } catch (error) {
-    console.error('获取SVG失败:', error)
-    return { svg: undefined }
-  }
-}
-
-/** 刷新视图 */
-const refresh = async () => {
-  if (processDesigner.value?.refresh && modeler.value) {
-    try {
-      await modeler.value.importXML(xmlString.value)
-      processDesigner.value.refresh()
-    } catch (error) {
-      console.error('刷新视图失败:', error)
-    }
-  }
-}
-
-// 暴露必要的属性和方法给父组件
-defineExpose({
-  modeler,
-  isModelerReady,
-  saveXML,
-  saveSVG,
-  refresh
-})
 </script>
 <style lang="scss">
 .process-panel__container {

src/views/bpm/model/form/BasicInfo.vue

@@ -62,7 +62,7 @@
       <el-radio-group v-model="modelData.visible">
         <el-radio
           v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-          :key="dict.value"
+          :key="dict.value as string"
           :value="dict.value"
         >
           {{ dict.label }}
@@ -77,7 +77,6 @@
       >
         <el-option label="全员" :value="0" />
         <el-option label="指定人员" :value="1" />
-        <el-option label="均不可提交" :value="2" />
       </el-select>
       <div v-if="modelData.startUserType === 1" class="mt-2 flex flex-wrap gap-2">
         <div
@@ -97,21 +96,12 @@
           />
         </div>
         <el-button type="primary" link @click="openStartUserSelect">
-          <Icon icon="ep:plus" />选择人员
+          <Icon icon="ep:plus" /> 选择人员
         </el-button>
       </div>
     </el-form-item>
-    <el-form-item label="流程管理员" prop="managerUserType" class="mb-20px">
-      <el-select
-        v-model="modelData.managerUserType"
-        placeholder="请选择流程管理员"
-        @change="handleManagerUserTypeChange"
-      >
-        <el-option label="全员" :value="0" />
-        <el-option label="指定人员" :value="1" />
-        <el-option label="均不可提交" :value="2" />
-      </el-select>
-      <div v-if="modelData.managerUserType === 1" class="mt-2 flex flex-wrap gap-2">
+    <el-form-item label="流程管理员" prop="managerUserIds" class="mb-20px">
+      <div class="flex flex-wrap gap-2">
         <div
           v-for="user in selectedManagerUsers"
           :key="user.id"
@@ -142,14 +132,11 @@
 <script lang="ts" setup>
 import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
 import { UserVO } from '@/api/system/user'
+import { CategoryVO } from '@/api/bpm/category'
 
 const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true
-  },
   categoryList: {
-    type: Array,
+    type: Array as PropType<CategoryVO[]>,
     required: true
   },
   userList: {
@@ -158,8 +145,6 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['update:modelValue'])
-
 const formRef = ref()
 const selectedStartUsers = ref<UserVO[]>([])
 const selectedManagerUsers = ref<UserVO[]>([])
@@ -177,27 +162,30 @@ const rules = {
 }
 
 // 创建本地数据副本
-const modelData = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})
+const modelData = defineModel<any>()
 
 // 初始化选中的用户
 watch(
-  () => props.modelValue,
+  () => modelData.value,
   (newVal) => {
     if (newVal.startUserIds?.length) {
       selectedStartUsers.value = props.userList.filter((user: UserVO) =>
         newVal.startUserIds.includes(user.id)
       ) as UserVO[]
+    } else {
+      selectedStartUsers.value = []
     }
     if (newVal.managerUserIds?.length) {
       selectedManagerUsers.value = props.userList.filter((user: UserVO) =>
         newVal.managerUserIds.includes(user.id)
       ) as UserVO[]
+    } else {
+      selectedManagerUsers.value = []
     }
   },
-  { immediate: true }
+  {
+    immediate: true
+  }
 )
 
 /** 打开发起人选择 */
@@ -215,58 +203,42 @@ const openManagerUserSelect = () => {
 /** 处理用户选择确认 */
 const handleUserSelectConfirm = (_, users: UserVO[]) => {
   if (currentSelectType.value === 'start') {
-    selectedStartUsers.value = users
-    emit('update:modelValue', {
+    modelData.value = {
       ...modelData.value,
       startUserIds: users.map((u) => u.id)
-    })
+    }
   } else {
-    selectedManagerUsers.value = users
-    emit('update:modelValue', {
+    modelData.value = {
       ...modelData.value,
       managerUserIds: users.map((u) => u.id)
-    })
+    }
   }
 }
 
 /** 处理发起人类型变化 */
 const handleStartUserTypeChange = (value: number) => {
   if (value !== 1) {
-    selectedStartUsers.value = []
-    emit('update:modelValue', {
+    modelData.value = {
       ...modelData.value,
       startUserIds: []
-    })
-  }
-}
-
-/** 处理管理员类型变化 */
-const handleManagerUserTypeChange = (value: number) => {
-  if (value !== 1) {
-    selectedManagerUsers.value = []
-    emit('update:modelValue', {
-      ...modelData.value,
-      managerUserIds: []
-    })
+    }
   }
 }
 
 /** 移除发起人 */
 const handleRemoveStartUser = (user: UserVO) => {
-  selectedStartUsers.value = selectedStartUsers.value.filter((u) => u.id !== user.id)
-  emit('update:modelValue', {
+  modelData.value = {
     ...modelData.value,
     startUserIds: modelData.value.startUserIds.filter((id: number) => id !== user.id)
-  })
+  }
 }
 
 /** 移除管理员 */
 const handleRemoveManagerUser = (user: UserVO) => {
-  selectedManagerUsers.value = selectedManagerUsers.value.filter((u) => u.id !== user.id)
-  emit('update:modelValue', {
+  modelData.value = {
     ...modelData.value,
     managerUserIds: modelData.value.managerUserIds.filter((id: number) => id !== user.id)
-  })
+  }
 }
 
 /** 表单校验 */

src/views/bpm/model/form/FormDesign.vue

@@ -70,25 +70,16 @@ import * as FormApi from '@/api/bpm/form'
 import { setConfAndFields2 } from '@/utils/formCreate'
 
 const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true
-  },
   formList: {
     type: Array,
     required: true
   }
 })
 
-const emit = defineEmits(['update:modelValue'])
-
 const formRef = ref()
 
 // 创建本地数据副本
-const modelData = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})
+const modelData = defineModel<any>()
 
 // 表单预览数据
 const formPreview = ref({

src/views/bpm/model/form/ProcessDesign.vue

@@ -6,10 +6,7 @@
       :model-id="modelData.id"
       :model-key="modelData.key"
       :model-name="modelData.name"
-      :value="currentBpmnXml"
-      ref="bpmnEditorRef"
       @success="handleDesignSuccess"
-      @init-finished="handleEditorInit"
     />
   </template>
 
@@ -21,10 +18,7 @@
       :model-key="modelData.key"
       :model-name="modelData.name"
       :start-user-ids="modelData.startUserIds"
-      :value="currentSimpleModel"
-      ref="simpleEditorRef"
       @success="handleDesignSuccess"
-      @init-finished="handleEditorInit"
     />
   </template>
 </template>
@@ -34,137 +28,16 @@ import { BpmModelType } from '@/utils/constants'
 import BpmModelEditor from '../editor/index.vue'
 import SimpleModelDesign from '../../simple/SimpleModelDesign.vue'
 
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true
-  }
-})
-
-const emit = defineEmits(['update:modelValue', 'success'])
-
-const bpmnEditorRef = ref()
-const simpleEditorRef = ref()
-const isEditorInitialized = ref(false)
-
 // 创建本地数据副本
-const modelData = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})
-
-// 保存当前的流程XML或数据
-const currentBpmnXml = ref('')
-const currentSimpleModel = ref('')
-
-// 初始化或更新当前的XML数据
-const initOrUpdateXmlData = () => {
-  if (modelData.value) {
-    if (modelData.value.type === BpmModelType.BPMN) {
-      currentBpmnXml.value = modelData.value.bpmnXml || ''
-    } else {
-      currentSimpleModel.value = modelData.value.simpleModel || ''
-    }
-  }
-}
-
-// 监听modelValue的变化，更新数据
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    if (newVal) {
-      if (newVal.type === BpmModelType.BPMN) {
-        if (newVal.bpmnXml && newVal.bpmnXml !== currentBpmnXml.value) {
-          currentBpmnXml.value = newVal.bpmnXml
-          // 如果编辑器已经初始化，刷新视图
-          if (isEditorInitialized.value && bpmnEditorRef.value?.refresh) {
-            nextTick(() => {
-              bpmnEditorRef.value.refresh()
-            })
-          }
-        }
-      } else {
-        if (newVal.simpleModel && newVal.simpleModel !== currentSimpleModel.value) {
-          currentSimpleModel.value = newVal.simpleModel
-          // 如果编辑器已经初始化，刷新视图
-          if (isEditorInitialized.value && simpleEditorRef.value?.refresh) {
-            nextTick(() => {
-              simpleEditorRef.value.refresh()
-            })
-          }
-        }
-      }
-    }
-  },
-  { immediate: true, deep: true }
-)
-
-/** 编辑器初始化完成的回调 */
-const handleEditorInit = async () => {
-  isEditorInitialized.value = true
-
-  // 等待下一个tick，确保编辑器已经准备好
-  await nextTick()
+const modelData = defineModel<any>()
 
-  // 初始化完成后，设置初始值
-  if (modelData.value.type === BpmModelType.BPMN) {
-    if (modelData.value.bpmnXml) {
-      currentBpmnXml.value = modelData.value.bpmnXml
-      if (bpmnEditorRef.value?.refresh) {
-        await nextTick()
-        bpmnEditorRef.value.refresh()
-      }
-    }
-  } else {
-    if (modelData.value.simpleModel) {
-      currentSimpleModel.value = modelData.value.simpleModel
-      if (simpleEditorRef.value?.refresh) {
-        await nextTick()
-        simpleEditorRef.value.refresh()
-      }
-    }
-  }
-}
-
-/** 获取当前流程数据 */
-const getProcessData = async () => {
-  try {
-    if (modelData.value.type === BpmModelType.BPMN) {
-      if (!bpmnEditorRef.value || !isEditorInitialized.value) {
-        return currentBpmnXml.value || undefined
-      }
-      const { xml } = await bpmnEditorRef.value.saveXML()
-      if (xml) {
-        currentBpmnXml.value = xml
-        return xml
-      }
-    } else {
-      if (!simpleEditorRef.value || !isEditorInitialized.value) {
-        return currentSimpleModel.value || undefined
-      }
-      const flowData = await simpleEditorRef.value.getCurrentFlowData()
-      if (flowData) {
-        currentSimpleModel.value = flowData
-        return flowData
-      }
-    }
-    return modelData.value.type === BpmModelType.BPMN
-      ? currentBpmnXml.value
-      : currentSimpleModel.value
-  } catch (error) {
-    console.error('获取流程数据失败:', error)
-    return modelData.value.type === BpmModelType.BPMN
-      ? currentBpmnXml.value
-      : currentSimpleModel.value
-  }
-}
+const processData = inject('processData') as Ref
 
 /** 表单校验 */
 const validate = async () => {
   try {
     // 获取最新的流程数据
-    const processData = await getProcessData()
-    if (!processData) {
+    if (!processData.value) {
       throw new Error('请设计流程')
     }
     return true
@@ -172,27 +45,19 @@ const validate = async () => {
     throw error
   }
 }
-
 /** 处理设计器保存成功 */
 const handleDesignSuccess = async (data?: any) => {
   if (data) {
-    if (modelData.value.type === BpmModelType.BPMN) {
-      currentBpmnXml.value = data
-    } else {
-      currentSimpleModel.value = data
-    }
-
     // 创建新的对象以触发响应式更新
     const newModelData = {
       ...modelData.value,
       bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
       simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data
     }
-
     // 使用emit更新父组件的数据
     await nextTick()
-    emit('update:modelValue', newModelData)
-    emit('success', data)
+    //更新表单的模型数据部分
+    modelData.value = newModelData
   }
 }
 
@@ -200,36 +65,7 @@ const handleDesignSuccess = async (data?: any) => {
 const showDesigner = computed(() => {
   return Boolean(modelData.value?.key && modelData.value?.name)
 })
-
-// 组件创建时初始化数据
-onMounted(() => {
-  initOrUpdateXmlData()
-})
-
-// 组件卸载前保存数据
-onBeforeUnmount(async () => {
-  try {
-    // 获取并保存最新的流程数据
-    const data = await getProcessData()
-    if (data) {
-      // 创建新的对象以触发响应式更新
-      const newModelData = {
-        ...modelData.value,
-        bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
-        simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data
-      }
-
-      // 使用emit更新父组件的数据
-      await nextTick()
-      emit('update:modelValue', newModelData)
-    }
-  } catch (error) {
-    console.error('保存数据失败:', error)
-  }
-})
-
 defineExpose({
-  validate,
-  getProcessData
+  validate
 })
 </script>

src/views/bpm/model/form/index.vue

@@ -67,12 +67,7 @@
         </div>
 
         <!-- 第三步：流程设计 -->
-        <ProcessDesign
-          v-if="currentStep === 2"
-          v-model="formData"
-          ref="processDesignRef"
-          @success="handleDesignSuccess"
-        />
+        <ProcessDesign v-if="currentStep === 2" v-model="formData" ref="processDesignRef" />
       </div>
     </div>
   </ContentWrap>
@@ -83,7 +78,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useMessage } from '@/hooks/web/useMessage'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
-import { CategoryApi } from '@/api/bpm/category'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import * as UserApi from '@/api/system/user'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { BpmModelFormType, BpmModelType } from '@/utils/constants'
@@ -118,7 +113,8 @@ const validateProcess = async () => {
   await processDesignRef.value?.validate()
 }
 
-const currentStep = ref(0) // 步骤控制
+const currentStep = ref(-1) // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
+
 const steps = [
   { title: '基本信息', validator: validateBasic },
   { title: '表单设计', validator: validateForm },
@@ -140,14 +136,19 @@ const formData: any = ref({
   formCustomViewPath: '',
   visible: true,
   startUserType: undefined,
-  managerUserType: undefined,
   startUserIds: [],
   managerUserIds: []
 })
 
+//流程数据
+const processData = ref<any>()
+
+provide('processData', processData)
+provide('modelData', formData)
+
 // 数据列表
 const formList = ref([])
-const categoryList = ref([])
+const categoryList = ref<CategoryVO[]>([])
 const userList = ref<UserApi.UserVO[]>([])
 
 /** 初始化数据 */
@@ -156,8 +157,16 @@ const initData = async () => {
   if (modelId) {
     // 修改场景
     formData.value = await ModelApi.getModel(modelId)
+    formData.value.startUserType = formData.value.startUserIds?.length > 0 ? 1 : 0
+    // 复制场景
+    if (route.params.type === 'copy') {
+      delete formData.value.id
+      formData.value.name += '副本'
+      formData.value.key += '_copy'
+    }
   } else {
     // 新增场景
+    formData.value.startUserType = 0 // 全体
     formData.value.managerUserIds.push(userStore.getUser.id)
   }
 
@@ -167,59 +176,54 @@ const initData = async () => {
   categoryList.value = await CategoryApi.getCategorySimpleList()
   // 获取用户列表
   userList.value = await UserApi.getSimpleUserList()
+
+  // 最终，设置 currentStep 切换到第一步
+  currentStep.value = 0
 }
 
+/** 根据类型切换流程数据 */
+watch(
+  async () => formData.value.type,
+  () => {
+    if (formData.value.type === BpmModelType.BPMN) {
+      processData.value = formData.value.bpmnXml
+    } else if (formData.value.type === BpmModelType.SIMPLE) {
+      processData.value = formData.value.simpleModel
+    }
+    console.log('加载流程数据', processData.value)
+  },
+  {
+    immediate: true
+  }
+)
+
 /** 校验所有步骤数据是否完整 */
 const validateAllSteps = async () => {
   try {
     // 基本信息校验
-    await basicInfoRef.value?.validate()
-    if (!formData.value.key || !formData.value.name || !formData.value.category) {
+    try {
+      await validateBasic()
+    } catch (error) {
       currentStep.value = 0
       throw new Error('请完善基本信息')
     }
 
     // 表单设计校验
-    await formDesignRef.value?.validate()
-    if (formData.value.formType === 10 && !formData.value.formId) {
-      currentStep.value = 1
-      throw new Error('请选择流程表单')
-    }
-    if (
-      formData.value.formType === 20 &&
-      (!formData.value.formCustomCreatePath || !formData.value.formCustomViewPath)
-    ) {
+    try {
+      await validateForm()
+    } catch (error) {
       currentStep.value = 1
       throw new Error('请完善自定义表单信息')
     }
 
     // 流程设计校验
-    // 如果已经有流程数据，则不需要重新校验
-    if (!formData.value.bpmnXml && !formData.value.simpleModel) {
-      // 如果当前不在第三步，需要先保存当前步骤数据
-      if (currentStep.value !== 2) {
-        await steps[currentStep.value].validator()
-        // 切换到第三步
-        currentStep.value = 2
-        // 等待组件渲染完成
-        await nextTick()
-      }
-
-      // 校验流程设计
-      await processDesignRef.value?.validate()
-      const processData = await processDesignRef.value?.getProcessData()
-      if (!processData) {
-        throw new Error('请设计流程')
-      }
 
-      // 保存流程数据
-      if (formData.value.type === BpmModelType.BPMN) {
-        formData.value.bpmnXml = processData
-        formData.value.simpleModel = null
-      } else {
-        formData.value.bpmnXml = null
-        formData.value.simpleModel = processData
-      }
+    // 表单设计校验
+    try {
+      await validateProcess()
+    } catch (error) {
+      currentStep.value = 2
+      throw new Error('请设计流程')
     }
 
     return true
@@ -239,20 +243,6 @@ const handleSave = async () => {
       ...formData.value
     }
 
-    // 如果当前在第三步，获取最新的流程设计数据
-    if (currentStep.value === 2) {
-      const processData = await processDesignRef.value?.getProcessData()
-      if (processData) {
-        if (formData.value.type === BpmModelType.BPMN) {
-          modelData.bpmnXml = processData
-          modelData.simpleModel = null
-        } else {
-          modelData.bpmnXml = null
-          modelData.simpleModel = processData
-        }
-      }
-    }
-
     if (formData.value.id) {
       // 修改场景
       await ModelApi.updateModel(modelData)
@@ -308,20 +298,6 @@ const handleDeploy = async () => {
       ...formData.value
     }
 
-    // 如果当前在第三步，获取最新的流程设计数据
-    if (currentStep.value === 2) {
-      const processData = await processDesignRef.value?.getProcessData()
-      if (processData) {
-        if (formData.value.type === BpmModelType.BPMN) {
-          modelData.bpmnXml = processData
-          modelData.simpleModel = null
-        } else {
-          modelData.bpmnXml = null
-          modelData.simpleModel = processData
-        }
-      }
-    }
-
     // 先保存所有数据
     if (formData.value.id) {
       await ModelApi.updateModel(modelData)
@@ -344,60 +320,25 @@ const handleDeploy = async () => {
 /** 步骤切换处理 */
 const handleStepClick = async (index: number) => {
   try {
-    // 如果是切换到第三步（流程设计），需要校验key和name
-    if (index === 2) {
-      if (!formData.value.key || !formData.value.name) {
-        message.warning('请先填写流程标识和流程名称')
-        return
-      }
+    console.log('index', index)
+    if (index !== 0) {
+      await validateBasic()
     }
-
-    // 保存当前步骤的数据
-    if (currentStep.value === 2) {
-      const processData = await processDesignRef.value?.getProcessData()
-      if (processData) {
-        if (formData.value.type === BpmModelType.BPMN) {
-          formData.value.bpmnXml = processData
-          formData.value.simpleModel = null
-        } else {
-          formData.value.bpmnXml = null
-          formData.value.simpleModel = processData
-        }
-      }
-    } else {
-      // 只有在向后切换时才进行校验
-      if (index > currentStep.value) {
-        if (typeof steps[currentStep.value].validator === 'function') {
-          await steps[currentStep.value].validator()
-        }
-      }
+    if (index !== 1) {
+      await validateForm()
+    }
+    if (index !== 2) {
+      await validateProcess()
     }
 
     // 切换步骤
     currentStep.value = index
-
-    // 如果切换到流程设计步骤，等待组件渲染完成后刷新设计器
-    if (index === 2) {
-      await nextTick()
-      // 等待更长时间确保组件完全初始化
-      await new Promise(resolve => setTimeout(resolve, 200))
-      if (processDesignRef.value?.refresh) {
-        await processDesignRef.value.refresh()
-      }
-    }
   } catch (error) {
     console.error('步骤切换失败:', error)
     message.warning('请先完善当前步骤必填信息')
   }
 }
 
-/** 处理设计器保存成功 */
-const handleDesignSuccess = (bpmnXml?: string) => {
-  if (bpmnXml) {
-    formData.value.bpmnXml = bpmnXml
-  }
-}
-
 /** 返回列表页 */
 const handleBack = () => {
   // 先删除当前页签

src/views/bpm/model/index.vue

@@ -85,8 +85,6 @@
     </div>
   </ContentWrap>
 
-  <!-- 表单弹窗：添加/修改流程 -->
-  <ModelForm ref="formRef" @success="getList" />
   <!-- 表单弹窗：添加分类 -->
   <CategoryForm ref="categoryFormRef" @success="getList" />
   <!-- 弹窗：表单详情 -->
@@ -99,7 +97,6 @@
 import draggable from 'vuedraggable'
 import { CategoryApi } from '@/api/bpm/category'
 import * as ModelApi from '@/api/bpm/model'
-import ModelForm from './ModelForm.vue'
 import CategoryForm from '../category/CategoryForm.vue'
 import { cloneDeep } from 'lodash-es'
 import CategoryDraggableModel from './CategoryDraggableModel.vue'
@@ -123,7 +120,6 @@ const handleQuery = () => {
 }
 
 /** 添加/修改操作 */
-const formRef = ref()
 const openForm = (type: string, id?: number) => {
   if (type === 'create') {
     push({ name: 'BpmModelCreate' })
@@ -206,7 +202,7 @@ const getList = async () => {
 }
 
 /** 初始化 **/
-onMounted(() => {
+onActivated(() => {
   getList()
 })
 </script>

src/views/bpm/model/index_old.vue

@@ -1,404 +0,0 @@
-<template>
-  <doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
-  <doc-alert
-    title="流程设计器（钉钉、飞书）"
-    url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
-  />
-  <doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
-  <doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
-
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="流程标识" prop="key">
-        <el-input
-          v-model="queryParams.key"
-          placeholder="请输入流程标识"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入流程名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程分类" prop="category">
-        <el-select
-          v-model="queryParams.category"
-          placeholder="请选择流程分类"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="category in categoryList"
-            :key="category.code"
-            :label="category.name"
-            :value="category.code"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['bpm:model:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新建
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="流程名称" align="center" prop="name" min-width="200" />
-      <el-table-column label="流程图标" align="center" prop="icon" min-width="100">
-        <template #default="scope">
-          <el-image :src="scope.row.icon" class="h-32px w-32px" />
-        </template>
-      </el-table-column>
-      <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
-        <template #default="scope">
-          <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
-            全部可见
-          </el-text>
-          <el-text v-else-if="scope.row.startUsers.length == 1">
-            {{ scope.row.startUsers[0].nickname }}
-          </el-text>
-          <el-text v-else>
-            <el-tooltip
-              class="box-item"
-              effect="dark"
-              placement="top"
-              :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
-            >
-              {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
-            </el-tooltip>
-          </el-text>
-        </template>
-      </el-table-column>
-      <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
-      <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
-        <template #default="scope">
-          <el-button
-            v-if="scope.row.formType === 10"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
-          >
-            <span>{{ scope.row.formName }}</span>
-          </el-button>
-          <el-button
-            v-else-if="scope.row.formType === 20"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
-          >
-            <span>{{ scope.row.formCustomCreatePath }}</span>
-          </el-button>
-          <label v-else>暂无表单</label>
-        </template>
-      </el-table-column>
-      <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
-        <template #default="scope">
-          <span v-if="scope.row.processDefinition">
-            {{ formatDate(scope.row.processDefinition.deploymentTime) }}
-          </span>
-          <el-tag v-if="scope.row.processDefinition" class="ml-10px">
-            v{{ scope.row.processDefinition.version }}
-          </el-tag>
-          <el-tag v-else type="warning">未部署</el-tag>
-          <el-tag
-            v-if="scope.row.processDefinition?.suspensionState === 2"
-            type="warning"
-            class="ml-10px"
-          >
-            已停用
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="200" fixed="right">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['bpm:model:update']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            修改
-          </el-button>
-          <el-button
-            link
-            class="!ml-5px"
-            type="primary"
-            @click="handleDesign(scope.row)"
-            v-hasPermi="['bpm:model:update']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            设计
-          </el-button>
-          <el-button
-            link
-            class="!ml-5px"
-            type="primary"
-            @click="handleDeploy(scope.row)"
-            v-hasPermi="['bpm:model:deploy']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            发布
-          </el-button>
-          <el-dropdown
-            class="!align-middle ml-5px"
-            @command="(command) => handleCommand(command, scope.row)"
-            v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
-          >
-            <el-button type="primary" link>更多</el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item
-                  command="handleDefinitionList"
-                  v-if="checkPermi(['bpm:process-definition:query'])"
-                >
-                  历史
-                </el-dropdown-item>
-                <el-dropdown-item
-                  command="handleChangeState"
-                  v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
-                  :disabled="!isManagerUser(scope.row)"
-                >
-                  {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  type="danger"
-                  command="handleDelete"
-                  v-if="checkPermi(['bpm:model:delete'])"
-                  :disabled="!isManagerUser(scope.row)"
-                >
-                  删除
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改流程 -->
-  <ModelForm ref="formRef" @success="getList" />
-
-  <!-- 弹窗：表单详情 -->
-  <Dialog title="表单详情" v-model="formDetailVisible" width="800">
-    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
-  </Dialog>
-</template>
-
-<script lang="ts" setup>
-import { formatDate } from '@/utils/formatTime'
-import * as ModelApi from '@/api/bpm/model'
-import * as FormApi from '@/api/bpm/form'
-import ModelForm from './ModelForm.vue'
-import { setConfAndFields2 } from '@/utils/formCreate'
-import { CategoryApi } from '@/api/bpm/category'
-import { BpmModelType } from '@/utils/constants'
-import { checkPermi } from '@/utils/permission'
-import { useUserStoreWithOut } from '@/store/modules/user'
-
-defineOptions({ name: 'BpmModel' })
-
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-const { push } = useRouter() // 路由
-const userStore = useUserStoreWithOut() // 用户信息缓存
-
-const loading = ref(true) // 列表的加载中
-const total = ref(0) // 列表的总页数
-const list = ref([]) // 列表的数据
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  key: undefined,
-  name: undefined,
-  category: undefined
-})
-const queryFormRef = ref() // 搜索的表单
-const categoryList = ref([]) // 流程分类列表
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    const data = await ModelApi.getModelList(queryParams)
-    list.value = data.list
-    total.value = data.total
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  handleQuery()
-}
-
-/** '更多'操作按钮 */
-const handleCommand = (command: string, row: any) => {
-  switch (command) {
-    case 'handleDefinitionList':
-      handleDefinitionList(row)
-      break
-    case 'handleDelete':
-      handleDelete(row)
-      break
-    case 'handleChangeState':
-      handleChangeState(row)
-      break
-    default:
-      break
-  }
-}
-
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (row: any) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await ModelApi.deleteModel(row.id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 更新状态操作 */
-const handleChangeState = async (row: any) => {
-  const state = row.processDefinition.suspensionState
-  const newState = state === 1 ? 2 : 1
-  try {
-    // 修改状态的二次确认
-    const id = row.id
-    debugger
-    const statusState = state === 1 ? '停用' : '启用'
-    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
-    await message.confirm(content)
-    // 发起修改状态
-    await ModelApi.updateModelState(id, newState)
-    message.success(statusState + '成功')
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 设计流程 */
-const handleDesign = (row: any) => {
-  if (row.type == BpmModelType.BPMN) {
-    push({
-      name: 'BpmModelEditor',
-      query: {
-        modelId: row.id
-      }
-    })
-  } else {
-    push({
-      name: 'SimpleModelDesign',
-      query: {
-        modelId: row.id
-      }
-    })
-  }
-}
-
-/** 发布流程 */
-const handleDeploy = async (row: any) => {
-  try {
-    // 删除的二次确认
-    await message.confirm('是否部署该流程！！')
-    // 发起部署
-    await ModelApi.deployModel(row.id)
-    message.success(t('部署成功'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 跳转到指定流程定义列表 */
-const handleDefinitionList = (row) => {
-  push({
-    name: 'BpmProcessDefinition',
-    query: {
-      key: row.key
-    }
-  })
-}
-
-/** 流程表单的详情按钮操作 */
-const formDetailVisible = ref(false)
-const formDetailPreview = ref({
-  rule: [],
-  option: {}
-})
-const handleFormDetail = async (row: any) => {
-  if (row.formType == 10) {
-    // 设置表单
-    const data = await FormApi.getForm(row.formId)
-    setConfAndFields2(formDetailPreview, data.conf, data.fields)
-    // 弹窗打开
-    formDetailVisible.value = true
-  } else {
-    await push({
-      path: row.formCustomCreatePath
-    })
-  }
-}
-
-/** 判断是否可以操作 */
-const isManagerUser = (row: any) => {
-  const userId = userStore.getUser.id
-  return row.managerUserIds && row.managerUserIds.includes(userId)
-}
-
-/** 初始化 **/
-onMounted(async () => {
-  await getList()
-  // 查询流程分类列表
-  categoryList.value = await CategoryApi.getCategorySimpleList()
-})
-</script>

src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue

@@ -44,8 +44,26 @@
               :rows="4"
             />
           </el-form-item>
+          <el-form-item
+            v-if="runningTask.signEnable"
+            label="签名"
+            prop="signPicUrl"
+            ref="approveSignFormRef"
+          >
+            <el-button @click="signRef.open()">点击签名</el-button>
+            <el-image
+              class="w-90px h-40px ml-5px"
+              v-if="approveReasonForm.signPicUrl"
+              :src="approveReasonForm.signPicUrl"
+              :preview-src-list="[approveReasonForm.signPicUrl]"
+            />
+          </el-form-item>
           <el-form-item>
-            <el-button :disabled="formLoading" type="success" @click="handleAudit(true, approveFormRef)">
+            <el-button
+              :disabled="formLoading"
+              type="success"
+              @click="handleAudit(true, approveFormRef)"
+            >
               {{ getButtonDisplayName(OperationButtonType.APPROVE) }}
             </el-button>
             <el-button @click="closePropover('approve', approveFormRef)"> 取消 </el-button>
@@ -86,7 +104,11 @@
             />
           </el-form-item>
           <el-form-item>
-            <el-button :disabled="formLoading" type="danger" @click="handleAudit(false,rejectFormRef)">
+            <el-button
+              :disabled="formLoading"
+              type="danger"
+              @click="handleAudit(false, rejectFormRef)"
+            >
               {{ getButtonDisplayName(OperationButtonType.REJECT) }}
             </el-button>
             <el-button @click="closePropover('reject', rejectFormRef)"> 取消 </el-button>
@@ -471,6 +493,9 @@
       <Icon :size="14" icon="ep:refresh" />&nbsp; 再次提交
     </div>
   </div>
+
+  <!-- 签名弹窗 -->
+  <SignDialog ref="signRef" @success="handleSignFinish" />
 </template>
 <script lang="ts" setup>
 import { useUserStoreWithOut } from '@/store/modules/user'
@@ -479,11 +504,13 @@ import * as TaskApi from '@/api/bpm/task'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as UserApi from '@/api/system/user'
 import {
-  OperationButtonType,
-  OPERATION_BUTTON_NAME
+  OPERATION_BUTTON_NAME,
+  OperationButtonType
 } from '@/components/SimpleProcessDesignerV2/src/consts'
-import { BpmProcessInstanceStatus, BpmModelFormType } from '@/utils/constants'
+import { BpmModelFormType, BpmProcessInstanceStatus } from '@/utils/constants'
 import type { FormInstance, FormRules } from 'element-plus'
+import SignDialog from './SignDialog.vue'
+
 defineOptions({ name: 'ProcessInstanceBtnContainer' })
 
 const router = useRouter() // 路由
@@ -492,12 +519,12 @@ const message = useMessage() // 消息弹窗
 const userId = useUserStoreWithOut().getUser.id // 当前登录的编号
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 
-const props = defineProps< {
-  processInstance: any,  // 流程实例信息
-  processDefinition: any,  // 流程定义信息
-  userOptions: UserApi.UserVO[],
-  normalForm: any, // 流程表单 formCreate
-  normalFormApi: any, // 流程表单 formCreate Api
+const props = defineProps<{
+  processInstance: any // 流程实例信息
+  processDefinition: any // 流程定义信息
+  userOptions: UserApi.UserVO[]
+  normalForm: any // 流程表单 formCreate
+  normalFormApi: any // 流程表单 formCreate Api
   writableFields: string[] // 流程表单可以编辑的字段
 }>()
 
@@ -522,11 +549,15 @@ const approveFormFApi = ref<any>({}) // approveForms 的 fAPi
 
 // 审批通过意见表单
 const approveFormRef = ref<FormInstance>()
+const signRef = ref()
+const approveSignFormRef = ref()
 const approveReasonForm = reactive({
-  reason: ''
+  reason: '',
+  signPicUrl: ''
 })
 const approveReasonRule = reactive<FormRules<typeof approveReasonForm>>({
   reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  signPicUrl: [{ required: true, message: '签名不能为空', trigger: 'change' }]
 })
 // 拒绝表单
 const rejectFormRef = ref<FormInstance>()
@@ -534,7 +565,7 @@ const rejectReasonForm = reactive({
   reason: ''
 })
 const rejectReasonRule = reactive<FormRules<typeof rejectReasonForm>>({
-  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
 })
 
 // 抄送表单
@@ -555,7 +586,7 @@ const transferForm = reactive({
 })
 const transferFormRule = reactive<FormRules<typeof transferForm>>({
   assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
 })
 
 // 委派表单
@@ -566,7 +597,7 @@ const delegateForm = reactive({
 })
 const delegateFormRule = reactive<FormRules<typeof delegateForm>>({
   delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
 })
 
 // 加签表单
@@ -577,7 +608,7 @@ const addSignForm = reactive({
 })
 const addSignFormRule = reactive<FormRules<typeof addSignForm>>({
   addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
 })
 
 // 减签表单
@@ -588,7 +619,7 @@ const deleteSignForm = reactive({
 })
 const deleteSignFormRule = reactive<FormRules<typeof deleteSignForm>>({
   deleteSignTaskId: [{ required: true, message: '减签人员不能为空', trigger: 'change' }],
- reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
 })
 
 // 退回表单
@@ -608,7 +639,7 @@ const cancelForm = reactive({
   cancelReason: ''
 })
 const cancelFormRule = reactive<FormRules<typeof cancelForm>>({
-  cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }],
+  cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }]
 })
 
 /** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
@@ -627,11 +658,11 @@ watch(
 const openPopover = async (type: string) => {
   if (type === 'approve') {
     // 校验流程表单
-     const valid = await validateNormalForm();
-     if (!valid) {
+    const valid = await validateNormalForm()
+    if (!valid) {
       message.warning('表单校验不通过，请先完善表单!!')
-      return;
-     }
+      return
+    }
   }
   if (type === 'return') {
     // 获取退回节点
@@ -652,7 +683,7 @@ const openPopover = async (type: string) => {
 const closePropover = (type: string, formRef: FormInstance | undefined) => {
   if (formRef) {
     formRef.resetFields()
-  } 
+  }
   popOverVisible.value[type] = false
 }
 
@@ -664,14 +695,18 @@ const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) =>
     if (!formRef) return
     await formRef.validate()
     if (pass) {
-       // 获取修改的流程变量, 暂时只支持流程表单
-       const variables = getUpdatedProcessInstanceVaiables();
+      // 获取修改的流程变量, 暂时只支持流程表单
+      const variables = getUpdatedProcessInstanceVariables()
       // 审批通过数据
       const data = {
         id: runningTask.value.id,
         reason: approveReasonForm.reason,
         variables // 审批通过, 把修改的字段值赋于流程实例变量
       }
+      // 签名
+      if (runningTask.value.signEnable) {
+        data.signPicUrl = approveReasonForm.signPicUrl
+      }
       // 多表单处理，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
       // TODO 芋艿 任务有多表单这里要如何处理，会和可编辑的字段冲突
       const formCreateApi = approveFormFApi.value
@@ -684,10 +719,10 @@ const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) =>
       popOverVisible.value.approve = false
       message.success('审批通过成功')
     } else {
-       // 审批不通过数据
-       const data = {
+      // 审批不通过数据
+      const data = {
         id: runningTask.value.id,
-        reason: rejectReasonForm.reason,
+        reason: rejectReasonForm.reason
       }
       await TaskApi.rejectTask(data)
       popOverVisible.value.reject = false
@@ -713,7 +748,7 @@ const handleCopy = async () => {
     const data = {
       id: runningTask.value.id,
       reason: copyForm.copyReason,
-      copyUserIds:copyForm.copyUserIds
+      copyUserIds: copyForm.copyUserIds
     }
     await TaskApi.copyTask(data)
     copyFormRef.value.resetFields()
@@ -752,7 +787,6 @@ const handleTransfer = async () => {
 const handleDelegate = async () => {
   formLoading.value = true
   try {
- 
     // 1.1 校验表单
     if (!delegateFormRef.value) return
     await delegateFormRef.value.validate()
@@ -949,23 +983,29 @@ const validateNormalForm = async () => {
     try {
       await props.normalFormApi?.validate()
     } catch {
-      valid = false;
+      valid = false
     }
-    return valid;
+    return valid
   } else {
-    return true;
+    return true
   }
 }
+
 /** 从可以编辑的流程表单字段，获取需要修改的流程实例的变量 */
-const getUpdatedProcessInstanceVaiables = ()=> {
+const getUpdatedProcessInstanceVariables = () => {
   const variables = {}
-  props.writableFields.forEach( (field) => {
-    const fieldValue = props.normalFormApi.getValue(field)
-    variables[field] = fieldValue;
+  props.writableFields.forEach((field) => {
+    variables[field] = props.normalFormApi.getValue(field)
   })
   return variables
 }
 
+/** 处理签名完成 */
+const handleSignFinish = (url: string) => {
+  approveReasonForm.signPicUrl = url
+  approveSignFormRef.value.validate('change')
+}
+
 defineExpose({ loadTodoTask })
 </script>
 

src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue

@@ -4,7 +4,6 @@
       :flow-node="simpleModel"
       :tasks="tasks"
       :process-instance="processInstance"
-      class="process-viewer"
     />
   </div>
 </template>
@@ -20,7 +19,7 @@ const props = defineProps({
   modelView: propTypes.object,
   simpleJson: propTypes.string // Simple 模型结构数据 (json 格式)
 })
-const simpleModel = ref()
+const simpleModel = ref<any>({})
 // 用户任务
 const tasks = ref([])
 // 流程实例
@@ -82,7 +81,6 @@ const setSimpleModelNodeTaskStatus = (
     }
     return
   }
-
   // 审批节点
   if (
     simpleModel.type === NodeType.START_USER_NODE ||
@@ -98,31 +96,39 @@ const setSimpleModelNodeTaskStatus = (
     }
     // TODO 是不是还缺一个 cancel 的状态
   }
-
   // 抄送节点
   if (simpleModel.type === NodeType.COPY_TASK_NODE) {
-    // 抄送节点 只有通过和未执行状态
+    // 抄送节点,只有通过和未执行状态
     if (finishedActivityIds.includes(simpleModel.id)) {
       simpleModel.activityStatus = TaskStatusEnum.APPROVE
     } else {
       simpleModel.activityStatus = TaskStatusEnum.NOT_START
     }
   }
-  // 条件节点 对应 SequenceFlow
+  // 延迟器节点
+  if (simpleModel.type === NodeType.DELAY_TIMER_NODE) {
+    // 延迟器节点,只有通过和未执行状态
+    if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+  }
+  // 条件节点对应 SequenceFlow
   if (simpleModel.type === NodeType.CONDITION_NODE) {
-    // 条件节点。只有通过和未执行状态
+    // 条件节点,只有通过和未执行状态
     if (finishedSequenceFlowActivityIds.includes(simpleModel.id)) {
       simpleModel.activityStatus = TaskStatusEnum.APPROVE
     } else {
       simpleModel.activityStatus = TaskStatusEnum.NOT_START
     }
   }
-
   // 网关节点
   if (
     simpleModel.type === NodeType.CONDITION_BRANCH_NODE ||
     simpleModel.type === NodeType.PARALLEL_BRANCH_NODE ||
-    simpleModel.type === NodeType.INCLUSIVE_BRANCH_NODE
+    simpleModel.type === NodeType.INCLUSIVE_BRANCH_NODE ||
+    simpleModel.type === NodeType.ROUTER_BRANCH_NODE
   ) {
     // 网关节点。只有通过和未执行状态
     if (finishedActivityIds.includes(simpleModel.id)) {
@@ -154,15 +160,4 @@ const setSimpleModelNodeTaskStatus = (
 </script>
 
 <style lang="scss" scoped>
-.process-viewer-container {
-  height: 100%;
-  width: 100%;
-  
-  :deep(.process-viewer) {
-    height: 100% !important;
-    min-height: 100%;
-    width: 100%;
-    overflow: auto;
-  }
-}
 </style>

src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue

@@ -25,7 +25,7 @@
           </div>
         </div>
       </template>
-      <div class="flex flex-col items-start gap2" :id="`activity-task-${activity.id}`">
+      <div class="flex flex-col items-start gap2" :id="`activity-task-${activity.id}-${index}`">
         <!-- 第一行：节点名称、时间 -->
         <div class="flex w-full">
           <div class="font-bold"> {{ activity.name }}</div>
@@ -113,7 +113,7 @@
                 </div>
               </div>
             </div>
-            <teleport defer :to="`#activity-task-${activity.id}`">
+            <teleport defer :to="`#activity-task-${activity.id}-${index}`">
               <div
                 v-if="
                   task.reason &&
@@ -123,6 +123,17 @@
               >
                 审批意见：{{ task.reason }}
               </div>
+              <div
+                v-if="task.signPicUrl && activity.nodeType === NodeType.USER_TASK_NODE"
+                class="text-#a5a5a5 text-13px mt-1 w-full bg-#f8f8fa p2 rounded-md"
+              >
+                签名：
+                <el-image
+                  class="w-90px h-40px ml-5px"
+                  :src="task.signPicUrl"
+                  :preview-src-list="[task.signPicUrl]"
+                />
+              </div>
             </teleport>
           </div>
           <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->

src/views/bpm/processInstance/detail/SignDialog.vue

@@ -0,0 +1,50 @@
+<template>
+  <el-dialog v-model="signDialogVisible" title="签名" width="935">
+    <div class="position-relative">
+      <Vue3Signature class="b b-solid b-gray" ref="signature" w="900px" h="400px" />
+      <el-button
+        class="pos-absolute bottom-20px right-10px"
+        type="primary"
+        text
+        size="small"
+        @click="signature.clear()"
+      >
+        <Icon icon="ep:delete" class="mr-5px" />
+        清除
+      </el-button>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="signDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submit"> 提交 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import Vue3Signature from 'vue3-signature'
+import * as FileApi from '@/api/infra/file'
+import download from '@/utils/download'
+
+const message = useMessage() // 消息弹窗
+const signDialogVisible = ref(false)
+const signature = ref()
+
+const open = async () => {
+  signDialogVisible.value = true
+}
+defineExpose({ open })
+
+const emits = defineEmits(['success'])
+const submit = async () => {
+  message.success('签名上传中请稍等。。。')
+  const res = await FileApi.updateFile({
+    file: download.base64ToFile(signature.value.save('image/png'), '签名')
+  })
+  emits('success', res.data)
+  signDialogVisible.value = false
+}
+</script>
+
+<style scoped></style>

src/views/bpm/simple/SimpleModelDesign.vue

@@ -4,9 +4,7 @@
       :model-id="modelId"
       :model-key="modelKey"
       :model-name="modelName"
-      :value="currentValue"
       @success="handleSuccess"
-      @init-finished="handleInit"
       :start-user-ids="startUserIds"
       ref="designerRef"
     />
@@ -19,137 +17,22 @@ defineOptions({
   name: 'SimpleModelDesign'
 })
 
-const props = defineProps<{
+defineProps<{
   modelId?: string
   modelKey?: string
   modelName?: string
-  value?: string
   startUserIds?: number[]
 }>()
 
-const emit = defineEmits(['success', 'init-finished'])
+const emit = defineEmits(['success'])
 const designerRef = ref()
-const isInitialized = ref(false)
-const currentValue = ref('')
-
-// 初始化或更新当前值
-const initOrUpdateValue = async () => {
-  console.log('initOrUpdateValue', props.value)
-  if (props.value) {
-    currentValue.value = props.value
-    // 如果设计器已经初始化，立即加载数据
-    if (isInitialized.value && designerRef.value) {
-      try {
-        await designerRef.value.loadProcessData(props.value)
-        await nextTick()
-        if (designerRef.value.refresh) {
-          await designerRef.value.refresh()
-        }
-      } catch (error) {
-        console.error('加载流程数据失败:', error)
-      }
-    }
-  }
-}
-
-// 监听属性变化
-watch(
-  [() => props.modelKey, () => props.modelName, () => props.value],
-  async ([newKey, newName, newValue], [oldKey, oldName, oldValue]) => {
-    if (designerRef.value && isInitialized.value) {
-      try {
-        if (newKey && newName && (newKey !== oldKey || newName !== oldName)) {
-          await designerRef.value.updateModel(newKey, newName)
-        }
-        if (newValue && newValue !== oldValue) {
-          currentValue.value = newValue
-          await designerRef.value.loadProcessData(newValue)
-          await nextTick()
-          if (designerRef.value.refresh) {
-            await designerRef.value.refresh()
-          }
-        }
-      } catch (error) {
-        console.error('更新流程数据失败:', error)
-      }
-    }
-  },
-  { deep: true, immediate: true }
-)
-
-// 初始化完成回调
-const handleInit = async () => {
-  try {
-    isInitialized.value = true
-    emit('init-finished')
-
-    // 等待下一个tick，确保设计器已经准备好
-    await nextTick()
-
-    // 初始化完成后，设置初始值
-    if (props.modelKey && props.modelName) {
-      await designerRef.value.updateModel(props.modelKey, props.modelName)
-    }
-    if (props.value) {
-      currentValue.value = props.value
-      await designerRef.value.loadProcessData(props.value)
-      // 再次刷新确保数据正确加载
-      await nextTick()
-      if (designerRef.value.refresh) {
-        await designerRef.value.refresh()
-      }
-    }
-  } catch (error) {
-    console.error('初始化流程数据失败:', error)
-  }
-}
 
 // 修改成功回调
 const handleSuccess = (data?: any) => {
-  console.warn('handleSuccess', data)
-  if (data && data !== currentValue.value) {
-    currentValue.value = data
+  console.info('handleSuccess', data)
+  if (data) {
     emit('success', data)
   }
 }
-
-/** 获取当前流程数据 */
-const getCurrentFlowData = async () => {
-  try {
-    if (designerRef.value) {
-      const data = await designerRef.value.getCurrentFlowData()
-      if (data) {
-        currentValue.value = data
-      }
-      return data
-    }
-    return currentValue.value || undefined
-  } catch (error) {
-    console.error('获取流程数据失败:', error)
-    return currentValue.value || undefined
-  }
-}
-
-// 组件创建时初始化数据
-onMounted(() => {
-  initOrUpdateValue()
-})
-
-// 组件卸载前保存数据
-onBeforeUnmount(async () => {
-  try {
-    const data = await getCurrentFlowData()
-    if (data) {
-      emit('success', data)
-    }
-  } catch (error) {
-    console.error('保存数据失败:', error)
-  }
-})
-
-defineExpose({
-  getCurrentFlowData,
-  refresh: () => designerRef.value?.refresh?.()
-})
 </script>
 <style lang="scss" scoped></style>

src/views/crm/business/BusinessForm.vue

@@ -101,7 +101,7 @@
             <el-input
               disabled
               v-model="formData.totalProductPrice"
-              :formatter="erpPriceTableColumnFormatter"
+              :formatter="erpPriceInputFormatter"
             />
           </el-form-item>
         </el-col>
@@ -123,7 +123,7 @@
               disabled
               v-model="formData.totalPrice"
               placeholder="请输入商机金额"
-              :formatter="erpPriceTableColumnFormatter"
+              :formatter="erpPriceInputFormatter"
             />
           </el-form-item>
         </el-col>
@@ -142,7 +142,7 @@ import * as CustomerApi from '@/api/crm/customer'
 import * as UserApi from '@/api/system/user'
 import { useUserStore } from '@/store/modules/user'
 import BusinessProductForm from './components/BusinessProductForm.vue'
-import { erpPriceMultiply, erpPriceTableColumnFormatter } from '@/utils'
+import { erpPriceMultiply, erpPriceInputFormatter } from '@/utils'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗

src/views/crm/contract/ContractForm.vue

@@ -159,7 +159,7 @@
             <el-input
               disabled
               v-model="formData.totalProductPrice"
-              :formatter="erpPriceTableColumnFormatter"
+              :formatter="erpPriceInputFormatter"
             />
           </el-form-item>
         </el-col>
@@ -181,7 +181,7 @@
               disabled
               v-model="formData.totalPrice"
               placeholder="请输入商机金额"
-              :formatter="erpPriceTableColumnFormattere"
+              :formatter="erpPriceInputFormatter"
             />
           </el-form-item>
         </el-col>
@@ -199,7 +199,7 @@ import * as ContractApi from '@/api/crm/contract'
 import * as UserApi from '@/api/system/user'
 import * as ContactApi from '@/api/crm/contact'
 import * as BusinessApi from '@/api/crm/business'
-import { erpPriceMultiply, erpPriceTableColumnFormatter } from '@/utils'
+import { erpPriceMultiply, erpPriceInputFormatter } from '@/utils'
 import { useUserStore } from '@/store/modules/user'
 import ContractProductForm from '@/views/crm/contract/components/ContractProductForm.vue'
 

src/views/infra/build/index.vue

@@ -135,7 +135,8 @@ const makeTemplate = () => {
 
 /** 复制 **/
 const copy = async (text: string) => {
-  const { copy, copied, isSupported } = useClipboard({ source: text })
+  const textToCopy = JSON.stringify(text, null, 2)
+  const { copy, copied, isSupported } = useClipboard({ source: textToCopy })
   if (!isSupported) {
     message.error(t('common.copyError'))
   } else {
@@ -149,17 +150,18 @@ const copy = async (text: string) => {
 /**
  * 代码高亮
  */
-const highlightedCode = (code) => {
+const highlightedCode = (code: string) => {
   // 处理语言和代码
   let language = 'json'
   if (formType.value === 2) {
     language = 'xml'
   }
+  // debugger
   if (!isString(code)) {
-    code = JSON.stringify(code)
+    code = JSON.stringify(code, null, 2)
   }
   // 高亮
-  const result = hljs.highlight(language, code, true)
+  const result = hljs.highlight(code, { language: language, ignoreIllegals: true })
   return result.value || ' '
 }
 

src/views/infra/file/index.vue

@@ -95,6 +95,9 @@
       />
       <el-table-column label="操作" align="center">
         <template #default="scope">
+          <el-button link type="primary" @click="copyToClipboard(scope.row.url)">
+            复制链接
+          </el-button>
           <el-button
             link
             type="danger"
@@ -172,6 +175,13 @@ const openForm = () => {
   formRef.value.open()
 }
 
+/** 复制到剪贴板方法 */
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text).then(() => {
+    message.success('复制成功')
+  })
+}
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {

src/views/mall/promotion/bargain/activity/index.vue

@@ -151,7 +151,6 @@ import * as BargainActivityApi from '@/api/mall/promotion/bargain/bargainActivit
 import BargainActivityForm from './BargainActivityForm.vue'
 import { formatDate } from '@/utils/formatTime'
 import { fenToYuanFormat } from '@/utils/formatter'
-import { closeBargainActivity } from '@/api/mall/promotion/bargain/bargainActivity'
 
 defineOptions({ name: 'PromotionBargainActivity' })
 

src/views/mall/promotion/diy/template/decorate.vue

@@ -2,18 +2,18 @@
   <DiyEditor
     v-if="formData && !formLoading"
     v-model="currentFormData!.property"
-    :title="templateItems[selectedTemplateItem].name"
     :libs="libs"
+    :preview-url="previewUrl"
+    :show-navigation-bar="selectedTemplateItem !== 0"
     :show-page-config="selectedTemplateItem !== 0"
     :show-tab-bar="selectedTemplateItem === 0"
-    :show-navigation-bar="selectedTemplateItem !== 0"
-    :preview-url="previewUrl"
-    @save="submitForm"
+    :title="templateItems[selectedTemplateItem].name"
     @reset="handleEditorReset"
+    @save="submitForm"
   >
     <template #toolBarLeft>
       <el-radio-group
-        v-model="selectedTemplateItem"
+        :model-value="selectedTemplateItem"
         class="h-full!"
         @change="handleTemplateItemChange"
       >
@@ -26,13 +26,14 @@
     </template>
   </DiyEditor>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 // TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
 import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
 import * as DiyPageApi from '@/api/mall/promotion/diy/page'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下
 import { toNumber } from 'lodash-es'
+import { isEmpty } from '@/utils/is'
 
 /** 装修模板表单 */
 defineOptions({ name: 'DiyTemplateDecorate' })
@@ -52,6 +53,10 @@ const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
 const formRef = ref() // 表单 Ref
 // 当前编辑的属性
 const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
+// templateItem 对应的缓存
+const currentFormDataMap = ref<
+  Map<string, DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>
+>(new Map())
 // 商城 H5 预览地址
 const previewUrl = ref('')
 
@@ -60,8 +65,6 @@ const getPageDetail = async (id: any) => {
   formLoading.value = true
   try {
     formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
-    currentFormData.value = formData.value
-
     // 拼接手机预览链接
     const domain = import.meta.env.VITE_MALL_H5_DOMAIN
     previewUrl.value = `${domain}/#/pages/index/index?templateId=${formData.value.id}`
@@ -75,19 +78,31 @@ const templateLibs = [] as DiyComponentLibrary[]
 // 当前组件库
 const libs = ref<DiyComponentLibrary[]>(templateLibs)
 // 模板选项切换
-const handleTemplateItemChange = () => {
+const handleTemplateItemChange = (val: number) => {
+  // 缓存模版编辑数据
+  currentFormDataMap.value.set(
+    templateItems[selectedTemplateItem.value].name,
+    currentFormData.value!
+  )
+  // 读取模版缓存
+  const data = currentFormDataMap.value.get(templateItems[val].name)
+
+  // 切换模版
+  selectedTemplateItem.value = val
   // 编辑模板
-  if (selectedTemplateItem.value === 0) {
+  if (val === 0) {
     libs.value = templateLibs
-    currentFormData.value = formData.value
+    currentFormData.value = isEmpty(data) ? formData.value : data
     return
   }
 
   // 编辑页面
   libs.value = PAGE_LIBS
-  currentFormData.value = formData.value!.pages.find(
-    (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
-  )
+  currentFormData.value = isEmpty(data)
+    ? formData.value!.pages.find(
+        (page: DiyPageApi.DiyPageVO) => page.name === templateItems[val].name
+      )
+    : data
 }
 
 // 提交表单
@@ -97,12 +112,25 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    if (selectedTemplateItem.value === 0) {
-      // 提交模板属性
-      await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
-    } else {
+    // 对所有的 templateItems 都进行保存，有缓存则保存缓存，解决都有修改时只保存了当前所编辑的 templateItem，导致装修效果存在差异
+    for (let i = 0; i < templateItems.length; i++) {
+      const data = currentFormDataMap.value.get(templateItems[i].name) as any
+      // 情况一：基础设置
+      if (i === 0) {
+        // 提交模板属性
+        await DiyTemplateApi.updateDiyTemplateProperty(isEmpty(data) ? unref(formData)! : data)
+        continue
+      }
       // 提交页面属性
-      await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
+      // 情况二：提交当前正在编辑的页面
+      if (currentFormData.value?.name.includes(templateItems[i].name)) {
+        await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
+        continue
+      }
+      // 情况三：提交页面编辑缓存
+      if (!isEmpty(data)) {
+        await DiyPageApi.updateDiyPageProperty(data!)
+      }
     }
     message.success('保存成功')
   } finally {
@@ -140,10 +168,16 @@ const recoverPageIndex = () => {
   const pageIndex = toNumber(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0
   // 移除标记
   sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
+
+  // 重新初始化数据
+  currentFormData.value = formData.value
+  currentFormDataMap.value = new Map<
+    string,
+    DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO
+  >()
   // 切换页面
   if (pageIndex !== selectedTemplateItem.value) {
-    selectedTemplateItem.value = pageIndex
-    handleTemplateItemChange()
+    handleTemplateItemChange(pageIndex)
   }
 }
 //#endregion

src/views/mall/statistics/product/components/ProductRank.vue

@@ -10,7 +10,7 @@
     </template>
     <!-- 排行列表 -->
     <el-table v-loading="loading" :data="list" @sort-change="handleSortChange">
-      <el-table-column label="商品ID" prop="spuId" min-width="70" />
+      <el-table-column label="商品 ID" prop="spuId" min-width="70" />
       <el-table-column label="商品图片" align="center" prop="picUrl" width="80">
         <template #default="{ row }">
           <el-image
@@ -27,7 +27,13 @@
       <el-table-column label="加购件数" prop="cartCount" min-width="105" sortable="custom" />
       <el-table-column label="下单件数" prop="orderCount" min-width="105" sortable="custom" />
       <el-table-column label="支付件数" prop="orderPayCount" min-width="105" sortable="custom" />
-      <el-table-column label="支付金额" prop="orderPayPrice" min-width="105" sortable="custom" />
+      <el-table-column
+        label="支付金额"
+        prop="orderPayPrice"
+        min-width="105"
+        sortable="custom"
+        :formatter="fenToYuanFormat"
+      />
       <el-table-column label="收藏数" prop="favoriteCount" min-width="90" sortable="custom" />
       <el-table-column
         label="访客-支付转化率(%)"
@@ -50,6 +56,7 @@
 import { ProductStatisticsApi, ProductStatisticsVO } from '@/api/mall/statistics/product'
 import { CardTitle } from '@/components/Card'
 import { buildSortingField } from '@/utils'
+import { fenToYuanFormat } from '@/utils/formatter'
 
 /** 商品排行 */
 defineOptions({ name: 'ProductRank' })

src/views/mall/trade/brokerage/user/BrokerageOrderListDialog.vue

@@ -1,27 +1,27 @@
 <template>
-  <Dialog v-model="dialogVisible" title="推广人列表" width="75%">
+  <Dialog v-model="dialogVisible" title="推广订单列表" width="75%">
     <ContentWrap>
       <!-- 搜索工作栏 -->
       <el-form
-        class="-mb-15px"
-        :model="queryParams"
         ref="queryFormRef"
         :inline="true"
+        :model="queryParams"
+        class="-mb-15px"
         label-width="85px"
       >
-        <el-form-item label="用户类型" prop="level">
-          <el-radio-group v-model="queryParams.level" @change="handleQuery">
-            <el-radio-button checked>全部</el-radio-button>
-            <el-radio-button value="1">一级推广人</el-radio-button>
-            <el-radio-button value="2">二级推广人</el-radio-button>
+        <el-form-item label="用户类型" prop="sourceUserLevel">
+          <el-radio-group v-model="queryParams.sourceUserLevel" @change="handleQuery">
+            <el-radio-button :value="0">全部</el-radio-button>
+            <el-radio-button :value="1">一级推广人</el-radio-button>
+            <el-radio-button :value="2">二级推广人</el-radio-button>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="状态" prop="status">
           <el-select
             v-model="queryParams.status"
-            placeholder="请选择状态"
-            clearable
             class="!w-240px"
+            clearable
+            placeholder="请选择状态"
           >
             <el-option
               v-for="dict in getIntDictOptions(DICT_TYPE.BROKERAGE_RECORD_STATUS)"
@@ -34,64 +34,70 @@
         <el-form-item label="绑定时间" prop="createTime">
           <el-date-picker
             v-model="queryParams.createTime"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            type="daterange"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
             :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
             class="!w-240px"
+            end-placeholder="结束日期"
+            start-placeholder="开始日期"
+            type="daterange"
+            value-format="YYYY-MM-DD HH:mm:ss"
           />
         </el-form-item>
         <el-form-item>
-          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+          <el-button @click="handleQuery">
+            <Icon class="mr-5px" icon="ep:search" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon class="mr-5px" icon="ep:refresh" />
+            重置
+          </el-button>
         </el-form-item>
       </el-form>
     </ContentWrap>
 
     <!-- 列表 -->
     <ContentWrap>
-      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-        <el-table-column label="订单编号" align="center" prop="bizId" min-width="80px" />
-        <el-table-column label="用户编号" align="center" prop="sourceUserId" min-width="80px" />
-        <el-table-column label="头像" align="center" prop="sourceUserAvatar" width="70px">
+      <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+        <el-table-column align="center" label="订单编号" min-width="80px" prop="bizId" />
+        <el-table-column align="center" label="用户编号" min-width="80px" prop="sourceUserId" />
+        <el-table-column align="center" label="头像" prop="sourceUserAvatar" width="70px">
           <template #default="scope">
             <el-avatar :src="scope.row.sourceUserAvatar" />
           </template>
         </el-table-column>
-        <el-table-column label="昵称" align="center" prop="sourceUserNickname" min-width="80px" />
+        <el-table-column align="center" label="昵称" min-width="80px" prop="sourceUserNickname" />
         <el-table-column
-          label="佣金"
+          :formatter="fenToYuanFormat"
           align="center"
-          prop="price"
+          label="佣金"
           min-width="100px"
-          :formatter="fenToYuanFormat"
+          prop="price"
         />
-        <el-table-column label="状态" align="center" prop="status" min-width="85">
+        <el-table-column align="center" label="状态" min-width="85" prop="status">
           <template #default="scope">
             <dict-tag :type="DICT_TYPE.BROKERAGE_RECORD_STATUS" :value="scope.row.status" />
           </template>
         </el-table-column>
         <el-table-column
-          label="创建时间"
+          :formatter="dateFormatter"
           align="center"
+          label="创建时间"
           prop="createTime"
-          :formatter="dateFormatter"
           width="180px"
         />
       </el-table>
       <!-- 分页 -->
       <Pagination
-        :total="total"
-        v-model:page="queryParams.pageNo"
         v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
         @pagination="getList"
       />
     </ContentWrap>
   </Dialog>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { dateFormatter } from '@/utils/formatTime'
 import * as BrokerageRecordApi from '@/api/mall/trade/brokerage/record'
 import { BrokerageRecordBizTypeEnum } from '@/utils/constants'
@@ -101,8 +107,6 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 /** 推广订单列表 */
 defineOptions({ name: 'BrokerageOrderListDialog' })
 
-const message = useMessage() // 消息弹窗
-
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
@@ -111,7 +115,7 @@ const queryParams = reactive({
   pageSize: 10,
   userId: null,
   bizType: BrokerageRecordBizTypeEnum.ORDER.type,
-  level: '',
+  sourceUserLevel: 0,
   createTime: [],
   status: null
 })
@@ -130,7 +134,11 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 const getList = async () => {
   loading.value = true
   try {
-    const data = await BrokerageRecordApi.getBrokerageRecordPage(queryParams)
+    // 处理全部的情况
+    const data = await BrokerageRecordApi.getBrokerageRecordPage({
+      ...queryParams,
+      sourceUserLevel: queryParams.sourceUserLevel === 0 ? undefined : queryParams.sourceUserLevel
+    })
     list.value = data.list
     total.value = data.total
   } finally {

src/views/mall/trade/brokerage/user/BrokerageUserCreateForm.vue

@@ -0,0 +1,161 @@
+<template>
+  <Dialog v-model="dialogVisible" title="创建分销员" width="800">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="90"
+    >
+      <el-row :gutter="20">
+        <el-col :span="12" :xs="24">
+          <el-form-item label="分销员" prop="userId">
+            <el-input
+              v-model="formData.userId"
+              v-loading="formLoading"
+              placeholder="请输入分销员编号"
+            >
+              <template #append>
+                <el-button @click="handleGetUser(formData.userId, '分销员')">
+                  <Icon class="mr-5px" icon="ep:search" />
+                </el-button>
+              </template>
+            </el-input>
+          </el-form-item>
+          <!-- 展示分销员的信息 -->
+          <el-descriptions v-if="userInfo.user" :column="1" border>
+            <el-descriptions-item label="头像">
+              <el-avatar :src="userInfo.user?.avatar" />
+            </el-descriptions-item>
+            <el-descriptions-item label="昵称">{{ userInfo.user?.nickname }}</el-descriptions-item>
+          </el-descriptions>
+        </el-col>
+
+        <el-col :span="12" :xs="24">
+          <el-form-item label="上级推广人" prop="bindUserId">
+            <el-input
+              v-model="formData.bindUserId"
+              v-loading="formLoading"
+              placeholder="请输入推广员编号"
+            >
+              <template #append>
+                <el-button @click="handleGetUser(formData.bindUserId, '推广员')">
+                  <Icon class="mr-5px" icon="ep:search" />
+                </el-button>
+              </template>
+            </el-input>
+          </el-form-item>
+          <!-- 展示上级推广人的信息 -->
+          <el-descriptions v-if="userInfo.bindUser" :column="1" border>
+            <el-descriptions-item label="头像">
+              <el-avatar :src="userInfo.bindUser?.avatar" />
+            </el-descriptions-item>
+            <el-descriptions-item label="昵称"
+              >{{ userInfo.bindUser?.nickname }}
+            </el-descriptions-item>
+            <el-descriptions-item label="推广资格">
+              <el-tag v-if="userInfo.bindUser?.brokerageEnabled">有</el-tag>
+              <el-tag v-else type="info">无</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="成为推广员的时间">
+              {{ formatDate(userInfo.bindUser?.brokerageTime) }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as BrokerageUserApi from '@/api/mall/trade/brokerage/user'
+import * as UserApi from '@/api/member/user'
+import { formatDate } from '@/utils/formatTime'
+
+defineOptions({ name: 'BrokerageUserCreateForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  userId: undefined,
+  bindUserId: undefined
+})
+const formRef = ref() // 表单 Ref
+const formRules = reactive({
+  userId: [{ required: true, message: '分销员不能为空', trigger: 'blur' }]
+})
+
+/** 打开弹窗 */
+const open = async () => {
+  resetForm()
+  dialogVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+/** 创建分销员 */
+const submitForm = async () => {
+  if (formLoading.value) return
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+
+  // 提交请求
+  formLoading.value = true
+  try {
+    // 发起修改
+    await BrokerageUserApi.createBrokerageUser(formData.value)
+    message.success(t('common.createSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formRef.value?.resetFields()
+  formData.value = {
+    userId: undefined,
+    bindUserId: undefined
+  }
+
+  userInfo.bindUser = undefined
+  userInfo.user = undefined
+}
+
+/** 查询推广员和分销员 */
+const userInfo = reactive<{
+  bindUser: BrokerageUserApi.BrokerageUserVO | undefined
+  user: BrokerageUserApi.BrokerageUserVO | undefined
+}>({
+  bindUser: undefined,
+  user: undefined
+})
+const handleGetUser = async (id: any, userType: string) => {
+  if (!id) {
+    message.warning(`请先输入${userType}编号后重试！！！`)
+    return
+  }
+  if (userType === '推广员' && formData.value.bindUserId == formData.value.userId) {
+    message.error('不能绑定自己为推广人')
+    return
+  }
+  const user =
+    userType === '推广员' ? await BrokerageUserApi.getBrokerageUser(id) : await UserApi.getUser(id)
+  userType === '推广员' ? (userInfo.bindUser = user) : (userInfo.user = user)
+  if (!user) {
+    message.warning(`${userType}不存在`)
+  }
+}
+</script>

src/views/mall/trade/brokerage/user/UpdateBindUserForm.vue → src/views/mall/trade/brokerage/user/BrokerageUserUpdateForm.vue

@@ -43,8 +43,8 @@
 import * as BrokerageUserApi from '@/api/mall/trade/brokerage/user'
 import { formatDate } from '@/utils/formatTime'
 
-/** 修改上级推广人表单 */
-defineOptions({ name: 'UpdateBindUserForm' })
+/** 修改分销用户 */
+defineOptions({ name: 'BrokerageUserUpdateForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗

src/views/mall/trade/brokerage/user/index.vue

@@ -4,19 +4,19 @@
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
-      class="-mb-15px"
-      :model="queryParams"
       ref="queryFormRef"
       :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
       label-width="85px"
     >
       <el-form-item label="推广员编号" prop="bindUserId">
         <el-input
           v-model="queryParams.bindUserId"
-          placeholder="请输入推广员编号"
+          class="!w-240px"
           clearable
+          placeholder="请输入推广员编号"
           @keyup.enter="handleQuery"
-          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="推广资格" prop="brokerageEnabled">
@@ -26,111 +26,126 @@
           clearable
           placeholder="请选择推广资格"
         >
-          <el-option label="有" :value="true" />
-          <el-option label="无" :value="false" />
+          <el-option :value="true" label="有" />
+          <el-option :value="false" label="无" />
         </el-select>
       </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
           v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
           class="!w-240px"
+          end-placeholder="结束日期"
+          start-placeholder="开始日期"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
         />
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+        <el-button
+          v-hasPermi="['trade:brokerage-user:create']"
+          plain
+          type="primary"
+          @click="openCreateUserForm"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="用户编号" align="center" prop="id" min-width="80px" />
-      <el-table-column label="头像" align="center" prop="avatar" width="70px">
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column align="center" label="用户编号" min-width="80px" prop="id" />
+      <el-table-column align="center" label="头像" prop="avatar" width="70px">
         <template #default="scope">
           <el-avatar :src="scope.row.avatar" />
         </template>
       </el-table-column>
-      <el-table-column label="昵称" align="center" prop="nickname" min-width="80px" />
-      <el-table-column label="推广人数" align="center" prop="brokerageUserCount" width="80px" />
+      <el-table-column align="center" label="昵称" min-width="80px" prop="nickname" />
+      <el-table-column align="center" label="推广人数" prop="brokerageUserCount" width="80px" />
       <el-table-column
-        label="推广订单数量"
         align="center"
-        prop="brokerageOrderCount"
+        label="推广订单数量"
         min-width="110px"
+        prop="brokerageOrderCount"
       />
       <el-table-column
-        label="推广订单金额"
+        :formatter="fenToYuanFormat"
         align="center"
-        prop="brokerageOrderPrice"
+        label="推广订单金额"
         min-width="110px"
-        :formatter="fenToYuanFormat"
+        prop="brokerageOrderPrice"
       />
       <el-table-column
-        label="已提现金额"
+        :formatter="fenToYuanFormat"
         align="center"
-        prop="withdrawPrice"
+        label="已提现金额"
         min-width="100px"
-        :formatter="fenToYuanFormat"
+        prop="withdrawPrice"
       />
-      <el-table-column label="已提现次数" align="center" prop="withdrawCount" min-width="100px" />
+      <el-table-column align="center" label="已提现次数" min-width="100px" prop="withdrawCount" />
       <el-table-column
-        label="未提现金额"
+        :formatter="fenToYuanFormat"
         align="center"
-        prop="price"
+        label="未提现金额"
         min-width="100px"
-        :formatter="fenToYuanFormat"
+        prop="price"
       />
       <el-table-column
-        label="冻结中佣金"
+        :formatter="fenToYuanFormat"
         align="center"
-        prop="frozenPrice"
+        label="冻结中佣金"
         min-width="100px"
-        :formatter="fenToYuanFormat"
+        prop="frozenPrice"
       />
-      <el-table-column label="推广资格" align="center" prop="brokerageEnabled" min-width="80px">
+      <el-table-column align="center" label="推广资格" min-width="80px" prop="brokerageEnabled">
         <template #default="scope">
           <el-switch
             v-model="scope.row.brokerageEnabled"
+            :disabled="!checkPermi(['trade:brokerage-user:update-bind-user'])"
             active-text="有"
             inactive-text="无"
             inline-prompt
-            :disabled="!checkPermi(['trade:brokerage-user:update-bind-user'])"
             @change="handleBrokerageEnabledChange(scope.row)"
           />
         </template>
       </el-table-column>
       <el-table-column
-        label="成为推广员时间"
+        :formatter="dateFormatter"
         align="center"
+        label="成为推广员时间"
         prop="brokerageTime"
-        :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="上级推广员编号" align="center" prop="bindUserId" width="150px" />
+      <el-table-column align="center" label="上级推广员编号" prop="bindUserId" width="150px" />
       <el-table-column
-        label="推广员绑定时间"
+        :formatter="dateFormatter"
         align="center"
+        label="推广员绑定时间"
         prop="bindUserTime"
-        :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" width="150px" fixed="right">
+      <el-table-column align="center" fixed="right" label="操作" width="150px">
         <template #default="scope">
           <el-dropdown
-            @command="(command) => handleCommand(command, scope.row)"
             v-hasPermi="[
               'trade:brokerage-user:user-query',
               'trade:brokerage-user:order-query',
               'trade:brokerage-user:update-bind-user',
               'trade:brokerage-user:clear-bind-user'
             ]"
+            @command="(command) => handleCommand(command, scope.row)"
           >
             <el-button link type="primary">
               <Icon icon="ep:d-arrow-right" />
@@ -139,28 +154,28 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item
-                  command="openBrokerageUserTable"
                   v-if="checkPermi(['trade:brokerage-user:user-query'])"
+                  command="openBrokerageUserTable"
                 >
                   推广人
                 </el-dropdown-item>
                 <el-dropdown-item
-                  command="openBrokerageOrderTable"
                   v-if="checkPermi(['trade:brokerage-user:order-query'])"
+                  command="openBrokerageOrderTable"
                 >
                   推广订单
                 </el-dropdown-item>
                 <el-dropdown-item
-                  command="openUpdateBindUserForm"
                   v-if="checkPermi(['trade:brokerage-user:update-bind-user'])"
+                  command="openUpdateBindUserForm"
                 >
                   修改上级推广人
                 </el-dropdown-item>
                 <el-dropdown-item
-                  command="handleClearBindUser"
                   v-if="
                     scope.row.bindUserId && checkPermi(['trade:brokerage-user:clear-bind-user'])
                   "
+                  command="handleClearBindUser"
                 >
                   清除上级推广人
                 </el-dropdown-item>
@@ -172,28 +187,31 @@
     </el-table>
     <!-- 分页 -->
     <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
       @pagination="getList"
     />
   </ContentWrap>
   <!-- 修改上级推广人表单 -->
-  <UpdateBindUserForm ref="updateBindUserFormRef" @success="getList" />
+  <BrokerageUserUpdateForm ref="updateFormRef" @success="getList" />
   <!-- 推广人列表 -->
-  <BrokerageUserListDialog ref="brokerageUserListDialogRef" />
+  <BrokerageUserListDialog ref="listDialogRef" />
   <!-- 推广订单列表 -->
-  <BrokerageOrderListDialog ref="brokerageOrderListDialogRef" />
+  <BrokerageOrderListDialog ref="orderDialogRef" />
+  <!-- 创建分销员 -->
+  <BrokerageUserCreateForm ref="createFormRef" @success="getList" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { dateFormatter } from '@/utils/formatTime'
 import * as BrokerageUserApi from '@/api/mall/trade/brokerage/user'
 import { checkPermi } from '@/utils/permission'
 import { fenToYuanFormat } from '@/utils/formatter'
-import UpdateBindUserForm from '@/views/mall/trade/brokerage/user/UpdateBindUserForm.vue'
+import BrokerageUserUpdateForm from '@/views/mall/trade/brokerage/user/BrokerageUserUpdateForm.vue'
 import BrokerageUserListDialog from '@/views/mall/trade/brokerage/user/BrokerageUserListDialog.vue'
 import BrokerageOrderListDialog from '@/views/mall/trade/brokerage/user/BrokerageOrderListDialog.vue'
+import BrokerageUserCreateForm from '@/views/mall/trade/brokerage/user/BrokerageUserCreateForm.vue'
 
 defineOptions({ name: 'TradeBrokerageUser' })
 
@@ -253,21 +271,27 @@ const handleCommand = (command: string, row: BrokerageUserApi.BrokerageUserVO) =
 }
 
 /** 打开推广人列表 */
-const brokerageUserListDialogRef = ref()
+const listDialogRef = ref()
 const openBrokerageUserTable = (id: number) => {
-  brokerageUserListDialogRef.value.open(id)
+  listDialogRef.value.open(id)
 }
 
 /** 打开推广订单列表 */
-const brokerageOrderListDialogRef = ref()
+const orderDialogRef = ref()
 const openBrokerageOrderTable = (id: number) => {
-  brokerageOrderListDialogRef.value.open(id)
+  orderDialogRef.value.open(id)
 }
 
 /** 打开表单：修改上级推广人 */
-const updateBindUserFormRef = ref()
+const updateFormRef = ref()
 const openUpdateBindUserForm = (row: BrokerageUserApi.BrokerageUserVO) => {
-  updateBindUserFormRef.value.open(row)
+  updateFormRef.value.open(row)
+}
+
+/** 创建分销员 */
+const createFormRef = ref<InstanceType<typeof CreateUserForm>>()
+const openCreateUserForm = () => {
+  createFormRef.value?.open()
 }
 
 /** 清除上级推广人 */

src/views/mp/draft/components/NewsForm.vue

@@ -144,7 +144,7 @@ const accountId = inject<number>('accountId')
 
 // ========== 文件上传 ==========
 const UPLOAD_URL = import.meta.env.VITE_BASE_URL + '/admin-api/mp/material/upload-permanent' // 上传永久素材的地址
-const editorConfig = createEditorConfig(UPLOAD_URL, accountId)
+const editorConfig = createEditorConfig(UPLOAD_URL, unref(accountId))
 
 // v-model=newsList
 const emit = defineEmits<{

src/views/report/goview/index.vue

@@ -8,5 +8,5 @@
 <script lang="ts" setup>
 defineOptions({ name: 'GoView' })
 
-const src = 'http://127.0.0.1:3000'
+const src = ref(import.meta.env.VITE_GOVIEW_URL)
 </script>

src/views/system/area/index.vue

@@ -16,6 +16,7 @@
         <template #default="{ height, width }">
           <!-- Virtualized Table 虚拟化表格：高性能，解决表格在大数据量下的卡顿问题 -->
           <el-table-v2
+            v-loading="loading"
             :columns="columns"
             :data="list"
             :width="width"
@@ -31,7 +32,7 @@
   <AreaForm ref="formRef" />
 </template>
 <script setup lang="tsx">
-import type { Column } from 'element-plus'
+import { Column } from 'element-plus'
 import AreaForm from './AreaForm.vue'
 import * as AreaApi from '@/api/system/area'
 
@@ -40,7 +41,7 @@ defineOptions({ name: 'SystemArea' })
 // 表格的 column 字段
 const columns: Column[] = [
   {
-    dataKey: 'id', // 需要渲染当前列的数据字段。例如说：{id:9527, name:'Mike'}，则填 id
+    dataKey: 'id', // 需要渲染当前列的数据字段
     title: '编号', // 显示在单元格表头的文本
     width: 400, // 当前列的宽度，必须设置
     fixed: true, // 是否固定列
@@ -52,14 +53,17 @@ const columns: Column[] = [
     width: 200
   }
 ]
-// 表格的数据
-const list = ref([])
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 表格的数据
 
-/**
- * 获得数据列表
- */
+/** 获得数据列表 */
 const getList = async () => {
-  list.value = await AreaApi.getAreaTree()
+  loading.value = true
+  try {
+    list.value = await AreaApi.getAreaTree()
+  } finally {
+    loading.value = false
+  }
 }
 
 /** 添加/修改操作 */

src/views/system/menu/index.vue

@@ -53,10 +53,6 @@
           <Icon class="mr-5px" icon="ep:plus" />
           新增
         </el-button>
-        <el-button plain type="danger" @click="toggleExpandAll">
-          <Icon class="mr-5px" icon="ep:sort" />
-          展开/折叠
-        </el-button>
         <el-button plain @click="refreshMenu">
           <Icon class="mr-5px" icon="ep:refresh" />
           刷新菜单缓存
@@ -67,65 +63,22 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table
-      v-if="refreshTable"
-      v-loading="loading"
-      :data="list"
-      :default-expand-all="isExpandAll"
-      row-key="id"
-    >
-      <el-table-column :show-overflow-tooltip="true" label="菜单名称" prop="name" width="250" />
-      <el-table-column align="center" label="图标" prop="icon" width="100">
-        <template #default="scope">
-          <Icon :icon="scope.row.icon" />
-        </template>
-      </el-table-column>
-      <el-table-column label="排序" prop="sort" width="60" />
-      <el-table-column :show-overflow-tooltip="true" label="权限标识" prop="permission" />
-      <el-table-column :show-overflow-tooltip="true" label="组件路径" prop="component" />
-      <el-table-column :show-overflow-tooltip="true" label="组件名称" prop="componentName" />
-      <el-table-column label="状态" prop="status">
-        <template #default="scope">
-          <el-switch
-            class="ml-4px"
-            v-model="scope.row.status"
-            v-hasPermi="['system:menu:update']"
-            :active-value="CommonStatusEnum.ENABLE"
-            :inactive-value="CommonStatusEnum.DISABLE"
-            :loading="menuStatusUpdating[scope.row.id]"
-            @change="(val) => handleStatusChanged(scope.row, val as number)"
+    <div style="height: 700px">
+      <!-- AutoResizer 自动调节大小 -->
+      <el-auto-resizer>
+        <template #default="{ height, width }">
+          <!-- Virtualized Table 虚拟化表格：高性能，解决表格在大数据量下的卡顿问题 -->
+          <el-table-v2
+            v-loading="loading"
+            :columns="columns"
+            :data="list"
+            :width="width"
+            :height="height"
+            expand-column-key="name"
           />
         </template>
-      </el-table-column>
-      <el-table-column align="center" label="操作">
-        <template #default="scope">
-          <el-button
-            v-hasPermi="['system:menu:update']"
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-          >
-            修改
-          </el-button>
-          <el-button
-            v-hasPermi="['system:menu:create']"
-            link
-            type="primary"
-            @click="openForm('create', undefined, scope.row.id)"
-          >
-            新增
-          </el-button>
-          <el-button
-            v-hasPermi="['system:menu:delete']"
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+      </el-auto-resizer>
+    </div>
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
@@ -138,6 +91,10 @@ import * as MenuApi from '@/api/system/menu'
 import { MenuVO } from '@/api/system/menu'
 import MenuForm from './MenuForm.vue'
 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import { h } from 'vue'
+import { Column, ElButton } from 'element-plus'
+import { Icon } from '@/components/Icon'
+import { hasPermission } from '@/directives/permission/hasPermi'
 import { CommonStatusEnum } from '@/utils/constants'
 
 defineOptions({ name: 'SystemMenu' })
@@ -146,6 +103,101 @@ const { wsCache } = useCache()
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
+// 表格的 column 字段
+const columns: Column[] = [
+  {
+    dataKey: 'name',
+    title: '菜单名称',
+    width: 250
+  },
+  {
+    dataKey: 'icon',
+    title: '图标',
+    width: 150,
+    cellRenderer: ({ rowData }) => {
+      return h(Icon, {
+        icon: rowData.icon
+      })
+    }
+  },
+  {
+    dataKey: 'sort',
+    title: '排序',
+    width: 100
+  },
+  {
+    dataKey: 'permission',
+    title: '权限标识',
+    width: 240
+  },
+  {
+    dataKey: 'component',
+    title: '组件路径',
+    width: 240
+  },
+  {
+    dataKey: 'componentName',
+    title: '组件名称',
+    width: 240
+  },
+  {
+    dataKey: 'status',
+    title: '状态',
+    width: 160,
+    cellRenderer: ({ rowData }) => {
+      return h(ElSwitch, {
+        modelValue: rowData.status,
+        activeValue: CommonStatusEnum.ENABLE,
+        inactiveValue: CommonStatusEnum.DISABLE,
+        loading: menuStatusUpdating.value[rowData.id],
+        disabled: !hasPermission(['system:menu:update']),
+        onChange: (val) => handleStatusChanged(rowData, val as number)
+      })
+    }
+  },
+  {
+    dataKey: 'operation',
+    title: '操作',
+    width: 200,
+    cellRenderer: ({ rowData }) => {
+      return h(
+        'div',
+        [
+          hasPermission(['system:menu:update']) &&
+            h(
+              ElButton,
+              {
+                link: true,
+                type: 'primary',
+                onClick: () => openForm('update', rowData.id)
+              },
+              '修改'
+            ),
+          hasPermission(['system:menu:create']) &&
+            h(
+              ElButton,
+              {
+                link: true,
+                type: 'primary',
+                onClick: () => openForm('create', undefined, rowData.id)
+              },
+              '新增'
+            ),
+          hasPermission(['system:menu:delete']) &&
+            h(
+              ElButton,
+              {
+                link: true,
+                type: 'danger',
+                onClick: () => handleDelete(rowData.id)
+              },
+              '删除'
+            )
+        ].filter(Boolean)
+      )
+    }
+  }
+]
 const loading = ref(true) // 列表的加载中
 const list = ref<any>([]) // 列表的数据
 const queryParams = reactive({
@@ -153,8 +205,6 @@ const queryParams = reactive({
   status: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const isExpandAll = ref(false) // 是否展开，默认全部折叠
-const refreshTable = ref(true) // 重新渲染表格状态
 
 /** 查询列表 */
 const getList = async () => {
@@ -184,15 +234,6 @@ const openForm = (type: string, id?: number, parentId?: number) => {
   formRef.value.open(type, id, parentId)
 }
 
-/** 展开/折叠操作 */
-const toggleExpandAll = () => {
-  refreshTable.value = false
-  isExpandAll.value = !isExpandAll.value
-  nextTick(() => {
-    refreshTable.value = true
-  })
-}
-
 /** 刷新菜单缓存按钮操作 */
 const refreshMenu = async () => {
   try {

types/env.d.ts

@@ -25,6 +25,7 @@ interface ImportMetaEnv {
   readonly VITE_DROP_CONSOLE: string
   readonly VITE_SOURCEMAP: string
   readonly VITE_OUT_DIR: string
+  readonly VITE_GOVIEW_URL: string
 }
 
 declare global {

vite.config.ts

@@ -44,7 +44,8 @@ export default ({command, mode}: ConfigEnv): UserConfig => {
             preprocessorOptions: {
                 scss: {
                     additionalData: '@use "@/styles/variables.scss" as *;',
-                    javascriptEnabled: true
+                    javascriptEnabled: true,
+                    silenceDeprecations: ["legacy-js-api"], // 参考自 https://stackoverflow.com/questions/78997907/the-legacy-js-api-is-deprecated-and-will-be-removed-in-dart-sass-2-0-0
                 }
             }
         },