From ff8187bcb01bc648f4193d802a80020f3a5b8f5d Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 21 Nov 2025 09:44:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20[bpm][ele]=20=E6=96=B0=E5=BB=BA?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E6=A8=A1=E5=9E=8B=2020%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-ele/src/router/routes/modules/bpm.ts |  48 +-
 .../src/views/bpm/model/form/index.vue        | 498 ++++++++++++++
 .../bpm/model/form/modules/basic-info.vue     | 442 +++++++++++++
 .../model/form/modules/bpm-model-editor.vue   | 126 ++++
 .../form/modules/custom-print-template.vue    | 117 ++++
 .../bpm/model/form/modules/extra-setting.vue  | 618 ++++++++++++++++++
 .../bpm/model/form/modules/form-design.vue    | 184 ++++++
 .../bpm/model/form/modules/process-design.vue |  79 +++
 .../form/modules/simple-model-design.vue      |  48 ++
 .../bpm/model/form/modules/tinymce-plugin.ts  |  78 +++
 10 files changed, 2214 insertions(+), 24 deletions(-)
 create mode 100644 apps/web-ele/src/views/bpm/model/form/index.vue
 create mode 100644 apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue
 create mode 100644 apps/web-ele/src/views/bpm/model/form/modules/bpm-model-editor.vue
 create mode 100644 apps/web-ele/src/views/bpm/model/form/modules/custom-print-template.vue
 create mode 100644 apps/web-ele/src/views/bpm/model/form/modules/extra-setting.vue
 create mode 100644 apps/web-ele/src/views/bpm/model/form/modules/form-design.vue
 create mode 100644 apps/web-ele/src/views/bpm/model/form/modules/process-design.vue
 create mode 100644 apps/web-ele/src/views/bpm/model/form/modules/simple-model-design.vue
 create mode 100644 apps/web-ele/src/views/bpm/model/form/modules/tinymce-plugin.ts

diff --git a/apps/web-ele/src/router/routes/modules/bpm.ts b/apps/web-ele/src/router/routes/modules/bpm.ts
index c895a34ee..375b45830 100644
--- a/apps/web-ele/src/router/routes/modules/bpm.ts
+++ b/apps/web-ele/src/router/routes/modules/bpm.ts
@@ -62,30 +62,30 @@ const routes: RouteRecordRaw[] = [
           };
         },
       },
-      // {
-      //   path: 'manager/model/create',
-      //   component: () => import('#/views/bpm/model/form/index.vue'),
-      //   name: 'BpmModelCreate',
-      //   meta: {
-      //     title: '创建流程',
-      //     activePath: '/bpm/manager/model',
-      //     icon: 'carbon:flow-connection',
-      //     hideInMenu: true,
-      //     keepAlive: true,
-      //   },
-      // },
-      // {
-      //   path: 'manager/model/:type/:id',
-      //   component: () => import('#/views/bpm/model/form/index.vue'),
-      //   name: 'BpmModelUpdate',
-      //   meta: {
-      //     title: '修改流程',
-      //     activePath: '/bpm/manager/model',
-      //     icon: 'carbon:flow-connection',
-      //     hideInMenu: true,
-      //     keepAlive: true,
-      //   },
-      // },
+      {
+        path: 'manager/model/create',
+        component: () => import('#/views/bpm/model/form/index.vue'),
+        name: 'BpmModelCreate',
+        meta: {
+          title: '创建流程',
+          activePath: '/bpm/manager/model',
+          icon: 'carbon:flow-connection',
+          hideInMenu: true,
+          keepAlive: true,
+        },
+      },
+      {
+        path: 'manager/model/:type/:id',
+        component: () => import('#/views/bpm/model/form/index.vue'),
+        name: 'BpmModelUpdate',
+        meta: {
+          title: '修改流程',
+          activePath: '/bpm/manager/model',
+          icon: 'carbon:flow-connection',
+          hideInMenu: true,
+          keepAlive: true,
+        },
+      },
       {
         path: 'manager/definition',
         component: () => import('#/views/bpm/model/definition/index.vue'),
diff --git a/apps/web-ele/src/views/bpm/model/form/index.vue b/apps/web-ele/src/views/bpm/model/form/index.vue
new file mode 100644
index 000000000..79896c35e
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/index.vue
@@ -0,0 +1,498 @@
+<script setup lang="ts">
+import type { BpmCategoryApi } from '#/api/bpm/category';
+import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
+import type { BpmFormApi } from '#/api/bpm/form';
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { confirm, Page } from '@vben/common-ui';
+import {
+  BpmAutoApproveType,
+  BpmModelFormType,
+  BpmModelType,
+} from '@vben/constants';
+import { useTabs } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { useUserStore } from '@vben/stores';
+
+import { ElButton, ElCard, ElMessage } from 'element-plus';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import { getProcessDefinition } from '#/api/bpm/definition';
+import { getFormSimpleList } from '#/api/bpm/form';
+import {
+  createModel,
+  deployModel,
+  getModel,
+  updateModel,
+} from '#/api/bpm/model';
+import { getSimpleDeptList } from '#/api/system/dept';
+import { getSimpleUserList } from '#/api/system/user';
+
+import BasicInfo from './modules/basic-info.vue';
+import ExtraSetting from './modules/extra-setting.vue';
+import FormDesign from './modules/form-design.vue';
+import ProcessDesign from './modules/process-design.vue';
+
+defineOptions({ name: 'BpmModelCreate' });
+
+type BpmProcessDefinitionType = Omit<
+  BpmProcessDefinitionApi.ProcessDefinition,
+  'modelId' | 'modelType'
+> & {
+  id?: string;
+  type?: number;
+};
+
+const router = useRouter();
+const route = useRoute();
+const userStore = useUserStore();
+const tabs = useTabs();
+
+const basicInfoRef = ref<InstanceType<typeof BasicInfo>>(); // 基础信息组件引用
+const formDesignRef = ref<InstanceType<typeof FormDesign>>(); // 表单设计组件引用
+const processDesignRef = ref<InstanceType<typeof ProcessDesign>>(); // 流程设计组件引用
+const extraSettingRef = ref<InstanceType<typeof ExtraSetting>>(); // 更多设置组件引用
+
+const actionType = route.params.type as string; // 操作类型：create、copy、update
+const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
+const steps = [
+  { title: '基本信息', validator: validateBasic },
+  { title: '表单设计', validator: validateForm },
+  { title: '流程设计', validator: validateProcess },
+  { title: '更多设置', validator: validateExtra },
+];
+
+const formData: any = ref({
+  id: undefined,
+  name: '',
+  key: '',
+  category: undefined,
+  icon: undefined,
+  description: '',
+  type: BpmModelType.SIMPLE,
+  formType: BpmModelFormType.NORMAL,
+  formId: '',
+  formCustomCreatePath: '',
+  formCustomViewPath: '',
+  visible: true,
+  startUserType: undefined,
+  startUserIds: [],
+  startDeptIds: [],
+  managerUserIds: [],
+  allowCancelRunningProcess: true,
+  processIdRule: {
+    enable: false,
+    prefix: '',
+    infix: '',
+    postfix: '',
+    length: 5,
+  },
+  autoApprovalType: BpmAutoApproveType.NONE,
+  titleSetting: {
+    enable: false,
+    title: '',
+  },
+  summarySetting: {
+    enable: false,
+    summary: [],
+  },
+  allowWithdrawTask: false,
+}); // 表单数据
+const processData = ref<any>(); // 流程数据
+
+const formList = ref<BpmFormApi.Form[]>([]);
+const categoryList = ref<BpmCategoryApi.Category[]>([]);
+const userList = ref<SystemUserApi.User[]>([]);
+const deptList = ref<SystemDeptApi.Dept[]>([]);
+
+provide('processData', processData);
+provide('modelData', formData);
+
+/** 步骤校验函数 */
+async function validateBasic() {
+  await basicInfoRef.value?.validate();
+}
+
+/** 表单设计校验 */
+async function validateForm() {
+  await formDesignRef.value?.validate();
+}
+
+/** 流程设计校验 */
+async function validateProcess() {
+  await processDesignRef.value?.validate();
+}
+
+/** 更多设置校验 */
+async function validateExtra() {
+  await extraSettingRef.value?.validate();
+}
+
+/** 初始化数据 */
+async function initData() {
+  if (actionType === 'definition') {
+    // 情况一：流程定义场景（恢复）
+    const definitionId = route.params.id as string;
+    const data = await getProcessDefinition(definitionId);
+    const processDefinition: BpmProcessDefinitionType = data;
+    // 将 definition => model
+    processDefinition.type = data.modelType;
+    processDefinition.id = data.modelId;
+    if (data.simpleModel) {
+      processDefinition.simpleModel = JSON.parse(data.simpleModel);
+    }
+    formData.value = processDefinition;
+
+    // 设置 startUserType
+    if (formData.value.startUserIds?.length > 0) {
+      formData.value.startUserType = 1;
+    } else if (formData.value.startDeptIds?.length > 0) {
+      formData.value.startUserType = 2;
+    } else {
+      formData.value.startUserType = 0;
+    }
+  } else if (['copy', 'update'].includes(actionType)) {
+    // 情况二：修改场景/复制场景
+    const modelId = route.params.id as string;
+    formData.value = await getModel(modelId);
+
+    // 设置 startUserType
+    if (formData.value.startUserIds?.length > 0) {
+      formData.value.startUserType = 1;
+    } else if (formData.value.startDeptIds?.length > 0) {
+      formData.value.startUserType = 2;
+    } else {
+      formData.value.startUserType = 0;
+    }
+
+    // 特殊：复制场景
+    if (route.params.type === 'copy') {
+      delete formData.value.id;
+      if (formData.value.bpmnXml) {
+        formData.value.bpmnXml = formData.value.bpmnXml.replaceAll(
+          formData.value.name,
+          `${formData.value.name}副本`,
+        );
+        formData.value.bpmnXml = formData.value.bpmnXml.replaceAll(
+          formData.value.key,
+          `${formData.value.key}_copy`,
+        );
+      }
+      formData.value.name += '副本';
+      formData.value.key += '_copy';
+    }
+  } else {
+    // 情况三：新增场景
+    formData.value.startUserType = 0; // 全体
+    formData.value.managerUserIds.push(userStore.userInfo?.id);
+  }
+
+  // 获取表单列表
+  formList.value = await getFormSimpleList();
+  categoryList.value = await getCategorySimpleList();
+  // 获取用户列表
+  userList.value = await getSimpleUserList();
+  // 获取部门列表
+  deptList.value = await getSimpleDeptList();
+
+  // 最终，设置 currentStep 切换到第一步
+  currentStep.value = 0;
+  // 以前未配置更多设置的流程
+  extraSettingRef.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;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 校验所有步骤数据是否完整 */
+async function validateAllSteps() {
+  // 基本信息校验
+  try {
+    await validateBasic();
+  } catch {
+    currentStep.value = 0;
+    ElMessage.warning('请完善基本信息');
+    return false;
+  }
+
+  // 表单设计校验
+  try {
+    await validateForm();
+  } catch {
+    currentStep.value = 1;
+    ElMessage.warning('请完善自定义表单信息');
+    return false;
+  }
+
+  // 流程设计校验
+  try {
+    await validateProcess();
+  } catch {
+    currentStep.value = 2;
+    return false;
+  }
+
+  // 更多设置校验
+  try {
+    await validateExtra();
+  } catch {
+    currentStep.value = 3;
+    return false;
+  }
+
+  return true;
+}
+
+/** 保存操作 */
+async function handleSave() {
+  try {
+    // 保存前校验所有步骤的数据
+    const result = await validateAllSteps();
+    if (!result) {
+      return;
+    }
+
+    // 更新表单数据
+    const modelData = {
+      ...formData.value,
+    };
+
+    switch (actionType) {
+      case 'copy': {
+        // 情况三：复制场景
+        formData.value.id = await createModel(modelData);
+        // 提示成功
+        ElMessage.success('复制成功，可点击【发布】按钮，进行发布模型');
+        break;
+      }
+      case 'definition': {
+        // 情况一：流程定义场景（恢复）
+        await updateModel(modelData);
+        // 提示成功
+        ElMessage.success('恢复成功，可点击【发布】按钮，进行发布模型');
+        break;
+      }
+      case 'update': {
+        // 情况二：修改场景
+        await updateModel(modelData);
+        // 提示成功
+        ElMessage.success('修改成功，可点击【发布】按钮，进行发布模型');
+        break;
+      }
+      default: {
+        // 情况四：新增场景
+        formData.value.id = await createModel(modelData);
+        // 提示成功
+        ElMessage.success('新建成功，可点击【发布】按钮，进行发布模型');
+      }
+    }
+
+    // 返回列表页（排除更新的情况）
+    if (actionType !== 'update') {
+      await router.push({ name: 'BpmModel' });
+    }
+  } catch (error: any) {
+    console.error('保存失败:', error);
+  }
+}
+
+/** 发布操作 */
+async function handleDeploy() {
+  try {
+    // 1.1 修改场景下直接发布，新增场景下需要先确认
+    if (!formData.value.id) {
+      await confirm('是否确认发布该流程？');
+    }
+    // 1.2 校验所有步骤
+    await validateAllSteps();
+
+    // 2.1 更新表单数据
+    const modelData = {
+      ...formData.value,
+    };
+    // 2.2 先保存所有数据
+    if (formData.value.id) {
+      await updateModel(modelData);
+    } else {
+      const result = await createModel(modelData);
+      formData.value.id = result.id;
+    }
+    // 2.3 发布
+    await deployModel(formData.value.id);
+
+    // 3. 路由并提示
+    ElMessage.success('发布成功');
+    await router.push({ name: 'BpmModel' });
+  } catch (error: any) {
+    console.error('发布失败:', error);
+    ElMessage.warning(error.message || '发布失败');
+  }
+}
+
+/** 步骤切换处理 */
+async function handleStepClick(index: number) {
+  try {
+    if (index !== 0) {
+      await validateBasic();
+    }
+    if (index !== 1) {
+      await validateForm();
+    }
+    if (index !== 2) {
+      await validateProcess();
+    }
+    if (index !== 3) {
+      await validateExtra();
+    }
+    // 切换步骤
+    currentStep.value = index;
+  } catch (error) {
+    console.error('步骤切换失败:', error);
+    if (currentStep.value !== 2) {
+      ElMessage.warning('请先完善当前步骤必填信息');
+    }
+  }
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push({ name: 'BpmModel' });
+}
+
+/** 初始化 */
+onMounted(async () => {
+  await initData();
+});
+
+/** 添加组件卸载前的清理 */
+onBeforeUnmount(() => {
+  // 清理所有的引用
+  basicInfoRef.value = undefined;
+  formDesignRef.value = undefined;
+  processDesignRef.value = undefined;
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="mx-auto">
+      <!-- 头部导航栏 -->
+      <div
+        class="bg-card absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b px-5"
+      >
+        <!-- 左侧标题 -->
+        <div class="flex w-48 items-center overflow-hidden">
+          <IconifyIcon
+            icon="lucide:arrow-left"
+            class="size-5 flex-shrink-0 cursor-pointer"
+            @click="handleBack"
+          />
+          <span
+            class="ml-2.5 truncate text-base"
+            :title="formData.name || '创建流程'"
+          >
+            {{ formData.name || '创建流程' }}
+          </span>
+        </div>
+
+        <!-- 步骤条 -->
+        <div class="flex h-full flex-1 items-center justify-center">
+          <div class="flex h-full w-auto items-center justify-center">
+            <div
+              v-for="(step, index) in steps"
+              :key="index"
+              class="relative mx-6 flex h-full cursor-pointer items-center"
+              :class="[
+                currentStep === index
+                  ? 'border-b-2 border-solid border-blue-500 text-blue-500'
+                  : 'text-gray-500',
+              ]"
+              @click="handleStepClick(index)"
+            >
+              <div
+                class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-base"
+                :class="[
+                  currentStep === index
+                    ? 'border-blue-500 bg-blue-500 text-white'
+                    : 'border-gray-300 bg-white text-gray-500',
+                ]"
+              >
+                {{ index + 1 }}
+              </div>
+              <span class="whitespace-nowrap text-base font-bold">
+                {{ step.title }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧按钮 -->
+        <div class="flex w-48 items-center justify-end gap-2">
+          <ElButton
+            v-if="actionType === 'update'"
+            type="primary"
+            @click="handleDeploy"
+          >
+            发 布
+          </ElButton>
+          <ElButton type="primary" @click="handleSave">
+            <span v-if="actionType === 'definition'">恢 复</span>
+            <span v-else>保 存</span>
+          </ElButton>
+        </div>
+      </div>
+      <!-- 主体内容 -->
+      <ElCard body-style="padding: 10px" class="mb-4">
+        <div class="mt-12">
+          <!-- 第一步：基本信息 -->
+          <div v-if="currentStep === 0" class="mx-auto w-4/6">
+            <BasicInfo
+              v-model="formData"
+              :category-list="categoryList"
+              :user-list="userList"
+              :dept-list="deptList"
+              ref="basicInfoRef"
+            />
+          </div>
+          <!-- 第二步：表单设计  -->
+          <div v-if="currentStep === 1" class="mx-auto w-4/6">
+            <FormDesign
+              v-model="formData"
+              :form-list="formList"
+              ref="formDesignRef"
+            />
+          </div>
+
+          <!-- 第三步：流程设计 -->
+          <ProcessDesign
+            v-if="currentStep === 2"
+            v-model="formData"
+            ref="processDesignRef"
+          />
+
+          <!-- 第四步：更多设置 -->
+          <div v-if="currentStep === 3" class="mx-auto w-4/6">
+            <ExtraSetting v-model="formData" ref="extraSettingRef" />
+          </div>
+        </div>
+      </ElCard>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue b/apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue
new file mode 100644
index 000000000..0c82d5b14
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue
@@ -0,0 +1,442 @@
+<script lang="ts" setup>
+import type { FormItemRule } from 'element-plus';
+
+import type { PropType } from 'vue';
+
+import type { BpmCategoryApi } from '#/api/bpm/category';
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { ref, watch } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElAvatar,
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElSelect,
+  ElTooltip,
+} from 'element-plus';
+
+// import { DeptSelectModal, UserSelectModal } from '#/components/select-modal';
+import { ImageUpload } from '#/components/upload';
+
+const props = defineProps({
+  categoryList: {
+    type: Array as PropType<BpmCategoryApi.Category[]>,
+    required: true,
+  },
+  userList: {
+    type: Array as PropType<SystemUserApi.User[]>,
+    required: true,
+  },
+  deptList: {
+    type: Array as PropType<SystemDeptApi.Dept[]>,
+    required: true,
+  },
+});
+
+// const [UserSelectModalComp, userSelectModalApi] = useVbenModal({
+//   connectedComponent: UserSelectModal,
+//   destroyOnClose: true,
+// });
+
+// const [DeptSelectModalComp, deptSelectModalApi] = useVbenModal({
+//   connectedComponent: DeptSelectModal,
+//   destroyOnClose: true,
+// });
+
+const formRef = ref(); // 表单引用
+const modelData = defineModel<any>(); // 创建本地数据副本
+
+const selectedStartUsers = ref<SystemUserApi.User[]>([]); // 选中的发起人
+const selectedStartDepts = ref<SystemDeptApi.Dept[]>([]); // 选中的发起部门
+
+const selectedManagerUsers = ref<SystemUserApi.User[]>([]); // 选中的流程管理员
+const currentSelectType = ref<'manager' | 'start'>('start');
+const selectedUsers = ref<number[]>(); // 选中的用户
+const rules: Record<string, FormItemRule[]> = {
+  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
+  key: [
+    { required: true, message: '流程标识不能为空', trigger: 'blur' },
+    {
+      validator: (_rule: any, value: string, callback: any) => {
+        if (!value) {
+          callback();
+          return;
+        }
+        if (!/^[a-z_][-\w.$]*$/i.test(value)) {
+          callback(
+            new Error(
+              '只能包含字母、数字、下划线、连字符和点号，且必须以字母或下划线开头',
+            ),
+          );
+          return;
+        }
+        callback();
+      },
+      trigger: 'blur',
+    },
+  ],
+  category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '流程类型不能为空', trigger: 'blur' }],
+  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
+  managerUserIds: [
+    { required: true, message: '流程管理员不能为空', trigger: 'blur' },
+  ],
+};
+
+/** 初始化选中的用户 */
+watch(
+  () => modelData.value,
+  (newVal) => {
+    selectedStartUsers.value = newVal.startUserIds?.length
+      ? (props.userList.filter((user: SystemUserApi.User) =>
+          newVal.startUserIds.includes(user.id),
+        ) as SystemUserApi.User[])
+      : [];
+    selectedStartDepts.value = newVal.startDeptIds?.length
+      ? (props.deptList.filter((dept: SystemDeptApi.Dept) =>
+          newVal.startDeptIds.includes(dept.id),
+        ) as SystemDeptApi.Dept[])
+      : [];
+    selectedManagerUsers.value = newVal.managerUserIds?.length
+      ? (props.userList.filter((user: SystemUserApi.User) =>
+          newVal.managerUserIds.includes(user.id),
+        ) as SystemUserApi.User[])
+      : [];
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 打开发起人选择 */
+function openStartUserSelect() {
+  currentSelectType.value = 'start';
+  selectedUsers.value = selectedStartUsers.value.map(
+    (user) => user.id,
+  ) as number[];
+  // userSelectModalApi.setData({ userIds: selectedUsers.value }).open();
+}
+
+/** 打开部门选择 */
+function openStartDeptSelect() {
+  // deptSelectModalApi.setData({ selectedList: selectedStartDepts.value }).open();
+}
+
+// /** 处理部门选择确认 */
+// function handleDeptSelectConfirm(depts: SystemDeptApi.Dept[]) {
+//   modelData.value = {
+//     ...modelData.value,
+//     startDeptIds: depts.map((d) => d.id),
+//   };
+// }
+
+/** 打开管理员选择 */
+function openManagerUserSelect() {
+  currentSelectType.value = 'manager';
+  selectedUsers.value = selectedManagerUsers.value.map(
+    (user) => user.id,
+  ) as number[];
+  // userSelectModalApi.setData({ userIds: selectedUsers.value }).open();
+}
+
+// /** 处理用户选择确认 */
+// function handleUserSelectConfirm(userList: SystemUserApi.User[]) {
+//   modelData.value =
+//     currentSelectType.value === 'start'
+//       ? {
+//           ...modelData.value,
+//           startUserIds: userList.map((u) => u.id),
+//         }
+//       : {
+//           ...modelData.value,
+//           managerUserIds: userList.map((u) => u.id),
+//         };
+// }
+
+// /** 用户选择弹窗关闭 */
+// function handleUserSelectClosed() {
+//   selectedUsers.value = [];
+// }
+
+// /** 用户选择弹窗取消 */
+// function handleUserSelectCancel() {
+//   selectedUsers.value = [];
+// }
+
+/** 处理发起人类型变化 */
+function handleStartUserTypeChange(value: number) {
+  switch (value) {
+    case 0: {
+      modelData.value = {
+        ...modelData.value,
+        startUserIds: [],
+        startDeptIds: [],
+      };
+      break;
+    }
+    case 1: {
+      modelData.value = {
+        ...modelData.value,
+        startDeptIds: [],
+      };
+      break;
+    }
+    case 2: {
+      modelData.value = {
+        ...modelData.value,
+        startUserIds: [],
+      };
+      break;
+    }
+  }
+}
+
+/** 移除发起人 */
+function handleRemoveStartUser(user: SystemUserApi.User) {
+  modelData.value = {
+    ...modelData.value,
+    startUserIds: modelData.value.startUserIds.filter(
+      (id: number) => id !== user.id,
+    ),
+  };
+}
+
+/** 移除部门 */
+function handleRemoveStartDept(dept: SystemDeptApi.Dept) {
+  modelData.value = {
+    ...modelData.value,
+    startDeptIds: modelData.value.startDeptIds.filter(
+      (id: number) => id !== dept.id,
+    ),
+  };
+}
+
+/** 移除管理员 */
+function handleRemoveManagerUser(user: SystemUserApi.User) {
+  modelData.value = {
+    ...modelData.value,
+    managerUserIds: modelData.value.managerUserIds.filter(
+      (id: number) => id !== user.id,
+    ),
+  };
+}
+
+/** 表单校验 */
+async function validate() {
+  await formRef.value?.validate();
+}
+
+defineExpose({ validate });
+</script>
+
+<template>
+  <div>
+    <ElForm ref="formRef" :model="modelData" :rules="rules" label-width="100px">
+      <ElFormItem label="流程标识" prop="key">
+        <div class="flex w-full items-center">
+          <ElInput
+            v-model="modelData.key"
+            :disabled="!!modelData.id"
+            placeholder="请输入流程标识，以字母或下划线开头"
+            class="flex-1"
+          />
+          <ElTooltip
+            :content="
+              modelData.id ? '流程标识不可修改！' : '新建后，流程标识不可修改！'
+            "
+            placement="top"
+          >
+            <IconifyIcon icon="lucide:circle-help" class="ml-1 size-5" />
+          </ElTooltip>
+        </div>
+      </ElFormItem>
+      <ElFormItem label="流程名称" prop="name">
+        <ElInput
+          v-model="modelData.name"
+          :disabled="!!modelData.id"
+          clearable
+          placeholder="请输入流程名称"
+        />
+      </ElFormItem>
+      <ElFormItem label="流程分类" prop="category">
+        <ElSelect
+          v-model="modelData.category"
+          clearable
+          placeholder="请选择流程分类"
+          class="w-full"
+        >
+          <ElOption
+            v-for="category in categoryList"
+            :key="category.code"
+            :value="category.code"
+            :label="category.name"
+          />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="流程图标">
+        <ImageUpload v-model:value="modelData.icon" />
+      </ElFormItem>
+      <ElFormItem label="流程描述" prop="description">
+        <ElInput v-model="modelData.description" type="textarea" clearable />
+      </ElFormItem>
+      <ElFormItem label="流程类型" prop="type">
+        <ElRadioGroup v-model="modelData.type">
+          <ElRadio
+            v-for="dict in getDictOptions(DICT_TYPE.BPM_MODEL_TYPE, 'number')"
+            :key="dict.value as number"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElFormItem label="是否可见" prop="visible">
+        <ElRadioGroup v-model="modelData.visible">
+          <ElRadio
+            v-for="dict in getDictOptions(
+              DICT_TYPE.INFRA_BOOLEAN_STRING,
+              'boolean',
+            )"
+            :key="dict.label"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElFormItem label="谁可以发起" prop="startUserType">
+        <ElSelect
+          v-model="modelData.startUserType"
+          placeholder="请选择谁可以发起"
+          @change="handleStartUserTypeChange"
+        >
+          <ElOption :value="0" label="全员" />
+          <ElOption :value="1" label="指定人员" />
+          <ElOption :value="2" label="指定部门" />
+        </ElSelect>
+        <div
+          v-if="modelData.startUserType === 1"
+          class="mt-2 flex flex-wrap gap-1"
+        >
+          <div
+            v-for="user in selectedStartUsers"
+            :key="user.id"
+            class="relative flex h-8 items-center rounded-lg bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
+          >
+            <ElAvatar
+              class="m-1 size-7"
+              v-if="user.avatar"
+              :src="user.avatar"
+            />
+            <ElAvatar class="m-1 size-7" v-else>
+              {{ user.nickname?.substring(0, 1) }}
+            </ElAvatar>
+            <span class="text-gray-700 dark:text-gray-200">
+              {{ user.nickname }}
+            </span>
+            <IconifyIcon
+              icon="lucide:x"
+              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500 dark:text-gray-200"
+              @click="handleRemoveStartUser(user)"
+            />
+          </div>
+          <ElButton link @click="openStartUserSelect" class="flex items-center">
+            <template #icon>
+              <IconifyIcon icon="lucide:user-plus" class="size-4" />
+            </template>
+            选择人员
+          </ElButton>
+        </div>
+        <div
+          v-if="modelData.startUserType === 2"
+          class="mt-2 flex flex-wrap gap-1"
+        >
+          <div
+            v-for="dept in selectedStartDepts"
+            :key="dept.id"
+            class="relative flex h-8 items-center rounded-lg bg-gray-100 pr-2 shadow-sm hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
+          >
+            <IconifyIcon icon="lucide:building" class="size-6 px-1" />
+            <span class="text-gray-700 dark:text-gray-200">
+              {{ dept.name }}
+            </span>
+            <IconifyIcon
+              icon="lucide:x"
+              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
+              @click="handleRemoveStartDept(dept)"
+            />
+          </div>
+          <ElButton link @click="openStartDeptSelect" class="flex items-center">
+            <template #icon>
+              <IconifyIcon icon="lucide:user-plus" class="size-4" />
+            </template>
+            选择部门
+          </ElButton>
+        </div>
+      </ElFormItem>
+      <ElFormItem label="流程管理员" prop="managerUserIds">
+        <div class="flex flex-wrap gap-1">
+          <div
+            v-for="user in selectedManagerUsers"
+            :key="user.id"
+            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
+          >
+            <ElAvatar
+              class="m-1 size-7"
+              v-if="user.avatar"
+              :src="user.avatar"
+            />
+            <ElAvatar class="m-1 size-7" v-else>
+              {{ user.nickname?.substring(0, 1) }}
+            </ElAvatar>
+            <span class="text-gray-700 dark:text-gray-200">
+              {{ user.nickname }}
+            </span>
+            <IconifyIcon
+              icon="lucide:x"
+              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
+              @click="handleRemoveManagerUser(user)"
+            />
+          </div>
+          <ElButton
+            link
+            @click="openManagerUserSelect"
+            class="flex items-center"
+          >
+            <template #icon>
+              <IconifyIcon icon="lucide:user-plus" class="size-4" />
+            </template>
+            选择人员
+          </ElButton>
+        </div>
+      </ElFormItem>
+    </ElForm>
+
+    <!-- 用户选择弹窗 -->
+    <!-- <UserSelectModalComp
+      class="w-3/5"
+      v-model:value="selectedUsers"
+      :multiple="true"
+      @confirm="handleUserSelectConfirm"
+      @closed="handleUserSelectClosed"
+      @cancel="handleUserSelectCancel"
+    /> -->
+    <!-- 部门选择对话框 -->
+    <!-- <DeptSelectModalComp
+      class="w-3/5"
+      :check-strictly="true"
+      @confirm="handleDeptSelectConfirm"
+    /> -->
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/bpm-model-editor.vue b/apps/web-ele/src/views/bpm/model/form/modules/bpm-model-editor.vue
new file mode 100644
index 000000000..4f756afc3
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/bpm-model-editor.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { inject, onBeforeUnmount, provide, ref, shallowRef, watch } from 'vue';
+
+import { ContentWrap } from '@vben/common-ui';
+import { BpmModelFormType } from '@vben/constants';
+
+import { getForm } from '#/api/bpm/form';
+// import {
+//   MyProcessDesigner,
+//   MyProcessPenal,
+// } from '#/views/bpm/components/bpmn-process-designer/package';
+// // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
+// import CustomContentPadProvider from '#/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad';
+// // 自定义左侧菜单（修改 默认任务 为 用户任务）
+// import CustomPaletteProvider from '#/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette';
+
+defineOptions({ name: 'BpmModelEditor' });
+
+defineProps<{
+  modelId?: string;
+  modelKey: string;
+  modelName: string;
+  value?: string;
+}>();
+
+// const emit = defineEmits(['success', 'init-finished']);
+
+const formFields = ref<string[]>([]); // 表单信息
+const formType = ref(BpmModelFormType.NORMAL); // 表单类型，暂仅限流程表单 TODO @jason：是不是已经支持 业务表单 了？
+provide('formFields', formFields);
+provide('formType', formType);
+
+// const xmlString = inject('processData') as Ref; // 注入流程数据
+const modelData = inject('modelData') as Ref; // 注入模型数据
+
+const modeler = shallowRef(); // BPMN Modeler
+// const processDesigner = ref();
+// const controlForm = ref({
+//   simulation: true,
+//   labelEditing: false,
+//   labelVisible: false,
+//   prefix: 'flowable',
+//   headerButtonSize: 'mini',
+//   // additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
+// });
+
+// const model = ref<BpmModelApi.Model>(); // 流程模型的信息
+
+/** 初始化 modeler */
+// const initModeler = async (item: any) => {
+//   model.value = modelData.value;
+//   modeler.value = item;
+// };
+
+/** 添加/修改模型 */
+// const save = async (bpmnXml: string) => {
+//   try {
+//     xmlString.value = bpmnXml;
+//     emit('success', bpmnXml);
+//   } catch (error) {
+//     console.error('保存失败:', error);
+//     ElMessage.error('保存失败');
+//   }
+// };
+
+/** 监听表单 ID 变化，加载表单数据 */
+watch(
+  () => modelData.value.formId,
+  async (newFormId) => {
+    if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
+      const data = await getForm(newFormId);
+      formFields.value = data.fields;
+    } else {
+      formFields.value = [];
+    }
+  },
+  { immediate: true },
+);
+
+/** 在组件卸载时清理 */
+onBeforeUnmount(() => {
+  modeler.value = null;
+  // 清理全局实例
+  const w = window as any;
+  if (w.bpmnInstances) {
+    w.bpmnInstances = null;
+  }
+});
+</script>
+
+<template>
+  <ContentWrap>
+    <!-- 流程设计器，负责绘制流程等 -->
+    <!-- <MyProcessDesigner
+      key="designer"
+      v-model="xmlString"
+      :value="xmlString"
+      v-bind="controlForm"
+      keyboard
+      ref="processDesigner"
+      @init-finished="initModeler"
+      :additional-model="controlForm.additionalModel"
+      :model="model"
+      @save="save"
+      :process-id="modelKey"
+      :process-name="modelName"
+    /> -->
+    <!-- 流程属性器，负责编辑每个流程节点的属性 -->
+    <!-- <MyProcessPenal
+      v-if="modeler"
+      key="penal"
+      :bpmn-modeler="modeler"
+      :prefix="controlForm.prefix"
+      class="process-panel"
+      :model="model"
+    /> -->
+  </ContentWrap>
+</template>
+
+<style scoped>
+:deep(.process-panel__container) {
+  @apply absolute right-[20px] top-[70px];
+}
+</style>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/custom-print-template.vue b/apps/web-ele/src/views/bpm/model/form/modules/custom-print-template.vue
new file mode 100644
index 000000000..3a75ed61d
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/custom-print-template.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { MentionItem } from '../modules/tinymce-plugin';
+
+import { computed, onBeforeUnmount, ref, shallowRef } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import Editor from '@tinymce/tinymce-vue';
+import { ElAlert } from 'element-plus';
+
+import { setupTinyPlugins } from './tinymce-plugin';
+
+const props = withDefaults(
+  defineProps<{
+    formFields?: Array<{ field: string; title: string }>;
+  }>(),
+  {
+    formFields: () => [],
+  },
+);
+
+const emits = defineEmits<{
+  (e: 'confirm', value: string): void;
+}>();
+
+/** TinyMCE 自托管：https://www.jianshu.com/p/59a9c3802443 */
+const tinymceScriptSrc = `${import.meta.env.VITE_BASE}tinymce/tinymce.min.js`;
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const { template } = modalApi.getData<{
+        template: string;
+      }>();
+      if (template !== undefined) {
+        valueHtml.value = template;
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  onConfirm() {
+    emits('confirm', valueHtml.value);
+    modalApi.close();
+  },
+});
+
+const mentionList = computed<MentionItem[]>(() => {
+  const base: MentionItem[] = [
+    { id: 'startUser', name: '发起人' },
+    { id: 'startUserDept', name: '发起人部门' },
+    { id: 'processName', name: '流程名称' },
+    { id: 'processNum', name: '流程编号' },
+    { id: 'startTime', name: '发起时间' },
+    { id: 'endTime', name: '结束时间' },
+    { id: 'processStatus', name: '流程状态' },
+    { id: 'printUser', name: '打印人' },
+    { id: 'printTime', name: '打印时间' },
+  ];
+
+  const extras: MentionItem[] = (props.formFields || []).map((it: any) => ({
+    id: it.field,
+    name: `[表单]${it.title}`,
+  }));
+  return [...base, ...extras];
+}); // 提供给 @ 自动补全的字段（默认 + 表单字段）
+
+const valueHtml = ref<string>('');
+const editorRef = shallowRef<any>(); // 编辑器
+
+const tinyInit = {
+  height: 400,
+  width: 'auto',
+  menubar: false,
+  plugins: 'link importcss table code preview autoresize lists ',
+  toolbar:
+    'undo redo | styles fontsize | bold italic underline | alignleft aligncenter alignright | link table | processrecord code preview',
+  language: 'zh_CN',
+  branding: false,
+  statusbar: true,
+  content_style:
+    'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
+  setup(editor: any) {
+    editorRef.value = editor;
+    // 在编辑器 setup 时注册自定义插件
+    setupTinyPlugins(editor, () => mentionList.value);
+  },
+};
+
+onBeforeUnmount(() => {
+  if (editorRef.value) {
+    editorRef.value.destroy?.();
+  }
+});
+</script>
+
+<template>
+  <Modal class="w-3/4" title="自定义模板">
+    <div class="mb-3">
+      <ElAlert
+        message="输入 @ 可选择插入流程选项和表单选项"
+        type="info"
+        show-icon
+      />
+    </div>
+    <Editor
+      v-model="valueHtml"
+      :init="tinyInit"
+      :tinymce-script-src="tinymceScriptSrc"
+      license-key="gpl"
+    />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/extra-setting.vue b/apps/web-ele/src/views/bpm/model/form/modules/extra-setting.vue
new file mode 100644
index 000000000..739229387
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/extra-setting.vue
@@ -0,0 +1,618 @@
+<script setup lang="ts">
+import { computed, provide, ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import {
+  BpmAutoApproveType,
+  BpmModelFormType,
+  ProcessVariableEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import dayjs from 'dayjs';
+import {
+  ElButton,
+  ElCheckbox,
+  ElCol,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElMention,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElRow,
+  ElSelect,
+  ElSwitch,
+  ElText,
+  ElTooltip,
+} from 'element-plus';
+
+import { getForm } from '#/api/bpm/form';
+// import {
+//   HttpRequestSetting,
+//   parseFormFields,
+// } from '#/views/bpm/components/simple-process-design';
+import { parseFormFields } from '#/components/form-create';
+
+import PrintTemplate from './custom-print-template.vue';
+
+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 processBeforeTriggerEnable = ref(false);
+function handleProcessBeforeTriggerEnableChange(
+  val: boolean | number | string,
+) {
+  modelData.value.processBeforeTriggerSetting = val
+    ? {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      }
+    : null;
+}
+
+/** 是否开启流程后置通知 */
+const processAfterTriggerEnable = ref(false);
+function handleProcessAfterTriggerEnableChange(val: boolean | number | string) {
+  modelData.value.processAfterTriggerSetting = val
+    ? {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      }
+    : null;
+}
+
+/** 是否开启任务前置通知 */
+const taskBeforeTriggerEnable = ref(false);
+function handleTaskBeforeTriggerEnableChange(val: boolean | number | string) {
+  modelData.value.taskBeforeTriggerSetting = val
+    ? {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      }
+    : null;
+}
+
+/** 是否开启任务后置通知 */
+const taskAfterTriggerEnable = ref(false);
+function handleTaskAfterTriggerEnableChange(val: boolean | number | string) {
+  modelData.value.taskAfterTriggerSetting = val
+    ? {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      }
+    : null;
+}
+
+/** 表单字段 */
+const formFields = ref<Array<{ field: string; title: string }>>([]);
+const formFieldOptions4Title = computed(() => {
+  const cloneFormField = formFields.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 formFields.value.map((item) => {
+    return {
+      label: item.title,
+      value: item.field,
+    };
+  });
+});
+const unParsedFormFields = ref<string[]>([]); // 未解析的表单字段
+provide('formFields', unParsedFormFields); // 暴露给子组件 HttpRequestSetting 使用
+
+/** 兼容以前未配置更多设置的流程 */
+function initData() {
+  if (!modelData.value.processIdRule) {
+    modelData.value.processIdRule = {
+      enable: false,
+      prefix: '',
+      infix: '',
+      postfix: '',
+      length: 5,
+    };
+  }
+  if (!modelData.value.printTemplateSetting) {
+    modelData.value.printTemplateSetting = {
+      enable: false,
+      template: '',
+    };
+  }
+  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: [],
+    };
+  }
+  if (modelData.value.processBeforeTriggerSetting) {
+    processBeforeTriggerEnable.value = true;
+  }
+  if (modelData.value.processAfterTriggerSetting) {
+    processAfterTriggerEnable.value = true;
+  }
+  if (modelData.value.taskBeforeTriggerSetting) {
+    taskBeforeTriggerEnable.value = true;
+  }
+  if (modelData.value.taskAfterTriggerSetting) {
+    taskAfterTriggerEnable.value = true;
+  }
+  if (modelData.value.allowWithdrawTask === undefined) {
+    modelData.value.allowWithdrawTask = false;
+  }
+}
+
+/** 监听表单 ID 变化，加载表单数据 */
+watch(
+  () => modelData.value.formId,
+  async (newFormId) => {
+    if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
+      const data = await getForm(newFormId);
+      const result: Array<{ field: string; title: string }> = [];
+      if (data.fields) {
+        unParsedFormFields.value = data.fields;
+        data.fields.forEach((fieldStr: string) => {
+          parseFormFields(JSON.parse(fieldStr), result);
+        });
+      }
+      formFields.value = result;
+    } else {
+      formFields.value = [];
+      unParsedFormFields.value = [];
+    }
+  },
+  { immediate: true },
+);
+const formRef = ref(); // 表单引用
+
+/** 表单校验 */
+async function validate() {
+  await formRef.value?.validate();
+}
+
+/** 自定义打印模板模态框 */
+const [PrintTemplateModal, printTemplateModalApi] = useVbenModal({
+  connectedComponent: PrintTemplate,
+  destroyOnClose: true,
+});
+
+/** 弹出自定义打印模板弹窗 */
+function openPrintTemplateModal() {
+  printTemplateModalApi
+    .setData({ template: modelData.value.printTemplateSetting.template })
+    .open();
+}
+
+/** 默认的打印模板， 目前自定义模板没有引入自定义样式。 看后续是否需要 */
+const defaultTemplate = `<p style="text-align: center;font-size: 1.25rem;"><strong><span data-w-e-type="mention" data-value="流程名称" data-info="%7B%22id%22%3A%22processName%22%7D">@流程名称</span></strong></p>
+<p style="text-align: right;">打印人员：<span data-w-e-type="mention" data-info="%7B%22id%22%3A%22printUser%22%7D">@打印人</span></p>
+<p style="text-align: left;">流程编号：<span data-w-e-type="mention" data-value="流程编号" data-info="%7B%22id%22%3A%22processNum%22%7D">@流程编号</span></p>
+<p>&nbsp;</p>
+<table style="width: 100%; height: 72.2159px;">
+<tbody>
+<tr style="height: 36.108px;">
+<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">发起人</td>
+<td style="width: 30.5551%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-value="发起人" data-info="%7B%22id%22%3A%22startUser%22%7D">@发起人</span></td>
+<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">发起时间</td>
+<td style="width: 26.0284%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-value="发起时间" data-info="%7B%22id%22%3A%22startTime%22%7D">@发起时间</span></td>
+</tr>
+<tr style="height: 36.108px;">
+<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">所属部门</td>
+<td style="width: 30.5551%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="发起人部门" data-info="%7B%22id%22%3A%22startUserDept%22%7D">@发起人部门</span></td>
+<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">流程状态</td>
+<td style="width: 26.0284%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-value="流程状态" data-info="%7B%22id%22%3A%22processStatus%22%7D">@流程状态</span></td>
+</tr>
+</tbody>
+</table>
+<p>&nbsp;</p>
+<div contenteditable="false" data-w-e-type="process-record" data-w-e-is-void="">
+<table class="process-record-table" style="width: 100%; border-collapse: collapse; border: 1px solid;">
+<tr>
+	<td style="width: 100%; border: 1px solid; text-align: center;" colspan="2">流程记录</td>
+</tr>
+<tr>
+	<td style="width: 25%; border: 1px solid;">节点</td>
+	<td style="width: 75%; border: 1px solid;">操作</td>
+</tr>
+</table>
+</div>
+<p>&nbsp;</p>`;
+
+const printTemplateEnable = computed<boolean>({
+  get() {
+    return !!modelData.value?.printTemplateSetting?.enable;
+  },
+  set(val: boolean) {
+    if (!modelData.value.printTemplateSetting) {
+      modelData.value.printTemplateSetting = {
+        enable: false,
+        template: '',
+      };
+    }
+    modelData.value.printTemplateSetting.enable = val;
+  },
+}); // 自定义打印模板开关
+
+function handlePrintTemplateEnableChange(checked: any) {
+  const val = !!checked;
+  if (val && !modelData.value.printTemplateSetting.template) {
+    modelData.value.printTemplateSetting.template = defaultTemplate;
+  }
+}
+
+function confirmPrintTemplate(template: string) {
+  modelData.value.printTemplateSetting.template = template;
+}
+
+defineExpose({ initData, validate });
+</script>
+<template>
+  <ElForm
+    ref="formRef"
+    :model="modelData"
+    label-width="120px"
+    class="mt-5 px-5"
+  >
+    <ElFormItem class="mb-5" label="提交人权限">
+      <div class="flex flex-col gap-2">
+        <ElCheckbox v-model="modelData.allowCancelRunningProcess">
+          允许撤销审批中的申请
+        </ElCheckbox>
+        <div class="ml-6 text-sm">
+          <ElText type="warning">
+            第一个审批节点通过后，提交人仍可撤销申请
+          </ElText>
+        </div>
+      </div>
+    </ElFormItem>
+    <ElFormItem class="mb-5" label="审批人权限">
+      <div class="flex flex-col gap-2">
+        <ElCheckbox v-model="modelData.allowWithdrawTask">
+          允许审批人撤回任务
+        </ElCheckbox>
+        <div class="ml-6 text-sm">
+          <ElText type="info">审批人可撤回正在审批节点的前一节点</ElText>
+        </div>
+      </div>
+    </ElFormItem>
+    <ElFormItem v-if="modelData.processIdRule" class="mb-5" label="流程编码">
+      <ElRow :gutter="8">
+        <ElCol :span="1">
+          <ElCheckbox v-model="modelData.processIdRule.enable" />
+        </ElCol>
+        <ElCol :span="5">
+          <ElInput
+            v-model="modelData.processIdRule.prefix"
+            placeholder="前缀"
+            :disabled="!modelData.processIdRule.enable"
+          />
+        </ElCol>
+        <ElCol :span="6">
+          <ElSelect
+            v-model="modelData.processIdRule.infix"
+            clearable
+            placeholder="中缀"
+            :disabled="!modelData.processIdRule.enable"
+          >
+            <ElOption
+              v-for="option in timeOptions"
+              :key="option.value"
+              :value="option.value"
+              :label="option.label"
+            />
+          </ElSelect>
+        </ElCol>
+        <ElCol :span="4">
+          <ElInput
+            v-model="modelData.processIdRule.postfix"
+            placeholder="后缀"
+            :disabled="!modelData.processIdRule.enable"
+          />
+        </ElCol>
+        <ElCol :span="4">
+          <ElInputNumber
+            v-model="modelData.processIdRule.length"
+            :min="5"
+            :disabled="!modelData.processIdRule.enable"
+          />
+        </ElCol>
+      </ElRow>
+      <div class="ml-6 mt-2" v-if="modelData.processIdRule.enable">
+        <ElText type="success">编码示例：{{ numberExample }}</ElText>
+      </div>
+    </ElFormItem>
+    <ElFormItem class="mb-5" label="自动去重">
+      <div class="flex flex-col">
+        <div class="mb-2">
+          <ElText>同一审批人在流程中重复出现时：</ElText>
+        </div>
+        <ElRadioGroup v-model="modelData.autoApprovalType">
+          <div class="flex flex-col gap-2">
+            <ElRadio :value="0">不自动通过</ElRadio>
+            <ElRadio :value="1">
+              仅审批一次，后续重复的审批节点均自动通过
+            </ElRadio>
+            <ElRadio :value="2">仅针对连续审批的节点自动通过</ElRadio>
+          </div>
+        </ElRadioGroup>
+      </div>
+    </ElFormItem>
+    <ElFormItem v-if="modelData.titleSetting" class="mb-5" label="标题设置">
+      <div class="flex flex-col gap-2">
+        <ElRadioGroup v-model="modelData.titleSetting.enable">
+          <div class="flex flex-col gap-2">
+            <ElRadio :value="false">
+              系统默认
+              <ElText type="success"> 展示流程名称 </ElText>
+            </ElRadio>
+            <ElRadio :value="true">
+              <div class="inline-flex items-center">
+                自定义标题
+                <ElTooltip
+                  content="输入字符 '{' 即可插入表单字段"
+                  placement="top"
+                >
+                  <IconifyIcon
+                    icon="lucide:circle-help"
+                    class="ml-1 size-4 text-gray-500"
+                  />
+                </ElTooltip>
+              </div>
+            </ElRadio>
+          </div>
+        </ElRadioGroup>
+        <ElMention
+          v-if="modelData.titleSetting.enable"
+          v-model="modelData.titleSetting.title"
+          class="w-full min-w-[400px]"
+          type="textarea"
+          prefix="{"
+          split="}"
+          :options="formFieldOptions4Title"
+          placeholder="请插入表单字段（输入 '{' 可以选择表单字段）或输入文本"
+        />
+      </div>
+    </ElFormItem>
+    <ElFormItem
+      v-if="
+        modelData.summarySetting &&
+        modelData.formType === BpmModelFormType.NORMAL
+      "
+      class="mb-5"
+      label="摘要设置"
+    >
+      <div class="flex flex-col gap-2">
+        <ElRadioGroup v-model="modelData.summarySetting.enable">
+          <div class="flex flex-col gap-2">
+            <ElRadio :value="false">
+              系统默认
+              <ElText type="info">展示表单前 3 个字段</ElText>
+            </ElRadio>
+            <ElRadio :value="true"> 自定义摘要 </ElRadio>
+          </div>
+        </ElRadioGroup>
+        <ElSelect
+          v-if="modelData.summarySetting.enable"
+          v-model="modelData.summarySetting.summary"
+          multiple
+          placeholder="请选择要展示的表单字段"
+          class="w-full min-w-[400px]"
+        >
+          <ElOption
+            v-for="option in formFieldOptions4Summary"
+            :key="option.value"
+            :value="option.value"
+            :label="option.label"
+          />
+        </ElSelect>
+      </div>
+    </ElFormItem>
+    <ElFormItem class="mb-5" label="流程前置通知">
+      <ElRow class="mt-1">
+        <ElCol :span="24">
+          <div class="flex items-center">
+            <ElSwitch
+              v-model="processBeforeTriggerEnable"
+              @change="handleProcessBeforeTriggerEnableChange"
+            />
+            <span class="ml-4">流程启动后通知</span>
+          </div>
+        </ElCol>
+      </ElRow>
+      <ElRow v-if="processBeforeTriggerEnable">
+        <ElCol :span="24" class="mt-6">
+          <!-- <HttpRequestSetting
+            v-model:setting="modelData.processBeforeTriggerSetting"
+            :response-enable="true"
+            form-item-prefix="processBeforeTriggerSetting"
+          /> -->
+        </ElCol>
+      </ElRow>
+    </ElFormItem>
+    <ElFormItem class="mb-5" label="流程后置通知">
+      <ElRow class="mt-1">
+        <ElCol :span="24">
+          <div class="flex items-center">
+            <ElSwitch
+              v-model="processAfterTriggerEnable"
+              @change="handleProcessAfterTriggerEnableChange"
+            />
+            <span class="ml-4">流程结束后通知</span>
+          </div>
+        </ElCol>
+      </ElRow>
+      <ElRow v-if="processAfterTriggerEnable" class="mt-2">
+        <ElCol :span="24">
+          <HttpRequestSetting
+            v-model:setting="modelData.processAfterTriggerSetting"
+            :response-enable="true"
+            form-item-prefix="processAfterTriggerSetting"
+          />
+        </ElCol>
+      </ElRow>
+    </ElFormItem>
+    <ElFormItem class="mb-5" label="任务前置通知">
+      <ElRow class="mt-1">
+        <ElCol :span="24">
+          <div class="flex items-center">
+            <ElSwitch
+              v-model="taskBeforeTriggerEnable"
+              @change="handleTaskBeforeTriggerEnableChange"
+            />
+            <span class="ml-4">任务执行时通知</span>
+          </div>
+        </ElCol>
+      </ElRow>
+      <ElRow v-if="taskBeforeTriggerEnable" class="mt-2">
+        <ElCol :span="24">
+          <HttpRequestSetting
+            v-model:setting="modelData.taskBeforeTriggerSetting"
+            :response-enable="true"
+            form-item-prefix="taskBeforeTriggerSetting"
+          />
+        </ElCol>
+      </ElRow>
+    </ElFormItem>
+    <ElFormItem class="mb-5" label="任务后置通知">
+      <ElRow class="mt-1">
+        <ElCol :span="24">
+          <div class="flex items-center">
+            <ElSwitch
+              v-model="taskAfterTriggerEnable"
+              @change="handleTaskAfterTriggerEnableChange"
+            />
+            <span class="ml-4">任务结束后通知</span>
+          </div>
+        </ElCol>
+      </ElRow>
+      <ElRow v-if="taskAfterTriggerEnable" class="mt-2">
+        <ElCol :span="24">
+          <HttpRequestSetting
+            v-model:setting="modelData.taskAfterTriggerSetting"
+            :response-enable="true"
+            form-item-prefix="taskAfterTriggerSetting"
+          />
+        </ElCol>
+      </ElRow>
+    </ElFormItem>
+    <ElFormItem class="mb-5" label="自定义打印模板">
+      <div class="flex w-full flex-col">
+        <div class="flex items-center">
+          <ElSwitch
+            v-model="printTemplateEnable"
+            @change="handlePrintTemplateEnableChange"
+          />
+          <ElButton
+            v-if="printTemplateEnable"
+            class="ml-2 flex items-center"
+            link
+            @click="openPrintTemplateModal"
+          >
+            <template #icon>
+              <IconifyIcon icon="lucide:pencil" />
+            </template>
+            编辑模板
+          </ElButton>
+        </div>
+      </div>
+    </ElFormItem>
+    <PrintTemplateModal
+      :form-fields="formFields"
+      @confirm="confirmPrintTemplate"
+    />
+  </ElForm>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/form-design.vue b/apps/web-ele/src/views/bpm/model/form/modules/form-design.vue
new file mode 100644
index 000000000..534001d77
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/form-design.vue
@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+import type { FormItemRule } from 'element-plus';
+
+import type { BpmFormApi } from '#/api/bpm/form';
+
+import { ref, watch } from 'vue';
+
+import { BpmModelFormType, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import FormCreate from '@form-create/element-ui';
+import {
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElSelect,
+  ElTooltip,
+} from 'element-plus';
+
+import { getForm } from '#/api/bpm/form';
+import { setConfAndFields2 } from '#/components/form-create';
+
+const props = defineProps({
+  formList: {
+    type: Array<BpmFormApi.Form>,
+    required: true,
+  },
+});
+
+const formRef = ref();
+
+const modelData = defineModel<any>(); // 创建本地数据副本
+const formPreview = ref({
+  formData: {} as any,
+  rule: [],
+  option: {
+    submitBtn: false,
+    resetBtn: false,
+    formData: {},
+  },
+}); // 表单预览数据
+
+const rules: Record<string, FormItemRule[]> = {
+  formType: [{ required: true, message: '表单类型不能为空', trigger: 'blur' }],
+  formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
+  formCustomCreatePath: [
+    { required: true, message: '表单提交路由不能为空', trigger: 'blur' },
+  ],
+  formCustomViewPath: [
+    { required: true, message: '表单查看地址不能为空', trigger: 'blur' },
+  ],
+};
+
+/** 监听表单 ID 变化，加载表单数据 */
+watch(
+  () => modelData.value.formId,
+  async (newFormId) => {
+    if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
+      const data = await getForm(newFormId);
+      setConfAndFields2(formPreview.value, data.conf, data.fields);
+      // 设置只读
+      formPreview.value.rule.forEach((item: any) => {
+        item.props = { ...item.props, disabled: true };
+      });
+    } else {
+      formPreview.value.rule = [];
+    }
+  },
+  { immediate: true },
+);
+
+/** 表单校验 */
+async function validate() {
+  await formRef.value?.validate();
+}
+
+defineExpose({ validate });
+</script>
+<template>
+  <ElForm
+    ref="formRef"
+    :model="modelData"
+    :rules="rules"
+    label-width="120px"
+    class="mt-5"
+  >
+    <ElFormItem label="表单类型" prop="formType" class="mb-5">
+      <ElRadioGroup v-model="modelData.formType">
+        <ElRadio
+          v-for="(dict, index) in getDictOptions(
+            DICT_TYPE.BPM_MODEL_FORM_TYPE,
+            'number',
+          )"
+          :key="index"
+          :value="dict.value"
+        >
+          {{ dict.label }}
+        </ElRadio>
+      </ElRadioGroup>
+    </ElFormItem>
+    <ElFormItem
+      v-if="modelData.formType === BpmModelFormType.NORMAL"
+      label="流程表单"
+      prop="formId"
+      class="mb-5"
+    >
+      <ElSelect v-model="modelData.formId" clearable>
+        <ElOption
+          v-for="form in props.formList"
+          :key="form.id"
+          :value="form.id!"
+          :label="form.name"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="modelData.formType === BpmModelFormType.CUSTOM"
+      label="表单提交路由"
+      prop="formCustomCreatePath"
+      class="mb-5"
+    >
+      <div class="flex items-center">
+        <ElInput
+          v-model="modelData.formCustomCreatePath"
+          placeholder="请输入表单提交路由"
+        />
+        <ElTooltip
+          content="自定义表单的提交路径，使用 Vue 的路由地址, 例如说: bpm/oa/leave/create.vue"
+          placement="top"
+        >
+          <IconifyIcon
+            icon="lucide:circle-help"
+            class="ml-1 size-5 text-gray-900"
+          />
+        </ElTooltip>
+      </div>
+    </ElFormItem>
+    <ElFormItem
+      v-if="modelData.formType === BpmModelFormType.CUSTOM"
+      label="表单查看地址"
+      prop="formCustomViewPath"
+      class="mb-5"
+    >
+      <div class="flex items-center">
+        <ElInput
+          v-model="modelData.formCustomViewPath"
+          placeholder="请输入表单查看的组件地址"
+        />
+        <ElTooltip
+          content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail.vue"
+          placement="top"
+        >
+          <IconifyIcon
+            icon="lucide:circle-help"
+            class="ml-1 size-5 text-gray-900"
+          />
+        </ElTooltip>
+      </div>
+    </ElFormItem>
+    <!-- 表单预览 -->
+    <div
+      v-if="
+        modelData.formType === BpmModelFormType.NORMAL &&
+        modelData.formId &&
+        formPreview.rule.length > 0
+      "
+      class="mb-5 mt-7 rounded-sm border border-solid border-gray-200 p-5"
+    >
+      <div class="mb-4 flex items-center">
+        <div class="mr-2 h-4 w-1 bg-blue-500"></div>
+        <span class="text-base font-bold">表单预览</span>
+      </div>
+      <FormCreate
+        v-model:api="formPreview.formData"
+        :rule="formPreview.rule"
+        :option="formPreview.option"
+      />
+    </div>
+  </ElForm>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/process-design.vue b/apps/web-ele/src/views/bpm/model/form/modules/process-design.vue
new file mode 100644
index 000000000..18a2b65e2
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/process-design.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { computed, nextTick, ref } from 'vue';
+
+import { BpmModelType } from '@vben/constants';
+
+import BpmModelEditor from './bpm-model-editor.vue';
+import SimpleModelDesign from './simple-model-design.vue';
+
+const modelData = defineModel<any>(); // 创建本地数据副本
+// const processData = inject('processData') as Ref;
+
+const simpleDesign = ref();
+
+/** 表单校验 */
+async function validate() {
+  // 获取最新的流程数据
+  // if (!processData.value) {
+  //   throw new Error('请设计流程');
+  // }
+  // if (modelData.value.type === BpmModelType.SIMPLE) {
+  //   // 简易设计器校验
+  //   const validateResult = await simpleDesign.value?.validateConfig();
+  //   if (!validateResult) {
+  //     throw new Error('请完善设计配置');
+  //   }
+  // }
+  return true;
+}
+
+/** 处理设计器保存成功 */
+async function handleDesignSuccess(data?: any) {
+  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();
+    // 更新表单的模型数据部分
+    modelData.value = newModelData;
+  }
+}
+
+/** 是否显示设计器 */
+const showDesigner = computed(() => {
+  return Boolean(modelData.value?.key && modelData.value?.name);
+});
+
+defineExpose({ validate });
+</script>
+<template>
+  <div class="h-full">
+    <!-- BPMN设计器 -->
+    <template v-if="modelData.type === BpmModelType.BPMN">
+      <BpmModelEditor
+        v-if="showDesigner"
+        :model-id="modelData.id"
+        :model-key="modelData.key"
+        :model-name="modelData.name"
+        @success="handleDesignSuccess"
+      />
+    </template>
+    <!-- Simple设计器 -->
+    <template v-else>
+      <SimpleModelDesign
+        v-if="showDesigner"
+        :model-name="modelData.name"
+        :model-form-id="modelData.formId"
+        :model-form-type="modelData.formType"
+        :start-user-ids="modelData.startUserIds"
+        :start-dept-ids="modelData.startDeptIds"
+        @success="handleDesignSuccess"
+        ref="simpleDesign"
+      />
+    </template>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/simple-model-design.vue b/apps/web-ele/src/views/bpm/model/form/modules/simple-model-design.vue
new file mode 100644
index 000000000..ab9ca3753
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/simple-model-design.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { ContentWrap } from '@vben/common-ui';
+
+// import { SimpleProcessDesigner } from '#/views/bpm/components/simple-process-design';
+
+defineOptions({ name: 'SimpleModelDesign' });
+
+defineProps<{
+  modelFormId?: number;
+  modelFormType?: number;
+  modelName?: string;
+  startDeptIds?: number[];
+  startUserIds?: number[];
+}>();
+
+// const emit = defineEmits(['success']);
+
+const designerRef = ref();
+
+/** 保存成功回调 */
+// function handleSuccess(data?: any) {
+//   if (data) {
+//     emit('success', data);
+//   }
+// }
+
+/** 设计器配置校验 */
+async function validateConfig() {
+  return await designerRef.value.validate();
+}
+
+defineExpose({ validateConfig });
+</script>
+<template>
+  <ContentWrap class="px-4 py-5">
+    <!-- <SimpleProcessDesigner
+      :model-form-id="modelFormId"
+      :model-name="modelName"
+      :model-form-type="modelFormType"
+      @success="handleSuccess"
+      :start-user-ids="startUserIds"
+      :start-dept-ids="startDeptIds"
+      ref="designerRef"
+    /> -->
+  </ContentWrap>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/tinymce-plugin.ts b/apps/web-ele/src/views/bpm/model/form/modules/tinymce-plugin.ts
new file mode 100644
index 000000000..145dc894b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/form/modules/tinymce-plugin.ts
@@ -0,0 +1,78 @@
+/** TinyMCE 自定义功能：
+ * - processrecord 按钮：插入流程记录占位元素
+ * - @ 自动补全：插入 mention 占位元素
+ */
+
+// @ts-ignore TinyMCE 全局或通过打包器提供
+import type { Editor } from 'tinymce';
+
+export interface MentionItem {
+  id: string;
+  name: string;
+}
+
+/** 在编辑器 setup 回调中注册流程记录按钮和 @ 自动补全 */
+export function setupTinyPlugins(
+  editor: Editor,
+  getMentionList: () => MentionItem[],
+) {
+  // 按钮：流程记录
+  editor.ui.registry.addButton('processrecord', {
+    text: '流程记录',
+    tooltip: '插入流程记录占位',
+    onAction: () => {
+      // 流程记录占位显示， 仅用于显示。process-print.vue 组件中会替换掉
+      editor.insertContent(
+        [
+          '<div data-w-e-type="process-record" data-w-e-is-void contenteditable="false">',
+          '<table class="process-record-table" style="width: 100%; border-collapse: collapse; border: 1px solid;">',
+          '<tr><td style="width: 100%; border: 1px solid; text-align: center;" colspan="2">流程记录</td></tr>',
+          '<tr>',
+          '<td style="width: 25%; border: 1px solid;">节点</td>',
+          '<td style="width: 75%; border: 1px solid;">操作</td>',
+          '</tr>',
+          '</table>',
+          '</div>',
+        ].join(''),
+      );
+    },
+  });
+
+  // @ 自动补全
+  editor.ui.registry.addAutocompleter('bpmMention', {
+    trigger: '@',
+    minChars: 0,
+    columns: 1,
+    fetch: (
+      pattern: string,
+      _maxResults: number,
+      _fetchOptions: Record<string, any>,
+    ) => {
+      const list = getMentionList();
+      const keyword = (pattern || '').toLowerCase().trim();
+      const data = list
+        .filter((i) => i.name.toLowerCase().includes(keyword))
+        .map((i) => ({
+          value: i.id,
+          text: i.name,
+        }));
+      return Promise.resolve(data);
+    },
+    onAction: (
+      autocompleteApi: any,
+      rng: Range,
+      value: string,
+      _meta: Record<string, any>,
+    ) => {
+      const list = getMentionList();
+      const item = list.find((i) => i.id === value);
+      const name = item ? item.name : value;
+      const info = encodeURIComponent(JSON.stringify({ id: value }));
+      editor.selection.setRng(rng);
+      editor.insertContent(
+        `<span data-w-e-type="mention" data-info="${info}">@${name}</span>`,
+      );
+      autocompleteApi.hide();
+    },
+  });
+}