Merge branch 'master' of https://gitee.com/yudaocode/yudao-ui-admin-vue3 into dev

# Conflicts: # package.json

Merge branch 'master' of https://gitee.com/yudaocode/yudao-ui-admin-vue3 into dev
# Conflicts: # package.json
23150fcf · YunaiV · 1f14bf4b · b4677c45 · 23150fcf · 23150fcf
Commit 23150fcf authored Mar 28, 2024 by YunaiV
111 changed files
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -68,6 +68,8 @@ module.exports = defineConfig({
    ],
    'vue/multi-word-component-names': 'off',
    'vue/no-v-html': 'off',
-    'prettier/prettier': 'off' // 芋艿：默认关闭 prettier 的 ESLint 校验，因为我们使用的是 IDE 的 Prettier 插件
+    'prettier/prettier': 'off', // 芋艿：默认关闭 prettier 的 ESLint 校验，因为我们使用的是 IDE 的 Prettier 插件
+    '@unocss/order': 'off', // 芋艿：禁用 unocss 【css】顺序的提示，因为暂时不需要这么严格，警告也有点繁琐
+    '@unocss/order-attributify': 'off' // 芋艿：禁用 unocss 【属性】顺序的提示，因为暂时不需要这么严格，警告也有点繁琐
  }
 })
--- a/.image/common/bpm-feature.png
+++ b/.image/common/bpm-feature.png
--- a/.image/common/infra-feature.png
+++ b/.image/common/infra-feature.png
--- a/.image/common/system-feature.png
+++ b/.image/common/system-feature.png
--- a/README.md
+++ b/README.md
@@ -117,6 +117,8 @@
 | 🚀  | 应用管理  | 管理 SSO 单点登录的应用，支持多种 OAuth2 授权方式 |
 | 🚀  | 地区管理  | 展示省份、城市、区镇等城市信息，支持 IP 对应城市      |
+![功能图](/.image/common/system-feature.png)
 ### 工作流程
 |     | 功能    | 描述                                     |
@@ -129,6 +131,8 @@
 | 🚀  | 已办任务  | 查看自己【已】审批的工作任务，未来会支持回退操作               |
 | 🚀  | OA 请假 | 作为业务自定义接入工作流的使用示例，只需创建请求对应的工作流程，即可进行审批 |
+![功能图](/.image/common/bpm-feature.png)
 ### 支付系统
 |     | 功能   | 描述                        |
@@ -164,6 +168,8 @@ ps：核心功能已经实现，正在对接微信小程序中...
 | 🚀  | 日志服务     | 轻量级日志中心，查看远程服务器的日志                           |
 | 🚀  | 单元测试     | 基于 JUnit + Mockito 实现单元测试，保证功能的正确性、代码的质量等    |
+![功能图](/.image/common/infra-feature.png)
 ### 数据报表
 |     | 功能    | 描述                 |

--- a/package.json
+++ b/package.json
 {
  "name": "yudao-ui-admin-vue3",
-  "version": "2.0.0-snapshot",
+  "version": "2.0.1-snapshot",
  "description": "基于vue3、vite4、element-plus、typesScript",
  "author": "xingyu",
  "private": false,
@@ -30,12 +30,12 @@
    "@form-create/element-ui": "^3.1.24",
    "@iconify/iconify": "^3.1.1",
    "@videojs-player/vue": "^1.0.0",
-    "@vueuse/core": "^10.6.1",
+    "@vueuse/core": "^10.9.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.10",
    "@zxcvbn-ts/core": "^3.0.4",
    "animate.css": "^4.1.1",
-    "axios": "^1.6.1",
+    "axios": "^1.6.7",
    "benz-amr-recorder": "^1.1.5",
    "bpmn-js-token-simulation": "^0.10.0",
    "camunda-bpmn-moddle": "^7.0.1",
@@ -44,9 +44,9 @@
    "dayjs": "^1.11.10",
    "diagram-js": "^12.8.0",
    "driver.js": "^1.3.1",
-    "echarts": "^5.4.3",
+    "echarts": "^5.5.0",
    "echarts-wordcloud": "^2.1.0",
-    "element-plus": "2.4.2",
+    "element-plus": "2.5.3",
    "fast-xml-parser": "^4.3.2",
    "highlight.js": "^11.9.0",
    "jsencrypt": "^3.3.2",
@@ -55,77 +55,78 @@
    "mitt": "^3.0.1",
    "nprogress": "^0.2.0",
    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.0",
    "qrcode": "^1.5.3",
    "qs": "^6.11.2",
    "steady-xml": "^0.1.0",
    "url": "^0.11.3",
    "video.js": "^7.21.5",
-    "vue": "^3.3.8",
+    "vue": "3.4.20",
    "vue-dompurify-html": "^4.1.4",
-    "vue-i18n": "^9.6.5",
+    "vue-i18n": "9.9.1",
-    "vue-router": "^4.2.5",
+    "vue-router": "^4.3.0",
    "vue-types": "^5.1.1",
    "vuedraggable": "^4.1.0",
    "web-storage-cache": "^1.1.1",
    "xml-js": "^1.6.11"
  },
  "devDependencies": {
-    "@commitlint/cli": "^18.4.1",
+    "@commitlint/cli": "^19.0.1",
-    "@commitlint/config-conventional": "^18.4.0",
+    "@commitlint/config-conventional": "^19.0.0",
-    "@iconify/json": "^2.2.142",
+    "@iconify/json": "^2.2.187",
-    "@intlify/unplugin-vue-i18n": "^1.5.0",
+    "@intlify/unplugin-vue-i18n": "^2.0.0",
    "@purge-icons/generated": "^0.9.0",
-    "@types/lodash-es": "^4.17.11",
+    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.9.0",
+    "@types/node": "^20.11.21",
    "@types/nprogress": "^0.2.3",
    "@types/qrcode": "^1.5.5",
-    "@types/qs": "^6.9.10",
+    "@types/qs": "^6.9.12",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^6.11.0",
+    "@typescript-eslint/parser": "^7.1.0",
-    "@unocss/transformer-variant-group": "^0.57.4",
+    "@unocss/transformer-variant-group": "^0.58.5",
    "@unocss/eslint-config": "^0.57.4",
-    "@vitejs/plugin-legacy": "^4.1.1",
+    "@vitejs/plugin-legacy": "^5.3.1",
-    "@vitejs/plugin-vue": "^4.4.1",
+    "@vitejs/plugin-vue": "^5.0.4",
-    "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
    "bpmn-js": "8.9.0",
    "bpmn-js-properties-panel": "0.46.0",
    "consola": "^3.2.3",
-    "eslint": "^8.53.0",
+    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
-    "eslint-define-config": "^1.24.1",
+    "eslint-define-config": "^2.1.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.18.1",
+    "eslint-plugin-vue": "^9.22.0",
-    "lint-staged": "^15.1.0",
+    "lint-staged": "^15.2.2",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.35",
-    "postcss-html": "^1.5.0",
+    "postcss-html": "^1.6.0",
    "postcss-scss": "^4.0.9",
-    "prettier": "^3.1.0",
+    "prettier": "^3.2.5",
    "prettier-eslint": "^16.3.0",
    "rimraf": "^5.0.5",
-    "rollup": "^4.4.1",
+    "rollup": "^4.12.0",
    "sass": "^1.69.5",
-    "stylelint": "^15.11.0",
+    "stylelint": "^16.2.1",
    "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recommended": "^13.0.0",
+    "stylelint-config-recommended": "^14.0.0",
-    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard": "^36.0.0",
-    "stylelint-order": "^6.0.3",
+    "stylelint-order": "^6.0.4",
-    "terser": "^5.24.0",
+    "terser": "^5.28.1",
-    "typescript": "5.2.2",
+    "typescript": "5.3.3",
-    "unocss": "^0.57.4",
+    "unocss": "^0.58.5",
    "unplugin-auto-import": "^0.16.7",
    "unplugin-element-plus": "^0.8.0",
    "unplugin-vue-components": "^0.25.2",
-    "vite": "4.5.0",
+    "vite": "5.1.4",
    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-ejs": "^1.6.4",
+    "vite-plugin-ejs": "^1.7.0",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-progress": "^0.0.7",
-    "vite-plugin-purge-icons": "^0.9.2",
+    "vite-plugin-purge-icons": "^0.10.0",
    "vite-plugin-svg-icons": "^2.0.1",
    "vite-plugin-top-level-await": "^1.3.1",
    "vue-eslint-parser": "^9.3.2",
-    "vue-tsc": "^1.8.22"
+    "vue-tsc": "^1.8.27"
  },
  "license": "MIT",
  "repository": {

--- a/src/api/bpm/category/index.ts
+++ b/src/api/bpm/category/index.ts
+import request from '@/config/axios'
+// BPM 流程分类 VO
+export interface CategoryVO {
+  id: number // 分类编号
+  name: string // 分类名
+  code: string // 分类标志
+  status: number // 分类状态
+  sort: number // 分类排序
+}
+// BPM 流程分类 API
+export const CategoryApi = {
+  // 查询流程分类分页
+  getCategoryPage: async (params: any) => {
+    return await request.get({ url: `/bpm/category/page`, params })
+  },
+  // 查询流程分类列表
+  getCategorySimpleList: async () => {
+    return await request.get({ url: `/bpm/category/simple-list` })
+  },
+  // 查询流程分类详情
+  getCategory: async (id: number) => {
+    return await request.get({ url: `/bpm/category/get?id=` + id })
+  },
+  // 新增流程分类
+  createCategory: async (data: CategoryVO) => {
+    return await request.post({ url: `/bpm/category/create`, data })
+  },
+  // 修改流程分类
+  updateCategory: async (data: CategoryVO) => {
+    return await request.put({ url: `/bpm/category/update`, data })
+  },
+  // 删除流程分类
+  deleteCategory: async (id: number) => {
+    return await request.delete({ url: `/bpm/category/delete?id=` + id })
+  }
+}
--- a/src/api/bpm/definition/index.ts
+++ b/src/api/bpm/definition/index.ts
 import request from '@/config/axios'
-export const getProcessDefinitionBpmnXML = async (id: number) => {
+export const getProcessDefinition = async (id: number, key: string) => {
  return await request.get({
-    url: '/bpm/process-definition/get-bpmn-xml?id=' + id
+    url: '/bpm/process-definition/get',
+    params: { id, key }
  })
 }

--- a/src/api/bpm/form/index.ts
+++ b/src/api/bpm/form/index.ts
@@ -49,8 +49,8 @@ export const getFormPage = async (params) => {
 }
 // 获得动态表单的精简列表
-export const getSimpleFormList = async () => {
+export const getFormSimpleList = async () => {
  return await request.get({
-    url: '/bpm/form/list-all-simple'
+    url: '/bpm/form/simple-list'
  })
 }
--- a/src/api/bpm/leave/index.ts
+++ b/src/api/bpm/leave/index.ts
@@ -2,7 +2,7 @@ import request from '@/config/axios'
 export type LeaveVO = {
  id: number
-  result: number
+  status: number
  type: number
  reason: string
  processInstanceId: string

--- a/src/api/bpm/processExpression/index.ts
+++ b/src/api/bpm/processExpression/index.ts
+import request from '@/config/axios'
+// BPM 流程表达式 VO
+export interface ProcessExpressionVO {
+  id: number // 编号
+  name: string // 表达式名字
+  status: number // 表达式状态
+  expression: string // 表达式
+}
+// BPM 流程表达式 API
+export const ProcessExpressionApi = {
+  // 查询BPM 流程表达式分页
+  getProcessExpressionPage: async (params: any) => {
+    return await request.get({ url: `/bpm/process-expression/page`, params })
+  },
+  // 查询BPM 流程表达式详情
+  getProcessExpression: async (id: number) => {
+    return await request.get({ url: `/bpm/process-expression/get?id=` + id })
+  },
+  // 新增BPM 流程表达式
+  createProcessExpression: async (data: ProcessExpressionVO) => {
+    return await request.post({ url: `/bpm/process-expression/create`, data })
+  },
+  // 修改BPM 流程表达式
+  updateProcessExpression: async (data: ProcessExpressionVO) => {
+    return await request.put({ url: `/bpm/process-expression/update`, data })
+  },
+  // 删除BPM 流程表达式
+  deleteProcessExpression: async (id: number) => {
+    return await request.delete({ url: `/bpm/process-expression/delete?id=` + id })
+  },
+  // 导出BPM 流程表达式 Excel
+  exportProcessExpression: async (params) => {
+    return await request.download({ url: `/bpm/process-expression/export-excel`, params })
+  }
+}
\ No newline at end of file
--- a/src/api/bpm/processInstance/index.ts
+++ b/src/api/bpm/processInstance/index.ts
@@ -20,51 +20,49 @@ export type ProcessInstanceVO = {
  endTime: string
 }
-export type ProcessInstanceCCVO = {
+export type ProcessInstanceCopyVO = {
-  type: number,
+  type: number
-  taskName: string,
+  taskName: string
-  taskKey: string,
+  taskKey: string
-  processInstanceName: string,
+  processInstanceName: string
-  processInstanceKey: string,
+  processInstanceKey: string
-  startUserId: string,
+  startUserId: string
-  options:string [],
+  options: string[]
  reason: string
 }
-export const getMyProcessInstancePage = async (params) => {
+export const getProcessInstanceMyPage = async (params: any) => {
  return await request.get({ url: '/bpm/process-instance/my-page', params })
 }
+export const getProcessInstanceManagerPage = async (params: any) => {
+  return await request.get({ url: '/bpm/process-instance/manager-page', params })
+}
 export const createProcessInstance = async (data) => {
  return await request.post({ url: '/bpm/process-instance/create', data: data })
 }
-export const cancelProcessInstance = async (id: number, reason: string) => {
+export const cancelProcessInstanceByStartUser = async (id: number, reason: string) => {
  const data = {
    id: id,
    reason: reason
  }
-  return await request.delete({ url: '/bpm/process-instance/cancel', data: data })
+  return await request.delete({ url: '/bpm/process-instance/cancel-by-start-user', data: data })
 }
-export const getProcessInstance = async (id: number) => {
+export const cancelProcessInstanceByAdmin = async (id: number, reason: string) => {
-  return await request.get({ url: '/bpm/process-instance/get?id=' + id })
+  const data = {
+    id: id,
+    reason: reason
+  }
+  return await request.delete({ url: '/bpm/process-instance/cancel-by-admin', data: data })
 }
-/**
+export const getProcessInstance = async (id: string) => {
- * 抄送
+  return await request.get({ url: '/bpm/process-instance/get?id=' + id })
- * @param data 抄送数据
- * @returns 是否抄送成功
- */
-export const createProcessInstanceCC = async (data) => {
-  return await request.post({ url: '/bpm/process-instance/cc/create', data: data })
 }
-/**
+export const getProcessInstanceCopyPage = async (params: any) => {
- * 抄送列表
+  return await request.get({ url: '/bpm/process-instance/copy/page', params })
- * @param params 
+}
- * @returns 
- */
-export const getProcessInstanceCCPage = async (params) => {
-  return await request.get({ url: '/bpm/process-instance/cc/my-page', params })
-}
\ No newline at end of file
--- a/src/api/bpm/processListener/index.ts
+++ b/src/api/bpm/processListener/index.ts
+import request from '@/config/axios'
+// BPM 流程监听器 VO
+export interface ProcessListenerVO {
+  id: number // 编号
+  name: string // 监听器名字
+  type: string // 监听器类型
+  status: number // 监听器状态
+  event: string // 监听事件
+  valueType: string // 监听器值类型
+  value: string // 监听器值
+}
+// BPM 流程监听器 API
+export const ProcessListenerApi = {
+  // 查询流程监听器分页
+  getProcessListenerPage: async (params: any) => {
+    return await request.get({ url: `/bpm/process-listener/page`, params })
+  },
+  // 查询流程监听器详情
+  getProcessListener: async (id: number) => {
+    return await request.get({ url: `/bpm/process-listener/get?id=` + id })
+  },
+  // 新增流程监听器
+  createProcessListener: async (data: ProcessListenerVO) => {
+    return await request.post({ url: `/bpm/process-listener/create`, data })
+  },
+  // 修改流程监听器
+  updateProcessListener: async (data: ProcessListenerVO) => {
+    return await request.put({ url: `/bpm/process-listener/update`, data })
+  },
+  // 删除流程监听器
+  deleteProcessListener: async (id: number) => {
+    return await request.delete({ url: `/bpm/process-listener/delete?id=` + id })
+  }
+}
--- a/src/api/bpm/task/index.ts
+++ b/src/api/bpm/task/index.ts
@@ -4,78 +4,63 @@ export type TaskVO = {
  id: number
 }
-export const getTodoTaskPage = async (params) => {
+export const getTaskTodoPage = async (params: any) => {
  return await request.get({ url: '/bpm/task/todo-page', params })
 }
-export const getDoneTaskPage = async (params) => {
+export const getTaskDonePage = async (params: any) => {
  return await request.get({ url: '/bpm/task/done-page', params })
 }
-export const completeTask = async (data) => {
+export const getTaskManagerPage = async (params: any) => {
-  return await request.put({ url: '/bpm/task/complete', data })
+  return await request.get({ url: '/bpm/task/manager-page', params })
 }
-export const approveTask = async (data) => {
+export const approveTask = async (data: any) => {
  return await request.put({ url: '/bpm/task/approve', data })
 }
-export const rejectTask = async (data) => {
+export const rejectTask = async (data: any) => {
  return await request.put({ url: '/bpm/task/reject', data })
 }
-export const backTask = async (data) => {
-  return await request.put({ url: '/bpm/task/back', data })
-}
-export const updateTaskAssignee = async (data) => {
-  return await request.put({ url: '/bpm/task/update-assignee', data })
-}
-export const getTaskListByProcessInstanceId = async (processInstanceId) => {
+export const getTaskListByProcessInstanceId = async (processInstanceId: string) => {
  return await request.get({
    url: '/bpm/task/list-by-process-instance-id?processInstanceId=' + processInstanceId
  })
 }
-// 导出任务
-export const exportTask = async (params) => {
-  return await request.download({ url: '/bpm/task/export', params })
-}
 // 获取所有可回退的节点
-export const getReturnList = async (params) => {
+export const getTaskListByReturn = async (id: string) => {
-  return await request.get({ url: '/bpm/task/return-list', params })
+  return await request.get({ url: '/bpm/task/list-by-return', params: { id } })
 }
 // 回退
-export const returnTask = async (data) => {
+export const returnTask = async (data: any) => {
  return await request.put({ url: '/bpm/task/return', data })
 }
-/**
+// 委派
- * 委派
+export const delegateTask = async (data: any) => {
- */
-export const delegateTask = async (data) => {
  return await request.put({ url: '/bpm/task/delegate', data })
 }
-/**
+// 转派
- * 加签
+export const transferTask = async (data: any) => {
- */
+  return await request.put({ url: '/bpm/task/transfer', data })
-export const taskAddSign = async (data) => {
-  return await request.put({ url: '/bpm/task/create-sign', data })
 }
-/**
+// 加签
- * 获取减签任务列表
+export const signCreateTask = async (data: any) => {
- */
+  return await request.put({ url: '/bpm/task/create-sign', data })
-export const getChildrenTaskList = async (id: string) => {
-  return await request.get({ url: '/bpm/task/children-list?taskId=' + id })
 }
-/**
+// 减签
- * 减签
+export const signDeleteTask = async (data: any) => {
- */
-export const taskSubSign = async (data) => {
  return await request.delete({ url: '/bpm/task/delete-sign', data })
 }
+// 获取减签任务列表
+export const getChildrenTaskList = async (id: string) => {
+  return await request.get({ url: '/bpm/task/list-by-parent-task-id?parentTaskId=' + id })
+}
--- a/src/api/bpm/taskAssignRule/index.ts
+++ b/src/api/bpm/taskAssignRule/index.ts
-import request from '@/config/axios'
-export type TaskAssignVO = {
-  id: number
-  modelId: string
-  processDefinitionId: string
-  taskDefinitionKey: string
-  taskDefinitionName: string
-  options: string[]
-  type: number
-}
-export const getTaskAssignRuleList = async (params) => {
-  return await request.get({ url: '/bpm/task-assign-rule/list', params })
-}
-export const createTaskAssignRule = async (data: TaskAssignVO) => {
-  return await request.post({
-    url: '/bpm/task-assign-rule/create',
-    data: data
-  })
-}
-export const updateTaskAssignRule = async (data: TaskAssignVO) => {
-  return await request.put({
-    url: '/bpm/task-assign-rule/update',
-    data: data
-  })
-}
--- a/src/api/bpm/userGroup/index.ts
+++ b/src/api/bpm/userGroup/index.ts
@@ -4,7 +4,7 @@ export type UserGroupVO = {
  id: number
  name: string
  description: string
-  memberUserIds: number[]
+  userIds: number[]
  status: number
  remark: string
  createTime: string
@@ -42,6 +42,6 @@ export const getUserGroupPage = async (params) => {
 }
 // 获取用户组精简信息列表
-export const getSimpleUserGroupList = async (): Promise<UserGroupVO[]> => {
+export const getUserGroupSimpleList = async (): Promise<UserGroupVO[]> => {
-  return await request.get({ url: '/bpm/user-group/list-all-simple' })
+  return await request.get({ url: '/bpm/user-group/simple-list' })
 }
--- a/src/assets/imgs/avatar.jpg
+++ b/src/assets/imgs/avatar.jpg
--- a/src/components/ContentWrap/src/ContentWrap.vue
+++ b/src/components/ContentWrap/src/ContentWrap.vue
@@ -25,6 +25,9 @@ defineProps({
          </template>
          <Icon :size="14" class="ml-5px" icon="ep:question-filled" />
        </ElTooltip>
+        <div class="flex flex-grow pl-20px">
+          <slot name="header"></slot>
+        </div>
      </div>
    </template>
    <div>

--- a/src/components/Editor/src/Editor.vue
+++ b/src/components/Editor/src/Editor.vue
@@ -180,12 +180,12 @@ defineExpose({
 </script>
 <template>
-  <div class="z-99 border-1 border-[var(--el-border-color)] border-solid">
+  <div class="border-1 border-solid border-[var(--tags-view-border-color)] z-10">
    <!-- 工具栏 -->
    <Toolbar
      :editor="editorRef"
      :editorId="editorId"
-      class="border-0 b-b-1 border-[var(--el-border-color)] border-solid"
+      class="border-0 b-b-1 border-solid border-[var(--tags-view-border-color)]"
    />
    <!-- 编辑器 -->
    <Editor

--- a/src/components/ImageViewer/index.ts
+++ b/src/components/ImageViewer/index.ts
@@ -12,7 +12,7 @@ export function createImageViewer(options: ImageViewerProps) {
    initialIndex = 0,
    infinite = true,
    hideOnClickModal = false,
-    appendToBody = false,
+    teleported = false,
    zIndex = 2000,
    show = true
  } = options
@@ -23,7 +23,7 @@ export function createImageViewer(options: ImageViewerProps) {
  propsData.initialIndex = initialIndex
  propsData.infinite = infinite
  propsData.hideOnClickModal = hideOnClickModal
-  propsData.appendToBody = appendToBody
+  propsData.teleported = teleported
  propsData.zIndex = zIndex
  propsData.show = show

--- a/src/components/ImageViewer/src/ImageViewer.vue
+++ b/src/components/ImageViewer/src/ImageViewer.vue
@@ -13,7 +13,7 @@ const props = defineProps({
  initialIndex: propTypes.number.def(0),
  infinite: propTypes.bool.def(true),
  hideOnClickModal: propTypes.bool.def(false),
-  appendToBody: propTypes.bool.def(false),
+  teleported: propTypes.bool.def(false),
  show: propTypes.bool.def(false)
 })

--- a/src/components/ImageViewer/src/types.ts
+++ b/src/components/ImageViewer/src/types.ts
@@ -4,6 +4,6 @@ export interface ImageViewerProps {
  initialIndex?: number
  infinite?: boolean
  hideOnClickModal?: boolean
-  appendToBody?: boolean
+  teleported?: boolean
  show?: boolean
 }
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -53,7 +53,7 @@ const props = defineProps({
  }
 })
-const emit = defineEmits(['update:page', 'update:limit', 'pagination', 'pagination'])
+const emit = defineEmits(['update:page', 'update:limit', 'pagination'])
 const currentPage = computed({
  get() {
    return props.page

--- a/src/components/RouterSearch/index.vue
+++ b/src/components/RouterSearch/index.vue
@@ -26,7 +26,7 @@
      placeholder="请输入菜单内容"
      :remote-method="remoteMethod"
      class="overflow-hidden transition-all-600"
-      :class="showTopSearch ? 'w-220px ml2' : 'w-0'"
+      :class="showTopSearch ? '!w-220px ml2' : '!w-0'"
      @change="handleChange"
    >
      <el-option

--- a/src/components/SimpleProcessDesigner/src/addNode.vue
+++ b/src/components/SimpleProcessDesigner/src/addNode.vue
+/* stylelint-disable order/properties-order */
+<template>
+  <div class="add-node-btn-box">
+    <div class="add-node-btn">
+      <el-popover placement="right-start" v-model="visible" width="auto">
+        <div class="add-node-popover-body">
+          <a class="add-node-popover-item approver" @click="addType(1)">
+            <div class="item-wrapper">
+              <span class="iconfont"></span>
+            </div>
+            <p>审批人</p>
+          </a>
+          <a class="add-node-popover-item notifier" @click="addType(2)">
+            <div class="item-wrapper">
+              <span class="iconfont"></span>
+            </div>
+            <p>抄送人</p>
+          </a>
+          <a class="add-node-popover-item condition" @click="addType(4)">
+            <div class="item-wrapper">
+              <span class="iconfont"></span>
+            </div>
+            <p>条件分支</p>
+          </a>
+        </div>
+        <template #reference>
+          <button class="btn" type="button">
+            <span class="iconfont"></span>
+          </button>
+        </template>
+      </el-popover>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+let props = defineProps({
+  childNodeP: {
+    type: Object,
+    default: () => ({})
+  }
+})
+let emits = defineEmits(['update:childNodeP'])
+let visible = ref(false)
+const addType = (type) => {
+  visible.value = false
+  if (type != 4) {
+    var data
+    if (type == 1) {
+      data = {
+        nodeName: '审核人',
+        error: true,
+        type: 1,
+        settype: 1,
+        selectMode: 0,
+        selectRange: 0,
+        directorLevel: 1,
+        examineMode: 1,
+        noHanderAction: 1,
+        examineEndDirectorLevel: 0,
+        childNode: props.childNodeP,
+        nodeUserList: []
+      }
+    } else if (type == 2) {
+      data = {
+        nodeName: '抄送人',
+        type: 2,
+        ccSelfSelectFlag: 1,
+        childNode: props.childNodeP,
+        nodeUserList: []
+      }
+    }
+    emits('update:childNodeP', data)
+  } else {
+    emits('update:childNodeP', {
+      nodeName: '路由',
+      type: 4,
+      childNode: null,
+      conditionNodes: [
+        {
+          nodeName: '条件1',
+          error: true,
+          type: 3,
+          priorityLevel: 1,
+          conditionList: [],
+          nodeUserList: [],
+          childNode: props.childNodeP
+        },
+        {
+          nodeName: '条件2',
+          type: 3,
+          priorityLevel: 2,
+          conditionList: [],
+          nodeUserList: [],
+          childNode: null
+        }
+      ]
+    })
+  }
+}
+</script>
+<style scoped lang="scss">
+.add-node-btn-box {
+  width: 240px;
+  display: inline-flex;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  position: relative;
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    margin: auto;
+    width: 2px;
+    height: 100%;
+    background-color: #cacaca;
+  }
+  .add-node-btn {
+    user-select: none;
+    width: 240px;
+    padding: 20px 0 32px;
+    display: flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    flex-shrink: 0;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    .btn {
+      outline: none;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+      width: 30px;
+      height: 30px;
+      background: #3296fa;
+      border-radius: 50%;
+      position: relative;
+      border: none;
+      line-height: 30px;
+      -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      .iconfont {
+        color: #fff;
+        font-size: 16px;
+      }
+      &:hover {
+        transform: scale(1.3);
+        box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
+      }
+      &:active {
+        transform: none;
+        background: #1e83e9;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+}
+.add-node-popover-body {
+  display: flex;
+  .add-node-popover-item {
+    margin-right: 10px;
+    cursor: pointer;
+    text-align: center;
+    flex: 1;
+    color: #191f25 !important;
+    .item-wrapper {
+      user-select: none;
+      display: inline-block;
+      width: 80px;
+      height: 80px;
+      margin-bottom: 5px;
+      background: #fff;
+      border: 1px solid #e2e2e2;
+      border-radius: 50%;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      .iconfont {
+        font-size: 35px;
+        line-height: 80px;
+      }
+    }
+    &.approver {
+      .item-wrapper {
+        color: #ff943e;
+      }
+    }
+    &.notifier {
+      .item-wrapper {
+        color: #3296fa;
+      }
+    }
+    &.condition {
+      .item-wrapper {
+        color: #15bc83;
+      }
+    }
+    &:hover {
+      .item-wrapper {
+        background: #3296fa;
+        box-shadow: 0 10px 20px 0 rgba(50, 150, 250, 0.4);
+      }
+      .iconfont {
+        color: #fff;
+      }
+    }
+    &:active {
+      .item-wrapper {
+        box-shadow: none;
+        background: #eaeaea;
+      }
+      .iconfont {
+        color: inherit;
+      }
+    }
+  }
+}
+</style>
--- a/src/components/SimpleProcessDesigner/src/nodeWrap.vue
+++ b/src/components/SimpleProcessDesigner/src/nodeWrap.vue
--- a/src/components/SimpleProcessDesigner/src/util.ts
+++ b/src/components/SimpleProcessDesigner/src/util.ts
+/**
+ * todo
+ */
+export const arrToStr = (arr?: [{ name: string }]) => {
+  if (arr) {
+    return arr
+      .map((item) => {
+        return item.name
+      })
+      .toString()
+  }
+}
+export const setApproverStr = (nodeConfig: any) => {
+  if (nodeConfig.settype == 1) {
+    if (nodeConfig.nodeUserList.length == 1) {
+      return nodeConfig.nodeUserList[0].name
+    } else if (nodeConfig.nodeUserList.length > 1) {
+      if (nodeConfig.examineMode == 1) {
+        return arrToStr(nodeConfig.nodeUserList)
+      } else if (nodeConfig.examineMode == 2) {
+        return nodeConfig.nodeUserList.length + '人会签'
+      }
+    }
+  } else if (nodeConfig.settype == 2) {
+    const level =
+      nodeConfig.directorLevel == 1 ? '直接主管' : '第' + nodeConfig.directorLevel + '级主管'
+    if (nodeConfig.examineMode == 1) {
+      return level
+    } else if (nodeConfig.examineMode == 2) {
+      return level + '会签'
+    }
+  } else if (nodeConfig.settype == 4) {
+    if (nodeConfig.selectRange == 1) {
+      return '发起人自选'
+    } else {
+      if (nodeConfig.nodeUserList.length > 0) {
+        if (nodeConfig.selectRange == 2) {
+          return '发起人自选'
+        } else {
+          return '发起人从' + nodeConfig.nodeUserList[0].name + '中自选'
+        }
+      } else {
+        return ''
+      }
+    }
+  } else if (nodeConfig.settype == 5) {
+    return '发起人自己'
+  } else if (nodeConfig.settype == 7) {
+    return '从直接主管到通讯录中级别最高的第' + nodeConfig.examineEndDirectorLevel + '个层级主管'
+  }
+}
+export const copyerStr = (nodeConfig: any) => {
+  if (nodeConfig.nodeUserList.length != 0) {
+    return arrToStr(nodeConfig.nodeUserList)
+  } else {
+    if (nodeConfig.ccSelfSelectFlag == 1) {
+      return '发起人自选'
+    }
+  }
+}
+export const conditionStr = (nodeConfig, index) => {
+  const { conditionList, nodeUserList } = nodeConfig.conditionNodes[index]
+  if (conditionList.length == 0) {
+    return index == nodeConfig.conditionNodes.length - 1 &&
+      nodeConfig.conditionNodes[0].conditionList.length != 0
+      ? '其他条件进入此流程'
+      : '请设置条件'
+  } else {
+    let str = ''
+    for (let i = 0; i < conditionList.length; i++) {
+      const {
+        columnId,
+        columnType,
+        showType,
+        showName,
+        optType,
+        zdy1,
+        opt1,
+        zdy2,
+        opt2,
+        fixedDownBoxValue
+      } = conditionList[i]
+      if (columnId == 0) {
+        if (nodeUserList.length != 0) {
+          str += '发起人属于：'
+          str +=
+            nodeUserList
+              .map((item) => {
+                return item.name
+              })
+              .join('或') + ' 并且 '
+        }
+      }
+      if (columnType == 'String' && showType == '3') {
+        if (zdy1) {
+          str += showName + '属于：' + dealStr(zdy1, JSON.parse(fixedDownBoxValue)) + ' 并且 '
+        }
+      }
+      if (columnType == 'Double') {
+        if (optType != 6 && zdy1) {
+          const optTypeStr = ['', '<', '>', '≤', '=', '≥'][optType]
+          str += `${showName} ${optTypeStr} ${zdy1} 并且 `
+        } else if (optType == 6 && zdy1 && zdy2) {
+          str += `${zdy1} ${opt1} ${showName} ${opt2} ${zdy2} 并且 `
+        }
+      }
+    }
+    return str ? str.substring(0, str.length - 4) : '请设置条件'
+  }
+}
+export const dealStr = (str: string, obj) => {
+  const arr = []
+  const list = str.split(',')
+  for (const elem in obj) {
+    list.map((item) => {
+      if (item == elem) {
+        arr.push(obj[elem].value)
+      }
+    })
+  }
+  return arr.join('或')
+}
+export const removeEle = (arr, elem, key = 'id') => {
+  let includesIndex
+  arr.map((item, index) => {
+    if (item[key] == elem[key]) {
+      includesIndex = index
+    }
+  })
+  arr.splice(includesIndex, 1)
+}
+export const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250']
+export const placeholderList = ['发起人', '审核人', '抄送人']
+export const setTypes = [
+  { value: 1, label: '指定成员' },
+  { value: 2, label: '主管' },
+  { value: 4, label: '发起人自选' },
+  { value: 5, label: '发起人自己' },
+  { value: 7, label: '连续多级主管' }
+]
+export const selectModes = [
+  { value: 1, label: '选一个人' },
+  { value: 2, label: '选多个人' }
+]
+export const selectRanges = [
+  { value: 1, label: '全公司' },
+  { value: 2, label: '指定成员' },
+  { value: 3, label: '指定角色' }
+]
+export const optTypes = [
+  { value: '1', label: '小于' },
+  { value: '2', label: '大于' },
+  { value: '3', label: '小于等于' },
+  { value: '4', label: '等于' },
+  { value: '5', label: '大于等于' },
+  { value: '6', label: '介于两个数之间' }
+]
--- a/src/components/SimpleProcessDesigner/theme/workflow.css
+++ b/src/components/SimpleProcessDesigner/theme/workflow.css
--- a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -436,7 +436,7 @@ const initBpmnModeler = () => {
  // bpmnModeler.createDiagram()
-  console.log(bpmnModeler, 'bpmnModeler111111')
+  // console.log(bpmnModeler, 'bpmnModeler111111')
  emit('init-finished', bpmnModeler)
  initModelListeners()
 }
@@ -666,10 +666,10 @@ const previewProcessJson = () => {
 }
 /* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
 const processSave = async () => {
-  console.log(bpmnModeler, 'bpmnModelerbpmnModelerbpmnModelerbpmnModeler')
+  // console.log(bpmnModeler, 'bpmnModelerbpmnModelerbpmnModelerbpmnModeler')
  const { err, xml } = await bpmnModeler.saveXML()
-  console.log(err, 'errerrerrerrerr')
+  // console.log(err, 'errerrerrerrerr')
-  console.log(xml, 'xmlxmlxmlxmlxml')
+  // console.log(xml, 'xmlxmlxmlxmlxml')
  // 读取异常时抛出异常
  if (err) {
    // this.$modal.msgError('保存模型失败，请重试！')

--- a/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -115,19 +115,19 @@ const highlightDiagram = async () => {
      if (!task) {
        return
      }
-      //进行中的任务已经高亮过了，则不高亮后面的任务了
+      // 进行中的任务已经高亮过了，则不高亮后面的任务了
      if (findProcessTask) {
        removeTaskDefinitionKeyList.push(n.id)
        return
      }
      // 高亮任务
-      canvas.addMarker(n.id, getResultCss(task.result))
+      canvas.addMarker(n.id, getResultCss(task.status))
      //标记是否高亮了进行中任务
-      if (task.result === 1) {
+      if (task.status === 1) {
        findProcessTask = true
      }
      // 如果非通过，就不走后面的线条了
-      if (task.result !== 2) {
+      if (task.status !== 2) {
        return
      }
      // 处理 outgoing 出线
@@ -194,6 +194,7 @@ const highlightDiagram = async () => {
      })
    } else if (n.$type === 'bpmn:StartEvent') {
      // 开始节点
+      canvas.addMarker(n.id, 'highlight')
      n.outgoing?.forEach((nn) => {
        // outgoing 例如说【bpmn:SequenceFlow】连线
        // 获得连线是否有指向目标。如果有，则进行高亮
@@ -205,10 +206,10 @@ const highlightDiagram = async () => {
      })
    } else if (n.$type === 'bpmn:EndEvent') {
      // 结束节点
-      if (!processInstance.value || processInstance.value.result === 1) {
+      if (!processInstance.value || processInstance.value.status === 1) {
        return
      }
-      canvas.addMarker(n.id, getResultCss(processInstance.value.result))
+      canvas.addMarker(n.id, getResultCss(processInstance.value.status))
    } else if (n.$type === 'bpmn:ServiceTask') {
      //服务任务
      if (activity.startTime > 0 && activity.endTime === 0) {
@@ -223,39 +224,49 @@ const highlightDiagram = async () => {
          canvas.addMarker(out.id, getResultCss(2))
        })
      }
+    } else if (n.$type === 'bpmn:SequenceFlow') {
+      let targetActivity = activityList.find((m: any) => m.key === n.targetRef.id)
+      if (targetActivity) {
+        canvas.addMarker(n.id, getActivityHighlightCss(targetActivity))
+      }
    }
  })
  if (!isEmpty(removeTaskDefinitionKeyList)) {
    taskList.value = taskList.value.filter(
-      (item) => !removeTaskDefinitionKeyList.includes(item.definitionKey)
+      (item) => !removeTaskDefinitionKeyList.includes(item.taskDefinitionKey)
    )
  }
 }
 const getActivityHighlightCss = (activity) => {
  return activity.endTime ? 'highlight' : 'highlight-todo'
 }
-const getResultCss = (result) => {
-  if (result === 1) {
+const getResultCss = (status) => {
+  if (status === 1) {
    // 审批中
    return 'highlight-todo'
-  } else if (result === 2) {
+  } else if (status === 2) {
    // 已通过
    return 'highlight'
-  } else if (result === 3) {
+  } else if (status === 3) {
    // 不通过
    return 'highlight-reject'
-  } else if (result === 4) {
+  } else if (status === 4) {
    // 已取消
    return 'highlight-cancel'
-  } else if (result === 5) {
+  } else if (status === 5) {
    // 退回
    return 'highlight-return'
-  } else if (result === 6) {
+  } else if (status === 6) {
    // 委派
-    return 'highlight-return'
+    return 'highlight-todo'
-  } else if (result === 7 || result === 8 || result === 9) {
+  } else if (status === 7) {
-    // 待后加签任务完成/待前加签任务完成/待前置任务完成
+    // 审批通过中
-    return 'highlight-return'
+    return 'highlight-todo'
+  } else if (status === 0) {
+    // 待审批
+    return 'highlight-todo'
  }
  return ''
 }
@@ -296,10 +307,10 @@ const elementHover = (element) => {
  !elementOverlayIds.value && (elementOverlayIds.value = {})
  !overlays.value && (overlays.value = bpmnModeler.get('overlays'))
  // 展示信息
-  console.log(activityLists.value, 'activityLists.value')
+  // console.log(activityLists.value, 'activityLists.value')
-  console.log(element.value, 'element.value')
+  // console.log(element.value, 'element.value')
  const activity = activityLists.value.find((m) => m.key === element.value.id)
-  console.log(activity, 'activityactivityactivityactivity')
+  // console.log(activity, 'activityactivityactivityactivity')
  if (!activity) {
    return
  }
@@ -313,15 +324,14 @@ const elementHover = (element) => {
                  <p>部门：${processInstance.value.startUser.deptName}</p>
                  <p>创建时间：${formatDate(processInstance.value.createTime)}`
    } else if (element.value.type === 'bpmn:UserTask') {
-      // debugger
      let task = taskList.value.find((m) => m.id === activity.taskId) // 找到活动对应的 taskId
      if (!task) {
        return
      }
-      let optionData = getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)
+      let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
      let dataResult = ''
      optionData.forEach((element) => {
-        if (element.value == task.result) {
+        if (element.value == task.status) {
          dataResult = element.label
        }
      })
@@ -333,7 +343,7 @@ const elementHover = (element) => {
      //             <p>部门：${task.assigneeUser.deptName}</p>
      //             <p>结果：${getIntDictOptions(
      //               DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
-      //               task.result
+      //               task.status
      //             )}</p>
      //             <p>创建时间：${formatDate(task.createTime)}</p>`
      if (task.endTime) {
@@ -351,29 +361,30 @@ const elementHover = (element) => {
      }
      console.log(html)
    } else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
-      let optionData = getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)
+      let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
      let dataResult = ''
      optionData.forEach((element) => {
-        if (element.value == processInstance.value.result) {
+        if (element.value == processInstance.value.status) {
          dataResult = element.label
        }
      })
      html = `<p>结果：${dataResult}</p>`
      // html = `<p>结果：${getIntDictOptions(
      //   DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
-      //   processInstance.value.result
+      //   processInstance.value.status
      // )}</p>`
      if (processInstance.value.endTime) {
        html += `<p>结束时间：${formatDate(processInstance.value.endTime)}</p>`
      }
    }
-    console.log(html, 'html111111111111111')
+    // console.log(html, 'html111111111111111')
    elementOverlayIds.value[element.value.id] = toRaw(overlays.value)?.add(element.value, {
      position: { left: 0, bottom: 0 },
      html: `<div class="element-overlays">${html}</div>`
    })
  }
 }
 // 流程图的元素被 out
 const elementOut = (element) => {
  toRaw(overlays.value).remove({ element })
@@ -389,6 +400,7 @@ onMounted(() => {
  // 初始模型的监听器
  initModelListeners()
 })
 onBeforeUnmount(() => {
  // this.$once('hook:beforeDestroy', () => {
  // })
@@ -427,7 +439,7 @@ watch(
 )
 </script>
-<style>
+<style lang="scss">
 /** 处理中 */
 .highlight-todo.djs-connection > .djs-visual > path {
  stroke: #1890ff !important;
@@ -501,6 +513,10 @@ watch(
  stroke: green !important;
 }
+.djs-element.highlight > .djs-visual > path {
+  stroke: green !important;
+}
 /** 不通过 */
 .highlight-reject.djs-shape .djs-visual > :nth-child(1) {
  fill: red !important;
@@ -520,6 +536,7 @@ watch(
 .highlight-reject.djs-connection > .djs-visual > path {
  stroke: red !important;
+  marker-end: url(#sequenceflow-end-white-success) !important;
 }
 .highlight-reject:not(.djs-connection) .djs-visual > :nth-child(1) {

--- a/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/activitiDescriptor.json
+++ b/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/activitiDescriptor.json
@@ -332,6 +332,16 @@
          "name": "multiinstance_condition",
          "isAttr": true,
          "type": "String"
+        },
+        {
+          "name": "candidateStrategy",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateParam",
+          "isAttr": true,
+          "type": "String"
        }
      ]
    },

--- a/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/camundaDescriptor.json
+++ b/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/camundaDescriptor.json
@@ -319,6 +319,16 @@
          "name": "priority",
          "isAttr": true,
          "type": "String"
+        },
+        {
+          "name": "candidateStrategy",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateParam",
+          "isAttr": true,
+          "type": "String"
        }
      ]
    },

--- a/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
+++ b/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
@@ -319,6 +319,16 @@
          "name": "priority",
          "isAttr": true,
          "type": "String"
+        },
+        {
+          "name": "candidateStrategy",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateParam",
+          "isAttr": true,
+          "type": "String"
        }
      ]
    },

--- a/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
@@ -24,15 +24,10 @@
      </el-collapse-item>
      <el-collapse-item name="condition" v-if="formVisible" key="form">
        <template #title><Icon icon="ep:list" />表单</template>
-        <!-- <element-form :id="elementId" :type="elementType" /> -->
+        <element-form :id="elementId" :type="elementType" />
-        友情提示：使用
-        <router-link :to="{ path: '/bpm/manager/form' }"
-          ><el-link type="danger">流程表单</el-link>
-        </router-link>
-        替代，提供更好的表单设计功能
      </el-collapse-item>
      <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
-        <template #title><Icon icon="ep:checked" />任务</template>
+        <template #title><Icon icon="ep:checked" />任务（审批人）</template>
        <element-task :id="elementId" :type="elementType" />
      </el-collapse-item>
      <el-collapse-item
@@ -40,7 +35,7 @@
        v-if="elementType.indexOf('Task') !== -1"
        key="multiInstance"
      >
-        <template #title><Icon icon="ep:help-filled" />多实例</template>
+        <template #title><Icon icon="ep:help-filled" />多实例（会签配置）</template>
        <element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
      </el-collapse-item>
      <el-collapse-item name="listeners" key="listeners">

--- a/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
@@ -3,13 +3,6 @@
    <el-form label-width="90px" :model="needProps" :rules="rules">
      <div v-if="needProps.type == 'bpmn:Process'">
        <!-- 如果是 Process 信息的时候，使用自定义表单 -->
-        <el-link
-          href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B"
-          type="danger"
-          target="_blank"
-        >
-          如何实现实现会签、或签？
-        </el-link>
        <el-form-item label="流程标识" prop="id">
          <el-input
            v-model="needProps.id"
@@ -68,13 +61,13 @@ const resetBaseInfo = () => {
  console.log(bpmnElement.value, 'bpmnElement')
  bpmnElement.value = bpmnInstances()?.bpmnElement
-  console.log(bpmnElement.value, 'resetBaseInfo11111111111')
+  // console.log(bpmnElement.value, 'resetBaseInfo11111111111')
  elementBaseInfo.value = bpmnElement.value.businessObject
  needProps.value['type'] = bpmnElement.value.businessObject.$type
  // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
  // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
-  console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
+  // console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
 }
 const handleKeyUpdate = (value) => {
  // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
@@ -121,11 +114,11 @@ const updateBaseInfo = (key) => {
  //   id: elementBaseInfo.value[key]
  //   // di: { id: `${elementBaseInfo.value[key]}_di` }
  // }
-  console.log(elementBaseInfo, 'elementBaseInfo11111111111')
+  // console.log(elementBaseInfo, 'elementBaseInfo11111111111')
  needProps.value = { ...elementBaseInfo.value, ...needProps.value }
  if (key === 'id') {
-    console.log('jinru')
+    // console.log('jinru')
    console.log(window, 'window')
    console.log(bpmnElement.value, 'bpmnElement')
    console.log(toRaw(bpmnElement.value), 'bpmnElement')
@@ -138,20 +131,11 @@ const updateBaseInfo = (key) => {
    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), attrObj)
  }
 }
-onMounted(() => {
-  // 针对上传的 bpmn 流程图时，需要延迟 1 秒的时间，保证 key 和 name 的更新
-  setTimeout(() => {
-    console.log(props.model, 'props.model')
-    handleKeyUpdate(props.model.key)
-    handleNameUpdate(props.model.name)
-    console.log(props, 'propsssssssssssssssssssss')
-  }, 1000)
-})
 watch(
  () => props.businessObject,
  (val) => {
-    console.log(val, 'val11111111111111111111')
+    // console.log(val, 'val11111111111111111111')
    if (val) {
      // nextTick(() => {
      resetBaseInfo()
@@ -159,6 +143,18 @@ watch(
    }
  }
 )
+watch(
+  () => props.model?.key,
+  (val) => {
+    // 针对上传的 bpmn 流程图时，保证 key 和 name 的更新
+    if (val) {
+      handleKeyUpdate(props.model.key)
+      handleNameUpdate(props.model.name)
+    }
+  }
+)
 // watch(
 //   () => ({ ...props }),
 //   (oldVal, newVal) => {

--- a/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
--- a/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
@@ -26,8 +26,16 @@
        type="primary"
        preIcon="ep:plus"
        title="添加监听器"
+        size="small"
        @click="openListenerForm(null)"
      />
+      <XButton
+        type="success"
+        preIcon="ep:select"
+        title="选择监听器"
+        size="small"
+        @click="openProcessListenerDialog"
+      />
    </div>
    <!-- 监听器 编辑/创建 部分 -->
@@ -240,11 +248,21 @@
      </template>
    </el-dialog>
  </div>
+  <!-- 选择弹窗 -->
+  <ProcessListenerDialog ref="processListenerDialogRef" @select="selectProcessListener" />
 </template>
 <script lang="ts" setup>
 import { ElMessageBox } from 'element-plus'
 import { createListenerObject, updateElementExtensions } from '../../utils'
-import { initListenerType, initListenerForm, listenerType, fieldType } from './utilSelf'
+import {
+  initListenerType,
+  initListenerForm,
+  listenerType,
+  fieldType,
+  initListenerForm2
+} from './utilSelf'
+import ProcessListenerDialog from './ProcessListenerDialog.vue'
 defineOptions({ name: 'ElementListeners' })
@@ -284,6 +302,7 @@ const resetListenersList = () => {
 }
 // 打开 监听器详情 侧边栏
 const openListenerForm = (listener, index?) => {
+  // debugger
  if (listener) {
    listenerForm.value = initListenerForm(listener)
    editingListenerIndex.value = index
@@ -321,6 +340,7 @@ const openListenerFieldForm = (field, index?) => {
 }
 // 保存监听器注入字段
 const saveListenerFiled = async () => {
+  // debugger
  let validateStatus = await listenerFieldFormRef.value.validate()
  if (!validateStatus) return // 验证不通过直接返回
  if (editingListenerFieldIndex.value === -1) {
@@ -337,6 +357,7 @@ const saveListenerFiled = async () => {
 }
 // 移除监听器字段
 const removeListenerField = (index) => {
+  // debugger
  ElMessageBox.confirm('确认移除该字段吗？', '提示', {
    confirmButtonText: '确 认',
    cancelButtonText: '取 消'
@@ -349,6 +370,7 @@ const removeListenerField = (index) => {
 }
 // 移除监听器
 const removeListener = (index) => {
+  debugger
  ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
    confirmButtonText: '确 认',
    cancelButtonText: '取 消'
@@ -365,6 +387,7 @@ const removeListener = (index) => {
 }
 // 保存监听器配置
 const saveListenerConfig = async () => {
+  // debugger
  let validateStatus = await listenerFormRef.value.validate()
  if (!validateStatus) return // 验证不通过直接返回
  const listenerObject = createListenerObject(listenerForm.value, false, prefix)
@@ -389,6 +412,28 @@ const saveListenerConfig = async () => {
  listenerForm.value = {}
 }
+// 打开监听器弹窗
+const processListenerDialogRef = ref()
+const openProcessListenerDialog = async () => {
+  processListenerDialogRef.value.open('execution')
+}
+const selectProcessListener = (listener) => {
+  const listenerForm = initListenerForm2(listener)
+  const listenerObject = createListenerObject(listenerForm, false, prefix)
+  bpmnElementListeners.value.push(listenerObject)
+  elementListenersList.value.push(listenerForm)
+  // 保存其他配置
+  otherExtensionList.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type !== `${prefix}:ExecutionListener`
+    ) ?? []
+  updateElementExtensions(
+    bpmnElement.value,
+    otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
+}
 watch(
  () => props.id,
  (val) => {

--- a/src/components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue
+<!-- 执行器选择 -->
+<template>
+  <Dialog title="请选择监听器" v-model="dialogVisible" width="1024px">
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+        <el-table-column label="名字" align="center" prop="name" />
+        <el-table-column label="类型" align="center" prop="type">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.BPM_PROCESS_LISTENER_TYPE" :value="scope.row.type" />
+          </template>
+        </el-table-column>
+        <el-table-column label="事件" align="center" prop="event" />
+        <el-table-column label="值类型" align="center" prop="valueType">
+          <template #default="scope">
+            <dict-tag
+              :type="DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE"
+              :value="scope.row.valueType"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="值" align="center" prop="value" />
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button link type="primary" @click="select(scope.row)"> 选择 </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </ContentWrap>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { ProcessListenerApi, ProcessListenerVO } from '@/api/bpm/processListener'
+import { DICT_TYPE } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+/** BPM 流程 表单 */
+defineOptions({ name: 'ProcessListenerDialog' })
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const dialogVisible = ref(false) // 弹窗的是否展示
+const loading = ref(true) // 列表的加载中
+const list = ref<ProcessListenerVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  type: undefined,
+  status: CommonStatusEnum.ENABLE
+})
+/** 打开弹窗 */
+const open = async (type: string) => {
+  dialogVisible.value = true
+  loading.value = true
+  try {
+    queryParams.pageNo = 1
+    queryParams.type = type
+    const data = await ProcessListenerApi.getProcessListenerPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const select = async (row) => {
+  dialogVisible.value = false
+  // 发送操作成功的事件
+  emit('select', row)
+}
+</script>
--- a/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
@@ -39,6 +39,13 @@
        title="添加监听器"
        @click="openListenerForm(null)"
      />
+      <XButton
+        type="success"
+        preIcon="ep:select"
+        title="选择监听器"
+        size="small"
+        @click="openProcessListenerDialog"
+      />
    </div>
    <!-- 监听器 编辑/创建 部分 -->
@@ -286,11 +293,22 @@
      </template>
    </el-dialog>
  </div>
+  <!-- 选择弹窗 -->
+  <ProcessListenerDialog ref="processListenerDialogRef" @select="selectProcessListener" />
 </template>
 <script lang="ts" setup>
 import { ElMessageBox } from 'element-plus'
 import { createListenerObject, updateElementExtensions } from '../../utils'
-import { initListenerForm, initListenerType, eventType, listenerType, fieldType } from './utilSelf'
+import {
+  initListenerForm,
+  initListenerType,
+  eventType,
+  listenerType,
+  fieldType,
+  initListenerForm2
+} from './utilSelf'
+import ProcessListenerDialog from '@/components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue'
 defineOptions({ name: 'UserTaskListeners' })
@@ -437,6 +455,28 @@ const removeListenerField = (field, index) => {
    .catch(() => console.info('操作取消'))
 }
+// 打开监听器弹窗
+const processListenerDialogRef = ref()
+const openProcessListenerDialog = async () => {
+  processListenerDialogRef.value.open('task')
+}
+const selectProcessListener = (listener) => {
+  const listenerForm = initListenerForm2(listener)
+  const listenerObject = createListenerObject(listenerForm, true, prefix)
+  bpmnElementListeners.value.push(listenerObject)
+  elementListenersList.value.push(listenerForm)
+  // 保存其他配置
+  otherExtensionList.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type !== `${prefix}:TaskListener`
+    ) ?? []
+  updateElementExtensions(
+    bpmnElement.value,
+    otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
+}
 watch(
  () => props.id,
  (val) => {

--- a/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.ts
+++ b/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.ts
@@ -40,6 +40,33 @@ export function initListenerType(listener) {
  }
 }
+/** 将 ProcessListenerDO 转换成 initListenerForm 想同的 Form 对象 */
+export function initListenerForm2(processListener) {
+  if (processListener.valueType === 'class') {
+    return {
+      listenerType: 'classListener',
+      class: processListener.value,
+      event: processListener.event,
+      fields: []
+    }
+  } else if (processListener.valueType === 'expression') {
+    return {
+      listenerType: 'expressionListener',
+      expression: processListener.value,
+      event: processListener.event,
+      fields: []
+    }
+  } else if (processListener.valueType === 'delegateExpression') {
+    return {
+      listenerType: 'delegateExpressionListener',
+      delegateExpression: processListener.value,
+      event: processListener.event,
+      fields: []
+    }
+  }
+  throw new Error('未知的监听器类型')
+}
 export const listenerType = {
  classListener: 'Java 类',
  expressionListener: '表达式',

--- a/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
 <template>
  <div class="panel-tab__content">
    <el-form label-width="90px">
-      <el-form-item label="回路特性">
+      <el-form-item label="快捷配置">
+        <el-button size="small" @click="changeConfig('依次审批')">依次审批</el-button>
+        <el-button size="small" @click="changeConfig('会签')">会签</el-button>
+        <el-button size="small" @click="changeConfig('或签')">或签</el-button>
+      </el-form-item>
+      <el-form-item label="会签类型">
        <el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
          <el-option label="并行多重事件" value="ParallelMultiInstance" />
          <el-option label="时序多重事件" value="SequentialMultiInstance" />
-          <el-option label="循环事件" value="StandardLoop" />
          <el-option label="无" value="Null" />
        </el-select>
      </el-form-item>
@@ -15,7 +19,7 @@
          loopCharacteristics === 'SequentialMultiInstance'
        "
      >
-        <el-form-item label="循环基数" key="loopCardinality">
+        <el-form-item label="循环数量" key="loopCardinality">
          <el-input
            v-model="loopInstanceForm.loopCardinality"
            clearable
@@ -25,7 +29,8 @@
        <el-form-item label="集合" key="collection" v-show="false">
          <el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
        </el-form-item>
-        <el-form-item label="元素变量" key="elementVariable">
+        <!-- add by 芋艿：由于「元素变量」暂时用不到，所以这里 display 为 none -->
+        <el-form-item label="元素变量" key="elementVariable" style="display: none">
          <el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
        </el-form-item>
        <el-form-item label="完成条件" key="completionCondition">
@@ -35,7 +40,8 @@
            @change="updateLoopCondition"
          />
        </el-form-item>
-        <el-form-item label="异步状态" key="async">
+        <!-- add by 芋艿：由于「异步状态」暂时用不到，所以这里 display 为 none -->
+        <el-form-item label="异步状态" key="async" style="display: none">
          <el-checkbox
            v-model="loopInstanceForm.asyncBefore"
            label="异步前"
@@ -124,6 +130,7 @@ const getElementLoop = (businessObject) => {
      businessObject.loopCharacteristics.extensionElements.values[0].body
  }
 }
 const changeLoopCharacteristicsType = (type) => {
  // this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
  // 取消多实例配置
@@ -160,6 +167,7 @@ const changeLoopCharacteristicsType = (type) => {
    loopCharacteristics: toRaw(multiLoopInstance.value)
  })
 }
 // 循环基数
 const updateLoopCardinality = (cardinality) => {
  let loopCardinality = null
@@ -176,6 +184,7 @@ const updateLoopCardinality = (cardinality) => {
    }
  )
 }
 // 完成条件
 const updateLoopCondition = (condition) => {
  let completionCondition = null
@@ -192,6 +201,7 @@ const updateLoopCondition = (condition) => {
    }
  )
 }
 // 重试周期
 const updateLoopTimeCycle = (timeCycle) => {
  const extensionElements = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
@@ -209,6 +219,7 @@ const updateLoopTimeCycle = (timeCycle) => {
    }
  )
 }
 // 直接更新的基础信息
 const updateLoopBase = () => {
  bpmnInstances().modeling.updateModdleProperties(
@@ -220,6 +231,7 @@ const updateLoopBase = () => {
    }
  )
 }
 // 各异步状态
 const updateLoopAsync = (key) => {
  const { asyncBefore, asyncAfter } = loopInstanceForm.value
@@ -238,6 +250,20 @@ const updateLoopAsync = (key) => {
  )
 }
+const changeConfig = (config) => {
+  if (config === '依次审批') {
+    changeLoopCharacteristicsType('SequentialMultiInstance')
+    updateLoopCardinality('1')
+    updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
+  } else if (config === '会签') {
+    changeLoopCharacteristicsType('ParallelMultiInstance')
+    updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
+  } else if (config === '或签') {
+    changeLoopCharacteristicsType('ParallelMultiInstance')
+    updateLoopCondition('${ nrOfCompletedInstances > 0 }')
+  }
+}
 onBeforeUnmount(() => {
  multiLoopInstance.value = null
  bpmnElement.value = null

--- a/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
 <template>
  <div class="panel-tab__content">
    <el-form size="small" label-width="90px">
-      <el-form-item label="异步延续">
+      <!-- add by 芋艿：由于「异步延续」暂时用不到，所以这里 display 为 none -->
+      <el-form-item label="异步延续" style="display: none">
        <el-checkbox
          v-model="taskConfigForm.asyncBefore"
          label="异步前"

--- a/src/components/bpmnProcessDesigner/package/penal/task/task-components/ProcessExpressionDialog.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/task/task-components/ProcessExpressionDialog.vue
+<!-- 表达式选择 -->
+<template>
+  <Dialog title="请选择表达式" v-model="dialogVisible" width="1024px">
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+        <el-table-column label="名字" align="center" prop="name" />
+        <el-table-column label="表达式" align="center" prop="expression" />
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button link type="primary" @click="select(scope.row)"> 选择 </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </ContentWrap>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { CommonStatusEnum } from '@/utils/constants'
+import { ProcessExpressionApi, ProcessExpressionVO } from '@/api/bpm/processExpression'
+/** BPM 流程 表单 */
+defineOptions({ name: 'ProcessExpressionDialog' })
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const dialogVisible = ref(false) // 弹窗的是否展示
+const loading = ref(true) // 列表的加载中
+const list = ref<ProcessExpressionVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  type: undefined,
+  status: CommonStatusEnum.ENABLE
+})
+/** 打开弹窗 */
+const open = async (type: string) => {
+  dialogVisible.value = true
+  loading.value = true
+  try {
+    queryParams.pageNo = 1
+    queryParams.type = type
+    const data = await ProcessExpressionApi.getProcessExpressionPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const select = async (row) => {
+  dialogVisible.value = false
+  // 发送操作成功的事件
+  emit('select', row)
+}
+</script>
--- a/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
 <template>
-  <div style="margin-top: 16px">
+  <el-form label-width="100px">
-    <!--    <el-form-item label="处理用户">-->
+    <el-form-item label="规则类型" prop="candidateStrategy">
-    <!--      <el-select v-model="userTaskForm.assignee" @change="updateElementTask('assignee')">-->
+      <el-select
-    <!--        <el-option v-for="ak in mockData" :key="'ass-' + ak" :label="`用户${ak}`" :value="`user${ak}`" />-->
+        v-model="userTaskForm.candidateStrategy"
-    <!--      </el-select>-->
+        clearable
-    <!--    </el-form-item>-->
+        style="width: 100%"
-    <!--    <el-form-item label="候选用户">-->
+        @change="changeCandidateStrategy"
-    <!--      <el-select v-model="userTaskForm.candidateUsers" multiple collapse-tags @change="updateElementTask('candidateUsers')">-->
+      >
-    <!--        <el-option v-for="uk in mockData" :key="'user-' + uk" :label="`用户${uk}`" :value="`user${uk}`" />-->
+        <el-option
-    <!--      </el-select>-->
+          v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
-    <!--    </el-form-item>-->
+          :key="dict.value"
-    <!--    <el-form-item label="候选分组">-->
+          :label="dict.label"
-    <!--      <el-select v-model="userTaskForm.candidateGroups" multiple collapse-tags @change="updateElementTask('candidateGroups')">-->
+          :value="dict.value"
-    <!--        <el-option v-for="gk in mockData" :key="'ass-' + gk" :label="`分组${gk}`" :value="`group${gk}`" />-->
+        />
-    <!--      </el-select>-->
+      </el-select>
-    <!--    </el-form-item>-->
-    <el-form-item label="到期时间">
-      <el-input v-model="userTaskForm.dueDate" clearable @change="updateElementTask('dueDate')" />
    </el-form-item>
-    <el-form-item label="跟踪时间">
+    <el-form-item
-      <el-input
+      v-if="userTaskForm.candidateStrategy == 10"
-        v-model="userTaskForm.followUpDate"
+      label="指定角色"
+      prop="candidateParam"
+    >
+      <el-select
+        v-model="userTaskForm.candidateParam"
        clearable
-        @change="updateElementTask('followUpDate')"
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy == 20 || userTaskForm.candidateStrategy == 21"
+      label="指定部门"
+      prop="candidateParam"
+      span="24"
+    >
+      <el-tree-select
+        ref="treeRef"
+        v-model="userTaskForm.candidateParam"
+        :data="deptTreeOptions"
+        :props="defaultProps"
+        empty-text="加载中，请稍后"
+        multiple
+        node-key="id"
+        show-checkbox
+        @change="updateElementTask"
      />
    </el-form-item>
-    <el-form-item label="优先级">
+    <el-form-item
-      <el-input v-model="userTaskForm.priority" clearable @change="updateElementTask('priority')" />
+      v-if="userTaskForm.candidateStrategy == 22"
+      label="指定岗位"
+      prop="candidateParam"
+      span="24"
+    >
+      <el-select
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <el-option v-for="item in postOptions" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy == 30"
+      label="指定用户"
+      prop="candidateParam"
+      span="24"
+    >
+      <el-select
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <el-option
+          v-for="item in userOptions"
+          :key="item.id"
+          :label="item.nickname"
+          :value="item.id"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="userTaskForm.candidateStrategy === 40"
+      label="指定用户组"
+      prop="candidateParam"
+    >
+      <el-select
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <el-option
+          v-for="item in userGroupOptions"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
    </el-form-item>
-    友情提示：任务的分配规则，使用
+    <el-form-item
-    <router-link target="_blank" :to="{ path: '/bpm/manager/model' }"
+      v-if="userTaskForm.candidateStrategy === 60"
-      ><el-link type="danger">流程模型</el-link>
+      label="流程表达式"
-    </router-link>
+      prop="candidateParam"
-    下的【分配规则】替代，提供指定角色、部门负责人、部门成员、岗位、工作组、自定义脚本等 7
+    >
-    种维护的任务分配维度，更加灵活！
+      <el-input
-  </div>
+        type="textarea"
+        v-model="userTaskForm.candidateParam[0]"
+        clearable
+        style="width: 72%"
+        @change="updateElementTask"
+      />
+      <el-button class="ml-5px" size="small" type="success" @click="openProcessExpressionDialog"
+        >选择表达式</el-button
+      >
+      <!-- 选择弹窗 -->
+      <ProcessExpressionDialog ref="processExpressionDialogRef" @select="selectProcessExpression" />
+    </el-form-item>
+  </el-form>
 </template>
 <script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as RoleApi from '@/api/system/role'
+import * as DeptApi from '@/api/system/dept'
+import * as PostApi from '@/api/system/post'
+import * as UserApi from '@/api/system/user'
+import * as UserGroupApi from '@/api/bpm/userGroup'
+import ProcessExpressionDialog from './ProcessExpressionDialog.vue'
 defineOptions({ name: 'UserTask' })
 const props = defineProps({
  id: String,
  type: String
 })
-const defaultTaskForm = ref({
+const userTaskForm = ref({
-  assignee: '',
+  candidateStrategy: undefined, // 分配规则
-  candidateUsers: [],
+  candidateParam: [] // 分配选项
-  candidateGroups: [],
-  dueDate: '',
-  followUpDate: '',
-  priority: ''
 })
-const userTaskForm = ref<any>({})
-// const mockData=ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
 const bpmnElement = ref()
 const bpmnInstances = () => (window as any)?.bpmnInstances
+const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
+const deptTreeOptions = ref() // 部门树
+const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
 const resetTaskForm = () => {
-  for (let key in defaultTaskForm.value) {
+  const businessObject = bpmnElement.value.businessObject
-    let value
+  if (!businessObject) {
-    if (key === 'candidateUsers' || key === 'candidateGroups') {
+    return
-      value = bpmnElement.value?.businessObject[key]
+  }
-        ? bpmnElement.value.businessObject[key].split(',')
+  if (businessObject.candidateStrategy != undefined) {
-        : []
+    userTaskForm.value.candidateStrategy = parseInt(businessObject.candidateStrategy) as any
+  } else {
+    userTaskForm.value.candidateStrategy = undefined
+  }
+  if (businessObject.candidateParam && businessObject.candidateParam.length > 0) {
+    if (userTaskForm.value.candidateStrategy === 60) {
+      // 特殊：流程表达式，只有一个 input 输入框
+      userTaskForm.value.candidateParam = [businessObject.candidateParam]
    } else {
-      value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
+      userTaskForm.value.candidateParam = businessObject.candidateParam
+        .split(',')
+        .map((item) => +item)
    }
-    userTaskForm.value[key] = value
-  }
-}
-const updateElementTask = (key) => {
-  const taskAttr = Object.create(null)
-  if (key === 'candidateUsers' || key === 'candidateGroups') {
-    taskAttr[key] =
-      userTaskForm.value[key] && userTaskForm.value[key].length
-        ? userTaskForm.value[key].join()
-        : null
  } else {
-    taskAttr[key] = userTaskForm.value[key] || null
+    userTaskForm.value.candidateParam = []
  }
-  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
+}
+/** 更新 candidateStrategy 字段时，需要清空 candidateParam，并触发 bpmn 图更新 */
+const changeCandidateStrategy = () => {
+  userTaskForm.value.candidateParam = []
+  updateElementTask()
+}
+/** 选中某个 options 时候，更新 bpmn 图  */
+const updateElementTask = () => {
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    candidateStrategy: userTaskForm.value.candidateStrategy,
+    candidateParam: userTaskForm.value.candidateParam.join(',')
+  })
+}
+// 打开监听器弹窗
+const processExpressionDialogRef = ref()
+const openProcessExpressionDialog = async () => {
+  processExpressionDialogRef.value.open()
+}
+const selectProcessExpression = (expression) => {
+  userTaskForm.value.candidateParam = [expression.expression]
 }
 watch(
@@ -92,6 +211,21 @@ watch(
  },
  { immediate: true }
 )
+onMounted(async () => {
+  // 获得角色列表
+  roleOptions.value = await RoleApi.getSimpleRoleList()
+  // 获得部门列表
+  const deptOptions = await DeptApi.getSimpleDeptList()
+  deptTreeOptions.value = handleTree(deptOptions, 'id')
+  // 获得岗位列表
+  postOptions.value = await PostApi.getSimplePostList()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+  // 获得用户组列表
+  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
+})
 onBeforeUnmount(() => {
  bpmnElement.value = null
 })

--- a/src/components/bpmnProcessDesigner/package/utils.ts
+++ b/src/components/bpmnProcessDesigner/package/utils.ts
@@ -2,6 +2,7 @@ import { toRaw } from 'vue'
 const bpmnInstances = () => (window as any)?.bpmnInstances
 // 创建监听器实例
 export function createListenerObject(options, isTask, prefix) {
+  debugger
  const listenerObj = Object.create(null)
  listenerObj.event = options.event
  isTask && (listenerObj.id = options.id) // 任务监听器特有的 id 字段

--- a/src/config/axios/service.ts
+++ b/src/config/axios/service.ts
@@ -13,7 +13,7 @@ import { getAccessToken, getRefreshToken, getTenantId, removeToken, setToken } f
 import errorCode from './errorCode'
 import { resetRouter } from '@/router'
-import { useCache } from '@/hooks/web/useCache'
+import { deleteUserCache } from '@/hooks/web/useCache'
 const tenantEnable = import.meta.env.VITE_APP_TENANT_ENABLE
 const { result_code, base_url, request_timeout } = config
@@ -217,9 +217,8 @@ const handleAuthorized = () => {
      confirmButtonText: t('login.relogin'),
      type: 'warning'
    }).then(() => {
-      const { wsCache } = useCache()
      resetRouter() // 重置静态路由表
-      wsCache.clear()
+      deleteUserCache() // 删除用户缓存
      removeToken()
      isRelogin.show = false
      // 干掉token后再走一次路由让它过router.beforeEach的校验

--- a/src/hooks/web/useCache.ts
+++ b/src/hooks/web/useCache.ts
@@ -7,13 +7,18 @@ import WebStorageCache from 'web-storage-cache'
 type CacheType = 'localStorage' | 'sessionStorage'
 export const CACHE_KEY = {
-  IS_DARK: 'isDark',
+  // 用户相关
+  ROLE_ROUTERS: 'roleRouters',
  USER: 'user',
+  // 系统设置
+  IS_DARK: 'isDark',
  LANG: 'lang',
  THEME: 'theme',
  LAYOUT: 'layout',
-  ROLE_ROUTERS: 'roleRouters',
+  DICT_CACHE: 'dictCache',
-  DICT_CACHE: 'dictCache'
+  // 登录表单
+  LoginForm: 'loginForm',
+  TenantId: 'tenantId'
 }
 export const useCache = (type: CacheType = 'localStorage') => {
@@ -25,3 +30,10 @@ export const useCache = (type: CacheType = 'localStorage') => {
    wsCache
  }
 }
+export const deleteUserCache = () => {
+  const { wsCache } = useCache()
+  wsCache.delete(CACHE_KEY.USER)
+  wsCache.delete(CACHE_KEY.ROLE_ROUTERS)
+  // 注意，不要清理 LoginForm 登录表单
+}
--- a/src/layout/components/Collapse/src/Collapse.vue
+++ b/src/layout/components/Collapse/src/Collapse.vue
@@ -24,13 +24,12 @@ const toggleCollapse = () => {
 </script>
 <template>
-  <div :class="prefixCls">
+  <div :class="prefixCls" @click="toggleCollapse">
    <Icon
      :color="color"
      :icon="collapse ? 'ep:expand' : 'ep:fold'"
      :size="18"
      class="cursor-pointer"
-      @click="toggleCollapse"
    />
  </div>
 </template>
--- a/src/layout/components/Menu/src/Menu.vue
+++ b/src/layout/components/Menu/src/Menu.vue
@@ -124,16 +124,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 $prefix-cls: #{$namespace}-menu;
-.is-active--after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 4px;
-  height: 100%;
-  background-color: var(--el-color-primary);
-  content: '';
-}
 .#{$prefix-cls} {
  position: relative;
  transition: width var(--transition-time-02);
@@ -159,7 +149,6 @@ $prefix-cls: #{$namespace}-menu;
    }
    // 设置选中时的高亮背景和高亮颜色
-    .#{$elNamespace}-sub-menu.is-active,
    .#{$elNamespace}-menu-item.is-active {
      color: var(--left-menu-text-active-color) !important;
      background-color: var(--left-menu-bg-active-color) !important;
@@ -171,10 +160,6 @@ $prefix-cls: #{$namespace}-menu;
    .#{$elNamespace}-menu-item.is-active {
      position: relative;
-      &::after {
-        @extend .is-active--after;
-      }
    }
    // 设置子菜单的背景颜色
@@ -194,10 +179,6 @@ $prefix-cls: #{$namespace}-menu;
    & > .is-active > .#{$elNamespace}-sub-menu__title {
      position: relative;
      background-color: var(--left-menu-collapse-bg-active-color) !important;
-      &::after {
-        @extend .is-active--after;
-      }
    }
  }
@@ -245,16 +226,6 @@ $prefix-cls: #{$namespace}-menu;
 <style lang="scss">
 $prefix-cls: #{$namespace}-menu-popper;
-.is-active--after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 4px;
-  height: 100%;
-  background-color: var(--el-color-primary);
-  content: '';
-}
 .#{$prefix-cls}--vertical,
 .#{$prefix-cls}--horizontal {
  // 设置选中时子标题的颜色
@@ -281,10 +252,6 @@ $prefix-cls: #{$namespace}-menu-popper;
    &:hover {
      background-color: var(--left-menu-bg-active-color) !important;
    }
-    &::after {
-      @extend .is-active--after;
-    }
  }
 }
 </style>
--- a/src/layout/components/Menu/src/components/useRenderMenuItem.tsx
+++ b/src/layout/components/Menu/src/components/useRenderMenuItem.tsx
 import { ElSubMenu, ElMenuItem } from 'element-plus'
-import type { RouteMeta } from 'vue-router'
 import { hasOneShowingChild } from '../helper'
 import { isUrl } from '@/utils/is'
 import { useRenderMenuTitle } from './useRenderMenuTitle'
-import { useDesign } from '@/hooks/web/useDesign'
 import { pathResolve } from '@/utils/routerHelper'
-export const useRenderMenuItem = (
+const { renderMenuTitle } = useRenderMenuTitle()
-  // allRouters: AppRouteRecordRaw[] = [],
-  menuMode: 'vertical' | 'horizontal'
-) => {
-  const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
-    return routers.map((v) => {
-      const meta = (v.meta ?? {}) as RouteMeta
-      if (!meta.hidden) {
-        const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
-        const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
-        const { renderMenuTitle } = useRenderMenuTitle()
-        if (
+export const useRenderMenuItem = () =>
-          oneShowingChild &&
+  // allRouters: AppRouteRecordRaw[] = [],
-          (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
+  {
-          !meta?.alwaysShow
+    const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
-        ) {
+      return routers
-          return (
+        .filter((v) => !v.meta?.hidden)
-            <ElMenuItem index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}>
+        .map((v) => {
-              {{
+          const meta = v.meta ?? {}
-                default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
+          const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
-              }}
+          const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
-            </ElMenuItem>
-          )
-        } else {
-          const { getPrefixCls } = useDesign()
-          const preFixCls = getPrefixCls('menu-popper')
+          if (
-          return (
+            oneShowingChild &&
-            <ElSubMenu
+            (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
-              index={fullPath}
+            !meta?.alwaysShow
-              popperClass={
+          ) {
-                menuMode === 'vertical' ? `${preFixCls}--vertical` : `${preFixCls}--horizontal`
+            return (
-              }
+              <ElMenuItem
-            >
+                index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
-              {{
+              >
-                title: () => renderMenuTitle(meta),
+                {{
-                default: () => renderMenuItem(v.children!, fullPath)
+                  default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
-              }}
+                }}
-            </ElSubMenu>
+              </ElMenuItem>
-          )
+            )
-        }
+          } else {
-      }
+            return (
-    })
+              <ElSubMenu index={fullPath}>
-  }
+                {{
+                  title: () => renderMenuTitle(meta),
+                  default: () => renderMenuItem(v.children!, fullPath)
+                }}
+              </ElSubMenu>
+            )
+          }
+        })
+    }
-  return {
+    return {
-    renderMenuItem
+      renderMenuItem
+    }
  }
-}
--- a/src/layout/components/Menu/src/components/useRenderMenuTitle.tsx
+++ b/src/layout/components/Menu/src/components/useRenderMenuTitle.tsx
 import type { RouteMeta } from 'vue-router'
 import { Icon } from '@/components/Icon'
+import { useI18n } from '@/hooks/web/useI18n'
 export const useRenderMenuTitle = () => {
  const renderMenuTitle = (meta: RouteMeta) => {
@@ -9,10 +10,14 @@ export const useRenderMenuTitle = () => {
    return icon ? (
      <>
        <Icon icon={meta.icon}></Icon>
-        <span class="v-menu__title">{t(title as string)}</span>
+        <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">
+          {t(title as string)}
+        </span>
      </>
    ) : (
-      <span class="v-menu__title">{t(title as string)}</span>
+      <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">
+        {t(title as string)}
+      </span>
    )
  }

--- a/src/layout/components/TabMenu/src/TabMenu.vue
+++ b/src/layout/components/TabMenu/src/TabMenu.vue
@@ -139,7 +139,7 @@ export default defineComponent({
        id={`${variables.namespace}-menu`}
        class={[
          prefixCls,
-          'relative bg-[var(--left-menu-bg-color)] top-1px z-3000 layout-border__right',
+          'relative bg-[var(--left-menu-bg-color)] top-1px layout-border__right',
          {
            'w-[var(--tab-menu-max-width)]': !unref(collapse),
            'w-[var(--tab-menu-min-width)]': unref(collapse)

--- a/src/layout/components/UserInfo/src/UserInfo.vue
+++ b/src/layout/components/UserInfo/src/UserInfo.vue
@@ -5,6 +5,9 @@ import avatarImg from '@/assets/imgs/avatar.gif'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { useUserStore } from '@/store/modules/user'
+import LockDialog from './components/LockDialog.vue'
+import LockPage from './components/LockPage.vue'
+import { useLockStore } from '@/store/modules/lock'
 defineOptions({ name: 'UserInfo' })
@@ -23,6 +26,14 @@ const prefixCls = getPrefixCls('user-info')
 const avatar = computed(() => userStore.user.avatar ?? avatarImg)
 const userName = computed(() => userStore.user.nickname ?? 'Admin')
+// 锁定屏幕
+const lockStore = useLockStore()
+const getIsLock = computed(() => lockStore.getLockInfo?.isLock ?? false)
+const dialogVisible = ref<boolean>(false)
+const lockScreen = () => {
+  dialogVisible.value = true
+}
 const loginOut = async () => {
  try {
    await ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
@@ -33,8 +44,7 @@ const loginOut = async () => {
    await userStore.loginOut()
    tagsViewStore.delAllViews()
    replace('/login?redirect=/index')
-  }
+  } catch {}
-  catch { }
 }
 const toProfile = async () => {
  push('/user/profile')
@@ -62,6 +72,10 @@ const toDocument = () => {
          <Icon icon="ep:menu" />
          <div @click="toDocument">{{ t('common.document') }}</div>
        </ElDropdownItem>
+        <ElDropdownItem divided>
+          <Icon icon="ep:lock" />
+          <div @click="lockScreen">{{ t('lock.lockScreen') }}</div>
+        </ElDropdownItem>
        <ElDropdownItem divided @click="loginOut">
          <Icon icon="ep:switch-button" />
          <div>{{ t('common.loginOut') }}</div>
@@ -69,4 +83,31 @@ const toDocument = () => {
      </ElDropdownMenu>
    </template>
  </ElDropdown>
+  <LockDialog v-if="dialogVisible" v-model="dialogVisible" />
+  <teleport to="body">
+    <transition name="fade-bottom" mode="out-in">
+      <LockPage v-if="getIsLock" />
+    </transition>
+  </teleport>
 </template>
+<style scoped lang="scss">
+.fade-bottom-enter-active,
+.fade-bottom-leave-active {
+  transition:
+    opacity 0.25s,
+    transform 0.3s;
+}
+.fade-bottom-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+.fade-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+</style>
--- a/src/layout/components/UserInfo/src/components/LockDialog.vue
+++ b/src/layout/components/UserInfo/src/components/LockDialog.vue
+<script setup lang="ts">
+import { useValidator } from '@/hooks/web/useValidator'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useLockStore } from '@/store/modules/lock'
+import avatarImg from '@/assets/imgs/avatar.gif'
+import { useUserStore } from '@/store/modules/user'
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('lock-dialog')
+const { required } = useValidator()
+const { t } = useI18n()
+const lockStore = useLockStore()
+const props = defineProps({
+  modelValue: {
+    type: Boolean
+  }
+})
+const userStore = useUserStore()
+const avatar = computed(() => userStore.user.avatar ?? avatarImg)
+const userName = computed(() => userStore.user.nickname ?? 'Admin')
+const emit = defineEmits(['update:modelValue'])
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    console.log('set: ', val)
+    emit('update:modelValue', val)
+  }
+})
+const dialogTitle = ref(t('lock.lockScreen'))
+const formData = ref({
+  password: undefined
+})
+const formRules = reactive({
+  password: [required()]
+})
+const formRef = ref() // 表单 Ref
+const handleLock = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  dialogVisible.value = false
+  lockStore.setLockInfo({
+    ...formData.value,
+    isLock: true
+  })
+}
+</script>
+<template>
+  <Dialog
+    v-model="dialogVisible"
+    width="500px"
+    max-height="170px"
+    :class="prefixCls"
+    :title="dialogTitle"
+  >
+    <div class="flex flex-col items-center">
+      <img :src="avatar" alt="" class="w-70px h-70px rounded-[50%]" />
+      <span class="text-14px my-10px text-[var(--top-header-text-color)]">
+        {{ userName }}
+      </span>
+    </div>
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
+      <el-form-item :label="t('lock.lockPassword')" prop="password">
+        <el-input
+          type="password"
+          v-model="formData.password"
+          :placeholder="'请输入' + t('lock.lockPassword')"
+          clearable
+          show-password
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <ElButton type="primary" @click="handleLock">{{ t('lock.lock') }}</ElButton>
+    </template>
+  </Dialog>
+</template>
+<style lang="scss" scoped>
+:global(.v-lock-dialog) {
+  @media (max-width: 767px) {
+    max-width: calc(100vw - 16px);
+  }
+}
+</style>
--- a/src/layout/components/UserInfo/src/components/LockPage.vue
+++ b/src/layout/components/UserInfo/src/components/LockPage.vue
+<script lang="ts" setup>
+import { resetRouter } from '@/router'
+import { deleteUserCache } from '@/hooks/web/useCache'
+import { useLockStore } from '@/store/modules/lock'
+import { useNow } from '@/hooks/web/useNow'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useUserStore } from '@/store/modules/user'
+import avatarImg from '@/assets/imgs/avatar.gif'
+const tagsViewStore = useTagsViewStore()
+const { replace } = useRouter()
+const userStore = useUserStore()
+const password = ref('')
+const loading = ref(false)
+const errMsg = ref(false)
+const showDate = ref(true)
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('lock-page')
+const avatar = computed(() => userStore.user.avatar ?? avatarImg)
+const userName = computed(() => userStore.user.nickname ?? 'Admin')
+const lockStore = useLockStore()
+const { hour, month, minute, meridiem, year, day, week } = useNow(true)
+const { t } = useI18n()
+// 解锁
+async function unLock() {
+  if (!password.value) {
+    return
+  }
+  let pwd = password.value
+  try {
+    loading.value = true
+    const res = await lockStore.unLock(pwd)
+    errMsg.value = !res
+  } finally {
+    loading.value = false
+  }
+}
+// 返回登录
+async function goLogin() {
+  await userStore.loginOut().catch(() => {})
+  // 登出后清理
+  deleteUserCache() // 清空用户缓存
+  tagsViewStore.delAllViews()
+  resetRouter() // 重置静态路由表
+  lockStore.resetLockInfo()
+  replace('/login')
+}
+function handleShowForm(show = false) {
+  showDate.value = show
+}
+</script>
+<template>
+  <div
+    :class="prefixCls"
+    class="fixed inset-0 flex h-screen w-screen bg-black items-center justify-center"
+  >
+    <div
+      :class="`${prefixCls}__unlock`"
+      class="absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl text-white flex-col cursor-pointer transform translate-x-1/2"
+      @click="handleShowForm(false)"
+      v-show="showDate"
+    >
+      <Icon icon="ep:lock" />
+      <span>{{ t('lock.unlock') }}</span>
+    </div>
+    <div class="flex w-screen h-screen justify-center items-center">
+      <div :class="`${prefixCls}__hour`" class="relative mr-5 md:mr-20 w-2/5 h-2/5 md:h-4/5">
+        <span>{{ hour }}</span>
+        <span class="meridiem absolute left-5 top-5 text-md xl:text-xl" v-show="showDate">
+          {{ meridiem }}
+        </span>
+      </div>
+      <div :class="`${prefixCls}__minute w-2/5 h-2/5 md:h-4/5 `">
+        <span> {{ minute }}</span>
+      </div>
+    </div>
+    <transition name="fade-slide">
+      <div :class="`${prefixCls}-entry`" v-show="!showDate">
+        <div :class="`${prefixCls}-entry-content`">
+          <div class="flex flex-col items-center">
+            <img :src="avatar" alt="" class="w-70px h-70px rounded-[50%]" />
+            <span class="text-14px my-10px text-[var(--logo-title-text-color)]">
+              {{ userName }}
+            </span>
+          </div>
+          <ElInput
+            type="password"
+            :placeholder="t('lock.placeholder')"
+            class="enter-x"
+            v-model="password"
+          />
+          <span :class="`text-14px ${prefixCls}-entry__err-msg enter-x`" v-if="errMsg">
+            {{ t('lock.message') }}
+          </span>
+          <div :class="`${prefixCls}-entry__footer enter-x`">
+            <ElButton
+              type="primary"
+              size="small"
+              class="mt-2 mr-2 enter-x"
+              link
+              :disabled="loading"
+              @click="handleShowForm(true)"
+            >
+              {{ t('common.back') }}
+            </ElButton>
+            <ElButton
+              type="primary"
+              size="small"
+              class="mt-2 mr-2 enter-x"
+              link
+              :disabled="loading"
+              @click="goLogin"
+            >
+              {{ t('lock.backToLogin') }}
+            </ElButton>
+            <ElButton
+              type="primary"
+              class="mt-2"
+              size="small"
+              link
+              @click="unLock()"
+              :disabled="loading"
+            >
+              {{ t('lock.entrySystem') }}
+            </ElButton>
+          </div>
+        </div>
+      </div>
+    </transition>
+    <div class="absolute bottom-5 w-full text-gray-300 xl:text-xl 2xl:text-3xl text-center enter-y">
+      <div class="text-5xl mb-4 enter-x" v-show="!showDate">
+        {{ hour }}:{{ minute }} <span class="text-3xl">{{ meridiem }}</span>
+      </div>
+      <div class="text-2xl">{{ year }}/{{ month }}/{{ day }} {{ week }}</div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+$prefix-cls: '#{$namespace}-lock-page';
+// Small screen / tablet
+$screen-sm: 576px;
+// Medium screen / desktop
+$screen-md: 768px;
+// Large screen / wide desktop
+$screen-lg: 992px;
+// Extra large screen / full hd
+$screen-xl: 1200px;
+// Extra extra large screen / large desktop
+$screen-2xl: 1600px;
+$error-color: #ed6f6f;
+.#{$prefix-cls} {
+  z-index: 3000;
+  &__unlock {
+    transform: translate(-50%, 0);
+  }
+  &__hour,
+  &__minute {
+    display: flex;
+    font-weight: 700;
+    color: #bababa;
+    background-color: #141313;
+    border-radius: 30px;
+    justify-content: center;
+    align-items: center;
+    @media screen and (max-width: $screen-md) {
+      span:not(.meridiem) {
+        font-size: 160px;
+      }
+    }
+    @media screen and (min-width: $screen-md) {
+      span:not(.meridiem) {
+        font-size: 160px;
+      }
+    }
+    @media screen and (max-width: $screen-sm) {
+      span:not(.meridiem) {
+        font-size: 90px;
+      }
+    }
+    @media screen and (min-width: $screen-lg) {
+      span:not(.meridiem) {
+        font-size: 220px;
+      }
+    }
+    @media screen and (min-width: $screen-xl) {
+      span:not(.meridiem) {
+        font-size: 260px;
+      }
+    }
+    @media screen and (min-width: $screen-2xl) {
+      span:not(.meridiem) {
+        font-size: 320px;
+      }
+    }
+  }
+  &-entry {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(8px);
+    justify-content: center;
+    align-items: center;
+    &-content {
+      width: 260px;
+    }
+    &__header {
+      text-align: center;
+      &-img {
+        width: 70px;
+        margin: 0 auto;
+        border-radius: 50%;
+      }
+      &-name {
+        margin-top: 5px;
+        font-weight: 500;
+        color: #bababa;
+      }
+    }
+    &__err-msg {
+      display: inline-block;
+      margin-top: 10px;
+      color: $error-color;
+    }
+    &__footer {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+</style>
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -56,6 +56,16 @@ export default {
    copySuccess: 'Copy Success',
    copyError: 'Copy Error'
  },
+  lock: {
+    lockScreen: 'Lock screen',
+    lock: 'Lock',
+    lockPassword: 'Lock screen password',
+    unlock: 'Click to unlock',
+    backToLogin: 'Back to login',
+    entrySystem: 'Entry the system',
+    placeholder: 'Please enter the lock screen password',
+    message: 'Lock screen password error'
+  },
  error: {
    noPermission: `Sorry, you don't have permission to access this page.`,
    pageError: 'Sorry, the page you visited does not exist.',

--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -56,6 +56,16 @@ export default {
    copySuccess: '复制成功',
    copyError: '复制失败'
  },
+  lock: {
+    lockScreen: '锁定屏幕',
+    lock: '锁定',
+    lockPassword: '锁屏密码',
+    unlock: '点击解锁',
+    backToLogin: '返回登录',
+    entrySystem: '进入系统',
+    placeholder: '请输入锁屏密码',
+    message: '锁屏密码错误'
+  },
  error: {
    noPermission: `抱歉，您无权访问此页面。`,
    pageError: '抱歉，您访问的页面不存在。',

--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -243,7 +243,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
    },
    children: [
      {
-        path: '/manager/form/edit',
+        path: 'manager/form/edit',
        component: () => import('@/views/bpm/form/editor/index.vue'),
        name: 'BpmFormEditor',
        meta: {
@@ -255,7 +255,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
        }
      },
      {
-        path: '/manager/model/edit',
+        path: 'manager/model/edit',
        component: () => import('@/views/bpm/model/editor/index.vue'),
        name: 'BpmModelEditor',
        meta: {
@@ -267,42 +267,31 @@ const remainingRouter: AppRouteRecordRaw[] = [
        }
      },
      {
-        path: '/manager/definition',
+        path: 'manager/simple/workflow/model/edit',
-        component: () => import('@/views/bpm/definition/index.vue'),
+        component: () => import('@/views/bpm/simpleWorkflow/index.vue'),
-        name: 'BpmProcessDefinition',
+        name: 'SimpleWorkflowDesignEditor',
        meta: {
          noCache: true,
          hidden: true,
          canTo: true,
-          title: '流程定义',
+          title: '仿钉钉设计流程',
          activeMenu: '/bpm/manager/model'
        }
      },
      {
-        path: '/manager/task-assign-rule',
+        path: 'manager/definition',
-        component: () => import('@/views/bpm/taskAssignRule/index.vue'),
+        component: () => import('@/views/bpm/definition/index.vue'),
-        name: 'BpmTaskAssignRuleList',
+        name: 'BpmProcessDefinition',
-        meta: {
-          noCache: true,
-          hidden: true,
-          canTo: true,
-          title: '任务分配规则'
-        }
-      },
-      {
-        path: '/process-instance/create',
-        component: () => import('@/views/bpm/processInstance/create/index.vue'),
-        name: 'BpmProcessInstanceCreate',
        meta: {
          noCache: true,
          hidden: true,
          canTo: true,
-          title: '发起流程',
+          title: '流程定义',
-          activeMenu: 'bpm/processInstance/create'
+          activeMenu: '/bpm/manager/model'
        }
      },
      {
-        path: '/process-instance/detail',
+        path: 'process-instance/detail',
        component: () => import('@/views/bpm/processInstance/detail/index.vue'),
        name: 'BpmProcessInstanceDetail',
        meta: {
@@ -310,11 +299,11 @@ const remainingRouter: AppRouteRecordRaw[] = [
          hidden: true,
          canTo: true,
          title: '流程详情',
-          activeMenu: 'bpm/processInstance/detail'
+          activeMenu: '/bpm/task/my'
        }
      },
      {
-        path: '/bpm/oa/leave/create',
+        path: 'oa/leave/create',
        component: () => import('@/views/bpm/oa/leave/create.vue'),
        name: 'OALeaveCreate',
        meta: {
@@ -326,7 +315,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
        }
      },
      {
-        path: '/bpm/oa/leave/detail',
+        path: 'oa/leave/detail',
        component: () => import('@/views/bpm/oa/leave/detail.vue'),
        name: 'OALeaveDetail',
        meta: {

--- a/src/store/index.ts
+++ b/src/store/index.ts
 import type { App } from 'vue'
 import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 const store = createPinia()
+store.use(piniaPluginPersistedstate)
 export const setupStore = (app: App<Element>) => {
  app.use(store)

--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -268,7 +268,8 @@ export const useAppStore = defineStore('app', {
    setFooter(footer: boolean) {
      this.footer = footer
    }
-  }
+  },
+  persist: false
 })
 export const useAppStoreWithOut = () => {

--- a/src/store/modules/lock.ts
+++ b/src/store/modules/lock.ts
+import { defineStore } from 'pinia'
+import { store } from '@/store'
+interface lockInfo {
+  isLock?: boolean
+  password?: string
+}
+interface LockState {
+  lockInfo: lockInfo
+}
+export const useLockStore = defineStore('lock', {
+  state: (): LockState => {
+    return {
+      lockInfo: {
+        // isLock: false, // 是否锁定屏幕
+        // password: '' // 锁屏密码
+      }
+    }
+  },
+  getters: {
+    getLockInfo(): lockInfo {
+      return this.lockInfo
+    }
+  },
+  actions: {
+    setLockInfo(lockInfo: lockInfo) {
+      this.lockInfo = lockInfo
+    },
+    resetLockInfo() {
+      this.lockInfo = {}
+    },
+    unLock(password: string) {
+      if (this.lockInfo?.password === password) {
+        this.resetLockInfo()
+        return true
+      } else {
+        return false
+      }
+    }
+  },
+  persist: true
+})
+export const useLockStoreWithOut = () => {
+  return useLockStore(store)
+}
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
 import { defineStore } from 'pinia'
-import { store } from '../index'
+import { store } from '@/store'
 import { cloneDeep } from 'lodash-es'
 import remainingRouter from '@/router/modules/remaining'
 import { flatMultiLevelRoutes, generateRoute } from '@/utils/routerHelper'
@@ -59,7 +59,8 @@ export const usePermissionStore = defineStore('permission', {
    setMenuTabRouters(routers: AppRouteRecordRaw[]): void {
      this.menuTabRouters = routers
    }
-  }
+  },
+  persist: false
 })
 export const usePermissionStoreWithOut = () => {

--- a/src/store/modules/simpleWorkflow.ts
+++ b/src/store/modules/simpleWorkflow.ts
+import { store } from '../index'
+import { defineStore } from 'pinia'
+export const useWorkFlowStore = defineStore('simpleWorkflow', {
+  state: () => ({
+    tableId: '',
+    isTried: false,
+    promoterDrawer: false,
+    flowPermission1: {},
+    approverDrawer: false,
+    approverConfig1: {},
+    copyerDrawer: false,
+    copyerConfig1: {},
+    conditionDrawer: false,
+    conditionsConfig1: {
+      conditionNodes: []
+    }
+  }),
+  actions: {
+    setTableId(payload) {
+      this.tableId = payload
+    },
+    setIsTried(payload) {
+      this.isTried = payload
+    },
+    setPromoter(payload) {
+      this.promoterDrawer = payload
+    },
+    setFlowPermission(payload) {
+      this.flowPermission1 = payload
+    },
+    setApprover(payload) {
+      this.approverDrawer = payload
+    },
+    setApproverConfig(payload) {
+      this.approverConfig1 = payload
+    },
+    setCopyer(payload) {
+      this.copyerDrawer = payload
+    },
+    setCopyerConfig(payload) {
+      this.copyerConfig1 = payload
+    },
+    setCondition(payload) {
+      this.conditionDrawer = payload
+    },
+    setConditionsConfig(payload) {
+      this.conditionsConfig1 = payload
+    }
+  }
+})
+export const useWorkFlowStoreWithOut = () => {
+  return useWorkFlowStore(store)
+}
--- a/src/store/modules/tagsView.ts
+++ b/src/store/modules/tagsView.ts
@@ -132,7 +132,8 @@ export const useTagsViewStore = defineStore('tagsView', {
        }
      }
    }
-  }
+  },
+  persist: false
 })
 export const useTagsViewStoreWithOut = () => {

--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
-import { store } from '../index'
+import { store } from '@/store'
 import { defineStore } from 'pinia'
 import { getAccessToken, removeToken } from '@/utils/auth'
-import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import { CACHE_KEY, useCache, deleteUserCache } from '@/hooks/web/useCache'
 import { getInfo, loginOut } from '@/api/login'
 const { wsCache } = useCache()
@@ -14,6 +14,7 @@ interface UserVO {
 }
 interface UserInfoVO {
+  // USER 缓存
  permissions: string[]
  roles: string[]
  isSetUser: boolean
@@ -80,7 +81,7 @@ export const useUserStore = defineStore('admin-user', {
    async loginOut() {
      await loginOut()
      removeToken()
-      wsCache.clear()
+      deleteUserCache() // 删除用户缓存
      this.resetState()
    },
    resetState() {

--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
-import { useCache } from '@/hooks/web/useCache'
+import { useCache, CACHE_KEY } from '@/hooks/web/useCache'
 import { TokenType } from '@/api/login/types'
 import { decrypt, encrypt } from '@/utils/jsencrypt'
@@ -36,8 +36,6 @@ export const formatToken = (token: string): string => {
 }
 // ========== 账号相关 ==========
-const LoginFormKey = 'LOGINFORM'
 export type LoginFormType = {
  tenantName: string
  username: string
@@ -46,7 +44,7 @@ export type LoginFormType = {
 }
 export const getLoginForm = () => {
-  const loginForm: LoginFormType = wsCache.get(LoginFormKey)
+  const loginForm: LoginFormType = wsCache.get(CACHE_KEY.LoginForm)
  if (loginForm) {
    loginForm.password = decrypt(loginForm.password) as string
  }
@@ -55,38 +53,19 @@ export const getLoginForm = () => {
 export const setLoginForm = (loginForm: LoginFormType) => {
  loginForm.password = encrypt(loginForm.password) as string
-  wsCache.set(LoginFormKey, loginForm, { exp: 30 * 24 * 60 * 60 })
+  wsCache.set(CACHE_KEY.LoginForm, loginForm, { exp: 30 * 24 * 60 * 60 })
 }
 export const removeLoginForm = () => {
-  wsCache.delete(LoginFormKey)
+  wsCache.delete(CACHE_KEY.LoginForm)
 }
 // ========== 租户相关 ==========
-const TenantIdKey = 'TENANT_ID'
-const TenantNameKey = 'TENANT_NAME'
-export const getTenantName = () => {
-  return wsCache.get(TenantNameKey)
-}
-export const setTenantName = (username: string) => {
-  wsCache.set(TenantNameKey, username, { exp: 30 * 24 * 60 * 60 })
-}
-export const removeTenantName = () => {
-  wsCache.delete(TenantNameKey)
-}
 export const getTenantId = () => {
-  return wsCache.get(TenantIdKey)
+  return wsCache.get(CACHE_KEY.TenantId)
 }
 export const setTenantId = (username: string) => {
-  wsCache.set(TenantIdKey, username)
+  wsCache.set(CACHE_KEY.TenantId, username)
-}
-export const removeTenantId = () => {
-  wsCache.delete(TenantIdKey)
 }
--- a/src/utils/dateUtil.ts
+++ b/src/utils/dateUtil.ts
+/**
+ * Independent time operation tool to facilitate subsequent switch to dayjs
+ */
+// TODO 芋艿：【锁屏】可能后面删除掉
+import dayjs from 'dayjs'
+const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
+const DATE_FORMAT = 'YYYY-MM-DD'
+export function formatToDateTime(date?: dayjs.ConfigType, format = DATE_TIME_FORMAT): string {
+  return dayjs(date).format(format)
+}
+export function formatToDate(date?: dayjs.ConfigType, format = DATE_FORMAT): string {
+  return dayjs(date).format(format)
+}
+export const dateUtil = dayjs
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -136,13 +136,13 @@ export enum DICT_TYPE {
  INFRA_FILE_STORAGE = 'infra_file_storage',
  // ========== BPM 模块 ==========
-  BPM_MODEL_CATEGORY = 'bpm_model_category',
  BPM_MODEL_FORM_TYPE = 'bpm_model_form_type',
-  BPM_TASK_ASSIGN_RULE_TYPE = 'bpm_task_assign_rule_type',
+  BPM_TASK_CANDIDATE_STRATEGY = 'bpm_task_candidate_strategy',
  BPM_PROCESS_INSTANCE_STATUS = 'bpm_process_instance_status',
-  BPM_PROCESS_INSTANCE_RESULT = 'bpm_process_instance_result',
+  BPM_TASK_STATUS = 'bpm_task_status',
-  BPM_TASK_ASSIGN_SCRIPT = 'bpm_task_assign_script',
  BPM_OA_LEAVE_TYPE = 'bpm_oa_leave_type',
+  BPM_PROCESS_LISTENER_TYPE = 'bpm_process_listener_type',
+  BPM_PROCESS_LISTENER_VALUE_TYPE = 'bpm_process_listener_value_type',
  // ========== PAY 模块 ==========
  PAY_CHANNEL_CODE = 'pay_channel_code', // 支付渠道编码类型
@@ -157,7 +157,7 @@ export enum DICT_TYPE {
  MP_AUTO_REPLY_REQUEST_MATCH = 'mp_auto_reply_request_match', // 自动回复请求匹配类型
  MP_MESSAGE_TYPE = 'mp_message_type', // 消息类型
-  // ========== MALL - 会员模块 ==========
+  // ========== Member 会员模块 ==========
  MEMBER_POINT_BIZ_TYPE = 'member_point_biz_type', // 积分的业务类型
  MEMBER_EXPERIENCE_BIZ_TYPE = 'member_experience_biz_type', // 会员经验业务类型

--- a/src/utils/formCreate.ts
+++ b/src/utils/formCreate.ts
@@ -28,7 +28,7 @@ export const decodeFields = (fields: string[]) => {
  return rule
 }
-// 设置表单的 Conf 和 Fields
+// 设置表单的 Conf 和 Fields，适用 FcDesigner 场景
 export const setConfAndFields = (designerRef: object, conf: string, fields: string) => {
  // @ts-ignore
  designerRef.value.setOption(JSON.parse(conf))
@@ -36,19 +36,22 @@ export const setConfAndFields = (designerRef: object, conf: string, fields: stri
  designerRef.value.setRule(decodeFields(fields))
 }
-// 设置表单的 Conf 和 Fields
+// 设置表单的 Conf 和 Fields，适用 form-create 场景
 export const setConfAndFields2 = (
  detailPreview: object,
  conf: string,
  fields: string,
  value?: object
 ) => {
+  if (isRef(detailPreview)) {
+    detailPreview = detailPreview.value
+  }
  // @ts-ignore
-  detailPreview.value.option = JSON.parse(conf)
+  detailPreview.option = JSON.parse(conf)
  // @ts-ignore
-  detailPreview.value.rule = decodeFields(fields)
+  detailPreview.rule = decodeFields(fields)
  if (value) {
    // @ts-ignore
-    detailPreview.value.value = value
+    detailPreview.value = value
  }
 }
--- a/src/utils/formatTime.ts
+++ b/src/utils/formatTime.ts
@@ -175,18 +175,18 @@ export function formatPast2(ms: number): string {
  const minute = Math.floor(ms / (60 * 1000) - day * 24 * 60 - hour * 60)
  const second = Math.floor(ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60)
  if (day > 0) {
-    return day + '天' + hour + '小时' + minute + '分钟'
+    return day + ' 天' + hour + ' 小时 ' + minute + ' 分钟'
  }
  if (hour > 0) {
-    return hour + '小时' + minute + '分钟'
+    return hour + ' 小时 ' + minute + ' 分钟'
  }
  if (minute > 0) {
-    return minute + '分钟'
+    return minute + ' 分钟'
  }
  if (second > 0) {
-    return second + '秒'
+    return second + ' 秒'
  } else {
-    return 0 + '秒'
+    return 0 + ' 秒'
  }
 }

--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -188,7 +188,7 @@ const loginData = reactive({
    username: 'admin',
    password: 'admin123',
    captchaVerification: '',
-    rememberMe: false
+    rememberMe: true // 默认记录我。如果不需要，可手动修改
  }
 })
@@ -218,14 +218,14 @@ const getTenantId = async () => {
  }
 }
 // 记住我
-const getCookie = () => {
+const getLoginFormCache = () => {
  const loginForm = authUtil.getLoginForm()
  if (loginForm) {
    loginData.loginForm = {
      ...loginData.loginForm,
      username: loginForm.username ? loginForm.username : loginData.loginForm.username,
      password: loginForm.password ? loginForm.password : loginData.loginForm.password,
-      rememberMe: loginForm.rememberMe ? true : false,
+      rememberMe: loginForm.rememberMe,
      tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName
    }
  }
@@ -326,7 +326,7 @@ watch(
  }
 )
 onMounted(() => {
-  getCookie()
+  getLoginFormCache()
  getTenantByWebsite()
 })
 </script>

--- a/src/views/bpm/category/CategoryForm.vue
+++ b/src/views/bpm/category/CategoryForm.vue
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="分类名" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入分类名" />
+      </el-form-item>
+      <el-form-item label="分类标志" prop="code">
+        <el-input v-model="formData.code" placeholder="请输入分类标志" />
+      </el-form-item>
+      <el-form-item label="分类状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="分类排序" prop="sort">
+        <el-input-number
+          v-model="formData.sort"
+          placeholder="请输入分类排序"
+          class="!w-1/1"
+          :precision="0"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
+/** BPM 流程分类 表单 */
+defineOptions({ name: 'CategoryForm' })
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  code: undefined,
+  status: undefined,
+  sort: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '分类名不能为空', trigger: 'blur' }],
+  code: [{ required: true, message: '分类标志不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '分类状态不能为空', trigger: 'blur' }],
+  sort: [{ required: true, message: '分类排序不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await CategoryApi.getCategory(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as CategoryVO
+    if (formType.value === 'create') {
+      await CategoryApi.createCategory(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await CategoryApi.updateCategory(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    code: undefined,
+    status: undefined,
+    sort: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
--- a/src/views/bpm/category/index.vue
+++ b/src/views/bpm/category/index.vue
+<template>
+  <doc-alert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="分类名" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入分类名"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="分类标志" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入分类标志"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="分类状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择分类状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['bpm:category:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="分类编号" align="center" prop="id" />
+      <el-table-column label="分类名" align="center" prop="name" />
+      <el-table-column label="分类标志" align="center" prop="code" />
+      <el-table-column label="分类描述" align="center" prop="description" />
+      <el-table-column label="分类状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="分类排序" align="center" prop="sort" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['bpm:category:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['bpm:category:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+  <!-- 表单弹窗：添加/修改 -->
+  <CategoryForm ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
+import CategoryForm from './CategoryForm.vue'
+/** BPM 流程分类 列表 */
+defineOptions({ name: 'BpmCategory' })
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const loading = ref(true) // 列表的加载中
+const list = ref<CategoryVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  code: undefined,
+  status: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await CategoryApi.getCategoryPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await CategoryApi.deleteCategory(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
--- a/src/views/bpm/definition/index.vue
+++ b/src/views/bpm/definition/index.vue
@@ -11,11 +11,7 @@
          </el-button>
        </template>
      </el-table-column>
-      <el-table-column label="定义分类" align="center" prop="category" width="100">
+      <el-table-column label="定义分类" align="center" prop="categoryName" width="100" />
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
-        </template>
-      </el-table-column>
      <el-table-column label="表单信息" align="center" prop="formType" width="200">
        <template #default="scope">
          <el-button
@@ -57,18 +53,6 @@
        width="300"
        show-overflow-tooltip
      />
-      <el-table-column label="操作" align="center" width="150" fixed="right">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="handleAssignRule(scope.row)"
-            v-hasPermi="['bpm:task-assign-rule:query']"
-          >
-            分配规则
-          </el-button>
-        </template>
-      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
@@ -88,8 +72,8 @@
  <Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
    <MyProcessViewer
      key="designer"
-      v-model="bpmnXML"
+      v-model="bpmnXml"
-      :value="bpmnXML as any"
+      :value="bpmnXml as any"
      v-bind="bpmnControlForm"
      :prefix="bpmnControlForm.prefix"
    />
@@ -97,7 +81,6 @@
 </template>
 <script lang="ts" setup>
-import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
 import * as DefinitionApi from '@/api/bpm/definition'
@@ -129,16 +112,6 @@ const getList = async () => {
  }
 }
-/** 点击任务分配按钮 */
-const handleAssignRule = (row) => {
-  push({
-    name: 'BpmTaskAssignRuleList',
-    query: {
-      modelId: row.id
-    }
-  })
-}
 /** 流程表单的详情按钮操作 */
 const formDetailVisible = ref(false)
 const formDetailPreview = ref({
@@ -160,12 +133,12 @@ const handleFormDetail = async (row) => {
 /** 流程图的详情按钮操作 */
 const bpmnDetailVisible = ref(false)
-const bpmnXML = ref(null)
+const bpmnXml = ref(null)
 const bpmnControlForm = ref({
  prefix: 'flowable'
 })
 const handleBpmnDetail = async (row) => {
-  bpmnXML.value = await DefinitionApi.getProcessDefinitionBpmnXML(row.id)
+  bpmnXml.value = (await DefinitionApi.getProcessDefinition(row.id))?.bpmnXml
  bpmnDetailVisible.value = true
 }

--- a/src/views/bpm/form/index.vue
+++ b/src/views/bpm/form/index.vue
 <template>
-  <doc-alert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+  <doc-alert title="审批接入（流程表单）" url="https://doc.iocoder.cn/bpm/use-bpm-form/" />
  <ContentWrap>
    <!-- 搜索工作栏 -->

--- a/src/views/bpm/group/UserGroupForm.vue
+++ b/src/views/bpm/group/UserGroupForm.vue
@@ -13,8 +13,8 @@
      <el-form-item label="描述">
        <el-input v-model="formData.description" placeholder="请输入描述" type="textarea" />
      </el-form-item>
-      <el-form-item label="成员" prop="memberUserIds">
+      <el-form-item label="成员" prop="userIds">
-        <el-select v-model="formData.memberUserIds" multiple placeholder="请选择成员">
+        <el-select v-model="formData.userIds" multiple placeholder="请选择成员">
          <el-option
            v-for="user in userList"
            :key="user.id"
@@ -60,13 +60,13 @@ const formData = ref({
  id: undefined,
  name: undefined,
  description: undefined,
-  memberUserIds: undefined,
+  userIds: undefined,
  status: CommonStatusEnum.ENABLE
 })
 const formRules = reactive({
  name: [{ required: true, message: '组名不能为空', trigger: 'blur' }],
  description: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
-  memberUserIds: [{ required: true, message: '成员不能为空', trigger: 'blur' }],
+  userIds: [{ required: true, message: '成员不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
@@ -124,7 +124,7 @@ const resetForm = () => {
    id: undefined,
    name: undefined,
    description: undefined,
-    memberUserIds: undefined,
+    userIds: undefined,
    status: CommonStatusEnum.ENABLE
  }
  formRef.value?.resetFields()

--- a/src/views/bpm/group/index.vue
+++ b/src/views/bpm/group/index.vue
@@ -63,7 +63,7 @@
      <el-table-column label="描述" align="center" prop="description" />
      <el-table-column label="成员" align="center">
        <template #default="scope">
-          <span v-for="userId in scope.row.memberUserIds" :key="userId" class="pr-5px">
+          <span v-for="userId in scope.row.userIds" :key="userId" class="pr-5px">
            {{ userList.find((user) => user.id === userId)?.nickname }}
          </span>
        </template>

--- a/src/views/bpm/model/ModelForm.vue
+++ b/src/views/bpm/model/ModelForm.vue
@@ -43,13 +43,16 @@
          style="width: 100%"
        >
          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY)"
+            v-for="category in categoryList"
-            :key="dict.value"
+            :key="category.code"
-            :label="dict.label"
+            :label="category.name"
-            :value="dict.value"
+            :value="category.code"
          />
        </el-select>
      </el-form-item>
+      <el-form-item v-if="formData.id" label="流程图标" prop="icon">
+        <UploadImg v-model="formData.icon" :limit="1" height="128px" width="128px" />
+      </el-form-item>
      <el-form-item label="流程描述" prop="description">
        <el-input v-model="formData.description" clearable type="textarea" />
      </el-form-item>
@@ -126,6 +129,7 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { ElMessageBox } from 'element-plus'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
+import { CategoryApi } from '@/api/bpm/category'
 defineOptions({ name: 'ModelForm' })
@@ -140,20 +144,23 @@ const formData = ref({
  formType: 10,
  name: '',
  category: undefined,
+  icon: undefined,
  description: '',
  formId: '',
  formCustomCreatePath: '',
  formCustomViewPath: ''
 })
 const formRules = reactive({
-  category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
  key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
+  category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
+  icon: [{ required: true, message: '参数图标不能为空', trigger: 'blur' }],
  value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 const formList = ref([]) // 流程表单的下拉框的数据
+const categoryList = ref([]) // 流程分类列表
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -171,7 +178,9 @@ const open = async (type: string, id?: number) => {
    }
  }
  // 获得流程表单的下拉框的数据
-  formList.value = await FormApi.getSimpleFormList()
+  formList.value = await FormApi.getFormSimpleList()
+  // 查询流程分类列表
+  categoryList.value = await CategoryApi.getCategorySimpleList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@@ -190,11 +199,10 @@ const submitForm = async () => {
      await ModelApi.createModel(data)
      // 提示，引导用户做后续的操作
      await ElMessageBox.alert(
-        '<strong>新建模型成功！</strong>后续需要执行如下 4 个步骤：' +
+        '<strong>新建模型成功！</strong>后续需要执行如下 3 个步骤：' +
          '<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
          '<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
-          '<div>3. 点击【分配规则】按钮，设置每个用户任务的审批人</div>' +
+          '<div>3. 点击【发布流程】按钮，完成流程的最终发布</div>' +
-          '<div>4. 点击【发布流程】按钮，完成流程的最终发布</div>' +
          '另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
        '重要提示',
        {
@@ -220,6 +228,7 @@ const resetForm = () => {
    formType: 10,
    name: '',
    category: undefined,
+    icon: '',
    description: '',
    formId: '',
    formCustomCreatePath: '',

--- a/src/views/bpm/model/ModelImportForm.vue
+++ b/src/views/bpm/model/ModelImportForm.vue
@@ -109,6 +109,7 @@ const submitFormSuccess = async (response: any) => {
  }
  // 提示成功
  message.success('导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】')
+  dialogVisible.value = false
  // 发送操作成功的事件
  emit('success')
 }

--- a/src/views/bpm/model/editor/index.vue
+++ b/src/views/bpm/model/editor/index.vue
@@ -89,11 +89,21 @@ onMounted(async () => {
  }
  // 查询模型
  const data = await ModelApi.getModel(modelId)
-  xmlString.value = data.bpmnXml
+  if (!data.bpmnXml) {
+    // 首次创建的 Model 模型，它是没有 bpmnXml，此时需要给它一个默认的
+    data.bpmnXml = ` <?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.activiti.org/processdef">
+  <process id="${data.key}" name="${data.name}" isExecutable="true" />
+  <bpmndi:BPMNDiagram id="BPMNDiagram">
+    <bpmndi:BPMNPlane id="${data.key}_di" bpmnElement="${data.key}" />
+  </bpmndi:BPMNDiagram>
+</definitions>`
+  }
  model.value = {
    ...data,
    bpmnXml: undefined // 清空 bpmnXml 属性
  }
+  xmlString.value = data.bpmnXml
 })
 </script>
 <style lang="scss">

--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
 <template>
-  <doc-alert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+  <doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
+  <doc-alert
+    title="流程设计器（钉钉、飞书）"
+    url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
+  />
+  <doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
+  <doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
  <ContentWrap>
    <!-- 搜索工作栏 -->
@@ -36,10 +42,10 @@
          class="!w-240px"
        >
          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY)"
+            v-for="category in categoryList"
-            :key="dict.value"
+            :key="category.code"
-            :label="dict.label"
+            :label="category.name"
-            :value="dict.value"
+            :value="category.code"
          />
        </el-select>
      </el-form-item>
@@ -72,11 +78,12 @@
          </el-button>
        </template>
      </el-table-column>
-      <el-table-column label="流程分类" align="center" prop="category" width="100">
+      <el-table-column label="流程图标" align="center" prop="icon" width="100">
        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
+          <el-image :src="scope.row.icon" class="w-32px h-32px" />
        </template>
      </el-table-column>
+      <el-table-column label="流程分类" align="center" prop="categoryName" width="100" />
      <el-table-column label="表单信息" align="center" prop="formType" width="200">
        <template #default="scope">
          <el-button
@@ -164,10 +171,10 @@
          <el-button
            link
            type="primary"
-            @click="handleAssignRule(scope.row)"
+            @click="handleSimpleDesign(scope.row.id)"
-            v-hasPermi="['bpm:task-assign-rule:query']"
+            v-hasPermi="['bpm:model:update']"
          >
-            分配规则
+            仿钉钉设计流程
          </el-button>
          <el-button
            link
@@ -229,7 +236,6 @@
 </template>
 <script lang="ts" setup>
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter, formatDate } from '@/utils/formatTime'
 import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
 import * as ModelApi from '@/api/bpm/model'
@@ -237,6 +243,7 @@ import * as FormApi from '@/api/bpm/form'
 import ModelForm from './ModelForm.vue'
 import ModelImportForm from '@/views/bpm/model/ModelImportForm.vue'
 import { setConfAndFields2 } from '@/utils/formCreate'
+import { CategoryApi } from '@/api/bpm/category'
 defineOptions({ name: 'BpmModel' })
@@ -255,6 +262,7 @@ const queryParams = reactive({
  category: undefined
 })
 const queryFormRef = ref() // 搜索的表单
+const categoryList = ref([]) // 流程分类列表
 /** 查询列表 */
 const getList = async () => {
@@ -334,6 +342,15 @@ const handleDesign = (row) => {
  })
 }
+const handleSimpleDesign = (row) => {
+  push({
+    name: 'SimpleWorkflowDesignEditor',
+    query: {
+      modelId: row.id
+    }
+  })
+}
 /** 发布流程 */
 const handleDeploy = async (row) => {
  try {
@@ -347,16 +364,6 @@ const handleDeploy = async (row) => {
  } catch {}
 }
-/** 点击任务分配按钮 */
-const handleAssignRule = (row) => {
-  push({
-    name: 'BpmTaskAssignRuleList',
-    query: {
-      modelId: row.id
-    }
-  })
-}
 /** 跳转到指定流程定义列表 */
 const handleDefinitionList = (row) => {
  push({
@@ -400,7 +407,9 @@ const handleBpmnDetail = async (row) => {
 }
 /** 初始化 **/
-onMounted(() => {
+onMounted(async () => {
-  getList()
+  await getList()
+  // 查询流程分类列表
+  categoryList.value = await CategoryApi.getCategorySimpleList()
 })
 </script>
--- a/src/views/bpm/oa/leave/create.vue
+++ b/src/views/bpm/oa/leave/create.vue
@@ -37,6 +37,36 @@
    <el-form-item label="原因" prop="reason">
      <el-input v-model="formData.reason" placeholder="请输请假原因" type="textarea" />
    </el-form-item>
+    <el-col v-if="startUserSelectTasks.length > 0">
+      <el-card class="mb-10px">
+        <template #header>指定审批人</template>
+        <el-form
+          :model="startUserSelectAssignees"
+          :rules="startUserSelectAssigneesFormRules"
+          ref="startUserSelectAssigneesFormRef"
+        >
+          <el-form-item
+            v-for="userTask in startUserSelectTasks"
+            :key="userTask.id"
+            :label="`任务【${userTask.name}】`"
+            :prop="userTask.id"
+          >
+            <el-select
+              v-model="startUserSelectAssignees[userTask.id]"
+              multiple
+              placeholder="请选择审批人"
+            >
+              <el-option
+                v-for="user in userList"
+                :key="user.id"
+                :label="user.nickname"
+                :value="user.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </el-col>
    <el-form-item>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
    </el-form-item>
@@ -46,10 +76,15 @@
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as LeaveApi from '@/api/bpm/leave'
 import { useTagsViewStore } from '@/store/modules/tagsView'
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as UserApi from '@/api/system/user'
 defineOptions({ name: 'BpmOALeaveCreate' })
 const message = useMessage() // 消息弹窗
+const { delView } = useTagsViewStore() // 视图操作
+const { push, currentRoute } = useRouter() // 路由
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formData = ref({
  type: undefined,
@@ -64,18 +99,34 @@ const formRules = reactive({
  endTime: [{ required: true, message: '请假结束时间不能为空', trigger: 'change' }]
 })
 const formRef = ref() // 表单 Ref
-const { delView } = useTagsViewStore() // 视图操作
-const { push, currentRoute } = useRouter() // 路由
+// 指定审批人
+const processDefineKey = 'oa_leave' // 流程定义 Key
+const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
+const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
+const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
+const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
+const userList = ref<any[]>([]) // 用户列表
 /** 提交表单 */
 const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
+  // 校验指定审批人
+  if (startUserSelectTasks.value?.length > 0) {
+    await startUserSelectAssigneesFormRef.value.validate()
+  }
  // 提交请求
  formLoading.value = true
  try {
-    const data = formData.value as unknown as LeaveApi.LeaveVO
+    const data = { ...formData.value } as unknown as LeaveApi.LeaveVO
+    // 设置指定审批人
+    if (startUserSelectTasks.value?.length > 0) {
+      data.startUserSelectAssignees = startUserSelectAssignees.value
+    }
    await LeaveApi.createLeave(data)
    message.success('发起成功')
    // 关闭当前 Tab
@@ -85,4 +136,29 @@ const submitForm = async () => {
    formLoading.value = false
  }
 }
+/** 初始化 */
+onMounted(async () => {
+  const processDefinitionDetail = await DefinitionApi.getProcessDefinition(
+    undefined,
+    processDefineKey
+  )
+  if (!processDefinitionDetail) {
+    message.error('OA 请假的流程模型未配置，请检查！')
+    return
+  }
+  startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
+  // 设置指定审批人
+  if (startUserSelectTasks.value?.length > 0) {
+    // 设置校验规则
+    for (const userTask of startUserSelectTasks.value) {
+      startUserSelectAssignees.value[userTask.id] = []
+      startUserSelectAssigneesFormRules.value[userTask.id] = [
+        { required: true, message: '请选择审批人', trigger: 'blur' }
+      ]
+    }
+    // 加载用户列表
+    userList.value = await UserApi.getSimpleUserList()
+  }
+})
 </script>
--- a/src/views/bpm/oa/leave/index.vue
+++ b/src/views/bpm/oa/leave/index.vue
 <template>
-  <doc-alert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+  <doc-alert title="审批接入（业务表单）" url="https://doc.iocoder.cn/bpm/use-business-form/" />
  <ContentWrap>
    <!-- 搜索工作栏 -->
@@ -36,10 +36,15 @@
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
-      <el-form-item label="结果" prop="result">
+      <el-form-item label="审批结果" prop="result">
-        <el-select v-model="queryParams.result" class="!w-240px" clearable placeholder="请选择结果">
+        <el-select
+          v-model="queryParams.result"
+          class="!w-240px"
+          clearable
+          placeholder="请选择审批结果"
+        >
          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
@@ -78,7 +83,7 @@
      <el-table-column align="center" label="申请编号" prop="id" />
      <el-table-column align="center" label="状态" prop="result">
        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result" />
+          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.result" />
        </template>
      </el-table-column>
      <el-table-column
@@ -166,7 +171,7 @@ const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  type: undefined,
-  result: undefined,
+  status: undefined,
  reason: undefined,
  createTime: []
 })
@@ -221,7 +226,7 @@ const cancelLeave = async (row) => {
    inputErrorMessage: '取消原因不能为空'
  })
  // 发起取消
-  await ProcessInstanceApi.cancelProcessInstance(row.id, value)
+  await ProcessInstanceApi.cancelProcessInstanceByStartUser(row.id, value)
  message.success('取消成功')
  // 刷新列表
  await getList()

--- a/src/views/bpm/processExpression/ProcessExpressionForm.vue
+++ b/src/views/bpm/processExpression/ProcessExpressionForm.vue
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名字" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="表达式" prop="expression">
+        <el-input type="textarea" v-model="formData.expression" placeholder="请输入表达式" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { ProcessExpressionApi, ProcessExpressionVO } from '@/api/bpm/processExpression'
+import { CommonStatusEnum } from '@/utils/constants'
+/** BPM 流程 表单 */
+defineOptions({ name: 'ProcessExpressionForm' })
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  status: undefined,
+  expression: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
+  expression: [{ required: true, message: '表达式不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ProcessExpressionApi.getProcessExpression(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ProcessExpressionVO
+    if (formType.value === 'create') {
+      await ProcessExpressionApi.createProcessExpression(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ProcessExpressionApi.updateProcessExpression(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    status: CommonStatusEnum.ENABLE,
+    expression: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
--- a/src/views/bpm/processExpression/index.vue
+++ b/src/views/bpm/processExpression/index.vue
+<template>
+  <doc-alert title="流程表达式" url="https://doc.iocoder.cn/bpm/expression/" />
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名字"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['bpm:process-expression:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="表达式" align="center" prop="expression" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['bpm:process-expression:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['bpm:process-expression:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+  <!-- 表单弹窗：添加/修改 -->
+  <ProcessExpressionForm ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { ProcessExpressionApi, ProcessExpressionVO } from '@/api/bpm/processExpression'
+import ProcessExpressionForm from './ProcessExpressionForm.vue'
+/** BPM 流程表达式列表 */
+defineOptions({ name: 'BpmProcessExpression' })
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const loading = ref(true) // 列表的加载中
+const list = ref<ProcessExpressionVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  status: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ProcessExpressionApi.getProcessExpressionPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ProcessExpressionApi.deleteProcessExpression(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
--- a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
@@ -33,21 +33,18 @@ const bpmnControlForm = ref({
  prefix: 'flowable'
 })
 const activityList = ref([]) // 任务列表
-// const bpmnXML = computed(() => { // TODO 芋艿：不晓得为啊哈不能这么搞
-//   if (!props.processInstance || !props.processInstance.processDefinition) {
-//     return
-//   }
-//   return DefinitionApi.getProcessDefinitionBpmnXML(props.processInstance.processDefinition.id)
-// })
-/** 初始化 */
+/** 只有 loading 完成时，才去加载流程列表 */
-onMounted(async () => {
+watch(
-  if (props.id) {
+  () => props.loading,
-    activityList.value = await ActivityApi.getActivityList({
+  async (value) => {
-      processInstanceId: props.id
+    if (value && props.id) {
-    })
+      activityList.value = await ActivityApi.getActivityList({
+        processInstanceId: props.id
+      })
+    }
  }
-})
+)
 </script>
 <style>
 .box-card {

--- a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
@@ -3,25 +3,44 @@
    <template #header>
      <span class="el-icon-picture-outline">审批记录</span>
    </template>
-    <el-col :offset="4" :span="16">
+    <el-col :offset="3" :span="17">
      <div class="block">
        <el-timeline>
          <el-timeline-item
+            v-if="processInstance.endTime"
+            :type="getProcessInstanceTimelineItemType(processInstance)"
+          >
+            <p style="font-weight: 700">
+              结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束
+              <dict-tag
+                :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
+                :value="processInstance.status"
+              />
+            </p>
+          </el-timeline-item>
+          <el-timeline-item
            v-for="(item, index) in tasks"
            :key="index"
-            :icon="getTimelineItemIcon(item)"
+            :type="getTaskTimelineItemType(item)"
-            :type="getTimelineItemType(item)"
          >
            <p style="font-weight: 700">
-              任务：{{ item.name }}
+              审批任务：{{ item.name }}
-              <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="item.result" />
+              <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="item.status" />
              <el-button
-                style="margin-left: 5px"
+                class="ml-10px"
                v-if="!isEmpty(item.children)"
                @click="openChildrenTask(item)"
+                size="small"
+              >
+                <Icon icon="ep:memo" /> 子任务
+              </el-button>
+              <el-button
+                class="ml-10px"
+                size="small"
+                v-if="item.formId > 0"
+                @click="handleFormDetail(item)"
              >
-                <Icon icon="ep:memo" />
+                <Icon icon="ep:document" /> 查看表单
-                子任务
              </el-button>
            </p>
            <el-card :body-style="{ padding: '10px' }">
@@ -45,84 +64,112 @@
              <label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
                {{ formatPast2(item?.durationInMillis) }}
              </label>
-              <p v-if="item.reason">
+              <p v-if="item.reason"> 审批建议：{{ item.reason }} </p>
-                <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
-              </p>
            </el-card>
          </el-timeline-item>
+          <el-timeline-item type="success">
+            <p style="font-weight: 700">
+              发起流程：【{{ processInstance.startUser?.nickname }}】在
+              {{ formatDate(processInstance?.startTime) }} 发起【 {{ processInstance.name }} 】流程
+            </p>
+          </el-timeline-item>
        </el-timeline>
      </div>
    </el-col>
-    <!-- 子任务  -->
-    <ProcessInstanceChildrenTaskList ref="processInstanceChildrenTaskList" />
  </el-card>
+  <!-- 弹窗：子任务  -->
+  <TaskSignList ref="taskSignListRef" @success="refresh" />
+  <!-- 弹窗：表单 -->
+  <Dialog title="表单详情" v-model="taskFormVisible" width="600">
+    <form-create
+      ref="fApi"
+      v-model="taskForm.value"
+      :option="taskForm.option"
+      :rule="taskForm.rule"
+    />
+  </Dialog>
 </template>
 <script lang="ts" setup>
 import { formatDate, formatPast2 } from '@/utils/formatTime'
 import { propTypes } from '@/utils/propTypes'
 import { DICT_TYPE } from '@/utils/dict'
 import { isEmpty } from '@/utils/is'
-import ProcessInstanceChildrenTaskList from './ProcessInstanceChildrenTaskList.vue'
+import TaskSignList from './dialog/TaskSignList.vue'
+import type { ApiAttrs } from '@form-create/element-ui/types/config'
+import { setConfAndFields2 } from '@/utils/formCreate'
 defineOptions({ name: 'BpmProcessInstanceTaskList' })
 defineProps({
  loading: propTypes.bool, // 是否加载中
+  processInstance: propTypes.object, // 流程实例
  tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
 })
-/** 获得任务对应的 icon */
+/** 获得流程实例对应的颜色 */
-const getTimelineItemIcon = (item) => {
+const getProcessInstanceTimelineItemType = (item: any) => {
-  if (item.result === 1) {
+  if (item.status === 2) {
-    return 'el-icon-time'
+    return 'success'
-  }
-  if (item.result === 2) {
-    return 'el-icon-check'
-  }
-  if (item.result === 3) {
-    return 'el-icon-close'
  }
-  if (item.result === 4) {
+  if (item.status === 3) {
-    return 'el-icon-remove-outline'
+    return 'danger'
  }
-  if (item.result === 5) {
+  if (item.status === 4) {
-    return 'el-icon-back'
+    return 'warning'
  }
  return ''
 }
 /** 获得任务对应的颜色 */
-const getTimelineItemType = (item) => {
+const getTaskTimelineItemType = (item: any) => {
-  if (item.result === 1) {
+  if ([0, 1, 6, 7].includes(item.status)) {
    return 'primary'
  }
-  if (item.result === 2) {
+  if (item.status === 2) {
    return 'success'
  }
-  if (item.result === 3) {
+  if (item.status === 3) {
    return 'danger'
  }
-  if (item.result === 4) {
+  if (item.status === 4) {
    return 'info'
  }
-  if (item.result === 5) {
+  if (item.status === 5) {
-    return 'warning'
-  }
-  if (item.result === 6) {
-    return 'default'
-  }
-  if (item.result === 7 || item.result === 8) {
    return 'warning'
  }
  return ''
 }
-/**
+/** 子任务 */
- * 子任务
+const taskSignListRef = ref()
- */
+const openChildrenTask = (item: any) => {
-const processInstanceChildrenTaskList = ref()
+  taskSignListRef.value.open(item)
+}
+/** 查看表单 */
+const fApi = ref<ApiAttrs>() // form-create 的 API 操作类
+const taskForm = ref({
+  rule: [],
+  option: {},
+  value: {}
+}) // 流程任务的表单详情
+const taskFormVisible = ref(false)
+const handleFormDetail = async (row) => {
+  // 设置表单
+  setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
+  // 弹窗打开
+  taskFormVisible.value = true
+  // 隐藏提交、重置按钮，设置禁用只读
+  await nextTick()
+  fApi.value.fapi.btn.show(false)
+  fApi.value?.fapi?.resetBtn.show(false)
+  fApi.value?.fapi?.disabled(true)
+}
-const openChildrenTask = (item) => {
+/** 刷新数据 */
-  processInstanceChildrenTaskList.value.open(item)
+const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
+const refresh = () => {
+  emit('refresh')
 }
 </script>
--- a/src/views/bpm/processInstance/detail/TaskCCDialogForm.vue
+++ b/src/views/bpm/processInstance/detail/TaskCCDialogForm.vue
--- a/src/views/bpm/processInstance/detail/TaskDelegateForm.vue
+++ b/src/views/bpm/processInstance/detail/TaskDelegateForm.vue
--- a/src/views/bpm/processInstance/detail/TaskReturnDialogForm.vue
+++ b/src/views/bpm/processInstance/detail/TaskReturnDialogForm.vue
--- a/src/views/bpm/processInstance/detail/TaskAddSignDialogForm.vue
+++ b/src/views/bpm/processInstance/detail/TaskAddSignDialogForm.vue
--- a/src/views/bpm/processInstance/detail/TaskSubSignDialogForm.vue
+++ b/src/views/bpm/processInstance/detail/TaskSubSignDialogForm.vue
--- a/src/views/bpm/processInstance/detail/ProcessInstanceChildrenTaskList.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceChildrenTaskList.vue
--- a/src/views/bpm/processInstance/detail/TaskUpdateAssigneeForm.vue
+++ b/src/views/bpm/processInstance/detail/TaskUpdateAssigneeForm.vue
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
--- a/src/views/bpm/processInstance/manager/index.vue
+++ b/src/views/bpm/processInstance/manager/index.vue
--- a/src/views/bpm/processListener/ProcessListenerForm.vue
+++ b/src/views/bpm/processListener/ProcessListenerForm.vue
--- a/src/views/bpm/processListener/index.vue
+++ b/src/views/bpm/processListener/index.vue
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
--- a/src/views/bpm/task/cc/index.vue
+++ b/src/views/bpm/task/cc/index.vue
--- a/src/views/bpm/task/done/TaskDetail.vue
+++ b/src/views/bpm/task/done/TaskDetail.vue
--- a/src/views/bpm/task/done/index.vue
+++ b/src/views/bpm/task/done/index.vue
--- a/src/views/bpm/task/manager/index.vue
+++ b/src/views/bpm/task/manager/index.vue
--- a/src/views/bpm/task/todo/index.vue
+++ b/src/views/bpm/task/todo/index.vue
--- a/src/views/bpm/taskAssignRule/TaskAssignRuleForm.vue
+++ b/src/views/bpm/taskAssignRule/TaskAssignRuleForm.vue
--- a/src/views/bpm/taskAssignRule/index.vue
+++ b/src/views/bpm/taskAssignRule/index.vue
--- a/src/views/system/role/RoleForm.vue
+++ b/src/views/system/role/RoleForm.vue
--- a/types/global.d.ts
+++ b/types/global.d.ts
--- a/vite.config.ts
+++ b/vite.config.ts