!256 fix 修复 代码漏改问题

Merge pull request !256 from 疯狂的狮子Li/dev

.env.development

@@ -1,5 +1,6 @@
 # 页面标题
 VITE_APP_TITLE = RuoYi-Vue-Plus多租户管理系统
+VITE_APP_LOGO_TITLE = RuoYi-Vue-Plus
 
 # 开发环境配置
 VITE_APP_ENV = 'development'
@@ -28,5 +29,8 @@ VITE_APP_RSA_PRIVATE_KEY = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAmc3C
 # 客户端id
 VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
 
-# websocket 开关
-VITE_APP_WEBSOCKET = true
+# websocket 开关 默认使用sse推送
+VITE_APP_WEBSOCKET = false
+
+# sse 开关
+VITE_APP_SSE = true

.env.production

@@ -1,5 +1,6 @@
 # 页面标题
 VITE_APP_TITLE = RuoYi-Vue-Plus多租户管理系统
+VITE_APP_LOGO_TITLE = RuoYi-Vue-Plus
 
 # 生产环境配置
 VITE_APP_ENV = 'production'
@@ -31,5 +32,8 @@ VITE_APP_RSA_PRIVATE_KEY = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAmc3C
 # 客户端id
 VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
 
-# websocket 开关
-VITE_APP_WEBSOCKET = true
+# websocket 开关 默认使用sse推送
+VITE_APP_WEBSOCKET = false
+
+# sse 开关
+VITE_APP_SSE = true

.eslintignore

@@ -1,17 +0,0 @@
-*.sh
-node_modules
-*.md
-*.woff
-*.ttf
-.vscode
-.idea
-dist
-/public
-/docs
-.husky
-.local
-/bin
-.eslintrc.cjs
-prettier.config.js
-src/assets
-tailwind.config.js

.eslintrc-auto-import.json

@@ -1,46 +1,27 @@
 {
   "globals": {
-    "ComponentInternalInstance": true,
-    "TransferKey": true,
-    "ElFormRules": true,
-    "CheckboxValueType": true,
-    "PropType": true,
-    "DateModelType": true,
-    "UploadFile": true,
-    "ElFormInstance": true,
-    "ElTableInstance": true,
-    "ElTreeInstance": true,
-    "ElTreeSelectInstance": true,
-    "ElSelectInstance": true,
-    "ElUploadInstance": true,
-    "ElCardInstance": true,
-    "ElDialogInstance": true,
-    "ElInputInstance": true,
-    "ElInputNumberInstance": true,
-    "ElRadioInstance": true,
-    "ElRadioGroupInstance": true,
-    "ElRadioButtonInstance": true,
-    "ElCheckboxInstance": true,
-    "ElCheckboxGroupInstance": true,
-    "ElSwitchInstance": true,
-    "ElDatePickerInstance": true,
-    "ElTimePickerInstance": true,
-    "ElTimeSelectInstance": true,
-    "ElScrollbarInstance": true,
-    "ElCascaderInstance": true,
-    "ElColorPickerInstance": true,
-    "ElRateInstance": true,
-    "ElSliderInstance": true,
-    "useRouter": true,
-    "useRoute": true,
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "DirectiveBinding": true,
     "EffectScope": true,
-    "ElTable": true,
-    "ElSelect": true,
-    "ElUpload": true,
-    "ElForm": true,
-    "ElTree": true,
+    "ElLoading": true,
     "ElMessage": true,
     "ElMessageBox": true,
+    "ElNotification": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "PropType": true,
+    "Ref": true,
+    "Slot": true,
+    "Slots": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "acceptHMRUpdate": true,
     "asyncComputed": true,
     "autoResetRef": true,
     "computed": true,
@@ -54,36 +35,51 @@
     "createEventHook": true,
     "createGlobalState": true,
     "createInjectionState": true,
+    "createPinia": true,
     "createReactiveFn": true,
+    "createRef": true,
+    "createReusableTemplate": true,
     "createSharedComposable": true,
+    "createTemplatePromise": true,
     "createUnrefFn": true,
     "customRef": true,
     "debouncedRef": true,
     "debouncedWatch": true,
     "defineAsyncComponent": true,
     "defineComponent": true,
+    "defineStore": true,
     "eagerComputed": true,
     "effectScope": true,
     "extendRef": true,
+    "getActivePinia": true,
     "getCurrentInstance": true,
     "getCurrentScope": true,
     "h": true,
     "ignorableWatch": true,
     "inject": true,
+    "injectLocal": true,
     "isDefined": true,
     "isProxy": true,
     "isReactive": true,
     "isReadonly": true,
     "isRef": true,
     "makeDestructurable": true,
+    "mapActions": true,
+    "mapGetters": true,
+    "mapState": true,
+    "mapStores": true,
+    "mapWritableState": true,
     "markRaw": true,
     "nextTick": true,
     "onActivated": true,
     "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
     "onBeforeUnmount": true,
     "onBeforeUpdate": true,
     "onClickOutside": true,
     "onDeactivated": true,
+    "onElementRemoval": true,
     "onErrorCaptured": true,
     "onKeyStroke": true,
     "onLongPress": true,
@@ -95,8 +91,10 @@
     "onStartTyping": true,
     "onUnmounted": true,
     "onUpdated": true,
+    "onWatcherCleanup": true,
     "pausableWatch": true,
     "provide": true,
+    "provideLocal": true,
     "reactify": true,
     "reactifyObject": true,
     "reactive": true,
@@ -111,12 +109,14 @@
     "refThrottled": true,
     "refWithControl": true,
     "resolveComponent": true,
-    "resolveDirective": true,
     "resolveRef": true,
     "resolveUnref": true,
+    "setActivePinia": true,
+    "setMapStoreSuffix": true,
     "shallowReactive": true,
     "shallowReadonly": true,
     "shallowRef": true,
+    "storeToRefs": true,
     "syncRef": true,
     "syncRefs": true,
     "templateRef": true,
@@ -126,6 +126,7 @@
     "toReactive": true,
     "toRef": true,
     "toRefs": true,
+    "toValue": true,
     "triggerRef": true,
     "tryOnBeforeMount": true,
     "tryOnBeforeUnmount": true,
@@ -136,11 +137,14 @@
     "unrefElement": true,
     "until": true,
     "useActiveElement": true,
+    "useAnimate": true,
+    "useArrayDifference": true,
     "useArrayEvery": true,
     "useArrayFilter": true,
     "useArrayFind": true,
     "useArrayFindIndex": true,
     "useArrayFindLast": true,
+    "useArrayIncludes": true,
     "useArrayJoin": true,
     "useArrayMap": true,
     "useArrayReduce": true,
@@ -157,9 +161,11 @@
     "useBrowserLocation": true,
     "useCached": true,
     "useClipboard": true,
+    "useClipboardItems": true,
     "useCloned": true,
     "useColorMode": true,
     "useConfirmDialog": true,
+    "useCountdown": true,
     "useCounter": true,
     "useCssModule": true,
     "useCssVar": true,
@@ -198,6 +204,7 @@
     "useFullscreen": true,
     "useGamepad": true,
     "useGeolocation": true,
+    "useId": true,
     "useIdle": true,
     "useImage": true,
     "useInfiniteScroll": true,
@@ -206,6 +213,7 @@
     "useIntervalFn": true,
     "useKeyModifier": true,
     "useLastChanged": true,
+    "useLink": true,
     "useLocalStorage": true,
     "useMagicKeys": true,
     "useManualRefHistory": true,
@@ -213,6 +221,7 @@
     "useMediaQuery": true,
     "useMemoize": true,
     "useMemory": true,
+    "useModel": true,
     "useMounted": true,
     "useMouse": true,
     "useMouseInElement": true,
@@ -226,6 +235,8 @@
     "useOnline": true,
     "usePageLeave": true,
     "useParallax": true,
+    "useParentElement": true,
+    "usePerformanceObserver": true,
     "usePermission": true,
     "usePointer": true,
     "usePointerLock": true,
@@ -235,10 +246,14 @@
     "usePreferredDark": true,
     "usePreferredLanguages": true,
     "usePreferredReducedMotion": true,
+    "usePreferredReducedTransparency": true,
     "usePrevious": true,
     "useRafFn": true,
     "useRefHistory": true,
     "useResizeObserver": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSSRWidth": true,
     "useScreenOrientation": true,
     "useScreenSafeArea": true,
     "useScriptTag": true,
@@ -256,6 +271,7 @@
     "useStyleTag": true,
     "useSupported": true,
     "useSwipe": true,
+    "useTemplateRef": true,
     "useTemplateRefsList": true,
     "useTextDirection": true,
     "useTextSelection": true,
@@ -264,6 +280,7 @@
     "useThrottleFn": true,
     "useThrottledRefHistory": true,
     "useTimeAgo": true,
+    "useTimeAgoIntl": true,
     "useTimeout": true,
     "useTimeoutFn": true,
     "useTimeoutPoll": true,
@@ -291,8 +308,10 @@
     "watchArray": true,
     "watchAtMost": true,
     "watchDebounced": true,
+    "watchDeep": true,
     "watchEffect": true,
     "watchIgnorable": true,
+    "watchImmediate": true,
     "watchOnce": true,
     "watchPausable": true,
     "watchPostEffect": true,
@@ -300,13 +319,6 @@
     "watchThrottled": true,
     "watchTriggerable": true,
     "watchWithFilter": true,
-    "whenever": true,
-    "ImportOption": true,
-    "TreeType": true,
-    "FieldOption": true,
-    "PageData": true,
-    "storeToRefs": true,
-    "DictDataOption": true,
-    "UploadOption": true
+    "whenever": true
   }
 }

.eslintrc.cjs

@@ -1,51 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    node: true,
-    es6: true
-  },
-  parser: 'vue-eslint-parser',
-  extends: [
-    'plugin:vue/vue3-recommended',
-    './.eslintrc-auto-import.json',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-    'plugin:prettier/recommended'
-  ],
-  parserOptions: {
-    ecmaVersion: '2020',
-    sourceType: 'module',
-    project: './tsconfig.*?.json',
-    parser: '@typescript-eslint/parser'
-  },
-  plugins: ['vue', '@typescript-eslint', 'import', 'promise', 'node', 'prettier'],
-  rules: {
-    '@typescript-eslint/no-empty-function': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
-    '@typescript-eslint/no-this-alias': 'off',
-
-    // vue
-    'vue/multi-word-component-names': 'off',
-    'vue/valid-define-props': 'off',
-    'vue/no-v-model-argument': 'off',
-    'prefer-rest-params': 'off',
-    // prettier
-    'prettier/prettier': 'error',
-    '@typescript-eslint/ban-types': [
-      'error',
-      {
-        // 关闭空类型检查 {}
-        extendDefaults: true,
-        types: {
-          '{}': false,
-          Function: false
-        }
-      }
-    ]
-  },
-  globals: {
-    DialogOption: 'readonly',
-    OptionType: 'readonly'
-  }
-};

README.md

@@ -1,17 +1,24 @@
 ## 平台简介
 
 - 本仓库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [TS](https://www.typescriptlang.org/) + [Element Plus](https://element-plus.org/zh-CN) + [Vite](https://cn.vitejs.dev) 版本。
-- 成员项目: 基于 vben(ant-design-vue) 的前端项目 [ruoyi-plus-vben](https://gitee.com/dapppp/ruoyi-plus-vben)
-- 配套后端代码仓库地址
-- [RuoYi-Vue-Plus 5.X(注意版本号)](https://gitee.com/dromara/RuoYi-Vue-Plus)
-- [RuoYi-Cloud-Plus 2.X(注意版本号)](https://gitee.com/dromara/RuoYi-Cloud-Plus)
+- 成员项目: 基于 vben5(ant-design-vue) 的前端项目 [ruoyi-plus-vben5](https://gitee.com/dapppp/ruoyi-plus-vben5)
+- 成员项目: 基于soybean 的前端项目 [ruoyi-plus-soybean](https://gitee.com/xlsea/ruoyi-plus-soybean)
+
+## 配套后端代码仓库地址
+
+| 介绍         | 项目名              | 项目地址                                                                                                                                                                           |
+|------------|:-----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| 🔥 分布式集群框架 | RuoYi-Vue-Plus   | - [Gitee](https://gitee.com/dromara/RuoYi-Vue-Plus)<br> - [GitHub](https://github.com/dromara/RuoYi-Vue-Plus)<br> - [GitCode](https://gitcode.com/dromara/RuoYi-Vue-Plus)      |
+| 🔥 微服务框架   | RuoYi-Cloud-Plus | - [Gitee](https://gitee.com/dromara/RuoYi-Cloud-Plus)<br>- [GitHub](https://github.com/dromara/RuoYi-Cloud-Plus)<br> - [GitCode](https://gitcode.com/dromara/RuoYi-Cloud-Plus) |
+
+## 分支说明
+
+- ts分支(稳定发布主分支 生产可用)
+- dev分支(开发分支 开发过程中使用)
 
 ## 前端运行
 
 ```bash
-# 克隆项目
-git clone https://gitee.com/JavaLionLi/plus-ui.git
-
 # 安装依赖
 npm install --registry=https://registry.npmmirror.com
 

eslint.config.ts

@@ -0,0 +1,44 @@
+import pluginVue from 'eslint-plugin-vue';
+import globals from 'globals';
+import prettier from 'eslint-plugin-prettier';
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{js,cjs,ts,mts,tsx,vue}']
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**']
+  },
+  {
+    languageOptions: {
+      globals: globals.browser
+    }
+  },
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+  skipFormatting,
+  {
+    plugins: { prettier },
+    rules: {
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/no-this-alias': 'off',
+      // vue
+      'vue/multi-word-component-names': 'off',
+      'vue/valid-define-props': 'off',
+      'vue/no-v-model-argument': 'off',
+      'prefer-rest-params': 'off',
+      // prettier
+      'prettier/prettier': 'error',
+      // 允许使用空Object类型 {}
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off'
+    }
+  }
+);

index.html

@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
     <link rel="icon" href="/favicon.ico" />
-    <title>RuoYi-Vue-Plus多租户管理系统</title>
+    <title>%VITE_APP_TITLE%</title>
     <!--[if lt IE 11
       ]><script>
         window.location.href = '/html/ie.html';

package.json

@@ -1,6 +1,7 @@
 {
+  "$schema": "https://json.schemastore.org/package",
   "name": "ruoyi-vue-plus",
-  "version": "5.2.0",
+  "version": "5.5.2-2.5.2",
   "description": "RuoYi-Vue-Plus多租户管理系统",
   "author": "LionLi",
   "license": "MIT",
@@ -10,7 +11,8 @@
     "build:prod": "vite build --mode production",
     "build:dev": "vite build --mode development",
     "preview": "vite preview",
-    "lint:eslint": "eslint  --fix --ext .ts,.js,.vue ./src ",
+    "lint:eslint": "eslint",
+    "lint:eslint:fix": "eslint --fix",
     "prettier": "prettier --write ."
   },
   "repository": {
@@ -18,74 +20,77 @@
     "url": "https://gitee.com/JavaLionLi/plus-ui.git"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "2.3.1",
-    "@highlightjs/vue-plugin": "2.1.0",
+    "@element-plus/icons-vue": "2.3.2",
+    "@highlightjs/vue-plugin": "2.1.2",
     "@vueup/vue-quill": "1.2.0",
-    "@vueuse/core": "10.9.0",
+    "@vueuse/core": "13.9.0",
     "animate.css": "4.1.1",
     "await-to-js": "3.0.0",
-    "axios": "1.6.8",
-    "bpmn-js": "16.4.0",
+    "axios": "1.13.1",
     "crypto-js": "4.2.0",
-    "diagram-js": "12.3.0",
-    "didi": "9.0.2",
-    "echarts": "5.5.0",
-    "element-plus": "2.7.5",
+    "echarts": "5.6.0",
+    "element-plus": "2.11.7",
     "file-saver": "2.0.5",
-    "fuse.js": "7.0.0",
-    "highlight.js": "11.9.0",
-    "image-conversion": "^2.1.1",
+    "highlight.js": "11.11.1",
+    "image-conversion": "2.1.1",
     "js-cookie": "3.0.5",
-    "jsencrypt": "3.3.2",
+    "jsencrypt": "3.5.4",
     "nprogress": "0.2.0",
-    "pinia": "2.1.7",
+    "pinia": "3.0.3",
     "screenfull": "6.0.2",
-    "vue": "3.4.25",
-    "vue-cropper": "1.1.1",
-    "vue-i18n": "9.10.2",
-    "vue-router": "4.3.2",
-    "vue-types": "5.1.1",
-    "vxe-table": "4.5.22"
+    "vue": "3.5.22",
+    "vue-cropper": "1.1.4",
+    "vue-i18n": "11.1.12",
+    "vue-json-pretty": "2.6.0",
+    "vue-router": "4.6.3",
+    "vue-types": "6.0.0",
+    "vxe-table": "4.17.7"
   },
   "devDependencies": {
-    "@iconify/json": "2.2.201",
-    "@intlify/unplugin-vue-i18n": "3.0.1",
+    "@iconify/json": "^2.2.403",
     "@types/crypto-js": "4.2.2",
     "@types/file-saver": "2.0.7",
     "@types/js-cookie": "3.0.6",
-    "@types/node": "18.18.2",
+    "@types/node": "^22.19.0",
     "@types/nprogress": "0.2.3",
-    "@typescript-eslint/eslint-plugin": "7.3.1",
-    "@typescript-eslint/parser": "7.3.1",
-    "@unocss/preset-attributify": "0.58.6",
-    "@unocss/preset-icons": "0.58.6",
-    "@unocss/preset-uno": "0.58.6",
-    "@vitejs/plugin-vue": "5.0.4",
-    "@vue/compiler-sfc": "3.4.23",
-    "autoprefixer": "10.4.18",
-    "eslint": "8.57.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-define-config": "2.1.0",
-    "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-vue": "9.23.0",
-    "fast-glob": "3.3.2",
-    "postcss": "8.4.36",
-    "prettier": "3.2.5",
-    "sass": "1.72.0",
-    "typescript": "5.4.5",
-    "unocss": "0.58.6",
-    "unplugin-auto-import": "0.17.5",
-    "unplugin-icons": "0.18.5",
-    "unplugin-vue-components": "0.26.0",
+    "@unocss/preset-attributify": "66.5.4",
+    "@unocss/preset-icons": "66.5.4",
+    "@unocss/preset-uno": "66.5.4",
+    "@vitejs/plugin-vue": "5.2.4",
+    "@vue/compiler-sfc": "3.5.22",
+    "@vue/eslint-config-prettier": "10.2.0",
+    "@vue/eslint-config-typescript": "14.6.0",
+    "autoprefixer": "10.4.21",
+    "eslint": "9.39.1",
+    "eslint-plugin-prettier": "5.5.4",
+    "eslint-plugin-vue": "9.33.0",
+    "globals": "16.5.0",
+    "prettier": "3.6.2",
+    "sass": "1.93.3",
+    "typescript": "~5.9.3",
+    "unocss": "66.5.4",
+    "unplugin-auto-import": "19.3.0",
+    "unplugin-icons": "22.5.0",
+    "unplugin-vue-components": "28.8.0",
     "unplugin-vue-setup-extend-plus": "1.0.1",
-    "vite": "5.2.10",
+    "vite": "6.4.1",
     "vite-plugin-compression": "0.5.1",
-    "vite-plugin-svg-icons": "2.0.1",
-    "vitest": "1.5.0",
-    "vue-eslint-parser": "9.4.2",
-    "vue-tsc": "2.0.13"
-  }
+    "vite-plugin-svg-icons-ng": "^1.5.2",
+    "vite-plugin-vue-devtools": "8.0.3",
+    "vitest": "3.2.4",
+    "vue-tsc": "^2.2.12"
+  },
+  "overrides": {
+    "quill": "2.0.2"
+  },
+  "engines": {
+    "node": ">=18.18.0",
+    "npm": ">=8.9.0"
+  },
+  "browserslist": [
+    "Chrome >= 87",
+    "Edge >= 88",
+    "Safari >= 14",
+    "Firefox >= 78"
+  ]
 }

src/App.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings';
+import { useSettingsStore } from '@/store/modules/settings';
 import { handleThemeStyle } from '@/utils/theme';
-import useAppStore from '@/store/modules/app';
+import { useAppStore } from '@/store/modules/app';
 
 const appStore = useAppStore();
 

src/api/login.ts

@@ -51,6 +51,12 @@ export function register(data: any) {
  * 注销
  */
 export function logout() {
+  if (import.meta.env.VITE_APP_SSE === 'true') {
+    request({
+      url: '/resource/sse/close',
+      method: 'get'
+    });
+  }
   return request({
     url: '/auth/logout',
     method: 'post'
@@ -96,11 +102,11 @@ export function getInfo(): AxiosPromise<UserInfo> {
 }
 
 // 获取租户列表
-export function getTenantList(): AxiosPromise<TenantInfo> {
+export function getTenantList(isToken: boolean): AxiosPromise<TenantInfo> {
   return request({
     url: '/auth/tenant/list',
     headers: {
-      isToken: false
+      isToken: isToken
     },
     method: 'get'
   });

src/api/monitor/online/index.ts

@@ -30,7 +30,7 @@ export function getOnline() {
 // 删除当前在线设备
 export function delOnline(tokenId: string) {
   return request({
-    url: '/monitor/online/' + tokenId,
-    method: 'post'
+    url: '/monitor/online/myself/' + tokenId,
+    method: 'delete'
   });
 }

src/api/system/dept/index.ts

@@ -1,6 +1,6 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
-import { DeptForm, DeptQuery, DeptVO } from './types';
+import { DeptForm, DeptQuery, DeptTreeVO, DeptVO } from './types';
 
 // 查询部门列表
 export const listDept = (query?: DeptQuery) => {
@@ -11,6 +11,17 @@ export const listDept = (query?: DeptQuery) => {
   });
 };
 
+/**
+ * 通过deptIds查询部门
+ * @param deptIds
+ */
+export const optionSelect = (deptIds: (number | string)[]): AxiosPromise<DeptVO[]> => {
+  return request({
+    url: '/system/dept/optionselect?deptIds=' + deptIds,
+    method: 'get'
+  });
+};
+
 // 查询部门列表（排除节点）
 export const listDeptExcludeChild = (deptId: string | number): AxiosPromise<DeptVO[]> => {
   return request({
@@ -27,14 +38,6 @@ export const getDept = (deptId: string | number): AxiosPromise<DeptVO> => {
   });
 };
 
-// 查询部门下拉树结构
-export const treeselect = (): AxiosPromise<DeptVO[]> => {
-  return request({
-    url: '/system/dept/treeselect',
-    method: 'get'
-  });
-};
-
 // 新增部门
 export const addDept = (data: DeptForm) => {
   return request({

src/api/system/dept/types.ts

@@ -28,6 +28,18 @@ export interface DeptVO extends BaseEntity {
   menuId: string | number;
 }
 
+/**
+ * 部门类型
+ */
+export interface DeptTreeVO extends BaseEntity {
+  id: number | string;
+  label: string;
+  parentId: number | string;
+  weight: number;
+  children: DeptTreeVO[];
+  disabled: boolean;
+}
+
 /**
  * 部门表单类型
  */

src/api/system/menu/index.ts

@@ -68,3 +68,11 @@ export const delMenu = (menuId: string | number) => {
     method: 'delete'
   });
 };
+
+// 级联删除菜单
+export const cascadeDelMenu = (menuIds: Array<string | number>) => {
+  return request({
+    url: '/system/menu/cascade/' + menuIds,
+    method: 'delete'
+  });
+};

src/api/system/post/index.ts

@@ -1,6 +1,7 @@
 import request from '@/utils/request';
 import { PostForm, PostQuery, PostVO } from './types';
 import { AxiosPromise } from 'axios';
+import { DeptTreeVO } from '../dept/types';
 
 // 查询岗位列表
 export function listPost(query: PostQuery): AxiosPromise<PostVO[]> {
@@ -56,3 +57,13 @@ export function delPost(postId: string | number | (string | number)[]) {
     method: 'delete'
   });
 }
+
+/**
+ * 查询部门下拉树结构
+ */
+export const deptTreeSelect = (): AxiosPromise<DeptTreeVO[]> => {
+  return request({
+    url: '/system/post/deptTree',
+    method: 'get'
+  });
+};

src/api/system/social/auth.ts

@@ -1,7 +1,7 @@
 import request from '@/utils/request';
 
-// 绑定账号
-export function authBinding(source: string, tenantId: string) {
+// 获取跳转URL
+export function authRouterUrl(source: string, tenantId: string) {
   return request({
     url: '/auth/binding/' + source,
     method: 'get',

src/api/system/tenant/index.ts

@@ -91,3 +91,19 @@ export function syncTenantPackage(tenantId: string | number, packageId: string |
     params: data
   });
 }
+
+// 同步租户字典
+export function syncTenantDict() {
+  return request({
+    url: '/system/tenant/syncTenantDict',
+    method: 'get'
+  });
+}
+
+// 同步租户字典
+export function syncTenantConfig() {
+  return request({
+    url: '/system/tenant/syncTenantConfig',
+    method: 'get'
+  });
+}

src/api/system/user/index.ts

@@ -1,4 +1,4 @@
-import { DeptVO } from './../dept/types';
+import { DeptTreeVO } from './../dept/types';
 import { RoleVO } from '@/api/system/role/types';
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
@@ -202,7 +202,7 @@ export const listUserByDeptId = (deptId: string | number): AxiosPromise<UserVO[]
 /**
  * 查询部门下拉树结构
  */
-export const deptTreeSelect = (): AxiosPromise<DeptVO[]> => {
+export const deptTreeSelect = (): AxiosPromise<DeptTreeVO[]> => {
   return request({
     url: '/system/user/deptTree',
     method: 'get'

src/api/system/user/types.ts

@@ -15,10 +15,12 @@ export interface UserInfo {
  */
 export interface UserQuery extends PageQuery {
   userName?: string;
+  nickName?: string;
   phonenumber?: string;
   status?: string;
   deptId?: string | number;
   roleId?: string | number;
+  userIds?:  string | number | (string | number)[] | undefined;
 }
 
 /**

src/api/workflow/category/index.ts

@@ -1,6 +1,6 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
-import { CategoryVO, CategoryForm, CategoryQuery } from '@/api/workflow/category/types';
+import { CategoryVO, CategoryForm, CategoryQuery, CategoryTreeVO } from '@/api/workflow/category/types';
 
 /**
  * 查询流程分类列表
@@ -18,11 +18,11 @@ export const listCategory = (query?: CategoryQuery): AxiosPromise<CategoryVO[]>
 
 /**
  * 查询流程分类详细
- * @param id
+ * @param categoryId
  */
-export const getCategory = (id: string | number): AxiosPromise<CategoryVO> => {
+export const getCategory = (categoryId: string | number): AxiosPromise<CategoryVO> => {
   return request({
-    url: '/workflow/category/' + id,
+    url: '/workflow/category/' + categoryId,
     method: 'get'
   });
 };
@@ -53,11 +53,24 @@ export const updateCategory = (data: CategoryForm) => {
 
 /**
  * 删除流程分类
- * @param id
+ * @param categoryId
  */
-export const delCategory = (id: string | number | Array<string | number>) => {
+export const delCategory = (categoryId: string | number | Array<string | number>) => {
   return request({
-    url: '/workflow/category/' + id,
+    url: '/workflow/category/' + categoryId,
     method: 'delete'
   });
 };
+
+/**
+ * 获取流程分类树列表
+ * @param query 流程实例id
+ * @returns
+ */
+export const categoryTree = (query?: CategoryForm): AxiosPromise<CategoryTreeVO[]> => {
+  return request({
+    url: `/workflow/category/categoryTree`,
+    method: 'get',
+    params: query
+  });
+};

src/api/workflow/category/types.ts

@@ -1,18 +1,15 @@
+export interface CategoryTreeVO {
+  id: number | string;
+  label: string;
+  parentId: number | string;
+  weight: number;
+  children: CategoryTreeVO[];
+}
 export interface CategoryVO {
   /**
-   * 主键
+   * 流程分类ID
    */
-  id: string;
-
-  /**
-   * 分类名称
-   */
-  categoryName: string;
-
-  /**
-   * 分类编码
-   */
-  categoryCode: string;
+  categoryId: string | number;
 
   /**
    * 父级id
@@ -20,48 +17,51 @@ export interface CategoryVO {
   parentId: string | number;
 
   /**
-   * 排序
+   * 流程分类名称
    */
-  sortNum: number;
+  categoryName: string;
 
-  children?: CategoryVO[];
+  /**
+   * 显示顺序
+   */
+  orderNum: number;
+
+  /**
+   * 创建时间
+   */
+  createTime: string;
+
+  /**
+   * 子对象
+   */
+  children: CategoryVO[];
 }
 
 export interface CategoryForm extends BaseEntity {
   /**
-   * 主键
+   * 流程分类ID
    */
-  id?: string | number;
+  categoryId?: string | number;
 
   /**
-   * 分类名称
+   * 流程分类名称
    */
   categoryName?: string;
 
   /**
-   * 分类编码
-   */
-  categoryCode?: string;
-
-  /**
-   * 父级id
+   * 父流程分类id
    */
   parentId?: string | number;
 
   /**
-   * 排序
+   * 显示顺序
    */
-  sortNum?: number;
+  orderNum?: number;
 }
 
-export interface CategoryQuery extends PageQuery {
+export interface CategoryQuery {
   /**
-   * 分类名称
+   * 流程分类名称
    */
   categoryName?: string;
-
-  /**
-   * 分类编码
-   */
-  categoryCode?: string;
 }

src/api/workflow/definition/index.ts

@@ -0,0 +1,170 @@
+import request from '@/utils/request';
+import { FlowDefinitionQuery, definitionXmlVO, FlowDefinitionForm, FlowDefinitionVo } from '@/api/workflow/definition/types';
+import { AxiosPromise } from 'axios';
+
+/**
+ * 获取流程定义列表
+ * @param query 流程实例id
+ * @returns
+ */
+export const listDefinition = (query: FlowDefinitionQuery): AxiosPromise<FlowDefinitionVo[]> => {
+  return request({
+    url: `/workflow/definition/list`,
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询未发布的流程定义列表
+ * @param query 流程实例id
+ * @returns
+ */
+export const unPublishList = (query: FlowDefinitionQuery): AxiosPromise<FlowDefinitionVo[]> => {
+  return request({
+    url: `/workflow/definition/unPublishList`,
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 通过流程定义id获取xml
+ * @param definitionId 流程定义id
+ * @returns
+ */
+export const definitionXml = (definitionId: string): AxiosPromise<definitionXmlVO> => {
+  return request({
+    url: `/workflow/definition/definitionXml/${definitionId}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 删除流程定义
+ * @param id 流程定义id
+ * @returns
+ */
+export const deleteDefinition = (id: string | string[]) => {
+  return request({
+    url: `/workflow/definition/${id}`,
+    method: 'delete'
+  });
+};
+
+/**
+ * 挂起/激活
+ * @param definitionId 流程定义id
+ * @param activityStatus 状态
+ * @returns
+ */
+export const active = (definitionId: string, activityStatus: boolean) => {
+  return request({
+    url: `/workflow/definition/active/${definitionId}`,
+    method: 'put',
+    params: {
+      active: activityStatus
+    }
+  });
+};
+
+/**
+ * 通过zip或xml部署流程定义
+ * @returns
+ */
+export function importDef(data: any) {
+  return request({
+    url: '/workflow/definition/importDef',
+    method: 'post',
+    data: data,
+    headers: {
+      repeatSubmit: false
+    }
+  });
+}
+
+/**
+ * 发布流程定义
+ * @param id 流程定义id
+ * @returns
+ */
+export const publish = (id: string) => {
+  return request({
+    url: `/workflow/definition/publish/${id}`,
+    method: 'put'
+  });
+};
+
+/**
+ * 取消发布流程定义
+ * @param id 流程定义id
+ * @returns
+ */
+export const unPublish = (id: string) => {
+  return request({
+    url: `/workflow/definition/unPublish/${id}`,
+    method: 'put'
+  });
+};
+
+/**
+ * 获取流程定义xml字符串
+ * @param id 流程定义id
+ * @returns
+ */
+export const xmlString = (id: string) => {
+  return request({
+    url: `/workflow/definition/xmlString/${id}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增
+ * @param data 参数
+ * @returns
+ */
+export const add = (data: FlowDefinitionForm) => {
+  return request({
+    url: `/workflow/definition`,
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改
+ * @param data 参数
+ * @returns
+ */
+export const edit = (data: FlowDefinitionForm) => {
+  return request({
+    url: `/workflow/definition`,
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 查询详情
+ * @param id 参数
+ * @returns
+ */
+export const getInfo = (id: number | string) => {
+  return request({
+    url: `/workflow/definition/${id}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 复制流程定义
+ * @param id 流程定义id
+ * @returns
+ */
+export const copy = (id: string) => {
+  return request({
+    url: `/workflow/definition/copy/${id}`,
+    method: 'post'
+  });
+};

src/api/workflow/definition/types.ts

@@ -0,0 +1,34 @@
+export interface FlowDefinitionQuery extends PageQuery {
+  flowCode?: string;
+  flowName?: string;
+  category: string | number;
+  isPublish?: number;
+}
+
+export interface FlowDefinitionVo {
+  id: string;
+  flowName: string;
+  flowCode: string;
+  formPath: string;
+  version: string;
+  isPublish: number;
+  activityStatus: number;
+  createTime: Date;
+  updateTime: Date;
+}
+
+export interface FlowDefinitionForm {
+  id: string;
+  flowName: string;
+  flowCode: string;
+  category: string;
+  ext: string;
+  formPath: string;
+  formCustom: string;
+  modelValue: string;
+}
+
+export interface definitionXmlVO {
+  xml: string[];
+  xmlStr: string;
+}

src/api/workflow/definitionConfig/index.ts

@@ -1,49 +0,0 @@
-import request from '@/utils/request';
-import { AxiosPromise } from 'axios';
-import { DefinitionConfigVO, DefinitionConfigForm } from '@/api/workflow/definitionConfig/types';
-
-/**
- * 查询表单配置详细
- * @param definitionId
- */
-export const getByDefId = (definitionId: string | number): AxiosPromise<DefinitionConfigVO> => {
-  return request({
-    url: '/workflow/definitionConfig/getByDefId/' + definitionId,
-    method: 'get'
-  });
-};
-
-/**
- * 新增表单配置
- * @param data
- */
-export const saveOrUpdate = (data: DefinitionConfigForm) => {
-  return request({
-    url: '/workflow/definitionConfig/saveOrUpdate',
-    method: 'post',
-    data: data
-  });
-};
-
-/**
- * 删除表单配置
- * @param id
- */
-export const deldefinitionConfig = (id: string | number | Array<string | number>) => {
-  return request({
-    url: '/workflow/definitionConfig/' + id,
-    method: 'delete'
-  });
-};
-
-/**
- * 查询流程定义配置排除当前查询的流程定义
- * @param tableName
- * @param definitionId
- */
-export const getByTableNameNotDefId = (tableName: string, definitionId: string | number) => {
-  return request({
-    url: `/workflow/definitionConfig/getByTableNameNotDefId/${tableName}/${definitionId}`,
-    method: 'get'
-  });
-};

src/api/workflow/definitionConfig/types.ts

@@ -1,102 +0,0 @@
-import { FormManageVO } from '@/api/workflow/formManage/types';
-
-export interface DefinitionConfigVO {
-  /**
-   * 主键
-   */
-  id: string | number;
-
-  /**
-   * 表名
-   */
-  tableName?: string;
-
-  /**
-   * 流程定义ID
-   */
-  definitionId: string | number;
-
-  /**
-   * 流程KEY
-   */
-  processKey: string;
-
-  /**
-   * 流程版本
-   */
-  version?: string | number;
-
-  /**
-   * 备注
-   */
-  remark: string;
-
-  /**
-   * 表单管理
-   */
-  wfFormManageVo: FormManageVO;
-}
-
-export interface DefinitionConfigForm extends BaseEntity {
-  /**
-   * 主键
-   */
-  id?: string | number;
-
-  /**
-   * 表名
-   */
-  tableName?: string;
-
-  /**
-   * 流程定义ID
-   */
-  definitionId?: string | number;
-
-  /**
-   * 流程KEY
-   */
-  processKey?: string;
-
-  /**
-   * 流程版本
-   */
-  version?: string | number;
-
-  /**
-   * 备注
-   */
-  remark?: string;
-
-  /**
-   * 表单管理
-   */
-  wfFormManageVo?: FormManageVO;
-}
-
-export interface DefinitionConfigQuery extends PageQuery {
-  /**
-   * 表名
-   */
-  tableName?: string;
-
-  /**
-   * 流程定义ID
-   */
-  definitionId?: string | number;
-
-  /**
-   * 流程KEY
-   */
-  processKey?: string;
-
-  /**
-   * 流程版本
-   */
-  version?: string | number;
-
-  /**
-   * 表单管理
-   */
-  wfFormManageVo: FormManageVO;
-}

src/api/workflow/formManage/index.ts

@@ -1,76 +0,0 @@
-import request from '@/utils/request';
-import { AxiosPromise } from 'axios';
-import { FormManageVO, FormManageForm, FormManageQuery } from '@/api/workflow/formManage/types';
-
-/**
- * 查询表单管理列表
- * @param query
- * @returns {*}
- */
-
-export const listFormManage = (query?: FormManageQuery): AxiosPromise<FormManageVO[]> => {
-  return request({
-    url: '/workflow/formManage/list',
-    method: 'get',
-    params: query
-  });
-};
-
-/**
- * 查询表单管理列表
- * @param query
- * @returns {*}
- */
-
-export const selectListFormManage = (): AxiosPromise<FormManageVO[]> => {
-  return request({
-    url: '/workflow/formManage/list/selectList',
-    method: 'get',
-  });
-};
-
-/**
- * 查询表单管理详细
- * @param id
- */
-export const getFormManage = (id: string | number): AxiosPromise<FormManageVO> => {
-  return request({
-    url: '/workflow/formManage/' + id,
-    method: 'get'
-  });
-};
-
-/**
- * 新增表单管理
- * @param data
- */
-export const addFormManage = (data: FormManageForm) => {
-  return request({
-    url: '/workflow/formManage',
-    method: 'post',
-    data: data
-  });
-};
-
-/**
- * 修改表单管理
- * @param data
- */
-export const updateFormManage = (data: FormManageForm) => {
-  return request({
-    url: '/workflow/formManage',
-    method: 'put',
-    data: data
-  });
-};
-
-/**
- * 删除表单管理
- * @param id
- */
-export const delFormManage = (id: string | number | Array<string | number>) => {
-  return request({
-    url: '/workflow/formManage/' + id,
-    method: 'delete'
-  });
-};

src/api/workflow/formManage/types.ts

@@ -1,69 +0,0 @@
-export interface FormManageVO {
-  /**
-   * 主键
-   */
-  id: string | number;
-
-  /**
-   * 表单名称
-   */
-  formName: string;
-
-  /**
-   * 表单类型
-   */
-  formType: string;
-  /**
-   * 表单类型名称
-   */
-  formTypeName: string;
-
-  /**
-   * 路由地址/表单ID
-   */
-  router: string;
-
-  /**
-   * 备注
-   */
-  remork: string;
-}
-
-export interface FormManageForm extends BaseEntity {
-  /**
-   * 主键
-   */
-  id?: string | number;
-
-  /**
-   * 表单名称
-   */
-  formName?: string;
-
-  /**
-   * 表单类型
-   */
-  formType?: string;
-
-  /**
-   * 路由地址/表单ID
-   */
-  router?: string;
-
-  /**
-   * 备注
-   */
-  remork?: string;
-}
-
-export interface FormManageQuery extends PageQuery {
-  /**
-   * 表单名称
-   */
-  formName?: string;
-
-  /**
-   * 表单类型
-   */
-  formType?: string;
-}

src/api/workflow/instance/index.ts

@@ -0,0 +1,125 @@
+import request from '@/utils/request';
+import { FlowInstanceQuery, FlowInstanceVO } from '@/api/workflow/instance/types';
+import { AxiosPromise } from 'axios';
+
+/**
+ * 查询运行中实例列表
+ * @param query
+ * @returns {*}
+ */
+export const pageByRunning = (query: FlowInstanceQuery): AxiosPromise<FlowInstanceVO[]> => {
+  return request({
+    url: '/workflow/instance/pageByRunning',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询已完成实例列表
+ * @param query
+ * @returns {*}
+ */
+export const pageByFinish = (query: FlowInstanceQuery): AxiosPromise<FlowInstanceVO[]> => {
+  return request({
+    url: '/workflow/instance/pageByFinish',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 通过业务id获取历史流程图
+ */
+export const flowHisTaskList = (businessId: string | number) => {
+  return request({
+    url: `/workflow/instance/flowHisTaskList/${businessId}` + '?t' + Math.random(),
+    method: 'get'
+  });
+};
+
+/**
+ * 分页查询当前登录人单据
+ * @param query
+ * @returns {*}
+ */
+export const pageByCurrent = (query: FlowInstanceQuery): AxiosPromise<FlowInstanceVO[]> => {
+  return request({
+    url: '/workflow/instance/pageByCurrent',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 撤销流程
+ * @param data 参数
+ * @returns
+ */
+export const cancelProcessApply = (data: any) => {
+  return request({
+    url: `/workflow/instance/cancelProcessApply`,
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 获取流程变量
+ * @param instanceId 实例id
+ * @returns
+ */
+export const instanceVariable = (instanceId: string | number) => {
+  return request({
+    url: `/workflow/instance/instanceVariable/${instanceId}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 删除
+ * @param instanceIds 流程实例id
+ * @returns
+ */
+export const deleteByInstanceIds = (instanceIds: Array<string | number> | string | number) => {
+  return request({
+    url: `/workflow/instance/deleteByInstanceIds/${instanceIds}`,
+    method: 'delete'
+  });
+};
+
+/**
+ * 删除历史流程实例
+ * @param instanceIds
+ */
+export const deleteHisByInstanceIds = (instanceIds: Array<string | number> | string | number) => {
+  return request({
+    url: `/workflow/instance/deleteHisByInstanceIds/${instanceIds}`,
+    method: 'delete'
+  });
+};
+
+/**
+ * 作废流程
+ * @param data 参数
+ * @returns
+ */
+export const invalid = (data: any) => {
+  return request({
+    url: `/workflow/instance/invalid`,
+    method: 'post',
+    data: data
+  });
+};
+/**
+ * 修改流程变量
+ * @param data 参数
+ * @returns
+ */
+export const updateVariable = (data: any) => {
+  return request({
+    url: `/workflow/instance/updateVariable`,
+    method: 'put',
+    data: data
+  });
+};

src/api/workflow/instance/types.ts

@@ -0,0 +1,28 @@
+import { FlowTaskVO } from '@/api/workflow/task/types';
+
+export interface FlowInstanceQuery extends PageQuery {
+  category?: string | number;
+  nodeName?: string;
+  flowCode?: string;
+  flowName?: string;
+  createByIds?: string[] | number[];
+  businessId?: string;
+}
+
+export interface FlowInstanceVO extends BaseEntity {
+  id: string | number;
+  definitionId: string;
+  flowName: string;
+  flowCode: string;
+  version: string;
+  businessId: string;
+  activityStatus: number;
+  tenantId: string;
+  createTime: string;
+  createBy: string;
+  flowStatus: string;
+  flowStatusName: string;
+  flowTaskList: FlowTaskVO[];
+  businessCode: string;
+  businessTitle: string;
+}

src/api/workflow/leave/index.ts

@@ -39,6 +39,18 @@ export const addLeave = (data: LeaveForm): AxiosPromise<LeaveVO> => {
   });
 };
 
+/**
+ * 提交请假并发起流程
+ * @param data
+ */
+export const submitAndFlowStart = (data: LeaveForm): AxiosPromise<LeaveVO> => {
+  return request({
+    url: '/workflow/leave/submitAndFlowStart',
+    method: 'post',
+    data: data
+  });
+};
+
 /**
  * 修改请假
  * @param data

src/api/workflow/leave/types.ts

@@ -1,5 +1,6 @@
 export interface LeaveVO {
   id: string | number;
+  applyCode?: string;
   leaveType: string;
   startDate: string;
   endDate: string;
@@ -10,6 +11,7 @@ export interface LeaveVO {
 
 export interface LeaveForm extends BaseEntity {
   id?: string | number;
+  applyCode?: string;
   leaveType?: string;
   startDate?: string;
   endDate?: string;

src/api/workflow/model/index.ts

@@ -1,104 +0,0 @@
-import request from '@/utils/request';
-import { AxiosPromise } from 'axios';
-import { ModelForm, ModelQuery, ModelVO } from '@/api/workflow/model/types';
-
-/**
- * 查询模型列表
- * @param query
- * @returns {*}
- */
-export const listModel = (query: ModelQuery): AxiosPromise<ModelVO[]> => {
-  return request({
-    url: '/workflow/model/list',
-    method: 'get',
-    params: query
-  });
-};
-
-/**
- * 查询模型信息
- * @param query
- * @returns {*}
- */
-export const getInfo = (id: string): AxiosPromise<ModelForm> => {
-  return request({
-    url: '/workflow/model/getInfo/'+id,
-    method: 'get'
-  });
-};
-
-/**
- * 新增模型
- * @param data
- * @returns {*}
- */
-export const addModel = (data: ModelForm): AxiosPromise<void> => {
-  return request({
-    url: '/workflow/model/save',
-    method: 'post',
-    data: data
-  });
-};
-
-/**
- * 修改模型信息
- * @param data
- * @returns {*}
- */
-export function update(data: ModelForm): AxiosPromise<void> {
-  return request({
-    url: '/workflow/model/update',
-    method: 'put',
-    data: data
-  });
-}
-
-/**
- * 修改模型信息
- * @param data
- * @returns {*}
- */
-export function editModelXml(data: ModelForm): AxiosPromise<void> {
-  return request({
-    url: '/workflow/model/editModelXml',
-    method: 'put',
-    data: data
-  });
-}
-
-/**
- * 按id删除模型
- * @returns {*}
- * @param id 模型id
- */
-export function delModel(id: string | string[]): AxiosPromise<void> {
-  return request({
-    url: '/workflow/model/' + id,
-    method: 'delete'
-  });
-}
-
-/**
- * 模型部署
- * @returns {*}
- * @param id 模型id
- */
-export const modelDeploy = (id: string): AxiosPromise<void> => {
-  return request({
-    url: `/workflow/model/modelDeploy/${id}`,
-    method: 'post'
-  });
-};
-
-/**
- * 复制模型
- * @param data
- * @returns {*}
- */
-export const copyModel = (data: ModelForm): AxiosPromise<void> => {
-  return request({
-    url: '/workflow/model/copyModel',
-    method: 'post',
-    data: data
-  });
-};

src/api/workflow/model/types.ts

@@ -1,66 +0,0 @@
-export interface ModelForm {
-  id: string,
-  name: string;
-  key: string;
-  categoryCode: string;
-  xml:string,
-  svg:string,
-  description: string;
-}
-
-export interface ModelQuery extends PageQuery {
-  name?: string;
-  key?: string;
-  categoryCode?: string;
-}
-
-export interface OriginalPersistentState {
-  metaInfo: string;
-  editorSourceValueId: string;
-  createTime: string;
-  deploymentId?: string;
-  name: string;
-  tenantId: string;
-  category?: string;
-  version: number;
-  editorSourceExtraValueId?: string;
-  key: string;
-  lastUpdateTime: string;
-}
-
-export interface PersistentState {
-  metaInfo: string;
-  editorSourceValueId: string;
-  createTime: string;
-  deploymentId?: string;
-  name: string;
-  tenantId: string;
-  category?: string;
-  version: number;
-  editorSourceExtraValueId?: string;
-  key: string;
-  lastUpdateTime: string;
-}
-
-export interface ModelVO {
-  id: string;
-  revision: number;
-  originalPersistentState: OriginalPersistentState;
-  name: string;
-  key: string;
-  category?: string;
-  createTime: string;
-  lastUpdateTime: string;
-  version: number;
-  metaInfo: string;
-  deploymentId?: string;
-  editorSourceValueId: string;
-  editorSourceExtraValueId?: string;
-  tenantId: string;
-  persistentState: PersistentState;
-  revisionNext: number;
-  idPrefix: string;
-  inserted: boolean;
-  updated: boolean;
-  deleted: boolean;
-}

src/api/workflow/nodeConfig/index.ts

@@ -1,63 +0,0 @@
-import request from '@/utils/request';
-import { AxiosPromise } from 'axios';
-import { NodeConfigVO, NodeConfigForm, NodeConfigQuery } from '@/api/workflow/nodeConfig/types';
-
-/**
- * 查询节点配置列表
- * @param query
- * @returns {*}
- */
-
-export const listNodeConfig = (query?: NodeConfigQuery): AxiosPromise<NodeConfigVO[]> => {
-  return request({
-    url: '/workflow/nodeConfig/list',
-    method: 'get',
-    params: query
-  });
-};
-
-/**
- * 查询节点配置详细
- * @param id
- */
-export const getNodeConfig = (id: string | number): AxiosPromise<NodeConfigVO> => {
-  return request({
-    url: '/workflow/nodeConfig/' + id,
-    method: 'get'
-  });
-};
-
-/**
- * 新增节点配置
- * @param data
- */
-export const addNodeConfig = (data: NodeConfigForm) => {
-  return request({
-    url: '/workflow/nodeConfig',
-    method: 'post',
-    data: data
-  });
-};
-
-/**
- * 修改节点配置
- * @param data
- */
-export const updateNodeConfig = (data: NodeConfigForm) => {
-  return request({
-    url: '/workflow/nodeConfig',
-    method: 'put',
-    data: data
-  });
-};
-
-/**
- * 删除节点配置
- * @param id
- */
-export const delNodeConfig = (id: string | number | Array<string | number>) => {
-  return request({
-    url: '/workflow/nodeConfig/' + id,
-    method: 'delete'
-  });
-};

src/api/workflow/nodeConfig/types.ts

@@ -1,43 +0,0 @@
-import { FormManageVO } from '@/api/workflow/formManage/types';
-
-export interface NodeConfigVO {
-  /**
-   * 主键
-   */
-  id: string | number;
-
-  /**
-   * 表单id
-   */
-  formId: string | number;
-
-  /**
-   * 表单类型
-   */
-  formType: string;
-
-  /**
-   * 节点名称
-   */
-  nodeName: string;
-
-  /**
-   * 节点id
-   */
-  nodeId: string | number;
-
-  /**
-   * 流程定义id
-   */
-  definitionId: string | number;
-
-  /**
-   * 表单管理
-   */
-  wfFormManageVo: FormManageVO;
-
-}
-
-
-
-

src/api/workflow/processDefinition/index.ts

@@ -1,114 +0,0 @@
-import request from '@/utils/request';
-import { ProcessDefinitionQuery, ProcessDefinitionVO, definitionXmlVO } from '@/api/workflow/processDefinition/types';
-import { AxiosPromise } from 'axios';
-
-/**
- * 获取流程定义列表
- * @param query 流程实例id
- * @returns
- */
-export const listProcessDefinition = (query: ProcessDefinitionQuery): AxiosPromise<ProcessDefinitionVO[]> => {
-  return request({
-    url: `/workflow/processDefinition/list`,
-    method: 'get',
-    params: query
-  });
-};
-/**
- * 按照流程定义key获取流程定义
- * @param processInstanceId 流程实例id
- * @returns
- */
-export const getListByKey = (key: string) => {
-  return request({
-    url: `/workflow/processDefinition/getListByKey/${key}`,
-    method: 'get'
-  });
-};
-
-/**
- * 通过流程定义id获取流程图
- */
-export const definitionImage = (processDefinitionId: string): AxiosPromise<any> => {
-  return request({
-    url: `/workflow/processDefinition/definitionImage/${processDefinitionId}` + '?t' + Math.random(),
-    method: 'get'
-  });
-};
-
-/**
- * 通过流程定义id获取xml
- * @param processDefinitionId 流程定义id
- * @returns
- */
-export const definitionXml = (processDefinitionId: string): AxiosPromise<definitionXmlVO> => {
-  return request({
-    url: `/workflow/processDefinition/definitionXml/${processDefinitionId}`,
-    method: 'get'
-  });
-};
-
-/**
- * 删除流程定义
- * @param deploymentId 部署id
- * @param processDefinitionId 流程定义id
- * @returns
- */
-export const deleteProcessDefinition = (deploymentId: string | string[], processDefinitionId: string | string[]) => {
-  return request({
-    url: `/workflow/processDefinition/${deploymentId}/${processDefinitionId}`,
-    method: 'delete'
-  });
-};
-
-/**
- * 挂起/激活
- * @param processDefinitionId 流程定义id
- * @returns
- */
-export const updateDefinitionState = (processDefinitionId: string) => {
-  return request({
-    url: `/workflow/processDefinition/updateDefinitionState/${processDefinitionId}`,
-    method: 'put'
-  });
-};
-
-/**
- * 流程定义转换为模型
- * @param processDefinitionId 流程定义id
- * @returns
- */
-export const convertToModel = (processDefinitionId: string) => {
-  return request({
-    url: `/workflow/processDefinition/convertToModel/${processDefinitionId}`,
-    method: 'put'
-  });
-};
-
-/**
- * 通过zip或xml部署流程定义
- * @returns
- */
-export function deployProcessFile(data: any) {
-  return request({
-    url: '/workflow/processDefinition/deployByFile',
-    method: 'post',
-    data: data,
-    headers: {
-      repeatSubmit: false
-    }
-  });
-}
-
-/**
- * 迁移流程
- * @param currentProcessDefinitionId
- * @param fromProcessDefinitionId
- * @returns
- */
-export const migrationDefinition = (currentProcessDefinitionId: string, fromProcessDefinitionId: string) => {
-  return request({
-    url: `/workflow/processDefinition/migrationDefinition/${currentProcessDefinitionId}/${fromProcessDefinitionId}`,
-    method: 'put'
-  });
-};

src/api/workflow/processDefinition/types.ts

@@ -1,24 +0,0 @@
-import { DefinitionConfigVO } from '@/api/workflow/definitionConfig/types';
-export interface ProcessDefinitionQuery extends PageQuery {
-  key?: string;
-  name?: string;
-  categoryCode?: string;
-}
-
-export interface ProcessDefinitionVO extends BaseEntity {
-  id: string;
-  name: string;
-  key: string;
-  version: number;
-  suspensionState: number;
-  resourceName: string;
-  diagramResourceName: string;
-  deploymentId: string;
-  deploymentTime: string;
-  wfDefinitionConfigVo: DefinitionConfigVO;
-}
-
-export interface definitionXmlVO {
-  xml: string[];
-  xmlStr: string;
-}

src/api/workflow/processInstance/index.ts

@@ -1,136 +0,0 @@
-import request from '@/utils/request';
-import { ProcessInstanceQuery, ProcessInstanceVO } from '@/api/workflow/processInstance/types';
-import { AxiosPromise } from 'axios';
-
-/**
- * 查询运行中实例列表
- * @param query
- * @returns {*}
- */
-export const getPageByRunning = (query: ProcessInstanceQuery): AxiosPromise<ProcessInstanceVO[]> => {
-  return request({
-    url: '/workflow/processInstance/getPageByRunning',
-    method: 'get',
-    params: query
-  });
-};
-
-/**
- * 查询已完成实例列表
- * @param query
- * @returns {*}
- */
-export const getPageByFinish = (query: ProcessInstanceQuery): AxiosPromise<ProcessInstanceVO[]> => {
-  return request({
-    url: '/workflow/processInstance/getPageByFinish',
-    method: 'get',
-    params: query
-  });
-};
-
-/**
- * 通过业务id获取历史流程图
- */
-export const getHistoryImage = (businessKey: string) => {
-  return request({
-    url: `/workflow/processInstance/getHistoryImage/${businessKey}` + '?t' + Math.random(),
-    method: 'get'
-  });
-};
-
-/**
- * 通过业务id获取历史流程图运行中，历史等节点
- */
-export const getHistoryList = (businessKey: string): AxiosPromise<Record<string, any>> => {
-  return request({
-    url: `/workflow/processInstance/getHistoryList/${businessKey}` + '?t' + Math.random(),
-    method: 'get'
-  });
-};
-
-/**
- * 获取审批记录
- * @param businessKey 业务id
- * @returns
- */
-export const getHistoryRecord = (businessKey: string | number) => {
-  return request({
-    url: `/workflow/processInstance/getHistoryRecord/${businessKey}`,
-    method: 'get'
-  });
-};
-
-/**
- * 作废
- * @param data 参数
- * @returns
- */
-export const deleteRunInstance = (data: object) => {
-  return request({
-    url: `/workflow/processInstance/deleteRunInstance`,
-    method: 'post',
-    data: data
-  });
-};
-
-/**
- * 运行中的实例 删除程实例，删除历史记录，删除业务与流程关联信息
- * @param businessKey 业务id
- * @returns
- */
-export const deleteRunAndHisInstance = (businessKey: string | string[]) => {
-  return request({
-    url: `/workflow/processInstance/deleteRunAndHisInstance/${businessKey}`,
-    method: 'delete'
-  });
-};
-
-/**
- * 已完成的实例 删除程实例，删除历史记录，删除业务与流程关联信息
- * @param businessKey 业务id
- * @returns
- */
-export const deleteFinishAndHisInstance = (businessKey: string | string[]) => {
-  return request({
-    url: `/workflow/processInstance/deleteFinishAndHisInstance/${businessKey}`,
-    method: 'delete'
-  });
-};
-
-/**
- * 分页查询当前登录人单据
- * @param query
- * @returns {*}
- */
-export const getPageByCurrent = (query: ProcessInstanceQuery): AxiosPromise<ProcessInstanceVO[]> => {
-  return request({
-    url: '/workflow/processInstance/getPageByCurrent',
-    method: 'get',
-    params: query
-  });
-};
-
-/**
- * 撤销流程
- * @param businessKey 业务id
- * @returns
- */
-export const cancelProcessApply = (businessKey: string) => {
-  return request({
-    url: `/workflow/processInstance/cancelProcessApply/${businessKey}`,
-    method: 'post'
-  });
-};
-
-export default {
-  getPageByRunning,
-  getPageByFinish,
-  getHistoryImage,
-  getHistoryList,
-  getHistoryRecord,
-  deleteRunInstance,
-  deleteRunAndHisInstance,
-  deleteFinishAndHisInstance,
-  getPageByCurrent,
-  cancelProcessApply
-};

src/api/workflow/processInstance/types.ts

@@ -1,27 +0,0 @@
-import { TaskVO } from '@/api/workflow/task/types';
-
-export interface ProcessInstanceQuery extends PageQuery {
-  categoryCode?: string;
-  name?: string;
-  key?: string;
-  startUserId?: string;
-  businessKey?: string;
-}
-
-export interface ProcessInstanceVO extends BaseEntity {
-  id: string;
-  processDefinitionId: string;
-  processDefinitionName: string;
-  processDefinitionKey: string;
-  processDefinitionVersion: string;
-  deploymentId: string;
-  businessKey: string;
-  isSuspended?: any;
-  tenantId: string;
-  startTime: string;
-  endTime?: string;
-  startUserId: string;
-  businessStatus: string;
-  businessStatusName: string;
-  taskVoList: TaskVO[];
-}

src/api/workflow/spel/index.ts

@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { SpelVO, SpelForm, SpelQuery } from '@/api/workflow/spel/types';
+
+/**
+ * 查询流程spel表达式定义列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listSpel = (query?: SpelQuery): AxiosPromise<SpelVO[]> => {
+  return request({
+    url: '/workflow/spel/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询流程spel表达式定义详细
+ * @param id
+ */
+export const getSpel = (id: string | number): AxiosPromise<SpelVO> => {
+  return request({
+    url: '/workflow/spel/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增流程spel表达式定义
+ * @param data
+ */
+export const addSpel = (data: SpelForm) => {
+  return request({
+    url: '/workflow/spel',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改流程spel表达式定义
+ * @param data
+ */
+export const updateSpel = (data: SpelForm) => {
+  return request({
+    url: '/workflow/spel',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除流程spel表达式定义
+ * @param id
+ */
+export const delSpel = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/workflow/spel/' + id,
+    method: 'delete'
+  });
+};

src/api/workflow/spel/types.ts

@@ -0,0 +1,111 @@
+export interface SpelVO {
+  /**
+   * 主键id
+   */
+  id: string | number;
+
+  /**
+   * 组件名称
+   */
+  componentName: string;
+
+  /**
+   * 方法名
+   */
+  methodName: string;
+
+  /**
+   * 参数
+   */
+  methodParams: string;
+
+  /**
+   * 预览spel值
+   */
+  viewSpel: string;
+
+  /**
+   * 状态（0正常 1停用）
+   */
+  status: string;
+
+  /**
+   * 备注
+   */
+  remark?: string;
+
+}
+
+export interface SpelForm extends BaseEntity {
+  /**
+   * 主键id
+   */
+  id?: string | number;
+
+  /**
+   * 组件名称
+   */
+  componentName?: string;
+
+  /**
+   * 方法名
+   */
+  methodName?: string;
+
+  /**
+   * 参数
+   */
+  methodParams?: string;
+
+  /**
+   * 预览spel值
+   */
+  viewSpel?: string;
+
+  /**
+   * 状态（0正常 1停用）
+   */
+  status?: string;
+
+  /**
+   * 备注
+   */
+  remark?: string;
+
+}
+
+export interface SpelQuery extends PageQuery {
+
+  /**
+   * 组件名称
+   */
+  componentName?: string;
+
+  /**
+   * 方法名
+   */
+  methodName?: string;
+
+  /**
+   * 参数
+   */
+  methodParams?: string;
+
+  /**
+   * 预览spel值
+   */
+  viewSpel?: string;
+
+  /**
+   * 状态（0正常 1停用）
+   */
+  status?: string;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

src/api/workflow/task/index.ts

@@ -1,15 +1,15 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
-import { TaskQuery, TaskVO } from '@/api/workflow/task/types';
+import { TaskQuery, FlowTaskVO, TaskOperationBo } from '@/api/workflow/task/types';
 
 /**
  * 查询待办列表
  * @param query
  * @returns {*}
  */
-export const getPageByTaskWait = (query: TaskQuery): AxiosPromise<TaskVO[]> => {
+export const pageByTaskWait = (query: TaskQuery): AxiosPromise<FlowTaskVO[]> => {
   return request({
-    url: '/workflow/task/getPageByTaskWait',
+    url: '/workflow/task/pageByTaskWait',
     method: 'get',
     params: query
   });
@@ -20,9 +20,9 @@ export const getPageByTaskWait = (query: TaskQuery): AxiosPromise<TaskVO[]> => {
  * @param query
  * @returns {*}
  */
-export const getPageByTaskFinish = (query: TaskQuery): AxiosPromise<TaskVO[]> => {
+export const pageByTaskFinish = (query: TaskQuery): AxiosPromise<FlowTaskVO[]> => {
   return request({
-    url: '/workflow/task/getPageByTaskFinish',
+    url: '/workflow/task/pageByTaskFinish',
     method: 'get',
     params: query
   });
@@ -33,9 +33,9 @@ export const getPageByTaskFinish = (query: TaskQuery): AxiosPromise<TaskVO[]> =>
  * @param query
  * @returns {*}
  */
-export const getPageByTaskCopy = (query: TaskQuery): AxiosPromise<TaskVO[]> => {
+export const pageByTaskCopy = (query: TaskQuery): AxiosPromise<FlowTaskVO[]> => {
   return request({
-    url: '/workflow/task/getPageByTaskCopy',
+    url: '/workflow/task/pageByTaskCopy',
     method: 'get',
     params: query
   });
@@ -46,9 +46,9 @@ export const getPageByTaskCopy = (query: TaskQuery): AxiosPromise<TaskVO[]> => {
  * @param query
  * @returns {*}
  */
-export const getPageByAllTaskWait = (query: TaskQuery): AxiosPromise<TaskVO[]> => {
+export const pageByAllTaskWait = (query: TaskQuery): AxiosPromise<FlowTaskVO[]> => {
   return request({
-    url: '/workflow/task/getPageByAllTaskWait',
+    url: '/workflow/task/pageByAllTaskWait',
     method: 'get',
     params: query
   });
@@ -59,9 +59,9 @@ export const getPageByAllTaskWait = (query: TaskQuery): AxiosPromise<TaskVO[]> =
  * @param query
  * @returns {*}
  */
-export const getPageByAllTaskFinish = (query: TaskQuery): AxiosPromise<TaskVO[]> => {
+export const pageByAllTaskFinish = (query: TaskQuery): AxiosPromise<FlowTaskVO[]> => {
   return request({
-    url: '/workflow/task/getPageByAllTaskFinish',
+    url: '/workflow/task/pageByAllTaskFinish',
     method: 'get',
     params: query
   });
@@ -93,30 +93,6 @@ export const completeTask = (data: object) => {
   });
 };
 
-/**
- * 认领任务
- * @param taskId
- * @returns {*}
- */
-export const claim = (taskId: string): any => {
-  return request({
-    url: '/workflow/task/claim/' + taskId,
-    method: 'post'
-  });
-};
-
-/**
- * 归还任务
- * @param taskId
- * @returns {*}
- */
-export const returnTask = (taskId: string): any => {
-  return request({
-    url: '/workflow/task/returnTask/' + taskId,
-    method: 'post'
-  });
-};
-
 /**
  * 任务驳回
  * @param data
@@ -135,61 +111,24 @@ export const backProcess = (data: any): any => {
  * @param taskId
  * @returns
  */
-export const getTaskById = (taskId: string) => {
+export const getTask = (taskId: string) => {
   return request({
-    url: '/workflow/task/getTaskById/' + taskId,
+    url: '/workflow/task/getTask/' + taskId,
     method: 'get'
   });
 };
 
-/**
- * 加签
- * @param data
- * @returns
- */
-export const addMultiInstanceExecution = (data: any) => {
-  return request({
-    url: '/workflow/task/addMultiInstanceExecution',
-    method: 'post',
-    data: data
-  });
-};
-
-/**
- * 减签
- * @param data
- * @returns
- */
-export const deleteMultiInstanceExecution = (data: any) => {
-  return request({
-    url: '/workflow/task/deleteMultiInstanceExecution',
-    method: 'post',
-    data: data
-  });
-};
-
 /**
  * 修改任务办理人
- * @param taskIds
+ * @param taskIdList
  * @param userId
  * @returns
  */
-export const updateAssignee = (taskIds: Array<string>, userId: string) => {
+export const updateAssignee = (taskIdList: Array<string>, userId: string) => {
   return request({
-    url: `/workflow/task/updateAssignee/${taskIds}/${userId}`,
-    method: 'put'
-  });
-};
-
-/**
- * 转办任务
- * @returns
- */
-export const transferTask = (data: any) => {
-  return request({
-    url: `/workflow/task/transferTask`,
-    method: 'post',
-    data: data
+    url: `/workflow/task/updateAssignee/${userId}`,
+    method: 'put',
+    data: taskIdList
   });
 };
 
@@ -205,60 +144,63 @@ export const terminationTask = (data: any) => {
   });
 };
 
-/**
- * 查询流程变量
- * @returns
- */
-export const getInstanceVariable = (taskId: string) => {
-  return request({
-    url: `/workflow/task/getInstanceVariable/${taskId}`,
-    method: 'get'
-  });
-};
-
 /**
  * 获取可驳回得任务节点
  * @returns
  */
-export const getTaskNodeList = (processInstanceId: string) => {
+export const getBackTaskNode = (taskId: string | number, nodeCode: string) => {
   return request({
-    url: `/workflow/task/getTaskNodeList/${processInstanceId}`,
+    url: `/workflow/task/getBackTaskNode/${taskId}/${nodeCode}`,
     method: 'get'
   });
 };
 
 /**
- * 委托任务
+ * 任务操作 操作类型，委派 delegateTask、转办 transferTask、加签 addSignature、减签 reductionSignature
  * @returns
  */
-export const delegateTask = (data: any) => {
+export const taskOperation = (data: TaskOperationBo, operation: string) => {
   return request({
-    url: `/workflow/task/delegateTask`,
+    url: `/workflow/task/taskOperation/${operation}`,
     method: 'post',
     data: data
   });
 };
 
 /**
- * 查询工作流任务用户选择加签人员
- * @param taskId
- * @returns {*}
+ * 获取当前任务办理人
+ * @param taskId 任务id
+ * @returns
  */
-export const getTaskUserIdsByAddMultiInstance = (taskId: string) => {
+export const currentTaskAllUser = (taskId: string | number) => {
   return request({
-    url: '/workflow/task/getTaskUserIdsByAddMultiInstance/' + taskId,
+    url: `/workflow/task/currentTaskAllUser/${taskId}`,
     method: 'get'
   });
 };
 
 /**
- * 查询工作流选择减签人员
- * @param taskId
- * @returns {*}
+ * 获取下一节点写
+ * @param data参数
+ * @returns
  */
-export const getListByDeleteMultiInstance = (taskId: string) => {
+export const getNextNodeList = (data: any): any => {
   return request({
-    url: '/workflow/task/getListByDeleteMultiInstance/' + taskId,
-    method: 'get'
+    url: '/workflow/task/getNextNodeList',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 催办任务
+ * @param data参数
+ * @returns
+ */
+export const urgeTask = (data: any): any => {
+  return request({
+    url: '/workflow/task/urgeTask',
+    method: 'post',
+    data: data
   });
 };

src/api/workflow/task/types.ts

@@ -1,9 +1,8 @@
-import { NodeConfigVO } from '@/api/workflow/nodeConfig/types';
-import { DefinitionConfigVO } from '@/api/workflow/definitionConfig/types';
 export interface TaskQuery extends PageQuery {
-  name?: string;
-  processDefinitionKey?: string;
-  processDefinitionName?: string;
+  nodeName?: string;
+  flowCode?: string;
+  flowName?: string;
+  createByIds?: string[] | number[];
 }
 
 export interface ParticipantVo {
@@ -12,38 +11,48 @@ export interface ParticipantVo {
   candidateName: string[];
   claim: boolean;
 }
-
-export interface TaskVO extends BaseEntity {
-  id: string;
-  name: string;
-  description?: string;
-  priority: number;
-  owner?: string;
-  assignee?: string | number;
-  assigneeName?: string;
-  processInstanceId: string;
-  executionId: string;
-  taskDefinitionId?: any;
-  processDefinitionId: string;
-  endTime?: string;
-  taskDefinitionKey: string;
-  dueDate?: string;
-  category?: any;
-  parentTaskId?: any;
-  tenantId: string;
-  claimTime?: string;
-  businessStatus?: string;
-  businessStatusName?: string;
-  processDefinitionName?: string;
-  processDefinitionKey?: string;
-  participantVo?: ParticipantVo;
-  multiInstance?: boolean;
-  businessKey?: string;
-  wfNodeConfigVo?: NodeConfigVO;
-  wfDefinitionConfigVo?: DefinitionConfigVO;
+export interface FlowTaskVO {
+  id: string | number;
+  createTime?: Date;
+  updateTime?: Date;
+  tenantId?: string;
+  definitionId?: string;
+  instanceId: string;
+  flowName: string;
+  businessId: string;
+  nodeCode: string;
+  nodeName: string;
+  flowCode: string;
+  flowStatus: string;
+  formCustom: string;
+  formPath: string;
+  nodeType: number;
+  nodeRatio: string | number;
+  version?: string;
+  applyNode?: boolean;
+  buttonList?: ButtonList[];
+  copyList?: FlowCopyVo[];
+  varList?: Map<string, string>;
+  businessCode: string;
+  businessTitle: string;
 }
 
-export interface VariableVo {
-  key: string;
-  value: string;
+export interface ButtonList {
+  code: string;
+  show: boolean;
+}
+export interface FlowCopyVo {
+  userId: string | number;
+  userName: string;
+}
+
+export interface TaskOperationBo {
+  //委派/转办人的用户ID（必填，准对委派/转办人操作）
+  userId?: string;
+  //加签/减签人的用户ID列表（必填，针对加签/减签操作）
+  userIds?: string[];
+  //任务ID（必填）
+  taskId: string | number;
+  //意见或备注信息（可选）
+  message?: string;
 }

src/api/workflow/workflowCommon/index.ts

@@ -2,28 +2,14 @@ import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
 
 export default {
   routerJump(routerJumpVo: RouterJumpVo, proxy) {
-    if (routerJumpVo.wfNodeConfigVo && routerJumpVo.wfNodeConfigVo.formType === 'static' && routerJumpVo.wfNodeConfigVo.wfFormManageVo) {
-      proxy.$tab.closePage(proxy.$route);
-      proxy.$router.push({
-        path: `${routerJumpVo.wfNodeConfigVo.wfFormManageVo.router}`,
-        query: {
-          id: routerJumpVo.businessKey,
-          type: routerJumpVo.type,
-          taskId: routerJumpVo.taskId
-        }
-      });
-    } else if (routerJumpVo.wfNodeConfigVo && routerJumpVo.wfNodeConfigVo.formType === 'dynamic' && routerJumpVo.wfNodeConfigVo.wfFormManageVo) {
-      proxy.$tab.closePage(proxy.$route);
-      proxy.$router.push({
-        path: `${routerJumpVo.wfNodeConfigVo.wfFormManageVo.router}`,
-        query: {
-          id: routerJumpVo.businessKey,
-          type: routerJumpVo.type,
-          taskId: routerJumpVo.taskId
-        }
-      });
-    } else {
-      proxy?.$modal.msgError('请到模型配置菜单！');
-    }
+    proxy.$tab.closePage(proxy.$route);
+    proxy.$router.push({
+      path: routerJumpVo.formPath,
+      query: {
+        id: routerJumpVo.businessId,
+        type: routerJumpVo.type,
+        taskId: routerJumpVo.taskId
+      }
+    });
   }
 };

src/api/workflow/workflowCommon/types.ts

@@ -1,16 +1,14 @@
-import { NodeConfigVO } from '@/api/workflow/nodeConfig/types';
-import { DefinitionConfigVO } from '@/api/workflow/definitionConfig/types';
-
 export interface RouterJumpVo {
-  wfNodeConfigVo: NodeConfigVO;
-  wfDefinitionConfigVo: DefinitionConfigVO;
-  businessKey: string;
-  taskId: string;
+  businessId: string;
+  taskId: string | number;
   type: string;
+  formCustom: string;
+  formPath: string;
 }
 
 export interface StartProcessBo {
-  businessKey: string | number;
-  tableName: string;
+  businessId: string | number;
+  flowCode: string;
   variables: any;
+  bizExt: any;
 }

src/assets/icons/svg/button.svg

@@ -1 +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="1588670460195" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1314" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M230.4 307.712c13.824 0 25.088-11.264 25.088-25.088 0-100.352 81.92-182.272 182.272-182.272s182.272 81.408 182.272 182.272c0 13.824 11.264 25.088 25.088 25.088s25.088-11.264 24.576-25.088c0-127.488-103.936-231.936-231.936-231.936S205.824 154.624 205.824 282.624c-0.512 14.336 10.752 25.088 24.576 25.088z m564.736 234.496c-11.264 0-21.504 2.048-31.232 6.144 0-44.544-40.448-81.92-88.064-81.92-14.848 0-28.16 3.584-39.936 10.24-13.824-28.16-44.544-48.128-78.848-48.128-12.288 0-24.576 2.56-35.328 7.68V284.16c0-45.568-37.888-81.92-84.48-81.92s-84.48 36.864-84.48 81.92v348.672l-69.12-112.64c-18.432-28.16-58.368-36.864-91.136-19.968-26.624 14.336-46.592 47.104-30.208 88.064 3.072 8.192 76.8 205.312 171.52 311.296 0 0 28.16 24.576 43.008 58.88 4.096 9.728 13.312 15.36 22.528 15.36 3.072 0 6.656-0.512 9.728-2.048 12.288-5.12 18.432-19.968 12.8-32.256-19.456-44.544-53.76-74.752-53.76-74.752C281.6 768 209.408 573.44 208.384 570.88c-5.12-12.8-2.56-20.992 7.168-26.112 9.216-4.608 21.504-4.608 26.112 2.56l113.152 184.32c4.096 8.704 12.8 14.336 22.528 14.336 13.824 0 25.088-10.752 25.088-25.088V284.16c0-17.92 15.36-32.256 34.816-32.256s34.816 14.336 34.816 32.256v284.16c0 13.824 10.24 25.088 24.576 25.088 13.824 0 25.088-11.264 25.088-25.088v-57.344c0-17.92 15.36-32.768 34.816-32.768 19.968 0 37.376 15.36 37.376 32.768v95.232c0 7.168 3.072 13.312 7.68 17.92 4.608 4.608 10.752 7.168 17.92 7.168 13.824 0 24.576-11.264 24.576-25.088V547.84c0-18.432 13.824-32.256 32.256-32.256 20.48 0 38.912 15.36 38.912 32.256v95.232c0 13.824 11.264 25.088 25.088 25.088s24.576-11.264 25.088-25.088v-18.944c0-18.944 12.8-32.256 30.72-32.256 18.432 0 22.528 18.944 22.528 31.744 0 1.024-11.776 99.84-50.688 173.056-30.72 58.368-45.056 112.128-51.2 146.944-2.56 13.312 6.656 26.112 19.968 28.672 1.536 0 3.072 0.512 4.608 0.512 11.776 0 22.016-8.192 24.064-20.48 5.632-31.232 18.432-79.36 46.08-132.608 43.52-81.92 55.808-186.88 56.32-193.536-0.512-50.688-29.696-83.968-72.704-83.968z"></path></path></svg>
+<?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="1588670460195" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1314" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M230.4 307.712c13.824 0 25.088-11.264 25.088-25.088 0-100.352 81.92-182.272 182.272-182.272s182.272 81.408 182.272 182.272c0 13.824 11.264 25.088 25.088 25.088s25.088-11.264 24.576-25.088c0-127.488-103.936-231.936-231.936-231.936S205.824 154.624 205.824 282.624c-0.512 14.336 10.752 25.088 24.576 25.088z m564.736 234.496c-11.264 0-21.504 2.048-31.232 6.144 0-44.544-40.448-81.92-88.064-81.92-14.848 0-28.16 3.584-39.936 10.24-13.824-28.16-44.544-48.128-78.848-48.128-12.288 0-24.576 2.56-35.328 7.68V284.16c0-45.568-37.888-81.92-84.48-81.92s-84.48 36.864-84.48 81.92v348.672l-69.12-112.64c-18.432-28.16-58.368-36.864-91.136-19.968-26.624 14.336-46.592 47.104-30.208 88.064 3.072 8.192 76.8 205.312 171.52 311.296 0 0 28.16 24.576 43.008 58.88 4.096 9.728 13.312 15.36 22.528 15.36 3.072 0 6.656-0.512 9.728-2.048 12.288-5.12 18.432-19.968 12.8-32.256-19.456-44.544-53.76-74.752-53.76-74.752C281.6 768 209.408 573.44 208.384 570.88c-5.12-12.8-2.56-20.992 7.168-26.112 9.216-4.608 21.504-4.608 26.112 2.56l113.152 184.32c4.096 8.704 12.8 14.336 22.528 14.336 13.824 0 25.088-10.752 25.088-25.088V284.16c0-17.92 15.36-32.256 34.816-32.256s34.816 14.336 34.816 32.256v284.16c0 13.824 10.24 25.088 24.576 25.088 13.824 0 25.088-11.264 25.088-25.088v-57.344c0-17.92 15.36-32.768 34.816-32.768 19.968 0 37.376 15.36 37.376 32.768v95.232c0 7.168 3.072 13.312 7.68 17.92 4.608 4.608 10.752 7.168 17.92 7.168 13.824 0 24.576-11.264 24.576-25.088V547.84c0-18.432 13.824-32.256 32.256-32.256 20.48 0 38.912 15.36 38.912 32.256v95.232c0 13.824 11.264 25.088 25.088 25.088s24.576-11.264 25.088-25.088v-18.944c0-18.944 12.8-32.256 30.72-32.256 18.432 0 22.528 18.944 22.528 31.744 0 1.024-11.776 99.84-50.688 173.056-30.72 58.368-45.056 112.128-51.2 146.944-2.56 13.312 6.656 26.112 19.968 28.672 1.536 0 3.072 0.512 4.608 0.512 11.776 0 22.016-8.192 24.064-20.48 5.632-31.232 18.432-79.36 46.08-132.608 43.52-81.92 55.808-186.88 56.32-193.536-0.512-50.688-29.696-83.968-72.704-83.968z"></path></svg>

src/assets/styles/btn.scss

@@ -1,4 +1,4 @@
-@import './variables.module.scss';
+@use './variables.module.scss' as *;
 
 @mixin colorBtn($color) {
   background: $color;

src/assets/styles/element-ui.scss

@@ -1,4 +1,3 @@
-
 .el-collapse {
   .collapse__title {
     font-weight: 600;
@@ -147,3 +146,8 @@
 .el-form--inline .el-input {
   width: 240px;
 }
+
+/* 设置 el-message-box 消息弹框内容强制换行 */
+.el-message-box .el-message-box__message {
+  word-break: break-word;
+}

src/assets/styles/index.scss

@@ -1,12 +1,12 @@
-@import './variables.module.scss';
-@import './mixin.scss';
-@import './transition.scss';
-@import './element-ui.scss';
-@import './sidebar.scss';
-@import './btn.scss';
-@import './ruoyi.scss';
-@import 'animate.css';
-@import 'element-plus/dist/index.css';
+@use './variables.module.scss' as *;
+@use './mixin.scss';
+@use './transition.scss';
+@use './element-ui.scss';
+@use './sidebar.scss';
+@use './btn.scss';
+@use './ruoyi.scss';
+@use 'animate.css';
+@use 'element-plus/dist/index.css';
 
 body {
   height: 100%;
@@ -162,10 +162,6 @@ aside {
   position: relative;
 }
 
-.pagination-container {
-  margin-top: 30px;
-}
-
 .text-center {
   text-align: center;
 }

src/assets/styles/ruoyi.scss

@@ -1,3 +1,5 @@
+@use './variables.module.scss' as *;
+
 /**
  * 通用css样式布局处理
  * Copyright (c) 2019 ruoyi
@@ -114,10 +116,9 @@ h6 {
 
 /** 表格布局 **/
 .pagination-container {
-  // position: relative;
-  height: 25px;
-  margin-bottom: 10px;
-  margin-top: 15px;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
   padding: 10px 20px !important;
 }
 
@@ -130,11 +131,6 @@ h6 {
   width: 100%;
 }
 
-.pagination-container .el-pagination {
-  //right: 0;
-  //position: absolute;
-}
-
 @media (max-width: 768px) {
   .pagination-container .el-pagination > .el-pagination__jump {
     display: none !important;
@@ -201,8 +197,6 @@ h6 {
 }
 
 .card-box {
-  padding-right: 15px;
-  padding-left: 15px;
   margin-bottom: 10px;
 }
 

src/assets/styles/sidebar.scss

@@ -1,3 +1,5 @@
+@use './variables.module.scss' as *;
+
 #app {
   .main-container {
     height: 100%;
@@ -24,7 +26,7 @@
     z-index: 1001;
     overflow: hidden;
     -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -63,7 +65,7 @@
     }
 
     .svg-icon {
-      margin-right: 16px;
+      margin-right: 10px;
     }
 
     .el-menu {
@@ -86,12 +88,16 @@
     // menu hover
     .theme-dark .sub-menu-title-noDropdown,
     .theme-dark .el-sub-menu__title {
+      border-radius: 8px;
+      margin: 1px 5px 1px 5px;
       &:hover {
         background-color: $base-sub-menu-title-hover !important;
       }
     }
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
+      border-radius: 8px;
+      margin: 1px 5px 1px 5px;
       &:hover {
         background-color: rgba(0, 0, 0, 0.05) !important;
       }
@@ -103,8 +109,11 @@
 
     & .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
-      min-width: $base-sidebar-width !important;
-      &:hover {
+      min-width: calc($base-sidebar-width - 20px) !important;
+      border-radius: 8px;
+      height: 45px;
+      margin: 1px 5px 1px 5px;
+      &:not(.is-active):hover {
         background-color: rgba(0, 0, 0, 0.1) !important;
       }
     }
@@ -112,28 +121,54 @@
     & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .theme-dark .el-sub-menu .el-menu-item {
       background-color: $base-sub-menu-background !important;
+      border-radius: 8px;
+      height: 45px;
+      margin: 1px 5px 1px 5px;
 
-      &:hover {
+      &.is-active {
+        background-color: var(--el-menu-active-color) !important;
+        color: #fff;
+      }
+      &:not(.is-active):hover {
+        // you can use $sub-menuHover
         background-color: $base-sub-menu-hover !important;
       }
     }
 
     & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .theme-dark .el-menu-item {
-      &:hover {
+      border-radius: 8px;
+      height: 45px;
+      margin: 1px 5px 1px 5px;
+
+      &.is-active {
+        background-color: var(--el-menu-active-color) !important;
+        color: #fff;
+      }
+      &:not(.is-active):hover {
         // you can use $sub-menuHover
         background-color: $base-menu-hover !important;
       }
     }
+
     & .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .el-menu-item {
-      &:hover {
+      border-radius: 8px;
+      height: 45px;
+      margin: 1px 5px 1px 5px;
+
+      &.is-active {
+        background-color: var(--el-menu-active-color) !important;
+        color: #fff;
+      }
+      &:not(.is-active):hover {
         // you can use $sub-menuHover
         background-color: rgba(0, 0, 0, 0.04) !important;
       }
     }
   }
 
+  // 收起菜单后的样式
   .hideSidebar {
     .sidebar-container {
       width: 54px !important;
@@ -146,29 +181,48 @@
     .sub-menu-title-noDropdown {
       padding: 0 !important;
       position: relative;
+      height: 45px;
+      // 选中状态的菜单
+      &.is-active {
+        background-color: var(--el-menu-active-color) !important;
+        color: #fff !important;
+      }
 
       .el-tooltip {
         padding: 0 !important;
-
-        .svg-icon {
-          margin-left: 20px;
-        }
       }
     }
 
-    .el-sub-menu {
+
+    & .el-sub-menu {
       overflow: hidden;
+      border-radius: 8px;
+      .el-sub-menu__title.el-tooltip__trigger {
+        border-radius: 8px;
+        height: 45px;
+      }
+
+      // 选中状态的菜单
+      &.is-active .el-sub-menu__title.el-tooltip__trigger {
+        background-color: var(--el-menu-active-color) !important;
+      }
+
 
       & > .el-sub-menu__title {
         padding: 0 !important;
-
-        .svg-icon {
-          margin-left: 20px;
-        }
       }
     }
 
     .el-menu--collapse {
+      .is-active .svg-icon {
+        fill: #fff;
+      }
+      .svg-icon {
+        display: flex;
+        margin: auto;
+        height: 100%;
+        // 这里设置width会跟随sidebar-container的transition 不符合预期
+      }
       .el-sub-menu {
         & > .el-sub-menu__title {
           & > span {
@@ -230,3 +284,13 @@
     }
   }
 }
+// 收起菜单后悬浮的菜单样式
+.el-popper.is-pure{
+  border-radius: 8px;
+  .el-menu--popup{
+    border-radius: 8px;
+  }
+  .el-menu-item{
+    border-radius: 4px;
+  }
+}

src/assets/styles/transition.scss

@@ -6,7 +6,7 @@
   transition: opacity 0.28s;
 }
 
-.fade-enter,
+.fade-enter-from,
 .fade-leave-active {
   opacity: 0;
 }
@@ -18,7 +18,7 @@
   transition: all 0.5s;
 }
 
-.fade-transform-enter {
+.fade-transform-enter-from {
   opacity: 0;
   transform: translateX(-30px);
 }
@@ -34,7 +34,7 @@
   transition: all 0.5s;
 }
 
-.breadcrumb-enter,
+.breadcrumb-enter-from,
 .breadcrumb-leave-active {
   opacity: 0;
   transform: translateX(20px);

src/assets/styles/variables.module.scss

@@ -1,6 +1,6 @@
 // 全局SCSS变量
 :root {
-  --menuBg: #304156;
+  --menuBg: #1f2d3d;
   --menuColor: #bfcbd9;
   --menuActiveText: #f4f4f5;
   --menuHover: #263445;
@@ -10,18 +10,23 @@
   --subMenuHover: #001528;
   --subMenuTitleHover: #293444;
 
+  // 菜单栏缩进
+  --el-menu-base-level-padding: 12px;
+  --el-menu-level-padding: 8px;
+  --el-menu-item-height: 50px;
+
   --fixedHeaderBg: #ffffff;
   --tableHeaderBg: #f8f8f9;
   --tableHeaderTextColor: #515a6e;
 
-  // 工作流
-  --bpmn-panel-border: #eeeeee;
-  --bpmn-panel-box-shadow: #cccccc;
-  --bpmn-panel-bar-background-color: #f5f7fa;
-
   // ele
-  --brder-color: #e8e8e8
+  --brder-color: #e8e8e8;
+
+  // 添加 tag 相关变量
+  --tags-view-active-bg: var(--el-color-primary);
+  --tags-view-active-border-color: var(--el-color-primary);
 }
+
 html.dark {
   --menuBg: #1d1e1f;
   --menuColor: #bfcbd9;
@@ -41,26 +46,40 @@ html.dark {
   .el-tree-node__content {
     --el-color-primary-light-9: #262727;
   }
+
+  .el-button--primary {
+    --el-button-bg-color: var(--el-color-primary-dark-6);
+    --el-button-border-color: var(--el-color-primary-light-2);
+  }
+
+  .el-switch {
+    --el-switch-on-color: var(--el-color-primary-dark-6);
+    --el-switch-border-color: var(--el-color-primary-light-2);
+  }
+
+  .el-tag--primary {
+    --el-tag-bg-color: var(--el-color-primary-dark-6);
+    --el-tag-border-color: var(--el-color-primary-light-2);
+  }
+
+  // 在深色模式下使用更深的颜色
+  --tags-view-active-bg: var(--el-color-primary-dark-6);
+  --tags-view-active-border-color: var(--el-color-primary-light-2);
   // vxe-table 主题
-  --vxe-font-color: #98989E;
-  --vxe-primary-color: #2C7ECF;
-  --vxe-icon-background-color: #98989E;
-  --vxe-table-font-color: #98989E;
+  --vxe-font-color: #98989e;
+  --vxe-primary-color: #2c7ecf;
+  --vxe-icon-background-color: #98989e;
+  --vxe-table-font-color: #98989e;
   --vxe-table-resizable-color: #95969a;
-  --vxe-table-header-background-color: #28282A;
+  --vxe-table-header-background-color: #28282a;
   --vxe-table-body-background-color: #151518;
   --vxe-table-background-color: #4a5663;
   --vxe-table-border-width: 1px;
-  --vxe-table-border-color: #37373A;
-  --vxe-toolbar-background-color: #37373A;
-
-  // 工作流
-  --bpmn-panel-border: #37373A;
-  --bpmn-panel-box-shadow: #37373A;
-  --bpmn-panel-bar-background-color: #37373A;
+  --vxe-table-border-color: #37373a;
+  --vxe-toolbar-background-color: #37373a;
 
   // ele
-  --brder-color: #37373A
+  --brder-color: #37373a;
 }
 
 // base color
@@ -118,4 +137,4 @@ $base-sidebar-width: 200px;
   dangerColor: $--color-danger;
   infoColor: $--color-info;
   warningColor: $--color-warning;
-}
+}

src/bpmn/assets/defaultXML.ts

@@ -1,23 +0,0 @@
-function generateRandomValue() {
-  // 生成一个随机数
-  const randomValue = Math.random().toString(36).slice(2, 12);
-  return `Process_${randomValue}`;
-}
-
-const cartage: string = 'default';
-export default `<?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:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef">
-  <process id="process_${generateRandomValue()}" name="name_${generateRandomValue()}">
-    <startEvent id="startNode1" name="开始" />
-  </process>
-  <bpmndi:BPMNDiagram id="BPMNDiagram_flow">
-    <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c">
-      <bpmndi:BPMNShape id="BPMNShape_startNode1" bpmnElement="startNode1" bioc:stroke="">
-        <omgdc:Bounds x="240" y="200" width="30" height="30" />
-        <bpmndi:BPMNLabel>
-          <omgdc:Bounds x="242" y="237" width="23" height="14" />
-        </bpmndi:BPMNLabel>
-      </bpmndi:BPMNShape>
-    </bpmndi:BPMNPlane>
-  </bpmndi:BPMNDiagram>
-</definitions>`;

src/bpmn/assets/lang/zh.ts

@@ -1,126 +0,0 @@
-export const NodeName = {
-  'bpmn:Process': '流程',
-  'bpmn:StartEvent': '开始事件',
-  'bpmn:IntermediateThrowEvent': '中间事件',
-  'bpmn:Task': '任务',
-  'bpmn:SendTask': '发送任务',
-  'bpmn:ReceiveTask': '接收任务',
-  'bpmn:UserTask': '用户任务',
-  'bpmn:ManualTask': '手工任务',
-  'bpmn:BusinessRuleTask': '业务规则任务',
-  'bpmn:ServiceTask': '服务任务',
-  'bpmn:ScriptTask': '脚本任务',
-  'bpmn:EndEvent': '结束事件',
-  'bpmn:SequenceFlow': '流程线',
-  'bpmn:ExclusiveGateway': '互斥网关',
-  'bpmn:ParallelGateway': '并行网关',
-  'bpmn:InclusiveGateway': '相容网关',
-  'bpmn:ComplexGateway': '复杂网关',
-  'bpmn:EventBasedGateway': '事件网关',
-  'bpmn:Participant': '池/参与者',
-  'bpmn:SubProcess': '子流程',
-  'bpmn:DataObjectReference': '数据对象引用',
-  'bpmn:DataStoreReference': '数据存储引用',
-  'bpmn:Group': '组'
-};
-
-export default {
-  'Activate hand tool': '启动手动工具',
-  'Activate lasso tool': '启动 Lasso 工具',
-  'Activate create/remove space tool': '启动创建/删除空间工具',
-  'Activate global connect tool': '启动全局连接工具',
-  'Ad-hoc': 'Ad-hoc',
-  'Add lane above': '在上方添加泳道',
-  'Add lane below': '在下方添加泳道',
-  'Business rule task': '规则任务',
-  'Call activity': '引用流程',
-  'Compensation end event': '结束补偿事件',
-  'Compensation intermediate throw event': '中间补偿抛出事件',
-  'Complex gateway': '复杂网关',
-  'Conditional intermediate catch event': '中间条件捕获事件',
-  'Conditional start event (non-interrupting)': '条件启动事件 (非中断)',
-  'Conditional start event': '条件启动事件',
-  'Connect using association': '文本关联',
-  'Connect using sequence/message flow or association': '消息关联',
-  'Change element': '更改元素',
-  'Change type': '更改类型',
-  'Create data object reference': '创建数据对象引用',
-  'Create data store reference': '创建数据存储引用',
-  'Create expanded sub-process': '创建可折叠子流程',
-  'Create pool/participant': '创建池/参与者',
-  'Collection': '集合',
-  'Connect using data input association': '数据输入关联',
-  'Data store reference': '数据存储引用',
-  'Data object reference': '数据对象引用',
-  'Divide into two lanes': '分成两个泳道',
-  'Divide into three lanes': '分成三个泳道',
-  'End event': '结束事件',
-  'Error end event': '结束错误事件',
-  'Escalation end event': '结束升级事件',
-  'Escalation intermediate throw event': '中间升级抛出事件',
-  'Event sub-process': '事件子流程',
-  'Event-based gateway': '事件网关',
-  'Exclusive gateway': '互斥网关',
-  'Empty pool/participant (removes content)': '清空池/参与者 (删除内容)',
-  'Empty pool/participant': '清空池/参与者',
-  'Expanded pool/participant': '展开池/参与者',
-  'Inclusive gateway': '相容网关',
-  'Intermediate throw event': '中间抛出事件',
-  'Loop': '循环',
-  'Link intermediate catch event': '中间链接捕获事件',
-  'Link intermediate throw event': '中间链接抛出事件',
-  'Manual task': '手动任务',
-  'Message end event': '结束消息事件',
-  'Message intermediate catch event': '中间消息捕获事件',
-  'Message intermediate throw event': '中间消息抛出事件',
-  'Message start event': '消息启动事件',
-  'Parallel gateway': '并行网关',
-  'Parallel multi-instance': '并行多实例',
-  'Participant multiplicity': '参与者多重性',
-  'Receive task': '接受任务',
-  'Remove': '移除',
-  'Script task': '脚本任务',
-  'Send task': '发送任务',
-  'Sequential multi-instance': '串行多实例',
-  'Service task': '服务任务',
-  'Signal end event': '结束信号事件',
-  'Signal intermediate catch event': '中间信号捕获事件',
-  'Signal intermediate throw event': '中间信号抛出事件',
-  'Signal start event (non-interrupting)': '信号启动事件 (非中断)',
-  'Signal start event': '信号启动事件',
-  'Start event': '开始事件',
-  'Sub-process (collapsed)': '可折叠子流程',
-  'Sub-process (expanded)': '可展开子流程',
-  'Sub rocess': '子流程',
-  'Task': '任务',
-  'Transaction': '事务',
-  'Terminate end event': '终止边界事件',
-  'Timer intermediate catch event': '中间定时捕获事件',
-  'Timer start event (non-interrupting)': '定时启动事件 (非中断)',
-  'Timer start event': '定时启动事件',
-  'User task': '用户任务',
-  'Create start event': '创建开始事件',
-  'Create gateway': '创建网关',
-  'Create intermediate/boundary event': '创建中间/边界事件',
-  'Create end event': '创建结束事件',
-  'Create group': '创建组',
-  'Create startEvent': '开始节点',
-  'Create endEvent': '结束节点',
-  'Create exclusiveGateway': '互斥网关',
-  'Create parallelGateway': '并行网关',
-  'Create task': '任务节点',
-  'Create userTask': '用户任务节点',
-  'Condition type': '条件类型',
-  'Append end event': '追加结束事件节点',
-  'Append gateway': '追加网关节点',
-  'Append task': '追加任务',
-  'Append user task': '追加用户任务节点',
-  'Append text annotation': '追加文本注释',
-  'Append intermediate/boundary event': '追加中间或边界事件',
-  'Append receive task': '追加接收任务节点',
-  'Append message intermediate catch event': '追加中间消息捕获事件',
-  'Append timer intermediate catch event': '追加中间定时捕获事件',
-  'Append conditional intermediate catch event': '追加中间条件捕获事件',
-  'Append signal intermediate catch event': '追加中间信号捕获事件',
-  'flow elements must be children of pools/participants': '流程元素必须是池/参与者的子元素'
-};

src/bpmn/assets/module/ContextPad/CustomContextPadProvider.ts

@@ -1,138 +0,0 @@
-import ContextPadProvider from 'bpmn-js/lib/features/context-pad/ContextPadProvider';
-import { Injector } from 'didi';
-import EventBus from 'diagram-js/lib/core/EventBus';
-import ContextPad from 'diagram-js/lib/features/context-pad/ContextPad';
-import Modeling from 'bpmn-js/lib/features/modeling/Modeling.js';
-import ElementFactory from 'bpmn-js/lib/features/modeling/ElementFactory';
-import Connect from 'diagram-js/lib/features/connect/Connect';
-import Create from 'diagram-js/lib/features/create/Create';
-import PopupMenu from 'diagram-js/lib/features/popup-menu/PopupMenu';
-import Canvas from 'diagram-js/lib/core/Canvas';
-import Rules from 'diagram-js/lib/features/rules/Rules';
-import { Element, Shape } from 'diagram-js/lib/model/Types';
-import BpmnFactory from 'bpmn-js/lib/features/modeling/BpmnFactory';
-import modeler from '@/store/modules/modeler';
-
-// @Description: 增强元素连线事件
-
-class CustomContextPadProvider extends ContextPadProvider {
-  private _contextPad: ContextPad;
-  private _modeling: Modeling;
-  private _elementFactory: ElementFactory;
-  private _autoPlace: any;
-  private _connect: Connect;
-  private _create: Create;
-  private _popupMenu: PopupMenu;
-  private _canvas: Canvas;
-  private _rules: Rules;
-
-  constructor(
-    config: any,
-    injector: Injector,
-    eventBus: EventBus,
-    contextPad: ContextPad,
-    modeling: Modeling,
-    elementFactory: ElementFactory,
-    connect: Connect,
-    create: Create,
-    popupMenu: PopupMenu,
-    canvas: Canvas,
-    rules: Rules,
-    translate
-  ) {
-    // @ts-ignore
-    super(config, injector, eventBus, contextPad, modeling, elementFactory, connect, create, popupMenu, canvas, rules, translate);
-
-    this._contextPad = contextPad;
-    this._modeling = modeling;
-    this._elementFactory = elementFactory;
-    this._connect = connect;
-    this._create = create;
-    this._popupMenu = popupMenu;
-    this._canvas = canvas;
-    this._rules = rules;
-
-    this._autoPlace = injector.get('autoPlace', false);
-  }
-
-  getContextPadEntries(element: Element) {
-    const actions: Record<string, any> = {};
-
-    const appendUserTask = (event: Event, element: Shape) => {
-      const shape = this._elementFactory.createShape({ type: 'bpmn:UserTask' });
-      this._create.start(event, shape, {
-        source: element
-      });
-    };
-
-    const appendMultiInstanceUserTask = (event: Event, element: Shape) => {
-      const store = modeler();
-      const bpmnFactory = store.getModeler().get('bpmnFactory') as BpmnFactory;
-      const businessObject = bpmnFactory.create('bpmn:UserTask', {
-        // name: '多实例用户任务',
-        isForCompensation: false
-      });
-      businessObject.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics');
-      // 创建 Shape
-      const shape = this._elementFactory.createShape({
-        type: 'bpmn:UserTask',
-        businessObject: businessObject
-      });
-      this._create.start(event, shape, { source: element });
-    };
-
-    const appendTask = this._autoPlace
-      ? (event, element) => {
-          const bpmnFactory: BpmnFactory | undefined = modeler().getModeler().get('bpmnFactory');
-          const businessObject = bpmnFactory.create('bpmn:UserTask', {
-            // name: '多实例用户任务',// 右键创建显示
-            isForCompensation: false
-          });
-
-          // 创建多实例属性并分配给用户任务的 loopCharacteristics
-          businessObject.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics');
-
-          // 创建 Shape
-          const shape = this._elementFactory.createShape({
-            type: 'bpmn:UserTask',
-            businessObject: businessObject
-          });
-
-          this._autoPlace.append(element, shape);
-        }
-      : appendMultiInstanceUserTask;
-
-    const append = this._autoPlace
-      ? (event: Event, element: Shape) => {
-          const shape = this._elementFactory.createShape({ type: 'bpmn:UserTask' });
-          this._autoPlace.append(element, shape);
-        }
-      : appendUserTask;
-
-    // // 添加创建用户任务按钮
-    actions['append.append-user-task'] = {
-      group: 'model',
-      className: 'bpmn-icon-user-task',
-      title: '用户任务',
-      action: {
-        dragstart: appendUserTask,
-        click: append
-      }
-    };
-
-    // 添加创建多实例用户任务按钮
-    actions['append.append-multi-instance-user-task'] = {
-      group: 'model',
-      className: 'bpmn-icon-user', // 你可以使用多实例用户任务的图标  bpmn-icon-user   bpmn-icon-user-task
-      title: '多实例用户任务',
-      action: {
-        dragstart: appendMultiInstanceUserTask,
-        click: appendTask
-      }
-    };
-
-    return actions;
-  }
-}
-
-export default CustomContextPadProvider;

src/bpmn/assets/module/Palette/CustomPaletteProvider.ts

@@ -1,109 +0,0 @@
-import { assign } from 'min-dash';
-import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
-import ElementFactory from 'bpmn-js/lib/features/modeling/ElementFactory';
-import Create from 'diagram-js/lib/features/create/Create';
-import SpaceTool from 'diagram-js/lib/features/space-tool/SpaceTool';
-import LassoTool from 'diagram-js/lib/features/lasso-tool/LassoTool';
-import HandTool from 'diagram-js/lib/features/hand-tool/HandTool';
-import GlobalConnect from 'diagram-js/lib/features/global-connect/GlobalConnect';
-import Palette from 'diagram-js/lib/features/palette/Palette';
-import modeler from '@/store/modules/modeler';
-import BpmnFactory from 'bpmn-js/lib/features/modeling/BpmnFactory';
-
-// @Description: 增强左侧面板
-class CustomPaletteProvider extends PaletteProvider {
-  private readonly _palette: Palette;
-  private readonly _create: Create;
-  private readonly _elementFactory: ElementFactory;
-  private readonly _spaceTool: SpaceTool;
-  private readonly _lassoTool: LassoTool;
-  private readonly _handTool: HandTool;
-  private readonly _globalConnect: GlobalConnect;
-  private readonly _translate: any;
-
-  constructor(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
-    super(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate);
-    this._palette = palette;
-    this._create = create;
-    this._elementFactory = elementFactory;
-    this._spaceTool = spaceTool;
-    this._lassoTool = lassoTool;
-    this._handTool = handTool;
-    this._globalConnect = globalConnect;
-    this._translate = translate;
-  }
-
-  getPaletteEntries() {
-    const actions = {},
-      create = this._create,
-      elementFactory = this._elementFactory,
-      translate = this._translate;
-
-    function createAction(type: string, group: string, className: string, title: string, options?: object) {
-      function createListener(event) {
-        const shape = elementFactory.createShape(assign({ type: type }, options));
-        if (options) {
-          !shape.businessObject.di && (shape.businessObject.di = {});
-          shape.businessObject.di.isExpanded = (options as { [key: string]: any }).isExpanded;
-        }
-        create.start(event, shape, null);
-      }
-      const shortType = type.replace(/^bpmn:/, '');
-      return {
-        group: group,
-        className: className,
-        title: title || translate('Create {type}', { type: shortType }),
-        action: {
-          dragstart: createListener,
-          click: createListener
-        }
-      };
-    }
-
-    function createMultiInstanceUserTask(event) {
-      const bpmnFactory: BpmnFactory | undefined = modeler().getBpmnFactory();
-      // 创建一个 bpmn:UserTask
-      const userTask = bpmnFactory.create('bpmn:UserTask', {
-        // name: '多实例用户任务', // 在画板中显示字段
-        isForCompensation: false
-      });
-      // 将多实例属性分配给 bpmn:UserTask 的 loopCharacteristics
-      userTask.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics');
-      const customUserTask = elementFactory.createShape({
-        type: 'bpmn:UserTask',
-        businessObject: userTask // 分配创建的 userTask 到 businessObject
-      });
-      create.start(event, customUserTask, {});
-    }
-
-    assign(actions, {
-      'create.parallel-gateway': createAction('bpmn:ParallelGateway', 'gateway', 'bpmn-icon-gateway-parallel', '并行网关'),
-      'create.event-base-gateway': createAction('bpmn:EventBasedGateway', 'gateway', 'bpmn-icon-gateway-eventbased', '事件网关'),
-      // 分组线
-      'gateway-separator': {
-        group: 'gateway',
-        separator: true
-      },
-      'create.user-task': createAction('bpmn:UserTask', 'activity', 'bpmn-icon-user-task', '创建用户任务'),
-      'create.multi-instance-user-task': {
-        group: 'activity',
-        type: 'bpmn:UserTask',
-        className: 'bpmn-icon-user task-multi-instance',
-        title: '创建多实例用户任务',
-        action: {
-          click: createMultiInstanceUserTask,
-          dragstart: createMultiInstanceUserTask
-        }
-      },
-      'task-separator': {
-        group: 'activity',
-        separator: true
-      }
-    });
-    return actions;
-  }
-}
-
-CustomPaletteProvider['$inject'] = ['palette', 'create', 'elementFactory', 'spaceTool', 'lassoTool', 'handTool', 'globalConnect', 'translate'];
-
-export default CustomPaletteProvider;

src/bpmn/assets/module/Renderer/CustomRenderer.ts

@@ -1,56 +0,0 @@
-import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
-import {
-  append as svgAppend,
-  attr as svgAttr,
-  create as svgCreate,
-  select as svgSelect,
-  selectAll as svgSelectAll,
-  clone as svgClone,
-  clear as svgClear,
-  remove as svgRemove
-} from 'tiny-svg';
-
-const HIGH_PRIORITY = 1500;
-export default class CustomRenderer extends BaseRenderer {
-  bpmnRenderer: BaseRenderer;
-  modeling: any;
-  constructor(eventBus, bpmnRenderer, modeling) {
-    super(eventBus, HIGH_PRIORITY);
-    this.bpmnRenderer = bpmnRenderer;
-    this.modeling = modeling;
-  }
-  canRender(element) {
-    // ignore labels
-    return !element.labelTarget;
-  }
-
-  /**
-   * 自定义节点图形
-   * @param {*} parentNode 当前元素的svgNode
-   * @param {*} element
-   * @returns
-   */
-  drawShape(parentNode, element) {
-    const shape = this.bpmnRenderer.drawShape(parentNode, element);
-    const { type, width, height } = element;
-    // 开始 填充绿色
-    if (type === 'bpmn:StartEvent') {
-      svgAttr(shape, { fill: '#77DF6D' });
-      return shape;
-    }
-    if (type === 'bpmn:EndEvent') {
-      svgAttr(shape, { fill: '#EE7B77' });
-      return shape;
-    }
-    if (type === 'bpmn:UserTask') {
-      svgAttr(shape, { fill: '#A9C4F8' });
-      return shape;
-    }
-    return shape;
-  }
-
-  getShapePath(shape) {
-    return this.bpmnRenderer.getShapePath(shape);
-  }
-}
-CustomRenderer['$inject'] = ['eventBus', 'bpmnRenderer'];

src/bpmn/assets/module/Translate/index.ts

@@ -1,15 +0,0 @@
-import zh from '../../lang/zh';
-
-const customTranslate = (template: any, replacements: any) => {
-  replacements = replacements || {};
-  template = zh[template] || template;
-  return template.replace(/{([^}]+)}/g, function (_: any, key: any) {
-    return replacements[key] || '{' + key + '}';
-  });
-};
-
-export const translateModule = {
-  translate: ['value', customTranslate]
-};
-
-export default translateModule;

src/bpmn/assets/module/index.ts

@@ -1,17 +0,0 @@
-// 翻译模块
-import TranslationModule from './Translate';
-import { ModuleDeclaration } from 'didi';
-import CustomPaletteProvider from './Palette/CustomPaletteProvider';
-import CustomRenderer from './Renderer/CustomRenderer';
-import CustomContextPadProvider from './ContextPad/CustomContextPadProvider';
-
-const Module: ModuleDeclaration[] = [
-  {
-    __init__: ['customPaletteProvider', 'customContextPadProvider', 'customRenderer'],
-    customPaletteProvider: ['type', CustomPaletteProvider],
-    customRenderer: ['type', CustomRenderer],
-    customContextPadProvider: ['type', CustomContextPadProvider]
-  },
-  TranslationModule
-];
-export default Module;

src/bpmn/assets/showConfig.ts

@@ -1,50 +0,0 @@
-export default {
-  'bpmn:EndEvent': {},
-  'bpmn:StartEvent': {
-    initiator: true,
-    formKey: true
-  },
-  'bpmn:UserTask': {
-    allocationType: true,
-    specifyDesc: true,
-    multipleUserAuditType: true,
-    async: true,
-    priority: true,
-    skipExpression: true,
-    dueDate: true,
-    taskListener: true,
-    executionListener: true
-  },
-  'bpmn:ServiceTask': {
-    async: true,
-    skipExpression: true,
-    isForCompensation: true,
-    triggerable: true,
-    class: true
-  },
-  'bpmn:ScriptTask': {
-    async: true,
-    isForCompensation: true,
-    autoStoreVariables: true
-  },
-  'bpmn:ManualTask': {
-    async: true,
-    isForCompensation: true
-  },
-  'bpmn:ReceiveTask': {
-    async: true,
-    isForCompensation: true
-  },
-  'bpmn:SendTask': {
-    async: true,
-    isForCompensation: true
-  },
-  'bpmn:BusinessRuleTask': {
-    async: true,
-    isForCompensation: true,
-    ruleVariablesInput: true,
-    rules: true,
-    resultVariable: true,
-    exclude: true
-  }
-};

src/bpmn/assets/style/index.scss

@@ -1,284 +0,0 @@
-.djs-palette {
-  width: 300px;
-
-  .bpmn-icon-hand-tool:hover {
-    &:after {
-      content: '启动手动工具';
-      position: absolute;
-      left: 45px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-lasso-tool:hover {
-    &:after {
-      content: '启动套索工具';
-      position: absolute;
-      left: 100px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-space-tool:hover {
-    &:after {
-      content: '启动创建/删除空间工具';
-      position: absolute;
-      left: 45px;
-      width: 170px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-connection-multi:hover {
-    &:after {
-      content: '启动全局连接工具';
-      position: absolute;
-      left: 100px;
-      width: 140px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-start-event-none:hover {
-    &:after {
-      content: '创建开始事件';
-      position: absolute;
-      left: 45px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-intermediate-event-none:hover {
-    &:after {
-      content: '创建中间/边界事件';
-      position: absolute;
-      left: 100px;
-      width: 140px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-end-event-none:hover {
-    &:after {
-      content: '创建结束事件';
-      position: absolute;
-      left: 45px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-gateway-none:hover {
-    &:after {
-      content: '创建网关';
-      position: absolute;
-      left: 100px;
-      width: 90px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-gateway-parallel:hover {
-    &:after {
-      content: '创建并行网关';
-      position: absolute;
-      left: 45px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-gateway-eventbased:hover {
-    &:after {
-      content: '创建事件网关';
-      position: absolute;
-      left: 100px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-task:hover {
-    &:after {
-      content: '创建任务';
-      position: absolute;
-      left: 45px;
-      width: 80px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-subprocess-expanded:hover {
-    &:after {
-      content: '创建可折叠子流程';
-      position: absolute;
-      left: 100px;
-      width: 140px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-user-task:hover {
-    &:after {
-      content: '创建用户任务';
-      position: absolute;
-      left: 45px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-
-  .task-multi-instance:hover {
-    &:after {
-      content: '创建多实例用户任务';
-      position: absolute;
-      left: 100px;
-      width: 160px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-participant:hover {
-    &:after {
-      content: '创建泳池/泳道';
-      position: absolute;
-      left: 45px;
-      width: 120px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #3a84de;
-      border-radius: 2px;
-      border: 1px solid #cccccc;
-      background-color: #fafafa;
-      opacity: 0.8;
-    }
-  }
-  .bpmn-icon-data-object {
-    display: none;
-    &:hover {
-      &:after {
-        content: '创建数据对象';
-        position: absolute;
-        left: 45px;
-        width: 120px;
-        font-size: 15px;
-        font-weight: bold;
-        color: #3a84de;
-        border-radius: 2px;
-        border: 1px solid #cccccc;
-        background-color: #fafafa;
-        opacity: 0.8;
-      }
-    }
-  }
-  .bpmn-icon-data-store {
-    display: none;
-    &:hover {
-      &:after {
-        content: '创建数据存储';
-        position: absolute;
-        left: 100px;
-        width: 120px;
-        font-size: 15px;
-        font-weight: bold;
-        color: #3a84de;
-        border-radius: 2px;
-        border: 1px solid #cccccc;
-        background-color: #fafafa;
-        opacity: 0.8;
-      }
-    }
-  }
-  .bpmn-icon-group {
-    display: none;
-    &:hover {
-      &:after {
-        content: '创建分组';
-        position: absolute;
-        left: 100px;
-        width: 100px;
-        font-size: 15px;
-        font-weight: bold;
-        color: #3a84de;
-        border-radius: 2px;
-        border: 1px solid #cccccc;
-        background-color: #fafafa;
-        opacity: 0.8;
-      }
-    }
-  }
-}

src/bpmn/hooks/usePanel.ts

@@ -1,145 +0,0 @@
-import showConfig from '../assets/showConfig';
-import type { ModdleElement } from 'bpmn';
-import useModelerStore from '@/store/modules/modeler';
-import { MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums';
-interface Options {
-  element: ModdleElement;
-}
-
-export default (ops: Options) => {
-  const { element } = ops;
-  const { getModeling, getModdle } = useModelerStore();
-  const modeling = getModeling();
-  const moddle = getModdle();
-
-  /**
-   * 当前节点类型
-   */
-  const elementType = computed(() => {
-    const bizObj = element.businessObject;
-    return bizObj.eventDefinitions ? bizObj.eventDefinitions[0].$type : bizObj.$type;
-  });
-
-  /**
-   * 用于控制面板字段显示与隐藏的配置
-   */
-  const config = computed(() => showConfig[elementType.value] || {});
-
-  /**
-   * 创建一个节点
-   * @param elementType 节点类型
-   * @param properties 属性
-   * @param parent 父节点
-   */
-  const createModdleElement = (elementType: string, properties: any, parent: ModdleElement) => {
-    const element = moddle.create(elementType, properties);
-    parent && (element.$parent = parent);
-    return element;
-  };
-
-  /**
-   * 获取扩展属性，如果不存在会自动创建
-   */
-  const getExtensionElements = (create = true) => {
-    let extensionElements = element.businessObject.get<ModdleElement>('extensionElements');
-    if (!extensionElements && create) {
-      extensionElements = createModdleElement('bpmn:ExtensionElements', { values: [] }, element.businessObject);
-      modeling.updateModdleProperties(element, element.businessObject, { extensionElements });
-    }
-    return extensionElements;
-  };
-
-  /**
-   * 获取extensionElements下的properties
-   * @param extensionElements 可选参数，默认获取当前Element下的extensionElements下的Properties
-   */
-  const getPropertiesElements = (extensionElements?: ModdleElement) => {
-    if (!extensionElements) {
-      extensionElements = getExtensionElements();
-    }
-    let propertiesElements = extensionElements.values.find((item) => item.$type === 'flowable:properties');
-    if (!propertiesElements) {
-      propertiesElements = createModdleElement('flowable:properties', { values: [] }, extensionElements);
-      modeling.updateModdleProperties(element, extensionElements, {
-        values: [...extensionElements.get<[]>('values'), propertiesElements]
-      });
-    }
-    return propertiesElements;
-  };
-
-  /**
-   * 更新节点属性
-   * @param properties 属性值
-   */
-  const updateProperties = (properties: any) => {
-    modeling.updateProperties(element, properties);
-  };
-
-  /**
-   * 更新节点信息
-   * @param updateElement 需要更新的节点
-   * @param properties 属性
-   */
-  const updateModdleProperties = (updateElement, properties: any) => {
-    modeling.updateModdleProperties(element, updateElement, properties);
-  };
-
-  /**
-   * 更新Property属性
-   * @param name key值
-   * @param value 值
-   */
-  const updateProperty = (name: string, value: string) => {
-    const propertiesElements = getPropertiesElements();
-
-    let propertyElements = propertiesElements.values.find((item) => item.name === name);
-    if (!propertyElements) {
-      propertyElements = createModdleElement('flowable:property', { name: name, value: value }, propertiesElements);
-      modeling.updateModdleProperties(element, propertiesElements, {
-        values: [...propertiesElements.get('values'), propertyElements]
-      });
-    } else {
-      propertyElements.name = name;
-      propertyElements.value = value;
-    }
-    return propertyElements;
-  };
-
-  const idChange = (newVal: string) => {
-    if (newVal) {
-      updateProperties({ id: newVal });
-    }
-  };
-  const nameChange = (newVal: string) => {
-    if (newVal) {
-      updateProperties({ name: newVal });
-    }
-  };
-  const formKeyChange = (newVal: string) => {
-    updateProperties({ formKey: newVal });
-  };
-  const constant = {
-    MultiInstanceType: [
-      { id: '373d4b81-a0d1-4eb8-8685-0d2fb1b468e2', label: '无', value: MultiInstanceTypeEnum.NONE },
-      { id: 'b5acea7c-b7e5-46b0-8778-390db091bdab', label: '串行', value: MultiInstanceTypeEnum.SERIAL },
-      { id: 'b4f0c683-1ccc-43c4-8380-e1b998986caf', label: '并行', value: MultiInstanceTypeEnum.PARALLEL }
-    ]
-  };
-
-  return {
-    elementType,
-    constant,
-    showConfig: config,
-
-    updateProperties,
-    updateProperty,
-    updateModdleProperties,
-
-    createModdleElement,
-    idChange,
-    nameChange,
-    formKeyChange,
-    getExtensionElements,
-    getPropertiesElements
-  };
-};

src/bpmn/hooks/useParseElement.ts

@@ -1,34 +0,0 @@
-import type { ModdleElement } from 'bpmn';
-
-interface Options {
-  element: ModdleElement;
-}
-
-interface Data {
-  id: string;
-}
-
-export default (ops: Options) => {
-  const { element } = ops;
-
-  const parseData = <T>(): T => {
-    const result = {
-      ...element.businessObject,
-      ...element.businessObject.$attrs
-    };
-
-    // 移除flowable前缀，格式化数组
-    for (const key in result) {
-      if (key.indexOf('flowable:') === 0) {
-        const newKey = key.replace('flowable:', '');
-        result[newKey] = result[key];
-        delete result[key];
-      }
-    }
-    return { ...result } as T;
-  };
-
-  return {
-    parseData
-  };
-};

src/bpmn/index.vue

@@ -1,496 +0,0 @@
-<template>
-  <div class="containers-bpmn">
-    <!-- dark模式下 连接线的箭头样式 -->
-    <svg width="0" height="0" style="position: absolute">
-      <defs>
-        <marker id="markerArrow-dark-mode" viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto">
-          <path d="M 1 5 L 11 10 L 1 15 Z" class="arrow-dark" />
-        </marker>
-      </defs>
-    </svg>
-    <div v-loading="loading" class="app-containers-bpmn">
-      <el-container class="h-full">
-        <el-container style="align-items: stretch">
-          <el-header>
-            <div class="process-toolbar">
-              <el-space wrap :size="10">
-                <el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
-                  <el-button size="small" icon="Rank" @click="fitViewport" />
-                </el-tooltip>
-                <el-tooltip effect="dark" content="放大" placement="bottom">
-                  <el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" />
-                </el-tooltip>
-                <el-tooltip effect="dark" content="缩小" placement="bottom">
-                  <el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" />
-                </el-tooltip>
-                <el-tooltip effect="dark" content="后退" placement="bottom">
-                  <el-button size="small" icon="Back" @click="bpmnModeler.get('commandStack').undo()" />
-                </el-tooltip>
-                <el-tooltip effect="dark" content="前进" placement="bottom">
-                  <el-button size="small" icon="Right" @click="bpmnModeler.get('commandStack').redo()" />
-                </el-tooltip>
-              </el-space>
-              <el-space wrap :size="10" style="float: right; padding-right: 10px">
-                <el-button size="small" type="primary" @click="saveXml">保 存</el-button>
-                <el-dropdown size="small">
-                  <el-button size="small" type="primary"> 预 览 </el-button>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item icon="Document" @click="previewXML">XML预览</el-dropdown-item>
-                      <el-dropdown-item icon="View" @click="previewSVG"> SVG预览</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-                <el-dropdown size="small">
-                  <el-button size="small" type="primary"> 下 载 </el-button>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item icon="Download" @click="downloadXML">下载XML</el-dropdown-item>
-                      <el-dropdown-item icon="Download" @click="downloadSVG"> 下载SVG</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </el-space>
-            </div>
-          </el-header>
-          <div ref="canvas" class="canvas" />
-        </el-container>
-        <div :class="{ 'process-panel': true, 'hide': panelFlag }">
-          <div class="process-panel-bar" @click="panelBarClick">
-            <div class="open-bar">
-              <el-link type="default" :underline="false">
-                <svg-icon class-name="open-bar" :icon-class="panelFlag ? 'caret-back' : 'caret-forward'"></svg-icon>
-              </el-link>
-            </div>
-          </div>
-          <transition enter-active-class="animate__animated animate__fadeIn">
-            <div v-show="showPanel" v-if="bpmnModeler" class="panel-content">
-              <PropertyPanel :modeler="bpmnModeler" />
-            </div>
-          </transition>
-        </div>
-      </el-container>
-    </div>
-  </div>
-  <div>
-    <el-dialog v-model="perviewXMLShow" title="XML预览" width="80%" append-to-body>
-      <highlightjs :code="xmlStr" language="XML" />
-    </el-dialog>
-  </div>
-  <div>
-    <el-dialog v-model="perviewSVGShow" title="SVG预览" width="80%" append-to-body>
-      <div style="text-align: center" v-html="svgData" />
-    </el-dialog>
-  </div>
-</template>
-
-<script lang="ts" setup name="BpmnDesign">
-import 'bpmn-js/dist/assets/diagram-js.css';
-import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
-import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
-import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
-import './assets/style/index.scss';
-import type { Canvas, Modeler } from 'bpmn';
-import PropertyPanel from './panel/index.vue';
-import BpmnModeler from 'bpmn-js/lib/Modeler.js';
-import defaultXML from './assets/defaultXML';
-import flowableModdle from './assets/moddle/flowable';
-import Modules from './assets/module/index';
-import useModelerStore from '@/store/modules/modeler';
-import useDialog from '@/hooks/useDialog';
-
-const emit = defineEmits(['closeCallBack', 'saveCallBack']);
-
-const { visible, title, openDialog, closeDialog } = useDialog({
-  title: '编辑流程'
-});
-const modelerStore = useModelerStore();
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const panelFlag = ref(false);
-const showPanel = ref(true);
-const canvas = ref<HTMLDivElement>();
-const panel = ref<HTMLDivElement>();
-const bpmnModeler = ref<Modeler>();
-const zoom = ref(1);
-const perviewXMLShow = ref(false);
-const perviewSVGShow = ref(false);
-const xmlStr = ref('');
-const svgData = ref('');
-const loading = ref(false);
-
-const panelBarClick = () => {
-  // 延迟执行，否则会导致面板收起时，属性面板不显示
-  panelFlag.value = !panelFlag.value;
-  setTimeout(() => {
-    showPanel.value = !panelFlag.value;
-  }, 100);
-};
-
-/**
- * 初始化Canvas
- */
-const initCanvas = () => {
-  bpmnModeler.value = new BpmnModeler({
-    container: canvas.value,
-    // 键盘
-    keyboard: {
-      bindTo: window // 或者window，注意与外部表单的键盘监听事件是否冲突
-    },
-    propertiesPanel: {
-      parent: panel.value
-    },
-    additionalModules: Modules,
-    moddleExtensions: {
-      flowable: flowableModdle
-    }
-  });
-};
-
-/**
- * 初始化Model
- */
-const initModel = () => {
-  if (modelerStore.getModeler()) {
-    modelerStore.getModeler().destroy();
-    modelerStore.setModeler(undefined);
-  }
-  modelerStore.setModeler(bpmnModeler.value);
-};
-
-/**
- * 新建
- */
-const newDiagram = async () => {
-  await proxy?.$modal.confirm('是否确认新建');
-  initDiagram();
-};
-
-/**
- * 初始化
- */
-const initDiagram = (xml?: string) => {
-  if (!xml) xml = defaultXML;
-  bpmnModeler.value.importXML(xml);
-};
-
-/**
- * 自适应屏幕
- */
-const fitViewport = () => {
-  zoom.value = bpmnModeler.value.get<Canvas>('canvas').zoom('fit-viewport');
-  const bbox = document.querySelector<SVGGElement>('.app-containers-bpmn .viewport').getBBox();
-  const currentViewBox = bpmnModeler.value.get<Canvas>('canvas').viewbox();
-  const elementMid = {
-    x: bbox.x + bbox.width / 2 - 65,
-    y: bbox.y + bbox.height / 2
-  };
-  bpmnModeler.value.get<Canvas>('canvas').viewbox({
-    x: elementMid.x - currentViewBox.width / 2,
-    y: elementMid.y - currentViewBox.height / 2,
-    width: currentViewBox.width,
-    height: currentViewBox.height
-  });
-  zoom.value = (bbox.width / currentViewBox.width) * 1.8;
-};
-/**
- * 放大或者缩小
- * @param zoomIn true 放大 | false 缩小
- */
-const zoomViewport = (zoomIn = true) => {
-  zoom.value = bpmnModeler.value.get<Canvas>('canvas').zoom();
-  zoom.value += zoomIn ? 0.1 : -0.1;
-  bpmnModeler.value.get<Canvas>('canvas').zoom(zoom.value);
-};
-
-/**
- * 下载XML
- */
-const downloadXML = async () => {
-  try {
-    const { xml } = await bpmnModeler.value.saveXML({ format: true });
-    downloadFile(`${getProcessElement().name}.bpmn20.xml`, xml, 'application/xml');
-  } catch (e) {
-    proxy?.$modal.msgError(e);
-  }
-};
-
-/**
- * 下载SVG
- */
-const downloadSVG = async () => {
-  try {
-    const { svg } = await bpmnModeler.value.saveSVG();
-    downloadFile(getProcessElement().name, svg, 'image/svg+xml');
-  } catch (e) {
-    proxy?.$modal.msgError(e);
-  }
-};
-
-/**
- * XML预览
- */
-const previewXML = async () => {
-  try {
-    const { xml } = await bpmnModeler.value.saveXML({ format: true });
-    xmlStr.value = xml;
-    perviewXMLShow.value = true;
-  } catch (e) {
-    proxy?.$modal.msgError(e);
-  }
-};
-
-/**
- * SVG预览
- */
-const previewSVG = async () => {
-  try {
-    const { svg } = await bpmnModeler.value.saveSVG();
-    svgData.value = svg;
-    perviewSVGShow.value = true;
-  } catch (e) {
-    proxy?.$modal.msgError(e);
-  }
-};
-
-const curNodeInfo = reactive({
-  curType: '', // 任务类型 用户任务
-  curNode: '',
-  expValue: '' //多用户和部门角色实现
-});
-
-const downloadFile = (fileName: string, data: any, type: string) => {
-  const a = document.createElement('a');
-  const url = window.URL.createObjectURL(new Blob([data], { type: type }));
-  a.href = url;
-  a.download = fileName;
-  a.click();
-  window.URL.revokeObjectURL(url);
-};
-
-const getProcessElement = () => {
-  const rootElements = bpmnModeler.value?.getDefinitions().rootElements;
-  for (let i = 0; i < rootElements.length; i++) {
-    if (rootElements[i].$type === 'bpmn:Process') return rootElements[i];
-  }
-};
-
-const getProcess = () => {
-  const element = getProcessElement();
-  return {
-    id: element.id,
-    name: element.name
-  };
-};
-
-const saveXml = async () => {
-  const { xml } = await bpmnModeler.value.saveXML({ format: true });
-  const { svg } = await bpmnModeler.value.saveSVG();
-  const process = getProcess();
-  let data = {
-    xml: xml,
-    svg: svg,
-    key: process.id,
-    name: process.name,
-    loading: loading
-  };
-  emit('saveCallBack', data);
-};
-
-const open = (xml?: string) => {
-  openDialog();
-  nextTick(() => {
-    initDiagram(xml);
-  });
-};
-const close = () => {
-  closeDialog();
-};
-
-onMounted(() => {
-  nextTick(() => {
-    initCanvas();
-    initModel();
-  });
-});
-
-/**
- * 对外暴露子组件方法
- */
-defineExpose({
-  initDiagram,
-  saveXml,
-  open,
-  close
-});
-</script>
-
-<style lang="scss">
-/** 夜间模式 线条的颜色 */
-$stroke-color-dark: white;
-$bpmn-font-size: 12px;
-/** 日间模式 字体颜色 */
-$bpmn-font-color-dark: white;
-/** 夜间模式 字体颜色 */
-$bpmn-font-color-light: #222;
-
-/* 背景网格 */
-@mixin djs-container {
-  background-image: linear-gradient(90deg, hsl(0deg 0% 78.4% / 15%) 10%, transparent 0), linear-gradient(hsl(0deg 0% 78.4% / 15%) 10%, transparent 0) !important;
-  background-size: 10px 10px !important;
-}
-
-html[class='light'] {
-  /** 从左侧拖动时的背景图 */
-  svg.new-parent {
-    @include djs-container;
-  }
-
-  /** 双击编辑元素时样式保持一致 */
-  div.djs-direct-editing-parent {
-    border-radius: 10px;
-    background-color: transparent !important;
-    color: $bpmn-font-color-light;
-  }
-
-  g.djs-visual {
-    .djs-label {
-      fill: $bpmn-font-color-light !important;
-      font-size: $bpmn-font-size !important;
-    }
-  }
-}
-
-html[class='dark'] {
-  /** dark模式下 连接线的箭头样式 */
-  .arrow-dark {
-    stroke-width: 1px;
-    stroke-linecap: round;
-    stroke: $stroke-color-dark;
-    fill: $stroke-color-dark;
-    stroke-linejoin: round;
-  }
-
-  /** 从左侧拖动时的背景图 */
-  svg.new-parent {
-    background-color: black !important;
-    @include djs-container;
-  }
-
-  /** 双击编辑元素时样式保持一致 */
-  div.djs-direct-editing-parent {
-    border-radius: 10px;
-    background-color: transparent !important;
-    color: $bpmn-font-color-dark;
-  }
-
-  /** 元素相关设置 */
-  g.djs-visual {
-    /** 元素边框 需要去除文字(.djs-label) */
-    & > *:first-child:not(.djs-label) {
-      stroke: $stroke-color-dark !important;
-    }
-
-    /** 字体颜色 */
-    .djs-label {
-      fill: $bpmn-font-color-dark !important;
-      font-size: $bpmn-font-size !important;
-    }
-
-    /* 连接线样式 */
-    path[data-corner-radius] {
-      stroke: $stroke-color-dark !important;
-      marker-end: url('#markerArrow-dark-mode') !important;
-    }
-  }
-}
-
-.containers-bpmn {
-  height: 100%;
-  .app-containers-bpmn {
-    width: 100%;
-    height: 100%;
-    .canvas {
-      width: 100%;
-      height: 100%;
-      @include djs-container;
-    }
-    .el-header {
-      height: 35px;
-      padding: 0;
-    }
-
-    .process-panel {
-      transition: width 0.25s ease-in;
-      .process-panel-bar {
-        width: 34px;
-        height: 40px;
-        .open-bar {
-          width: 34px;
-          line-height: 40px;
-        }
-      }
-      // 收起面板样式
-      &.hide {
-        width: 34px;
-        overflow: hidden;
-        padding: 0;
-        .process-panel-bar {
-          width: 34px;
-          height: 100%;
-          box-sizing: border-box;
-          display: block;
-          text-align: left;
-          line-height: 34px;
-        }
-        .process-panel-bar:hover {
-          background-color: var(--bpmn-panel-bar-background-color);
-        }
-      }
-    }
-  }
-}
-pre {
-  margin: 0;
-  height: 100%;
-  max-height: calc(80vh - 32px);
-  overflow-x: hidden;
-  overflow-y: auto;
-  .hljs {
-    word-break: break-word;
-    white-space: pre-wrap;
-    padding: 0.5em;
-  }
-}
-
-.open-bar {
-  font-size: 20px;
-  cursor: pointer;
-  text-align: center;
-}
-.process-panel {
-  box-sizing: border-box;
-  padding: 0 8px 0 8px;
-  border-left: 1px solid var(--bpmn-panel-border);
-  box-shadow: var(--bpmn-panel-box-shadow) 0 0 8px;
-  max-height: 100%;
-  width: 25%;
-  height: calc(100vh - 100px);
-  .el-collapse {
-    height: calc(100vh - 182px);
-    overflow: auto;
-  }
-}
-
-// 任务栏 透明度
-//:deep(.djs-palette) {
-//  opacity: 0.3;
-//  transition: all 1s;
-//}
-//
-//:deep(.djs-palette:hover) {
-//  opacity: 1;
-//  transition: all 1s;
-//}
-</style>

src/bpmn/panel/GatewayPanel.vue

@@ -1,68 +0,0 @@
-<template>
-  <div>
-    <el-collapse v-model="currentCollapseItem">
-      <el-collapse-item name="1">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <InfoFilled />
-            </el-icon>
-            常规
-          </div>
-        </template>
-        <div>
-          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
-            <el-form-item prop="id" label="节点 ID">
-              <el-input v-model="formData.id" @change="idChange"> </el-input>
-            </el-form-item>
-            <el-form-item prop="name" label="节点名称">
-              <el-input v-model="formData.name" @change="nameChange"> </el-input>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-collapse-item>
-
-      <el-collapse-item name="2">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <BellFilled />
-            </el-icon>
-            执行监听器
-          </div>
-        </template>
-        <div>
-          <ExecutionListener :element="element"></ExecutionListener>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-<script setup lang="ts">
-import useParseElement from '../hooks/useParseElement';
-import usePanel from '../hooks/usePanel';
-import type { Modeler, ModdleElement } from 'bpmn';
-import type { GatewayPanel } from 'bpmnDesign';
-import ExecutionListener from './property/ExecutionListener.vue';
-
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-const { nameChange, idChange } = usePanel({
-  element: toRaw(props.element)
-});
-const { parseData } = useParseElement({
-  element: toRaw(props.element)
-});
-const currentCollapseItem = ref(['1', '2']);
-const formData = ref(parseData<GatewayPanel>());
-
-const formRules = ref<ElFormRules>({
-  processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
-  id: [{ required: true, message: '请输入', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-</script>
-
-<style lang="scss" scoped></style>

src/bpmn/panel/ParticipantPanel.vue

@@ -1,68 +0,0 @@
-<template>
-  <div>
-    <el-collapse v-model="currentCollapseItem">
-      <el-collapse-item name="1">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <InfoFilled />
-            </el-icon>
-            常规
-          </div>
-        </template>
-        <div>
-          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
-            <el-form-item prop="id" label="节点 ID">
-              <el-input v-model="formData.id" @change="idChange"></el-input>
-            </el-form-item>
-            <el-form-item prop="name" label="节点名称">
-              <el-input v-model="formData.name" @change="nameChange"></el-input>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-collapse-item>
-
-      <el-collapse-item name="2">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <BellFilled />
-            </el-icon>
-            执行监听器
-          </div>
-        </template>
-        <div>
-          <ExecutionListener :element="element"></ExecutionListener>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-<script setup lang="ts">
-import useParseElement from '../hooks/useParseElement';
-import usePanel from '../hooks/usePanel';
-import ExecutionListener from './property/ExecutionListener.vue';
-import type { ModdleElement } from 'bpmn';
-import type { ParticipantPanel } from 'bpmnDesign';
-
-interface PropType {
-  element: ModdleElement;
-}
-
-const props = withDefaults(defineProps<PropType>(), {});
-const { nameChange, idChange } = usePanel({
-  element: toRaw(props.element)
-});
-const { parseData } = useParseElement({
-  element: toRaw(props.element)
-});
-
-const formData = ref(parseData<ParticipantPanel>());
-const currentCollapseItem = ref(['1', '2']);
-const formRules = ref<ElFormRules>({
-  id: [{ required: true, message: '请输入', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-</script>
-
-<style lang="scss" scoped></style>

src/bpmn/panel/ProcessPanel.vue

@@ -1,71 +0,0 @@
-<template>
-  <div>
-    <el-collapse v-model="currentCollapseItem">
-      <el-collapse-item name="1">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <InfoFilled />
-            </el-icon>
-            常规
-          </div>
-        </template>
-        <div>
-          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
-            <el-form-item label="流程标识" prop="id">
-              <el-input v-model="formData.id" @change="idChange"></el-input>
-            </el-form-item>
-            <el-form-item label="流程名称" prop="name">
-              <el-input v-model="formData.name" @change="nameChange"></el-input>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-collapse-item>
-
-      <el-collapse-item name="2">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <BellFilled />
-            </el-icon>
-            执行监听器
-          </div>
-        </template>
-        <div>
-          <ExecutionListener :element="element"></ExecutionListener>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-
-<script setup lang="ts">
-import ExecutionListener from './property/ExecutionListener.vue';
-import useParseElement from '../hooks/useParseElement';
-import usePanel from '../hooks/usePanel';
-import type { Modeler, ModdleElement } from 'bpmn';
-import type { ProcessPanel } from 'bpmnDesign';
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-
-const { parseData } = useParseElement({
-  element: toRaw(props.element)
-});
-const { idChange, nameChange } = usePanel({
-  element: toRaw(props.element)
-});
-const currentCollapseItem = ref(['1', '2']);
-const formData = ref<ProcessPanel>(parseData<ProcessPanel>());
-
-const formRules = ref<ElFormRules>({
-  id: [{ required: true, message: '请输入', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-</script>
-
-<style scoped lang="scss"></style>

src/bpmn/panel/SequenceFlowPanel.vue

@@ -1,95 +0,0 @@
-<template>
-  <div>
-    <el-collapse v-model="currentCollapseItem">
-      <el-collapse-item name="1">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <InfoFilled />
-            </el-icon>
-            常规
-          </div>
-        </template>
-        <div>
-          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
-            <el-form-item prop="id" label="节点 ID">
-              <el-input v-model="formData.id" @change="idChange"> </el-input>
-            </el-form-item>
-            <el-form-item prop="name" label="节点名称">
-              <el-input v-model="formData.name" @change="nameChange"> </el-input>
-            </el-form-item>
-            <el-form-item prop="conditionExpression" label="跳转条件">
-              <el-input v-model="formData.conditionExpressionValue" @change="conditionExpressionChange"> </el-input>
-            </el-form-item>
-            <el-form-item prop="skipExpression" label="跳过表达式">
-              <el-input v-model="formData.skipExpression" @change="skipExpressionChange"> </el-input>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-collapse-item>
-
-      <el-collapse-item name="2">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <BellFilled />
-            </el-icon>
-            执行监听器
-          </div>
-        </template>
-        <div>
-          <ExecutionListener :element="element"></ExecutionListener>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-<script setup lang="ts">
-import useParseElement from '../hooks/useParseElement';
-import useModelerStore from '@/store/modules/modeler';
-import usePanel from '../hooks/usePanel';
-import ExecutionListener from './property/ExecutionListener.vue';
-import type { Modeler, ModdleElement } from 'bpmn';
-import type { SequenceFlowPanel } from 'bpmnDesign';
-
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-const { nameChange, idChange, updateProperties } = usePanel({
-  element: toRaw(props.element)
-});
-const { parseData } = useParseElement({
-  element: toRaw(props.element)
-});
-const moddle = useModelerStore().getModdle();
-const currentCollapseItem = ref(['1', '2']);
-const formData = ref(parseData<SequenceFlowPanel>());
-
-const formRules = ref<ElFormRules>({
-  processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
-  id: [{ required: true, message: '请输入', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-
-const conditionExpressionChange = (val: string) => {
-  if (val) {
-    const newCondition = moddle.create('bpmn:FormalExpression', { body: val });
-    updateProperties({ conditionExpression: newCondition });
-  } else {
-    updateProperties({ conditionExpression: null });
-  }
-};
-
-const skipExpressionChange = (val: string) => {
-  updateProperties({ 'flowable:skipExpression': val });
-};
-
-onBeforeMount(() => {
-  if (formData.value.conditionExpression) {
-    formData.value.conditionExpressionValue = formData.value.conditionExpression.body;
-  }
-});
-</script>
-
-<style lang="scss" scoped></style>

src/bpmn/panel/StartEndPanel.vue

@@ -1,67 +0,0 @@
-<template>
-  <div>
-    <el-collapse v-model="currentCollapseItem">
-      <el-collapse-item name="1">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <InfoFilled />
-            </el-icon>
-            常规
-          </div>
-        </template>
-        <div>
-          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
-            <el-form-item prop="id" label="节点 ID">
-              <el-input v-model="formData.id" @change="idChange"> </el-input>
-            </el-form-item>
-            <el-form-item prop="name" label="节点名称">
-              <el-input v-model="formData.name" @change="nameChange"> </el-input>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-collapse-item>
-
-      <el-collapse-item name="2">
-        <template #title>
-          <div class="collapse__title">
-            <el-icon>
-              <BellFilled />
-            </el-icon>
-            执行监听器
-          </div>
-        </template>
-        <div>
-          <ExecutionListener :element="element"></ExecutionListener>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-<script setup lang="ts">
-import ExecutionListener from './property/ExecutionListener.vue';
-import useParseElement from '../hooks/useParseElement';
-import usePanel from '../hooks/usePanel';
-import type { Modeler, ModdleElement } from 'bpmn';
-import type { StartEndPanel } from 'bpmnDesign';
-
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-const { nameChange, idChange } = usePanel({
-  element: toRaw(props.element)
-});
-const { parseData } = useParseElement({
-  element: toRaw(props.element)
-});
-
-const formData = ref(parseData<StartEndPanel>());
-const currentCollapseItem = ref(['1', '2']);
-const formRules = ref<ElFormRules>({
-  id: [{ required: true, message: '请输入', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-</script>
-
-<style lang="scss" scoped></style>

src/bpmn/panel/SubProcessPanel.vue

@@ -1,193 +0,0 @@
-<template>
-  <div>
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
-      <el-collapse v-model="currentCollapseItem">
-        <el-collapse-item name="1">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <InfoFilled />
-              </el-icon>
-              常规
-            </div>
-          </template>
-          <div>
-            <el-form-item prop="id" label="节点 ID">
-              <el-input v-model="formData.id" @change="idChange"> </el-input>
-            </el-form-item>
-            <el-form-item prop="name" label="节点名称">
-              <el-input v-model="formData.name" @change="nameChange"> </el-input>
-            </el-form-item>
-          </div>
-        </el-collapse-item>
-
-        <el-collapse-item name="2">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <BellFilled />
-              </el-icon>
-              执行监听器
-            </div>
-          </template>
-          <div>
-            <ExecutionListener :element="element"></ExecutionListener>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item name="3">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <HelpFilled />
-              </el-icon>
-              多实例
-            </div>
-          </template>
-          <div>
-            <el-form-item label="多实例类型">
-              <el-select v-model="formData.multiInstanceType" @change="multiInstanceTypeChange">
-                <el-option v-for="item in constant.MultiInstanceType" :key="item.id" :value="item.value" :label="item.label"> </el-option>
-              </el-select>
-            </el-form-item>
-
-            <div v-if="formData.multiInstanceType !== MultiInstanceTypeEnum.NONE">
-              <el-form-item label="集合">
-                <template #label>
-                  <span>
-                    集合
-                    <el-tooltip placement="top">
-                      <el-icon><QuestionFilled /></el-icon>
-                      <template #content>
-                        属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />
-                        不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />
-                        这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。
-                      </template>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <el-input v-model="formData.collection" @change="collectionChange"></el-input>
-              </el-form-item>
-              <el-form-item label="元素变量">
-                <template #label>
-                  <span>
-                    元素变量
-                    <el-tooltip placement="top">
-                      <el-icon><QuestionFilled /></el-icon>
-                      <template #content>
-                        每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />
-                        创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />
-                        一般来说，该字符串应与指定人员变量相同。
-                      </template>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <el-input v-model="formData.elementVariable" @change="elementVariableChange"> </el-input>
-              </el-form-item>
-              <el-form-item label="完成条件">
-                <template #label>
-                  <span>
-                    完成条件
-                    <el-tooltip placement="top">
-                      <el-icon><QuestionFilled /></el-icon>
-                      <template #content>
-                        多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />
-                        结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />
-                        活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />
-                        表示当任务完成60%时，该节点就算完成
-                      </template>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <el-input v-model="formData.completionCondition" @change="completionConditionChange"> </el-input>
-              </el-form-item>
-            </div>
-          </div>
-        </el-collapse-item>
-      </el-collapse>
-    </el-form>
-  </div>
-</template>
-<script setup lang="ts">
-import ExecutionListener from './property/ExecutionListener.vue';
-import useParseElement from '../hooks/useParseElement';
-import usePanel from '../hooks/usePanel';
-import type { ModdleElement } from 'bpmn';
-import type { SubProcessPanel } from 'bpmnDesign';
-import { MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums';
-
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-const { nameChange, idChange, updateProperties, createModdleElement, constant } = usePanel({
-  element: toRaw(props.element)
-});
-const { parseData } = useParseElement({
-  element: toRaw(props.element)
-});
-
-const formData = ref(parseData<SubProcessPanel>());
-const currentCollapseItem = ref(['1', '2', '3']);
-
-const multiInstanceTypeChange = (newVal) => {
-  if (newVal !== MultiInstanceTypeEnum.NONE) {
-    let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
-    if (!loopCharacteristics) {
-      loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-    }
-    loopCharacteristics.isSequential = newVal === MultiInstanceTypeEnum.SERIAL;
-    updateProperties({ loopCharacteristics: loopCharacteristics });
-  } else {
-    updateProperties({ loopCharacteristics: undefined });
-  }
-};
-const collectionChange = (newVal) => {
-  let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
-  if (!loopCharacteristics) {
-    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-  }
-  loopCharacteristics.collection = newVal && newVal.length > 0 ? newVal : undefined;
-  updateProperties({ loopCharacteristics: loopCharacteristics });
-};
-const elementVariableChange = (newVal) => {
-  let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
-  if (!loopCharacteristics) {
-    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-  }
-  loopCharacteristics.elementVariable = newVal && newVal.length > 0 ? newVal : undefined;
-  updateProperties({ loopCharacteristics: loopCharacteristics });
-};
-const completionConditionChange = (newVal) => {
-  let loopCharacteristics = props.element.businessObject.get<ModdleElement>('loopCharacteristics');
-  if (!loopCharacteristics) {
-    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-  }
-  if (newVal && newVal.length > 0) {
-    if (!loopCharacteristics.completionCondition) {
-      loopCharacteristics.completionCondition = createModdleElement('bpmn:Expression', { body: newVal }, loopCharacteristics);
-    } else {
-      loopCharacteristics.completionCondition.body = newVal;
-    }
-  } else {
-    loopCharacteristics.completionCondition = undefined;
-  }
-  updateProperties({ loopCharacteristics: loopCharacteristics });
-};
-
-onBeforeMount(() => {
-  if (formData.value.loopCharacteristics) {
-    const loopCharacteristics = formData.value.loopCharacteristics;
-    formData.value.collection = loopCharacteristics.collection || '';
-    formData.value.elementVariable = loopCharacteristics.elementVariable || '';
-    formData.value.completionCondition = loopCharacteristics.completionCondition?.body || '';
-    formData.value.multiInstanceType = loopCharacteristics.isSequential ? MultiInstanceTypeEnum.SERIAL : MultiInstanceTypeEnum.PARALLEL;
-  }
-});
-
-const formRules = ref<ElFormRules>({
-  id: [{ required: true, message: '请输入', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-</script>
-
-<style lang="scss" scoped></style>

src/bpmn/panel/TaskPanel.vue

@@ -1,491 +0,0 @@
-<template>
-  <div>
-    <el-form ref="formRef" size="default" :model="formData" :rules="formRules" label-width="100px">
-      <el-collapse v-model="currentCollapseItem">
-        <el-collapse-item name="1">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <InfoFilled />
-              </el-icon>
-              常规
-            </div>
-          </template>
-          <div>
-            <el-form-item prop="id" label="节点 ID">
-              <el-input v-model="formData.id" @change="idChange"> </el-input>
-            </el-form-item>
-            <el-form-item prop="name" label="节点名称">
-              <el-input v-model="formData.name" @change="nameChange"> </el-input>
-            </el-form-item>
-            <el-form-item v-if="showConfig.skipExpression" prop="skipExpression" label="跳过表达式">
-              <el-input v-model="formData.skipExpression" @change="skipExpressionChange"> </el-input>
-            </el-form-item>
-            <el-form-item v-loading="formManageListLoading" prop="formKey" label="表单地址">
-              <el-select v-model="formData.formKey" clearable filterable placeholder="请选择表单" style="width: 260px" @change="formKeyChange">
-                <el-option
-                  v-for="item in formManageList"
-                  :key="item.id"
-                  :label="item.formTypeName + ':' + item.formName"
-                  :value="item.formType + ':' + item.id"
-                />
-              </el-select>
-            </el-form-item>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item name="2">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <Checked />
-              </el-icon>
-              任务
-            </div>
-          </template>
-          <div>
-            <el-form-item v-if="showConfig.async" prop="sync" label="是否异步">
-              <el-switch v-model="formData.async" inline-prompt active-text="是" inactive-text="否" @change="syncChange" />
-            </el-form-item>
-
-            <el-tabs tab-position="left" class="demo-tabs">
-              <el-tab-pane label="身份存储">
-                <el-form-item label="分配人员">
-                  <el-input v-model="formData.assignee" @blur="blurAssignee(formData.assignee)">
-                    <template #append>
-                      <el-button icon="Search" type="primary" @click="openSingleUserSelect" />
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="候选人员">
-                  <el-badge :value="selectUserLength" :max="99">
-                    <el-button size="small" type="primary" @click="openUserSelect">选择人员</el-button>
-                  </el-badge>
-                </el-form-item>
-                <el-form-item label="候选组">
-                  <el-badge :value="selectRoleLength" :max="99">
-                    <el-button size="small" type="primary" @click="openRoleSelect">选择组</el-button>
-                  </el-badge>
-                </el-form-item>
-              </el-tab-pane>
-
-              <!-- <el-tab-pane label="固定值">
-                <el-form-item prop="auditUserType" label="分配类型">
-                  <el-select v-model="formData.allocationType">
-                    <el-option v-for="item in AllocationTypeSelect" :key="item.id" :value="item.value" :label="item.label"> </el-option>
-                  </el-select>
-                </el-form-item>
-                <el-form-item v-if="formData.allocationType === AllocationTypeEnum.USER" label="分配人员">
-                  <el-input v-model="formData.assignee">
-                    <template #append>
-                      <el-button icon="Search" type="primary" @click="openSingleUserSelect" />
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <div v-if="formData.allocationType === AllocationTypeEnum.CANDIDATE">
-                  <el-form-item label="候选人员">
-                    <el-badge :value="selectUserLength" :max="99">
-                      <el-button size="small" type="primary" @click="openUserSelect">选择人员</el-button>
-                    </el-badge>
-                  </el-form-item>
-                  <el-form-item label="候选组">
-                    <el-badge :value="selectRoleLength" :max="99">
-                      <el-button size="small" type="primary" @click="openRoleSelect">选择组</el-button>
-                    </el-badge>
-                  </el-form-item>
-                </div>
-                <el-form-item v-if="formData.allocationType === AllocationTypeEnum.SPECIFY && showConfig.specifyDesc" style="">
-                  <el-radio-group v-model="formData.specifyDesc" class="ml-4">
-                    <el-radio v-for="item in SpecifyDesc" :key="item.id" :value="item.value" size="large">{{ item.label }}</el-radio>
-                  </el-radio-group>
-                </el-form-item>
-              </el-tab-pane> -->
-            </el-tabs>
-
-            <el-form-item v-if="showConfig.dueDate" prop="dueDate" label="到期时间">
-              <el-input v-model="formData.dueDate" clearable @change="dueDateChange" @click="openDueDate">
-                <template #append>
-                  <el-button icon="Search" type="primary" @click="openDueDate" />
-                </template>
-              </el-input>
-            </el-form-item>
-            <el-form-item v-if="showConfig.priority" prop="priority" label="优先级">
-              <el-input-number v-model="formData.priority" :min="0" @change="priorityChange"> </el-input-number>
-            </el-form-item>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item name="3">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <HelpFilled />
-              </el-icon>
-              多实例
-            </div>
-          </template>
-          <div>
-            <el-form-item label="多实例类型">
-              <el-select v-model="formData.multiInstanceType" @change="multiInstanceTypeChange">
-                <el-option v-for="item in constant.MultiInstanceType" :key="item.id" :value="item.value" :label="item.label"> </el-option>
-              </el-select>
-            </el-form-item>
-
-            <div v-if="formData.multiInstanceType !== MultiInstanceTypeEnum.NONE">
-              <el-form-item label="集合">
-                <template #label>
-                  <span>
-                    集合
-                    <el-tooltip placement="top">
-                      <el-icon><QuestionFilled /></el-icon>
-                      <template #content>
-                        属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />
-                        不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />
-                        这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。
-                      </template>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <el-input v-model="formData.collection" @change="collectionChange"></el-input>
-              </el-form-item>
-              <el-form-item label="元素变量">
-                <template #label>
-                  <span>
-                    元素变量
-                    <el-tooltip placement="top">
-                      <el-icon><QuestionFilled /></el-icon>
-                      <template #content>
-                        每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />
-                        创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />
-                        一般来说，该字符串应与指定人员变量相同。
-                      </template>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <el-input v-model="formData.elementVariable" @change="elementVariableChange"> </el-input>
-              </el-form-item>
-              <el-form-item label="完成条件">
-                <template #label>
-                  <span>
-                    完成条件
-                    <el-tooltip placement="top">
-                      <el-icon><QuestionFilled /></el-icon>
-                      <template #content>
-                        多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />
-                        结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />
-                        活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />
-                        表示当任务完成60%时，该节点就算完成
-                      </template>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <el-input v-model="formData.completionCondition" @change="completionConditionChange"> </el-input>
-              </el-form-item>
-            </div>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item v-if="showConfig.taskListener" name="4">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <BellFilled />
-              </el-icon>
-              任务监听器
-            </div>
-          </template>
-          <div>
-            <TaskListener v-if="showConfig.taskListener" :element="element"></TaskListener>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item v-if="showConfig.executionListener" name="5">
-          <template #title>
-            <div class="collapse__title">
-              <el-icon>
-                <BellFilled />
-              </el-icon>
-              执行监听器
-            </div>
-          </template>
-          <div>
-            <ExecutionListener v-if="showConfig.executionListener" :element="element"></ExecutionListener>
-          </div>
-        </el-collapse-item>
-
-        <el-form-item v-if="showConfig.isForCompensation" prop="isForCompensation" label="是否为补偿">
-          <el-switch v-model="formData.isForCompensation" inline-prompt active-text="是" inactive-text="否" />
-        </el-form-item>
-        <el-form-item v-if="showConfig.triggerServiceTask" prop="triggerServiceTask" label="服务任务可触发">
-          <el-switch v-model="formData.triggerServiceTask" inline-prompt active-text="是" inactive-text="否" />
-        </el-form-item>
-        <el-form-item v-if="showConfig.autoStoreVariables" prop="autoStoreVariables" label="自动存储变量">
-          <el-switch v-model="formData.autoStoreVariables" inline-prompt active-text="是" inactive-text="否" />
-        </el-form-item>
-        <el-form-item v-if="showConfig.ruleVariablesInput" prop="skipExpression" label="输入变量">
-          <el-input v-model="formData.ruleVariablesInput"> </el-input>
-        </el-form-item>
-        <el-form-item v-if="showConfig.exclude" prop="exclude" label="排除">
-          <el-switch v-model="formData.exclude" inline-prompt active-text="是" inactive-text="否" />
-        </el-form-item>
-        <el-form-item v-if="showConfig.class" prop="class" label="类">
-          <el-input v-model="formData.class"> </el-input>
-        </el-form-item>
-      </el-collapse>
-    </el-form>
-    <UserSelect ref="userSelectRef" :data="formData.candidateUsers" @confirm-call-back="userSelectCallBack"></UserSelect>
-    <UserSelect ref="singleUserSelectRef" :data="formData.assignee" :multiple="false" @confirm-call-back="singleUserSelectCallBack"></UserSelect>
-    <RoleSelect ref="roleSelectRef" :data="formData.candidateGroups" @confirm-call-back="roleSelectCallBack"></RoleSelect>
-    <DueDate ref="dueDateRef" v-model="formData.dueDate" :data="formData.dueDate" @confirm-call-back="dueDateCallBack"></DueDate>
-  </div>
-</template>
-<script setup lang="ts">
-import useParseElement from '../hooks/useParseElement';
-import usePanel from '../hooks/usePanel';
-import UserSelect from '@/components/UserSelect';
-import RoleSelect from '@/components/RoleSelect';
-import ExecutionListener from './property/ExecutionListener.vue';
-import TaskListener from './property/TaskListener.vue';
-import DueDate from './property/DueDate.vue';
-import type { ModdleElement } from 'bpmn';
-import type { TaskPanel } from 'bpmnDesign';
-import { AllocationTypeEnum, MultiInstanceTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
-import { UserVO } from '@/api/system/user/types';
-import { RoleVO } from '@/api/system/role/types';
-import { selectListFormManage } from '@/api/workflow/formManage';
-import { FormManageVO } from '@/api/workflow/formManage/types';
-const formManageList = ref<FormManageVO[]>([]);
-const formManageListLoading = ref(false);
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-const { showConfig, nameChange, formKeyChange, idChange, updateProperties, getExtensionElements, createModdleElement, constant } = usePanel({
-  element: toRaw(props.element)
-});
-const { parseData } = useParseElement({
-  element: toRaw(props.element)
-});
-
-const initFormData = {
-  id: '',
-  name: '',
-  dueDate: '',
-  multiInstanceType: MultiInstanceTypeEnum.NONE,
-  allocationType: AllocationTypeEnum.USER,
-  specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE
-};
-const formData = ref({ ...initFormData, ...parseData<TaskPanel>() });
-const assignee = ref<Partial<UserVO>>({
-  userName: ''
-});
-const currentCollapseItem = ref(['1', '2']);
-const userSelectRef = ref<InstanceType<typeof UserSelect>>();
-const singleUserSelectRef = ref<InstanceType<typeof UserSelect>>();
-const roleSelectRef = ref<InstanceType<typeof RoleSelect>>();
-const dueDateRef = ref<InstanceType<typeof DueDate>>();
-
-const openUserSelect = () => {
-  userSelectRef.value.open();
-};
-const openSingleUserSelect = () => {
-  if (formData.value.assignee?.includes('$')) {
-    formData.value.assignee = '';
-  }
-  singleUserSelectRef.value.open();
-};
-const openRoleSelect = () => {
-  roleSelectRef.value.open();
-};
-const openDueDate = (e) => {
-  dueDateRef.value.openDialog();
-};
-const blurAssignee = (assignee) => {
-  updateProperties({ 'flowable:assignee': assignee ? assignee : undefined });
-};
-const singleUserSelectCallBack = (data: UserVO[]) => {
-  const user: UserVO = data.length !== 0 ? data[0] : undefined;
-  updateProperties({ 'flowable:assignee': user?.userId });
-  assignee.value = user ? user : { userName: '' };
-  formData.value.assignee = String(user?.userId);
-  let extensionElements = getExtensionElements();
-  extensionElements.values = extensionElements.get('values').filter((item) => item.$type !== 'flowable:extAssignee');
-  if (user) {
-    const extAssigneeElement = createModdleElement('flowable:extAssignee', { body: '' }, extensionElements);
-    extensionElements.get('values').push(extAssigneeElement);
-    extAssigneeElement.body = JSON.stringify({ userName: user.userName, userId: user.userId });
-  }
-  if (extensionElements.values.length === 0) {
-    extensionElements = undefined;
-  }
-  updateProperties({ extensionElements: extensionElements });
-};
-const userSelectCallBack = (data: UserVO[]) => {
-  let extensionElements = getExtensionElements();
-  extensionElements.values = extensionElements.values.filter((item) => item.$type !== 'flowable:extCandidateUsers');
-  if (data.length === 0) {
-    formData.value.candidateUsers = undefined;
-    updateProperties({ 'flowable:candidateUsers': undefined });
-  } else {
-    const userIds = data.map((item) => item.userId).join(',');
-    formData.value.candidateUsers = userIds;
-    updateProperties({ 'flowable:candidateUsers': userIds });
-    const extCandidateUsersElement = createModdleElement('flowable:extCandidateUsers', { body: '' }, extensionElements);
-    extensionElements.values.push(extCandidateUsersElement);
-    const users = data.map((item) => {
-      return {
-        userId: item.userId,
-        userName: item.userName
-      };
-    });
-    extCandidateUsersElement.body = JSON.stringify(users);
-  }
-  if (extensionElements.values.length === 0) {
-    extensionElements = undefined;
-  }
-  updateProperties({ extensionElements: extensionElements });
-};
-const roleSelectCallBack = (data: RoleVO[]) => {
-  if (data.length === 0) {
-    formData.value.candidateGroups = '';
-    updateProperties({ 'flowable:candidateGroups': undefined });
-  } else {
-    const roleIds = data.map((item) => item.roleId).join(',');
-    formData.value.candidateGroups = roleIds;
-    updateProperties({ 'flowable:candidateGroups': roleIds });
-  }
-};
-const dueDateCallBack = (data: string) => {
-  updateProperties({ 'flowable:dueDate': data });
-};
-
-const taskTabClick = (e) => {
-  formData.value.candidateGroups = '';
-  formData.value.candidateUsers = '';
-  formData.value.assignee = '';
-  // formData.value.fixedAssignee = '';
-  assignee.value = {};
-};
-
-const syncChange = (newVal) => {
-  updateProperties({ 'flowable:async': newVal });
-};
-const skipExpressionChange = (newVal) => {
-  updateProperties({ 'flowable:skipExpression': newVal && newVal.length > 0 ? newVal : undefined });
-};
-const priorityChange = (newVal) => {
-  updateProperties({ 'flowable:priority': newVal });
-};
-const fixedAssigneeChange = (newVal) => {
-  updateProperties({ 'flowable:assignee': newVal && newVal.length > 0 ? newVal : undefined });
-};
-const multiInstanceTypeChange = (newVal) => {
-  if (newVal !== MultiInstanceTypeEnum.NONE) {
-    let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
-    if (!loopCharacteristics) {
-      loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-    }
-    loopCharacteristics.isSequential = newVal === MultiInstanceTypeEnum.SERIAL;
-    updateProperties({ loopCharacteristics: loopCharacteristics });
-  } else {
-    updateProperties({ loopCharacteristics: undefined });
-  }
-};
-const collectionChange = (newVal) => {
-  let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
-  if (!loopCharacteristics) {
-    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-  }
-  loopCharacteristics.collection = newVal && newVal.length > 0 ? newVal : undefined;
-  updateProperties({ loopCharacteristics: loopCharacteristics });
-};
-const elementVariableChange = (newVal) => {
-  let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
-  if (!loopCharacteristics) {
-    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-  }
-  loopCharacteristics.elementVariable = newVal && newVal.length > 0 ? newVal : undefined;
-  updateProperties({ loopCharacteristics: loopCharacteristics });
-};
-const completionConditionChange = (newVal) => {
-  let loopCharacteristics = props.element.businessObject.get<ModdleElement>('loopCharacteristics');
-  if (!loopCharacteristics) {
-    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
-  }
-  if (newVal && newVal.length > 0) {
-    if (!loopCharacteristics.completionCondition) {
-      loopCharacteristics.completionCondition = createModdleElement('bpmn:Expression', { body: newVal }, loopCharacteristics);
-    } else {
-      loopCharacteristics.completionCondition.body = newVal;
-    }
-  } else {
-    loopCharacteristics.completionCondition = undefined;
-  }
-  updateProperties({ loopCharacteristics: loopCharacteristics });
-};
-const dueDateChange = (newVal) => {
-  updateProperties({ 'flowable:dueDate': newVal && newVal.length > 0 ? newVal : undefined });
-};
-const selectUserLength = computed(() => {
-  if (formData.value.candidateUsers) {
-    return formData.value.candidateUsers.split(',').length;
-  } else {
-    return 0;
-  }
-});
-const selectRoleLength = computed(() => {
-  if (formData.value.candidateGroups) {
-    return formData.value.candidateGroups.split(',').length;
-  } else {
-    return 0;
-  }
-});
-
-onBeforeMount(() => {
-  const extensionElements = getExtensionElements(false);
-  if (extensionElements && extensionElements.get('values')) {
-    let extAssigneeElement = extensionElements.get('values').find((item) => item.$type === 'flowable:extAssignee');
-    if (extAssigneeElement) {
-      assignee.value = JSON.parse(extAssigneeElement.body);
-    }
-  }
-
-  if (formData.value.loopCharacteristics) {
-    const loopCharacteristics = formData.value.loopCharacteristics;
-    formData.value.collection = loopCharacteristics.collection || '';
-    formData.value.elementVariable = loopCharacteristics.elementVariable || '';
-    formData.value.completionCondition = loopCharacteristics.completionCondition?.body || '';
-    formData.value.multiInstanceType = loopCharacteristics.isSequential ? MultiInstanceTypeEnum.SERIAL : MultiInstanceTypeEnum.PARALLEL;
-  }
-
-  if (formData.value.assignee) {
-    formData.value.fixedAssignee = formData.value.assignee;
-  }
-});
-
-const formRules = ref<ElFormRules>({
-  id: [{ required: true, message: '请输入', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-
-const AllocationTypeSelect = [
-  { id: 'b9cdf970-dd91-47c0-819f-42a7010ca2a6', label: '指定人员', value: AllocationTypeEnum.USER },
-  { id: '3f7ccbcd-c464-4602-bb9d-e96649d10585', label: '候选人员', value: AllocationTypeEnum.CANDIDATE },
-  { id: 'c49065e0-7f2d-4c09-aedb-ab2d47d9a454', label: '发起人自己', value: AllocationTypeEnum.YOURSELF },
-  { id: '6ef40a03-7e9a-4898-89b2-c88fe9064542', label: '发起人指定', value: AllocationTypeEnum.SPECIFY }
-];
-const SpecifyDesc = [
-  { id: 'fa253b34-4335-458c-b1bc-b039e2a2b7a6', label: '指定一个人', value: 'specifySingle' },
-  { id: '7365ff54-2e05-4312-9bfb-0b8edd779c5b', label: '指定多个人', value: 'specifyMultiple' }
-];
-
-const listFormManage = async () => {
-  formManageListLoading.value = true;
-  const res = await selectListFormManage();
-  formManageList.value = res.data;
-  formManageListLoading.value = false;
-};
-onMounted(() => {
-  nextTick(() => {
-    listFormManage();
-  });
-});
-</script>
-
-<style lang="scss" scoped></style>

src/bpmn/panel/index.vue

@@ -1,110 +0,0 @@
-<template>
-  <div ref="propertyPanel">
-    <div v-if="nodeName" class="node-name">{{ nodeName }}</div>
-    <component :is="component" v-if="element" :element="element" />
-  </div>
-</template>
-<script setup lang="ts" name="PropertyPanel">
-import { NodeName } from '../assets/lang/zh';
-import TaskPanel from './TaskPanel.vue';
-import ProcessPanel from './ProcessPanel.vue';
-import StartEndPanel from './StartEndPanel.vue';
-import GatewayPanel from './GatewayPanel.vue';
-import SequenceFlowPanel from './SequenceFlowPanel.vue';
-import ParticipantPanel from './ParticipantPanel.vue';
-import SubProcessPanel from './SubProcessPanel.vue';
-import type { Modeler, ModdleElement } from 'bpmn';
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-interface propsType {
-  modeler: Modeler;
-}
-const props = withDefaults(defineProps<propsType>(), {});
-
-const element = ref<ModdleElement>();
-const processElement = ref<ModdleElement>();
-
-const startEndType = ['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'];
-const taskType = [
-  'bpmn:UserTask',
-  'bpmn:Task',
-  'bpmn:SendTask',
-  'bpmn:ReceiveTask',
-  'bpmn:ManualTask',
-  'bpmn:BusinessRuleTask',
-  'bpmn:ServiceTask',
-  'bpmn:ScriptTask'
-];
-const sequenceType = ['bpmn:SequenceFlow'];
-const gatewayType = ['bpmn:InclusiveGateway', 'bpmn:ExclusiveGateway', 'bpmn:ParallelGateway', 'bpmn:EventBasedGateway', 'bpmn:ComplexGateway'];
-const processType = ['bpmn:Process'];
-
-// 组件计算
-const component = computed(() => {
-  if (!element.value) return null;
-  const type = element.value.type;
-  if (startEndType.includes(type)) return StartEndPanel;
-  if (taskType.includes(type)) return TaskPanel;
-  if (sequenceType.includes(type)) return SequenceFlowPanel;
-  if (gatewayType.includes(type)) return GatewayPanel;
-  if (processType.includes(type)) return ProcessPanel;
-  if (type === 'bpmn:Participant') return ParticipantPanel;
-  if (type === 'bpmn:SubProcess') return SubProcessPanel;
-  //return proxy?.$modal.msgWarning('面板开发中....');
-  return undefined;
-});
-
-const nodeName = computed(() => {
-  if (element.value) {
-    const bizObj = element.value.businessObject;
-    const type = bizObj?.eventDefinitions && bizObj?.eventDefinitions.length > 0 ? bizObj.eventDefinitions[0].$type : bizObj.$type;
-    return NodeName[type] || type;
-  }
-  return '';
-});
-
-const handleModeler = () => {
-  props.modeler.on('root.added', (e: any) => {
-    element.value = null;
-    if (e.element.type === 'bpmn:Process') {
-      nextTick(() => {
-        element.value = e.element;
-        processElement.value = e.element;
-      });
-    }
-  });
-  props.modeler.on('element.click', (e: any) => {
-    if (e.element.type === 'bpmn:Process') {
-      nextTick(() => {
-        element.value = e.element;
-        processElement.value = e.element;
-      });
-    }
-  });
-  props.modeler.on('selection.changed', (e: any) => {
-    // 先给null为了让vue刷新
-    element.value = null;
-    const newElement = e.newSelection[0];
-    if (newElement) {
-      nextTick(() => {
-        element.value = newElement;
-      });
-    } else {
-      nextTick(() => {
-        element.value = processElement.value;
-      });
-    }
-  });
-};
-
-onMounted(() => {
-  handleModeler();
-});
-</script>
-
-<style scoped lang="scss">
-.node-name {
-  font-size: 16px;
-  font-weight: bold;
-  padding: 10px;
-}
-</style>

src/bpmn/panel/property/DueDate.vue

@@ -1,252 +0,0 @@
-<template>
-  <div>
-    <el-dialog v-model="visible" :title="title" width="600px" append-to-body>
-      <el-form label-width="100px">
-        <el-form-item label="小时">
-          <el-radio-group v-model="hourValue" @change="hourChange">
-            <el-radio-button label="4" value="4" />
-            <el-radio-button label="8" value="8" />
-            <el-radio-button label="12" value="12" />
-            <el-radio-button label="24" value="24" />
-            <el-radio-button label="自定义" value="自定义" />
-            <el-input-number v-show="hourValue === '自定义'" v-model="customHourValue" :min="1" @change="customHourValueChange"></el-input-number>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="天">
-          <el-radio-group v-model="dayValue" @change="dayChange">
-            <el-radio-button label="1" value="1" />
-            <el-radio-button label="2" value="2" />
-            <el-radio-button label="3" value="3" />
-            <el-radio-button label="4" value="4" />
-            <el-radio-button label="自定义" value="自定义" />
-            <el-input-number v-show="dayValue === '自定义'" v-model="customDayValue" :min="1" @change="customDayValueChange"></el-input-number>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="周">
-          <el-radio-group v-model="weekValue" @change="weekChange">
-            <el-radio-button label="1" value="1" />
-            <el-radio-button label="2" value="2" />
-            <el-radio-button label="3" value="3" />
-            <el-radio-button label="4" value="4" />
-            <el-radio-button label="自定义" value="自定义" />
-            <el-input-number v-show="weekValue === '自定义'" v-model="customWeekValue" :min="1" @change="customWeekValueChange"></el-input-number>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="月">
-          <el-radio-group v-model="monthValue" @change="monthChange">
-            <el-radio-button label="1" value="1" />
-            <el-radio-button label="2" value="2" />
-            <el-radio-button label="3" value="3" />
-            <el-radio-button label="4" value="4" />
-            <el-radio-button label="自定义" value="自定义" />
-            <el-input-number v-show="monthValue === '自定义'" v-model="customMonthValue" :min="1" @change="customMonthValueChange"></el-input-number>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-
-      <template #footer>
-        <div>
-          <el-button @click="closeDialog">取消</el-button>
-          <el-button type="primary" @click="confirm">确定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import useDialog from '@/hooks/useDialog';
-
-interface PropType {
-  modelValue?: string;
-  data?: string;
-}
-const prop = withDefaults(defineProps<PropType>(), {
-  modelValue: '',
-  data: ''
-});
-const emit = defineEmits(['update:modelValue', 'confirmCallBack']);
-
-const { title, visible, openDialog, closeDialog } = useDialog({
-  title: '设置任务到期时间'
-});
-const formValue = ref();
-const valueType = ref();
-
-const hourValue = ref('');
-const dayValue = ref('');
-const weekValue = ref('');
-const monthValue = ref('');
-
-const customHourValue = ref(1);
-const customDayValue = ref(1);
-const customWeekValue = ref(1);
-const customMonthValue = ref(1);
-
-const hourValueConst = ['4', '8', '12', '24'];
-const dayAndWeekAndMonthValueConst = ['1', '2', '3', '4'];
-
-const initValue = () => {
-  formValue.value = prop.data;
-  if (prop.data) {
-    const lastStr = prop.data.substring(prop.data.length - 1);
-    if (lastStr === 'H') {
-      const hourValueValue = prop.data.substring(2, prop.data.length - 1);
-      if (hourValueConst.includes(hourValueValue)) {
-        hourValue.value = hourValueValue;
-      } else {
-        hourValue.value = '自定义';
-        customHourValue.value = Number(hourValueValue);
-      }
-    }
-    const dayAndWeekAndMonthValue = prop.data.substring(1, prop.data.length - 1);
-    if (lastStr === 'D') {
-      if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) {
-        dayValue.value = dayAndWeekAndMonthValue;
-      } else {
-        dayValue.value = '自定义';
-        customDayValue.value = Number(dayAndWeekAndMonthValue);
-      }
-    }
-    if (lastStr === 'W') {
-      if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) {
-        weekValue.value = dayAndWeekAndMonthValue;
-      } else {
-        weekValue.value = '自定义';
-        customWeekValue.value = Number(dayAndWeekAndMonthValue);
-      }
-    }
-    if (lastStr === 'M') {
-      if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) {
-        monthValue.value = dayAndWeekAndMonthValue;
-      } else {
-        monthValue.value = '自定义';
-        customMonthValue.value = Number(dayAndWeekAndMonthValue);
-      }
-    }
-  }
-};
-
-const confirm = () => {
-  emit('update:modelValue', formValue.value);
-  emit('confirmCallBack', formValue.value);
-  closeDialog();
-};
-
-const customHourValueChange = (customHourValue) => {
-  formValue.value = `PT${customHourValue}H`;
-
-  dayValue.value = '';
-  weekValue.value = '';
-  monthValue.value = '';
-  customDayValue.value = 1;
-  customWeekValue.value = 1;
-  customMonthValue.value = 1;
-};
-const customDayValueChange = (customDayValue) => {
-  formValue.value = `P${customDayValue}D`;
-  hourValue.value = '';
-  weekValue.value = '';
-  monthValue.value = '';
-
-  customHourValue.value = 1;
-  customWeekValue.value = 1;
-  customMonthValue.value = 1;
-};
-
-const customWeekValueChange = (customWeekValue) => {
-  formValue.value = `P${customWeekValue}W`;
-  hourValue.value = '';
-  dayValue.value = '';
-  monthValue.value = '';
-
-  customHourValue.value = 1;
-  customDayValue.value = 1;
-  customMonthValue.value = 1;
-};
-
-const customMonthValueChange = (customMonthValue) => {
-  formValue.value = `P${customMonthValue}M`;
-  hourValue.value = '';
-  dayValue.value = '';
-  weekValue.value = '';
-
-  customHourValue.value = 1;
-  customDayValue.value = 1;
-  customWeekValue.value = 1;
-};
-
-const hourChange = (hourValue) => {
-  if (hourValue === '自定义') {
-    formValue.value = `PT${customHourValue.value}H`;
-  } else {
-    formValue.value = `PT${hourValue}H`;
-  }
-
-  dayValue.value = '';
-  weekValue.value = '';
-  monthValue.value = '';
-  customDayValue.value = 1;
-  customWeekValue.value = 1;
-  customMonthValue.value = 1;
-};
-const dayChange = (dayValue) => {
-  if (dayValue === '自定义') {
-    formValue.value = `P${customDayValue.value}D`;
-  } else {
-    formValue.value = `P${dayValue}D`;
-  }
-
-  hourValue.value = '';
-  weekValue.value = '';
-  monthValue.value = '';
-
-  customHourValue.value = 1;
-  customWeekValue.value = 1;
-  customMonthValue.value = 1;
-};
-const weekChange = (weekValue) => {
-  if (weekValue === '自定义') {
-    formValue.value = `P${customWeekValue.value}W`;
-  } else {
-    formValue.value = `P${weekValue}W`;
-  }
-
-  hourValue.value = '';
-  dayValue.value = '';
-  monthValue.value = '';
-
-  customHourValue.value = 1;
-  customDayValue.value = 1;
-  customMonthValue.value = 1;
-};
-const monthChange = (monthValue) => {
-  if (monthValue === '自定义') {
-    formValue.value = `P${customMonthValue.value}M`;
-  } else {
-    formValue.value = `P${monthValue}M`;
-  }
-
-  hourValue.value = '';
-  dayValue.value = '';
-  weekValue.value = '';
-
-  customHourValue.value = 1;
-  customDayValue.value = 1;
-  customWeekValue.value = 1;
-};
-
-watch(
-  () => visible.value,
-  () => {
-    if (visible.value) {
-      initValue();
-    }
-  }
-);
-
-defineExpose({
-  openDialog,
-  closeDialog
-});
-</script>

src/bpmn/panel/property/ExecutionListener.vue

@@ -1,308 +0,0 @@
-<template>
-  <div>
-    <vxe-toolbar>
-      <template #buttons>
-        <el-button type="primary" link size="small" @click="insertEvent">新增</el-button>
-        <el-button type="primary" link size="small" @click="removeSelectRowEvent">删除</el-button>
-      </template>
-    </vxe-toolbar>
-    <vxe-table
-      ref="tableRef"
-      size="mini"
-      height="100px"
-      border
-      show-overflow
-      keep-source
-      :data="tableData"
-      :menu-config="menuConfig"
-      @cell-dblclick="cellDBLClickEvent"
-      @menu-click="contextMenuClickEvent"
-    >
-      <vxe-column type="checkbox" width="40"></vxe-column>
-      <vxe-column type="seq" width="40"></vxe-column>
-      <vxe-column field="event" title="事件" min-width="100px">
-        <template #default="slotParams">
-          <span>{{ eventSelect.find((e) => e.value === slotParams.row.event)?.label }}</span>
-        </template>
-      </vxe-column>
-      <vxe-column field="type" title="类型" min-width="100px">
-        <template #default="slotParams">
-          <span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
-        </template>
-      </vxe-column>
-      <vxe-column field="className" title="Java 类名" min-width="100px"> </vxe-column>
-    </vxe-table>
-
-    <el-dialog
-      v-model="formDialog.visible.value"
-      :title="formDialog.title.value"
-      width="600px"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :show-close="false"
-      append-to-body
-    >
-      <el-form ref="formRef" :model="formData" :rules="tableRules" label-width="100px">
-        <el-form-item label="事件" prop="event">
-          <el-select v-model="formData.event">
-            <el-option v-for="item in eventSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="类型" prop="type">
-          <template #label>
-            <span>
-              类型
-              <el-tooltip placement="top">
-                <el-icon><QuestionFilled /></el-icon>
-                <template #content>
-                  类：示例 com.company.MyCustomListener，自定义类必须实现 org.flowable.engine.delegate.TaskListener 接口<br />
-                  表达式：示例 ${myObject.callMethod(task, task.eventName)}<br />
-                  委托表达式：示例 ${myListenerSpringBean} ，该 springBean 需要实现 org.flowable.engine.delegate.TaskListener 接口
-                </template>
-              </el-tooltip>
-            </span>
-          </template>
-          <el-select v-model="formData.type">
-            <el-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          :label="typeSelect.filter((e) => e.value === formData.type)[0] ? typeSelect.filter((e) => e.value === formData.type)[0]?.label : '表达式'"
-          prop="className"
-        >
-          <el-input v-model="formData.className" type="text"></el-input>
-        </el-form-item>
-      </el-form>
-      <el-tabs type="border-card">
-        <el-tab-pane label="参数">
-          <ListenerParam ref="listenerParamRef" :table-data="formData.params" />
-        </el-tab-pane>
-      </el-tabs>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="formDialog.closeDialog">取 消</el-button>
-          <el-button type="primary" @click="submitEvent">确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-<script setup lang="ts">
-import ListenerParam from './ListenerParam.vue';
-import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
-import type { ExecutionListenerVO } from 'bpmnDesign';
-import type { Moddle, Modeler, ModdleElement } from 'bpmn';
-
-import usePanel from '../../hooks/usePanel';
-import useDialog from '@/hooks/useDialog';
-import useModelerStore from '@/store/modules/modeler';
-
-const emit = defineEmits(['close']);
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const selectRow = ref<ExecutionListenerVO | null>();
-const formDialog = useDialog({
-  title: selectRow.value ? '编辑&保存' : '新增&保存'
-});
-
-const { showConfig, elementType, updateProperties } = usePanel({
-  element: toRaw(props.element)
-});
-const { getModdle } = useModelerStore();
-const moddle = getModdle();
-
-const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
-const tableRef = ref<VxeTableInstance<ExecutionListenerVO>>();
-const formRef = ref<ElFormInstance>();
-
-const initData: ExecutionListenerVO = {
-  event: '',
-  type: '',
-  className: '',
-  params: []
-};
-const formData = ref<ExecutionListenerVO>({ ...initData });
-const tableData = ref<ExecutionListenerVO[]>([]);
-const tableRules = ref<ElFormRules>({
-  event: [{ required: true, message: '请选择', trigger: 'blur' }],
-  type: [{ required: true, message: '请选择', trigger: 'blur' }],
-  className: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-
-const submitEvent = async () => {
-  const error = await listenerParamRef.value.validate();
-  await formRef.value.validate((validate) => {
-    if (validate && !error) {
-      const $table = tableRef.value;
-      if ($table) {
-        formData.value.params = listenerParamRef.value.getTableData();
-        if (selectRow.value) {
-          Object.assign(selectRow.value, formData.value);
-        } else {
-          $table.insertAt({ ...formData.value }, -1);
-        }
-        updateElement();
-        formDialog.closeDialog();
-      }
-    }
-  });
-};
-
-const removeSelectRowEvent = async () => {
-  const $table = tableRef.value;
-  if ($table) {
-    const selectCount = $table.getCheckboxRecords().length;
-    if (selectCount === 0) {
-      proxy?.$modal.msgWarning('请选择行');
-    } else {
-      await $table.removeCheckboxRow();
-      updateElement();
-    }
-  }
-};
-const insertEvent = async () => {
-  Object.assign(formData.value, initData);
-  selectRow.value = null;
-  formDialog.openDialog();
-};
-
-const editEvent = (row: ExecutionListenerVO) => {
-  Object.assign(formData.value, row);
-  selectRow.value = row;
-  formDialog.openDialog();
-};
-
-const removeEvent = async (row: ExecutionListenerVO) => {
-  await proxy?.$modal.confirm('您确定要删除该数据?');
-  const $table = tableRef.value;
-  if ($table) {
-    await $table.remove(row);
-    updateElement();
-  }
-};
-const updateElement = () => {
-  const $table = tableRef.value;
-  const data = $table.getTableData().fullData;
-  if (data.length) {
-    let extensionElements = props.element.businessObject.get('extensionElements');
-    if (!extensionElements) {
-      extensionElements = moddle.create('bpmn:ExtensionElements');
-    }
-    // 清除旧值
-    extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? [];
-    data.forEach((item) => {
-      const executionListener = moddle.create('flowable:ExecutionListener');
-      executionListener['event'] = item.event;
-      executionListener[item.type] = item.className;
-      if (item.params && item.params.length) {
-        item.params.forEach((field) => {
-          const fieldElement = moddle.create('flowable:Field');
-          fieldElement['name'] = field.name;
-          fieldElement[field.type] = field.value;
-          executionListener.get('fields').push(fieldElement);
-        });
-      }
-      extensionElements.get('values').push(executionListener);
-    });
-    updateProperties({ extensionElements: extensionElements });
-  } else {
-    const extensionElements = props.element.businessObject[`extensionElements`];
-    if (extensionElements) {
-      extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? [];
-    }
-  }
-};
-
-const cellDBLClickEvent: VxeTableEvents.CellDblclick<ExecutionListenerVO> = ({ row }) => {
-  editEvent(row);
-};
-
-const menuConfig = reactive<VxeTablePropTypes.MenuConfig<ExecutionListenerVO>>({
-  body: {
-    options: [
-      [
-        { code: 'edit', name: '编辑', prefixIcon: 'vxe-icon-edit', disabled: false },
-        { code: 'remove', name: '删除', prefixIcon: 'vxe-icon-delete', disabled: false }
-      ]
-    ]
-  },
-  visibleMethod({ options, column }) {
-    const isDisabled = !column;
-    options.forEach((list) => {
-      list.forEach((item) => {
-        item.disabled = isDisabled;
-      });
-    });
-    return true;
-  }
-});
-const contextMenuClickEvent: VxeTableEvents.MenuClick<ExecutionListenerVO> = ({ menu, row, column }) => {
-  const $table = tableRef.value;
-  if ($table) {
-    switch (menu.code) {
-      case 'edit':
-        editEvent(row);
-        break;
-      case 'remove':
-        removeEvent(row);
-        break;
-    }
-  }
-};
-
-const initTableData = () => {
-  tableData.value =
-    props.element.businessObject.extensionElements?.values
-      .filter((item) => item.$type === 'flowable:ExecutionListener')
-      .map((item) => {
-        let type;
-        if ('class' in item) type = 'class';
-        if ('expression' in item) type = 'expression';
-        if ('delegateExpression' in item) type = 'delegateExpression';
-        return {
-          event: item.event,
-          type: type,
-          className: item[type],
-          params:
-            item.fields?.map((field) => {
-              let fieldType;
-              if ('stringValue' in field) fieldType = 'stringValue';
-              if ('expression' in field) fieldType = 'expression';
-              return {
-                name: field.name,
-                type: fieldType,
-                value: field[fieldType]
-              };
-            }) ?? []
-        };
-      }) ?? [];
-};
-
-onMounted(() => {
-  initTableData();
-});
-
-const typeSelect = [
-  { id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '类', value: 'class' },
-  { id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' },
-  { id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' }
-];
-const eventSelect = [
-  { id: 'e6e0a51a-2d5d-4dc4-b847-b5c14f43a6ab', label: '开始', value: 'start' },
-  { id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: '结束', value: 'end' },
-  { id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: '启用', value: 'take' }
-];
-</script>
-
-<style scoped lang="scss">
-.el-badge {
-  :deep(.el-badge__content) {
-    top: 10px;
-  }
-}
-</style>

src/bpmn/panel/property/ListenerParam.vue

@@ -1,121 +0,0 @@
-<template>
-  <vxe-toolbar>
-    <template #buttons>
-      <el-button icon="Plus" @click="insertRow">新增</el-button>
-    </template>
-  </vxe-toolbar>
-  <vxe-table
-    ref="tableRef"
-    :height="height"
-    border
-    show-overflow
-    keep-source
-    :data="tableData"
-    :edit-rules="tableRules"
-    :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
-  >
-    <vxe-column type="seq" width="40"></vxe-column>
-    <vxe-column field="type" title="类型" :edit-render="{}">
-      <template #default="slotParams">
-        <span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
-      </template>
-      <template #edit="slotParams">
-        <vxe-select v-model="slotParams.row.type">
-          <vxe-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></vxe-option>
-        </vxe-select>
-      </template>
-    </vxe-column>
-    <vxe-column field="name" title="名称" :edit-render="{}">
-      <template #edit="slotParams">
-        <vxe-input v-model="slotParams.row.name" type="text"></vxe-input>
-      </template>
-    </vxe-column>
-    <vxe-column field="value" title="值" :edit-render="{}">
-      <template #edit="slotParams">
-        <vxe-input v-model="slotParams.row.value" type="text"></vxe-input>
-      </template>
-    </vxe-column>
-    <vxe-column title="操作" width="100" show-overflow align="center">
-      <template #default="slotParams">
-        <el-tooltip content="删除" placement="top">
-          <el-button link type="danger" icon="Delete" @click="removeRow(slotParams.row)"></el-button>
-        </el-tooltip>
-      </template>
-    </vxe-column>
-  </vxe-table>
-</template>
-
-<script setup lang="ts">
-import { VXETable, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
-import type { ParamVO } from 'bpmnDesign';
-import useDialog from '@/hooks/useDialog';
-
-interface PropType {
-  height?: string;
-  tableData?: ParamVO[];
-}
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const props = withDefaults(defineProps<PropType>(), {
-  height: '200px',
-  tableData: () => []
-});
-
-const tableRules = ref<VxeTablePropTypes.EditRules>({
-  type: [{ required: true, message: '请选择', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }],
-  value: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-
-const { title, visible, openDialog, closeDialog } = useDialog({
-  title: '监听器参数'
-});
-const typeSelect = [
-  { id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '字符串', value: 'stringValue' },
-  { id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' }
-];
-
-const tableRef = ref<VxeTableInstance<ParamVO>>();
-
-const getTableData = () => {
-  const $table = tableRef.value;
-  if ($table) {
-    return $table.getTableData().fullData;
-  }
-  return [];
-};
-
-const insertRow = async () => {
-  const $table = tableRef.value;
-  if ($table) {
-    const { row: newRow } = await $table.insertAt({}, -1);
-    // 插入一条数据并触发校验
-    await $table.validate(newRow);
-  }
-};
-
-const removeRow = async (row: ParamVO) => {
-  await proxy?.$modal.confirm('您确定要删除该数据?');
-  const $table = tableRef.value;
-  if ($table) {
-    await $table.remove(row);
-  }
-};
-
-const validate = async () => {
-  const $table = tableRef.value;
-  if ($table) {
-    return await $table.validate(true);
-  }
-};
-
-defineExpose({
-  closeDialog,
-  openDialog,
-  validate,
-  getTableData
-});
-</script>
-
-<style scoped lang="scss"></style>

src/bpmn/panel/property/TaskListener.vue

@@ -1,310 +0,0 @@
-<template>
-  <div>
-    <vxe-toolbar>
-      <template #buttons>
-        <el-button type="primary" link size="small" @click="insertEvent">新增</el-button>
-        <el-button type="primary" link size="small" @click="removeSelectRowEvent">删除</el-button>
-      </template>
-    </vxe-toolbar>
-    <vxe-table
-      ref="tableRef"
-      size="mini"
-      height="100px"
-      border
-      show-overflow
-      keep-source
-      :data="tableData"
-      :menu-config="menuConfig"
-      @cell-dblclick="cellDBLClickEvent"
-      @menu-click="contextMenuClickEvent"
-    >
-      <vxe-column type="checkbox" width="40"></vxe-column>
-      <vxe-column type="seq" width="40"></vxe-column>
-      <vxe-column field="event" title="事件" min-width="100px">
-        <template #default="slotParams">
-          <span>{{ eventSelect.find((e) => e.value === slotParams.row.event)?.label }}</span>
-        </template>
-      </vxe-column>
-      <vxe-column field="type" title="类型" min-width="100px">
-        <template #default="slotParams">
-          <span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
-        </template>
-      </vxe-column>
-      <vxe-column field="className" title="Java 类名" min-width="100px"> </vxe-column>
-    </vxe-table>
-
-    <el-dialog
-      v-model="formDialog.visible.value"
-      :title="formDialog.title.value"
-      width="600px"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :show-close="false"
-      append-to-body
-    >
-      <el-form ref="formRef" :model="formData" :rules="tableRules" label-width="100px">
-        <el-form-item label="事件" prop="event">
-          <template #label>
-            <span>
-              事件
-              <el-tooltip placement="top">
-                <el-icon><QuestionFilled /></el-icon>
-                <template #content>
-                  create（创建）：当任务已经创建，并且所有任务参数都已经设置时触发。<br />
-                  assignment（指派）：当任务已经指派给某人时触发。请注意：当流程执行到达用户任务时，在触发create事件之前，会首先触发assignment事件。<br />
-                  complete（完成）：当任务已经完成，从运行时数据中删除前触发。<br />
-                  delete（删除）：在任务即将被删除前触发。请注意任务由completeTask正常完成时也会触发。
-                </template>
-              </el-tooltip>
-            </span>
-          </template>
-          <el-select v-model="formData.event">
-            <el-option v-for="item in eventSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="类型" prop="type">
-          <el-select v-model="formData.type">
-            <el-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          :label="typeSelect.filter((e) => e.value === formData.type)[0] ? typeSelect.filter((e) => e.value === formData.type)[0]?.label : '表达式'"
-          prop="className"
-        >
-          <el-input v-model="formData.className" type="text"></el-input>
-        </el-form-item>
-      </el-form>
-      <el-tabs type="border-card">
-        <el-tab-pane label="参数">
-          <ListenerParam ref="listenerParamRef" :table-data="formData.params" />
-        </el-tab-pane>
-      </el-tabs>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="formDialog.closeDialog">取 消</el-button>
-          <el-button type="primary" @click="submitEvent">确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-<script setup lang="ts">
-import ListenerParam from './ListenerParam.vue';
-import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
-import type { TaskListenerVO } from 'bpmnDesign';
-import type { ModdleElement } from 'bpmn';
-
-import usePanel from '../../hooks/usePanel';
-import useDialog from '@/hooks/useDialog';
-import useModelerStore from '@/store/modules/modeler';
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-interface PropType {
-  element: ModdleElement;
-}
-const props = withDefaults(defineProps<PropType>(), {});
-
-const selectRow = ref<TaskListenerVO | null>();
-const formDialog = useDialog({
-  title: selectRow.value ? '编辑&保存' : '新增&保存'
-});
-const { showConfig, elementType, updateProperties } = usePanel({
-  element: toRaw(props.element)
-});
-const { getModdle } = useModelerStore();
-const moddle = getModdle();
-
-const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
-const tableRef = ref<VxeTableInstance<TaskListenerVO>>();
-const formRef = ref<ElFormInstance>();
-
-const initData: TaskListenerVO = {
-  event: '',
-  type: '',
-  className: '',
-  name: '',
-  params: []
-};
-const formData = ref<TaskListenerVO>({ ...initData });
-const currentIndex = ref(0);
-const tableData = ref<TaskListenerVO[]>([]);
-const tableRules = ref<VxeTablePropTypes.EditRules>({
-  event: [{ required: true, message: '请选择', trigger: 'blur' }],
-  type: [{ required: true, message: '请选择', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入', trigger: 'blur' }],
-  className: [{ required: true, message: '请输入', trigger: 'blur' }]
-});
-
-const submitEvent = async () => {
-  const error = await listenerParamRef.value.validate();
-  await formRef.value.validate((validate) => {
-    if (validate && !error) {
-      const $table = tableRef.value;
-      if ($table) {
-        formData.value.params = listenerParamRef.value.getTableData();
-        if (selectRow.value) {
-          Object.assign(selectRow.value, formData.value);
-        } else {
-          $table.insertAt({ ...formData.value }, -1);
-        }
-        updateElement();
-        formDialog.closeDialog();
-      }
-    }
-  });
-};
-
-const insertEvent = async () => {
-  Object.assign(formData.value, initData);
-  selectRow.value = null;
-  formDialog.openDialog();
-};
-
-const editEvent = (row: TaskListenerVO) => {
-  Object.assign(formData.value, row);
-  selectRow.value = row;
-  formDialog.openDialog();
-};
-const removeEvent = async (row: TaskListenerVO) => {
-  await proxy?.$modal.confirm('您确定要删除该数据?');
-  const $table = tableRef.value;
-  if ($table) {
-    await $table.remove(row);
-    updateElement();
-  }
-};
-
-const removeSelectRowEvent = async () => {
-  const $table = tableRef.value;
-  if ($table) {
-    const selectCount = $table.getCheckboxRecords().length;
-    if (selectCount === 0) {
-      proxy?.$modal.msgWarning('请选择行');
-    } else {
-      await $table.removeCheckboxRow();
-      updateElement();
-    }
-  }
-};
-const updateElement = () => {
-  const $table = tableRef.value;
-  const data = $table.getTableData().fullData;
-  if (data.length) {
-    let extensionElements = props.element.businessObject.get('extensionElements');
-    if (!extensionElements) {
-      extensionElements = moddle.create('bpmn:ExtensionElements');
-    }
-    // 清除旧值
-    extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
-    data.forEach((item) => {
-      const taskListener = moddle.create('flowable:TaskListener');
-      taskListener['event'] = item.event;
-      taskListener[item.type] = item.className;
-      if (item.params && item.params.length) {
-        item.params.forEach((field) => {
-          const fieldElement = moddle.create('flowable:Field');
-          fieldElement['name'] = field.name;
-          fieldElement[field.type] = field.value;
-          taskListener.get('fields').push(fieldElement);
-        });
-      }
-      extensionElements.get('values').push(taskListener);
-    });
-    updateProperties({ extensionElements: extensionElements });
-  } else {
-    const extensionElements = props.element.businessObject[`extensionElements`];
-    if (extensionElements) {
-      extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
-    }
-  }
-};
-
-const cellDBLClickEvent: VxeTableEvents.CellDblclick<TaskListenerVO> = ({ row }) => {
-  editEvent(row);
-};
-
-const menuConfig = reactive<VxeTablePropTypes.MenuConfig<TaskListenerVO>>({
-  body: {
-    options: [
-      [
-        { code: 'edit', name: '编辑', prefixIcon: 'vxe-icon-edit', disabled: false },
-        { code: 'remove', name: '删除', prefixIcon: 'vxe-icon-delete', disabled: false }
-      ]
-    ]
-  },
-  visibleMethod({ options, column }) {
-    const isDisabled = !column;
-    options.forEach((list) => {
-      list.forEach((item) => {
-        item.disabled = isDisabled;
-      });
-    });
-    return true;
-  }
-});
-const contextMenuClickEvent: VxeTableEvents.MenuClick<TaskListenerVO> = ({ menu, row, column }) => {
-  const $table = tableRef.value;
-  if ($table) {
-    switch (menu.code) {
-      case 'edit':
-        editEvent(row);
-        break;
-      case 'remove':
-        removeEvent(row);
-        break;
-    }
-  }
-};
-const initTableData = () => {
-  tableData.value =
-    props.element.businessObject.extensionElements?.values
-      .filter((item) => item.$type === 'flowable:TaskListener')
-      .map((item) => {
-        let type;
-        if ('class' in item) type = 'class';
-        if ('expression' in item) type = 'expression';
-        if ('delegateExpression' in item) type = 'delegateExpression';
-        return {
-          event: item.event,
-          type: type,
-          className: item[type],
-          params:
-            item.fields?.map((field) => {
-              let fieldType;
-              if ('stringValue' in field) fieldType = 'stringValue';
-              if ('expression' in field) fieldType = 'expression';
-              return {
-                name: field.name,
-                type: fieldType,
-                value: field[fieldType]
-              };
-            }) ?? []
-        };
-      }) ?? [];
-};
-
-onMounted(() => {
-  initTableData();
-});
-
-const typeSelect = [
-  { id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '类', value: 'class' },
-  { id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' },
-  { id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' }
-];
-const eventSelect = [
-  { id: 'e6e0a51a-2d5d-4dc4-b847-b5c14f43a6ab', label: '创建', value: 'create' },
-  { id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: '指派', value: 'assignment' },
-  { id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: '完成', value: 'complete' },
-  { id: '68801972-85f1-482f-bd86-1fad015c26ed', label: '删除', value: 'delete' }
-];
-</script>
-
-<style scoped lang="scss">
-.el-badge {
-  :deep(.el-badge__content) {
-    top: 10px;
-  }
-}
-</style>

src/components/BpmnDesign/index.vue

@@ -1,71 +0,0 @@
-<template>
-  <div class="design">
-    <el-dialog v-model="visible" width="100%" fullscreen :title="title">
-      <div class="modeler">
-        <bpmn-design ref="bpmnDesignRef" @save-call-back="saveCallBack"></bpmn-design>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script lang="ts" setup name="Design">
-import { getInfo, editModelXml } from '@/api/workflow/model';
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-import { ModelForm } from '@/api/workflow/model/types';
-import BpmnDesign from '@/bpmn/index.vue';
-import useDialog from '@/hooks/useDialog';
-const bpmnDesignRef = ref<InstanceType<typeof BpmnDesign>>();
-const modelForm = ref<ModelForm>();
-const emit = defineEmits(['closeCallBack']);
-const { visible, title } = useDialog({
-  title: '编辑流程'
-});
-const modelId = ref('');
-const open = async (id) => {
-  visible.value = true;
-  modelId.value = id;
-  const { data } = await getInfo(id);
-  modelForm.value = data;
-  bpmnDesignRef.value.initDiagram(modelForm.value.xml);
-};
-//保存模型
-const saveCallBack = async (data) => {
-  await proxy?.$modal.confirm('是否确认保存？');
-  data.loading.value = true;
-  modelForm.value.id = modelId.value;
-  modelForm.value.xml = data.xml;
-  modelForm.value.svg = data.svg;
-  modelForm.value.key = data.key;
-  modelForm.value.name = data.name;
-  editModelXml(modelForm.value).then((res) => {
-    if (res.code === 200) {
-      visible.value = false;
-      proxy?.$modal.msgSuccess('保存成功');
-      emit('closeCallBack', data);
-    }
-  });
-  data.loading.value = false;
-};
-
-/**
- * 对外暴露子组件方法
- */
-defineExpose({
-  open
-});
-</script>
-
-<style lang="scss" scoped>
-.design {
-  :deep(.el-dialog .el-dialog__body) {
-    max-height: 100% !important;
-    min-height: calc(100vh - 80px);
-    padding: 10px 0 10px 0 !important;
-  }
-  :deep(.el-dialog__header) {
-    padding: 0 0 5px 0 !important;
-  }
-}
-</style>

src/components/BpmnView/index.vue

@@ -1,411 +0,0 @@
-<template>
-  <div v-loading="loading" class="bpmnDialogContainers">
-    <el-header style="border-bottom: 1px solid rgb(218 218 218); height: auto">
-      <div class="header-div">
-        <div>
-          <el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
-            <el-button size="small" icon="Rank" @click="fitViewport" />
-          </el-tooltip>
-          <el-tooltip effect="dark" content="放大" placement="bottom">
-            <el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" />
-          </el-tooltip>
-          <el-tooltip effect="dark" content="缩小" placement="bottom">
-            <el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" />
-          </el-tooltip>
-        </div>
-        <div>
-          <div class="tips-label">
-            <div class="un-complete">未完成</div>
-            <div class="in-progress">进行中</div>
-            <div class="complete">已完成</div>
-          </div>
-        </div>
-      </div>
-    </el-header>
-    <div class="flow-containers">
-      <el-container class="bpmn-el-container" style="align-items: stretch">
-        <el-main style="padding: 0">
-          <div ref="canvas" class="canvas" />
-        </el-main>
-      </el-container>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import BpmnViewer from 'bpmn-js/lib/Viewer';
-import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
-import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
-import { ModuleDeclaration } from 'didi';
-import type { Canvas, ModdleElement } from 'bpmn';
-import EventBus from 'diagram-js/lib/core/EventBus';
-import Overlays from 'diagram-js/lib/features/overlays/Overlays';
-import processApi from '@/api/workflow/processInstance/index';
-
-const canvas = ref<HTMLElement>();
-const modeler = ref<BpmnViewer>();
-const taskList = ref([]);
-const zoom = ref(1);
-const xml = ref('');
-const loading = ref(false);
-const bpmnVisible = ref(true);
-const historyList = ref([]);
-
-const init = (businessKey) => {
-  loading.value = true;
-  bpmnVisible.value = true;
-  nextTick(async () => {
-    if (modeler.value) modeler.value.destroy();
-    modeler.value = new BpmnViewer({
-      container: canvas.value,
-      additionalModules: [
-        {
-          //禁止滚轮滚动
-          zoomScroll: ['value', '']
-        },
-        ZoomScrollModule,
-        MoveCanvasModule
-      ] as ModuleDeclaration[]
-    });
-    const resp = await processApi.getHistoryList(businessKey);
-    xml.value = resp.data.xml;
-    taskList.value = resp.data.taskList;
-    historyList.value = resp.data.historyList;
-    await createDiagram(xml.value);
-    loading.value = false;
-  });
-};
-
-const initXml = (xmlStr: string) => {
-  loading.value = true;
-  bpmnVisible.value = true;
-  nextTick(async () => {
-    if (modeler.value) modeler.value.destroy();
-    modeler.value = new BpmnViewer({
-      container: canvas.value,
-      additionalModules: [
-        {
-          //禁止滚轮滚动
-          zoomScroll: ['value', '']
-        },
-        ZoomScrollModule,
-        MoveCanvasModule
-      ] as ModuleDeclaration[]
-    });
-    xml.value = xmlStr;
-    await createDiagram(xml.value);
-    loading.value = false;
-  });
-};
-
-const createDiagram = async (data) => {
-  try {
-    await modeler.value.importXML(data);
-    fitViewport();
-    fillColor();
-    loading.value = false;
-    addEventBusListener();
-  } catch (err) {
-    console.log(err);
-  }
-};
-const addEventBusListener = () => {
-  const eventBus = modeler.value.get<EventBus>('eventBus');
-  const overlays = modeler.value.get<Overlays>('overlays');
-  eventBus.on<ModdleElement>('element.hover', (e) => {
-    let data = historyList.value.find((t) => t.taskDefinitionKey === e.element.id);
-    if (e.element.type === 'bpmn:UserTask' && data) {
-      setTimeout(() => {
-        genNodeDetailBox(e, overlays, data);
-      }, 10);
-    }
-  });
-  eventBus.on('element.out', (e) => {
-    overlays.clear();
-  });
-};
-const genNodeDetailBox = (e, overlays, data) => {
-  overlays.add(e.element.id, {
-    position: { top: e.element.height, left: 0 },
-    html: `<div class="verlays">
-                    <p>审批人员: ${data.nickName || ''}<p/>
-                    <p>节点状态：${data.status || ''}</p>
-                    <p>开始时间：${data.startTime || ''}</p>
-                    <p>结束时间：${data.endTime || ''}</p>
-                    <p>审批耗时：${data.runDuration || ''}</p>
-                    <p>流程版本：v${data.version || ''}</p>
-                   </div>`
-  });
-};
-// 让图能自适应屏幕
-const fitViewport = () => {
-  zoom.value = modeler.value.get<Canvas>('canvas').zoom('fit-viewport');
-  const bbox = document.querySelector<SVGGElement>('.flow-containers .viewport').getBBox();
-  const currentViewBox = modeler.value.get('canvas').viewbox();
-  const elementMid = {
-    x: bbox.x + bbox.width / 2 - 65,
-    y: bbox.y + bbox.height / 2
-  };
-  modeler.value.get<Canvas>('canvas').viewbox({
-    x: elementMid.x - currentViewBox.width / 2,
-    y: elementMid.y - currentViewBox.height / 2,
-    width: currentViewBox.width,
-    height: currentViewBox.height
-  });
-  zoom.value = (bbox.width / currentViewBox.width) * 1.8;
-};
-// 放大缩小
-const zoomViewport = (zoomIn = true) => {
-  zoom.value = modeler.value.get<Canvas>('canvas').zoom();
-  zoom.value += zoomIn ? 0.1 : -0.1;
-  modeler.value.get<Canvas>('canvas').zoom(zoom.value);
-};
-//上色
-const fillColor = () => {
-  const canvas = modeler.value.get<Canvas>('canvas');
-  bpmnNodeList(modeler.value._definitions.rootElements[0].flowElements, canvas);
-};
-//递归上色
-const bpmnNodeList = (flowElements, canvas) => {
-  flowElements.forEach((n) => {
-    if (n.$type === 'bpmn:UserTask') {
-      const completeTask = taskList.value.find((m) => m.key === n.id);
-      if (completeTask) {
-        canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-        n.outgoing?.forEach((nn) => {
-          const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id);
-          if (targetTask) {
-            canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
-          } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
-            canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-            canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-            nn.targetRef.outgoing.forEach((e) => {
-              gateway(e.id, e.targetRef.$type, e.targetRef.id, canvas, completeTask.completed);
-            });
-          } else if (nn.targetRef.$type === 'bpmn:ParallelGateway') {
-            canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-            canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-            nn.targetRef.outgoing.forEach((e) => {
-              gateway(e.id, e.targetRef.$type, e.targetRef.id, canvas, completeTask.completed);
-            });
-          } else if (nn.targetRef.$type === 'bpmn:InclusiveGateway') {
-            canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-            canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-            nn.targetRef.outgoing.forEach((e) => {
-              gateway(e.id, e.targetRef.$type, e.targetRef.id, canvas, completeTask.completed);
-            });
-          }
-        });
-      }
-    } else if (n.$type === 'bpmn:ExclusiveGateway') {
-      n.outgoing.forEach((nn) => {
-        const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id);
-        if (targetTask) {
-          canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
-        }
-      });
-    } else if (n.$type === 'bpmn:ParallelGateway') {
-      n.outgoing.forEach((nn) => {
-        const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id);
-        if (targetTask) {
-          canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
-        }
-      });
-    } else if (n.$type === 'bpmn:InclusiveGateway') {
-      n.outgoing.forEach((nn) => {
-        const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id);
-        if (targetTask) {
-          canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
-        }
-      });
-    } else if (n.$type === 'bpmn:SubProcess') {
-      const completeTask = taskList.value.find((m) => m.key === n.id);
-      if (completeTask) {
-        canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo');
-      }
-      bpmnNodeList(n.flowElements, canvas);
-    } else if (n.$type === 'bpmn:StartEvent') {
-      canvas.addMarker(n.id, 'startEvent');
-      if (n.outgoing) {
-        n.outgoing.forEach((nn) => {
-          const completeTask = taskList.value.find((m) => m.key === nn.targetRef.id);
-          if (completeTask) {
-            canvas.addMarker(nn.id, 'highlight');
-            canvas.addMarker(n.id, 'highlight');
-          }
-        });
-      }
-    } else if (n.$type === 'bpmn:EndEvent') {
-      canvas.addMarker(n.id, 'endEvent');
-      const completeTask = taskList.value.find((m) => m.key === n.id);
-      if (completeTask) {
-        canvas.addMarker(completeTask.key, 'highlight');
-        canvas.addMarker(n.id, 'highlight');
-        return;
-      }
-    }
-  });
-};
-const gateway = (id, targetRefType, targetRefId, canvas, completed) => {
-  if (targetRefType === 'bpmn:ExclusiveGateway') {
-    canvas.addMarker(id, completed ? 'highlight' : 'highlight-todo');
-    canvas.addMarker(targetRefId, completed ? 'highlight' : 'highlight-todo');
-  }
-  if (targetRefType === 'bpmn:ParallelGateway') {
-    canvas.addMarker(id, completed ? 'highlight' : 'highlight-todo');
-    canvas.addMarker(targetRefId, completed ? 'highlight' : 'highlight-todo');
-  }
-  if (targetRefType === 'bpmn:InclusiveGateway') {
-    canvas.addMarker(id, completed ? 'highlight' : 'highlight-todo');
-    canvas.addMarker(targetRefId, completed ? 'highlight' : 'highlight-todo');
-  }
-};
-defineExpose({
-  init,
-  initXml
-});
-</script>
-
-<style lang="scss" scoped>
-.canvas {
-  width: 100%;
-  height: 100%;
-}
-
-.header-div {
-  display: flex;
-  padding: 10px 0;
-  justify-content: space-between;
-
-  .tips-label {
-    display: flex;
-    div {
-      margin-right: 10px;
-      padding: 5px;
-      font-size: 12px;
-    }
-    .un-complete {
-      border: 1px solid #000;
-    }
-    .in-progress {
-      background-color: rgb(255, 237, 204);
-      border: 1px dashed orange;
-    }
-    .complete {
-      background-color: rgb(204, 230, 204);
-      border: 1px solid green;
-    }
-  }
-}
-
-.view-mode {
-  .el-header,
-  .el-aside,
-  .djs-palette,
-  .bjs-powered-by {
-    display: none;
-  }
-  .el-loading-mask {
-    background-color: initial;
-  }
-  .el-loading-spinner {
-    display: none;
-  }
-}
-.bpmn-el-container {
-  height: calc(100vh - 350px);
-}
-.flow-containers {
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  .canvas {
-    width: 100%;
-    height: 100%;
-  }
-  .load {
-    margin-right: 10px;
-  }
-  :deep(.el-form-item__label) {
-    font-size: 13px;
-  }
-
-  :deep(.djs-palette) {
-    left: 0 !important;
-    top: 0;
-    border-top: none;
-  }
-
-  :deep(.djs-container svg) {
-    min-height: 650px;
-  }
-
-  :deep(.startEvent.djs-shape .djs-visual > :nth-child(1)) {
-    fill: #77df6d !important;
-  }
-  :deep(.endEvent.djs-shape .djs-visual > :nth-child(1)) {
-    fill: #ee7b77 !important;
-  }
-  :deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
-    fill: green !important;
-    stroke: green !important;
-    fill-opacity: 0.2 !important;
-  }
-  :deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
-    fill: green !important;
-  }
-  :deep(.highlight.djs-shape .djs-visual > path) {
-    fill: green !important;
-    fill-opacity: 0.2 !important;
-    stroke: green !important;
-  }
-  :deep(.highlight.djs-connection > .djs-visual > path) {
-    stroke: green !important;
-  }
-
-  // 边框滚动动画
-  @keyframes path-animation {
-    from {
-      stroke-dashoffset: 100%;
-    }
-
-    to {
-      stroke-dashoffset: 0%;
-    }
-  }
-
-  :deep(.highlight-todo.djs-connection > .djs-visual > path) {
-    animation: path-animation 60s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    stroke-dasharray: 4px !important;
-    stroke: orange !important;
-    fill-opacity: 0.2 !important;
-    marker-end: url('#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr');
-  }
-
-  :deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
-    animation: path-animation 60s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    stroke-dasharray: 4px !important;
-    stroke: orange !important;
-    fill: orange !important;
-    fill-opacity: 0.2 !important;
-  }
-}
-:deep(.verlays) {
-  width: 250px;
-  background: rgb(102, 102, 102);
-  border-radius: 4px;
-  border: 1px solid #ebeef5;
-  color: #fff;
-  padding: 15px 10px;
-  p {
-    line-height: 28px;
-    margin: 0;
-    padding: 0;
-  }
-  cursor: pointer;
-}
-</style>

src/components/Breadcrumb/index.vue

@@ -11,21 +11,48 @@
 
 <script setup lang="ts">
 import { RouteLocationMatched } from 'vue-router';
+import { usePermissionStore } from '@/store/modules/permission';
 
 const route = useRoute();
 const router = useRouter();
+const permissionStore = usePermissionStore();
 const levelList = ref<RouteLocationMatched[]>([]);
 
 const getBreadcrumb = () => {
   // only show routes with meta.title
-  let matched = route.matched.filter((item) => item.meta && item.meta.title);
-  const first = matched[0];
+  let matched = [];
+  const pathNum = findPathNum(route.path);
+  // multi-level menu
+  if (pathNum > 2) {
+    const reg = /\/\w+/gi;
+    const pathList = route.path.match(reg).map((item, index) => {
+      if (index !== 0) item = item.slice(1);
+      return item;
+    });
+    getMatched(pathList, permissionStore.defaultRoutes, matched);
+  } else {
+    matched = route.matched.filter((item) => item.meta && item.meta.title);
+  }
   // 判断是否为首页
-  if (!isDashboard(first)) {
-    matched = ([{ path: '/index', meta: { title: '首页' } }] as any).concat(matched);
+  if (!isDashboard(matched[0])) {
+    matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched);
   }
   levelList.value = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false);
 };
+const findPathNum = (str, char = '/') => {
+  if (typeof str !== 'string' || str.length === 0) return 0;
+  return str.split(char).length - 1;
+};
+const getMatched = (pathList, routeList, matched) => {
+  const data = routeList.find((item) => item.path == pathList[0] || (item.name += '').toLowerCase() == pathList[0]);
+  if (data) {
+    matched.push(data);
+    if (data.children && pathList.length) {
+      pathList.shift();
+      getMatched(pathList, data.children, matched);
+    }
+  }
+};
 const isDashboard = (route: RouteLocationMatched) => {
   const name = route && (route.name as string);
   if (!name) {

src/components/BuildCode/index.vue

@@ -1,61 +0,0 @@
-<template>
-  <!-- 代码构建 -->
-  <div>
-    <v-form-designer
-      ref="buildRef"
-      class="build"
-      :designer-config="{ importJsonButton: true, exportJsonButton: true, exportCodeButton: true, generateSFCButton: true, formTemplates: true }"
-    >
-      <template v-if="showBtn" #customToolButtons>
-        <el-button link type="primary" icon="Select" @click="getJson">保存</el-button>
-      </template>
-    </v-form-designer>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  showBtn: boolean;
-  formJson: any;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  showBtn: true,
-  formJson: ''
-});
-
-const buildRef = ref();
-const emits = defineEmits(['reJson', 'saveDesign']);
-
-//获取表单json
-const getJson = () => {
-  const formJson = JSON.stringify(buildRef.value.getFormJson());
-  const fieldJson = JSON.stringify(buildRef.value.getFieldWidgets());
-  let data = {
-    formJson,
-    fieldJson
-  };
-  emits('saveDesign', data);
-};
-
-onMounted(() => {
-  if (props.formJson) {
-    buildRef.value.setFormJson(props.formJson);
-  }
-});
-</script>
-
-<style lang="scss">
-.build {
-  margin: 0 !important;
-  overflow-y: auto !important;
-
-  & header.main-header {
-    display: none;
-  }
-
-  & .right-toolbar-con {
-    text-align: right !important;
-  }
-}
-</style>

src/components/BuildCode/render.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="">
-    <v-form-render ref="vFormRef" :form-json="formJson" :form-data="formData" />
-  </div>
-</template>
-
-<!-- 动态表单渲染 -->
-<script setup name="Render" lang="ts">
-interface Props {
-  formJson: string | object;
-  formData: string | object;
-  isView: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  formJson: '',
-  formData: '',
-  isView: false
-});
-
-const vFormRef = ref();
-// 获取表单数据-异步
-const getFormData = () => {
-  return vFormRef.value.getFormData();
-};
-
-/**
- * 设置表单内容
- * @param {表单配置} formConf
- * formConfig：{ formTemplate：表单模板，formData：表单数据，hiddenField：需要隐藏的字段字符串集合，disabledField：需要禁用的自读字符串集合}
- */
-const initForm = (formConf: any) => {
-  const { formTemplate, formData, hiddenField, disabledField } = toRaw(formConf);
-  if (formTemplate) {
-    vFormRef.value.setFormJson(formTemplate);
-    if (formData) {
-      vFormRef.value.setFormData(formData);
-    }
-    if (disabledField && disabledField.length > 0) {
-      setTimeout(() => {
-        vFormRef.value.disableWidgets(disabledField);
-      }, 200);
-    }
-    if (hiddenField && hiddenField.length > 0) {
-      setTimeout(() => {
-        vFormRef.value.hideWidgets(hiddenField);
-      }, 200);
-    }
-    if (props.isView) {
-      setTimeout(() => {
-        vFormRef.value.disableForm();
-      }, 100);
-    }
-  }
-};
-defineExpose({ getFormData, initForm });
-</script>

src/components/DictTag/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <template v-for="(item, index) in options">
-      <template v-if="values.includes(item.value)">
+      <template v-if="isValueMatch(item.value)">
         <span
           v-if="(item.elTagType === 'default' || item.elTagType === '') && (item.elTagClass === '' || item.elTagClass == null)"
           :key="item.value"
@@ -50,6 +50,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const values = computed(() => {
   if (props.value === '' || props.value === null || typeof props.value === 'undefined') return [];
+  if (typeof props.value === 'number' || typeof props.value === 'boolean') return [props.value]
   return Array.isArray(props.value) ? props.value.map((item) => '' + item) : String(props.value).split(props.separator);
 });
 
@@ -58,7 +59,7 @@ const unmatch = computed(() => {
   // 传入值为非数组
   let unmatch = false; // 添加一个标志来判断是否有未匹配项
   values.value.forEach((item) => {
-    if (!props.options.some((v) => v.value === item)) {
+    if (!props.options.some((v) => v.value == item)) {
       unmatch = true; // 如果有未匹配项，将标志设置为true
     }
   });
@@ -85,9 +86,13 @@ const handleArray = (array: Array<string | number>) => {
     return pre + ' ' + cur;
   });
 };
+
+const isValueMatch = (itemValue: any) => {
+  return values.value.some(val => val == itemValue)
+}
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .el-tag + .el-tag {
   margin-left: 10px;
 }

src/components/Editor/index.vue

@@ -95,7 +95,7 @@ const options = ref<any>({
 });
 
 const styles = computed(() => {
-  let style: any = {};
+  const style: any = {};
   if (props.minHeight) {
     style.minHeight = `${props.minHeight}px`;
   }
@@ -110,7 +110,7 @@ watch(
   () => props.modelValue,
   (v: string) => {
     if (v !== content.value) {
-      content.value = v === undefined ? '<p></p>' : v;
+      content.value = v || '<p></p>';
     }
   },
   { immediate: true }
@@ -121,9 +121,9 @@ const handleUploadSuccess = (res: any) => {
   // 如果上传成功
   if (res.code === 200) {
     // 获取富文本实例
-    let quill = toRaw(quillEditorRef.value).getQuill();
+    const quill = toRaw(quillEditorRef.value).getQuill();
     // 获取光标位置
-    let length = quill.selection.savedRange.index;
+    const length = quill.selection.savedRange.index;
     // 插入图片，res为服务器返回的图片链接地址
     quill.insertEmbed(length, 'image', res.data.url);
     // 调整光标到最后

src/components/FileUpload/index.vue

@@ -7,18 +7,20 @@
       :before-upload="handleBeforeUpload"
       :file-list="fileList"
       :limit="limit"
+      :accept="fileAccept"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
       :on-success="handleUploadSuccess"
       :show-file-list="false"
       :headers="headers"
       class="upload-file-uploader"
+      v-if="!disabled"
     >
       <!-- 上传按钮 -->
       <el-button type="primary">选取文件</el-button>
     </el-upload>
     <!-- 上传提示 -->
-    <div v-if="showTip" class="el-upload__tip">
+    <div v-if="showTip && !disabled" class="el-upload__tip">
       请上传
       <template v-if="fileSize">
         大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
@@ -35,7 +37,7 @@
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
         </el-link>
         <div class="ele-upload-list__item-content-action">
-          <el-button type="danger" link @click="handleDelete(index)">删除</el-button>
+          <el-button type="danger" v-if="!disabled" link @click="handleDelete(index)">删除</el-button>
         </div>
       </li>
     </transition-group>
@@ -57,9 +59,11 @@ const props = defineProps({
   // 大小限制(MB)
   fileSize: propTypes.number.def(5),
   // 文件类型, 例如['png', 'jpg', 'jpeg']
-  fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']),
+  fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf']),
   // 是否显示提示
-  isShowTip: propTypes.bool.def(true)
+  isShowTip: propTypes.bool.def(true),
+  // 禁用组件（仅查看文件）
+  disabled: propTypes.bool.def(false)
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -76,6 +80,9 @@ const showTip = computed(() => props.isShowTip && (props.fileType || props.fileS
 
 const fileUploadRef = ref<ElUploadInstance>();
 
+// 监听 fileType 变化，更新 fileAccept
+const fileAccept = computed(() => props.fileType.map((type) => `.${type}`).join(','));
+
 watch(
   () => props.modelValue,
   async (val) => {
@@ -121,6 +128,11 @@ const handleBeforeUpload = (file: any) => {
       return false;
     }
   }
+  // 校检文件名是否包含特殊字符
+  if (file.name.includes(',')) {
+    proxy?.$modal.msgError('文件名不正确，不能包含英文逗号!');
+    return false;
+  }
   // 校检文件大小
   if (props.fileSize) {
     const isLt = file.size / 1024 / 1024 < props.fileSize;
@@ -164,7 +176,7 @@ const handleUploadSuccess = (res: any, file: UploadFile) => {
 
 // 删除文件
 const handleDelete = (index: number) => {
-  let ossId = fileList.value[index].ossId;
+  const ossId = fileList.value[index].ossId;
   delOss(ossId);
   fileList.value.splice(index, 1);
   emit('update:modelValue', listToString(fileList.value));
@@ -204,7 +216,7 @@ const listToString = (list: any[], separator?: string) => {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .upload-file-uploader {
   margin-bottom: 5px;
 }

src/components/HeaderSearch/index.vue

@@ -1,195 +0,0 @@
-<template>
-  <div :class="{ show: show }" class="header-search">
-    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
-    <el-select
-      ref="headerSearchSelectRef"
-      v-model="search"
-      :remote-method="querySearch"
-      filterable
-      default-first-option
-      remote
-      placeholder="Search"
-      class="header-search-select"
-      @change="change"
-    >
-      <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
-    </el-select>
-  </div>
-</template>
-
-<script setup lang="ts" name="HeaderSearch">
-import Fuse from 'fuse.js';
-import { getNormalPath } from '@/utils/ruoyi';
-import { isHttp } from '@/utils/validate';
-import usePermissionStore from '@/store/modules/permission';
-import { RouteRecordRaw } from 'vue-router';
-
-type Router = Array<{
-  path: string;
-  title: string[];
-}>;
-
-const search = ref('');
-const options = ref<any>([]);
-const searchPool = ref<Router>([]);
-const show = ref(false);
-const fuse = ref();
-const headerSearchSelectRef = ref<ElSelectInstance>();
-const router = useRouter();
-const routes = computed(() => usePermissionStore().getRoutes());
-
-const click = () => {
-  show.value = !show.value;
-  if (show.value) {
-    headerSearchSelectRef.value && headerSearchSelectRef.value.focus();
-  }
-};
-const close = () => {
-  headerSearchSelectRef.value && headerSearchSelectRef.value.blur();
-  options.value = [];
-  show.value = false;
-};
-const change = (val: any) => {
-  const path = val.path;
-  const query = val.query;
-  if (isHttp(path)) {
-    // http(s):// 路径新窗口打开
-    const pindex = path.indexOf('http');
-    window.open(path.substr(pindex, path.length), '_blank');
-  } else {
-    if (query) {
-      router.push({ path: path, query: JSON.parse(query) });
-    } else {
-      router.push(path);
-    }
-  }
-  search.value = '';
-  options.value = [];
-  nextTick(() => {
-    show.value = false;
-  });
-};
-const initFuse = (list: Router) => {
-  fuse.value = new Fuse(list, {
-    shouldSort: true,
-    threshold: 0.4,
-    location: 0,
-    distance: 100,
-    minMatchCharLength: 1,
-    keys: [
-      {
-        name: 'title',
-        weight: 0.7
-      },
-      {
-        name: 'path',
-        weight: 0.3
-      }
-    ]
-  });
-};
-// Filter out the routes that can be displayed in the sidebar
-// And generate the internationalized title
-const generateRoutes = (routes: RouteRecordRaw[], basePath = '', prefixTitle: string[] = []) => {
-  let res: Router = [];
-  routes.forEach((r) => {
-    // skip hidden router
-    if (!r.hidden) {
-      const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
-      const data = {
-        path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
-        title: [...prefixTitle],
-        query: ''
-      };
-      if (r.meta && r.meta.title) {
-        data.title = [...data.title, r.meta.title];
-        if (r.redirect !== 'noRedirect') {
-          // only push the routes with title
-          // special case: need to exclude parent router without redirect
-          res.push(data);
-        }
-      }
-
-      if (r.query) {
-        data.query = r.query;
-      }
-
-      // recursive child routes
-      if (r.children) {
-        const tempRoutes = generateRoutes(r.children, data.path, data.title);
-        if (tempRoutes.length >= 1) {
-          res = [...res, ...tempRoutes];
-        }
-      }
-    }
-  });
-  return res;
-};
-const querySearch = (query: string) => {
-  if (query !== '') {
-    options.value = fuse.value.search(query);
-  } else {
-    options.value = [];
-  }
-};
-
-onMounted(() => {
-  searchPool.value = generateRoutes(routes.value);
-});
-
-// watchEffect(() => {
-//     searchPool.value = generateRoutes(routes.value)
-// })
-
-watch(show, (value) => {
-  if (value) {
-    document.body.addEventListener('click', close);
-  } else {
-    document.body.removeEventListener('click', close);
-  }
-});
-
-watch(searchPool, (list: Router) => {
-  initFuse(list);
-});
-</script>
-
-<style lang="scss" scoped>
-.header-search {
-  font-size: 0 !important;
-
-  .search-icon {
-    cursor: pointer;
-    font-size: 18px;
-    vertical-align: middle;
-  }
-
-  .header-search-select {
-    font-size: 18px;
-    transition: width 0.2s;
-    width: 0;
-    overflow: hidden;
-    background: transparent;
-    border-radius: 0;
-    display: inline-block;
-    vertical-align: middle;
-
-    :deep(.el-input__inner) {
-      border-radius: 0;
-      border: 0;
-      padding-left: 0;
-      padding-right: 0;
-      box-shadow: none !important;
-      border-bottom: 1px solid #d9d9d9;
-      vertical-align: middle;
-    }
-  }
-
-  &.show {
-    .header-search-select {
-      width: 210px;
-      margin-left: 10px;
-    }
-  }
-}
-</style>

src/components/IconSelect/index.vue

@@ -65,7 +65,7 @@ const selectedIcon = (iconName: string) => {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .el-scrollbar {
   max-height: calc(50vh - 100px) !important;
   overflow-y: auto;

src/components/ImagePreview/index.vue

@@ -27,7 +27,7 @@ const realSrc = computed(() => {
   if (!props.src) {
     return;
   }
-  let real_src = props.src.split(',')[0];
+  const real_src = props.src.split(',')[0];
   return real_src;
 });
 
@@ -35,10 +35,10 @@ const realSrcList = computed(() => {
   if (!props.src) {
     return [];
   }
-  let real_src_list = props.src.split(',');
-  let srcList: string[] = [];
+  const real_src_list = props.src.split(',');
+  const srcList: string[] = [];
   real_src_list.forEach((item: string) => {
-    if(item.trim() === '') {
+    if (item.trim() === '') {
       return;
     }
     return srcList.push(item);

src/components/ImageUpload/index.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="component-upload-image">
     <el-upload
-      ref="imageUpload"
+      ref="imageUploadRef"
       multiple
       :action="uploadImgUrl"
       list-type="picture-card"
       :on-success="handleUploadSuccess"
       :before-upload="handleBeforeUpload"
       :limit="limit"
+      :accept="fileAccept"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
       :before-remove="handleDelete"
@@ -87,6 +88,9 @@ const showTip = computed(() => props.isShowTip && (props.fileType || props.fileS
 
 const imageUploadRef = ref<ElUploadInstance>();
 
+// 监听 fileType 变化，更新 fileAccept
+const fileAccept = computed(() => props.fileType.map((type) => `.${type}`).join(','));
+
 watch(
   () => props.modelValue,
   async (val: string) => {
@@ -139,6 +143,10 @@ const handleBeforeUpload = (file: any) => {
     proxy?.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}图片格式文件!`);
     return false;
   }
+  if (file.name.includes(',')) {
+    proxy?.$modal.msgError('文件名不正确，不能包含英文逗号!');
+    return false;
+  }
   if (props.fileSize) {
     const isLt = file.size / 1024 / 1024 < props.fileSize;
     if (!isLt) {
@@ -181,7 +189,7 @@ const handleUploadSuccess = (res: any, file: UploadFile) => {
 const handleDelete = (file: UploadFile): boolean => {
   const findex = fileList.value.map((f) => f.name).indexOf(file.name);
   if (findex > -1 && uploadList.value.length === number.value) {
-    let ossId = fileList.value[findex].ossId;
+    const ossId = fileList.value[findex].ossId;
     delOss(ossId);
     fileList.value.splice(findex, 1);
     emit('update:modelValue', listToString(fileList.value));
@@ -217,7 +225,7 @@ const handlePictureCardPreview = (file: any) => {
 const listToString = (list: any[], separator?: string) => {
   let strs = '';
   separator = separator || ',';
-  for (let i in list) {
+  for (const i in list) {
     if (undefined !== list[i].ossId && list[i].url.indexOf('blob:') !== 0) {
       strs += list[i].ossId + separator;
     }
@@ -226,7 +234,7 @@ const listToString = (list: any[], separator?: string) => {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 // .el-upload--picture-card 控制加号部分
 :deep(.hide .el-upload--picture-card) {
   display: none;

src/components/Pagination/index.vue

@@ -14,13 +14,7 @@
   </div>
 </template>
 
-<script lang="ts">
-export default {
-  name: 'Pagination'
-};
-</script>
-
-<script setup lang="ts">
+<script setup name="Pagination" lang="ts">
 import { scrollTo } from '@/utils/scroll-to';
 import { propTypes } from '@/utils/propTypes';
 
@@ -28,10 +22,7 @@ const props = defineProps({
   total: propTypes.number,
   page: propTypes.number.def(1),
   limit: propTypes.number.def(20),
-  pageSizes: {
-    type: Array,
-    default: () => [10, 20, 30, 50]
-  },
+  pageSizes: { type: Array<number>, default: () => [10, 20, 30, 50] },
   // 移动端页码按钮的数量端默认值5
   pagerCount: propTypes.number.def(document.body.clientWidth < 992 ? 5 : 7),
   layout: propTypes.string.def('total, sizes, prev, pager, next, jumper'),
@@ -77,7 +68,6 @@ function handleCurrentChange(val: number) {
 
 <style lang="scss" scoped>
 .pagination-container {
-  padding: 32px 16px;
   .el-pagination {
     float: v-bind(float);
   }

src/components/Process/MessageType.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-dialog v-model="visible" :title="props.title" width="50%" draggable :before-close="cancel" center :close-on-click-modal="false">
+    <el-form v-loading="loading" ref="ruleFormRef" :model="form" :rules="rules" label-width="120px">
+      <el-form-item label="消息提醒" prop="messageType">
+        <el-checkbox-group v-model="form.messageType">
+          <el-checkbox value="1" name="type" disabled>站内信</el-checkbox>
+          <el-checkbox value="2" name="type">邮件</el-checkbox>
+          <el-checkbox value="3" name="type">短信</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="消息内容" prop="message">
+        <el-input v-model="form.message" type="textarea" resize="none" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer" style="float: right; padding-bottom: 20px">
+        <el-button :disabled="buttonDisabled" type="primary" @click="submit(ruleFormRef)">确认</el-button>
+        <el-button :disabled="buttonDisabled" @click="cancel">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ComponentInternalInstance } from 'vue';
+import { ElForm, FormInstance } from 'element-plus';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const emits = defineEmits(['submitCallback', 'cancelCallback']);
+const props = defineProps({
+  title: {
+    type: String,
+    default: '提示'
+  }
+});
+const ruleFormRef = ref<FormInstance>();
+//遮罩层
+const loading = ref(true);
+const visible = ref(false);
+const buttonDisabled = ref(true);
+const form = ref<Record<string, any>>({
+  message: undefined,
+  messageType: ['1']
+});
+const rules = reactive<Record<string, any>>({
+  messageType: [
+    {
+      required: true,
+      message: '请选择消息提醒',
+      trigger: 'change'
+    }
+  ],
+  message: [
+    {
+      required: true,
+      message: '请输入消息内容',
+      trigger: 'blur'
+    }
+  ]
+});
+//确认
+//打开弹窗
+const open = async () => {
+  reset();
+  visible.value = true;
+  loading.value = false;
+  buttonDisabled.value = false;
+};
+//关闭弹窗
+const close = async () => {
+  reset();
+  visible.value = false;
+};
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      emits('submitCallback', form.value);
+    }
+  });
+};
+//取消
+const cancel = async () => {
+  visible.value = false;
+  buttonDisabled.value = false;
+  emits('cancelCallback');
+};
+//重置
+const reset = async () => {
+  form.value.taskIdList = [];
+  form.value.message = '';
+  form.value.messageType = ['1'];
+};
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  open,
+  close
+});
+</script>

src/components/Process/approvalButton.vue

@@ -0,0 +1,57 @@
+<template>
+  <div style="display: flex; justify-content: space-between">
+    <div>
+      <el-button v-if="submitButtonShow" :loading="props.buttonLoading" type="info" @click="submitForm('draft', mode)">暂存</el-button>
+      <el-button v-if="submitButtonShow" :loading="props.buttonLoading" type="primary" @click="submitForm('submit', mode)">提 交</el-button>
+      <el-button v-if="approvalButtonShow" :loading="props.buttonLoading" type="primary" @click="approvalVerifyOpen">审批</el-button>
+      <el-button v-if="props.id && props.status !== 'draft'" type="primary" @click="handleApprovalRecord">流程进度</el-button>
+      <slot />
+    </div>
+    <div>
+      <el-button style="float: right" @click="goBack()">返回</el-button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const props = defineProps({
+  status: propTypes.string.def(''),
+  pageType: propTypes.string.def(''),
+  buttonLoading: propTypes.bool.def(false),
+  id: propTypes.string.def('') || propTypes.number.def(),
+  mode: propTypes.bool.def(false)
+});
+const emits = defineEmits(['submitForm', 'approvalVerifyOpen', 'handleApprovalRecord']);
+//暂存，提交
+const submitForm = async (type, mode) => {
+  emits('submitForm', type, mode);
+};
+//审批
+const approvalVerifyOpen = async () => {
+  emits('approvalVerifyOpen');
+};
+//审批记录
+const handleApprovalRecord = () => {
+  emits('handleApprovalRecord');
+};
+
+//校验提交按钮是否显示
+const submitButtonShow = computed(() => {
+  return (
+    props.pageType === 'add' ||
+    (props.pageType === 'update' && props.status && (props.status === 'draft' || props.status === 'cancel' || props.status === 'back'))
+  );
+});
+
+//校验审批按钮是否显示
+const approvalButtonShow = computed(() => {
+  return props.pageType === 'approval' && props.status && props.status === 'waiting';
+});
+
+//返回
+const goBack = () => {
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.go(-1);
+};
+</script>

src/components/Process/approvalRecord.vue

@@ -2,39 +2,49 @@
   <div class="container">
     <el-dialog v-model="visible" draggable title="审批记录" :width="props.width" :height="props.height" :close-on-click-modal="false">
       <el-tabs v-model="tabActiveName" class="demo-tabs">
-        <el-tab-pane label="流程图" name="bpmn">
-          <BpmnView ref="bpmnViewRef"></BpmnView>
+        <el-tab-pane v-loading="loading" label="流程图" name="image" style="height: 68vh">
+          <flowChart :ins-id="insId" v-if="insId" />
         </el-tab-pane>
         <el-tab-pane v-loading="loading" label="审批信息" name="info">
           <div>
             <el-table :data="historyList" style="width: 100%" border fit>
               <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
-              <el-table-column prop="name" label="任务名称" sortable align="center"></el-table-column>
-              <el-table-column prop="nickName" :show-overflow-tooltip="true" label="办理人" sortable align="center">
+              <el-table-column prop="nodeName" label="任务名称" sortable align="center"></el-table-column>
+              <el-table-column prop="approveName" :show-overflow-tooltip="true" label="办理人" sortable align="center">
                 <template #default="scope">
-                  <el-tag type="success">{{ scope.row.nickName || '无' }}</el-tag>
+                  <template v-if="scope.row.approveName">
+                    <el-tag v-for="(item, index) in scope.row.approveName.split(',')" :key="index" type="success">{{ item }}</el-tag>
+                  </template>
+                  <template v-else> <el-tag type="success">无</el-tag></template>
                 </template>
               </el-table-column>
-              <el-table-column label="状态" sortable align="center">
+              <el-table-column prop="flowStatus" label="状态" width="80" sortable align="center">
                 <template #default="scope">
-                  <el-tag type="success">{{ scope.row.statusName }}</el-tag>
+                  <dict-tag :options="wf_task_status" :value="scope.row.flowStatus"></dict-tag>
                 </template>
               </el-table-column>
-              <el-table-column prop="comment" label="审批意见" sortable align="center"></el-table-column>
-              <el-table-column prop="startTime" label="开始时间" sortable align="center"></el-table-column>
-              <el-table-column prop="endTime" label="结束时间" sortable align="center"></el-table-column>
-              <el-table-column prop="runDuration" label="运行时长" sortable align="center"></el-table-column>
-              <el-table-column prop="attachmentList" label="附件" sortable align="center">
+              <el-table-column prop="message" label="审批意见" :show-overflow-tooltip="true" sortable align="center"></el-table-column>
+              <el-table-column prop="createTime" label="开始时间" width="160" :show-overflow-tooltip="true" sortable align="center"></el-table-column>
+              <el-table-column prop="updateTime" label="结束时间" width="160" :show-overflow-tooltip="true" sortable align="center"></el-table-column>
+              <el-table-column
+                prop="runDuration"
+                label="运行时长"
+                width="140"
+                :show-overflow-tooltip="true"
+                sortable
+                align="center"
+              ></el-table-column>
+              <el-table-column prop="attachmentList" width="120" label="附件" align="center">
                 <template #default="scope">
                   <el-popover v-if="scope.row.attachmentList && scope.row.attachmentList.length > 0" placement="right" :width="310" trigger="click">
                     <template #reference>
-                      <el-button style="margin-right: 16px">附件</el-button>
+                      <el-button type="primary" style="margin-right: 16px">附件</el-button>
                     </template>
                     <el-table border :data="scope.row.attachmentList">
-                      <el-table-column prop="name" width="202" :show-overflow-tooltip="true" label="附件名称"></el-table-column>
+                      <el-table-column prop="originalName" width="202" :show-overflow-tooltip="true" label="附件名称"></el-table-column>
                       <el-table-column prop="name" width="80" align="center" :show-overflow-tooltip="true" label="操作">
                         <template #default="tool">
-                          <el-button type="text" @click="handleDownload(tool.row.contentId)">下载</el-button>
+                          <el-button type="text" @click="handleDownload(tool.row.ossId)">下载</el-button>
                         </template>
                       </el-table-column>
                     </el-table>
@@ -48,43 +58,58 @@
     </el-dialog>
   </div>
 </template>
-<script lang="ts" setup>
-import BpmnView from '@/components/BpmnView/index.vue';
-import processApi from '@/api/workflow/processInstance';
+<script setup lang="ts">
+import { flowHisTaskList } from '@/api/workflow/instance';
 import { propTypes } from '@/utils/propTypes';
-
+import { listByIds } from '@/api/system/oss';
+import FlowChart from '@/components/Process/flowChart.vue';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
+const { wf_task_status } = toRefs<any>(proxy?.useDict('wf_task_status'));
 const props = defineProps({
-  width: propTypes.string.def('70%'),
+  width: propTypes.string.def('80%'),
   height: propTypes.string.def('100%')
 });
 const loading = ref(false);
 const visible = ref(false);
 const historyList = ref<Array<any>>([]);
-const tabActiveName = ref('bpmn');
-
-const bpmnViewRef = ref<BpmnView>();
+const tabActiveName = ref('image');
+const insId = ref(null);
 
 //初始化查询审批记录
-const init = async (businessKey: string | number) => {
+const init = async (businessId: string | number) => {
   visible.value = true;
   loading.value = true;
-  tabActiveName.value = 'bpmn';
+  tabActiveName.value = 'image';
   historyList.value = [];
-  processApi.getHistoryRecord(businessKey).then((resp) => {
-    historyList.value = resp.data;
-    loading.value = false;
-  });
-  await nextTick(() => {
-    bpmnViewRef.value.init(businessKey);
+  flowHisTaskList(businessId).then((resp) => {
+    if (resp.data) {
+      historyList.value = resp.data.list;
+      insId.value = resp.data.instanceId;
+      if (historyList.value.length > 0) {
+        historyList.value.forEach((item) => {
+          if (item.ext) {
+            getIds(item.ext).then((res) => {
+              item.attachmentList = res.data;
+            });
+          } else {
+            item.attachmentList = [];
+          }
+        });
+      }
+      loading.value = false;
+    }
   });
 };
+const getIds = async (ids: string | number) => {
+  const res = await listByIds(ids);
+  return res;
+};
 
 /** 下载按钮操作 */
 const handleDownload = (ossId: string) => {
   proxy?.$download.oss(ossId);
 };
+
 /**
  * 对外暴露子组件方法
  */
@@ -93,20 +118,6 @@ defineExpose({
 });
 </script>
 <style lang="scss" scoped>
-.triangle {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  border-radius: 6px;
-}
-
-.triangle::after {
-  content: ' ';
-  position: absolute;
-  top: 8em;
-  right: 215px;
-  border: 15px solid;
-  border-color: transparent #fff transparent transparent;
-}
-
 .container {
   :deep(.el-dialog .el-dialog__body) {
     max-height: calc(100vh - 170px) !important;

src/components/Process/flowChart.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <div style="height: 68vh" class="iframe-wrapper">
+      <iframe :src="iframeUrl" style="width: 100%; height: 100%" frameborder="0" scrolling="no" class="custom-iframe" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getToken } from '@/utils/auth';
+
+// Props 定义方式变化
+const props = defineProps({
+  insId: {
+    type: [String, Number],
+    default: null
+  }
+});
+
+const iframeUrl = ref('');
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+
+onMounted(async () => {
+  const url = baseUrl + `/warm-flow-ui/index.html?id=${props.insId}&type=FlowChart&t=${Date.now()}`;
+  iframeUrl.value = url + '&Authorization=Bearer ' + getToken() + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID;
+});
+</script>
+<style scoped>
+.iframe-wrapper {
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.custom-iframe {
+  width: 100%;
+  border: none;
+  background: transparent;
+}
+</style>

src/components/Process/flowChartImg.vue

@@ -0,0 +1,154 @@
+<template>
+  <div
+    ref="imageWrapperRef"
+    class="image-wrapper"
+    @wheel="handleMouseWheel"
+    @mousedown="handleMouseDown"
+    @mousemove="handleMouseMove"
+    @mouseup="handleMouseUp"
+    @mouseleave="handleMouseLeave"
+    @dblclick="resetTransform"
+    :style="transformStyle"
+  >
+    <el-card class="box-card">
+      <el-image :src="props.imgUrl" class="scalable-image" />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Props 定义方式变化
+const props = defineProps({
+  imgUrl: {
+    type: String,
+    default: () => ''
+  }
+});
+
+const imageWrapperRef = ref<HTMLElement | null>(null);
+const scale = ref(1); // 初始缩放比例
+const maxScale = 3; // 最大缩放比例
+const minScale = 0.5; // 最小缩放比例
+
+let isDragging = false;
+let startX = 0;
+let startY = 0;
+let currentTranslateX = 0;
+let currentTranslateY = 0;
+
+const handleMouseWheel = (event: WheelEvent) => {
+  event.preventDefault();
+  let newScale = scale.value - event.deltaY / 1000;
+  newScale = Math.max(minScale, Math.min(newScale, maxScale));
+  if (newScale !== scale.value) {
+    scale.value = newScale;
+    resetDragPosition(); // 重置拖拽位置，使图片居中
+  }
+};
+
+const handleMouseDown = (event: MouseEvent) => {
+  if (scale.value > 1) {
+    event.preventDefault(); // 阻止默认行为，防止拖拽
+    isDragging = true;
+    startX = event.clientX;
+    startY = event.clientY;
+  }
+};
+
+const handleMouseMove = (event: MouseEvent) => {
+  if (!isDragging || !imageWrapperRef.value) return;
+
+  const deltaX = event.clientX - startX;
+  const deltaY = event.clientY - startY;
+  startX = event.clientX;
+  startY = event.clientY;
+
+  currentTranslateX += deltaX;
+  currentTranslateY += deltaY;
+
+  // 边界检测，防止图片被拖出容器
+  const bounds = getBounds();
+  if (currentTranslateX > bounds.maxTranslateX) {
+    currentTranslateX = bounds.maxTranslateX;
+  } else if (currentTranslateX < bounds.minTranslateX) {
+    currentTranslateX = bounds.minTranslateX;
+  }
+
+  if (currentTranslateY > bounds.maxTranslateY) {
+    currentTranslateY = bounds.maxTranslateY;
+  } else if (currentTranslateY < bounds.minTranslateY) {
+    currentTranslateY = bounds.minTranslateY;
+  }
+
+  applyTransform();
+};
+
+const handleMouseUp = () => {
+  isDragging = false;
+};
+
+const handleMouseLeave = () => {
+  isDragging = false;
+};
+
+const resetTransform = () => {
+  scale.value = 1;
+  currentTranslateX = 0;
+  currentTranslateY = 0;
+  applyTransform();
+};
+
+const resetDragPosition = () => {
+  currentTranslateX = 0;
+  currentTranslateY = 0;
+  applyTransform();
+};
+
+const applyTransform = () => {
+  if (imageWrapperRef.value) {
+    imageWrapperRef.value.style.transform = `translate(${currentTranslateX}px, ${currentTranslateY}px) scale(${scale.value})`;
+  }
+};
+
+const getBounds = () => {
+  if (!imageWrapperRef.value) return { minTranslateX: 0, maxTranslateX: 0, minTranslateY: 0, maxTranslateY: 0 };
+
+  const imgRect = imageWrapperRef.value.getBoundingClientRect();
+  const containerRect = imageWrapperRef.value.parentElement?.getBoundingClientRect() ?? imgRect;
+
+  const minTranslateX = (containerRect.width - imgRect.width * scale.value) / 2;
+  const maxTranslateX = -(containerRect.width - imgRect.width * scale.value) / 2;
+  const minTranslateY = (containerRect.height - imgRect.height * scale.value) / 2;
+  const maxTranslateY = -(containerRect.height - imgRect.height * scale.value) / 2;
+
+  return { minTranslateX, maxTranslateX, minTranslateY, maxTranslateY };
+};
+
+const transformStyle = computed(() => ({
+  transition: isDragging ? 'none' : 'transform 0.2s ease'
+}));
+</script>
+
+<style scoped>
+.image-wrapper {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none; /* 禁用文本选择 */
+  cursor: grab; /* 设置初始鼠标指针为可拖动 */
+}
+
+.image-wrapper:active {
+  cursor: grabbing; /* 当正在拖动时改变鼠标指针 */
+}
+
+.scalable-image {
+  object-fit: contain;
+  width: 100%;
+  padding: 15px;
+}
+</style>

src/components/Process/multiInstanceUser.vue

@@ -1,378 +0,0 @@
-<template>
-  <el-dialog v-model="visible" draggable :title="title" :width="width" :height="height" append-to-body :close-on-click-modal="false">
-    <div v-if="multiInstance === 'add'" class="p-2">
-      <el-row :gutter="20">
-        <!-- 部门树 -->
-        <el-col :lg="4" :xs="24" style="">
-          <el-card shadow="hover">
-            <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
-            <el-tree
-              ref="deptTreeRef"
-              class="mt-2"
-              node-key="id"
-              :data="deptOptions"
-              :props="{ label: 'label', children: 'children' }"
-              :expand-on-click-node="false"
-              :filter-node-method="filterNode"
-              highlight-current
-              default-expand-all
-              @node-click="handleNodeClick"
-            ></el-tree>
-          </el-card>
-        </el-col>
-        <el-col :lg="20" :xs="24">
-          <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-            <div v-show="showSearch" class="search">
-              <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-                <el-form-item label="用户名称" prop="userName">
-                  <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
-                </el-form-item>
-                <el-form-item label="手机号码" prop="phonenumber">
-                  <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" />
-                </el-form-item>
-                <el-form-item>
-                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-                </el-form-item>
-              </el-form>
-            </div>
-          </transition>
-
-          <el-card shadow="hover">
-            <template #header>
-              <el-row :gutter="10">
-                <right-toolbar v-model:showSearch="showSearch" :search="true" @query-table="handleQuery"></right-toolbar>
-              </el-row>
-            </template>
-
-            <el-table ref="multipleTableRef" v-loading="loading" :data="userList" row-key="userId" @selection-change="handleSelectionChange">
-              <el-table-column type="selection" width="50" align="center" />
-              <el-table-column key="userId" label="用户编号" align="center" prop="userId" />
-              <el-table-column key="userName" label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
-              <el-table-column key="nickName" label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
-              <el-table-column key="phonenumber" label="手机号码" align="center" prop="phonenumber" width="120" />
-              <el-table-column label="创建时间" align="center" prop="createTime" width="160">
-                <template #default="scope">
-                  <span>{{ scope.row.createTime }}</span>
-                </template>
-              </el-table-column>
-            </el-table>
-
-            <pagination
-              v-show="total > 0"
-              v-model:page="queryParams.pageNum"
-              v-model:limit="queryParams.pageSize"
-              :total="total"
-              @pagination="handleQuery"
-            />
-          </el-card>
-          <el-card shadow="hover">
-            <el-tag v-for="(user, index) in chooseUserList" :key="user.userId" style="margin: 2px" closable @close="handleCloseTag(user, index)"
-              >{{ user.userName }}
-            </el-tag>
-          </el-card>
-        </el-col>
-      </el-row>
-    </div>
-    <div v-if="multiInstance === 'delete'" class="p-2">
-      <el-table v-loading="loading" :data="taskList" @selection-change="handleTaskSelection">
-        <el-table-column type="selection" width="55" />
-        <el-table-column prop="name" label="任务名称" />
-        <el-table-column prop="assigneeName" label="办理人" />
-      </el-table>
-    </div>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        <el-button @click="visible = false">取 消</el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script setup name="User" lang="ts">
-import { deptTreeSelect, listUser, optionSelect } from '@/api/system/user';
-import {
-  addMultiInstanceExecution,
-  deleteMultiInstanceExecution,
-  getTaskUserIdsByAddMultiInstance,
-  getListByDeleteMultiInstance
-} from '@/api/workflow/task';
-import { UserVO } from '@/api/system/user/types';
-import { DeptVO } from '@/api/system/dept/types';
-import { ComponentInternalInstance } from 'vue';
-import { ElTree, ElTable } from 'element-plus';
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const props = defineProps({
-  // 宽
-  width: {
-    type: String,
-    default: '70%'
-  },
-  // 高
-  height: {
-    type: String,
-    default: '100%'
-  },
-  // 标题
-  title: {
-    type: String,
-    default: '加签人员'
-  },
-  //是否多选
-  multiple: {
-    type: Boolean,
-    default: true
-  },
-  //回显用户id
-  userIdList: {
-    type: Array,
-    default: []
-  }
-});
-const deptTreeRef = ref(ElTree);
-const multipleTableRef = ref(ElTable);
-
-const userList = ref<UserVO[]>();
-const taskList = ref<Array<any>[]>();
-const loading = ref(true);
-const showSearch = ref(true);
-const selectionTask = ref<Array<any>[]>();
-const visible = ref(false);
-const total = ref(0);
-const deptName = ref('');
-const deptOptions = ref<DeptVO[]>([]);
-const chooseUserList = ref(ref<UserVO[]>());
-const userIds = ref<Array<number | string>>([]);
-//加签或者减签
-const multiInstance = ref('');
-const queryParams = ref<Record<string, any>>({
-  pageNum: 1,
-  pageSize: 10,
-  userName: '',
-  nickName: '',
-  taskId: ''
-});
-/** 查询用户列表 */
-const getAddMultiInstanceList = async (taskId: string, userIdList: Array<number | string>) => {
-  deptOptions.value = [];
-  getTreeSelect();
-  multiInstance.value = 'add';
-  userIds.value = userIdList;
-  visible.value = true;
-  queryParams.value.taskId = taskId;
-  loading.value = true;
-  const res1 = await getTaskUserIdsByAddMultiInstance(taskId);
-  queryParams.value.excludeUserIds = res1.data;
-  const res = await listUser(queryParams.value);
-  loading.value = false;
-  userList.value = res.rows;
-  total.value = res.total;
-  if (userList.value && userIds.value.length > 0) {
-    const data = await optionSelect(userIds.value);
-    if (data.data && data.data.length > 0) {
-      chooseUserList.value = data.data;
-      data.data.forEach((user: UserVO) => {
-        multipleTableRef.value!.toggleRowSelection(
-          userList.value.find((item) => {
-            return item.userId == user.userId;
-          }),
-          true
-        );
-      });
-    }
-  }
-};
-
-const getList = async () => {
-  loading.value = true;
-  const res1 = await getTaskUserIdsByAddMultiInstance(queryParams.value.taskId);
-  queryParams.value.excludeUserIds = res1.data;
-  const res = await listUser(queryParams.value);
-  loading.value = false;
-  userList.value = res.rows;
-  total.value = res.total;
-  if (userList.value && userIds.value.length > 0) {
-    const data = await optionSelect(userIds.value);
-    if (data.data && data.data.length > 0) {
-      chooseUserList.value = data.data;
-      data.data.forEach((user: UserVO) => {
-        multipleTableRef.value!.toggleRowSelection(
-          userList.value.find((item) => {
-            return item.userId == user.userId;
-          }),
-          true
-        );
-      });
-    }
-  }
-};
-
-const getDeleteMultiInstanceList = async (taskId: string) => {
-  deptOptions.value = [];
-  loading.value = true;
-  queryParams.value.taskId = taskId;
-  multiInstance.value = 'delete';
-  visible.value = true;
-  const res = await getListByDeleteMultiInstance(taskId);
-  taskList.value = res.data;
-  loading.value = false;
-};
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.value.pageNum = 1;
-  getAddMultiInstanceList(queryParams.value.taskId, userIds.value);
-};
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryParams.value.pageNum = 1;
-  queryParams.value.deptId = undefined;
-  queryParams.value.userName = undefined;
-  queryParams.value.nickName = undefined;
-  deptTreeRef.value.setCurrentKey(null);
-  handleQuery();
-};
-
-/** 选择条数  */
-const handleSelectionChange = (selection: UserVO[]) => {
-  if (props.multiple) {
-    chooseUserList.value = selection.filter((element, index, self) => {
-      return self.findIndex((x) => x.userId === element.userId) === index;
-    });
-    selection.forEach((u) => {
-      if (chooseUserList.value && !chooseUserList.value.includes(u)) {
-        multipleTableRef.value!.toggleRowSelection(u, undefined);
-      }
-    });
-    userIds.value = chooseUserList.value.map((item) => {
-      return item.userId;
-    });
-  } else {
-    chooseUserList.value = selection;
-    if (selection.length > 1) {
-      let delRow = selection.shift();
-      multipleTableRef.value!.toggleRowSelection(delRow, undefined);
-    }
-    if (selection.length === 0) {
-      chooseUserList.value = [];
-    }
-  }
-};
-/** 选择条数  */
-const handleTaskSelection = (selection: any) => {
-  selectionTask.value = selection;
-};
-
-/** 查询部门下拉树结构 */
-const getTreeSelect = async () => {
-  const res = await deptTreeSelect();
-  deptOptions.value = res.data;
-};
-
-/** 通过条件过滤节点  */
-const filterNode = (value: string, data: any) => {
-  if (!value) return true;
-  return data.label.indexOf(value) !== -1;
-};
-/** 根据名称筛选部门树 */
-watchEffect(
-  () => {
-    if (visible.value && deptOptions.value && deptOptions.value.length > 0) {
-      deptTreeRef.value.filter(deptName.value);
-    }
-  },
-  {
-    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
-  }
-);
-/** 节点单击事件 */
-const handleNodeClick = (data: DeptVO) => {
-  queryParams.value.deptId = data.id;
-  getList();
-};
-//删除tag
-const handleCloseTag = (user: UserVO, index: any) => {
-  if (multipleTableRef.value.selection && multipleTableRef.value.selection.length > 0) {
-    multipleTableRef.value.selection.forEach((u: UserVO, i: number) => {
-      if (user.userId === u.userId) {
-        multipleTableRef.value.selection.splice(i, 1);
-      }
-    });
-  }
-  if (chooseUserList.value && chooseUserList.value.length > 0) {
-    chooseUserList.value.splice(index, 1);
-  }
-  multipleTableRef.value.toggleRowSelection(user, undefined);
-
-  if (userIds.value && userIds.value.length > 0) {
-    userIds.value.forEach((userId, i) => {
-      if (userId === user.userId) {
-        userIds.value.splice(i, 1);
-      }
-    });
-  }
-};
-const submitFileForm = async () => {
-  if (multiInstance.value === 'add') {
-    if (chooseUserList.value && chooseUserList.value.length > 0) {
-      loading.value = true;
-      let userIds = chooseUserList.value.map((item) => {
-        return item.userId;
-      });
-      let nickNames = chooseUserList.value.map((item) => {
-        return item.nickName;
-      });
-      let params = {
-        taskId: queryParams.value.taskId,
-        assignees: userIds,
-        assigneeNames: nickNames
-      };
-      await addMultiInstanceExecution(params);
-      emits('submitCallback');
-      loading.value = false;
-      proxy?.$modal.msgSuccess('操作成功');
-      visible.value = false;
-    }
-  } else {
-    if (selectionTask.value && selectionTask.value.length > 0) {
-      loading.value = true;
-      let taskIds = selectionTask.value.map((item: any) => {
-        return item.id;
-      });
-      let executionIds = selectionTask.value.map((item: any) => {
-        return item.executionId;
-      });
-      let assigneeIds = selectionTask.value.map((item: any) => {
-        return item.assignee;
-      });
-      let assigneeNames = selectionTask.value.map((item: any) => {
-        return item.assigneeName;
-      });
-      let params = {
-        taskId: queryParams.value.taskId,
-        taskIds: taskIds,
-        executionIds: executionIds,
-        assigneeIds: assigneeIds,
-        assigneeNames: assigneeNames
-      };
-      await deleteMultiInstanceExecution(params);
-      emits('submitCallback');
-      loading.value = false;
-      proxy?.$modal.msgSuccess('操作成功');
-      visible.value = false;
-    }
-  }
-};
-//事件
-const emits = defineEmits(['submitCallback']);
-
-/**
- * 对外暴露子组件方法
- */
-defineExpose({
-  getAddMultiInstanceList,
-  getDeleteMultiInstanceList
-});
-</script>

src/components/Process/processMeddle.vue

@@ -0,0 +1,211 @@
+<template>
+  <el-dialog v-model="visible" draggable title="流程干预" :width="props.width" :height="props.height" :close-on-click-modal="false">
+    <el-descriptions v-loading="loading" class="margin-top" :title="`${task.flowName}(${task.flowCode})`" :column="2" border>
+      <el-descriptions-item label="任务名称">{{ task.nodeName }}</el-descriptions-item>
+      <el-descriptions-item label="节点编码">{{ task.nodeCode }}</el-descriptions-item>
+      <el-descriptions-item label="开始时间">{{ task.createTime }}</el-descriptions-item>
+      <el-descriptions-item label="流程实例ID">{{ task.instanceId }}</el-descriptions-item>
+      <el-descriptions-item label="版本号">{{ task.version }}.0</el-descriptions-item>
+      <el-descriptions-item label="业务ID">{{ task.businessId }}</el-descriptions-item>
+    </el-descriptions>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button v-if="task.flowStatus === 'waiting'" :disabled="buttonDisabled" type="primary" @click="openTransferTask"> 转办 </el-button>
+        <el-button
+          v-if="task.flowStatus === 'waiting' && Number(task.nodeRatio) > 0"
+          :disabled="buttonDisabled"
+          type="primary"
+          @click="openMultiInstanceUser"
+        >
+          加签
+        </el-button>
+        <el-button
+          v-if="task.flowStatus === 'waiting' && Number(task.nodeRatio) > 0"
+          :disabled="buttonDisabled"
+          type="primary"
+          @click="handleTaskUser"
+        >
+          减签
+        </el-button>
+        <el-button v-if="task.flowStatus === 'waiting'" :disabled="buttonDisabled" type="danger" @click="handleTerminationTask"> 终止 </el-button>
+      </span>
+    </template>
+    <!-- 转办 -->
+    <UserSelect ref="transferTaskRef" :multiple="false" @confirm-call-back="handleTransferTask"></UserSelect>
+    <!-- 加签组件 -->
+    <UserSelect ref="multiInstanceUserRef" :multiple="true" @confirm-call-back="addMultiInstanceUser"></UserSelect>
+    <el-dialog v-model="deleteSignatureVisible" draggable title="减签人员" width="700px" height="400px" append-to-body :close-on-click-modal="false"
+      ><div>
+        <el-table :data="deleteUserList" border>
+          <el-table-column prop="nodeName" label="任务名称" />
+          <el-table-column prop="nickName" label="办理人" />
+          <el-table-column label="操作" align="center" width="160">
+            <template #default="scope">
+              <el-button type="danger" size="small" icon="Delete" @click="deleteMultiInstanceUser(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-dialog>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+import { FlowTaskVO, TaskOperationBo } from '@/api/workflow/task/types';
+import UserSelect from '@/components/UserSelect';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+import { getTask, taskOperation, currentTaskAllUser, terminationTask } from '@/api/workflow/task';
+const props = defineProps({
+  width: propTypes.string.def('50%'),
+  height: propTypes.string.def('100%')
+});
+const emits = defineEmits(['submitCallback']);
+const transferTaskRef = ref<InstanceType<typeof UserSelect>>();
+const multiInstanceUserRef = ref<InstanceType<typeof UserSelect>>();
+//遮罩层
+const loading = ref(true);
+//按钮
+const buttonDisabled = ref(true);
+const visible = ref(false);
+//减签弹窗
+const deleteSignatureVisible = ref(false);
+//可减签的人员
+const deleteUserList = ref<any>([]);
+//任务
+const task = ref<FlowTaskVO>({
+  id: undefined,
+  createTime: undefined,
+  updateTime: undefined,
+  tenantId: undefined,
+  definitionId: undefined,
+  instanceId: undefined,
+  flowName: undefined,
+  businessId: undefined,
+  nodeCode: undefined,
+  nodeName: undefined,
+  flowCode: undefined,
+  flowStatus: undefined,
+  formCustom: undefined,
+  formPath: undefined,
+  nodeType: undefined,
+  nodeRatio: undefined,
+  version: undefined,
+  applyNode: undefined,
+  buttonList: []
+});
+
+const open = (taskId: string) => {
+  visible.value = true;
+  getTask(taskId).then((response) => {
+    loading.value = false;
+    buttonDisabled.value = false;
+    task.value = response.data;
+  });
+};
+
+//打开转办
+const openTransferTask = () => {
+  transferTaskRef.value.open();
+};
+//转办
+const handleTransferTask = async (data) => {
+  if (data && data.length > 0) {
+    const taskOperationBo = reactive<TaskOperationBo>({
+      userId: data[0].userId,
+      taskId: task.value.id,
+      message: ''
+    });
+    await proxy?.$modal.confirm('是否确认提交？');
+    loading.value = true;
+    buttonDisabled.value = true;
+    await taskOperation(taskOperationBo, 'transferTask').finally(() => {
+      loading.value = false;
+      buttonDisabled.value = false;
+    });
+    visible.value = false;
+    emits('submitCallback');
+    proxy?.$modal.msgSuccess('操作成功');
+  } else {
+    proxy?.$modal.msgWarning('请选择用户！');
+  }
+};
+//加签
+const openMultiInstanceUser = async () => {
+  multiInstanceUserRef.value.open();
+};
+//加签
+const addMultiInstanceUser = async (data) => {
+  if (data && data.length > 0) {
+    const taskOperationBo = reactive<TaskOperationBo>({
+      userIds: data.map((e) => e.userId),
+      taskId: task.value.id,
+      message: ''
+    });
+    await proxy?.$modal.confirm('是否确认提交？');
+    loading.value = true;
+    buttonDisabled.value = true;
+    await taskOperation(taskOperationBo, 'addSignature').finally(() => {
+      loading.value = false;
+      buttonDisabled.value = false;
+    });
+    visible.value = false;
+    emits('submitCallback');
+    proxy?.$modal.msgSuccess('操作成功');
+  } else {
+    proxy?.$modal.msgWarning('请选择用户！');
+  }
+};
+//减签
+const deleteMultiInstanceUser = async (row) => {
+  await proxy?.$modal.confirm('是否确认提交？');
+  loading.value = true;
+  buttonDisabled.value = true;
+  const taskOperationBo = reactive<TaskOperationBo>({
+    userIds: [row.userId],
+    taskId: task.value.id,
+    message: ''
+  });
+  await taskOperation(taskOperationBo, 'reductionSignature').finally(() => {
+    loading.value = false;
+    buttonDisabled.value = false;
+  });
+  visible.value = false;
+  emits('submitCallback');
+  proxy?.$modal.msgSuccess('操作成功');
+};
+//获取办理人
+const handleTaskUser = async () => {
+  const data = await currentTaskAllUser(task.value.id);
+  deleteUserList.value = data.data;
+  if (deleteUserList.value && deleteUserList.value.length > 0) {
+    deleteUserList.value.forEach((e) => {
+      e.nodeName = task.value.nodeName;
+    });
+  }
+  deleteSignatureVisible.value = true;
+};
+
+//终止任务
+const handleTerminationTask = async () => {
+  const params = {
+    taskId: task.value.id,
+    comment: ''
+  };
+  await proxy?.$modal.confirm('是否确认终止？');
+  loading.value = true;
+  buttonDisabled.value = true;
+  await terminationTask(params).finally(() => {
+    loading.value = false;
+    buttonDisabled.value = false;
+  });
+  visible.value = false;
+  emits('submitCallback');
+  proxy?.$modal.msgSuccess('操作成功');
+};
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  open
+});
+</script>

src/components/Process/submitVerify.vue

@@ -3,47 +3,71 @@
     <el-form v-loading="loading" :model="form" label-width="120px">
       <el-form-item label="消息提醒">
         <el-checkbox-group v-model="form.messageType">
-          <el-checkbox label="1" name="type" disabled>站内信</el-checkbox>
-          <el-checkbox label="2" name="type">邮件</el-checkbox>
-          <el-checkbox label="3" name="type">短信</el-checkbox>
+          <el-checkbox value="1" name="type" disabled>站内信</el-checkbox>
+          <el-checkbox value="2" name="type">邮件</el-checkbox>
+          <el-checkbox value="3" name="type">短信</el-checkbox>
         </el-checkbox-group>
       </el-form-item>
-      <el-form-item v-if="task.businessStatus === 'waiting'" label="附件">
-        <fileUpload v-model="form.fileId" :file-type="['doc', 'xls', 'ppt', 'txt', 'pdf', 'xlsx', 'docx', 'zip']" :file-size="'20'" />
+      <el-form-item label="附件" v-if="buttonObj.file">
+        <fileUpload v-model="form.fileId" :file-type="['png', 'jpg', 'jpeg', 'doc', 'docx', 'xlsx', 'xls', 'ppt', 'txt', 'pdf']" :file-size="20" />
       </el-form-item>
-      <el-form-item label="抄送">
+      <el-form-item label="抄送" v-if="buttonObj.copy">
         <el-button type="primary" icon="Plus" circle @click="openUserSelectCopy" />
         <el-tag v-for="user in selectCopyUserList" :key="user.userId" closable style="margin: 2px" @close="handleCopyCloseTag(user)">
           {{ user.userName }}
         </el-tag>
       </el-form-item>
-      <el-form-item v-if="task.businessStatus === 'waiting'" label="审批意见">
+      <el-form-item v-if="buttonObj.pop && nestNodeList && nestNodeList.length > 0" label="下一步审批人" prop="assigneeMap">
+        <div v-for="(item, index) in nestNodeList" :key="index" style="margin-bottom: 5px; width: 500px">
+          <span>【{{ item.nodeName }}】：</span>
+          <el-input v-if="false" v-model="form.assigneeMap[item.nodeCode]" />
+          <el-input placeholder="请选择审批人" readonly v-model="nickName[item.nodeCode]">
+            <template v-slot:append>
+              <el-button @click="choosePeople(item)" icon="search">选择</el-button>
+            </template>
+          </el-input>
+        </div>
+      </el-form-item>
+      <el-form-item v-if="task.flowStatus === 'waiting'" label="审批意见">
         <el-input v-model="form.message" type="textarea" resize="none" />
       </el-form-item>
     </el-form>
     <template #footer>
       <span class="dialog-footer">
         <el-button :disabled="buttonDisabled" type="primary" @click="handleCompleteTask"> 提交 </el-button>
-        <el-button v-if="task.businessStatus === 'waiting'" :disabled="buttonDisabled" type="primary" @click="openDelegateTask"> 委托 </el-button>
-        <el-button v-if="task.businessStatus === 'waiting'" :disabled="buttonDisabled" type="primary" @click="openTransferTask"> 转办 </el-button>
+        <el-button v-if="task.flowStatus === 'waiting' && buttonObj.trust" :disabled="buttonDisabled" type="primary" @click="openDelegateTask">
+          委托
+        </el-button>
+        <el-button v-if="task.flowStatus === 'waiting' && buttonObj.transfer" :disabled="buttonDisabled" type="primary" @click="openTransferTask">
+          转办
+        </el-button>
         <el-button
-          v-if="task.businessStatus === 'waiting' && task.multiInstance"
+          v-if="task.flowStatus === 'waiting' && Number(task.nodeRatio) > 0 && buttonObj.addSign"
           :disabled="buttonDisabled"
           type="primary"
-          @click="addMultiInstanceUser"
+          @click="openMultiInstanceUser"
         >
           加签
         </el-button>
         <el-button
-          v-if="task.businessStatus === 'waiting' && task.multiInstance"
+          v-if="task.flowStatus === 'waiting' && Number(task.nodeRatio) > 0 && buttonObj.subSign"
           :disabled="buttonDisabled"
           type="primary"
-          @click="deleteMultiInstanceUser"
+          @click="handleTaskUser"
         >
           减签
         </el-button>
-        <el-button v-if="task.businessStatus === 'waiting'" :disabled="buttonDisabled" type="danger" @click="handleTerminationTask"> 终止 </el-button>
-        <el-button v-if="task.businessStatus === 'waiting'" :disabled="buttonDisabled" type="danger" @click="handleBackProcessOpen"> 退回 </el-button>
+        <el-button
+          v-if="task.flowStatus === 'waiting' && buttonObj.termination"
+          :disabled="buttonDisabled"
+          type="danger"
+          @click="handleTerminationTask"
+        >
+          终止
+        </el-button>
+        <el-button v-if="task.flowStatus === 'waiting' && buttonObj.back" :disabled="buttonDisabled" type="danger" @click="handleBackProcessOpen">
+          退回
+        </el-button>
         <el-button :disabled="buttonDisabled" @click="cancel">取消</el-button>
       </span>
     </template>
@@ -54,14 +78,16 @@
     <!-- 委托 -->
     <UserSelect ref="delegateTaskRef" :multiple="false" @confirm-call-back="handleDelegateTask"></UserSelect>
     <!-- 加签组件 -->
-    <multiInstanceUser ref="multiInstanceUserRef" :title="title" @submit-callback="closeDialog" />
+    <UserSelect ref="multiInstanceUserRef" :multiple="true" @confirm-call-back="addMultiInstanceUser"></UserSelect>
+    <!-- 弹窗选人 -->
+    <UserSelect ref="porUserRef" :data="form.assigneeMap[nodeCode]" :multiple="true" :userIds="popUserIds" @confirm-call-back="handlePopUser"></UserSelect>
 
     <!-- 驳回开始 -->
     <el-dialog v-model="backVisible" draggable title="驳回" width="40%" :close-on-click-modal="false">
-      <el-form v-if="task.businessStatus === 'waiting'" v-loading="backLoading" :model="backForm" label-width="120px">
+      <el-form v-if="task.flowStatus === 'waiting'" v-loading="backLoading" :model="backForm" label-width="120px">
         <el-form-item label="驳回节点">
-          <el-select v-model="backForm.targetActivityId" clearable placeholder="请选择" style="width: 300px">
-            <el-option v-for="item in taskNodeList" :key="item.nodeId" :label="item.nodeName" :value="item.nodeId" />
+          <el-select v-model="backForm.nodeCode" clearable placeholder="请选择" style="width: 300px">
+            <el-option v-for="item in taskNodeList" :key="item.nodeCode" :label="item.nodeName" :value="item.nodeCode" />
           </el-select>
         </el-form-item>
         <el-form-item label="消息提醒">
@@ -71,6 +97,13 @@
             <el-checkbox label="3" name="type">短信</el-checkbox>
           </el-checkbox-group>
         </el-form-item>
+        <el-form-item v-if="task.flowStatus === 'waiting'" label="附件">
+          <fileUpload
+            v-model="backForm.fileId"
+            :file-type="['png', 'jpg', 'jpeg', 'doc', 'docx', 'xlsx', 'xls', 'ppt', 'txt', 'pdf']"
+            :file-size="20"
+          />
+        </el-form-item>
         <el-form-item label="审批意见">
           <el-input v-model="backForm.message" type="textarea" resize="none" />
         </el-form-item>
@@ -83,30 +116,51 @@
       </template>
     </el-dialog>
     <!-- 驳回结束 -->
+    <el-dialog v-model="deleteSignatureVisible" draggable title="减签人员" width="700px" height="400px" append-to-body :close-on-click-modal="false">
+      <div>
+        <el-table :data="deleteUserList" border>
+          <el-table-column prop="nodeName" label="任务名称" />
+          <el-table-column prop="nickName" label="办理人" />
+          <el-table-column label="操作" align="center" width="160">
+            <template #default="scope">
+              <el-button type="danger" size="small" icon="Delete" @click="deleteMultiInstanceUser(scope.row)">删除 </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-dialog>
   </el-dialog>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { ref } from 'vue';
 import { ComponentInternalInstance } from 'vue';
 import { ElForm } from 'element-plus';
-import { completeTask, backProcess, getTaskById, transferTask, terminationTask, getTaskNodeList, delegateTask } from '@/api/workflow/task';
+import {
+  completeTask,
+  backProcess,
+  getTask,
+  taskOperation,
+  terminationTask,
+  getBackTaskNode,
+  currentTaskAllUser,
+  getNextNodeList
+} from '@/api/workflow/task';
 import UserSelect from '@/components/UserSelect';
-import MultiInstanceUser from '@/components/Process/multiInstanceUser.vue';
+
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-import { UserVO } from '@/api/system/user/types';
-import { TaskVO } from '@/api/workflow/task/types';
+import { FlowCopyVo, FlowTaskVO, TaskOperationBo } from '@/api/workflow/task/types';
+
 const userSelectCopyRef = ref<InstanceType<typeof UserSelect>>();
 const transferTaskRef = ref<InstanceType<typeof UserSelect>>();
 const delegateTaskRef = ref<InstanceType<typeof UserSelect>>();
-
-//加签组件
-const multiInstanceUserRef = ref<InstanceType<typeof MultiInstanceUser>>();
+const multiInstanceUserRef = ref<InstanceType<typeof UserSelect>>();
+const porUserRef = ref<InstanceType<typeof UserSelect>>();
 
 const props = defineProps({
   taskVariables: {
     type: Object as () => Record<string, any>,
-    default: {}
+    default: () => {}
   }
 });
 //遮罩层
@@ -116,70 +170,84 @@ const buttonDisabled = ref(true);
 //任务id
 const taskId = ref<string>('');
 //抄送人
-const selectCopyUserList = ref<UserVO[]>([]);
+const selectCopyUserList = ref<FlowCopyVo[]>([]);
 //抄送人id
 const selectCopyUserIds = ref<string>(undefined);
-// 驳回是否显示
+//自定义节点变量
+const varNodeList = ref<Map<string, string>>(undefined);
+//可减签的人员
+const deleteUserList = ref<any>([]);
+//弹窗可选择的人员id
+const popUserIds = ref<any>([]);
+//驳回是否显示
 const backVisible = ref(false);
 const backLoading = ref(true);
 const backButtonDisabled = ref(true);
 // 可驳回得任务节点
 const taskNodeList = ref([]);
-//任务
-const task = ref<TaskVO>({
-  id: undefined,
-  name: undefined,
-  description: undefined,
-  priority: undefined,
-  owner: undefined,
-  assignee: undefined,
-  assigneeName: undefined,
-  processInstanceId: undefined,
-  executionId: undefined,
-  taskDefinitionId: undefined,
-  processDefinitionId: undefined,
-  endTime: undefined,
-  taskDefinitionKey: undefined,
-  dueDate: undefined,
-  category: undefined,
-  parentTaskId: undefined,
-  tenantId: undefined,
-  claimTime: undefined,
-  businessStatus: undefined,
-  businessStatusName: undefined,
-  processDefinitionName: undefined,
-  processDefinitionKey: undefined,
-  participantVo: undefined,
-  multiInstance: undefined,
-  businessKey: undefined,
-  wfNodeConfigVo: undefined
+const nickName = ref({});
+//节点编码
+const nodeCode = ref<string>('');
+const buttonObj = ref<any>({
+  pop: false,
+  trust: false,
+  transfer: false,
+  addSign: false,
+  subSign: false,
+  termination: false,
+  back: false
+});
+//下一节点列表
+const nestNodeList = ref([]);
+//任务
+const task = ref<FlowTaskVO>({
+  id: undefined,
+  createTime: undefined,
+  updateTime: undefined,
+  tenantId: undefined,
+  definitionId: undefined,
+  instanceId: undefined,
+  flowName: undefined,
+  businessId: undefined,
+  nodeCode: undefined,
+  nodeName: undefined,
+  flowCode: undefined,
+  flowStatus: undefined,
+  formCustom: undefined,
+  formPath: undefined,
+  nodeType: undefined,
+  nodeRatio: undefined,
+  applyNode: false,
+  buttonList: [],
+  copyList: [],
+  varList: undefined,
+  businessCode: undefined,
+  businessTitle: undefined
 });
-//加签 减签标题
-const title = ref('');
 const dialog = reactive<DialogOption>({
   visible: false,
   title: '提示'
 });
-
+//减签弹窗
+const deleteSignatureVisible = ref(false);
 const form = ref<Record<string, any>>({
   taskId: undefined,
   message: undefined,
+  assigneeMap: {},
   variables: {},
   messageType: ['1'],
-  wfCopyList: []
+  flowCopyList: []
 });
 const backForm = ref<Record<string, any>>({
   taskId: undefined,
-  targetActivityId: undefined,
+  nodeCode: undefined,
   message: undefined,
   variables: {},
   messageType: ['1']
 });
-const closeDialog = () => {
-  dialog.visible = false;
-};
+
 //打开弹窗
-const openDialog = (id?: string) => {
+const openDialog = async (id?: string) => {
   selectCopyUserIds.value = undefined;
   selectCopyUserList.value = [];
   form.value.fileId = undefined;
@@ -188,13 +256,27 @@ const openDialog = (id?: string) => {
   dialog.visible = true;
   loading.value = true;
   buttonDisabled.value = true;
-  nextTick(() => {
-    getTaskById(taskId.value).then((response) => {
-      task.value = response.data;
-      loading.value = false;
-      buttonDisabled.value = false;
-    });
+  const response = await getTask(taskId.value);
+  task.value = response.data;
+  buttonObj.value = {};
+  task.value.buttonList?.forEach((e) => {
+    buttonObj.value[e.code] = e.show;
   });
+  selectCopyUserList.value = task.value.copyList;
+  selectCopyUserIds.value = task.value.copyList.map((e) => e.userId).join(',');
+  varNodeList.value = task.value.varList;
+  console.log('varNodeList', varNodeList.value)
+  buttonDisabled.value = false;
+  try {
+    const data = {
+      taskId: taskId.value,
+      variables: props.taskVariables
+    };
+    const nextData = await getNextNodeList(data);
+    nestNodeList.value = nextData.data;
+  } finally {
+    loading.value = false;
+  }
 };
 
 onMounted(() => {});
@@ -203,17 +285,36 @@ const emits = defineEmits(['submitCallback', 'cancelCallback']);
 /** 办理流程 */
 const handleCompleteTask = async () => {
   form.value.taskId = taskId.value;
-  form.value.taskVariables = props.taskVariables;
-  if (selectCopyUserList.value && selectCopyUserList.value.length > 0) {
-    let wfCopyList = [];
-    selectCopyUserList.value.forEach((e) => {
-      let copyUser = {
-        userId: e.userId,
-        userName: e.nickName
-      };
-      wfCopyList.push(copyUser);
+  form.value.variables = props.taskVariables;
+  let verify = false;
+  if (buttonObj.value.pop && nestNodeList.value && nestNodeList.value.length > 0) {
+    nestNodeList.value.forEach((e) => {
+      if (
+        Object.keys(form.value.assigneeMap).length === 0 ||
+        form.value.assigneeMap[e.nodeCode] === '' ||
+        form.value.assigneeMap[e.nodeCode] === null ||
+        form.value.assigneeMap[e.nodeCode] === undefined
+      ) {
+        verify = true;
+      }
     });
-    form.value.wfCopyList = wfCopyList;
+    if (verify) {
+      proxy?.$modal.msgWarning('请选择审批人！');
+      return false;
+    }
+  } else {
+    form.value.assigneeMap = {};
+  }
+  if (selectCopyUserList.value && selectCopyUserList.value.length > 0) {
+    const flowCopyList = [];
+    selectCopyUserList.value.forEach((e) => {
+      const copyUser = {
+        userId: e.userId,
+        userName: e.userName
+      };
+      flowCopyList.push(copyUser);
+    });
+    form.value.flowCopyList = flowCopyList;
   }
   await proxy?.$modal.confirm('是否确认提交？');
   loading.value = true;
@@ -236,11 +337,11 @@ const handleBackProcessOpen = async () => {
   backVisible.value = true;
   backLoading.value = true;
   backButtonDisabled.value = true;
-  let data = await getTaskNodeList(task.value.processInstanceId);
+  const data = await getBackTaskNode(task.value.id, task.value.nodeCode);
   taskNodeList.value = data.data;
   backLoading.value = false;
   backButtonDisabled.value = false;
-  backForm.value.targetActivityId = taskNodeList.value[0].nodeId;
+  backForm.value.nodeCode = taskNodeList.value[0].nodeCode;
 };
 /** 驳回流程 */
 const handleBackProcess = async () => {
@@ -249,7 +350,10 @@ const handleBackProcess = async () => {
   loading.value = true;
   backLoading.value = true;
   backButtonDisabled.value = true;
-  await backProcess(backForm.value).finally(() => (loading.value = false));
+  await backProcess(backForm.value).finally(() => {
+    loading.value = false;
+    buttonDisabled.value = false;
+  });
   dialog.visible = false;
   backLoading.value = false;
   backButtonDisabled.value = false;
@@ -260,6 +364,8 @@ const handleBackProcess = async () => {
 const cancel = async () => {
   dialog.visible = false;
   buttonDisabled.value = false;
+  nickName.value = {};
+  form.value.assigneeMap = {};
   emits('cancelCallback');
 };
 //打开抄送人员
@@ -267,14 +373,14 @@ const openUserSelectCopy = () => {
   userSelectCopyRef.value.open();
 };
 //确认抄送人员
-const userSelectCopyCallBack = (data: UserVO[]) => {
+const userSelectCopyCallBack = (data: FlowCopyVo[]) => {
   if (data && data.length > 0) {
     selectCopyUserList.value = data;
     selectCopyUserIds.value = selectCopyUserList.value.map((item) => item.userId).join(',');
   }
 };
 //删除抄送人员
-const handleCopyCloseTag = (user: UserVO) => {
+const handleCopyCloseTag = (user: FlowCopyVo) => {
   const userId = user.userId;
   // 使用split删除用户
   const index = selectCopyUserList.value.findIndex((item) => item.userId === userId);
@@ -282,18 +388,48 @@ const handleCopyCloseTag = (user: UserVO) => {
   selectCopyUserIds.value = selectCopyUserList.value.map((item) => item.userId).join(',');
 };
 //加签
-const addMultiInstanceUser = () => {
-  if (multiInstanceUserRef.value) {
-    title.value = '加签人员';
-    multiInstanceUserRef.value.getAddMultiInstanceList(taskId.value, []);
+const openMultiInstanceUser = async () => {
+  multiInstanceUserRef.value.open();
+};
+//加签
+const addMultiInstanceUser = async (data) => {
+  if (data && data.length > 0) {
+    const taskOperationBo = reactive<TaskOperationBo>({
+      userIds: data.map((e) => e.userId),
+      taskId: taskId.value,
+      message: form.value.message
+    });
+    await proxy?.$modal.confirm('是否确认提交？');
+    loading.value = true;
+    buttonDisabled.value = true;
+    await taskOperation(taskOperationBo, 'addSignature').finally(() => {
+      loading.value = false;
+      buttonDisabled.value = false;
+    });
+    dialog.visible = false;
+    emits('submitCallback');
+    proxy?.$modal.msgSuccess('操作成功');
+  } else {
+    proxy?.$modal.msgWarning('请选择用户！');
   }
 };
 //减签
-const deleteMultiInstanceUser = () => {
-  if (multiInstanceUserRef.value) {
-    title.value = '减签人员';
-    multiInstanceUserRef.value.getDeleteMultiInstanceList(taskId.value);
-  }
+const deleteMultiInstanceUser = async (row) => {
+  await proxy?.$modal.confirm('是否确认提交？');
+  loading.value = true;
+  buttonDisabled.value = true;
+  const taskOperationBo = reactive<TaskOperationBo>({
+    userIds: [row.userId],
+    taskId: taskId.value,
+    message: form.value.message
+  });
+  await taskOperation(taskOperationBo, 'reductionSignature').finally(() => {
+    loading.value = false;
+    buttonDisabled.value = false;
+  });
+  dialog.visible = false;
+  emits('submitCallback');
+  proxy?.$modal.msgSuccess('操作成功');
 };
 //打开转办
 const openTransferTask = () => {
@@ -302,15 +438,18 @@ const openTransferTask = () => {
 //转办
 const handleTransferTask = async (data) => {
   if (data && data.length > 0) {
-    let params = {
-      taskId: taskId.value,
+    const taskOperationBo = reactive<TaskOperationBo>({
       userId: data[0].userId,
-      comment: form.value.message
-    };
+      taskId: taskId.value,
+      message: form.value.message
+    });
     await proxy?.$modal.confirm('是否确认提交？');
     loading.value = true;
     buttonDisabled.value = true;
-    await transferTask(params).finally(() => (loading.value = false));
+    await taskOperation(taskOperationBo, 'transferTask').finally(() => {
+      loading.value = false;
+      buttonDisabled.value = false;
+    });
     dialog.visible = false;
     emits('submitCallback');
     proxy?.$modal.msgSuccess('操作成功');
@@ -326,15 +465,18 @@ const openDelegateTask = () => {
 //委托
 const handleDelegateTask = async (data) => {
   if (data && data.length > 0) {
-    let params = {
-      taskId: taskId.value,
+    const taskOperationBo = reactive<TaskOperationBo>({
       userId: data[0].userId,
-      nickName: data[0].nickName
-    };
+      taskId: taskId.value,
+      message: form.value.message
+    });
     await proxy?.$modal.confirm('是否确认提交？');
     loading.value = true;
     buttonDisabled.value = true;
-    await delegateTask(params).finally(() => (loading.value = false));
+    await taskOperation(taskOperationBo, 'delegateTask').finally(() => {
+      loading.value = false;
+      buttonDisabled.value = false;
+    });
     dialog.visible = false;
     emits('submitCallback');
     proxy?.$modal.msgSuccess('操作成功');
@@ -343,19 +485,52 @@ const handleDelegateTask = async (data) => {
   }
 };
 //终止任务
-const handleTerminationTask = async (data) => {
-  let params = {
+const handleTerminationTask = async () => {
+  const params = {
     taskId: taskId.value,
     comment: form.value.message
   };
   await proxy?.$modal.confirm('是否确认终止？');
   loading.value = true;
   buttonDisabled.value = true;
-  await terminationTask(params).finally(() => (loading.value = false));
+  await terminationTask(params).finally(() => {
+    loading.value = false;
+    buttonDisabled.value = false;
+  });
   dialog.visible = false;
   emits('submitCallback');
   proxy?.$modal.msgSuccess('操作成功');
 };
+const handleTaskUser = async () => {
+  const data = await currentTaskAllUser(taskId.value);
+  deleteUserList.value = data.data;
+  if (deleteUserList.value && deleteUserList.value.length > 0) {
+    deleteUserList.value.forEach((e) => {
+      e.nodeName = task.value.nodeName;
+    });
+  }
+  deleteSignatureVisible.value = true;
+};
+// 选择人员
+const choosePeople = async (data) => {
+  if (!data.permissionFlag) {
+    proxy?.$modal.msgError('没有可选择的人员，请联系管理员！');
+  }
+  popUserIds.value = data.permissionFlag;
+  nodeCode.value = data.nodeCode;
+  porUserRef.value.open();
+};
+//确认选择
+const handlePopUser = async (userList) => {
+  const userIds = userList.map((item) => {
+    return item.userId;
+  });
+  const nickNames = userList.map((item) => {
+    return item.nickName;
+  });
+  form.value.assigneeMap[nodeCode.value] = userIds.join(',');
+  nickName.value[nodeCode.value] = nickNames.join(',');
+};
 
 /**
  * 对外暴露子组件方法