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

# Conflicts: # pnpm-lock.yaml # src/views/ai/model/model/index.vue # src/views/bpm/model/form/index.vue
2025-03-14 22:18:04 +08:00
parent 4092bcc534 192453e47d
commit be6ae75ce5
82 changed files with 3492 additions and 1955 deletions
--- a/src/views/bpm/category/CategoryForm.vue
+++ b/src/views/bpm/category/CategoryForm.vue
@@ -13,6 +13,9 @@
      <el-form-item label="分类标志" prop="code">
        <el-input v-model="formData.code" placeholder="请输入分类标志" />
      </el-form-item>
+      <el-form-item label="分类描述" prop="description">
+        <el-input v-model="formData.description" type="textarea" placeholder="请输入分类描述" />
+      </el-form-item>
      <el-form-item label="分类状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio
@@ -58,6 +61,7 @@ const formData = ref({
  id: undefined,
  name: undefined,
  code: undefined,
+  description: undefined,
  status: CommonStatusEnum.ENABLE,
  sort: undefined
 })
@@ -117,6 +121,7 @@ const resetForm = () => {
    id: undefined,
    name: undefined,
    code: undefined,
+    description: undefined,
    status: CommonStatusEnum.ENABLE,
    sort: undefined
  }
--- a/src/views/bpm/form/editor/index.vue
+++ b/src/views/bpm/form/editor/index.vue
@@ -50,11 +50,13 @@ import FcDesigner from '@form-create/designer'
 import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { useFormCreateDesigner } from '@/components/FormCreate'
+import { useRoute } from 'vue-router'

 defineOptions({ name: 'BpmFormEditor' })

 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息
+const route = useRoute() // 路由
 const { push, currentRoute } = useRouter() // 路由
 const { query } = useRoute() // 路由信息
 const { delView } = useTagsViewStore() // 视图操作
@@ -150,6 +152,14 @@ onMounted(async () => {
  const data = await FormApi.getForm(id)
  formData.value = data
  setConfAndFields(designer, data.conf, data.fields)
+
+  if (route.query.type !== 'copy') {
+    return
+  }
+  // 场景三： 复制表单
+  const { id: foo, ...copied } = data
+  formData.value = copied
+  formData.value.name += '_copy'
 })
 </script>

--- a/src/views/bpm/form/index.vue
+++ b/src/views/bpm/form/index.vue
@@ -59,7 +59,15 @@
            v-hasPermi="['bpm:form:update']"
            link
            type="primary"
-            @click="openForm(scope.row.id)"
+            @click="openForm('copy', scope.row.id)"
+          >
+            复制
+          </el-button>
+          <el-button
+            v-hasPermi="['bpm:form:update']"
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
          >
            编辑
          </el-button>
@@ -139,16 +147,17 @@ const resetQuery = () => {
 }

 /** 添加/修改操作 */
-const openForm = (id?: number) => {
-  const toRouter: { name: string; query?: { id: number } } = {
-    name: 'BpmFormEditor'
+const openForm = (type: string, id?: number) => {
+  const toRouter: { name: string; query: { type: string; id?: number } } = {
+    name: 'BpmFormEditor',
+    query: {
+      type
+    }
  }
  console.log(typeof id)
  // 表单新建的时候id传的是event需要排除
  if (typeof id === 'number' || typeof id === 'string') {
-    toRouter.query = {
-      id
-    }
+    toRouter.query.id = id
  }
  push(toRouter)
 }
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center h-50px">
+  <div class="flex items-center h-50px" v-memo="[categoryInfo.name, isCategorySorting]">
    <!-- 头部：分类名 -->
    <div class="flex items-center">
      <el-tooltip content="拖动排序" v-if="isCategorySorting">
@@ -13,7 +13,7 @@
      <div class="color-gray-600 text-16px"> ({{ categoryInfo.modelList?.length || 0 }}) </div>
    </div>
    <!-- 头部：操作 -->
-    <div class="flex-1 flex" v-if="!isCategorySorting">
+    <div class="flex-1 flex" v-show="!isCategorySorting">
      <div
        v-if="categoryInfo.modelList.length > 0"
        class="ml-20px flex items-center"
@@ -69,16 +69,17 @@
  <el-collapse-transition>
    <div v-show="isExpand">
      <el-table
+        v-if="modelList && modelList.length > 0"
        :class="categoryInfo.name"
        ref="tableRef"
-        :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }"
-        :cell-style="{ paddingLeft: '10px' }"
-        :row-style="{ height: '68px' }"
        :data="modelList"
        row-key="id"
+        :header-cell-style="tableHeaderStyle"
+        :cell-style="tableCellStyle"
+        :row-style="{ height: '68px' }"
      >
        <el-table-column label="流程名" prop="name" min-width="150">
-          <template #default="scope">
+          <template #default="{ row }">
            <div class="flex items-center">
              <el-tooltip content="拖动排序" v-if="isModelSorting">
                <Icon
@@ -86,27 +87,28 @@
                  class="drag-icon cursor-move text-#8a909c mr-10px"
                />
              </el-tooltip>
-              <el-image :src="scope.row.icon" class="h-38px w-38px mr-10px rounded" />
-              {{ scope.row.name }}
+              <el-image v-if="row.icon" :src="row.icon" class="h-38px w-38px mr-10px rounded" />
+              <div v-else class="flow-icon">
+                <span style="font-size: 12px; color: #fff">{{ sliceName(row.name,0,2) }}</span>
+              </div>
+              {{ row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="可见范围" prop="startUserIds" min-width="150">
-          <template #default="scope">
-            <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
-              全部可见
-            </el-text>
-            <el-text v-else-if="scope.row.startUsers.length == 1">
-              {{ scope.row.startUsers[0].nickname }}
+          <template #default="{ row }">
+            <el-text v-if="!row.startUsers?.length"> 全部可见 </el-text>
+            <el-text v-else-if="row.startUsers.length === 1">
+              {{ row.startUsers[0].nickname }}
            </el-text>
            <el-text v-else>
              <el-tooltip
                class="box-item"
                effect="dark"
                placement="top"
-                :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+                :content="row.startUsers.map((user: any) => user.nickname).join('、')"
              >
-                {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
+                {{ row.startUsers[0].nickname }}等 {{ row.startUsers.length }} 人可见
              </el-tooltip>
            </el-text>
          </template>
@@ -158,17 +160,26 @@
              link
              type="primary"
              @click="openModelForm('update', scope.row.id)"
-              v-hasPermi="['bpm:model:update']"
+              v-if="hasPermiUpdate"
              :disabled="!isManagerUser(scope.row)"
            >
              修改
            </el-button>
+            <el-button
+              link
+              type="primary"
+              @click="openModelForm('copy', scope.row.id)"
+              v-if="hasPermiUpdate"
+              :disabled="!isManagerUser(scope.row)"
+            >
+              复制
+            </el-button>
            <el-button
              link
              class="!ml-5px"
              type="primary"
              @click="handleDeploy(scope.row)"
-              v-hasPermi="['bpm:model:deploy']"
+              v-if="hasPermiDeploy"
              :disabled="!isManagerUser(scope.row)"
            >
              发布
@@ -176,28 +187,43 @@
            <el-dropdown
              class="!align-middle ml-5px"
              @command="(command) => handleModelCommand(command, scope.row)"
-              v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
+              v-if="hasPermiMore"
            >
              <el-button type="primary" link>更多</el-button>
              <template #dropdown>
                <el-dropdown-menu>
-                  <el-dropdown-item
-                    command="handleDefinitionList"
-                    v-if="checkPermi(['bpm:process-definition:query'])"
-                  >
+                  <el-dropdown-item command="handleDefinitionList" v-if="hasPermiPdQuery">
                    历史
                  </el-dropdown-item>
+                  <el-dropdown-item
+                    command="handleReport"
+                    v-if="
+                      checkPermi(['bpm:process-instance:manager-query']) &&
+                      scope.row.processDefinition
+                    "
+                    :disabled="!isManagerUser(scope.row)"
+                  >
+                    报表
+                  </el-dropdown-item>
                  <el-dropdown-item
                    command="handleChangeState"
-                    v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
+                    v-if="hasPermiUpdate && scope.row.processDefinition"
                    :disabled="!isManagerUser(scope.row)"
                  >
                    {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
                  </el-dropdown-item>
+                  <el-dropdown-item
+                    type="danger"
+                    command="handleClean"
+                    v-if="checkPermi(['bpm:model:clean'])"
+                    :disabled="!isManagerUser(scope.row)"
+                  >
+                    清理
+                  </el-dropdown-item>
                  <el-dropdown-item
                    type="danger"
                    command="handleDelete"
-                    v-if="checkPermi(['bpm:model:delete'])"
+                    v-if="hasPermiDelete"
                    :disabled="!isManagerUser(scope.row)"
                  >
                    删除
@@ -227,15 +253,15 @@
    </template>
  </Dialog>

-  <!-- 表单弹窗：添加流程模型 -->
-  <ModelForm :categoryId="categoryInfo.code" ref="modelFormRef" @success="emit('success')" />
+  <!-- 弹窗：表单详情 -->
+  <Dialog title="表单详情" :fullscreen="true" v-model="formDetailVisible">
+    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+  </Dialog>
 </template>

 <script lang="ts" setup>
-import ModelForm from './ModelForm.vue'
 import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import Sortable from 'sortablejs'
-import { propTypes } from '@/utils/propTypes'
 import { formatDate } from '@/utils/formatTime'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
@@ -244,26 +270,90 @@ import { BpmModelFormType } from '@/utils/constants'
 import { checkPermi } from '@/utils/permission'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { useAppStore } from '@/store/modules/app'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep, isEqual } from 'lodash-es'
+import { useTagsView } from '@/hooks/web/useTagsView'
+import { useDebounceFn } from '@vueuse/core'
+import { sliceName } from '@/utils/index'

 defineOptions({ name: 'BpmModel' })

-const props = defineProps({
-  categoryInfo: propTypes.object.def([]), // 分类后的数据
-  isCategorySorting: propTypes.bool.def(false) // 是否分类在排序
-})
+// 优化 Props 类型定义
+interface UserInfo {
+  nickname: string
+  [key: string]: any
+}
+
+interface ProcessDefinition {
+  deploymentTime: string
+  version: number
+  suspensionState: number
+}
+
+interface ModelInfo {
+  id: number
+  name: string
+  icon?: string
+  startUsers?: UserInfo[]
+  processDefinition?: ProcessDefinition
+  formType?: number
+  formId?: number
+  formName?: string
+  formCustomCreatePath?: string
+  managerUserIds?: number[]
+  [key: string]: any
+}
+
+interface CategoryInfoProps {
+  id: number
+  name: string
+  modelList: ModelInfo[]
+}
+
+const props = defineProps<{
+  categoryInfo: CategoryInfoProps
+  isCategorySorting: boolean
+}>()
+
 const emit = defineEmits(['success'])
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由
 const userStore = useUserStoreWithOut() // 用户信息缓存
 const isDark = computed(() => useAppStore().getIsDark) // 是否黑暗模式
+const router = useRouter() // 路由

 const isModelSorting = ref(false) // 是否正处于排序状态
-const originalData: any = ref([]) // 原始数据
-const modelList: any = ref([]) // 模型列表
+const originalData = ref<ModelInfo[]>([]) // 原始数据
+const modelList = ref<ModelInfo[]>([]) // 模型列表
 const isExpand = ref(false) // 是否处于展开状态

+// 使用 computed 优化表格样式计算
+const tableHeaderStyle = computed(() => ({
+  backgroundColor: isDark.value ? '' : '#edeff0',
+  paddingLeft: '10px'
+}))
+
+const tableCellStyle = computed(() => ({
+  paddingLeft: '10px'
+}))
+
+/** 权限校验：通过 computed 解决列表的卡顿问题 */
+const hasPermiUpdate = computed(() => {
+  return checkPermi(['bpm:model:update'])
+})
+const hasPermiDelete = computed(() => {
+  return checkPermi(['bpm:model:delete'])
+})
+const hasPermiDeploy = computed(() => {
+  return checkPermi(['bpm:model:deploy'])
+})
+const hasPermiMore = computed(() => {
+  return checkPermi(['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete'])
+})
+const hasPermiPdQuery = computed(() => {
+  return checkPermi(['bpm:process-definition:query'])
+})
+
 /** '更多'操作按钮 */
 const handleModelCommand = (command: string, row: any) => {
  switch (command) {
@@ -276,6 +366,18 @@ const handleModelCommand = (command: string, row: any) => {
    case 'handleChangeState':
      handleChangeState(row)
      break
+    case 'handleClean':
+      handleClean(row)
+      break
+    case 'handleReport':
+      router.push({
+        name: 'BpmProcessInstanceReport',
+        query: {
+          processDefinitionId: row.processDefinition.id,
+          processDefinitionKey: row.key
+        }
+      })
+      break
    default:
      break
  }
@@ -309,6 +411,19 @@ const handleDelete = async (row: any) => {
  } catch {}
 }

+/** 清理按钮操作 */
+const handleClean = async (row: any) => {
+  try {
+    // 清理的二次确认
+    await message.confirm('是否确认清理流程名字为"' + row.name + '"的数据项?')
+    // 发起清理
+    await ModelApi.cleanModel(row.id)
+    message.success('清理成功')
+    // 刷新列表
+    emit('success')
+  } catch {}
+}
+
 /** 更新状态操作 */
 const handleChangeState = async (row: any) => {
  const state = row.processDefinition.suspensionState
@@ -331,11 +446,10 @@ const handleChangeState = async (row: any) => {
 /** 发布流程 */
 const handleDeploy = async (row: any) => {
  try {
-    // 删除的二次确认
-    await message.confirm('是否部署该流程！！')
+    await message.confirm('是否确认发布该流程？')
    // 发起部署
    await ModelApi.deployModel(row.id)
-    message.success(t('部署成功'))
+    message.success(t('发布成功'))
    // 刷新列表
    emit('success')
  } catch {}
@@ -358,7 +472,7 @@ const formDetailPreview = ref({
  option: {}
 })
 const handleFormDetail = async (row: any) => {
-  if (row.formType == 10) {
+  if (row.formType == BpmModelFormType.NORMAL) {
    // 设置表单
    const data = await FormApi.getForm(row.formId)
    setConfAndFields2(formDetailPreview, data.conf, data.fields)
@@ -405,14 +519,15 @@ const handleModelSortCancel = () => {

 /** 创建拖拽实例 */
 const tableRef = ref()
-const initSort = () => {
+const initSort = useDebounceFn(() => {
  const table = document.querySelector(`.${props.categoryInfo.name} .el-table__body-wrapper tbody`)
+  if (!table) return
+
  Sortable.create(table, {
    group: 'shared',
    animation: 150,
    draggable: '.el-table__row',
    handle: '.drag-icon',
-    // 结束拖动事件
    onEnd: ({ newDraggableIndex, oldDraggableIndex }) => {
      if (oldDraggableIndex !== newDraggableIndex) {
        modelList.value.splice(
@@ -423,15 +538,18 @@ const initSort = () => {
      }
    }
  })
-}
+}, 200)

 /** 更新 modelList 模型列表 */
-const updateModeList = () => {
-  modelList.value = cloneDeep(props.categoryInfo.modelList)
-  if (props.categoryInfo.modelList.length > 0) {
-    isExpand.value = true
+const updateModeList = useDebounceFn(() => {
+  const newModelList = props.categoryInfo.modelList
+  if (!isEqual(modelList.value, newModelList)) {
+    modelList.value = cloneDeep(newModelList)
+    if (newModelList?.length > 0) {
+      isExpand.value = true
+    }
  }
-}
+}, 100)

 /** 重命名弹窗确定 */
 const renameCategoryVisible = ref(false)
@@ -466,26 +584,31 @@ const handleDeleteCategory = async () => {
 }

 /** 添加流程模型弹窗 */
-const modelFormRef = ref()
-const openModelForm = (type: string, id?: number) => {
+const tagsView = useTagsView()
+const openModelForm = async (type: string, id?: number) => {
  if (type === 'create') {
-    push({ name: 'BpmModelCreate' })
+    await push({ name: 'BpmModelCreate' })
  } else {
-    push({
+    await push({
      name: 'BpmModelUpdate',
-      params: { id }
+      params: { id, type }
    })
+    // 设置标题
+    if (type === 'copy') {
+      tagsView.setTitle('复制流程')
+    }
  }
 }

-watch(() => props.categoryInfo.modelList, updateModeList, { immediate: true })
-watch(
-  () => props.isCategorySorting,
-  (val) => {
-    if (val) isExpand.value = false
-  },
-  { immediate: true }
-)
+watchEffect(() => {
+  if (props.categoryInfo?.modelList) {
+    updateModeList()
+  }
+
+  if (props.isCategorySorting) {
+    isExpand.value = false
+  }
+})
 </script>

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

 const props = defineProps<{
  modelId?: string
-  modelKey?: string
-  modelName?: string
+  modelKey: string
+  modelName: string
  value?: string
 }>()

@@ -51,10 +53,13 @@ const formType = ref(20)
 provide('formFields', formFields)
 provide('formType', formType)

-const xmlString = ref<string>('') // BPMN XML
+// 注入流程数据
+const xmlString = inject('processData') as Ref
+// 注入模型数据
+const modelData = inject('modelData') as Ref
+
 const modeler = shallowRef() // BPMN Modeler
 const processDesigner = ref()
-const isModelerReady = ref(false)
 const controlForm = ref({
  simulation: true,
  labelEditing: false,
@@ -65,154 +70,26 @@ const controlForm = ref({
 })
 const model = ref<ModelApi.ModelVO>() // 流程模型的信息

-// 初始化 bpmnInstances
-const initBpmnInstances = () => {
-  if (!modeler.value) return false
-  try {
-    const instances = {
-      modeler: modeler.value,
-      modeling: modeler.value.get('modeling'),
-      moddle: modeler.value.get('moddle'),
-      eventBus: modeler.value.get('eventBus'),
-      bpmnFactory: modeler.value.get('bpmnFactory'),
-      elementFactory: modeler.value.get('elementFactory'),
-      elementRegistry: modeler.value.get('elementRegistry'),
-      replace: modeler.value.get('replace'),
-      selection: modeler.value.get('selection')
-    }
-
-    // 检查所有实例是否都存在
-    return Object.values(instances).every((instance) => instance)
-  } catch (error) {
-    console.error('初始化 bpmnInstances 失败:', error)
-    return false
-  }
-}
-
 /** 初始化 modeler */
-const initModeler = async (item) => {
-  try {
-    modeler.value = item
-    // 等待 modeler 初始化完成
-    await nextTick()
-
-    // 确保 modeler 的所有实例都已经准备好
-    if (initBpmnInstances()) {
-      isModelerReady.value = true
-      emit('init-finished')
-
-      // 初始化完成后，设置初始值
-      if (props.modelId) {
-        // 编辑模式
-        const data = await ModelApi.getModel(props.modelId)
-        model.value = {
-          ...data,
-          bpmnXml: undefined // 清空 bpmnXml 属性
-        }
-        xmlString.value = data.bpmnXml || getDefaultBpmnXml(data.key, data.name)
-      } else if (props.modelKey && props.modelName) {
-        // 新建模式
-        xmlString.value = props.value || getDefaultBpmnXml(props.modelKey, props.modelName)
-        model.value = {
-          key: props.modelKey,
-          name: props.modelName
-        } as ModelApi.ModelVO
-      }
-
-      // 导入XML并刷新视图
-      await nextTick()
-      try {
-        await modeler.value.importXML(xmlString.value)
-        if (processDesigner.value?.refresh) {
-          processDesigner.value.refresh()
-        }
-      } catch (error) {
-        console.error('导入XML失败:', error)
-      }
-    } else {
-      console.error('modeler 实例未完全初始化')
-    }
-  } catch (error) {
-    console.error('初始化 modeler 失败:', error)
-  }
-}
-
-/** 获取默认的BPMN XML */
-const getDefaultBpmnXml = (key: string, name: string) => {
-  return `<?xml version="1.0" encoding="UTF-8"?>
-<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.activiti.org/processdef">
-  <process id="${key}" name="${name}" isExecutable="true" />
-  <bpmndi:BPMNDiagram id="BPMNDiagram">
-    <bpmndi:BPMNPlane id="${key}_di" bpmnElement="${key}" />
-  </bpmndi:BPMNDiagram>
-</definitions>`
+const initModeler = async (item: any) => {
+  //先初始化模型数据
+  model.value = modelData.value
+  modeler.value = item
 }

 /** 添加/修改模型 */
 const save = async (bpmnXml: string) => {
  try {
    xmlString.value = bpmnXml
-    if (props.modelId) {
-      // 编辑模式
-      const data = {
-        ...model.value,
-        bpmnXml: bpmnXml
-      } as unknown as ModelApi.ModelVO
-      await ModelApi.updateModelBpmn(data)
-      emit('success')
-    } else {
-      // 新建模式，直接返回XML
-      emit('success', bpmnXml)
-    }
+    emit('success', bpmnXml)
  } catch (error) {
    console.error('保存失败:', error)
    message.error('保存失败')
  }
 }

-// 监听 key、name 和 value 的变化
-watch(
-  [() => props.modelKey, () => props.modelName, () => props.value],
-  async ([newKey, newName, newValue]) => {
-    if (!props.modelId && isModelerReady.value) {
-      let shouldRefresh = false
-
-      if (newKey && newName) {
-        const newXml = newValue || getDefaultBpmnXml(newKey, newName)
-        if (newXml !== xmlString.value) {
-          xmlString.value = newXml
-          shouldRefresh = true
-        }
-        model.value = {
-          ...model.value,
-          key: newKey,
-          name: newName
-        } as ModelApi.ModelVO
-      } else if (newValue && newValue !== xmlString.value) {
-        xmlString.value = newValue
-        shouldRefresh = true
-      }
-
-      if (shouldRefresh) {
-        // 确保更新后重新渲染
-        await nextTick()
-        if (processDesigner.value?.refresh) {
-          try {
-            await modeler.value?.importXML(xmlString.value)
-            processDesigner.value.refresh()
-          } catch (error) {
-            console.error('导入XML失败:', error)
-          }
-        }
-      }
-    }
-  },
-  { deep: true }
-)
-
 // 在组件卸载时清理
 onBeforeUnmount(() => {
-  isModelerReady.value = false
  modeler.value = null
  // 清理全局实例
  const w = window as any
@@ -220,55 +97,6 @@ onBeforeUnmount(() => {
    w.bpmnInstances = null
  }
 })
-
-/** 获取 XML 字符串 */
-const saveXML = async () => {
-  if (!modeler.value) {
-    return { xml: xmlString.value }
-  }
-  try {
-    const result = await modeler.value.saveXML({ format: true })
-    xmlString.value = result.xml
-    return result
-  } catch (error) {
-    console.error('获取XML失败:', error)
-    return { xml: xmlString.value }
-  }
-}
-
-/** 获取SVG字符串 */
-const saveSVG = async () => {
-  if (!modeler.value) {
-    return { svg: undefined }
-  }
-  try {
-    return await modeler.value.saveSVG()
-  } catch (error) {
-    console.error('获取SVG失败:', error)
-    return { svg: undefined }
-  }
-}
-
-/** 刷新视图 */
-const refresh = async () => {
-  if (processDesigner.value?.refresh && modeler.value) {
-    try {
-      await modeler.value.importXML(xmlString.value)
-      processDesigner.value.refresh()
-    } catch (error) {
-      console.error('刷新视图失败:', error)
-    }
-  }
-}
-
-// 暴露必要的属性和方法给父组件
-defineExpose({
-  modeler,
-  isModelerReady,
-  saveXML,
-  saveSVG,
-  refresh
-})
 </script>
 <style lang="scss">
 .process-panel__container {
--- a/src/views/bpm/model/form/BasicInfo.vue
+++ b/src/views/bpm/model/form/BasicInfo.vue
@@ -6,7 +6,7 @@
          class="!w-440px"
          v-model="modelData.key"
          :disabled="!!modelData.id"
-          placeholder="请输入流标标识"
+          placeholder="请输入流程标识，以字母或下划线开头"
        />
        <el-tooltip
          class="item"
@@ -41,7 +41,7 @@
        />
      </el-select>
    </el-form-item>
-    <el-form-item label="流程图标" prop="icon" class="mb-20px">
+    <el-form-item label="流程图标" class="mb-20px">
      <UploadImg v-model="modelData.icon" :limit="1" height="64px" width="64px" />
    </el-form-item>
    <el-form-item label="流程描述" prop="description" class="mb-20px">
@@ -62,7 +62,7 @@
      <el-radio-group v-model="modelData.visible">
        <el-radio
          v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-          :key="dict.value"
+          :key="dict.value as string"
          :value="dict.value"
        >
          {{ dict.label }}
@@ -77,7 +77,6 @@
      >
        <el-option label="全员" :value="0" />
        <el-option label="指定人员" :value="1" />
-        <el-option label="均不可提交" :value="2" />
      </el-select>
      <div v-if="modelData.startUserType === 1" class="mt-2 flex flex-wrap gap-2">
        <div
@@ -97,21 +96,12 @@
          />
        </div>
        <el-button type="primary" link @click="openStartUserSelect">
-          <Icon icon="ep:plus" />选择人员
+          <Icon icon="ep:plus" /> 选择人员
        </el-button>
      </div>
    </el-form-item>
-    <el-form-item label="流程管理员" prop="managerUserType" class="mb-20px">
-      <el-select
-        v-model="modelData.managerUserType"
-        placeholder="请选择流程管理员"
-        @change="handleManagerUserTypeChange"
-      >
-        <el-option label="全员" :value="0" />
-        <el-option label="指定人员" :value="1" />
-        <el-option label="均不可提交" :value="2" />
-      </el-select>
-      <div v-if="modelData.managerUserType === 1" class="mt-2 flex flex-wrap gap-2">
+    <el-form-item label="流程管理员" prop="managerUserIds" class="mb-20px">
+      <div class="flex flex-wrap gap-2">
        <div
          v-for="user in selectedManagerUsers"
          :key="user.id"
@@ -142,14 +132,11 @@
 <script lang="ts" setup>
 import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
 import { UserVO } from '@/api/system/user'
+import { CategoryVO } from '@/api/bpm/category'

 const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true
-  },
  categoryList: {
-    type: Array,
+    type: Array as PropType<CategoryVO[]>,
    required: true
  },
  userList: {
@@ -158,8 +145,6 @@ const props = defineProps({
  }
 })

-const emit = defineEmits(['update:modelValue'])
-
 const formRef = ref()
 const selectedStartUsers = ref<UserVO[]>([])
 const selectedManagerUsers = ref<UserVO[]>([])
@@ -170,34 +155,36 @@ const rules = {
  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
  category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
-  icon: [{ required: true, message: '流程图标不能为空', trigger: 'blur' }],
  type: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
  managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
 }

 // 创建本地数据副本
-const modelData = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})
+const modelData = defineModel<any>()

 // 初始化选中的用户
 watch(
-  () => props.modelValue,
+  () => modelData.value,
  (newVal) => {
    if (newVal.startUserIds?.length) {
      selectedStartUsers.value = props.userList.filter((user: UserVO) =>
        newVal.startUserIds.includes(user.id)
      ) as UserVO[]
+    } else {
+      selectedStartUsers.value = []
    }
    if (newVal.managerUserIds?.length) {
      selectedManagerUsers.value = props.userList.filter((user: UserVO) =>
        newVal.managerUserIds.includes(user.id)
      ) as UserVO[]
+    } else {
+      selectedManagerUsers.value = []
    }
  },
-  { immediate: true }
+  {
+    immediate: true
+  }
 )

 /** 打开发起人选择 */
@@ -215,58 +202,42 @@ const openManagerUserSelect = () => {
 /** 处理用户选择确认 */
 const handleUserSelectConfirm = (_, users: UserVO[]) => {
  if (currentSelectType.value === 'start') {
-    selectedStartUsers.value = users
-    emit('update:modelValue', {
+    modelData.value = {
      ...modelData.value,
      startUserIds: users.map((u) => u.id)
-    })
+    }
  } else {
-    selectedManagerUsers.value = users
-    emit('update:modelValue', {
+    modelData.value = {
      ...modelData.value,
      managerUserIds: users.map((u) => u.id)
-    })
+    }
  }
 }

 /** 处理发起人类型变化 */
 const handleStartUserTypeChange = (value: number) => {
  if (value !== 1) {
-    selectedStartUsers.value = []
-    emit('update:modelValue', {
+    modelData.value = {
      ...modelData.value,
      startUserIds: []
-    })
-  }
-}
-
-/** 处理管理员类型变化 */
-const handleManagerUserTypeChange = (value: number) => {
-  if (value !== 1) {
-    selectedManagerUsers.value = []
-    emit('update:modelValue', {
-      ...modelData.value,
-      managerUserIds: []
-    })
+    }
  }
 }

 /** 移除发起人 */
 const handleRemoveStartUser = (user: UserVO) => {
-  selectedStartUsers.value = selectedStartUsers.value.filter((u) => u.id !== user.id)
-  emit('update:modelValue', {
+  modelData.value = {
    ...modelData.value,
    startUserIds: modelData.value.startUserIds.filter((id: number) => id !== user.id)
-  })
+  }
 }

 /** 移除管理员 */
 const handleRemoveManagerUser = (user: UserVO) => {
-  selectedManagerUsers.value = selectedManagerUsers.value.filter((u) => u.id !== user.id)
-  emit('update:modelValue', {
+  modelData.value = {
    ...modelData.value,
    managerUserIds: modelData.value.managerUserIds.filter((id: number) => id !== user.id)
-  })
+  }
 }

 /** 表单校验 */
--- a/src/views/bpm/model/form/ExtraSettings.vue
+++ b/src/views/bpm/model/form/ExtraSettings.vue
@@ -0,0 +1,289 @@
+<template>
+  <el-form ref="formRef" :model="modelData" label-width="120px" class="mt-20px">
+    <el-form-item class="mb-20px">
+      <template #label>
+        <el-text size="large" tag="b">提交人权限</el-text>
+      </template>
+      <div class="flex flex-col">
+        <el-checkbox v-model="modelData.allowCancelRunningProcess" label="允许撤销审批中的申请" />
+        <div class="ml-22px">
+          <el-text type="info"> 第一个审批节点通过后，提交人仍可撤销申请 </el-text>
+        </div>
+      </div>
+    </el-form-item>
+    <el-form-item v-if="modelData.processIdRule" class="mb-20px">
+      <template #label>
+        <el-text size="large" tag="b">流程编码</el-text>
+      </template>
+      <div class="flex flex-col">
+        <div>
+          <el-input
+            v-model="modelData.processIdRule.prefix"
+            class="w-130px!"
+            placeholder="前缀"
+            :disabled="!modelData.processIdRule.enable"
+          >
+            <template #prepend>
+              <el-checkbox v-model="modelData.processIdRule.enable" />
+            </template>
+          </el-input>
+          <el-select
+            v-model="modelData.processIdRule.infix"
+            class="w-130px! ml-5px"
+            placeholder="中缀"
+            :disabled="!modelData.processIdRule.enable"
+          >
+            <el-option
+              v-for="item in timeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-input
+            v-model="modelData.processIdRule.postfix"
+            class="w-80px! ml-5px"
+            placeholder="后缀"
+            :disabled="!modelData.processIdRule.enable"
+          />
+          <el-input-number
+            v-model="modelData.processIdRule.length"
+            class="w-120px! ml-5px"
+            :min="5"
+            :disabled="!modelData.processIdRule.enable"
+          />
+        </div>
+        <div class="ml-22px" v-if="modelData.processIdRule.enable">
+          <el-text type="info"> 编码示例：{{ numberExample }} </el-text>
+        </div>
+      </div>
+    </el-form-item>
+    <el-form-item class="mb-20px">
+      <template #label>
+        <el-text size="large" tag="b">自动去重</el-text>
+      </template>
+      <div class="flex flex-col">
+        <div>
+          <el-text> 同一审批人在流程中重复出现时： </el-text>
+        </div>
+        <el-radio-group v-model="modelData.autoApprovalType">
+          <div class="flex flex-col">
+            <el-radio :value="0">不自动通过</el-radio>
+            <el-radio :value="1">仅审批一次，后续重复的审批节点均自动通过</el-radio>
+            <el-radio :value="2">仅针对连续审批的节点自动通过</el-radio>
+          </div>
+        </el-radio-group>
+      </div>
+    </el-form-item>
+    <el-form-item v-if="modelData.titleSetting" class="mb-20px">
+      <template #label>
+        <el-text size="large" tag="b">标题设置</el-text>
+      </template>
+      <div class="flex flex-col">
+        <el-radio-group v-model="modelData.titleSetting.enable">
+          <div class="flex flex-col">
+            <el-radio :value="false"
+              >系统默认 <el-text type="info"> 展示流程名称 </el-text></el-radio
+            >
+            <el-radio :value="true">
+              自定义标题
+              <el-text>
+                <el-tooltip content="输入字符 '{' 即可插入表单字段" effect="light" placement="top">
+                  <Icon icon="ep:question-filled" class="ml-5px" />
+                </el-tooltip>
+              </el-text>
+            </el-radio>
+          </div>
+        </el-radio-group>
+        <el-mention
+          v-if="modelData.titleSetting.enable"
+          v-model="modelData.titleSetting.title"
+          type="textarea"
+          prefix="{"
+          split="}"
+          whole
+          :options="formFieldOptions4Title"
+          placeholder="请插入表单字段（输入 '{' 可以选择表单字段）或输入文本"
+          class="w-600px!"
+        />
+      </div>
+    </el-form-item>
+    <el-form-item
+      v-if="modelData.summarySetting && modelData.formType === BpmModelFormType.NORMAL"
+      class="mb-20px"
+    >
+      <template #label>
+        <el-text size="large" tag="b">摘要设置</el-text>
+      </template>
+      <div class="flex flex-col">
+        <el-radio-group v-model="modelData.summarySetting.enable">
+          <div class="flex flex-col">
+            <el-radio :value="false">
+              系统默认 <el-text type="info"> 展示表单前 3 个字段 </el-text>
+            </el-radio>
+            <el-radio :value="true"> 自定义摘要 </el-radio>
+          </div>
+        </el-radio-group>
+        <el-select
+          class="w-500px!"
+          v-if="modelData.summarySetting.enable"
+          v-model="modelData.summarySetting.summary"
+          multiple
+          placeholder="请选择要展示的表单字段"
+        >
+          <el-option
+            v-for="item in formFieldOptions4Summary"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import { BpmAutoApproveType, BpmModelFormType } from '@/utils/constants'
+import * as FormApi from '@/api/bpm/form'
+import { parseFormFields } from '@/components/FormCreate/src/utils'
+import { ProcessVariableEnum } from '@/components/SimpleProcessDesignerV2/src/consts'
+
+const modelData = defineModel<any>()
+
+/** 自定义 ID 流程编码 */
+const timeOptions = ref([
+  {
+    value: '',
+    label: '无'
+  },
+  {
+    value: 'DAY',
+    label: '精确到日'
+  },
+  {
+    value: 'HOUR',
+    label: '精确到时'
+  },
+  {
+    value: 'MINUTE',
+    label: '精确到分'
+  },
+  {
+    value: 'SECOND',
+    label: '精确到秒'
+  }
+])
+const numberExample = computed(() => {
+  if (modelData.value.processIdRule.enable) {
+    let infix = ''
+    switch (modelData.value.processIdRule.infix) {
+      case 'DAY':
+        infix = dayjs().format('YYYYMMDD')
+        break
+      case 'HOUR':
+        infix = dayjs().format('YYYYMMDDHH')
+        break
+      case 'MINUTE':
+        infix = dayjs().format('YYYYMMDDHHmm')
+        break
+      case 'SECOND':
+        infix = dayjs().format('YYYYMMDDHHmmss')
+        break
+      default:
+        break
+    }
+    return (
+      modelData.value.processIdRule.prefix +
+      infix +
+      modelData.value.processIdRule.postfix +
+      '1'.padStart(modelData.value.processIdRule.length - 1, '0')
+    )
+  } else {
+    return ''
+  }
+})
+
+/** 表单选项 */
+const formField = ref<Array<{ field: string; title: string }>>([])
+const formFieldOptions4Title = computed(() => {
+  let cloneFormField = formField.value.map((item) => {
+    return {
+      label: item.title,
+      value: item.field
+    }
+  })
+  // 固定添加发起人 ID 字段
+  cloneFormField.unshift({
+    label: '流程名称',
+    value: ProcessVariableEnum.PROCESS_DEFINITION_NAME
+  })
+  cloneFormField.unshift({
+    label: '发起时间',
+    value: ProcessVariableEnum.START_TIME
+  })
+  cloneFormField.unshift({
+    label: '发起人',
+    value: ProcessVariableEnum.START_USER_ID
+  })
+  return cloneFormField
+})
+const formFieldOptions4Summary = computed(() => {
+  return formField.value.map((item) => {
+    return {
+      label: item.title,
+      value: item.field
+    }
+  })
+})
+
+/** 兼容以前未配置更多设置的流程 */
+const initData = () => {
+  if (!modelData.value.processIdRule) {
+    modelData.value.processIdRule = {
+      enable: false,
+      prefix: '',
+      infix: '',
+      postfix: '',
+      length: 5
+    }
+  }
+  if (!modelData.value.autoApprovalType) {
+    modelData.value.autoApprovalType = BpmAutoApproveType.NONE
+  }
+  if (!modelData.value.titleSetting) {
+    modelData.value.titleSetting = {
+      enable: false,
+      title: ''
+    }
+  }
+  if (!modelData.value.summarySetting) {
+    modelData.value.summarySetting = {
+      enable: false,
+      summary: []
+    }
+  }
+}
+defineExpose({ initData })
+
+/** 监听表单 ID 变化，加载表单数据 */
+watch(
+  () => modelData.value.formId,
+  async (newFormId) => {
+    if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
+      const data = await FormApi.getForm(newFormId)
+      const result: Array<{ field: string; title: string }> = []
+      if (data.fields) {
+        data.fields.forEach((fieldStr: string) => {
+          parseFormFields(JSON.parse(fieldStr), result)
+        })
+      }
+      formField.value = result
+    } else {
+      formField.value = []
+    }
+  },
+  { immediate: true }
+)
+</script>
--- a/src/views/bpm/model/form/FormDesign.vue
+++ b/src/views/bpm/model/form/FormDesign.vue
@@ -70,25 +70,16 @@ import * as FormApi from '@/api/bpm/form'
 import { setConfAndFields2 } from '@/utils/formCreate'

 const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true
-  },
  formList: {
    type: Array,
    required: true
  }
 })

-const emit = defineEmits(['update:modelValue'])
-
 const formRef = ref()

 // 创建本地数据副本
-const modelData = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})
+const modelData = defineModel<any>()

 // 表单预览数据
 const formPreview = ref({
--- a/src/views/bpm/model/form/ProcessDesign.vue
+++ b/src/views/bpm/model/form/ProcessDesign.vue
@@ -6,10 +6,7 @@
      :model-id="modelData.id"
      :model-key="modelData.key"
      :model-name="modelData.name"
-      :value="currentBpmnXml"
-      ref="bpmnEditorRef"
      @success="handleDesignSuccess"
-      @init-finished="handleEditorInit"
    />
  </template>

@@ -21,10 +18,7 @@
      :model-key="modelData.key"
      :model-name="modelData.name"
      :start-user-ids="modelData.startUserIds"
-      :value="currentSimpleModel"
-      ref="simpleEditorRef"
      @success="handleDesignSuccess"
-      @init-finished="handleEditorInit"
    />
  </template>
 </template>
@@ -34,137 +28,16 @@ import { BpmModelType } from '@/utils/constants'
 import BpmModelEditor from '../editor/index.vue'
 import SimpleModelDesign from '../../simple/SimpleModelDesign.vue'

-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true
-  }
-})
-
-const emit = defineEmits(['update:modelValue', 'success'])
-
-const bpmnEditorRef = ref()
-const simpleEditorRef = ref()
-const isEditorInitialized = ref(false)
-
 // 创建本地数据副本
-const modelData = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})
+const modelData = defineModel<any>()

-// 保存当前的流程XML或数据
-const currentBpmnXml = ref('')
-const currentSimpleModel = ref('')
-
-// 初始化或更新当前的XML数据
-const initOrUpdateXmlData = () => {
-  if (modelData.value) {
-    if (modelData.value.type === BpmModelType.BPMN) {
-      currentBpmnXml.value = modelData.value.bpmnXml || ''
-    } else {
-      currentSimpleModel.value = modelData.value.simpleModel || ''
-    }
-  }
-}
-
-// 监听modelValue的变化，更新数据
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    if (newVal) {
-      if (newVal.type === BpmModelType.BPMN) {
-        if (newVal.bpmnXml && newVal.bpmnXml !== currentBpmnXml.value) {
-          currentBpmnXml.value = newVal.bpmnXml
-          // 如果编辑器已经初始化，刷新视图
-          if (isEditorInitialized.value && bpmnEditorRef.value?.refresh) {
-            nextTick(() => {
-              bpmnEditorRef.value.refresh()
-            })
-          }
-        }
-      } else {
-        if (newVal.simpleModel && newVal.simpleModel !== currentSimpleModel.value) {
-          currentSimpleModel.value = newVal.simpleModel
-          // 如果编辑器已经初始化，刷新视图
-          if (isEditorInitialized.value && simpleEditorRef.value?.refresh) {
-            nextTick(() => {
-              simpleEditorRef.value.refresh()
-            })
-          }
-        }
-      }
-    }
-  },
-  { immediate: true, deep: true }
-)
-
-/** 编辑器初始化完成的回调 */
-const handleEditorInit = async () => {
-  isEditorInitialized.value = true
-
-  // 等待下一个tick，确保编辑器已经准备好
-  await nextTick()
-
-  // 初始化完成后，设置初始值
-  if (modelData.value.type === BpmModelType.BPMN) {
-    if (modelData.value.bpmnXml) {
-      currentBpmnXml.value = modelData.value.bpmnXml
-      if (bpmnEditorRef.value?.refresh) {
-        await nextTick()
-        bpmnEditorRef.value.refresh()
-      }
-    }
-  } else {
-    if (modelData.value.simpleModel) {
-      currentSimpleModel.value = modelData.value.simpleModel
-      if (simpleEditorRef.value?.refresh) {
-        await nextTick()
-        simpleEditorRef.value.refresh()
-      }
-    }
-  }
-}
-
-/** 获取当前流程数据 */
-const getProcessData = async () => {
-  try {
-    if (modelData.value.type === BpmModelType.BPMN) {
-      if (!bpmnEditorRef.value || !isEditorInitialized.value) {
-        return currentBpmnXml.value || undefined
-      }
-      const { xml } = await bpmnEditorRef.value.saveXML()
-      if (xml) {
-        currentBpmnXml.value = xml
-        return xml
-      }
-    } else {
-      if (!simpleEditorRef.value || !isEditorInitialized.value) {
-        return currentSimpleModel.value || undefined
-      }
-      const flowData = await simpleEditorRef.value.getCurrentFlowData()
-      if (flowData) {
-        currentSimpleModel.value = flowData
-        return flowData
-      }
-    }
-    return modelData.value.type === BpmModelType.BPMN
-      ? currentBpmnXml.value
-      : currentSimpleModel.value
-  } catch (error) {
-    console.error('获取流程数据失败:', error)
-    return modelData.value.type === BpmModelType.BPMN
-      ? currentBpmnXml.value
-      : currentSimpleModel.value
-  }
-}
+const processData = inject('processData') as Ref

 /** 表单校验 */
 const validate = async () => {
  try {
    // 获取最新的流程数据
-    const processData = await getProcessData()
-    if (!processData) {
+    if (!processData.value) {
      throw new Error('请设计流程')
    }
    return true
@@ -172,27 +45,19 @@ const validate = async () => {
    throw error
  }
 }
-
 /** 处理设计器保存成功 */
 const handleDesignSuccess = async (data?: any) => {
  if (data) {
-    if (modelData.value.type === BpmModelType.BPMN) {
-      currentBpmnXml.value = data
-    } else {
-      currentSimpleModel.value = data
-    }
-
    // 创建新的对象以触发响应式更新
    const newModelData = {
      ...modelData.value,
      bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
      simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data
    }
-
    // 使用emit更新父组件的数据
    await nextTick()
-    emit('update:modelValue', newModelData)
-    emit('success', data)
+    //更新表单的模型数据部分
+    modelData.value = newModelData
  }
 }

@@ -200,36 +65,7 @@ const handleDesignSuccess = async (data?: any) => {
 const showDesigner = computed(() => {
  return Boolean(modelData.value?.key && modelData.value?.name)
 })
-
-// 组件创建时初始化数据
-onMounted(() => {
-  initOrUpdateXmlData()
-})
-
-// 组件卸载前保存数据
-onBeforeUnmount(async () => {
-  try {
-    // 获取并保存最新的流程数据
-    const data = await getProcessData()
-    if (data) {
-      // 创建新的对象以触发响应式更新
-      const newModelData = {
-        ...modelData.value,
-        bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
-        simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data
-      }
-
-      // 使用emit更新父组件的数据
-      await nextTick()
-      emit('update:modelValue', newModelData)
-    }
-  } catch (error) {
-    console.error('保存数据失败:', error)
-  }
-})
-
 defineExpose({
-  validate,
-  getProcessData
+  validate
 })
 </script>
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -67,12 +67,12 @@
        </div>

        <!-- 第三步：流程设计 -->
-        <ProcessDesign
-          v-if="currentStep === 2"
-          v-model="formData"
-          ref="processDesignRef"
-          @success="handleDesignSuccess"
-        />
+        <ProcessDesign v-if="currentStep === 2" v-model="formData" ref="processDesignRef" />
+
+        <!-- 第四步：更多设置 -->
+        <div v-show="currentStep === 3" class="mx-auto w-700px">
+          <ExtraSettings v-model="formData" ref="extraSettingsRef" />
+        </div>
      </div>
    </div>
  </ContentWrap>
@@ -83,14 +83,15 @@ import { useRoute, useRouter } from 'vue-router'
 import { useMessage } from '@/hooks/web/useMessage'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
-import { CategoryApi } from '@/api/bpm/category'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import * as UserApi from '@/api/system/user'
 import { useUserStoreWithOut } from '@/store/modules/user'
-import { BpmModelFormType, BpmModelType } from '@/utils/constants'
+import { BpmModelFormType, BpmModelType, BpmAutoApproveType } from '@/utils/constants'
 import BasicInfo from './BasicInfo.vue'
 import FormDesign from './FormDesign.vue'
 import ProcessDesign from './ProcessDesign.vue'
 import { useTagsViewStore } from '@/store/modules/tagsView'
+import ExtraSettings from './ExtraSettings.vue'

 const router = useRouter()
 const { delView } = useTagsViewStore() // 视图操作
@@ -102,6 +103,7 @@ const userStore = useUserStoreWithOut()
 const basicInfoRef = ref()
 const formDesignRef = ref()
 const processDesignRef = ref()
+const extraSettingsRef = ref()

 /** 步骤校验函数 */
 const validateBasic = async () => {
@@ -118,11 +120,13 @@ const validateProcess = async () => {
  await processDesignRef.value?.validate()
 }

-const currentStep = ref(0) // 步骤控制
+const currentStep = ref(-1) // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
+
 const steps = [
  { title: '基本信息', validator: validateBasic },
  { title: '表单设计', validator: validateForm },
-  { title: '流程设计', validator: validateProcess }
+  { title: '流程设计', validator: validateProcess },
+  { title: '更多设置', validator: null }
 ]

 // 表单数据
@@ -140,14 +144,36 @@ const formData: any = ref({
  formCustomViewPath: '',
  visible: true,
  startUserType: undefined,
-  managerUserType: undefined,
  startUserIds: [],
-  managerUserIds: []
+  managerUserIds: [],
+  allowCancelRunningProcess: true,
+  processIdRule: {
+    enable: false,
+    prefix: '',
+    infix: '',
+    postfix: '',
+    length: 5
+  },
+  autoApprovalType: BpmAutoApproveType.NONE,
+  titleSetting: {
+    enable: false,
+    title: ''
+  },
+  summarySetting: {
+    enable: false,
+    summary: []
+  }
 })

+//流程数据
+const processData = ref<any>()
+
+provide('processData', processData)
+provide('modelData', formData)
+
 // 数据列表
 const formList = ref([])
-const categoryList = ref([])
+const categoryList = ref<CategoryVO[]>([])
 const userList = ref<UserApi.UserVO[]>([])

 /** 初始化数据 */
@@ -156,8 +182,16 @@ const initData = async () => {
  if (modelId) {
    // 修改场景
    formData.value = await ModelApi.getModel(modelId)
+    formData.value.startUserType = formData.value.startUserIds?.length > 0 ? 1 : 0
+    // 复制场景
+    if (route.params.type === 'copy') {
+      delete formData.value.id
+      formData.value.name += '副本'
+      formData.value.key += '_copy'
+    }
  } else {
    // 新增场景
+    formData.value.startUserType = 0 // 全体
    formData.value.managerUserIds.push(userStore.getUser.id)
  }

@@ -167,59 +201,57 @@ const initData = async () => {
  categoryList.value = await CategoryApi.getCategorySimpleList()
  // 获取用户列表
  userList.value = await UserApi.getSimpleUserList()
+
+  // 最终，设置 currentStep 切换到第一步
+  currentStep.value = 0
+
+  // 兼容，以前未配置更多设置的流程
+  extraSettingsRef.value.initData()
 }

+/** 根据类型切换流程数据 */
+watch(
+  async () => formData.value.type,
+  () => {
+    if (formData.value.type === BpmModelType.BPMN) {
+      processData.value = formData.value.bpmnXml
+    } else if (formData.value.type === BpmModelType.SIMPLE) {
+      processData.value = formData.value.simpleModel
+    }
+    console.log('加载流程数据', processData.value)
+  },
+  {
+    immediate: true
+  }
+)
+
 /** 校验所有步骤数据是否完整 */
 const validateAllSteps = async () => {
  try {
    // 基本信息校验
-    await basicInfoRef.value?.validate()
-    if (!formData.value.key || !formData.value.name || !formData.value.category) {
+    try {
+      await validateBasic()
+    } catch (error) {
      currentStep.value = 0
      throw new Error('请完善基本信息')
    }

    // 表单设计校验
-    await formDesignRef.value?.validate()
-    if (formData.value.formType === 10 && !formData.value.formId) {
-      currentStep.value = 1
-      throw new Error('请选择流程表单')
-    }
-    if (
-      formData.value.formType === 20 &&
-      (!formData.value.formCustomCreatePath || !formData.value.formCustomViewPath)
-    ) {
+    try {
+      await validateForm()
+    } catch (error) {
      currentStep.value = 1
      throw new Error('请完善自定义表单信息')
    }

    // 流程设计校验
-    // 如果已经有流程数据，则不需要重新校验
-    if (!formData.value.bpmnXml && !formData.value.simpleModel) {
-      // 如果当前不在第三步，需要先保存当前步骤数据
-      if (currentStep.value !== 2) {
-        await steps[currentStep.value].validator()
-        // 切换到第三步
-        currentStep.value = 2
-        // 等待组件渲染完成
-        await nextTick()
-      }

-      // 校验流程设计
-      await processDesignRef.value?.validate()
-      const processData = await processDesignRef.value?.getProcessData()
-      if (!processData) {
-        throw new Error('请设计流程')
-      }
-
-      // 保存流程数据
-      if (formData.value.type === BpmModelType.BPMN) {
-        formData.value.bpmnXml = processData
-        formData.value.simpleModel = null
-      } else {
-        formData.value.bpmnXml = null
-        formData.value.simpleModel = processData
-      }
+    // 表单设计校验
+    try {
+      await validateProcess()
+    } catch (error) {
+      currentStep.value = 2
+      throw new Error('请设计流程')
    }

    return true
@@ -239,20 +271,6 @@ const handleSave = async () => {
      ...formData.value
    }

-    // 如果当前在第三步，获取最新的流程设计数据
-    if (currentStep.value === 2) {
-      const processData = await processDesignRef.value?.getProcessData()
-      if (processData) {
-        if (formData.value.type === BpmModelType.BPMN) {
-          modelData.bpmnXml = processData
-          modelData.simpleModel = null
-        } else {
-          modelData.bpmnXml = null
-          modelData.simpleModel = processData
-        }
-      }
-    }
-
    if (formData.value.id) {
      // 修改场景
      await ModelApi.updateModel(modelData)
@@ -267,9 +285,8 @@ const handleSave = async () => {
    } else {
      // 新增场景
      formData.value.id = await ModelApi.createModel(modelData)
-      message.success('新增成功')
      try {
-        await message.confirm('创建流程成功，是否继续编辑？')
+        await message.confirm('流程创建成功，是否继续编辑？')
        // 用户点击继续编辑，跳转到编辑页面
        await nextTick()
        // 先删除当前页签
@@ -299,7 +316,6 @@ const handleDeploy = async () => {
    if (!formData.value.id) {
      await message.confirm('是否确认发布该流程？')
    }
-
    // 校验所有步骤
    await validateAllSteps()

@@ -308,20 +324,6 @@ const handleDeploy = async () => {
      ...formData.value
    }

-    // 如果当前在第三步，获取最新的流程设计数据
-    if (currentStep.value === 2) {
-      const processData = await processDesignRef.value?.getProcessData()
-      if (processData) {
-        if (formData.value.type === BpmModelType.BPMN) {
-          modelData.bpmnXml = processData
-          modelData.simpleModel = null
-        } else {
-          modelData.bpmnXml = null
-          modelData.simpleModel = processData
-        }
-      }
-    }
-
    // 先保存所有数据
    if (formData.value.id) {
      await ModelApi.updateModel(modelData)
@@ -344,33 +346,15 @@ const handleDeploy = async () => {
 /** 步骤切换处理 */
 const handleStepClick = async (index: number) => {
  try {
-    // 如果是切换到第三步（流程设计），需要校验key和name
-    if (index === 2) {
-      if (!formData.value.key || !formData.value.name) {
-        message.warning('请先填写流程标识和流程名称')
-        return
-      }
+    console.log('index', index)
+    if (index !== 0) {
+      await validateBasic()
    }
-
-    // 保存当前步骤的数据
-    if (currentStep.value === 2) {
-      const processData = await processDesignRef.value?.getProcessData()
-      if (processData) {
-        if (formData.value.type === BpmModelType.BPMN) {
-          formData.value.bpmnXml = processData
-          formData.value.simpleModel = null
-        } else {
-          formData.value.bpmnXml = null
-          formData.value.simpleModel = processData
-        }
-      }
-    } else {
-      // 只有在向后切换时才进行校验
-      if (index > currentStep.value) {
-        if (typeof steps[currentStep.value].validator === 'function') {
-          await steps[currentStep.value].validator()
-        }
-      }
+    if (index !== 1) {
+      await validateForm()
+    }
+    if (index !== 2) {
+      await validateProcess()
    }

    // 切换步骤
@@ -391,13 +375,6 @@ const handleStepClick = async (index: number) => {
  }
 }

-/** 处理设计器保存成功 */
-const handleDesignSuccess = (bpmnXml?: string) => {
-  if (bpmnXml) {
-    formData.value.bpmnXml = bpmnXml
-  }
-}
-
 /** 返回列表页 */
 const handleBack = () => {
  // 先删除当前页签
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -85,8 +85,6 @@
    </div>
  </ContentWrap>

-  <!-- 表单弹窗：添加/修改流程 -->
-  <ModelForm ref="formRef" @success="getList" />
  <!-- 表单弹窗：添加分类 -->
  <CategoryForm ref="categoryFormRef" @success="getList" />
  <!-- 弹窗：表单详情 -->
@@ -99,7 +97,6 @@
 import draggable from 'vuedraggable'
 import { CategoryApi } from '@/api/bpm/category'
 import * as ModelApi from '@/api/bpm/model'
-import ModelForm from './ModelForm.vue'
 import CategoryForm from '../category/CategoryForm.vue'
 import { cloneDeep } from 'lodash-es'
 import CategoryDraggableModel from './CategoryDraggableModel.vue'
@@ -123,7 +120,6 @@ const handleQuery = () => {
 }

 /** 添加/修改操作 */
-const formRef = ref()
 const openForm = (type: string, id?: number) => {
  if (type === 'create') {
    push({ name: 'BpmModelCreate' })
@@ -206,7 +202,7 @@ const getList = async () => {
 }

 /** 初始化 **/
-onMounted(() => {
+onActivated(() => {
  getList()
 })
 </script>
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -58,7 +58,16 @@
                  >
                    <template #default>
                      <div class="flex">
-                        <el-image :src="definition.icon" class="w-32px h-32px" />
+                        <el-image
+                          v-if="definition.icon"
+                          :src="definition.icon"
+                          class="w-32px h-32px"
+                        />
+                        <div v-else class="flow-icon">
+                          <span style="font-size: 12px; color: #fff">{{
+                            sliceName(definition.name,0,2)
+                          }}</span>
+                        </div>
                        <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
                      </div>
                    </template>
@@ -88,6 +97,7 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
 import { groupBy } from 'lodash-es'
+import { sliceName } from '@/utils/index'

 defineOptions({ name: 'BpmProcessInstanceCreate' })

@@ -282,13 +292,25 @@ onMounted(() => {
 </script>

 <style lang="scss" scoped>
+.flow-icon {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  margin-right: 10px;
+  background-color: var(--el-color-primary);
+  border-radius: 0.25rem;
+  align-items: center;
+  justify-content: center;
+}
+
 .process-definition-container::before {
-  content: '';
-  border-left: 1px solid #e6e6e6;
  position: absolute;
  left: 20.8%;
  height: 100%;
+  border-left: 1px solid #e6e6e6;
+  content: '';
 }
+
 :deep() {
  .definition-item-card {
    .el-card__body {
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -44,8 +44,26 @@
              :rows="4"
            />
          </el-form-item>
+          <el-form-item
+            v-if="runningTask.signEnable"
+            label="签名"
+            prop="signPicUrl"
+            ref="approveSignFormRef"
+          >
+            <el-button @click="signRef.open()">点击签名</el-button>
+            <el-image
+              class="w-90px h-40px ml-5px"
+              v-if="approveReasonForm.signPicUrl"
+              :src="approveReasonForm.signPicUrl"
+              :preview-src-list="[approveReasonForm.signPicUrl]"
+            />
+          </el-form-item>
          <el-form-item>
-            <el-button :disabled="formLoading" type="success" @click="handleAudit(true, approveFormRef)">
+            <el-button
+              :disabled="formLoading"
+              type="success"
+              @click="handleAudit(true, approveFormRef)"
+            >
              {{ getButtonDisplayName(OperationButtonType.APPROVE) }}
            </el-button>
            <el-button @click="closePropover('approve', approveFormRef)"> 取消 </el-button>
@@ -86,7 +104,11 @@
            />
          </el-form-item>
          <el-form-item>
-            <el-button :disabled="formLoading" type="danger" @click="handleAudit(false,rejectFormRef)">
+            <el-button
+              :disabled="formLoading"
+              type="danger"
+              @click="handleAudit(false, rejectFormRef)"
+            >
              {{ getButtonDisplayName(OperationButtonType.REJECT) }}
            </el-button>
            <el-button @click="closePropover('reject', rejectFormRef)"> 取消 </el-button>
@@ -471,6 +493,9 @@
      <Icon :size="14" icon="ep:refresh" />&nbsp; 再次提交
    </div>
  </div>
+
+  <!-- 签名弹窗 -->
+  <SignDialog ref="signRef" @success="handleSignFinish" />
 </template>
 <script lang="ts" setup>
 import { useUserStoreWithOut } from '@/store/modules/user'
@@ -479,11 +504,13 @@ import * as TaskApi from '@/api/bpm/task'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as UserApi from '@/api/system/user'
 import {
-  OperationButtonType,
-  OPERATION_BUTTON_NAME
+  OPERATION_BUTTON_NAME,
+  OperationButtonType
 } from '@/components/SimpleProcessDesignerV2/src/consts'
-import { BpmProcessInstanceStatus, BpmModelFormType } from '@/utils/constants'
+import { BpmModelFormType, BpmProcessInstanceStatus } from '@/utils/constants'
 import type { FormInstance, FormRules } from 'element-plus'
+import SignDialog from './SignDialog.vue'
+
 defineOptions({ name: 'ProcessInstanceBtnContainer' })

 const router = useRouter() // 路由
@@ -492,12 +519,12 @@ const message = useMessage() // 消息弹窗
 const userId = useUserStoreWithOut().getUser.id // 当前登录的编号
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调

-const props = defineProps< {
-  processInstance: any,  // 流程实例信息
-  processDefinition: any,  // 流程定义信息
-  userOptions: UserApi.UserVO[],
-  normalForm: any, // 流程表单 formCreate
-  normalFormApi: any, // 流程表单 formCreate Api
+const props = defineProps<{
+  processInstance: any // 流程实例信息
+  processDefinition: any // 流程定义信息
+  userOptions: UserApi.UserVO[]
+  normalForm: any // 流程表单 formCreate
+  normalFormApi: any // 流程表单 formCreate Api
  writableFields: string[] // 流程表单可以编辑的字段
 }>()

@@ -521,20 +548,29 @@ const approveForm = ref<any>({}) // 审批通过时，额外的补充信息
 const approveFormFApi = ref<any>({}) // approveForms 的 fAPi

 // 审批通过意见表单
+const reasonRequire = ref()
 const approveFormRef = ref<FormInstance>()
+const signRef = ref()
+const approveSignFormRef = ref()
 const approveReasonForm = reactive({
-  reason: ''
+  reason: '',
+  signPicUrl: ''
 })
-const approveReasonRule = reactive<FormRules<typeof approveReasonForm>>({
-  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+const approveReasonRule = computed(() => {
+  return {
+    reason: [{ required: reasonRequire.value, message: '审批意见不能为空', trigger: 'blur' }],
+    signPicUrl: [{ required: true, message: '签名不能为空', trigger: 'change' }]
+  }
 })
 // 拒绝表单
 const rejectFormRef = ref<FormInstance>()
 const rejectReasonForm = reactive({
  reason: ''
 })
-const rejectReasonRule = reactive<FormRules<typeof rejectReasonForm>>({
-  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+const rejectReasonRule = computed(() => {
+  return {
+    reason: [{ required: reasonRequire.value, message: '审批意见不能为空', trigger: 'blur' }]
+  }
 })

 // 抄送表单
@@ -555,7 +591,7 @@ const transferForm = reactive({
 })
 const transferFormRule = reactive<FormRules<typeof transferForm>>({
  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
 })

 // 委派表单
@@ -566,7 +602,7 @@ const delegateForm = reactive({
 })
 const delegateFormRule = reactive<FormRules<typeof delegateForm>>({
  delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
 })

 // 加签表单
@@ -577,7 +613,7 @@ const addSignForm = reactive({
 })
 const addSignFormRule = reactive<FormRules<typeof addSignForm>>({
  addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
 })

 // 减签表单
@@ -588,7 +624,7 @@ const deleteSignForm = reactive({
 })
 const deleteSignFormRule = reactive<FormRules<typeof deleteSignForm>>({
  deleteSignTaskId: [{ required: true, message: '减签人员不能为空', trigger: 'change' }],
- reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
 })

 // 退回表单
@@ -608,7 +644,7 @@ const cancelForm = reactive({
  cancelReason: ''
 })
 const cancelFormRule = reactive<FormRules<typeof cancelForm>>({
-  cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }],
+  cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }]
 })

 /** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
@@ -627,11 +663,11 @@ watch(
 const openPopover = async (type: string) => {
  if (type === 'approve') {
    // 校验流程表单
-     const valid = await validateNormalForm();
-     if (!valid) {
+    const valid = await validateNormalForm()
+    if (!valid) {
      message.warning('表单校验不通过，请先完善表单!!')
-      return;
-     }
+      return
+    }
  }
  if (type === 'return') {
    // 获取退回节点
@@ -652,7 +688,7 @@ const openPopover = async (type: string) => {
 const closePropover = (type: string, formRef: FormInstance | undefined) => {
  if (formRef) {
    formRef.resetFields()
-  } 
+  }
  popOverVisible.value[type] = false
 }

@@ -664,14 +700,18 @@ const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) =>
    if (!formRef) return
    await formRef.validate()
    if (pass) {
-       // 获取修改的流程变量, 暂时只支持流程表单
-       const variables = getUpdatedProcessInstanceVaiables();
+      // 获取修改的流程变量, 暂时只支持流程表单
+      const variables = getUpdatedProcessInstanceVariables()
      // 审批通过数据
      const data = {
        id: runningTask.value.id,
        reason: approveReasonForm.reason,
        variables // 审批通过, 把修改的字段值赋于流程实例变量
      }
+      // 签名
+      if (runningTask.value.signEnable) {
+        data.signPicUrl = approveReasonForm.signPicUrl
+      }
      // 多表单处理，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
      // TODO 芋艿 任务有多表单这里要如何处理，会和可编辑的字段冲突
      const formCreateApi = approveFormFApi.value
@@ -684,10 +724,10 @@ const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) =>
      popOverVisible.value.approve = false
      message.success('审批通过成功')
    } else {
-       // 审批不通过数据
-       const data = {
+      // 审批不通过数据
+      const data = {
        id: runningTask.value.id,
-        reason: rejectReasonForm.reason,
+        reason: rejectReasonForm.reason
      }
      await TaskApi.rejectTask(data)
      popOverVisible.value.reject = false
@@ -713,7 +753,7 @@ const handleCopy = async () => {
    const data = {
      id: runningTask.value.id,
      reason: copyForm.copyReason,
-      copyUserIds:copyForm.copyUserIds
+      copyUserIds: copyForm.copyUserIds
    }
    await TaskApi.copyTask(data)
    copyFormRef.value.resetFields()
@@ -752,7 +792,6 @@ const handleTransfer = async () => {
 const handleDelegate = async () => {
  formLoading.value = true
  try {
- 
    // 1.1 校验表单
    if (!delegateFormRef.value) return
    await delegateFormRef.value.validate()
@@ -932,6 +971,7 @@ const loadTodoTask = (task: any) => {
  approveForm.value = {}
  approveFormFApi.value = {}
  runningTask.value = task
+  reasonRequire.value = task?.reasonRequire ?? false
  // 处理 approve 表单.
  if (task && task.formId && task.formConf) {
    const tempApproveForm = {}
@@ -949,23 +989,29 @@ const validateNormalForm = async () => {
    try {
      await props.normalFormApi?.validate()
    } catch {
-      valid = false;
+      valid = false
    }
-    return valid;
+    return valid
  } else {
-    return true;
+    return true
  }
 }
+
 /** 从可以编辑的流程表单字段，获取需要修改的流程实例的变量 */
-const getUpdatedProcessInstanceVaiables = ()=> {
+const getUpdatedProcessInstanceVariables = () => {
  const variables = {}
-  props.writableFields.forEach( (field) => {
-    const fieldValue = props.normalFormApi.getValue(field)
-    variables[field] = fieldValue;
+  props.writableFields.forEach((field) => {
+    variables[field] = props.normalFormApi.getValue(field)
  })
  return variables
 }

+/** 处理签名完成 */
+const handleSignFinish = (url: string) => {
+  approveReasonForm.signPicUrl = url
+  approveSignFormRef.value.validate('change')
+}
+
 defineExpose({ loadTodoTask })
 </script>

--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@@ -4,7 +4,6 @@
      :flow-node="simpleModel"
      :tasks="tasks"
      :process-instance="processInstance"
-      class="process-viewer"
    />
  </div>
 </template>
@@ -20,7 +19,7 @@ const props = defineProps({
  modelView: propTypes.object,
  simpleJson: propTypes.string // Simple 模型结构数据 (json 格式)
 })
-const simpleModel = ref()
+const simpleModel = ref<any>({})
 // 用户任务
 const tasks = ref([])
 // 流程实例
@@ -82,7 +81,6 @@ const setSimpleModelNodeTaskStatus = (
    }
    return
  }
-
  // 审批节点
  if (
    simpleModel.type === NodeType.START_USER_NODE ||
@@ -98,31 +96,49 @@ const setSimpleModelNodeTaskStatus = (
    }
    // TODO 是不是还缺一个 cancel 的状态
  }
-
  // 抄送节点
  if (simpleModel.type === NodeType.COPY_TASK_NODE) {
-    // 抄送节点 只有通过和未执行状态
+    // 抄送节点,只有通过和未执行状态
    if (finishedActivityIds.includes(simpleModel.id)) {
      simpleModel.activityStatus = TaskStatusEnum.APPROVE
    } else {
      simpleModel.activityStatus = TaskStatusEnum.NOT_START
    }
  }
-  // 条件节点 对应 SequenceFlow
-  if (simpleModel.type === NodeType.CONDITION_NODE) {
-    // 条件节点。只有通过和未执行状态
-    if (finishedSequenceFlowActivityIds.includes(simpleModel.id)) {
+  // 延迟器节点
+  if (simpleModel.type === NodeType.DELAY_TIMER_NODE) {
+    // 延迟器节点,只有通过和未执行状态
+    if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+  }
+  // 触发器节点
+  if (simpleModel.type === NodeType.TRIGGER_NODE) {
+    // 触发器节点,只有通过和未执行状态
+    if (finishedActivityIds.includes(simpleModel.id)) {
      simpleModel.activityStatus = TaskStatusEnum.APPROVE
    } else {
      simpleModel.activityStatus = TaskStatusEnum.NOT_START
    }
  }

+  // 条件节点对应 SequenceFlow
+  if (simpleModel.type === NodeType.CONDITION_NODE) {
+    // 条件节点,只有通过和未执行状态
+    if (finishedSequenceFlowActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+  }
  // 网关节点
  if (
    simpleModel.type === NodeType.CONDITION_BRANCH_NODE ||
    simpleModel.type === NodeType.PARALLEL_BRANCH_NODE ||
-    simpleModel.type === NodeType.INCLUSIVE_BRANCH_NODE
+    simpleModel.type === NodeType.INCLUSIVE_BRANCH_NODE ||
+    simpleModel.type === NodeType.ROUTER_BRANCH_NODE
  ) {
    // 网关节点。只有通过和未执行状态
    if (finishedActivityIds.includes(simpleModel.id)) {
@@ -154,15 +170,4 @@ const setSimpleModelNodeTaskStatus = (
 </script>

 <style lang="scss" scoped>
-.process-viewer-container {
-  height: 100%;
-  width: 100%;
-  
-  :deep(.process-viewer) {
-    height: 100% !important;
-    min-height: 100%;
-    width: 100%;
-    overflow: auto;
-  }
-}
 </style>
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -123,6 +123,17 @@
              >
                审批意见：{{ task.reason }}
              </div>
+              <div
+                v-if="task.signPicUrl && activity.nodeType === NodeType.USER_TASK_NODE"
+                class="text-#a5a5a5 text-13px mt-1 w-full bg-#f8f8fa p2 rounded-md"
+              >
+                签名：
+                <el-image
+                  class="w-90px h-40px ml-5px"
+                  :src="task.signPicUrl"
+                  :preview-src-list="[task.signPicUrl]"
+                />
+              </div>
            </teleport>
          </div>
          <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
--- a/src/views/bpm/processInstance/detail/SignDialog.vue
+++ b/src/views/bpm/processInstance/detail/SignDialog.vue
@@ -0,0 +1,50 @@
+<template>
+  <el-dialog v-model="signDialogVisible" title="签名" width="935">
+    <div class="position-relative">
+      <Vue3Signature class="b b-solid b-gray" ref="signature" w="900px" h="400px" />
+      <el-button
+        class="pos-absolute bottom-20px right-10px"
+        type="primary"
+        text
+        size="small"
+        @click="signature.clear()"
+      >
+        <Icon icon="ep:delete" class="mr-5px" />
+        清除
+      </el-button>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="signDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submit"> 提交 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import Vue3Signature from 'vue3-signature'
+import * as FileApi from '@/api/infra/file'
+import download from '@/utils/download'
+
+const message = useMessage() // 消息弹窗
+const signDialogVisible = ref(false)
+const signature = ref()
+
+const open = async () => {
+  signDialogVisible.value = true
+}
+defineExpose({ open })
+
+const emits = defineEmits(['success'])
+const submit = async () => {
+  message.success('签名上传中请稍等。。。')
+  const res = await FileApi.updateFile({
+    file: download.base64ToFile(signature.value.save('image/png'), '签名')
+  })
+  emits('success', res.data)
+  signDialogVisible.value = false
+}
+</script>
+
+<style scoped></style>
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -75,7 +75,7 @@
              <Icon icon="ep:plus" class="mr-5px" />高级筛选
            </el-button>
          </template>
-          <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
+          <!-- <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
            <el-select
              v-model="queryParams.category"
              placeholder="请选择流程发起人"
@@ -89,7 +89,7 @@
                :value="category.code"
              />
            </el-select>
-          </el-form-item>
+          </el-form-item> -->
          <el-form-item
            label="所属流程"
            class="bold-label"
@@ -130,6 +130,15 @@
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="流程名称" align="center" prop="name" min-width="200px" fixed="left" />
+      <el-table-column label="摘要" prop="summary" min-width="180" fixed="left">
+        <template #default="scope">
+          <div class="flex flex-col" v-if="scope.row.summary && scope.row.summary.length > 0">
+            <div v-for="(item, index) in scope.row.summary" :key="index">
+              <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
      <el-table-column
        label="流程分类"
        align="center"
--- a/src/views/bpm/processInstance/report/index.vue
+++ b/src/views/bpm/processInstance/report/index.vue
@@ -0,0 +1,274 @@
+<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="startUserId">
+        <el-select v-model="queryParams.startUserId" placeholder="请选择发起人" class="!w-240px">
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="流程名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入流程名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择流程状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_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 label="结束时间" prop="endTime">
+        <el-date-picker
+          v-model="queryParams.endTime"
+          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
+        v-for="(item, index) in formFields"
+        :key="index"
+        :label="item.title"
+        :prop="item.field"
+      >
+        <!-- TODO @lesan：目前只支持input类型的字符串搜索 -->
+        <el-input
+          :disabled="item.type !== 'input'"
+          v-model="queryParams.formFieldsParams[item.field]"
+          :placeholder="`请输入${item.title}`"
+          clearable
+          @keyup.enter="handleQuery"
+          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-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" border :data="list">
+      <el-table-column label="流程名称" align="center" prop="name" fixed="left" width="200" />
+      <el-table-column label="流程发起人" align="center" prop="startUser.nickname" width="120" />
+      <el-table-column label="流程状态" prop="status" width="120">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="发起时间"
+        align="center"
+        prop="startTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column
+        label="结束时间"
+        align="center"
+        prop="endTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column
+        v-for="(item, index) in formFields"
+        :key="index"
+        :label="item.title"
+        :prop="item.field"
+        width="120"
+      >
+        <!-- TODO @lesan：可以根据formField的type进行展示方式的控制，现在全部以字符串 -->
+        <template #default="scope">
+          {{ scope.row.formVariables[item.field] ?? '' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" width="180">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            v-hasPermi="['bpm:process-instance:cancel']"
+            @click="handleDetail(scope.row)"
+          >
+            详情
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            v-if="scope.row.status === 1"
+            v-hasPermi="['bpm:process-instance:query']"
+            @click="handleCancel(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>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import * as UserApi from '@/api/system/user'
+import * as DefinitionApi from '@/api/bpm/definition'
+import { parseFormFields } from '@/components/FormCreate/src/utils'
+import { ElMessageBox } from 'element-plus'
+
+defineOptions({ name: 'BpmProcessInstanceReport' })
+
+const router = useRouter() // 路由
+const { query } = useRoute()
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const formFields = ref()
+const processDefinitionId = query.processDefinitionId as string
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  startUserId: undefined,
+  name: '',
+  processDefinitionKey: query.processDefinitionKey,
+  status: undefined,
+  createTime: [],
+  endTime: [],
+  formFieldsParams: {}
+})
+const queryFormRef = ref() // 搜索的表单
+const userList = ref<any[]>([]) // 用户列表
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ProcessInstanceApi.getProcessInstanceManagerPage({
+      ...queryParams,
+      formFieldsParams: JSON.stringify(queryParams.formFieldsParams)
+    })
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 获取流程定义 */
+const getProcessDefinition = async () => {
+  const processDefinition = await DefinitionApi.getProcessDefinition(processDefinitionId)
+  formFields.value = parseFormCreateFields(processDefinition.formFields)
+}
+
+/** 解析表单字段 */
+const parseFormCreateFields = (formFields?: string[]) => {
+  const result: Array<Record<string, any>> = []
+  if (formFields) {
+    formFields.forEach((fieldStr: string) => {
+      parseFormFields(JSON.parse(fieldStr), result)
+    })
+  }
+  return result
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  queryParams.formFieldsParams = {}
+  handleQuery()
+}
+
+/** 查看详情 */
+const handleDetail = (row) => {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.id
+    }
+  })
+}
+
+/** 取消按钮操作 */
+const handleCancel = async (row) => {
+  // 二次确认
+  const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
+    confirmButtonText: t('common.ok'),
+    cancelButtonText: t('common.cancel'),
+    inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
+    inputErrorMessage: '取消原因不能为空'
+  })
+  // 发起取消
+  await ProcessInstanceApi.cancelProcessInstanceByAdmin(row.id, value)
+  message.success('取消成功')
+  // 刷新列表
+  await getList()
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  // 获取流程定义，用于 table column 的展示
+  await getProcessDefinition()
+  // 获取流程列表
+  await getList()
+  // 获取用户列表
+  userList.value = await UserApi.getSimpleUserList()
+})
+</script>
--- a/src/views/bpm/simple/SimpleModelDesign.vue
+++ b/src/views/bpm/simple/SimpleModelDesign.vue
@@ -4,9 +4,7 @@
      :model-id="modelId"
      :model-key="modelKey"
      :model-name="modelName"
-      :value="currentValue"
      @success="handleSuccess"
-      @init-finished="handleInit"
      :start-user-ids="startUserIds"
      ref="designerRef"
    />
@@ -19,137 +17,22 @@ defineOptions({
  name: 'SimpleModelDesign'
 })

-const props = defineProps<{
+defineProps<{
  modelId?: string
  modelKey?: string
  modelName?: string
-  value?: string
  startUserIds?: number[]
 }>()

-const emit = defineEmits(['success', 'init-finished'])
+const emit = defineEmits(['success'])
 const designerRef = ref()
-const isInitialized = ref(false)
-const currentValue = ref('')
-
-// 初始化或更新当前值
-const initOrUpdateValue = async () => {
-  console.log('initOrUpdateValue', props.value)
-  if (props.value) {
-    currentValue.value = props.value
-    // 如果设计器已经初始化，立即加载数据
-    if (isInitialized.value && designerRef.value) {
-      try {
-        await designerRef.value.loadProcessData(props.value)
-        await nextTick()
-        if (designerRef.value.refresh) {
-          await designerRef.value.refresh()
-        }
-      } catch (error) {
-        console.error('加载流程数据失败:', error)
-      }
-    }
-  }
-}
-
-// 监听属性变化
-watch(
-  [() => props.modelKey, () => props.modelName, () => props.value],
-  async ([newKey, newName, newValue], [oldKey, oldName, oldValue]) => {
-    if (designerRef.value && isInitialized.value) {
-      try {
-        if (newKey && newName && (newKey !== oldKey || newName !== oldName)) {
-          await designerRef.value.updateModel(newKey, newName)
-        }
-        if (newValue && newValue !== oldValue) {
-          currentValue.value = newValue
-          await designerRef.value.loadProcessData(newValue)
-          await nextTick()
-          if (designerRef.value.refresh) {
-            await designerRef.value.refresh()
-          }
-        }
-      } catch (error) {
-        console.error('更新流程数据失败:', error)
-      }
-    }
-  },
-  { deep: true, immediate: true }
-)
-
-// 初始化完成回调
-const handleInit = async () => {
-  try {
-    isInitialized.value = true
-    emit('init-finished')
-
-    // 等待下一个tick，确保设计器已经准备好
-    await nextTick()
-
-    // 初始化完成后，设置初始值
-    if (props.modelKey && props.modelName) {
-      await designerRef.value.updateModel(props.modelKey, props.modelName)
-    }
-    if (props.value) {
-      currentValue.value = props.value
-      await designerRef.value.loadProcessData(props.value)
-      // 再次刷新确保数据正确加载
-      await nextTick()
-      if (designerRef.value.refresh) {
-        await designerRef.value.refresh()
-      }
-    }
-  } catch (error) {
-    console.error('初始化流程数据失败:', error)
-  }
-}

 // 修改成功回调
 const handleSuccess = (data?: any) => {
-  console.warn('handleSuccess', data)
-  if (data && data !== currentValue.value) {
-    currentValue.value = data
+  console.info('handleSuccess', data)
+  if (data) {
    emit('success', data)
  }
 }
-
-/** 获取当前流程数据 */
-const getCurrentFlowData = async () => {
-  try {
-    if (designerRef.value) {
-      const data = await designerRef.value.getCurrentFlowData()
-      if (data) {
-        currentValue.value = data
-      }
-      return data
-    }
-    return currentValue.value || undefined
-  } catch (error) {
-    console.error('获取流程数据失败:', error)
-    return currentValue.value || undefined
-  }
-}
-
-// 组件创建时初始化数据
-onMounted(() => {
-  initOrUpdateValue()
-})
-
-// 组件卸载前保存数据
-onBeforeUnmount(async () => {
-  try {
-    const data = await getCurrentFlowData()
-    if (data) {
-      emit('success', data)
-    }
-  } catch (error) {
-    console.error('保存数据失败:', error)
-  }
-})
-
-defineExpose({
-  getCurrentFlowData,
-  refresh: () => designerRef.value?.refresh?.()
-})
 </script>
 <style lang="scss" scoped></style>
--- a/src/views/bpm/task/copy/index.vue
+++ b/src/views/bpm/task/copy/index.vue
@@ -44,7 +44,17 @@
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
+      <!-- TODO 芋艿：增加摘要 -->
      <el-table-column align="center" label="流程名" prop="processInstanceName" min-width="180" />
+      <el-table-column label="摘要" prop="summary" min-width="180">
+        <template #default="scope">
+          <div class="flex flex-col" v-if="scope.row.summary && scope.row.summary.length > 0">
+            <div v-for="(item, index) in scope.row.summary" :key="index">
+              <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
      <el-table-column
        align="center"
        label="流程发起人"
--- a/src/views/bpm/task/done/index.vue
+++ b/src/views/bpm/task/done/index.vue
@@ -64,7 +64,7 @@
            :value="dict.value"
          />
        </el-select>
-      </el-form-item> 
+      </el-form-item>

      <!-- 高级筛选 -->
      <el-form-item :style="{ position: 'absolute', right: '0px' }">
@@ -77,11 +77,11 @@
        >
          <template #reference>
            <el-button @click="showPopover = !showPopover" >
-              <Icon icon="ep:plus" class="mr-5px" />高级筛选 
+              <Icon icon="ep:plus" class="mr-5px" />高级筛选
            </el-button>
-            
+
          </template>
-          <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
+          <!-- <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
            <el-select
              v-model="queryParams.category"
              placeholder="请选择流程发起人"
@@ -95,7 +95,7 @@
                :value="category.code"
              />
            </el-select>
-          </el-form-item>          
+          </el-form-item> -->
          <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
            <el-date-picker
              v-model="queryParams.createTime"
@@ -122,6 +122,15 @@
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column align="center" label="流程" prop="processInstance.name" width="180" />
+      <el-table-column label="摘要" prop="processInstance.summary" min-width="180">
+        <template #default="scope">
+          <div class="flex flex-col" v-if="scope.row.processInstance.summary && scope.row.processInstance.summary.length > 0">
+            <div v-for="(item, index) in scope.row.processInstance.summary" :key="index">
+              <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
      <el-table-column
        align="center"
        label="发起人"
@@ -161,7 +170,7 @@
          {{ formatPast2(scope.row.durationInMillis) }}
        </template>
      </el-table-column>
-      <el-table-column align="center" label="流程编号" prop="id" :show-overflow-tooltip="true" />
+      <el-table-column align="center" label="流程编号" prop="processInstanceId" :show-overflow-tooltip="true" />
      <el-table-column align="center" label="任务编号" prop="id" :show-overflow-tooltip="true" />
      <el-table-column align="center" label="操作" fixed="right" width="80">
        <template #default="scope">
@@ -184,7 +193,7 @@ import { dateFormatter, formatPast2 } from '@/utils/formatTime'
 import * as TaskApi from '@/api/bpm/task'
 import { CategoryApi, CategoryVO } from '@/api/bpm/category'

-defineOptions({ name: 'BpmTodoTask' })
+defineOptions({ name: 'BpmDoneTask' })

 const { push } = useRouter() // 路由

@@ -195,7 +204,7 @@ const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: '',
-  category: undefined,  
+  category: undefined,
  status: undefined,
  createTime: []
 })
--- a/src/views/bpm/task/manager/index.vue
+++ b/src/views/bpm/task/manager/index.vue
@@ -87,7 +87,7 @@
          {{ formatPast2(scope.row.durationInMillis) }}
        </template>
      </el-table-column>
-      <el-table-column align="center" label="流程编号" prop="id" :show-overflow-tooltip="true" />
+      <el-table-column align="center" label="流程编号" prop="processInstanceId" :show-overflow-tooltip="true" />
      <el-table-column align="center" label="任务编号" prop="id" :show-overflow-tooltip="true" />
      <el-table-column align="center" label="操作" fixed="right" width="80">
        <template #default="scope">
--- a/src/views/bpm/task/todo/index.vue
+++ b/src/views/bpm/task/todo/index.vue
@@ -60,11 +60,11 @@
        >
          <template #reference>
            <el-button @click="showPopover = !showPopover" >
-              <Icon icon="ep:plus" class="mr-5px" />高级筛选 
+              <Icon icon="ep:plus" class="mr-5px" />高级筛选
            </el-button>
-            
+
          </template>
-          <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
+          <!-- <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
            <el-select
              v-model="queryParams.category"
              placeholder="请选择流程发起人"
@@ -78,7 +78,7 @@
                :value="category.code"
              />
            </el-select>
-          </el-form-item>          
+          </el-form-item> -->
          <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
            <el-date-picker
              v-model="queryParams.createTime"
@@ -105,6 +105,15 @@
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column align="center" label="流程" prop="processInstance.name" width="180" />
+      <el-table-column label="摘要" prop="processInstance.summary" min-width="180">
+        <template #default="scope">
+          <div class="flex flex-col" v-if="scope.row.processInstance.summary && scope.row.processInstance.summary.length > 0">
+            <div v-for="(item, index) in scope.row.processInstance.summary" :key="index">
+              <el-text type="info"> {{ item.key }} : {{ item.value }} </el-text>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
      <el-table-column
        align="center"
        label="发起人"
@@ -126,7 +135,7 @@
        prop="createTime"
        width="180"
      />
-      <el-table-column align="center" label="流程编号" prop="id" :show-overflow-tooltip="true" />
+      <el-table-column align="center" label="流程编号" prop="processInstanceId" :show-overflow-tooltip="true" />
      <el-table-column align="center" label="任务编号" prop="id" :show-overflow-tooltip="true" />
      <el-table-column align="center" label="操作" fixed="right" width="80">
        <template #default="scope">
--- a/src/views/infra/job/JobDetail.vue
+++ b/src/views/infra/job/JobDetail.vue
@@ -7,7 +7,7 @@
      <el-descriptions-item label="任务名称">
        {{ detailData.name }}
      </el-descriptions-item>
-      <el-descriptions-item label="任务名称">
+      <el-descriptions-item label="任务状态">
        <dict-tag :type="DICT_TYPE.INFRA_JOB_STATUS" :value="detailData.status" />
      </el-descriptions-item>
      <el-descriptions-item label="处理器的名字">
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -200,7 +200,7 @@ onBeforeUnmount(() => {

 <style lang="scss" scoped>
 .kefu {
-  background-color: #e5e4e4;
+  background-color: var(--app-content-bg-color);

  &-conversation {
    height: 60px;
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -373,7 +373,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {

 <style lang="scss" scoped>
 .kefu {
-  background-color: #f5f5f5;
+  background-color: var(--app-content-bg-color);
  position: relative;
  width: calc(100% - 300px - 260px);

@@ -389,7 +389,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
  }

  .kefu-header {
-    background-color: #f5f5f5;
+    background-color: var(--app-content-bg-color);
    position: relative;
    display: flex;
    align-items: center;
@@ -511,7 +511,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {

  ::v-deep(textarea) {
    resize: none;
-    background-color: #f5f5f5;
+    background-color: var(--app-content-bg-color);
  }

  :deep(.el-input__wrapper) {
--- a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
+++ b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
@@ -167,7 +167,7 @@ const getUserData = async () => {
 .kefu {
  position: relative;
  width: 300px !important;
-  background-color: #f5f5f5;
+  background-color: var(--app-content-bg-color);

  &::after {
    content: '';
@@ -181,7 +181,7 @@ const getUserData = async () => {
  }

  &-header {
-    background-color: #f5f5f5;
+    background-color: var(--app-content-bg-color);
    position: relative;
    display: flex;
    align-items: center;
--- a/src/views/mall/promotion/kefu/components/message/OrderItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/OrderItem.vue
@@ -112,7 +112,7 @@ function formatOrderStatus(order: any) {
  border-radius: 10px;
  padding: 10px;
  border: 1px var(--el-border-color) solid;
-  background-color: #fff; // 透明色，暗黑模式下也能体现
+  background-color: rgba(128, 128, 128, 0.3); // 透明色，暗黑模式下也能体现

  .order-card-header {
    height: 28px;
--- a/src/views/mall/promotion/kefu/components/message/ProductItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
@@ -77,7 +77,8 @@ const openDetail = (spuId: number) => {

 .product-warp {
  width: 100%;
-  background-color: #fff;
+  background-color: rgba(128, 128, 128, 0.3);
+  border: 1px solid var(--el-border-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
--- a/src/views/mall/trade/order/detail/index.vue
+++ b/src/views/mall/trade/order/detail/index.vue
@@ -334,13 +334,13 @@ onMounted(async () => {
  // 如果配送方式为快递，则查询物流公司
  if (formData.value.deliveryType === DeliveryTypeEnum.EXPRESS.type) {
    deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
-    if (form.value.logisticsId) {
+    if (formData.value.logisticsId) {
      expressTrackList.value = await TradeOrderApi.getExpressTrackList(formData.value.id!)
    }
  } else if (formData.value.deliveryType === DeliveryTypeEnum.PICK_UP.type) {
-    pickUpStore.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(
-      formData.value.pickUpStoreId
-    )
+    if (formData.value.pickUpStoreId) {
+      pickUpStore.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(formData.value.pickUpStoreId)
+    }
  }
 })
 </script>
--- a/src/views/pay/app/components/channel/WeixinChannelForm.vue
+++ b/src/views/pay/app/components/channel/WeixinChannelForm.vue
@@ -26,9 +26,23 @@
            placeholder="请输入微信 APPID"
          />
        </el-form-item>
+        <el-form-item label-width="180px">
+          <a
+            href="https://pay.weixin.qq.com/index.php/extend/merchant_appid/mapay_platform/account_manage"
+            target="_blank"
+          >
+            前往微信商户平台查看 APPID
+          </a>
+        </el-form-item>
        <el-form-item label="商户号" label-width="180px" prop="config.mchId">
          <el-input v-model="formData.config.mchId" :style="{ width: '100%' }" />
        </el-form-item>
+
+        <el-form-item label-width="180px">
+          <a href="https://pay.weixin.qq.com/index.php/extend/pay_setting" target="_blank">
+            前往微信商户平台查看商户号
+          </a>
+        </el-form-item>
        <el-form-item label="渠道状态" label-width="180px" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio
@@ -123,6 +137,14 @@
              placeholder="请输入证书序列号"
            />
          </el-form-item>
+          <el-form-item label-width="180px">
+            <a
+              href="https://pay.weixin.qq.com/index.php/core/cert/api_cert#/api-cert-manage"
+              target="_blank"
+            >
+              前往微信商户平台查看证书序列号
+            </a>
+          </el-form-item>
        </div>
        <el-form-item label="备注" label-width="180px" prop="remark">
          <el-input v-model="formData.remark" :style="{ width: '100%' }" />