From 29a0c691a068a19186c3b7e3aa1ae72717a58415 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Fri, 22 Nov 2024 09:26:11 +0800
Subject: [PATCH 01/24] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E4=BA=BA=E5=91=98=E9=80=89=E6=8B=A9=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91-=E9=83=A8=E9=97=A8=E6=A0=91=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E6=94=B9=E4=B8=BA=E5=89=8D=E7=AB=AF=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E8=BF=87=E6=BB=A4=E9=83=A8=E9=97=A8=E4=B8=8B=E7=94=A8=E6=88=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UserSelectForm/index.vue | 39 ++++++++++++++++++-------
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/components/UserSelectForm/index.vue b/src/components/UserSelectForm/index.vue
index 801489b6..5ed99f86 100644
--- a/src/components/UserSelectForm/index.vue
+++ b/src/components/UserSelectForm/index.vue
@@ -39,7 +39,7 @@
   </Dialog>
 </template>
 <script lang="ts" setup>
-import { defaultProps, findTreeNode, handleTree } from '@/utils/tree'
+import { defaultProps, handleTree } from '@/utils/tree'
 import * as DeptApi from '@/api/system/dept'
 import * as UserApi from '@/api/system/user'
 
@@ -50,6 +50,7 @@ const emit = defineEmits<{
 const { t } = useI18n() // 国际
 const message = useMessage() // 消息弹窗
 const deptTree = ref<Tree[]>([]) // 部门树形结构化
+const deptList = ref<any[]>([]) // 保存扁平化的部门列表数据
 const userList = ref<UserApi.UserVO[]>([]) // 所有用户列表
 const filteredUserList = ref<UserApi.UserVO[]>([]) // 当前部门过滤后的用户列表
 const selectedUserIdList: any = ref([]) // 选中的用户列表
@@ -79,7 +80,9 @@ const open = async (id: number, selectedList?: any[]) => {
   resetForm()
 
   // 加载部门、用户列表
-  deptTree.value = handleTree(await DeptApi.getSimpleDeptList())
+  const deptData = await DeptApi.getSimpleDeptList()
+  deptList.value = deptData // 保存扁平结构的部门数据
+  deptTree.value = handleTree(deptData) // 转换成树形结构
   userList.value = await UserApi.getSimpleUserList()
 
   // 初始状态下，过滤列表等于所有用户列表
@@ -88,16 +91,31 @@ const open = async (id: number, selectedList?: any[]) => {
   dialogVisible.value = true
 }
 
+/** 获取指定部门及其所有子部门的ID列表 */
+const getChildDeptIds = (deptId: number, deptList: any[]): number[] => {
+  const ids = [deptId]
+  const children = deptList.filter((dept) => dept.parentId === deptId)
+  children.forEach((child) => {
+    ids.push(...getChildDeptIds(child.id, deptList))
+  })
+  return ids
+}
+
 /** 获取部门过滤后的用户列表 */
-const getUserList = async (deptId?: number) => {
+const filterUserList = async (deptId?: number) => {
   formLoading.value = true
   try {
-    // @ts-ignore
-    // TODO @芋艿：替换到 simple List 暂不支持 deptId 过滤
-    // TODO @Zqqq：这个，可以使用前端过滤么？通过 deptList 获取到 deptId 子节点，然后去 userList
-    const data = await UserApi.getUserPage({ pageSize: 100, pageNo: 1, deptId })
-    // 更新过滤后的用户列表
-    filteredUserList.value = data.list
+    if (!deptId) {
+      // 如果没有选择部门，显示所有用户
+      filteredUserList.value = [...userList.value]
+      return
+    }
+
+    // 直接使用已保存的部门列表数据进行过滤
+    const deptIds = getChildDeptIds(deptId, deptList.value)
+
+    // 过滤出这些部门下的用户
+    filteredUserList.value = userList.value.filter((user) => deptIds.includes(user.deptId))
   } finally {
     formLoading.value = false
   }
@@ -121,6 +139,7 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   deptTree.value = []
+  deptList.value = []
   userList.value = []
   filteredUserList.value = []
   selectedUserIdList.value = []
@@ -128,7 +147,7 @@ const resetForm = () => {
 
 /** 处理部门被点击 */
 const handleNodeClick = (row: { [key: string]: any }) => {
-  getUserList(row.id)
+  filterUserList(row.id)
 }
 
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗

From 295a43d5165f4c4a19d6d6f2c1b0b88c7c23886f Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Fri, 22 Nov 2024 11:39:23 +0800
Subject: [PATCH 02/24] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E6=96=B0=E5=A2=9E/=E4=BF=AE=E6=94=B9=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97-=E5=8F=98=E6=9B=B4=E2=80=9C=E8=B0=81=E5=8F=AF?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=91=E8=B5=B7=E2=80=9C=E3=80=81=E2=80=9D=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E7=AE=A1=E7=90=86=E5=91=98=E2=80=9D=E5=AD=97=E6=AE=B5?=
 =?UTF-8?q?=E7=9A=84=E9=80=89=E6=8B=A9=E9=80=BB=E8=BE=91=E4=B8=8E=E4=BA=BA?=
 =?UTF-8?q?=E5=91=98=E5=B1=95=E7=A4=BA=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/ModelForm.vue | 174 ++++++++++++++++++++++++++----
 1 file changed, 155 insertions(+), 19 deletions(-)

diff --git a/src/views/bpm/model/ModelForm.vue b/src/views/bpm/model/ModelForm.vue
index 16d3c1d6..6d8b9e21 100644
--- a/src/views/bpm/model/ModelForm.vue
+++ b/src/views/bpm/model/ModelForm.vue
@@ -123,29 +123,69 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="谁可以发起" prop="startUserIds">
+      <el-form-item label="谁可以发起" prop="startUserType">
         <el-select
-          v-model="formData.startUserIds"
-          multiple
-          placeholder="请选择可发起人，默认（不选择）则所有人都可以发起"
+          v-model="formData.startUserType"
+          placeholder="请选择谁可以发起"
+          @change="handleStartUserTypeChange"
         >
-          <el-option
-            v-for="user in userList"
-            :key="user.id"
-            :label="user.nickname"
-            :value="user.id"
-          />
+          <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="managerUserIds">
-        <el-select v-model="formData.managerUserIds" multiple placeholder="请选择流程管理员">
-          <el-option
-            v-for="user in userList"
-            :key="user.id"
-            :label="user.nickname"
-            :value="user.id"
-          />
+      <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>
@@ -153,6 +193,7 @@
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
+  <UserSelectForm ref="userSelectFormRef" @confirm="handleUserSelectConfirm" />
 </template>
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
@@ -178,7 +219,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref({
+const formData: any = ref({
   id: undefined,
   name: '',
   key: '',
@@ -191,6 +232,8 @@ const formData = ref({
   formCustomCreatePath: '',
   formCustomViewPath: '',
   visible: true,
+  startUserType: undefined,
+  managerUserType: undefined,
   startUserIds: [],
   managerUserIds: []
 })
@@ -211,6 +254,10 @@ const formRef = ref() // 表单 Ref
 const formList = ref([]) // 流程表单的下拉框的数据
 const categoryList = ref([]) // 流程分类列表
 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) => {
@@ -226,6 +273,19 @@ const open = async (type: string, id?: string) => {
     } 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)
   }
@@ -293,9 +353,85 @@ const resetForm = () => {
     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) => 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) => 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>

From 5063db47f35dc53417cf149b40ac29f5041f4370 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 3 Dec 2024 11:13:53 +0800
Subject: [PATCH 03/24] =?UTF-8?q?feat:=20=E5=B0=86=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E6=96=B0=E5=A2=9E/=E4=BF=AE=E6=94=B9/?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E6=95=B4=E5=90=88=E5=88=B0=E5=90=8C=E4=B8=80?=
 =?UTF-8?q?=E4=B8=AA=E9=A1=B5=E9=9D=A2=E4=B8=AD=EF=BC=8C=E5=88=86=E4=B8=89?=
 =?UTF-8?q?=E4=B8=AA=E6=AD=A5=E9=AA=A4=E8=BF=9B=E8=A1=8C=EF=BC=9B=E8=B7=B3?=
 =?UTF-8?q?=E8=BD=AC=E4=BC=A0=E5=8F=82=E9=80=BB=E8=BE=91=E4=B8=8E=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=BB=98=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/remaining.ts               |  12 +
 .../bpm/model/CategoryDraggableModel.vue      |  37 +-
 src/views/bpm/model/CreateUpdate.vue          | 582 ++++++++++++++++++
 src/views/bpm/model/editor/index.vue          |  36 +-
 src/views/bpm/model/index.vue                 |   7 +-
 src/views/bpm/simple/SimpleModelDesign.vue    |  17 +-
 6 files changed, 648 insertions(+), 43 deletions(-)
 create mode 100644 src/views/bpm/model/CreateUpdate.vue

diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index f0ce322e..22a0c3e5 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -330,6 +330,18 @@ const remainingRouter: AppRouteRecordRaw[] = [
           title: '查看 OA 请假',
           activeMenu: '/bpm/oa/leave'
         }
+      },
+      {
+        path: 'manager/model/create-update',
+        component: () => import('@/views/bpm/model/CreateUpdate.vue'),
+        name: 'BpmModelCreateUpdate',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '创建/修改流程',
+          activeMenu: '/bpm/manager/model'
+        }
       }
     ]
   },
diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index 35465935..f01c7d18 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -339,21 +339,22 @@ const handleChangeState = async (row: any) => {
 
 /** 设计流程 */
 const handleDesign = (row: any) => {
-  if (row.type == BpmModelType.BPMN) {
-    push({
-      name: 'BpmModelEditor',
-      query: {
-        modelId: row.id
-      }
-    })
-  } else {
-    push({
-      name: 'SimpleModelDesign',
-      query: {
-        modelId: row.id
-      }
-    })
-  }
+  // if (row.type == BpmModelType.BPMN) {
+  //   push({
+  //     name: 'BpmModelEditor',
+  //     query: {
+  //       modelId: row.id
+  //     }
+  //   })
+  // } else {
+  //   push({
+  //     name: 'SimpleModelDesign',
+  //     query: {
+  //       modelId: row.id
+  //     }
+  //   })
+  // }
+  push(`/bpm/manager/model/create-update?id=${row.id}`)
 }
 
 /** 发布流程 */
@@ -496,7 +497,11 @@ const handleDeleteCategory = async () => {
 /** 添加流程模型弹窗 */
 const modelFormRef = ref()
 const openModelForm = (type: string, id?: number) => {
-  modelFormRef.value.open(type, id)
+  if (type === 'create') {
+    push('/bpm/manager/model/create-update')
+  } else {
+    push(`/bpm/manager/model/create-update?id=${id}`)
+  }
 }
 
 watch(() => props.categoryInfo.modelList, updateModeList, { immediate: true })
diff --git a/src/views/bpm/model/CreateUpdate.vue b/src/views/bpm/model/CreateUpdate.vue
new file mode 100644
index 00000000..c412d9d0
--- /dev/null
+++ b/src/views/bpm/model/CreateUpdate.vue
@@ -0,0 +1,582 @@
+<template>
+  <!-- 头部导航栏 -->
+  <div
+    class="absolute top-0 left-0 right-0 h-50px bg-white border-bottom z-10 flex items-center justify-between px-20px"
+  >
+    <div class="flex items-center">
+      <Icon icon="ep:arrow-left" class="cursor-pointer" @click="router.back()" />
+      <span class="ml-10px text-16px">{{ formData.name || '创建流程' }}</span>
+    </div>
+
+    <!-- 步骤条 -->
+    <div class="flex-1 flex items-center justify-center h-full">
+      <div
+        v-for="(step, index) in steps"
+        :key="index"
+        class="flex items-center cursor-pointer mx-15px relative h-full"
+        :class="[
+          currentStep === index
+            ? 'text-[#3473ff] border-[#3473ff] border-b-2 border-b-solid'
+            : 'text-gray-500'
+        ]"
+        @click="currentStep = index"
+      >
+        <div
+          class="w-28px h-28px rounded-full flex items-center justify-center mr-8px border-2 border-solid text-15px"
+          :class="[
+            currentStep === index
+              ? ' bg-[#3473ff] text-white'
+              : 'border-gray-300 bg-white text-gray-500'
+          ]"
+        >
+          {{ index + 1 }}
+        </div>
+        <span class="text-16px font-bold">{{ step.title }}</span>
+      </div>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="flex items-center gap-1">
+      <el-button @click="handleSave">保 存</el-button>
+      <el-button type="primary" @click="handleDeploy">发 布</el-button>
+    </div>
+  </div>
+
+  <!-- 主体内容 -->
+  <ContentWrap class="mt-50px">
+    <!-- 第一步：基本信息 -->
+    <div v-show="currentStep === 0">
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="120px"
+        class="mt-20px"
+        :class="{ 'w-600px': currentStep === 0 }"
+      >
+        <el-form-item label="流程标识" prop="key" class="mb-20px">
+          <el-input v-model="formData.key" :disabled="!!formData.id" placeholder="请输入流标标识" />
+          <el-tooltip
+            v-if="!formData.id"
+            class="item"
+            content="新建后，流程标识不可修改！"
+            effect="light"
+            placement="top"
+          >
+            <Icon icon="ep:question" class="ml-5px" />
+          </el-tooltip>
+          <el-tooltip
+            v-else
+            class="item"
+            content="流程标识不可修改！"
+            effect="light"
+            placement="top"
+          >
+            <Icon icon="ep:question" class="ml-5px" />
+          </el-tooltip>
+        </el-form-item>
+        <el-form-item label="流程名称" prop="name" class="mb-20px">
+          <el-input
+            v-model="formData.name"
+            :disabled="!!formData.id"
+            clearable
+            placeholder="请输入流程名称"
+          />
+        </el-form-item>
+        <el-form-item label="流程分类" prop="category" class="mb-20px">
+          <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" class="mb-20px">
+          <UploadImg v-model="formData.icon" :limit="1" height="64px" width="64px" />
+        </el-form-item>
+        <el-form-item label="流程描述" prop="description" class="mb-20px">
+          <el-input v-model="formData.description" clearable type="textarea" />
+        </el-form-item>
+        <el-form-item label="流程类型" prop="type" class="mb-20px">
+          <el-radio-group v-model="formData.type">
+            <el-radio
+              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
+              :key="dict.value"
+              :value="dict.value"
+            >
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="是否可见" prop="visible" class="mb-20px">
+          <el-radio-group v-model="formData.visible">
+            <el-radio
+              v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+              :key="dict.value"
+              :value="dict.value"
+            >
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="谁可以发起" prop="startUserType" class="mb-20px">
+          <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" class="mb-20px">
+          <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>
+    </div>
+
+    <div v-if="currentStep === 1">
+      <!-- 第二步：表单设计 -->
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="120px"
+        class="mt-20px"
+      >
+        <el-form-item label="表单类型" prop="formType" class="mb-20px">
+          <el-radio-group v-model="formData.formType">
+            <el-radio
+              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
+              :key="dict.value"
+              :value="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"
+          >
+            <Icon icon="ep:question" class="ml-5px" />
+          </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"
+          >
+            <Icon icon="ep:question" class="ml-5px" />
+          </el-tooltip>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div v-show="currentStep === 2">
+      <!-- BPMN设计器 -->
+      <template v-if="formData.type === BpmModelType.BPMN">
+        <BpmModelEditor :model-id="formData.id" @success="handleDesignSuccess" />
+      </template>
+
+      <!-- Simple设计器 -->
+      <template v-else>
+        <SimpleModelDesign :model-id="formData.id" @success="handleDesignSuccess" />
+      </template>
+    </div>
+  </ContentWrap>
+
+  <!-- 用户选择弹窗 -->
+  <UserSelectForm ref="userSelectFormRef" @confirm="handleUserSelectConfirm" />
+</template>
+
+<script lang="ts" setup>
+import * as ModelApi from '@/api/bpm/model'
+import * as FormApi from '@/api/bpm/form'
+import { CategoryApi } from '@/api/bpm/category'
+import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
+import { BpmModelFormType, BpmModelType } from '@/utils/constants'
+import * as UserApi from '@/api/system/user'
+import { useUserStoreWithOut } from '@/store/modules/user'
+import { UserVO } from '@/api/system/user'
+import BpmModelEditor from './editor/index.vue'
+import SimpleModelDesign from '../simple/SimpleModelDesign.vue'
+
+const message = useMessage() // 消息弹窗
+const router = useRouter()
+const route = useRoute()
+const userStore = useUserStoreWithOut()
+
+// 步骤控制
+const currentStep = ref(0)
+// 表单数据
+const formRef = ref()
+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 = {
+  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 xmlString = ref(undefined)
+
+// 数据列表
+const formList: any = ref([])
+const categoryList: any = ref([])
+const userList = ref<UserVO[]>([])
+const selectedStartUsers = ref<UserVO[]>([])
+const selectedManagerUsers = ref<UserVO[]>([])
+
+// 用户选择相关
+const userSelectFormRef = ref()
+const currentSelectType = ref<'start' | 'manager'>('start')
+
+// 打开发起人选择
+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 handleStartUserTypeChange = (value: number) => {
+  if (value !== 1) {
+    selectedStartUsers.value = []
+    formData.value.startUserIds = []
+  }
+}
+
+// 处理管理员类型变化
+const handleManagerUserTypeChange = (value: number) => {
+  if (value !== 1) {
+    selectedManagerUsers.value = []
+    formData.value.managerUserIds = []
+  }
+}
+
+// 移除发起人
+const handleRemoveStartUser = (user: UserVO) => {
+  selectedStartUsers.value = selectedStartUsers.value.filter((u) => u.id !== user.id)
+  formData.value.startUserIds = formData.value.startUserIds.filter((id) => 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) => id !== user.id)
+}
+
+// 保存操作
+const handleSave = async () => {
+  try {
+    if (formData.value.id) {
+      await ModelApi.updateModel(formData.value)
+      message.success('修改成功')
+    } else {
+      const result = await ModelApi.createModel(formData.value)
+      formData.value.id = result.id // 保存id用于设计器
+      message.success('新增成功')
+    }
+    // 不再跳转，继续停留在当前页面
+  } catch (error) {
+    console.error('保存失败:', error)
+  }
+}
+
+// 发布操作
+const handleDeploy = async () => {
+  try {
+    await message.confirm('是否确认发布该流程？')
+    // 发布时才进行全部校验
+    await validateAllSteps()
+    await handleSave()
+    await ModelApi.deployModel(formData.value.id)
+    message.success('发布成功')
+    router.push({ path: '/bpm/manager/model' })
+  } catch (error) {
+    if (error instanceof Error) {
+      // 校验失败时,跳转到对应步骤
+      const failedStep = steps.findIndex((step) => {
+        try {
+          step.validator && step.validator()
+          return false
+        } catch {
+          return true
+        }
+      })
+      if (failedStep !== -1) {
+        currentStep.value = failedStep
+        message.warning('请完善必填信息')
+      }
+    }
+  }
+}
+
+// 初始化数据
+const initData = async () => {
+  const modelId = route.query.id as unknown as string
+  if (modelId) {
+    // 修改场景
+    formData.value = await ModelApi.getModel(modelId)
+    // 加载数据时，根据已有的用户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()
+}
+
+onMounted(async () => {
+  await initData()
+})
+
+// 第一步校验
+const validateStep1 = async () => {
+  await formRef.value?.validate(['name', 'key', 'category', 'icon', 'type', 'visible'])
+}
+
+// 第二步校验
+const validateStep2 = async () => {
+  await formRef.value?.validate([
+    'formType',
+    'formId',
+    'formCustomCreatePath',
+    'formCustomViewPath'
+  ])
+}
+
+// 第三步校验
+const validateStep3 = async () => {
+  if (!xmlString.value) {
+    throw new Error('请设计流程')
+  }
+}
+
+const validateAllSteps = async () => {
+  for (const step of steps) {
+    if (step.validator) {
+      await step.validator()
+    }
+  }
+}
+
+const steps = [
+  { title: '基本信息', validator: validateStep1 },
+  { title: '表单设计', validator: validateStep2 },
+  { title: '流程设计', validator: validateStep3 }
+]
+
+// 处理设计器保存成功
+const handleDesignSuccess = () => {
+  message.success('保存成功')
+}
+</script>
+
+<style lang="scss" scoped>
+.process-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.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;
+    }
+  }
+}
+
+.border-bottom {
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.text-primary {
+  color: #3473ff;
+}
+
+.bg-primary {
+  background-color: #3473ff;
+}
+
+.border-primary {
+  border-color: #3473ff;
+}
+
+.text-16px {
+  font-size: 16px;
+}
+
+.h-2px {
+  height: 2px;
+}
+
+.mx-15px {
+  margin-left: 15px;
+  margin-right: 15px;
+}
+</style>
diff --git a/src/views/bpm/model/editor/index.vue b/src/views/bpm/model/editor/index.vue
index 3e773691..232f2bff 100644
--- a/src/views/bpm/model/editor/index.vue
+++ b/src/views/bpm/model/editor/index.vue
@@ -34,6 +34,10 @@ import * as ModelApi from '@/api/bpm/model'
 
 defineOptions({ name: 'BpmModelEditor' })
 
+const props = defineProps<{
+  modelId: string
+}>()
+const emit = defineEmits(['success'])
 const router = useRouter() // 路由
 const { query } = useRoute() // 路由的查询
 const message = useMessage() // 国际化
@@ -59,36 +63,28 @@ const initModeler = (item) => {
 
 /** 添加/修改模型 */
 const save = async (bpmnXml: string) => {
-  const data = {
-    ...model.value,
-    bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
-  } as unknown as ModelApi.ModelVO
-  // 提交
-  if (data.id) {
+  try {
+    const data = {
+      ...model.value,
+      bpmnXml: bpmnXml
+    } as unknown as ModelApi.ModelVO
+    // 提交
     await ModelApi.updateModelBpmn(data)
-    message.success('修改成功')
-  } else {
-    await ModelApi.updateModelBpmn(data)
-    message.success('新增成功')
+    emit('success')
+  } catch (error) {
+    console.error('保存失败:', error)
+    message.error('保存失败')
   }
-  // 跳转回去
-  close()
-}
-
-/** 关闭按钮 */
-const close = () => {
-  router.push({ path: '/bpm/manager/model' })
 }
 
 /** 初始化 */
 onMounted(async () => {
-  const modelId = query.modelId as unknown as number
-  if (!modelId) {
+  if (!props.modelId) {
     message.error('缺少模型 modelId 编号')
     return
   }
   // 查询模型
-  const data = await ModelApi.getModel(modelId)
+  const data = await ModelApi.getModel(String(props.modelId))
   if (!data.bpmnXml) {
     // 首次创建的 Model 模型，它是没有 bpmnXml，此时需要给它一个默认的
     data.bpmnXml = ` <?xml version="1.0" encoding="UTF-8"?>
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index bf43d292..d779a9f2 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -106,6 +106,7 @@ import CategoryDraggableModel from './CategoryDraggableModel.vue'
 
 defineOptions({ name: 'BpmModel' })
 
+const { push } = useRouter()
 const message = useMessage() // 消息弹窗
 const loading = ref(true) // 列表的加载中
 const isCategorySorting = ref(false) // 是否 category 正处于排序状态
@@ -124,7 +125,11 @@ const handleQuery = () => {
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+  if (type === 'create') {
+    push('/bpm/manager/model/create-update')
+  } else {
+    push(`/bpm/manager/model/create-update?id=${id}`)
+  }
 }
 
 /** 流程表单的详情按钮操作 */
diff --git a/src/views/bpm/simple/SimpleModelDesign.vue b/src/views/bpm/simple/SimpleModelDesign.vue
index 1740e03f..5029ad0f 100644
--- a/src/views/bpm/simple/SimpleModelDesign.vue
+++ b/src/views/bpm/simple/SimpleModelDesign.vue
@@ -1,6 +1,6 @@
 <template>
   <ContentWrap :bodyStyle="{ padding: '20px 16px' }">
-    <SimpleProcessDesigner :model-id="modelId" @success="close" />
+    <SimpleProcessDesigner :model-id="modelId" @success="handleSuccess" />
   </ContentWrap>
 </template>
 <script setup lang="ts">
@@ -9,11 +9,16 @@ import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/
 defineOptions({
   name: 'SimpleModelDesign'
 })
-const router = useRouter() // 路由
-const { query } = useRoute() // 路由的查询
-const modelId = query.modelId as string
-const close = () => {
-  router.push({ path: '/bpm/manager/model' })
+
+defineProps<{
+  modelId: string
+}>()
+
+const emit = defineEmits(['success'])
+
+// 修改成功回调
+const handleSuccess = () => {
+  emit('success')
 }
 </script>
 <style lang="scss" scoped></style>

From 9459a7296ff5afad38b9a68ee4b7a586c3bc44ca Mon Sep 17 00:00:00 2001
From: GoldenZqqqq <1361001127@qq.com>
Date: Mon, 9 Dec 2024 23:05:36 +0800
Subject: [PATCH 04/24] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E6=96=B0=E5=A2=9E/=E4=BF=AE=E6=94=B9/=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E5=90=88=E4=B8=BA=E4=B8=80=E4=B8=AA=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=88=87=E6=8D=A2tab=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C=E4=B8=8E=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/SimpleProcessDesigner.vue             | 69 +++++++++-----
 .../bpm/model/CategoryDraggableModel.vue      |  2 +-
 src/views/bpm/model/CreateUpdate.vue          | 86 +++++++++++------
 src/views/bpm/model/editor/index.vue          | 92 ++++++++++++-------
 src/views/bpm/simple/SimpleModelDesign.vue    | 15 ++-
 5 files changed, 179 insertions(+), 85 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index 6b5ff997..3cefd343 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -38,12 +38,21 @@ import * as UserGroupApi from '@/api/bpm/userGroup'
 defineOptions({
   name: 'SimpleProcessDesigner'
 })
+
 const emits = defineEmits(['success']) // 保存成功事件
 
 const props = defineProps({
   modelId: {
     type: String,
-    required: true
+    required: false
+  },
+  modelKey: {
+    type: String,
+    required: false
+  },
+  modelName: {
+    type: String,
+    required: false
   }
 })
 
@@ -69,6 +78,7 @@ const message = useMessage() // 国际化
 const processNodeTree = ref<SimpleFlowNode | undefined>()
 const errorDialogVisible = ref(false)
 let errorNodes: SimpleFlowNode[] = []
+
 const saveSimpleFlowModel = async (simpleModelNode: SimpleFlowNode) => {
   if (!simpleModelNode) {
     message.error('模型数据为空')
@@ -76,21 +86,28 @@ const saveSimpleFlowModel = async (simpleModelNode: SimpleFlowNode) => {
   }
   try {
     loading.value = true
-    const data = {
-      id: props.modelId,
-      simpleModel: simpleModelNode
-    }
-    const result = await updateBpmSimpleModel(data)
-    if (result) {
-      message.success('修改成功')
-      emits('success')
+    if (props.modelId) {
+      // 编辑模式
+      const data = {
+        id: props.modelId,
+        simpleModel: simpleModelNode
+      }
+      const result = await updateBpmSimpleModel(data)
+      if (result) {
+        message.success('修改成功')
+        emits('success')
+      } else {
+        message.alert('修改失败')
+      }
     } else {
-      message.alert('修改失败')
+      // 新建模式，直接返回数据
+      emits('success', simpleModelNode)
     }
   } finally {
     loading.value = false
   }
 }
+
 // 校验节点设置。 暂时以 showText 为空 未节点错误配置
 const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
   if (node) {
@@ -134,12 +151,14 @@ onMounted(async () => {
   try {
     loading.value = true
     // 获取表单字段
-    const bpmnModel = await getModel(props.modelId)
-    if (bpmnModel) {
-      formType.value = bpmnModel.formType
-      if (formType.value === 10) {
-        const bpmnForm = (await getForm(bpmnModel.formId)) as unknown as FormVO
-        formFields.value = bpmnForm?.fields
+    if (props.modelId) {
+      const bpmnModel = await getModel(props.modelId)
+      if (bpmnModel) {
+        formType.value = bpmnModel.formType
+        if (formType.value === 10) {
+          const bpmnForm = (await getForm(bpmnModel.formId)) as unknown as FormVO
+          formFields.value = bpmnForm?.fields
+        }
       }
     }
     // 获得角色列表
@@ -155,14 +174,18 @@ onMounted(async () => {
     // 获取用户组列表
     userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
 
-    //获取 SIMPLE 设计器模型
-    const result = await getBpmSimpleModel(props.modelId)
-    if (result) {
-      processNodeTree.value = result
-    } else {
-      // 初始值
+    if (props.modelId) {
+      //获取 SIMPLE 设计器模型
+      const result = await getBpmSimpleModel(props.modelId)
+      if (result) {
+        processNodeTree.value = result
+      }
+    }
+    
+    // 如果没有现有模型，创建初始模型
+    if (!processNodeTree.value) {
       processNodeTree.value = {
-        name: '发起人',
+        name: props.modelName || '发起人',
         type: NodeType.START_USER_NODE,
         id: NodeId.START_USER_NODE_ID,
         childNode: {
diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index f01c7d18..e5765864 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -249,7 +249,7 @@ import { formatDate } from '@/utils/formatTime'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
 import { setConfAndFields2 } from '@/utils/formCreate'
-import { BpmModelFormType, BpmModelType } from '@/utils/constants'
+import { BpmModelFormType } from '@/utils/constants'
 import { checkPermi } from '@/utils/permission'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { useAppStore } from '@/store/modules/app'
diff --git a/src/views/bpm/model/CreateUpdate.vue b/src/views/bpm/model/CreateUpdate.vue
index c412d9d0..2a03f75d 100644
--- a/src/views/bpm/model/CreateUpdate.vue
+++ b/src/views/bpm/model/CreateUpdate.vue
@@ -1,42 +1,47 @@
 <template>
   <!-- 头部导航栏 -->
   <div
-    class="absolute top-0 left-0 right-0 h-50px bg-white border-bottom z-10 flex items-center justify-between px-20px"
+    class="absolute top-0 left-0 right-0 h-50px bg-white border-bottom z-10 flex items-center px-20px"
   >
-    <div class="flex items-center">
-      <Icon icon="ep:arrow-left" class="cursor-pointer" @click="router.back()" />
-      <span class="ml-10px text-16px">{{ formData.name || '创建流程' }}</span>
+    <!-- 左侧标题，固定宽度 -->
+    <div class="w-200px flex items-center overflow-hidden">
+      <Icon icon="ep:arrow-left" class="cursor-pointer flex-shrink-0" @click="router.back()" />
+      <span class="ml-10px text-16px truncate" :title="formData.name || '创建流程'">
+        {{ formData.name || '创建流程' }}
+      </span>
     </div>
 
-    <!-- 步骤条 -->
+    <!-- 步骤条，固定在中间 -->
     <div class="flex-1 flex items-center justify-center h-full">
-      <div
-        v-for="(step, index) in steps"
-        :key="index"
-        class="flex items-center cursor-pointer mx-15px relative h-full"
-        :class="[
-          currentStep === index
-            ? 'text-[#3473ff] border-[#3473ff] border-b-2 border-b-solid'
-            : 'text-gray-500'
-        ]"
-        @click="currentStep = index"
-      >
+      <div class="w-400px flex items-center justify-between h-full">
         <div
-          class="w-28px h-28px rounded-full flex items-center justify-center mr-8px border-2 border-solid text-15px"
+          v-for="(step, index) in steps"
+          :key="index"
+          class="flex items-center cursor-pointer mx-15px relative h-full"
           :class="[
             currentStep === index
-              ? ' bg-[#3473ff] text-white'
-              : 'border-gray-300 bg-white text-gray-500'
+              ? 'text-[#3473ff] border-[#3473ff] border-b-2 border-b-solid'
+              : 'text-gray-500'
           ]"
+          @click="handleStepClick(index)"
         >
-          {{ index + 1 }}
+          <div
+            class="w-28px h-28px rounded-full flex items-center justify-center mr-8px border-2 border-solid text-15px"
+            :class="[
+              currentStep === index
+                ? 'bg-[#3473ff] text-white border-[#3473ff]'
+                : 'border-gray-300 bg-white text-gray-500'
+            ]"
+          >
+            {{ index + 1 }}
+          </div>
+          <span class="text-16px font-bold whitespace-nowrap">{{ step.title }}</span>
         </div>
-        <span class="text-16px font-bold">{{ step.title }}</span>
       </div>
     </div>
 
-    <!-- 操作按钮 -->
-    <div class="flex items-center gap-1">
+    <!-- 右侧按钮，固定宽度 -->
+    <div class="w-200px flex items-center justify-end gap-2">
       <el-button @click="handleSave">保 存</el-button>
       <el-button type="primary" @click="handleDeploy">发 布</el-button>
     </div>
@@ -264,15 +269,26 @@
       </el-form>
     </div>
 
+    <!-- 第三步：流程设计 -->
     <div v-show="currentStep === 2">
       <!-- BPMN设计器 -->
       <template v-if="formData.type === BpmModelType.BPMN">
-        <BpmModelEditor :model-id="formData.id" @success="handleDesignSuccess" />
+        <BpmModelEditor
+          :model-id="formData.id"
+          :model-key="formData.key"
+          :model-name="formData.name"
+          @success="handleDesignSuccess"
+        />
       </template>
 
       <!-- Simple设计器 -->
       <template v-else>
-        <SimpleModelDesign :model-id="formData.id" @success="handleDesignSuccess" />
+        <SimpleModelDesign
+          :model-id="formData.id"
+          :model-key="formData.key"
+          :model-name="formData.name"
+          @success="handleDesignSuccess"
+        />
       </template>
     </div>
   </ContentWrap>
@@ -520,9 +536,27 @@ const steps = [
 ]
 
 // 处理设计器保存成功
-const handleDesignSuccess = () => {
+const handleDesignSuccess = (bpmnXml?: string) => {
+  if (bpmnXml) {
+    // 新建时，保存设计器生成的XML
+    formData.value.bpmnXml = bpmnXml
+  }
   message.success('保存成功')
 }
+
+// 步骤切换处理
+const handleStepClick = async (index: number) => {
+  // 如果是切换到第三步（流程设计），需要校验key和name
+  if (index === 2 && !formData.value.id) {
+    // 新增时才校验
+    if (!formData.value.key || !formData.value.name) {
+      message.warning('请先填写流程标识和流程名称')
+      return
+    }
+  }
+
+  currentStep.value = index
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/bpm/model/editor/index.vue b/src/views/bpm/model/editor/index.vue
index 232f2bff..4d1cbc5e 100644
--- a/src/views/bpm/model/editor/index.vue
+++ b/src/views/bpm/model/editor/index.vue
@@ -11,6 +11,7 @@
       ref="processDesigner"
       @init-finished="initModeler"
       :additionalModel="controlForm.additionalModel"
+      :model="model"
       @save="save"
     />
     <!-- 流程属性器，负责编辑每个流程节点的属性 -->
@@ -35,14 +36,15 @@ import * as ModelApi from '@/api/bpm/model'
 defineOptions({ name: 'BpmModelEditor' })
 
 const props = defineProps<{
-  modelId: string
+  modelId?: string
+  modelKey?: string
+  modelName?: string
 }>()
+
 const emit = defineEmits(['success'])
-const router = useRouter() // 路由
-const { query } = useRoute() // 路由的查询
 const message = useMessage() // 国际化
 
-const xmlString = ref(undefined) // BPMN XML
+const xmlString = ref<string>() // BPMN XML
 const modeler = ref(null) // BPMN Modeler
 const controlForm = ref({
   simulation: true,
@@ -61,16 +63,32 @@ const initModeler = (item) => {
   }, 10)
 }
 
+/** 获取默认的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 save = async (bpmnXml: string) => {
   try {
-    const data = {
-      ...model.value,
-      bpmnXml: bpmnXml
-    } as unknown as ModelApi.ModelVO
-    // 提交
-    await ModelApi.updateModelBpmn(data)
-    emit('success')
+    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)
+    }
   } catch (error) {
     console.error('保存失败:', error)
     message.error('保存失败')
@@ -79,28 +97,40 @@ const save = async (bpmnXml: string) => {
 
 /** 初始化 */
 onMounted(async () => {
-  if (!props.modelId) {
-    message.error('缺少模型 modelId 编号')
-    return
+  if (props.modelId) {
+    // 编辑模式
+    try {
+      // 查询模型
+      const data = await ModelApi.getModel(props.modelId)
+      model.value = {
+        ...data,
+        bpmnXml: undefined // 清空 bpmnXml 属性
+      }
+      xmlString.value = data.bpmnXml || getDefaultBpmnXml(data.key, data.name)
+    } catch (error) {
+      console.error('获取模型失败:', error)
+      message.error('获取模型失败')
+    }
+  } else if (props.modelKey && props.modelName) {
+    // 新建模式，使用传入的key和name创建默认XML
+    xmlString.value = getDefaultBpmnXml(props.modelKey, props.modelName)
+    model.value = {
+      key: props.modelKey,
+      name: props.modelName
+    } as ModelApi.ModelVO
   }
-  // 查询模型
-  const data = await ModelApi.getModel(String(props.modelId))
-  if (!data.bpmnXml) {
-    // 首次创建的 Model 模型，它是没有 bpmnXml，此时需要给它一个默认的
-    data.bpmnXml = ` <?xml version="1.0" encoding="UTF-8"?>
-<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.activiti.org/processdef">
-  <process id="${data.key}" name="${data.name}" isExecutable="true" />
-  <bpmndi:BPMNDiagram id="BPMNDiagram">
-    <bpmndi:BPMNPlane id="${data.key}_di" bpmnElement="${data.key}" />
-  </bpmndi:BPMNDiagram>
-</definitions>`
-  }
-  model.value = {
-    ...data,
-    bpmnXml: undefined // 清空 bpmnXml 属性
-  }
-  xmlString.value = data.bpmnXml
 })
+
+// 监听key和name的变化
+watch([() => props.modelKey, () => props.modelName], ([newKey, newName]) => {
+  if (!props.modelId && newKey && newName) {
+    xmlString.value = getDefaultBpmnXml(newKey, newName)
+    model.value = {
+      key: newKey,
+      name: newName
+    } as ModelApi.ModelVO
+  }
+}, { immediate: true })
 </script>
 <style lang="scss">
 .process-panel__container {
diff --git a/src/views/bpm/simple/SimpleModelDesign.vue b/src/views/bpm/simple/SimpleModelDesign.vue
index 5029ad0f..30dcdbe5 100644
--- a/src/views/bpm/simple/SimpleModelDesign.vue
+++ b/src/views/bpm/simple/SimpleModelDesign.vue
@@ -1,6 +1,11 @@
 <template>
   <ContentWrap :bodyStyle="{ padding: '20px 16px' }">
-    <SimpleProcessDesigner :model-id="modelId" @success="handleSuccess" />
+    <SimpleProcessDesigner 
+      :model-id="modelId" 
+      :model-key="modelKey"
+      :model-name="modelName"
+      @success="handleSuccess" 
+    />
   </ContentWrap>
 </template>
 <script setup lang="ts">
@@ -11,14 +16,16 @@ defineOptions({
 })
 
 defineProps<{
-  modelId: string
+  modelId?: string
+  modelKey?: string
+  modelName?: string
 }>()
 
 const emit = defineEmits(['success'])
 
 // 修改成功回调
-const handleSuccess = () => {
-  emit('success')
+const handleSuccess = (data?: any) => {
+  emit('success', data)
 }
 </script>
 <style lang="scss" scoped></style>

From 21c28c3665a6e0b3a9fc02d1fa4ced2d03294a44 Mon Sep 17 00:00:00 2001
From: GoldenZqqqq <1361001127@qq.com>
Date: Sat, 14 Dec 2024 00:21:43 +0800
Subject: [PATCH 05/24] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E6=B5=81=E7=A8=8B=E5=88=87=E6=8D=A2=E5=88=B0=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=89=E6=AD=A5=E8=87=AA=E5=8A=A8=E8=B5=8B=E5=80=BC=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E6=A0=87=E8=AF=86=E4=B8=8E=E6=B5=81=E7=A8=8B=E5=90=8D?=
 =?UTF-8?q?=E7=A7=B0=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/SimpleProcessDesigner.vue             |  26 ++++
 .../package/penal/PropertiesPanel.vue         | 122 ++++++++++++------
 src/views/bpm/model/CreateUpdate.vue          |  41 +++++-
 src/views/bpm/model/editor/index.vue          | 118 +++++++++++++----
 src/views/bpm/simple/SimpleModelDesign.vue    |  11 +-
 5 files changed, 245 insertions(+), 73 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index 3cefd343..bc952d74 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -79,6 +79,32 @@ const processNodeTree = ref<SimpleFlowNode | undefined>()
 const errorDialogVisible = ref(false)
 let errorNodes: SimpleFlowNode[] = []
 
+// 添加更新模型的方法
+const updateModel = (key?: string, name?: string) => {
+  if (!processNodeTree.value) {
+    processNodeTree.value = {
+      name: name || '发起人',
+      type: NodeType.START_USER_NODE,
+      id: NodeId.START_USER_NODE_ID,
+      childNode: {
+        id: NodeId.END_EVENT_NODE_ID,
+        name: '结束',
+        type: NodeType.END_EVENT_NODE
+      }
+    }
+  } else if (name) {
+    // 更新现有模型的名称
+    processNodeTree.value.name = name
+  }
+}
+
+// 监听属性变化
+watch([() => props.modelKey, () => props.modelName], ([newKey, newName]) => {
+  if (!props.modelId && newKey && newName) {
+    updateModel(newKey, newName)
+  }
+}, { immediate: true, deep: true })
+
 const saveSimpleFlowModel = async (simpleModelNode: SimpleFlowNode) => {
   if (!simpleModelNode) {
     message.error('模型数据为空')
diff --git a/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue b/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
index 5cd76383..7056403f 100644
--- a/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="process-panel__container" :style="{ width: `${width}px` }">
-    <el-collapse v-model="activeTab">
+    <el-collapse v-model="activeTab" v-if="isReady">
       <el-collapse-item name="base">
         <!-- class="panel-tab__title" -->
         <template #title>
@@ -108,24 +108,16 @@ const elementBusinessObject = ref<any>({}) // 元素 businessObject 镜像，提
 const conditionFormVisible = ref(false) // 流转条件设置
 const formVisible = ref(false) // 表单配置
 const bpmnElement = ref()
+const isReady = ref(false)
 
 provide('prefix', props.prefix)
 provide('width', props.width)
-const bpmnInstances = () => (window as any)?.bpmnInstances
 
-// 监听 props.bpmnModeler 然后 initModels
-const unwatchBpmn = watch(
-  () => props.bpmnModeler,
-  () => {
-    // 避免加载时 流程图 并未加载完成
-    if (!props.bpmnModeler) {
-      console.log('缺少props.bpmnModeler')
-      return
-    }
-
-    console.log('props.bpmnModeler 有值了！！！')
-    const w = window as any
-    w.bpmnInstances = {
+// 初始化 bpmnInstances
+const initBpmnInstances = () => {
+  if (!props.bpmnModeler) return false
+  try {
+    const instances = {
       modeler: props.bpmnModeler,
       modeling: props.bpmnModeler.get('modeling'),
       moddle: props.bpmnModeler.get('moddle'),
@@ -136,10 +128,46 @@ const unwatchBpmn = watch(
       replace: props.bpmnModeler.get('replace'),
       selection: props.bpmnModeler.get('selection')
     }
+    
+    // 检查所有实例是否都存在
+    const allInstancesExist = Object.values(instances).every(instance => instance)
+    if (allInstancesExist) {
+      const w = window as any
+      w.bpmnInstances = instances
+      return true
+    }
+    return false
+  } catch (error) {
+    console.error('初始化 bpmnInstances 失败:', error)
+    return false
+  }
+}
 
-    console.log(bpmnInstances(), 'window.bpmnInstances')
-    getActiveElement()
-    unwatchBpmn()
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+// 监听 props.bpmnModeler 然后 initModels
+const unwatchBpmn = watch(
+  () => props.bpmnModeler,
+  async () => {
+    // 避免加载时 流程图 并未加载完成
+    if (!props.bpmnModeler) {
+      console.log('缺少props.bpmnModeler')
+      return
+    }
+
+    try {
+      // 等待 modeler 初始化完成
+      await nextTick()
+      if (initBpmnInstances()) {
+        isReady.value = true
+        await nextTick()
+        getActiveElement()
+      } else {
+        console.error('modeler 实例未完全初始化')
+      }
+    } catch (error) {
+      console.error('初始化失败:', error)
+    }
   },
   {
     immediate: true
@@ -147,6 +175,8 @@ const unwatchBpmn = watch(
 )
 
 const getActiveElement = () => {
+  if (!isReady.value || !props.bpmnModeler) return
+
   // 初始第一个选中元素 bpmn:Process
   initFormOnChanged(null)
   props.bpmnModeler.on('import.done', (e) => {
@@ -164,8 +194,11 @@ const getActiveElement = () => {
     }
   })
 }
+
 // 初始化数据
 const initFormOnChanged = (element) => {
+  if (!isReady.value || !bpmnInstances()) return
+
   let activatedElement = element
   if (!activatedElement) {
     activatedElement =
@@ -173,32 +206,36 @@ const initFormOnChanged = (element) => {
       bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Collaboration')
   }
   if (!activatedElement) return
-  console.log(`
-              ----------
-      select element changed:
-                id:  ${activatedElement.id}
-              type:  ${activatedElement.businessObject.$type}
-              ----------
-              `)
-  console.log('businessObject: ', activatedElement.businessObject)
-  bpmnInstances().bpmnElement = activatedElement
-  bpmnElement.value = activatedElement
-  elementId.value = activatedElement.id
-  elementType.value = activatedElement.type.split(':')[1] || ''
-  elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject))
-  conditionFormVisible.value = !!(
-    elementType.value === 'SequenceFlow' &&
-    activatedElement.source &&
-    activatedElement.source.type.indexOf('StartEvent') === -1
-  )
-  formVisible.value = elementType.value === 'UserTask' || elementType.value === 'StartEvent'
+
+  try {
+    console.log(`
+                ----------
+        select element changed:
+                  id:  ${activatedElement.id}
+                type:  ${activatedElement.businessObject.$type}
+                ----------
+                `)
+    console.log('businessObject: ', activatedElement.businessObject)
+    bpmnInstances().bpmnElement = activatedElement
+    bpmnElement.value = activatedElement
+    elementId.value = activatedElement.id
+    elementType.value = activatedElement.type.split(':')[1] || ''
+    elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject))
+    conditionFormVisible.value = !!(
+      elementType.value === 'SequenceFlow' &&
+      activatedElement.source &&
+      activatedElement.source.type.indexOf('StartEvent') === -1
+    )
+    formVisible.value = elementType.value === 'UserTask' || elementType.value === 'StartEvent'
+  } catch (error) {
+    console.error('初始化表单数据失败:', error)
+  }
 }
 
 onBeforeUnmount(() => {
   const w = window as any
   w.bpmnInstances = null
-  console.log(props, 'props1')
-  console.log(props.bpmnModeler, 'props.bpmnModeler1')
+  isReady.value = false
 })
 
 watch(
@@ -208,3 +245,10 @@ watch(
   }
 )
 </script>
+<style lang="scss">
+.process-panel__container {
+  position: absolute;
+  top: 90px;
+  right: 60px;
+}
+</style>
diff --git a/src/views/bpm/model/CreateUpdate.vue b/src/views/bpm/model/CreateUpdate.vue
index 2a03f75d..849be1ed 100644
--- a/src/views/bpm/model/CreateUpdate.vue
+++ b/src/views/bpm/model/CreateUpdate.vue
@@ -274,6 +274,7 @@
       <!-- BPMN设计器 -->
       <template v-if="formData.type === BpmModelType.BPMN">
         <BpmModelEditor
+          v-if="showDesigner"
           :model-id="formData.id"
           :model-key="formData.key"
           :model-name="formData.name"
@@ -284,6 +285,7 @@
       <!-- Simple设计器 -->
       <template v-else>
         <SimpleModelDesign
+          v-if="showDesigner"
           :model-id="formData.id"
           :model-key="formData.key"
           :model-name="formData.name"
@@ -547,16 +549,43 @@ const handleDesignSuccess = (bpmnXml?: string) => {
 // 步骤切换处理
 const handleStepClick = async (index: number) => {
   // 如果是切换到第三步（流程设计），需要校验key和name
-  if (index === 2 && !formData.value.id) {
-    // 新增时才校验
-    if (!formData.value.key || !formData.value.name) {
-      message.warning('请先填写流程标识和流程名称')
-      return
+  if (index === 2) {
+    if (!formData.value.id) {
+      // 新增时才校验
+      try {
+        await formRef.value?.validateField(['key', 'name'])
+        // 确保数据已经准备好
+        await nextTick()
+      } catch (error) {
+        message.warning('请先填写流程标识和流程名称')
+        return
+      }
     }
+    // 确保数据已经准备好再切换
+    await nextTick()
   }
-
   currentStep.value = index
 }
+
+// 添加一个计算属性来判断是否显示设计器
+const showDesigner = computed(() => {
+  return currentStep.value === 2 && Boolean(formData.value.id || (formData.value.key && formData.value.name))
+})
+
+// 监听步骤变化，确保数据准备完成
+watch(() => currentStep.value, async (newStep) => {
+  if (newStep === 2) {
+    await nextTick()
+  }
+}, { immediate: false })
+
+// 在组件卸载时清理
+onBeforeUnmount(() => {
+  const w = window as any
+  if (w.bpmnInstances) {
+    w.bpmnInstances = null
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/bpm/model/editor/index.vue b/src/views/bpm/model/editor/index.vue
index 4d1cbc5e..322a00e9 100644
--- a/src/views/bpm/model/editor/index.vue
+++ b/src/views/bpm/model/editor/index.vue
@@ -3,7 +3,6 @@
     <!-- 流程设计器，负责绘制流程等 -->
     <MyProcessDesigner
       key="designer"
-      v-if="xmlString !== undefined"
       v-model="xmlString"
       :value="xmlString"
       v-bind="controlForm"
@@ -16,8 +15,9 @@
     />
     <!-- 流程属性器，负责编辑每个流程节点的属性 -->
     <MyProcessPenal
+      v-if="isModelerReady && modeler"
       key="penal"
-      :bpmnModeler="modeler as any"
+      :bpmnModeler="modeler"
       :prefix="controlForm.prefix"
       class="process-panel"
       :model="model"
@@ -44,8 +44,10 @@ const props = defineProps<{
 const emit = defineEmits(['success'])
 const message = useMessage() // 国际化
 
-const xmlString = ref<string>() // BPMN XML
-const modeler = ref(null) // BPMN Modeler
+const xmlString = ref<string>('') // BPMN XML
+const modeler = shallowRef() // BPMN Modeler
+const processDesigner = ref()
+const isModelerReady = ref(false)
 const controlForm = ref({
   simulation: true,
   labelEditing: false,
@@ -56,11 +58,49 @@ 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 = (item) => {
-  setTimeout(() => {
+const initModeler = async (item) => {
+  try {
     modeler.value = item
-  }, 10)
+    // 等待 modeler 初始化完成
+    await nextTick()
+    
+    // 确保 modeler 的所有实例都已经准备好
+    if (initBpmnInstances()) {
+      isModelerReady.value = true
+      if (!props.modelId && props.modelKey && props.modelName) {
+        await updateModelData(props.modelKey, props.modelName)
+      }
+    } else {
+      console.error('modeler 实例未完全初始化')
+    }
+  } catch (error) {
+    console.error('初始化 modeler 失败:', error)
+  }
 }
 
 /** 获取默认的BPMN XML */
@@ -97,9 +137,9 @@ const save = async (bpmnXml: string) => {
 
 /** 初始化 */
 onMounted(async () => {
-  if (props.modelId) {
-    // 编辑模式
-    try {
+  try {
+    if (props.modelId) {
+      // 编辑模式
       // 查询模型
       const data = await ModelApi.getModel(props.modelId)
       model.value = {
@@ -107,30 +147,54 @@ onMounted(async () => {
         bpmnXml: undefined // 清空 bpmnXml 属性
       }
       xmlString.value = data.bpmnXml || getDefaultBpmnXml(data.key, data.name)
-    } catch (error) {
-      console.error('获取模型失败:', error)
-      message.error('获取模型失败')
+    } else if (props.modelKey && props.modelName) {
+      // 新建模式
+      xmlString.value = getDefaultBpmnXml(props.modelKey, props.modelName)
+      model.value = {
+        key: props.modelKey,
+        name: props.modelName
+      } as ModelApi.ModelVO
     }
-  } else if (props.modelKey && props.modelName) {
-    // 新建模式，使用传入的key和name创建默认XML
-    xmlString.value = getDefaultBpmnXml(props.modelKey, props.modelName)
-    model.value = {
-      key: props.modelKey,
-      name: props.modelName
-    } as ModelApi.ModelVO
+  } catch (error) {
+    console.error('初始化失败:', error)
+    message.error('初始化失败')
   }
 })
 
-// 监听key和name的变化
-watch([() => props.modelKey, () => props.modelName], ([newKey, newName]) => {
-  if (!props.modelId && newKey && newName) {
-    xmlString.value = getDefaultBpmnXml(newKey, newName)
+// 更新模型数据
+const updateModelData = async (key?: string, name?: string) => {
+  if (key && name) {
+    xmlString.value = getDefaultBpmnXml(key, name)
     model.value = {
-      key: newKey,
-      name: newName
+      ...model.value,
+      key: key,
+      name: name
     } as ModelApi.ModelVO
+    // 确保更新后重新渲染
+    await nextTick()
+    if (processDesigner.value?.refresh) {
+      processDesigner.value.refresh()
+    }
   }
-}, { immediate: true })
+}
+
+// 监听key和name的变化
+watch([() => props.modelKey, () => props.modelName], async ([newKey, newName]) => {
+  if (!props.modelId && newKey && newName && modeler.value) {
+    await updateModelData(newKey, newName)
+  }
+}, { immediate: true, deep: true })
+
+// 在组件卸载时清理
+onBeforeUnmount(() => {
+  isModelerReady.value = false
+  modeler.value = null
+  // 清理全局实例
+  const w = window as any
+  if (w.bpmnInstances) {
+    w.bpmnInstances = null
+  }
+})
 </script>
 <style lang="scss">
 .process-panel__container {
diff --git a/src/views/bpm/simple/SimpleModelDesign.vue b/src/views/bpm/simple/SimpleModelDesign.vue
index 30dcdbe5..456098a6 100644
--- a/src/views/bpm/simple/SimpleModelDesign.vue
+++ b/src/views/bpm/simple/SimpleModelDesign.vue
@@ -5,6 +5,7 @@
       :model-key="modelKey"
       :model-name="modelName"
       @success="handleSuccess" 
+      ref="designerRef"
     />
   </ContentWrap>
 </template>
@@ -15,13 +16,21 @@ defineOptions({
   name: 'SimpleModelDesign'
 })
 
-defineProps<{
+const props = defineProps<{
   modelId?: string
   modelKey?: string
   modelName?: string
 }>()
 
 const emit = defineEmits(['success'])
+const designerRef = ref()
+
+// 监听属性变化
+watch([() => props.modelKey, () => props.modelName], ([newKey, newName]) => {
+  if (designerRef.value && newKey && newName) {
+    designerRef.value.updateModel(newKey, newName)
+  }
+}, { immediate: true, deep: true })
 
 // 修改成功回调
 const handleSuccess = (data?: any) => {

From 746aeaff35a7990d238d647fc695fe2670923eff Mon Sep 17 00:00:00 2001
From: GoldenZqqqq <1361001127@qq.com>
Date: Sat, 14 Dec 2024 15:43:06 +0800
Subject: [PATCH 06/24] =?UTF-8?q?fix:=20=E5=88=9B=E5=BB=BA/=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E6=B5=81=E7=A8=8B=E9=A1=B5=E9=9D=A2-=E6=81=A2?=
 =?UTF-8?q?=E5=A4=8D=E5=A1=AB=E5=86=99=E6=B5=81=E7=A8=8B=E6=A0=87=E8=AF=86?=
 =?UTF-8?q?=E4=B8=8E=E6=B5=81=E7=A8=8B=E5=90=8D=E7=A7=B0=E6=89=8D=E5=8F=AF?=
 =?UTF-8?q?=E4=BB=A5=E5=88=87=E6=8D=A2=E5=88=B0=E7=AC=AC=E4=B8=89=E6=AD=A5?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/penal/PropertiesPanel.vue         |  7 ----
 src/views/bpm/model/CreateUpdate.vue          | 35 +++++++++----------
 2 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue b/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
index 7056403f..e3dba33d 100644
--- a/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
@@ -245,10 +245,3 @@ watch(
   }
 )
 </script>
-<style lang="scss">
-.process-panel__container {
-  position: absolute;
-  top: 90px;
-  right: 60px;
-}
-</style>
diff --git a/src/views/bpm/model/CreateUpdate.vue b/src/views/bpm/model/CreateUpdate.vue
index 849be1ed..9dc4e6a0 100644
--- a/src/views/bpm/model/CreateUpdate.vue
+++ b/src/views/bpm/model/CreateUpdate.vue
@@ -550,34 +550,33 @@ const handleDesignSuccess = (bpmnXml?: string) => {
 const handleStepClick = async (index: number) => {
   // 如果是切换到第三步（流程设计），需要校验key和name
   if (index === 2) {
-    if (!formData.value.id) {
-      // 新增时才校验
-      try {
-        await formRef.value?.validateField(['key', 'name'])
-        // 确保数据已经准备好
-        await nextTick()
-      } catch (error) {
-        message.warning('请先填写流程标识和流程名称')
-        return
-      }
+    if (!formData.value.key || !formData.value.name) {
+      message.warning('请先填写流程标识和流程名称')
+      return
     }
-    // 确保数据已经准备好再切换
-    await nextTick()
   }
+
   currentStep.value = index
 }
 
 // 添加一个计算属性来判断是否显示设计器
 const showDesigner = computed(() => {
-  return currentStep.value === 2 && Boolean(formData.value.id || (formData.value.key && formData.value.name))
+  return (
+    currentStep.value === 2 &&
+    Boolean(formData.value.id || (formData.value.key && formData.value.name))
+  )
 })
 
 // 监听步骤变化，确保数据准备完成
-watch(() => currentStep.value, async (newStep) => {
-  if (newStep === 2) {
-    await nextTick()
-  }
-}, { immediate: false })
+watch(
+  () => currentStep.value,
+  async (newStep) => {
+    if (newStep === 2) {
+      await nextTick()
+    }
+  },
+  { immediate: false }
+)
 
 // 在组件卸载时清理
 onBeforeUnmount(() => {

From 5e386336b91f7be7c6bf4c26b0cf3fd64ff5b865 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 15 Dec 2024 17:08:02 +0800
Subject: [PATCH 07/24] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91Bpm=EF=BC=9A=E6=96=B0=E7=9A=84=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/remaining.ts               |  4 +-
 .../bpm/model/CategoryDraggableModel.vue      | 17 +----
 src/views/bpm/model/CreateUpdate.vue          | 66 ++++++++++---------
 src/views/bpm/model/ModelForm.vue             | 29 ++++----
 src/views/bpm/model/editor/index.vue          | 21 +++---
 5 files changed, 68 insertions(+), 69 deletions(-)

diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 22a0c3e5..3537a59c 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -332,8 +332,8 @@ const remainingRouter: AppRouteRecordRaw[] = [
         }
       },
       {
-        path: 'manager/model/create-update',
-        component: () => import('@/views/bpm/model/CreateUpdate.vue'),
+        path: 'manager/model/create-update', // TODO @goldenzqqq：是不是拆分成两个，一个 create 创建流程；一个 update 修改流程？
+        component: () => import('@/views/bpm/model/CreateUpdate.vue'), // TODO @goldenzqqq：是不是放到 '@/views/bpm/model/form/index.vue'。然后，原本的 editor/index.vue 是不是可以清理了呀？
         name: 'BpmModelCreateUpdate',
         meta: {
           noCache: true,
diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index e5765864..8009e693 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -339,21 +339,7 @@ const handleChangeState = async (row: any) => {
 
 /** 设计流程 */
 const handleDesign = (row: any) => {
-  // if (row.type == BpmModelType.BPMN) {
-  //   push({
-  //     name: 'BpmModelEditor',
-  //     query: {
-  //       modelId: row.id
-  //     }
-  //   })
-  // } else {
-  //   push({
-  //     name: 'SimpleModelDesign',
-  //     query: {
-  //       modelId: row.id
-  //     }
-  //   })
-  // }
+  // TODO @goldenzqqq：最好使用 name 哈
   push(`/bpm/manager/model/create-update?id=${row.id}`)
 }
 
@@ -497,6 +483,7 @@ const handleDeleteCategory = async () => {
 /** 添加流程模型弹窗 */
 const modelFormRef = ref()
 const openModelForm = (type: string, id?: number) => {
+  // TODO @goldenzqqq：最好使用 name 哈
   if (type === 'create') {
     push('/bpm/manager/model/create-update')
   } else {
diff --git a/src/views/bpm/model/CreateUpdate.vue b/src/views/bpm/model/CreateUpdate.vue
index 9dc4e6a0..adbe8324 100644
--- a/src/views/bpm/model/CreateUpdate.vue
+++ b/src/views/bpm/model/CreateUpdate.vue
@@ -50,6 +50,8 @@
   <!-- 主体内容 -->
   <ContentWrap class="mt-50px">
     <!-- 第一步：基本信息 -->
+    <!-- TODO @goldenzqqq：是不是可以居中哈，1024 -->
+    <!-- TODO @goldenzqqq：有必要，把第一步、第二步，拆成独立的 vue 组件哇？主要是，把相关的 html、还有 js 逻辑，可以挪进去，让主的 index.vue 更精简一点 -->
     <div v-show="currentStep === 0">
       <el-form
         ref="formRef"
@@ -200,6 +202,7 @@
 
     <div v-if="currentStep === 1">
       <!-- 第二步：表单设计 -->
+      <!-- TODO @goldenzqqq：是不是可以居中哈，1024 -->
       <el-form
         ref="formRef"
         :model="formData"
@@ -316,9 +319,7 @@ const router = useRouter()
 const route = useRoute()
 const userStore = useUserStoreWithOut()
 
-// 步骤控制
-const currentStep = ref(0)
-// 表单数据
+const currentStep = ref(0) // 步骤控制
 const formRef = ref()
 const formData: any = ref({
   id: undefined,
@@ -337,9 +338,7 @@ const formData: any = ref({
   managerUserType: undefined,
   startUserIds: [],
   managerUserIds: []
-})
-
-// 表单校验规则
+}) // 表单数据
 const formRules = {
   name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
   key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
@@ -352,7 +351,7 @@ const formRules = {
   formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }],
   visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
   managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
-}
+} // 表单校验规则
 
 // 流程设计器相关
 const xmlString = ref(undefined)
@@ -368,19 +367,19 @@ const selectedManagerUsers = ref<UserVO[]>([])
 const userSelectFormRef = ref()
 const currentSelectType = ref<'start' | 'manager'>('start')
 
-// 打开发起人选择
+/** 打开发起人选择 */
 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
@@ -391,7 +390,7 @@ const handleUserSelectConfirm = (_, users: UserVO[]) => {
   }
 }
 
-// 处理发起人类型变化
+/** 处理发起人类型变化 */
 const handleStartUserTypeChange = (value: number) => {
   if (value !== 1) {
     selectedStartUsers.value = []
@@ -399,7 +398,7 @@ const handleStartUserTypeChange = (value: number) => {
   }
 }
 
-// 处理管理员类型变化
+/** 处理管理员类型变化 */
 const handleManagerUserTypeChange = (value: number) => {
   if (value !== 1) {
     selectedManagerUsers.value = []
@@ -407,19 +406,21 @@ const handleManagerUserTypeChange = (value: number) => {
   }
 }
 
-// 移除发起人
+/** 移除发起人 */
 const handleRemoveStartUser = (user: UserVO) => {
   selectedStartUsers.value = selectedStartUsers.value.filter((u) => u.id !== user.id)
-  formData.value.startUserIds = formData.value.startUserIds.filter((id) => 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) => id !== user.id)
+  formData.value.managerUserIds = formData.value.managerUserIds.filter(
+    (id: number) => id !== user.id
+  )
 }
 
-// 保存操作
+/** 保存操作 */
 const handleSave = async () => {
   try {
     if (formData.value.id) {
@@ -436,7 +437,7 @@ const handleSave = async () => {
   }
 }
 
-// 发布操作
+/** 发布操作 */
 const handleDeploy = async () => {
   try {
     await message.confirm('是否确认发布该流程？')
@@ -445,7 +446,8 @@ const handleDeploy = async () => {
     await handleSave()
     await ModelApi.deployModel(formData.value.id)
     message.success('发布成功')
-    router.push({ path: '/bpm/manager/model' })
+    // TODO @goldenzqqq：最好使用 name 哈
+    await router.push({ path: '/bpm/manager/model' })
   } catch (error) {
     if (error instanceof Error) {
       // 校验失败时,跳转到对应步骤
@@ -465,7 +467,7 @@ const handleDeploy = async () => {
   }
 }
 
-// 初始化数据
+/** 初始化数据 */
 const initData = async () => {
   const modelId = route.query.id as unknown as string
   if (modelId) {
@@ -497,16 +499,12 @@ const initData = async () => {
   userList.value = await UserApi.getSimpleUserList()
 }
 
-onMounted(async () => {
-  await initData()
-})
-
-// 第一步校验
+/** 第一步校验 */
 const validateStep1 = async () => {
   await formRef.value?.validate(['name', 'key', 'category', 'icon', 'type', 'visible'])
 }
 
-// 第二步校验
+/** 第二步校验 */
 const validateStep2 = async () => {
   await formRef.value?.validate([
     'formType',
@@ -516,13 +514,14 @@ const validateStep2 = async () => {
   ])
 }
 
-// 第三步校验
+/** 第三步校验 */
 const validateStep3 = async () => {
   if (!xmlString.value) {
     throw new Error('请设计流程')
   }
 }
 
+/** 校验全部 */
 const validateAllSteps = async () => {
   for (const step of steps) {
     if (step.validator) {
@@ -531,13 +530,14 @@ const validateAllSteps = async () => {
   }
 }
 
+// TODO @goldenzqqq：是不是可以把 step1、step2、step3，改成 basic、form、designer。这样，可读性会好点。
 const steps = [
   { title: '基本信息', validator: validateStep1 },
   { title: '表单设计', validator: validateStep2 },
   { title: '流程设计', validator: validateStep3 }
 ]
 
-// 处理设计器保存成功
+/** 处理设计器保存成功 */
 const handleDesignSuccess = (bpmnXml?: string) => {
   if (bpmnXml) {
     // 新建时，保存设计器生成的XML
@@ -546,7 +546,7 @@ const handleDesignSuccess = (bpmnXml?: string) => {
   message.success('保存成功')
 }
 
-// 步骤切换处理
+/** 步骤切换处理 */
 const handleStepClick = async (index: number) => {
   // 如果是切换到第三步（流程设计），需要校验key和name
   if (index === 2) {
@@ -555,11 +555,12 @@ const handleStepClick = async (index: number) => {
       return
     }
   }
+  // TODO @goldenzqqq：感觉这里可以优化下，切换的时候，必须当前表单填写正确，不然不允许切换。
 
   currentStep.value = index
 }
 
-// 添加一个计算属性来判断是否显示设计器
+/** 添加一个计算属性来判断是否显示设计器 */
 const showDesigner = computed(() => {
   return (
     currentStep.value === 2 &&
@@ -585,6 +586,11 @@ onBeforeUnmount(() => {
     w.bpmnInstances = null
   }
 })
+
+/** 初始化 */
+onMounted(async () => {
+  await initData()
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/bpm/model/ModelForm.vue b/src/views/bpm/model/ModelForm.vue
index 6d8b9e21..2b4bcc6d 100644
--- a/src/views/bpm/model/ModelForm.vue
+++ b/src/views/bpm/model/ModelForm.vue
@@ -201,11 +201,12 @@ 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 } from '@/api/bpm/category'
+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' })
 
@@ -251,12 +252,12 @@ const formRules = reactive({
   managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
-const formList = ref([]) // 流程表单的下拉框的数据
-const categoryList = 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 userSelectFormRef = ref() // 用户选择弹窗 ref
 const currentSelectType = ref<'start' | 'manager'>('start') // 当前选择的是发起人还是管理员
 
 /** 打开弹窗 */
@@ -363,7 +364,7 @@ const resetForm = () => {
   selectedManagerUsers.value = []
 }
 
-// 处理发起人类型变化
+/** 处理发起人类型变化 */
 const handleStartUserTypeChange = (value: number) => {
   if (value !== 1) {
     selectedStartUsers.value = []
@@ -371,7 +372,7 @@ const handleStartUserTypeChange = (value: number) => {
   }
 }
 
-// 处理管理员类型变化
+/** 处理管理员类型变化 */
 const handleManagerUserTypeChange = (value: number) => {
   if (value !== 1) {
     selectedManagerUsers.value = []
@@ -379,19 +380,19 @@ const handleManagerUserTypeChange = (value: number) => {
   }
 }
 
-// 打开发起人选择
+/** 打开发起人选择 */
 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
@@ -402,16 +403,18 @@ const handleUserSelectConfirm = (_, users: UserVO[]) => {
   }
 }
 
-// 移除发起人
+/** 移除发起人 */
 const handleRemoveStartUser = (user: UserVO) => {
   selectedStartUsers.value = selectedStartUsers.value.filter((u) => u.id !== user.id)
-  formData.value.startUserIds = formData.value.startUserIds.filter((id) => 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) => id !== user.id)
+  formData.value.managerUserIds = formData.value.managerUserIds.filter(
+    (id: number) => id !== user.id
+  )
 }
 </script>
 
diff --git a/src/views/bpm/model/editor/index.vue b/src/views/bpm/model/editor/index.vue
index 70c0a29b..690c1233 100644
--- a/src/views/bpm/model/editor/index.vue
+++ b/src/views/bpm/model/editor/index.vue
@@ -32,7 +32,6 @@ import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/d
 // 自定义左侧菜单（修改 默认任务 为 用户任务）
 import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
 import * as ModelApi from '@/api/bpm/model'
-import { getForm, FormVO } from '@/api/bpm/form'
 
 defineOptions({ name: 'BpmModelEditor' })
 
@@ -82,7 +81,7 @@ const initBpmnInstances = () => {
     }
 
     // 检查所有实例是否都存在
-    return Object.values(instances).every(instance => instance)
+    return Object.values(instances).every((instance) => instance)
   } catch (error) {
     console.error('初始化 bpmnInstances 失败:', error)
     return false
@@ -168,7 +167,7 @@ onMounted(async () => {
   }
 })
 
-// 更新模型数据
+/** 更新模型数据 */
 const updateModelData = async (key?: string, name?: string) => {
   if (key && name) {
     xmlString.value = getDefaultBpmnXml(key, name)
@@ -185,12 +184,16 @@ const updateModelData = async (key?: string, name?: string) => {
   }
 }
 
-// 监听key和name的变化
-watch([() => props.modelKey, () => props.modelName], async ([newKey, newName]) => {
-  if (!props.modelId && newKey && newName && modeler.value) {
-    await updateModelData(newKey, newName)
-  }
-}, { immediate: true, deep: true })
+// 监听 key 和 name 的变化
+watch(
+  [() => props.modelKey, () => props.modelName],
+  async ([newKey, newName]) => {
+    if (!props.modelId && newKey && newName && modeler.value) {
+      await updateModelData(newKey, newName)
+    }
+  },
+  { immediate: true, deep: true }
+)
 
 // 在组件卸载时清理
 onBeforeUnmount(() => {

From 6e6754e44ad407b6f6b3ceba9b29c0dab83cbd5c Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Mon, 16 Dec 2024 17:23:27 +0800
Subject: [PATCH 08/24] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E6=96=B0=E5=A2=9E/=E4=BF=AE=E6=94=B9=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2-=E4=BC=98=E5=8C=96=E8=B7=AF=E7=94=B1=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E3=80=81=E6=96=B0=E5=A2=9E=E4=BF=AE=E6=94=B9=E5=88=86?=
 =?UTF-8?q?=E4=B8=BA=E4=B8=A4=E4=B8=AA=E5=B9=B6=E5=85=A8=E9=83=A8=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8name=E8=BF=9B=E8=A1=8C=E8=B7=B3=E8=BD=AC=EF=BC=8C?=
 =?UTF-8?q?=E6=AF=8F=E4=B8=AA=E6=AD=A5=E9=AA=A4=E6=8B=86=E5=88=86=E5=87=BA?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AA=E5=AD=90=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/remaining.ts               |  20 +-
 .../bpm/model/CategoryDraggableModel.vue      |  14 +-
 src/views/bpm/model/form/BasicInfo.vue        | 305 ++++++++++++++++++
 src/views/bpm/model/form/FormDesign.vue       | 111 +++++++
 src/views/bpm/model/form/ProcessDesign.vue    |  74 +++++
 src/views/bpm/model/form/index.vue            | 251 ++++++++++++++
 src/views/bpm/model/index.vue                 |   7 +-
 7 files changed, 771 insertions(+), 11 deletions(-)
 create mode 100644 src/views/bpm/model/form/BasicInfo.vue
 create mode 100644 src/views/bpm/model/form/FormDesign.vue
 create mode 100644 src/views/bpm/model/form/ProcessDesign.vue
 create mode 100644 src/views/bpm/model/form/index.vue

diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 3537a59c..806f954d 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -332,14 +332,26 @@ const remainingRouter: AppRouteRecordRaw[] = [
         }
       },
       {
-        path: 'manager/model/create-update', // TODO @goldenzqqq：是不是拆分成两个，一个 create 创建流程；一个 update 修改流程？
-        component: () => import('@/views/bpm/model/CreateUpdate.vue'), // TODO @goldenzqqq：是不是放到 '@/views/bpm/model/form/index.vue'。然后，原本的 editor/index.vue 是不是可以清理了呀？
-        name: 'BpmModelCreateUpdate',
+        path: 'manager/model/create',
+        component: () => import('@/views/bpm/model/form/index.vue'),
+        name: 'BpmModelCreate',
         meta: {
           noCache: true,
           hidden: true,
           canTo: true,
-          title: '创建/修改流程',
+          title: '创建流程',
+          activeMenu: '/bpm/manager/model'
+        }
+      },
+      {
+        path: 'manager/model/update/:id',
+        component: () => import('@/views/bpm/model/form/index.vue'),
+        name: 'BpmModelUpdate',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '修改流程',
           activeMenu: '/bpm/manager/model'
         }
       }
diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index 8009e693..37045568 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -339,8 +339,10 @@ const handleChangeState = async (row: any) => {
 
 /** 设计流程 */
 const handleDesign = (row: any) => {
-  // TODO @goldenzqqq：最好使用 name 哈
-  push(`/bpm/manager/model/create-update?id=${row.id}`)
+  push({
+    name: 'BpmModelUpdate',
+    params: { id: row.id }
+  })
 }
 
 /** 发布流程 */
@@ -483,11 +485,13 @@ const handleDeleteCategory = async () => {
 /** 添加流程模型弹窗 */
 const modelFormRef = ref()
 const openModelForm = (type: string, id?: number) => {
-  // TODO @goldenzqqq：最好使用 name 哈
   if (type === 'create') {
-    push('/bpm/manager/model/create-update')
+    push({ name: 'BpmModelCreate' })
   } else {
-    push(`/bpm/manager/model/create-update?id=${id}`)
+    push({
+      name: 'BpmModelUpdate',
+      params: { id }
+    })
   }
 }
 
diff --git a/src/views/bpm/model/form/BasicInfo.vue b/src/views/bpm/model/form/BasicInfo.vue
new file mode 100644
index 00000000..088a8cac
--- /dev/null
+++ b/src/views/bpm/model/form/BasicInfo.vue
@@ -0,0 +1,305 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="modelData"
+    :rules="rules"
+    label-width="120px"
+    class="mt-20px w-600px"
+  >
+    <el-form-item label="流程标识" prop="key" class="mb-20px">
+      <el-input v-model="modelData.key" :disabled="!!modelData.id" placeholder="请输入流标标识" />
+      <el-tooltip
+        v-if="!modelData.id"
+        class="item"
+        content="新建后，流程标识不可修改！"
+        effect="light"
+        placement="top"
+      >
+        <Icon icon="ep:question" class="ml-5px" />
+      </el-tooltip>
+      <el-tooltip v-else class="item" content="流程标识不可修改！" effect="light" placement="top">
+        <Icon icon="ep:question" class="ml-5px" />
+      </el-tooltip>
+    </el-form-item>
+    <el-form-item label="流程名称" prop="name" class="mb-20px">
+      <el-input
+        v-model="modelData.name"
+        :disabled="!!modelData.id"
+        clearable
+        placeholder="请输入流程名称"
+      />
+    </el-form-item>
+    <el-form-item label="流程分类" prop="category" class="mb-20px">
+      <el-select
+        v-model="modelData.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" 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">
+      <el-input v-model="modelData.description" clearable type="textarea" />
+    </el-form-item>
+    <el-form-item label="流程类型" prop="type" class="mb-20px">
+      <el-radio-group v-model="modelData.type">
+        <el-radio
+          v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
+          :key="dict.value"
+          :value="dict.value"
+        >
+          {{ dict.label }}
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="是否可见" prop="visible" class="mb-20px">
+      <el-radio-group v-model="modelData.visible">
+        <el-radio
+          v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+          :key="dict.value"
+          :value="dict.value"
+        >
+          {{ dict.label }}
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="谁可以发起" prop="startUserType" class="mb-20px">
+      <el-select
+        v-model="modelData.startUserType"
+        placeholder="请选择谁可以发起"
+        @change="handleStartUserTypeChange"
+      >
+        <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
+          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" 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">
+        <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>
+
+  <!-- 用户选择弹窗 -->
+  <UserSelectForm ref="userSelectFormRef" @confirm="handleUserSelectConfirm" />
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
+import { BpmModelType } from '@/utils/constants'
+import { UserVO } from '@/api/system/user'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  },
+  categoryList: {
+    type: Array,
+    required: true
+  },
+  userList: {
+    type: Array,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const formRef = ref()
+const selectedStartUsers = ref<UserVO[]>([])
+const selectedManagerUsers = ref<UserVO[]>([])
+const userSelectFormRef = ref()
+const currentSelectType = ref<'start' | 'manager'>('start')
+
+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)
+})
+
+// 初始化选中的用户
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal.startUserIds?.length) {
+      selectedStartUsers.value = props.userList.filter((user: UserVO) =>
+        newVal.startUserIds.includes(user.id)
+      ) as UserVO[]
+    }
+    if (newVal.managerUserIds?.length) {
+      selectedManagerUsers.value = props.userList.filter((user: UserVO) =>
+        newVal.managerUserIds.includes(user.id)
+      ) as UserVO[]
+    }
+  },
+  { immediate: true }
+)
+
+/** 打开发起人选择 */
+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
+    emit('update:modelValue', {
+      ...modelData.value,
+      startUserIds: users.map((u) => u.id)
+    })
+  } else {
+    selectedManagerUsers.value = users
+    emit('update:modelValue', {
+      ...modelData.value,
+      managerUserIds: users.map((u) => u.id)
+    })
+  }
+}
+
+/** 处理发起人类型变化 */
+const handleStartUserTypeChange = (value: number) => {
+  if (value !== 1) {
+    selectedStartUsers.value = []
+    emit('update:modelValue', {
+      ...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,
+    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,
+    managerUserIds: modelData.value.managerUserIds.filter((id: number) => id !== user.id)
+  })
+}
+
+/** 表单校验 */
+const validate = async () => {
+  await formRef.value?.validate()
+}
+
+defineExpose({
+  validate
+})
+</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>
diff --git a/src/views/bpm/model/form/FormDesign.vue b/src/views/bpm/model/form/FormDesign.vue
new file mode 100644
index 00000000..c0c06189
--- /dev/null
+++ b/src/views/bpm/model/form/FormDesign.vue
@@ -0,0 +1,111 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="modelData"
+    :rules="rules"
+    label-width="120px"
+    class="mt-20px"
+  >
+    <el-form-item label="表单类型" prop="formType" class="mb-20px">
+      <el-radio-group v-model="modelData.formType">
+        <el-radio
+          v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
+          :key="dict.value"
+          :value="dict.value"
+        >
+          {{ dict.label }}
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item v-if="modelData.formType === 10" label="流程表单" prop="formId">
+      <el-select v-model="modelData.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="modelData.formType === 20"
+      label="表单提交路由"
+      prop="formCustomCreatePath"
+    >
+      <el-input
+        v-model="modelData.formCustomCreatePath"
+        placeholder="请输入表单提交路由"
+        style="width: 330px"
+      />
+      <el-tooltip
+        class="item"
+        content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create.vue"
+        effect="light"
+        placement="top"
+      >
+        <Icon icon="ep:question" class="ml-5px" />
+      </el-tooltip>
+    </el-form-item>
+    <el-form-item
+      v-if="modelData.formType === 20"
+      label="表单查看地址"
+      prop="formCustomViewPath"
+    >
+      <el-input
+        v-model="modelData.formCustomViewPath"
+        placeholder="请输入表单查看的组件地址"
+        style="width: 330px"
+      />
+      <el-tooltip
+        class="item"
+        content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail.vue"
+        effect="light"
+        placement="top"
+      >
+        <Icon icon="ep:question" class="ml-5px" />
+      </el-tooltip>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { BpmModelFormType } from '@/utils/constants'
+
+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 rules = {
+  formType: [{ required: true, message: '表单类型不能为空', trigger: 'blur' }],
+  formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
+  formCustomCreatePath: [{ required: true, message: '表单提交路由不能为空', trigger: 'blur' }],
+  formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }]
+}
+
+/** 表单校验 */
+const validate = async () => {
+  await formRef.value?.validate()
+}
+
+defineExpose({
+  validate
+})
+</script> 
\ No newline at end of file
diff --git a/src/views/bpm/model/form/ProcessDesign.vue b/src/views/bpm/model/form/ProcessDesign.vue
new file mode 100644
index 00000000..934de5a8
--- /dev/null
+++ b/src/views/bpm/model/form/ProcessDesign.vue
@@ -0,0 +1,74 @@
+<template>
+  <!-- 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-id="modelData.id"
+      :model-key="modelData.key"
+      :model-name="modelData.name"
+      @success="handleDesignSuccess"
+    />
+  </template>
+</template>
+
+<script lang="ts" setup>
+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 xmlString = ref<string>()
+
+// 创建本地数据副本
+const modelData = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+/** 处理设计器保存成功 */
+const handleDesignSuccess = (bpmnXml?: string) => {
+  if (bpmnXml) {
+    xmlString.value = bpmnXml
+    emit('update:modelValue', {
+      ...modelData.value,
+      bpmnXml
+    })
+  }
+  emit('success', bpmnXml)
+}
+
+/** 表单校验 */
+const validate = async () => {
+  if (!xmlString.value) {
+    throw new Error('请设计流程')
+  }
+}
+
+/** 是否显示设计器 */
+const showDesigner = computed(() => {
+  return Boolean(modelData.value.id || (modelData.value.key && modelData.value.name))
+})
+
+defineExpose({
+  validate
+})
+</script> 
diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
new file mode 100644
index 00000000..1b9e4f50
--- /dev/null
+++ b/src/views/bpm/model/form/index.vue
@@ -0,0 +1,251 @@
+<template>
+  <ContentWrap>
+    <div class="max-w-1024px mx-auto">
+      <!-- 头部导航栏 -->
+      <div class="absolute top-0 left-0 right-0 h-50px bg-white border-bottom z-10 flex items-center px-20px">
+        <!-- 左侧标题 -->
+        <div class="w-200px flex items-center overflow-hidden">
+          <Icon icon="ep:arrow-left" class="cursor-pointer flex-shrink-0" @click="router.back()" />
+          <span class="ml-10px text-16px truncate" :title="formData.name || '创建流程'">
+            {{ formData.name || '创建流程' }}
+          </span>
+        </div>
+
+        <!-- 步骤条 -->
+        <div class="flex-1 flex items-center justify-center h-full">
+          <div class="w-400px flex items-center justify-between h-full">
+            <div v-for="(step, index) in steps" :key="index"
+              class="flex items-center cursor-pointer mx-15px relative h-full"
+              :class="[currentStep === index ? 'text-[#3473ff] border-[#3473ff] border-b-2 border-b-solid' : 'text-gray-500']"
+              @click="handleStepClick(index)">
+              <div class="w-28px h-28px rounded-full flex items-center justify-center mr-8px border-2 border-solid text-15px"
+                :class="[currentStep === index ? 'bg-[#3473ff] text-white border-[#3473ff]' : 'border-gray-300 bg-white text-gray-500']">
+                {{ index + 1 }}
+              </div>
+              <span class="text-16px font-bold whitespace-nowrap">{{ step.title }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧按钮 -->
+        <div class="w-200px flex items-center justify-end gap-2">
+          <el-button @click="handleSave">保 存</el-button>
+          <el-button type="primary" @click="handleDeploy">发 布</el-button>
+        </div>
+      </div>
+
+      <!-- 主体内容 -->
+      <div class="mt-50px">
+        <!-- 第一步：基本信息 -->
+        <BasicInfo v-if="currentStep === 0" 
+          v-model="formData"
+          :categoryList="categoryList"
+          :userList="userList"
+          ref="basicInfoRef" />
+
+        <!-- 第二步：表单设计 -->
+        <FormDesign v-if="currentStep === 1"
+          v-model="formData"
+          :formList="formList"
+          ref="formDesignRef" />
+
+        <!-- 第三步：流程设计 -->
+        <ProcessDesign v-if="currentStep === 2"
+          v-model="formData"
+          ref="processDesignRef"
+          @success="handleDesignSuccess" />
+      </div>
+    </div>
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+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 * as UserApi from '@/api/system/user'
+import { useUserStoreWithOut } from '@/store/modules/user'
+import { BpmModelType, BpmModelFormType } from '@/utils/constants'
+import BasicInfo from './BasicInfo.vue'
+import FormDesign from './FormDesign.vue'
+import ProcessDesign from './ProcessDesign.vue'
+
+const router = useRouter()
+const route = useRoute()
+const { t } = useI18n()
+const message = useMessage()
+const userStore = useUserStoreWithOut()
+
+// 组件引用
+const basicInfoRef = ref()
+const formDesignRef = ref()
+const processDesignRef = ref()
+
+/** 步骤校验函数 */
+const validateStep1 = async () => {
+  await basicInfoRef.value?.validate()
+}
+
+const validateStep2 = async () => {
+  await formDesignRef.value?.validate()
+}
+
+const validateStep3 = async () => {
+  await processDesignRef.value?.validate()
+}
+
+// 步骤控制
+const currentStep = ref(0)
+const steps = [
+  { title: '基本信息', validator: validateStep1 },
+  { title: '表单设计', validator: validateStep2 },
+  { title: '流程设计', validator: validateStep3 }
+]
+
+// 表单数据
+const formData = 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 formList = ref([])
+const categoryList = ref([])
+const userList = ref([])
+
+/** 初始化数据 */
+const initData = async () => {
+  const modelId = route.params.id
+  if (modelId) {
+    // 修改场景
+    formData.value = await ModelApi.getModel(modelId)
+  } else {
+    // 新增场景
+    formData.value.managerUserIds.push(userStore.getUser.id)
+  }
+
+  // 获取表单列表
+  formList.value = await FormApi.getFormSimpleList()
+  // 获取分类列表
+  categoryList.value = await CategoryApi.getCategorySimpleList()
+  // 获取用户列表
+  userList.value = await UserApi.getSimpleUserList()
+}
+
+/** 保存操作 */
+const handleSave = async () => {
+  try {
+    if (formData.value.id) {
+      await ModelApi.updateModel(formData.value)
+      message.success('修改成功')
+    } else {
+      const result = await ModelApi.createModel(formData.value)
+      formData.value.id = result.id
+      message.success('新增成功')
+    }
+  } catch (error) {
+    console.error('保存失败:', error)
+  }
+}
+
+/** 发布操作 */
+const handleDeploy = async () => {
+  try {
+    await message.confirm('是否确认发布该流程？')
+    // 发布时才进行全部校验
+    for (const step of steps) {
+      if (step.validator) {
+        await step.validator()
+      }
+    }
+    await handleSave()
+    await ModelApi.deployModel(formData.value.id)
+    message.success('发布成功')
+    router.push({ name: 'BpmModel' })
+  } catch (error) {
+    if (error instanceof Error) {
+      // 校验失败时,跳转到对应步骤
+      const failedStep = steps.findIndex((step) => {
+        try {
+          step.validator && step.validator()
+          return false
+        } catch {
+          return true
+        }
+      })
+      if (failedStep !== -1) {
+        currentStep.value = failedStep
+        message.warning('请完善必填信息')
+      }
+    }
+  }
+}
+
+/** 步骤切换处理 */
+const handleStepClick = async (index: number) => {
+  // 如果是切换到第三步（流程设计），需要校验key和name
+  if (index === 2) {
+    if (!formData.value.key || !formData.value.name) {
+      message.warning('请先填写流程标识和流程名称')
+      return
+    }
+  }
+  // 校验当前步骤
+  try {
+    if (steps[currentStep.value].validator) {
+      await steps[currentStep.value].validator()
+    }
+    currentStep.value = index
+  } catch (error) {
+    message.warning('请先完善当前步骤必填信息')
+  }
+}
+
+/** 处理设计器保存成功 */
+const handleDesignSuccess = (bpmnXml?: string) => {
+  if (bpmnXml) {
+    formData.value.bpmnXml = bpmnXml
+  }
+  message.success('保存成功')
+}
+
+/** 初始化 */
+onMounted(async () => {
+  await initData()
+})
+</script>
+
+<style lang="scss" scoped>
+.border-bottom {
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.text-primary {
+  color: #3473ff;
+}
+
+.bg-primary {
+  background-color: #3473ff;
+}
+
+.border-primary {
+  border-color: #3473ff;
+}
+</style>
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index d779a9f2..c7d94170 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -126,9 +126,12 @@ const handleQuery = () => {
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
   if (type === 'create') {
-    push('/bpm/manager/model/create-update')
+    push({ name: 'BpmModelCreate' })
   } else {
-    push(`/bpm/manager/model/create-update?id=${id}`)
+    push({
+      name: 'BpmModelUpdate',
+      params: { id }
+    })
   }
 }
 

From a6461da0f867e126f2108fac48376ef77b66ce79 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 17 Dec 2024 09:19:04 +0800
Subject: [PATCH 09/24] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E/=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E4=B8=AD-?=
 =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E6=AD=A5=E9=AA=A4=E4=B8=AD=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD=E5=A2=9E=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/form/BasicInfo.vue  |  1 -
 src/views/bpm/model/form/FormDesign.vue | 76 +++++++++++++++++--------
 src/views/bpm/model/form/index.vue      | 69 ++++++++++++++--------
 3 files changed, 96 insertions(+), 50 deletions(-)

diff --git a/src/views/bpm/model/form/BasicInfo.vue b/src/views/bpm/model/form/BasicInfo.vue
index 088a8cac..b063921d 100644
--- a/src/views/bpm/model/form/BasicInfo.vue
+++ b/src/views/bpm/model/form/BasicInfo.vue
@@ -144,7 +144,6 @@
 
 <script lang="ts" setup>
 import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
-import { BpmModelType } from '@/utils/constants'
 import { UserVO } from '@/api/system/user'
 
 const props = defineProps({
diff --git a/src/views/bpm/model/form/FormDesign.vue b/src/views/bpm/model/form/FormDesign.vue
index c0c06189..98aee6d2 100644
--- a/src/views/bpm/model/form/FormDesign.vue
+++ b/src/views/bpm/model/form/FormDesign.vue
@@ -1,11 +1,5 @@
 <template>
-  <el-form
-    ref="formRef"
-    :model="modelData"
-    :rules="rules"
-    label-width="120px"
-    class="mt-20px"
-  >
+  <el-form ref="formRef" :model="modelData" :rules="rules" label-width="120px" class="mt-20px">
     <el-form-item label="表单类型" prop="formType" class="mb-20px">
       <el-radio-group v-model="modelData.formType">
         <el-radio
@@ -19,19 +13,10 @@
     </el-form-item>
     <el-form-item v-if="modelData.formType === 10" label="流程表单" prop="formId">
       <el-select v-model="modelData.formId" clearable style="width: 100%">
-        <el-option
-          v-for="form in formList"
-          :key="form.id"
-          :label="form.name"
-          :value="form.id"
-        />
+        <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="modelData.formType === 20"
-      label="表单提交路由"
-      prop="formCustomCreatePath"
-    >
+    <el-form-item v-if="modelData.formType === 20" label="表单提交路由" prop="formCustomCreatePath">
       <el-input
         v-model="modelData.formCustomCreatePath"
         placeholder="请输入表单提交路由"
@@ -46,11 +31,7 @@
         <Icon icon="ep:question" class="ml-5px" />
       </el-tooltip>
     </el-form-item>
-    <el-form-item
-      v-if="modelData.formType === 20"
-      label="表单查看地址"
-      prop="formCustomViewPath"
-    >
+    <el-form-item v-if="modelData.formType === 20" label="表单查看地址" prop="formCustomViewPath">
       <el-input
         v-model="modelData.formCustomViewPath"
         placeholder="请输入表单查看的组件地址"
@@ -65,12 +46,28 @@
         <Icon icon="ep:question" class="ml-5px" />
       </el-tooltip>
     </el-form-item>
+    <!-- 表单预览 -->
+    <div
+      v-if="modelData.formType === 10 && modelData.formId && formPreview.rule.length > 0"
+      class="mt-20px"
+    >
+      <div class="flex items-center mb-15px">
+        <div class="h-15px w-4px bg-[#1890ff] mr-10px"></div>
+        <span class="text-15px font-bold">表单预览</span>
+      </div>
+      <form-create
+        v-model="formPreview.formData"
+        :rule="formPreview.rule"
+        :option="formPreview.option"
+      />
+    </div>
   </el-form>
 </template>
 
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { BpmModelFormType } from '@/utils/constants'
+import * as FormApi from '@/api/bpm/form'
+import { setConfAndFields2 } from '@/utils/formCreate'
 
 const props = defineProps({
   modelValue: {
@@ -93,6 +90,35 @@ const modelData = computed({
   set: (val) => emit('update:modelValue', val)
 })
 
+// 表单预览数据
+const formPreview = ref({
+  formData: {},
+  rule: [],
+  option: {
+    submitBtn: false,
+    resetBtn: false,
+    formData: {}
+  }
+})
+
+// 监听表单ID变化，加载表单数据
+watch(
+  () => modelData.value.formId,
+  async (newFormId) => {
+    if (newFormId && modelData.value.formType === 10) {
+      const data = await FormApi.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 }
+)
+
 const rules = {
   formType: [{ required: true, message: '表单类型不能为空', trigger: 'blur' }],
   formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
@@ -108,4 +134,4 @@ const validate = async () => {
 defineExpose({
   validate
 })
-</script> 
\ No newline at end of file
+</script>
diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
index 1b9e4f50..f0178447 100644
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -1,8 +1,10 @@
 <template>
   <ContentWrap>
-    <div class="max-w-1024px mx-auto">
+    <div class="mx-auto">
       <!-- 头部导航栏 -->
-      <div class="absolute top-0 left-0 right-0 h-50px bg-white border-bottom z-10 flex items-center px-20px">
+      <div
+        class="absolute top-0 left-0 right-0 h-50px bg-white border-bottom z-10 flex items-center px-20px"
+      >
         <!-- 左侧标题 -->
         <div class="w-200px flex items-center overflow-hidden">
           <Icon icon="ep:arrow-left" class="cursor-pointer flex-shrink-0" @click="router.back()" />
@@ -14,12 +16,25 @@
         <!-- 步骤条 -->
         <div class="flex-1 flex items-center justify-center h-full">
           <div class="w-400px flex items-center justify-between h-full">
-            <div v-for="(step, index) in steps" :key="index"
+            <div
+              v-for="(step, index) in steps"
+              :key="index"
               class="flex items-center cursor-pointer mx-15px relative h-full"
-              :class="[currentStep === index ? 'text-[#3473ff] border-[#3473ff] border-b-2 border-b-solid' : 'text-gray-500']"
-              @click="handleStepClick(index)">
-              <div class="w-28px h-28px rounded-full flex items-center justify-center mr-8px border-2 border-solid text-15px"
-                :class="[currentStep === index ? 'bg-[#3473ff] text-white border-[#3473ff]' : 'border-gray-300 bg-white text-gray-500']">
+              :class="[
+                currentStep === index
+                  ? 'text-[#3473ff] border-[#3473ff] border-b-2 border-b-solid'
+                  : 'text-gray-500'
+              ]"
+              @click="handleStepClick(index)"
+            >
+              <div
+                class="w-28px h-28px rounded-full flex items-center justify-center mr-8px border-2 border-solid text-15px"
+                :class="[
+                  currentStep === index
+                    ? 'bg-[#3473ff] text-white border-[#3473ff]'
+                    : 'border-gray-300 bg-white text-gray-500'
+                ]"
+              >
                 {{ index + 1 }}
               </div>
               <span class="text-16px font-bold whitespace-nowrap">{{ step.title }}</span>
@@ -37,23 +52,31 @@
       <!-- 主体内容 -->
       <div class="mt-50px">
         <!-- 第一步：基本信息 -->
-        <BasicInfo v-if="currentStep === 0" 
-          v-model="formData"
-          :categoryList="categoryList"
-          :userList="userList"
-          ref="basicInfoRef" />
+        <div v-if="currentStep === 0" class="mx-auto" style="max-width: 1024px">
+          <BasicInfo
+            v-model="formData"
+            :categoryList="categoryList"
+            :userList="userList"
+            ref="basicInfoRef"
+          />
+        </div>
 
         <!-- 第二步：表单设计 -->
-        <FormDesign v-if="currentStep === 1"
-          v-model="formData"
-          :formList="formList"
-          ref="formDesignRef" />
+        <div v-if="currentStep === 1" class="mx-auto" style="max-width: 1024px">
+          <FormDesign
+            v-model="formData"
+            :formList="formList"
+            ref="formDesignRef"
+          />
+        </div>
 
         <!-- 第三步：流程设计 -->
-        <ProcessDesign v-if="currentStep === 2"
+        <ProcessDesign
+          v-if="currentStep === 2"
           v-model="formData"
           ref="processDesignRef"
-          @success="handleDesignSuccess" />
+          @success="handleDesignSuccess"
+        />
       </div>
     </div>
   </ContentWrap>
@@ -61,7 +84,6 @@
 
 <script lang="ts" setup>
 import { useRouter, useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
@@ -75,7 +97,6 @@ import ProcessDesign from './ProcessDesign.vue'
 
 const router = useRouter()
 const route = useRoute()
-const { t } = useI18n()
 const message = useMessage()
 const userStore = useUserStoreWithOut()
 
@@ -106,7 +127,7 @@ const steps = [
 ]
 
 // 表单数据
-const formData = ref({
+const formData: any = ref({
   id: undefined,
   name: '',
   key: '',
@@ -128,11 +149,11 @@ const formData = ref({
 // 数据列表
 const formList = ref([])
 const categoryList = ref([])
-const userList = ref([])
+const userList = ref<UserApi.UserVO[]>([])
 
 /** 初始化数据 */
 const initData = async () => {
-  const modelId = route.params.id
+  const modelId = route.params.id as string
   if (modelId) {
     // 修改场景
     formData.value = await ModelApi.getModel(modelId)
@@ -209,7 +230,7 @@ const handleStepClick = async (index: number) => {
   }
   // 校验当前步骤
   try {
-    if (steps[currentStep.value].validator) {
+    if (typeof steps[currentStep.value].validator === 'function') {
       await steps[currentStep.value].validator()
     }
     currentStep.value = index

From 0ae9acdfd6b69247445763f6418af59f7e97bbcb Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 18 Dec 2024 21:18:55 +0800
Subject: [PATCH 10/24] =?UTF-8?q?=E3=80=90=E7=BC=BA=E9=99=B7=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E3=80=91Simple=20=E6=B5=81=E7=A8=8B=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E5=99=A8=EF=BC=8C=E5=BD=93=E6=A8=AA=E5=90=91=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E8=BF=87=E5=A4=9A=E6=97=B6=EF=BC=8C=E5=B7=A6=E4=BE=A7=E4=BC=9A?=
 =?UTF-8?q?=E8=A2=AB=E9=A1=B6=E5=87=BA=E5=8E=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/nodes-config/ConditionNodeConfig.vue               | 2 +-
 .../theme/simple-process-designer.scss                     | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
index 49e5d9f6..ae931724 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
@@ -381,7 +381,7 @@ const fieldOptions = computed(() => {
 
 /** 获取字段名称 */
 const getFieldTitle = (field: string) => {
-  const item = fieldsInfo.find((item) => item.field === field)
+  const item = fieldOptions.value.find((item) => item.field === field)
   return item?.title
 }
 
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index 516756e2..8cf2681d 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -173,13 +173,16 @@
   height: 100%;
   padding-top: 32px;
   background-color: #fafafa;
+  overflow-x: auto;
+  width: 100%;
+
   .simple-process-model {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     transform-origin: 50% 0 0;
-    overflow: auto;
+    min-width: fit-content;
     transform: scale(1);
     transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     background: url(@/assets/svgs/bpm/simple-process-bg.svg) 0 0 repeat;
@@ -473,6 +476,7 @@
       .branch-node-container {
         position: relative;
         display: flex;
+        min-width: fit-content;
 
         &::before {
           position: absolute;
@@ -548,6 +552,7 @@
           background: transparent;
           border-top: 2px solid #dedede;
           border-bottom: 2px solid #dedede;
+          flex-shrink: 0;
 
           &::before {
             position: absolute;

From ea97abc0afb6145512caaae73c378d9de42fec58 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 18 Dec 2024 23:23:07 +0800
Subject: [PATCH 11/24] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E5=8F=91=E8=B5=B7=E6=B5=81=E7=A8=8B=E6=97=B6?=
 =?UTF-8?q?=E5=80=99=EF=BC=8C=E8=A1=A8=E5=8D=95=E5=AD=97=E6=AE=B5=E6=9D=83?=
 =?UTF-8?q?=E9=99=90=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/ProcessDefinitionDetail.vue        | 37 +++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index 3800f191..d097d1be 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -75,7 +75,7 @@
 <script lang="ts" setup>
 import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
 import { BpmModelType } from '@/utils/constants'
-import { CandidateStrategy } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { CandidateStrategy, NodeId, FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
 import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
 import ProcessInstanceSimpleViewer from '../detail/ProcessInstanceSimpleViewer.vue'
 import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
@@ -129,8 +129,10 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
       }
     }
     setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
-    await nextTick()
+    
+    await nextTick();
     fApi.value?.btn.show(false) // 隐藏提交按钮
+     
     // 获取流程审批信息
     await getApprovalDetail(row)
 
@@ -152,7 +154,9 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
 /** 获取审批详情 */
 const getApprovalDetail = async (row: any) => {
   try {
-    const data = await ProcessInstanceApi.getApprovalDetail({ processDefinitionId: row.id })
+    // 获取审批详情，设置 activityId 为发起人节点（为了获取字段权限。暂时只对 Simple 设计器有效）
+    const data = await ProcessInstanceApi.getApprovalDetail({ processDefinitionId: row.id, activityId : NodeId.START_USER_NODE_ID })
+
     if (!data) {
       message.error('查询不到审批详情信息！')
       return
@@ -170,10 +174,37 @@ const getApprovalDetail = async (row: any) => {
 
     // 获取审批节点，显示 Timeline 的数据
     activityNodes.value = data.activityNodes
+    // 获取表单字段权限
+    const formFieldsPermission =  data.formFieldsPermission
+    // 设置表单字段权限
+    if (formFieldsPermission) {
+      Object.keys(formFieldsPermission).forEach((item) => {
+        setFieldPermission(item, formFieldsPermission[item])
+      })
+    }
   } finally {
   }
 }
 
+/**
+ * 设置表单权限
+ */
+ const setFieldPermission = (field: string, permission: string) => {
+  if (permission === FieldPermissionType.READ) {
+    //@ts-ignore
+    fApi.value?.disabled(true, field)
+  }
+  if (permission === FieldPermissionType.WRITE) {
+    //@ts-ignore
+    fApi.value?.disabled(false, field)
+ 
+  }
+  if (permission === FieldPermissionType.NONE) {
+    //@ts-ignore
+    fApi.value?.hidden(true, field)
+  }
+}
+
 /** 提交按钮 */
 const submitForm = async () => {
   if (!fApi.value || !props.selectProcessDefinition) {

From 5a0bcfe6b5a6e215fb9c9adf9b87f0616f7e0625 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 20 Dec 2024 09:25:13 +0800
Subject: [PATCH 12/24] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91Bpm=EF=BC=9A=E6=96=B0=E7=9A=84=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/ProcessDefinitionDetail.vue        | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index d097d1be..64d072ce 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -8,7 +8,7 @@
         <!-- 中间主要内容 tab 栏 -->
         <el-tabs v-model="activeTab">
           <!-- 表单信息 -->
-          <el-tab-pane label="表单填写" name="form" >
+          <el-tab-pane label="表单填写" name="form">
             <div class="form-scroll-area" v-loading="processInstanceStartLoading">
               <el-scrollbar>
                 <el-row>
@@ -75,7 +75,11 @@
 <script lang="ts" setup>
 import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
 import { BpmModelType } from '@/utils/constants'
-import { CandidateStrategy, NodeId, FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
+import {
+  CandidateStrategy,
+  NodeId,
+  FieldPermissionType
+} from '@/components/SimpleProcessDesignerV2/src/consts'
 import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
 import ProcessInstanceSimpleViewer from '../detail/ProcessInstanceSimpleViewer.vue'
 import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
@@ -129,10 +133,10 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
       }
     }
     setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
-    
-    await nextTick();
+
+    await nextTick()
     fApi.value?.btn.show(false) // 隐藏提交按钮
-     
+
     // 获取流程审批信息
     await getApprovalDetail(row)
 
@@ -154,8 +158,11 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
 /** 获取审批详情 */
 const getApprovalDetail = async (row: any) => {
   try {
-    // 获取审批详情，设置 activityId 为发起人节点（为了获取字段权限。暂时只对 Simple 设计器有效）
-    const data = await ProcessInstanceApi.getApprovalDetail({ processDefinitionId: row.id, activityId : NodeId.START_USER_NODE_ID })
+    // TODO 获取审批详情，设置 activityId 为发起人节点（为了获取字段权限。暂时只对 Simple 设计器有效）
+    const data = await ProcessInstanceApi.getApprovalDetail({
+      processDefinitionId: row.id,
+      activityId: NodeId.START_USER_NODE_ID
+    })
 
     if (!data) {
       message.error('查询不到审批详情信息！')
@@ -175,7 +182,7 @@ const getApprovalDetail = async (row: any) => {
     // 获取审批节点，显示 Timeline 的数据
     activityNodes.value = data.activityNodes
     // 获取表单字段权限
-    const formFieldsPermission =  data.formFieldsPermission
+    const formFieldsPermission = data.formFieldsPermission
     // 设置表单字段权限
     if (formFieldsPermission) {
       Object.keys(formFieldsPermission).forEach((item) => {
@@ -189,7 +196,7 @@ const getApprovalDetail = async (row: any) => {
 /**
  * 设置表单权限
  */
- const setFieldPermission = (field: string, permission: string) => {
+const setFieldPermission = (field: string, permission: string) => {
   if (permission === FieldPermissionType.READ) {
     //@ts-ignore
     fApi.value?.disabled(true, field)
@@ -197,7 +204,6 @@ const getApprovalDetail = async (row: any) => {
   if (permission === FieldPermissionType.WRITE) {
     //@ts-ignore
     fApi.value?.disabled(false, field)
- 
   }
   if (permission === FieldPermissionType.NONE) {
     //@ts-ignore

From ab11818ce28dc4a2290fdeb2f0fcc8bd0747e968 Mon Sep 17 00:00:00 2001
From: GoldenZqqqq <1361001127@qq.com>
Date: Tue, 24 Dec 2024 20:10:58 +0800
Subject: [PATCH 13/24] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E6=AD=A5=E9=AA=A4=E6=97=B6=E7=9A=84=E5=BF=85=E5=A1=AB?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C=EF=BC=8C=E9=99=90=E5=88=B6=E5=BE=80=E5=90=8E?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=97=B6=E6=89=8D=E8=A7=A6=E5=8F=91=E5=BF=85?=
 =?UTF-8?q?=E5=A1=AB=E6=A0=A1=E9=AA=8C=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/CreateUpdate.vue | 650 ---------------------------
 src/views/bpm/model/form/index.vue   |  19 +-
 2 files changed, 13 insertions(+), 656 deletions(-)
 delete mode 100644 src/views/bpm/model/CreateUpdate.vue

diff --git a/src/views/bpm/model/CreateUpdate.vue b/src/views/bpm/model/CreateUpdate.vue
deleted file mode 100644
index adbe8324..00000000
--- a/src/views/bpm/model/CreateUpdate.vue
+++ /dev/null
@@ -1,650 +0,0 @@
-<template>
-  <!-- 头部导航栏 -->
-  <div
-    class="absolute top-0 left-0 right-0 h-50px bg-white border-bottom z-10 flex items-center px-20px"
-  >
-    <!-- 左侧标题，固定宽度 -->
-    <div class="w-200px flex items-center overflow-hidden">
-      <Icon icon="ep:arrow-left" class="cursor-pointer flex-shrink-0" @click="router.back()" />
-      <span class="ml-10px text-16px truncate" :title="formData.name || '创建流程'">
-        {{ formData.name || '创建流程' }}
-      </span>
-    </div>
-
-    <!-- 步骤条，固定在中间 -->
-    <div class="flex-1 flex items-center justify-center h-full">
-      <div class="w-400px flex items-center justify-between h-full">
-        <div
-          v-for="(step, index) in steps"
-          :key="index"
-          class="flex items-center cursor-pointer mx-15px relative h-full"
-          :class="[
-            currentStep === index
-              ? 'text-[#3473ff] border-[#3473ff] border-b-2 border-b-solid'
-              : 'text-gray-500'
-          ]"
-          @click="handleStepClick(index)"
-        >
-          <div
-            class="w-28px h-28px rounded-full flex items-center justify-center mr-8px border-2 border-solid text-15px"
-            :class="[
-              currentStep === index
-                ? 'bg-[#3473ff] text-white border-[#3473ff]'
-                : 'border-gray-300 bg-white text-gray-500'
-            ]"
-          >
-            {{ index + 1 }}
-          </div>
-          <span class="text-16px font-bold whitespace-nowrap">{{ step.title }}</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- 右侧按钮，固定宽度 -->
-    <div class="w-200px flex items-center justify-end gap-2">
-      <el-button @click="handleSave">保 存</el-button>
-      <el-button type="primary" @click="handleDeploy">发 布</el-button>
-    </div>
-  </div>
-
-  <!-- 主体内容 -->
-  <ContentWrap class="mt-50px">
-    <!-- 第一步：基本信息 -->
-    <!-- TODO @goldenzqqq：是不是可以居中哈，1024 -->
-    <!-- TODO @goldenzqqq：有必要，把第一步、第二步，拆成独立的 vue 组件哇？主要是，把相关的 html、还有 js 逻辑，可以挪进去，让主的 index.vue 更精简一点 -->
-    <div v-show="currentStep === 0">
-      <el-form
-        ref="formRef"
-        :model="formData"
-        :rules="formRules"
-        label-width="120px"
-        class="mt-20px"
-        :class="{ 'w-600px': currentStep === 0 }"
-      >
-        <el-form-item label="流程标识" prop="key" class="mb-20px">
-          <el-input v-model="formData.key" :disabled="!!formData.id" placeholder="请输入流标标识" />
-          <el-tooltip
-            v-if="!formData.id"
-            class="item"
-            content="新建后，流程标识不可修改！"
-            effect="light"
-            placement="top"
-          >
-            <Icon icon="ep:question" class="ml-5px" />
-          </el-tooltip>
-          <el-tooltip
-            v-else
-            class="item"
-            content="流程标识不可修改！"
-            effect="light"
-            placement="top"
-          >
-            <Icon icon="ep:question" class="ml-5px" />
-          </el-tooltip>
-        </el-form-item>
-        <el-form-item label="流程名称" prop="name" class="mb-20px">
-          <el-input
-            v-model="formData.name"
-            :disabled="!!formData.id"
-            clearable
-            placeholder="请输入流程名称"
-          />
-        </el-form-item>
-        <el-form-item label="流程分类" prop="category" class="mb-20px">
-          <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" class="mb-20px">
-          <UploadImg v-model="formData.icon" :limit="1" height="64px" width="64px" />
-        </el-form-item>
-        <el-form-item label="流程描述" prop="description" class="mb-20px">
-          <el-input v-model="formData.description" clearable type="textarea" />
-        </el-form-item>
-        <el-form-item label="流程类型" prop="type" class="mb-20px">
-          <el-radio-group v-model="formData.type">
-            <el-radio
-              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
-              :key="dict.value"
-              :value="dict.value"
-            >
-              {{ dict.label }}
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="是否可见" prop="visible" class="mb-20px">
-          <el-radio-group v-model="formData.visible">
-            <el-radio
-              v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-              :key="dict.value"
-              :value="dict.value"
-            >
-              {{ dict.label }}
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="谁可以发起" prop="startUserType" class="mb-20px">
-          <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" class="mb-20px">
-          <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>
-    </div>
-
-    <div v-if="currentStep === 1">
-      <!-- 第二步：表单设计 -->
-      <!-- TODO @goldenzqqq：是不是可以居中哈，1024 -->
-      <el-form
-        ref="formRef"
-        :model="formData"
-        :rules="formRules"
-        label-width="120px"
-        class="mt-20px"
-      >
-        <el-form-item label="表单类型" prop="formType" class="mb-20px">
-          <el-radio-group v-model="formData.formType">
-            <el-radio
-              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
-              :key="dict.value"
-              :value="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"
-          >
-            <Icon icon="ep:question" class="ml-5px" />
-          </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"
-          >
-            <Icon icon="ep:question" class="ml-5px" />
-          </el-tooltip>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <!-- 第三步：流程设计 -->
-    <div v-show="currentStep === 2">
-      <!-- BPMN设计器 -->
-      <template v-if="formData.type === BpmModelType.BPMN">
-        <BpmModelEditor
-          v-if="showDesigner"
-          :model-id="formData.id"
-          :model-key="formData.key"
-          :model-name="formData.name"
-          @success="handleDesignSuccess"
-        />
-      </template>
-
-      <!-- Simple设计器 -->
-      <template v-else>
-        <SimpleModelDesign
-          v-if="showDesigner"
-          :model-id="formData.id"
-          :model-key="formData.key"
-          :model-name="formData.name"
-          @success="handleDesignSuccess"
-        />
-      </template>
-    </div>
-  </ContentWrap>
-
-  <!-- 用户选择弹窗 -->
-  <UserSelectForm ref="userSelectFormRef" @confirm="handleUserSelectConfirm" />
-</template>
-
-<script lang="ts" setup>
-import * as ModelApi from '@/api/bpm/model'
-import * as FormApi from '@/api/bpm/form'
-import { CategoryApi } from '@/api/bpm/category'
-import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
-import { BpmModelFormType, BpmModelType } from '@/utils/constants'
-import * as UserApi from '@/api/system/user'
-import { useUserStoreWithOut } from '@/store/modules/user'
-import { UserVO } from '@/api/system/user'
-import BpmModelEditor from './editor/index.vue'
-import SimpleModelDesign from '../simple/SimpleModelDesign.vue'
-
-const message = useMessage() // 消息弹窗
-const router = useRouter()
-const route = useRoute()
-const userStore = useUserStoreWithOut()
-
-const currentStep = ref(0) // 步骤控制
-const formRef = ref()
-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 = {
-  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 xmlString = ref(undefined)
-
-// 数据列表
-const formList: any = ref([])
-const categoryList: any = ref([])
-const userList = ref<UserVO[]>([])
-const selectedStartUsers = ref<UserVO[]>([])
-const selectedManagerUsers = ref<UserVO[]>([])
-
-// 用户选择相关
-const userSelectFormRef = ref()
-const currentSelectType = ref<'start' | 'manager'>('start')
-
-/** 打开发起人选择 */
-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 handleStartUserTypeChange = (value: number) => {
-  if (value !== 1) {
-    selectedStartUsers.value = []
-    formData.value.startUserIds = []
-  }
-}
-
-/** 处理管理员类型变化 */
-const handleManagerUserTypeChange = (value: number) => {
-  if (value !== 1) {
-    selectedManagerUsers.value = []
-    formData.value.managerUserIds = []
-  }
-}
-
-/** 移除发起人 */
-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
-  )
-}
-
-/** 保存操作 */
-const handleSave = async () => {
-  try {
-    if (formData.value.id) {
-      await ModelApi.updateModel(formData.value)
-      message.success('修改成功')
-    } else {
-      const result = await ModelApi.createModel(formData.value)
-      formData.value.id = result.id // 保存id用于设计器
-      message.success('新增成功')
-    }
-    // 不再跳转，继续停留在当前页面
-  } catch (error) {
-    console.error('保存失败:', error)
-  }
-}
-
-/** 发布操作 */
-const handleDeploy = async () => {
-  try {
-    await message.confirm('是否确认发布该流程？')
-    // 发布时才进行全部校验
-    await validateAllSteps()
-    await handleSave()
-    await ModelApi.deployModel(formData.value.id)
-    message.success('发布成功')
-    // TODO @goldenzqqq：最好使用 name 哈
-    await router.push({ path: '/bpm/manager/model' })
-  } catch (error) {
-    if (error instanceof Error) {
-      // 校验失败时,跳转到对应步骤
-      const failedStep = steps.findIndex((step) => {
-        try {
-          step.validator && step.validator()
-          return false
-        } catch {
-          return true
-        }
-      })
-      if (failedStep !== -1) {
-        currentStep.value = failedStep
-        message.warning('请完善必填信息')
-      }
-    }
-  }
-}
-
-/** 初始化数据 */
-const initData = async () => {
-  const modelId = route.query.id as unknown as string
-  if (modelId) {
-    // 修改场景
-    formData.value = await ModelApi.getModel(modelId)
-    // 加载数据时，根据已有的用户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()
-}
-
-/** 第一步校验 */
-const validateStep1 = async () => {
-  await formRef.value?.validate(['name', 'key', 'category', 'icon', 'type', 'visible'])
-}
-
-/** 第二步校验 */
-const validateStep2 = async () => {
-  await formRef.value?.validate([
-    'formType',
-    'formId',
-    'formCustomCreatePath',
-    'formCustomViewPath'
-  ])
-}
-
-/** 第三步校验 */
-const validateStep3 = async () => {
-  if (!xmlString.value) {
-    throw new Error('请设计流程')
-  }
-}
-
-/** 校验全部 */
-const validateAllSteps = async () => {
-  for (const step of steps) {
-    if (step.validator) {
-      await step.validator()
-    }
-  }
-}
-
-// TODO @goldenzqqq：是不是可以把 step1、step2、step3，改成 basic、form、designer。这样，可读性会好点。
-const steps = [
-  { title: '基本信息', validator: validateStep1 },
-  { title: '表单设计', validator: validateStep2 },
-  { title: '流程设计', validator: validateStep3 }
-]
-
-/** 处理设计器保存成功 */
-const handleDesignSuccess = (bpmnXml?: string) => {
-  if (bpmnXml) {
-    // 新建时，保存设计器生成的XML
-    formData.value.bpmnXml = bpmnXml
-  }
-  message.success('保存成功')
-}
-
-/** 步骤切换处理 */
-const handleStepClick = async (index: number) => {
-  // 如果是切换到第三步（流程设计），需要校验key和name
-  if (index === 2) {
-    if (!formData.value.key || !formData.value.name) {
-      message.warning('请先填写流程标识和流程名称')
-      return
-    }
-  }
-  // TODO @goldenzqqq：感觉这里可以优化下，切换的时候，必须当前表单填写正确，不然不允许切换。
-
-  currentStep.value = index
-}
-
-/** 添加一个计算属性来判断是否显示设计器 */
-const showDesigner = computed(() => {
-  return (
-    currentStep.value === 2 &&
-    Boolean(formData.value.id || (formData.value.key && formData.value.name))
-  )
-})
-
-// 监听步骤变化，确保数据准备完成
-watch(
-  () => currentStep.value,
-  async (newStep) => {
-    if (newStep === 2) {
-      await nextTick()
-    }
-  },
-  { immediate: false }
-)
-
-// 在组件卸载时清理
-onBeforeUnmount(() => {
-  const w = window as any
-  if (w.bpmnInstances) {
-    w.bpmnInstances = null
-  }
-})
-
-/** 初始化 */
-onMounted(async () => {
-  await initData()
-})
-</script>
-
-<style lang="scss" scoped>
-.process-panel {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.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;
-    }
-  }
-}
-
-.border-bottom {
-  border-bottom: 1px solid #dcdfe6;
-}
-
-.text-primary {
-  color: #3473ff;
-}
-
-.bg-primary {
-  background-color: #3473ff;
-}
-
-.border-primary {
-  border-color: #3473ff;
-}
-
-.text-16px {
-  font-size: 16px;
-}
-
-.h-2px {
-  height: 2px;
-}
-
-.mx-15px {
-  margin-left: 15px;
-  margin-right: 15px;
-}
-</style>
diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
index f0178447..7c152a6b 100644
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -228,14 +228,20 @@ const handleStepClick = async (index: number) => {
       return
     }
   }
-  // 校验当前步骤
-  try {
-    if (typeof steps[currentStep.value].validator === 'function') {
-      await steps[currentStep.value].validator()
+  
+  // 只有在向后切换时才进行校验
+  if (index > currentStep.value) {
+    try {
+      if (typeof steps[currentStep.value].validator === 'function') {
+        await steps[currentStep.value].validator()
+      }
+      currentStep.value = index
+    } catch (error) {
+      message.warning('请先完善当前步骤必填信息')
     }
+  } else {
+    // 向前切换时直接切换
     currentStep.value = index
-  } catch (error) {
-    message.warning('请先完善当前步骤必填信息')
   }
 }
 
@@ -244,6 +250,7 @@ const handleDesignSuccess = (bpmnXml?: string) => {
   if (bpmnXml) {
     formData.value.bpmnXml = bpmnXml
   }
+  handleSave() // 自动保存
   message.success('保存成功')
 }
 

From 53841a598ff764c39c6182a7b740a2ca1286c94e Mon Sep 17 00:00:00 2001
From: GoldenZqqqq <1361001127@qq.com>
Date: Tue, 24 Dec 2024 22:24:54 +0800
Subject: [PATCH 14/24] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=89=E6=AD=A5=E9=AA=A4=E6=B5=81=E7=A8=8B=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E4=B8=AD=E7=82=B9=E5=87=BB=E4=BF=9D=E5=AD=98=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?xml=E4=BF=9D=E5=AD=98=E6=97=A0=E6=95=88=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/designer/ProcessDesigner.vue      | 35 +++++++++++++------
 src/views/bpm/model/form/ProcessDesign.vue    | 17 +++++++--
 src/views/bpm/model/form/index.vue            | 23 ++++++++++--
 3 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
index 6cbe11fa..ebe85106 100644
--- a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -315,6 +315,20 @@ const props = defineProps({
   }
 })
 
+// 监听value变化,重新加载流程图
+watch(() => props.value, (newValue) => {
+  if (newValue && bpmnModeler) {
+    createNewDiagram(newValue)
+  }
+}, { immediate: true })
+
+// 监听processId和processName变化
+watch([() => props.processId, () => props.processName], ([newId, newName]) => {
+  if (newId && newName && !props.value) {
+    createNewDiagram(null)
+  }
+}, { immediate: true })
+
 provide('configGlobal', props)
 let bpmnModeler: any = null
 const defaultZoom = ref(1)
@@ -666,18 +680,17 @@ const previewProcessJson = () => {
 }
 /* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
 const processSave = async () => {
-  // console.log(bpmnModeler, 'bpmnModelerbpmnModelerbpmnModelerbpmnModeler')
-  const { err, xml } = await bpmnModeler.saveXML()
-  // console.log(err, 'errerrerrerrerr')
-  // console.log(xml, 'xmlxmlxmlxmlxml')
-  // 读取异常时抛出异常
-  if (err) {
-    // this.$modal.msgError('保存模型失败，请重试！')
-    alert('保存模型失败，请重试！')
-    return
+  try {
+    const { err, xml } = await bpmnModeler.saveXML()
+    if (err) {
+      ElMessage.error('保存流程设计失败，请重试！')
+      return
+    }
+    emit('save', xml)
+  } catch (error) {
+    console.error(error)
+    ElMessage.error('保存流程设计失败，请重试！')
   }
-  // 触发 save 事件
-  emit('save', xml)
 }
 /** 高亮显示 */
 // const highlightedCode = (previewType, previewResult) => {
diff --git a/src/views/bpm/model/form/ProcessDesign.vue b/src/views/bpm/model/form/ProcessDesign.vue
index 934de5a8..4cbd40c2 100644
--- a/src/views/bpm/model/form/ProcessDesign.vue
+++ b/src/views/bpm/model/form/ProcessDesign.vue
@@ -6,6 +6,7 @@
       :model-id="modelData.id"
       :model-key="modelData.key"
       :model-name="modelData.name"
+      :value="modelData.bpmnXml"
       @success="handleDesignSuccess"
     />
   </template>
@@ -17,6 +18,7 @@
       :model-id="modelData.id"
       :model-key="modelData.key"
       :model-name="modelData.name"
+      :value="modelData.bpmnXml"
       @success="handleDesignSuccess"
     />
   </template>
@@ -44,6 +46,13 @@ const modelData = computed({
   set: (val) => emit('update:modelValue', val)
 })
 
+// 监听modelValue变化,确保XML数据同步
+watch(() => props.modelValue, (newVal) => {
+  if (newVal.bpmnXml) {
+    xmlString.value = newVal.bpmnXml
+  }
+}, { immediate: true, deep: true })
+
 /** 处理设计器保存成功 */
 const handleDesignSuccess = (bpmnXml?: string) => {
   if (bpmnXml) {
@@ -52,8 +61,8 @@ const handleDesignSuccess = (bpmnXml?: string) => {
       ...modelData.value,
       bpmnXml
     })
+    emit('success', bpmnXml)
   }
-  emit('success', bpmnXml)
 }
 
 /** 表单校验 */
@@ -61,14 +70,16 @@ const validate = async () => {
   if (!xmlString.value) {
     throw new Error('请设计流程')
   }
+  return true
 }
 
 /** 是否显示设计器 */
 const showDesigner = computed(() => {
-  return Boolean(modelData.value.id || (modelData.value.key && modelData.value.name))
+  return Boolean(modelData.value.key && modelData.value.name)
 })
 
 defineExpose({
-  validate
+  validate,
+  getXmlString: () => xmlString.value
 })
 </script> 
diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
index 7c152a6b..3f105d67 100644
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -173,6 +173,19 @@ const initData = async () => {
 /** 保存操作 */
 const handleSave = async () => {
   try {
+    // 保存前确保当前步骤的数据已经验证通过
+    if (typeof steps[currentStep.value].validator === 'function') {
+      await steps[currentStep.value].validator()
+    }
+    
+    // 如果是第三步，需要先获取最新的流程设计数据
+    if (currentStep.value === 2) {
+      const bpmnXml = processDesignRef.value?.getXmlString()
+      if (bpmnXml) {
+        formData.value.bpmnXml = bpmnXml
+      }
+    }
+    
     if (formData.value.id) {
       await ModelApi.updateModel(formData.value)
       message.success('修改成功')
@@ -183,6 +196,7 @@ const handleSave = async () => {
     }
   } catch (error) {
     console.error('保存失败:', error)
+    message.error(error.message || '保存失败')
   }
 }
 
@@ -196,6 +210,13 @@ const handleDeploy = async () => {
         await step.validator()
       }
     }
+    // 如果是第三步，需要先获取最新的流程设计数据
+    if (currentStep.value === 2) {
+      const bpmnXml = processDesignRef.value?.getXmlString()
+      if (bpmnXml) {
+        formData.value.bpmnXml = bpmnXml
+      }
+    }
     await handleSave()
     await ModelApi.deployModel(formData.value.id)
     message.success('发布成功')
@@ -250,8 +271,6 @@ const handleDesignSuccess = (bpmnXml?: string) => {
   if (bpmnXml) {
     formData.value.bpmnXml = bpmnXml
   }
-  handleSave() // 自动保存
-  message.success('保存成功')
 }
 
 /** 初始化 */

From f86bd0df0b4375665d568ce2107d99582997880f Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Wed, 25 Dec 2024 09:52:19 +0800
Subject: [PATCH 15/24] =?UTF-8?q?fix:=20=E7=AC=AC=E4=B8=80=E6=AD=A5?=
 =?UTF-8?q?=E9=AA=A4=E4=B8=ADtooltip=20icon=E6=9C=AA=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D=E4=B8=8E=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/form/BasicInfo.vue | 31 ++++++++++++++------------
 src/views/bpm/model/form/index.vue     |  8 ++-----
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/views/bpm/model/form/BasicInfo.vue b/src/views/bpm/model/form/BasicInfo.vue
index b063921d..532ec786 100644
--- a/src/views/bpm/model/form/BasicInfo.vue
+++ b/src/views/bpm/model/form/BasicInfo.vue
@@ -7,19 +7,22 @@
     class="mt-20px w-600px"
   >
     <el-form-item label="流程标识" prop="key" class="mb-20px">
-      <el-input v-model="modelData.key" :disabled="!!modelData.id" placeholder="请输入流标标识" />
-      <el-tooltip
-        v-if="!modelData.id"
-        class="item"
-        content="新建后，流程标识不可修改！"
-        effect="light"
-        placement="top"
-      >
-        <Icon icon="ep:question" class="ml-5px" />
-      </el-tooltip>
-      <el-tooltip v-else class="item" content="流程标识不可修改！" effect="light" placement="top">
-        <Icon icon="ep:question" class="ml-5px" />
-      </el-tooltip>
+      <div class="flex items-center">
+        <el-input
+          class="!w-480px"
+          v-model="modelData.key"
+          :disabled="!!modelData.id"
+          placeholder="请输入流标标识"
+        />
+        <el-tooltip
+          class="item"
+          :content="modelData.id ? '流程标识不可修改！' : '新建后，流程标识不可修改！'"
+          effect="light"
+          placement="top"
+        >
+          <Icon icon="ep:question-filled" class="ml-5px" />
+        </el-tooltip>
+      </div>
     </el-form-item>
     <el-form-item label="流程名称" prop="name" class="mb-20px">
       <el-input
@@ -31,10 +34,10 @@
     </el-form-item>
     <el-form-item label="流程分类" prop="category" class="mb-20px">
       <el-select
+        class="!w-full"
         v-model="modelData.category"
         clearable
         placeholder="请选择流程分类"
-        style="width: 100%"
       >
         <el-option
           v-for="category in categoryList"
diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
index 3f105d67..59279842 100644
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -62,12 +62,8 @@
         </div>
 
         <!-- 第二步：表单设计 -->
-        <div v-if="currentStep === 1" class="mx-auto" style="max-width: 1024px">
-          <FormDesign
-            v-model="formData"
-            :formList="formList"
-            ref="formDesignRef"
-          />
+        <div v-if="currentStep === 1" class="mx-auto w-1024px">
+          <FormDesign v-model="formData" :formList="formList" ref="formDesignRef" />
         </div>
 
         <!-- 第三步：流程设计 -->

From a82862be475daa6ea8fa7822dc7c4f5d48873ad5 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Wed, 25 Dec 2024 14:10:16 +0800
Subject: [PATCH 16/24] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E6=97=B6=EF=BC=8C=E4=BF=AE=E6=94=B9=E4=BA=86=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E4=BF=9D=E5=AD=98=E4=B8=8D=E7=94=9F?=
 =?UTF-8?q?=E6=95=88=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/form/ProcessDesign.vue | 31 ++++++++++++++++------
 src/views/bpm/model/form/index.vue         |  4 +--
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/views/bpm/model/form/ProcessDesign.vue b/src/views/bpm/model/form/ProcessDesign.vue
index 4cbd40c2..7ee58092 100644
--- a/src/views/bpm/model/form/ProcessDesign.vue
+++ b/src/views/bpm/model/form/ProcessDesign.vue
@@ -47,11 +47,15 @@ const modelData = computed({
 })
 
 // 监听modelValue变化,确保XML数据同步
-watch(() => props.modelValue, (newVal) => {
-  if (newVal.bpmnXml) {
-    xmlString.value = newVal.bpmnXml
-  }
-}, { immediate: true, deep: true })
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal.bpmnXml) {
+      xmlString.value = newVal.bpmnXml
+    }
+  },
+  { immediate: true, deep: true }
+)
 
 /** 处理设计器保存成功 */
 const handleDesignSuccess = (bpmnXml?: string) => {
@@ -67,6 +71,11 @@ const handleDesignSuccess = (bpmnXml?: string) => {
 
 /** 表单校验 */
 const validate = async () => {
+  // 修改场景下，如果已有 modelData.bpmnXml 则不需要重新校验
+  if (modelData.value.id && modelData.value.bpmnXml) {
+    return true
+  }
+  // 新增场景或无 bpmnXml 时才校验
   if (!xmlString.value) {
     throw new Error('请设计流程')
   }
@@ -75,11 +84,17 @@ const validate = async () => {
 
 /** 是否显示设计器 */
 const showDesigner = computed(() => {
-  return Boolean(modelData.value.key && modelData.value.name)
+  return Boolean(modelData.value?.key && modelData.value?.name)
 })
 
+/** 获取当前XML字符串 */
+const getXmlString = () => {
+  // 优先返回最新的 xmlString
+  return xmlString.value || modelData.value?.bpmnXml
+}
+
 defineExpose({
   validate,
-  getXmlString: () => xmlString.value
+  getXmlString
 })
-</script> 
+</script>
diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
index 59279842..47016ac3 100644
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -52,7 +52,7 @@
       <!-- 主体内容 -->
       <div class="mt-50px">
         <!-- 第一步：基本信息 -->
-        <div v-if="currentStep === 0" class="mx-auto" style="max-width: 1024px">
+        <div v-if="currentStep === 0" class="mx-auto max-w-1024px">
           <BasicInfo
             v-model="formData"
             :categoryList="categoryList"
@@ -62,7 +62,7 @@
         </div>
 
         <!-- 第二步：表单设计 -->
-        <div v-if="currentStep === 1" class="mx-auto w-1024px">
+        <div v-if="currentStep === 1" class="mx-auto max-w-1024px">
           <FormDesign v-model="formData" :formList="formList" ref="formDesignRef" />
         </div>
 

From 36157a8f24502d84e31696a5a258da33580a3bba Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Wed, 25 Dec 2024 14:33:21 +0800
Subject: [PATCH 17/24] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E6=B5=81=E7=A8=8B=E6=97=B6=E6=97=A0=E6=B3=95=E9=80=9A?=
 =?UTF-8?q?=E8=BF=87=E7=AC=AC=E4=B8=89=E6=AD=A5=E7=9A=84bpm=E5=BF=85?=
 =?UTF-8?q?=E5=A1=AB=E6=A0=A1=E9=AA=8C=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/form/ProcessDesign.vue | 22 ++++++-----
 src/views/bpm/model/form/index.vue         | 46 +++++++++++-----------
 2 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/src/views/bpm/model/form/ProcessDesign.vue b/src/views/bpm/model/form/ProcessDesign.vue
index 7ee58092..2e8f94c9 100644
--- a/src/views/bpm/model/form/ProcessDesign.vue
+++ b/src/views/bpm/model/form/ProcessDesign.vue
@@ -50,7 +50,7 @@ const modelData = computed({
 watch(
   () => props.modelValue,
   (newVal) => {
-    if (newVal.bpmnXml) {
+    if (newVal?.bpmnXml) {
       xmlString.value = newVal.bpmnXml
     }
   },
@@ -61,24 +61,29 @@ watch(
 const handleDesignSuccess = (bpmnXml?: string) => {
   if (bpmnXml) {
     xmlString.value = bpmnXml
-    emit('update:modelValue', {
+    modelData.value = {
       ...modelData.value,
       bpmnXml
-    })
+    }
     emit('success', bpmnXml)
   }
 }
 
 /** 表单校验 */
 const validate = async () => {
-  // 修改场景下，如果已有 modelData.bpmnXml 则不需要重新校验
-  if (modelData.value.id && modelData.value.bpmnXml) {
+  // 获取最新的XML数据
+  const currentXml = xmlString.value || modelData.value?.bpmnXml
+
+  // 如果是修改场景且有XML数据（无论是新的还是原有的）
+  if (modelData.value.id && currentXml) {
     return true
   }
-  // 新增场景或无 bpmnXml 时才校验
-  if (!xmlString.value) {
+
+  // 新增场景必须有XML数据
+  if (!currentXml) {
     throw new Error('请设计流程')
   }
+
   return true
 }
 
@@ -89,8 +94,7 @@ const showDesigner = computed(() => {
 
 /** 获取当前XML字符串 */
 const getXmlString = () => {
-  // 优先返回最新的 xmlString
-  return xmlString.value || modelData.value?.bpmnXml
+  return xmlString.value || modelData.value?.bpmnXml || ''
 }
 
 defineExpose({
diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
index 47016ac3..f6c2ef2a 100644
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -169,19 +169,24 @@ const initData = async () => {
 /** 保存操作 */
 const handleSave = async () => {
   try {
-    // 保存前确保当前步骤的数据已经验证通过
-    if (typeof steps[currentStep.value].validator === 'function') {
-      await steps[currentStep.value].validator()
-    }
-    
-    // 如果是第三步，需要先获取最新的流程设计数据
-    if (currentStep.value === 2) {
-      const bpmnXml = processDesignRef.value?.getXmlString()
-      if (bpmnXml) {
-        formData.value.bpmnXml = bpmnXml
+    // 保存前确保所有步骤的数据都已经验证通过
+    for (const step of steps) {
+      if (step.validator) {
+        await step.validator()
       }
     }
-    
+
+    // 如果是在第三步，需要先获取最新的流程设计数据
+    if (currentStep.value === 2) {
+      await nextTick()
+      const bpmnXml = processDesignRef.value?.getXmlString()
+      // 确保有XML数据
+      if (!bpmnXml) {
+        throw new Error('请设计流程')
+      }
+      formData.value.bpmnXml = bpmnXml
+    }
+
     if (formData.value.id) {
       await ModelApi.updateModel(formData.value)
       message.success('修改成功')
@@ -193,6 +198,7 @@ const handleSave = async () => {
   } catch (error) {
     console.error('保存失败:', error)
     message.error(error.message || '保存失败')
+    throw error
   }
 }
 
@@ -200,24 +206,14 @@ const handleSave = async () => {
 const handleDeploy = async () => {
   try {
     await message.confirm('是否确认发布该流程？')
-    // 发布时才进行全部校验
-    for (const step of steps) {
-      if (step.validator) {
-        await step.validator()
-      }
-    }
-    // 如果是第三步，需要先获取最新的流程设计数据
-    if (currentStep.value === 2) {
-      const bpmnXml = processDesignRef.value?.getXmlString()
-      if (bpmnXml) {
-        formData.value.bpmnXml = bpmnXml
-      }
-    }
+    // 先保存所有数据
     await handleSave()
+    // 发布
     await ModelApi.deployModel(formData.value.id)
     message.success('发布成功')
     router.push({ name: 'BpmModel' })
   } catch (error) {
+    console.error('发布失败:', error)
     if (error instanceof Error) {
       // 校验失败时,跳转到对应步骤
       const failedStep = steps.findIndex((step) => {
@@ -231,6 +227,8 @@ const handleDeploy = async () => {
       if (failedStep !== -1) {
         currentStep.value = failedStep
         message.warning('请完善必填信息')
+      } else {
+        message.error(error.message || '发布失败')
       }
     }
   }

From 6cf3de01660ba785c6b0722baf2c6cde286379d6 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Fri, 27 Dec 2024 09:43:32 +0800
Subject: [PATCH 18/24] =?UTF-8?q?feat:=20=E6=A0=B7=E5=BC=8F=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/form/BasicInfo.vue | 10 ++--------
 src/views/bpm/model/form/index.vue     |  4 ++--
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/views/bpm/model/form/BasicInfo.vue b/src/views/bpm/model/form/BasicInfo.vue
index 532ec786..0359ea89 100644
--- a/src/views/bpm/model/form/BasicInfo.vue
+++ b/src/views/bpm/model/form/BasicInfo.vue
@@ -1,15 +1,9 @@
 <template>
-  <el-form
-    ref="formRef"
-    :model="modelData"
-    :rules="rules"
-    label-width="120px"
-    class="mt-20px w-600px"
-  >
+  <el-form ref="formRef" :model="modelData" :rules="rules" label-width="120px" class="mt-20px">
     <el-form-item label="流程标识" prop="key" class="mb-20px">
       <div class="flex items-center">
         <el-input
-          class="!w-480px"
+          class="!w-440px"
           v-model="modelData.key"
           :disabled="!!modelData.id"
           placeholder="请输入流标标识"
diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
index f6c2ef2a..c17bfeb7 100644
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -52,7 +52,7 @@
       <!-- 主体内容 -->
       <div class="mt-50px">
         <!-- 第一步：基本信息 -->
-        <div v-if="currentStep === 0" class="mx-auto max-w-1024px">
+        <div v-if="currentStep === 0" class="mx-auto w-560px">
           <BasicInfo
             v-model="formData"
             :categoryList="categoryList"
@@ -62,7 +62,7 @@
         </div>
 
         <!-- 第二步：表单设计 -->
-        <div v-if="currentStep === 1" class="mx-auto max-w-1024px">
+        <div v-if="currentStep === 1" class="mx-auto w-560px">
           <FormDesign v-model="formData" :formList="formList" ref="formDesignRef" />
         </div>
 

From 40c2cb72ffeb5ad57c94f63c389e3f7882d4bef3 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Fri, 27 Dec 2024 11:50:56 +0800
Subject: [PATCH 19/24] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98/=E6=8F=90=E4=BA=A4=E6=8C=89=E9=92=AE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=8E=E5=AE=8C=E5=96=84=E4=BF=9D=E5=AD=98/?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4=E5=90=8E=E7=9A=84=E7=A1=AE=E8=AE=A4=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/form/index.vue | 161 ++++++++++++++++++++---------
 1 file changed, 112 insertions(+), 49 deletions(-)

diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
index c17bfeb7..b0aef58c 100644
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -44,8 +44,8 @@
 
         <!-- 右侧按钮 -->
         <div class="w-200px flex items-center justify-end gap-2">
-          <el-button @click="handleSave">保 存</el-button>
-          <el-button type="primary" @click="handleDeploy">发 布</el-button>
+          <el-button v-if="route.params.id" type="success" @click="handleDeploy">发 布</el-button>
+          <el-button type="primary" @click="handleSave">保 存</el-button>
         </div>
       </div>
 
@@ -90,8 +90,10 @@ import { BpmModelType, BpmModelFormType } from '@/utils/constants'
 import BasicInfo from './BasicInfo.vue'
 import FormDesign from './FormDesign.vue'
 import ProcessDesign from './ProcessDesign.vue'
+import { useTagsViewStore } from '@/store/modules/tagsView'
 
 const router = useRouter()
+const { delView } = useTagsViewStore() // 视图操作
 const route = useRoute()
 const message = useMessage()
 const userStore = useUserStoreWithOut()
@@ -102,24 +104,24 @@ const formDesignRef = ref()
 const processDesignRef = ref()
 
 /** 步骤校验函数 */
-const validateStep1 = async () => {
+const validateBasic = async () => {
   await basicInfoRef.value?.validate()
 }
 
-const validateStep2 = async () => {
+const validateForm = async () => {
   await formDesignRef.value?.validate()
 }
 
-const validateStep3 = async () => {
+const validateProcess = async () => {
   await processDesignRef.value?.validate()
 }
 
 // 步骤控制
 const currentStep = ref(0)
 const steps = [
-  { title: '基本信息', validator: validateStep1 },
-  { title: '表单设计', validator: validateStep2 },
-  { title: '流程设计', validator: validateStep3 }
+  { title: '基本信息', validator: validateBasic },
+  { title: '表单设计', validator: validateForm },
+  { title: '流程设计', validator: validateProcess }
 ]
 
 // 表单数据
@@ -166,71 +168,124 @@ const initData = async () => {
   userList.value = await UserApi.getSimpleUserList()
 }
 
+/** 校验所有步骤数据是否完整 */
+const validateAllSteps = async () => {
+  try {
+    // 基本信息校验
+    await basicInfoRef.value?.validate()
+    if (!formData.value.key || !formData.value.name || !formData.value.category) {
+      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)
+    ) {
+      currentStep.value = 1
+      throw new Error('请完善自定义表单信息')
+    }
+
+    // 流程设计校验
+    await processDesignRef.value?.validate()
+    const bpmnXml = processDesignRef.value?.getXmlString()
+    if (!bpmnXml) {
+      currentStep.value = 2
+      throw new Error('请设计流程')
+    }
+
+    return true
+  } catch (error) {
+    throw error
+  }
+}
+
 /** 保存操作 */
 const handleSave = async () => {
   try {
-    // 保存前确保所有步骤的数据都已经验证通过
-    for (const step of steps) {
-      if (step.validator) {
-        await step.validator()
-      }
-    }
+    // 保存前校验所有步骤的数据
+    await validateAllSteps()
 
-    // 如果是在第三步，需要先获取最新的流程设计数据
-    if (currentStep.value === 2) {
-      await nextTick()
-      const bpmnXml = processDesignRef.value?.getXmlString()
-      // 确保有XML数据
-      if (!bpmnXml) {
-        throw new Error('请设计流程')
-      }
-      formData.value.bpmnXml = bpmnXml
-    }
+    // 获取最新的流程设计数据
+    const bpmnXml = processDesignRef.value?.getXmlString()
+    formData.value.bpmnXml = bpmnXml
 
     if (formData.value.id) {
+      // 修改场景
       await ModelApi.updateModel(formData.value)
       message.success('修改成功')
+      // 询问是否发布流程
+      try {
+        await message.confirm('修改流程成功，是否发布流程？')
+        // 用户点击确认，执行发布
+        await handleDeploy()
+      } catch {
+        // 用户点击取消，停留在当前页面
+      }
     } else {
+      // 新增场景
       const result = await ModelApi.createModel(formData.value)
-      formData.value.id = result.id
+      formData.value.id = result
       message.success('新增成功')
+      try {
+        await message.confirm('创建流程成功，是否继续编辑？')
+        // 用户点击继续编辑，跳转到编辑页面
+        await nextTick()
+        // 先删除当前页签
+        delView(unref(router.currentRoute))
+        // 跳转到编辑页面
+        await router.push({
+          name: 'BpmModelUpdate',
+          params: { id: formData.value.id }
+        })
+      } catch {
+        // 用户点击返回列表
+        await router.push({ name: 'BpmModel' })
+      }
     }
-  } catch (error) {
+  } catch (error: any) {
     console.error('保存失败:', error)
-    message.error(error.message || '保存失败')
-    throw error
+    message.warning(error.message || '请完善所有步骤的必填信息')
   }
 }
 
 /** 发布操作 */
 const handleDeploy = async () => {
   try {
-    await message.confirm('是否确认发布该流程？')
+    // 修改场景下直接发布，新增场景下需要先确认
+    if (!formData.value.id) {
+      await message.confirm('是否确认发布该流程？')
+    }
+
+    // 校验所有步骤
+    await validateAllSteps()
+
+    // 获取最新的流程设计数据
+    const bpmnXml = processDesignRef.value?.getXmlString()
+    formData.value.bpmnXml = bpmnXml
+
     // 先保存所有数据
-    await handleSave()
+    if (formData.value.id) {
+      await ModelApi.updateModel(formData.value)
+    } else {
+      const result = await ModelApi.createModel(formData.value)
+      formData.value.id = result.id
+    }
+
     // 发布
     await ModelApi.deployModel(formData.value.id)
     message.success('发布成功')
+    // 返回列表页
     router.push({ name: 'BpmModel' })
-  } catch (error) {
+  } catch (error: any) {
     console.error('发布失败:', error)
-    if (error instanceof Error) {
-      // 校验失败时,跳转到对应步骤
-      const failedStep = steps.findIndex((step) => {
-        try {
-          step.validator && step.validator()
-          return false
-        } catch {
-          return true
-        }
-      })
-      if (failedStep !== -1) {
-        currentStep.value = failedStep
-        message.warning('请完善必填信息')
-      } else {
-        message.error(error.message || '发布失败')
-      }
-    }
+    message.warning(error.message || '发布失败')
   }
 }
 
@@ -243,7 +298,7 @@ const handleStepClick = async (index: number) => {
       return
     }
   }
-  
+
   // 只有在向后切换时才进行校验
   if (index > currentStep.value) {
     try {
@@ -271,6 +326,14 @@ const handleDesignSuccess = (bpmnXml?: string) => {
 onMounted(async () => {
   await initData()
 })
+
+// 添加组件卸载前的清理代码
+onBeforeUnmount(() => {
+  // 清理所有的引用
+  basicInfoRef.value = null
+  formDesignRef.value = null
+  processDesignRef.value = null
+})
 </script>
 
 <style lang="scss" scoped>

From e50cd2231cac22d3441b45fb7e09cf30fc3c4d76 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Fri, 27 Dec 2024 14:32:39 +0800
Subject: [PATCH 20/24] =?UTF-8?q?feat:=20=E5=88=A0=E9=99=A4=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E6=B5=81=E7=A8=8B=E4=B8=AD=E4=B8=A4=E4=B8=AA=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E5=99=A8=E7=9A=84=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E6=8C=89=E9=92=AE=EF=BC=8C=E5=B9=B6=E5=9C=A8?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E4=BF=9D=E5=AD=98/=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=97=B6=E7=9B=B4=E6=8E=A5=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E5=86=85=E9=83=A8=E7=BB=84=E4=BB=B6xml=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/SimpleProcessModel.vue                | 41 ++++-----
 .../package/designer/ProcessDesigner.vue      |  7 --
 src/views/bpm/model/editor/index.vue          | 44 +++++++++-
 src/views/bpm/model/form/ProcessDesign.vue    | 83 +++++++++++--------
 src/views/bpm/model/form/index.vue            | 10 ++-
 5 files changed, 123 insertions(+), 62 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
index 3a18227a..bfcaa21e 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
@@ -8,15 +8,6 @@
           <el-button size="default" class="w-80px"> {{ scaleValue }}% </el-button>
           <el-button size="default" :plain="true" :icon="ZoomIn" @click="zoomIn()" />
         </el-button-group>
-        <el-button
-          v-if="!readonly"
-          size="default"
-          class="ml-4px"
-          type="primary"
-          :icon="Select"
-          @click="saveSimpleFlowModel"
-          >保存模型</el-button
-        >
       </el-row>
     </div>
     <div class="simple-process-model" :style="`transform: scale(${scaleValue / 100});`">
@@ -42,7 +33,8 @@
 import ProcessNodeTree from './ProcessNodeTree.vue'
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from './consts'
 import { useWatchNode } from './node'
-import { Select, ZoomOut, ZoomIn, ScaleToOriginal } from '@element-plus/icons-vue'
+import { ZoomOut, ZoomIn, ScaleToOriginal } from '@element-plus/icons-vue'
+
 defineOptions({
   name: 'SimpleProcessModel'
 })
@@ -58,6 +50,7 @@ const props = defineProps({
     default: true
   }
 })
+
 const emits = defineEmits<{
   'save': [node: SimpleFlowNode | undefined]
 }>()
@@ -68,6 +61,7 @@ provide('readonly', props.readonly)
 let scaleValue = ref(100)
 const MAX_SCALE_VALUE = 200
 const MIN_SCALE_VALUE = 50
+
 // 放大
 const zoomIn = () => {
   if (scaleValue.value == MAX_SCALE_VALUE) {
@@ -75,6 +69,7 @@ const zoomIn = () => {
   }
   scaleValue.value += 10
 }
+
 // 缩小
 const zoomOut = () => {
   if (scaleValue.value == MIN_SCALE_VALUE) {
@@ -82,21 +77,14 @@ const zoomOut = () => {
   }
   scaleValue.value -= 10
 }
+
 const processReZoom = () => {
   scaleValue.value = 100
 }
 
 const errorDialogVisible = ref(false)
 let errorNodes: SimpleFlowNode[] = []
-const saveSimpleFlowModel = async () => {
-  errorNodes = []
-  validateNode(processNodeTree.value, errorNodes)
-  if (errorNodes.length > 0) {
-    errorDialogVisible.value = true
-    return
-  }
-  emits('save', processNodeTree.value)
-}
+
 // 校验节点设置。 暂时以 showText 为空 未节点错误配置
 const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
   if (node) {
@@ -135,6 +123,21 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
     }
   }
 }
+
+/** 获取当前流程数据 */
+const getCurrentFlowData = () => {
+  errorNodes = []
+  validateNode(processNodeTree.value, errorNodes)
+  if (errorNodes.length > 0) {
+    errorDialogVisible.value = true
+    return undefined
+  }
+  return processNodeTree.value
+}
+
+defineExpose({
+  getCurrentFlowData
+})
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
index ebe85106..e9427292 100644
--- a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -160,13 +160,6 @@
             <XButton preIcon="ep:refresh" @click="processRestart()" />
           </el-tooltip>
         </ElButtonGroup>
-        <XButton
-          preIcon="ep:plus"
-          title="保存模型"
-          @click="processSave"
-          :type="props.headerButtonType"
-          :disabled="simulationStatus"
-        />
       </template>
       <!-- 用于打开本地文件-->
       <input
diff --git a/src/views/bpm/model/editor/index.vue b/src/views/bpm/model/editor/index.vue
index 690c1233..063e5709 100644
--- a/src/views/bpm/model/editor/index.vue
+++ b/src/views/bpm/model/editor/index.vue
@@ -205,11 +205,53 @@ onBeforeUnmount(() => {
     w.bpmnInstances = null
   }
 })
+
+/** 获取XML字符串 */
+const saveXML = async () => {
+  if (!modeler.value) {
+    return { xml: undefined }
+  }
+  try {
+    return await modeler.value.saveXML({ format: true })
+  } catch (error) {
+    console.error('获取XML失败:', error)
+    return { xml: undefined }
+  }
+}
+
+/** 获取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 = () => {
+  if (processDesigner.value?.refresh) {
+    processDesigner.value.refresh()
+  }
+}
+
+// 暴露必要的属性和方法给父组件
+defineExpose({
+  modeler,
+  isModelerReady,
+  saveXML,
+  saveSVG,
+  refresh
+})
 </script>
 <style lang="scss">
 .process-panel__container {
   position: absolute;
-  top: 90px;
+  top: 180px;
   right: 60px;
 }
 </style>
diff --git a/src/views/bpm/model/form/ProcessDesign.vue b/src/views/bpm/model/form/ProcessDesign.vue
index 2e8f94c9..11384370 100644
--- a/src/views/bpm/model/form/ProcessDesign.vue
+++ b/src/views/bpm/model/form/ProcessDesign.vue
@@ -7,6 +7,7 @@
       :model-key="modelData.key"
       :model-name="modelData.name"
       :value="modelData.bpmnXml"
+      ref="bpmnEditorRef"
       @success="handleDesignSuccess"
     />
   </template>
@@ -19,6 +20,7 @@
       :model-key="modelData.key"
       :model-name="modelData.name"
       :value="modelData.bpmnXml"
+      ref="simpleEditorRef"
       @success="handleDesignSuccess"
     />
   </template>
@@ -38,7 +40,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'success'])
 
-const xmlString = ref<string>()
+const bpmnEditorRef = ref()
+const simpleEditorRef = ref()
 
 // 创建本地数据副本
 const modelData = computed({
@@ -46,21 +49,56 @@ const modelData = computed({
   set: (val) => emit('update:modelValue', val)
 })
 
-// 监听modelValue变化,确保XML数据同步
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    if (newVal?.bpmnXml) {
-      xmlString.value = newVal.bpmnXml
+/** 表单校验 */
+const validate = async () => {
+  try {
+    // 根据流程类型获取对应的编辑器引用
+    const editorRef =
+      modelData.value.type === BpmModelType.BPMN ? bpmnEditorRef.value : simpleEditorRef.value
+    if (!editorRef) {
+      throw new Error('流程设计器未初始化')
     }
-  },
-  { immediate: true, deep: true }
-)
+
+    // 获取最新的XML数据
+    const bpmnXml = await getXmlString()
+    console.warn(bpmnXml, 'bpmnXml')
+    if (!bpmnXml) {
+      throw new Error('请设计流程')
+    }
+
+    return true
+  } catch (error) {
+    throw error
+  }
+}
+
+/** 获取当前XML字符串 */
+const getXmlString = async () => {
+  try {
+    if (modelData.value.type === BpmModelType.BPMN) {
+      console.warn('bpmnEditorRef.value', bpmnEditorRef.value)
+      // BPMN设计器
+      if (bpmnEditorRef.value) {
+        const { xml } = await bpmnEditorRef.value.saveXML()
+        return xml
+      }
+    } else {
+      // Simple设计器
+      if (simpleEditorRef.value) {
+        const flowData = simpleEditorRef.value.getCurrentFlowData()
+        return flowData ? JSON.stringify(flowData) : undefined
+      }
+    }
+    return undefined
+  } catch (error) {
+    console.error('获取流程数据失败:', error)
+    return undefined
+  }
+}
 
 /** 处理设计器保存成功 */
 const handleDesignSuccess = (bpmnXml?: string) => {
   if (bpmnXml) {
-    xmlString.value = bpmnXml
     modelData.value = {
       ...modelData.value,
       bpmnXml
@@ -69,34 +107,11 @@ const handleDesignSuccess = (bpmnXml?: string) => {
   }
 }
 
-/** 表单校验 */
-const validate = async () => {
-  // 获取最新的XML数据
-  const currentXml = xmlString.value || modelData.value?.bpmnXml
-
-  // 如果是修改场景且有XML数据（无论是新的还是原有的）
-  if (modelData.value.id && currentXml) {
-    return true
-  }
-
-  // 新增场景必须有XML数据
-  if (!currentXml) {
-    throw new Error('请设计流程')
-  }
-
-  return true
-}
-
 /** 是否显示设计器 */
 const showDesigner = computed(() => {
   return Boolean(modelData.value?.key && modelData.value?.name)
 })
 
-/** 获取当前XML字符串 */
-const getXmlString = () => {
-  return xmlString.value || modelData.value?.bpmnXml || ''
-}
-
 defineExpose({
   validate,
   getXmlString
diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
index b0aef58c..0b55e483 100644
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -7,7 +7,7 @@
       >
         <!-- 左侧标题 -->
         <div class="w-200px flex items-center overflow-hidden">
-          <Icon icon="ep:arrow-left" class="cursor-pointer flex-shrink-0" @click="router.back()" />
+          <Icon icon="ep:arrow-left" class="cursor-pointer flex-shrink-0" @click="handleBack" />
           <span class="ml-10px text-16px truncate" :title="formData.name || '创建流程'">
             {{ formData.name || '创建流程' }}
           </span>
@@ -322,6 +322,14 @@ const handleDesignSuccess = (bpmnXml?: string) => {
   }
 }
 
+/** 返回列表页 */
+const handleBack = () => {
+  // 先删除当前页签
+  delView(unref(router.currentRoute))
+  // 跳转到列表页
+  router.push({ name: 'BpmModel' })
+}
+
 /** 初始化 */
 onMounted(async () => {
   await initData()

From a8c1fd4473364f3a391f7f1ddd98c9050d869531 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Fri, 27 Dec 2024 14:58:43 +0800
Subject: [PATCH 21/24] =?UTF-8?q?feat:=20Simple=E8=AE=BE=E8=AE=A1=E5=99=A8?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=E8=8E=B7=E5=8F=96bpmnXml=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/SimpleProcessDesigner.vue             | 18 ++++++++++++-
 .../src/SimpleProcessModel.vue                | 17 +++++++-----
 src/views/bpm/model/form/ProcessDesign.vue    | 20 +++++++++++---
 src/views/bpm/model/form/index.vue            | 26 ++++++++++++++++---
 src/views/bpm/simple/SimpleModelDesign.vue    | 17 ++++++++++++
 5 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index bc952d74..a8e1dd4b 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -1,6 +1,7 @@
 <template>
   <div v-loading="loading" class="overflow-auto">
     <SimpleProcessModel
+      ref="simpleProcessModelRef"
       v-if="processNodeTree"
       :flow-node="processNodeTree"
       :readonly="false"
@@ -134,7 +135,7 @@ const saveSimpleFlowModel = async (simpleModelNode: SimpleFlowNode) => {
   }
 }
 
-// 校验节点设置。 暂时以 showText 为空 未节点错误配置
+// ���验节点设置。 暂时以 showText 为空 未节点错误配置
 const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
   if (node) {
     const { type, showText, conditionNodes } = node
@@ -225,4 +226,19 @@ onMounted(async () => {
     loading.value = false
   }
 })
+
+const simpleProcessModelRef = ref()
+
+/** 获取当前流程数据 */
+const getCurrentFlowData = async () => {
+  if (simpleProcessModelRef.value) {
+    return await simpleProcessModelRef.value.getCurrentFlowData()
+  }
+  return undefined
+}
+
+defineExpose({
+  getCurrentFlowData,
+  updateModel
+})
 </script>
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
index bfcaa21e..ccd1f10d 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
@@ -125,14 +125,19 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
 }
 
 /** 获取当前流程数据 */
-const getCurrentFlowData = () => {
-  errorNodes = []
-  validateNode(processNodeTree.value, errorNodes)
-  if (errorNodes.length > 0) {
-    errorDialogVisible.value = true
+const getCurrentFlowData = async () => {
+  try {
+    errorNodes = []
+    validateNode(processNodeTree.value, errorNodes)
+    if (errorNodes.length > 0) {
+      errorDialogVisible.value = true
+      return undefined
+    }
+    return processNodeTree.value
+  } catch (error) {
+    console.error('获取流程数据失败:', error)
     return undefined
   }
-  return processNodeTree.value
 }
 
 defineExpose({
diff --git a/src/views/bpm/model/form/ProcessDesign.vue b/src/views/bpm/model/form/ProcessDesign.vue
index 11384370..597f0194 100644
--- a/src/views/bpm/model/form/ProcessDesign.vue
+++ b/src/views/bpm/model/form/ProcessDesign.vue
@@ -76,17 +76,31 @@ const validate = async () => {
 const getXmlString = async () => {
   try {
     if (modelData.value.type === BpmModelType.BPMN) {
-      console.warn('bpmnEditorRef.value', bpmnEditorRef.value)
       // BPMN设计器
       if (bpmnEditorRef.value) {
         const { xml } = await bpmnEditorRef.value.saveXML()
+        if (xml) {
+          // 更新本地数据
+          modelData.value = {
+            ...modelData.value,
+            bpmnXml: xml
+          }
+        }
         return xml
       }
     } else {
       // Simple设计器
       if (simpleEditorRef.value) {
-        const flowData = simpleEditorRef.value.getCurrentFlowData()
-        return flowData ? JSON.stringify(flowData) : undefined
+        const flowData = await simpleEditorRef.value.getCurrentFlowData()
+        if (flowData) {
+          const jsonData = JSON.stringify(flowData)
+          // 更新本地数据
+          modelData.value = {
+            ...modelData.value,
+            bpmnXml: jsonData
+          }
+          return jsonData
+        }
       }
     }
     return undefined
diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
index 0b55e483..23c88d5e 100644
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -213,8 +213,16 @@ const handleSave = async () => {
     await validateAllSteps()
 
     // 获取最新的流程设计数据
-    const bpmnXml = processDesignRef.value?.getXmlString()
-    formData.value.bpmnXml = bpmnXml
+    const bpmnXml = await processDesignRef.value?.getXmlString()
+    if (!bpmnXml) {
+      throw new Error('获取流程数据失败')
+    }
+
+    // 更新表单数据
+    formData.value = {
+      ...formData.value,
+      bpmnXml: bpmnXml
+    }
 
     if (formData.value.id) {
       // 修改场景
@@ -245,6 +253,8 @@ const handleSave = async () => {
           params: { id: formData.value.id }
         })
       } catch {
+        // 先删除当前页签
+        delView(unref(router.currentRoute))
         // 用户点击返回列表
         await router.push({ name: 'BpmModel' })
       }
@@ -267,8 +277,16 @@ const handleDeploy = async () => {
     await validateAllSteps()
 
     // 获取最新的流程设计数据
-    const bpmnXml = processDesignRef.value?.getXmlString()
-    formData.value.bpmnXml = bpmnXml
+    const bpmnXml = await processDesignRef.value?.getXmlString()
+    if (!bpmnXml) {
+      throw new Error('获取流程数据失败')
+    }
+
+    // 更新表单数据
+    formData.value = {
+      ...formData.value,
+      bpmnXml: bpmnXml
+    }
 
     // 先保存所有数据
     if (formData.value.id) {
diff --git a/src/views/bpm/simple/SimpleModelDesign.vue b/src/views/bpm/simple/SimpleModelDesign.vue
index 456098a6..3fa50c55 100644
--- a/src/views/bpm/simple/SimpleModelDesign.vue
+++ b/src/views/bpm/simple/SimpleModelDesign.vue
@@ -36,5 +36,22 @@ watch([() => props.modelKey, () => props.modelName], ([newKey, newName]) => {
 const handleSuccess = (data?: any) => {
   emit('success', data)
 }
+
+/** 获取当前流程数据 */
+const getCurrentFlowData = async () => {
+  try {
+    if (designerRef.value) {
+      return await designerRef.value.getCurrentFlowData()
+    }
+    return undefined
+  } catch (error) {
+    console.error('获取流程数据失败:', error)
+    return undefined
+  }
+}
+
+defineExpose({
+  getCurrentFlowData
+})
 </script>
 <style lang="scss" scoped></style>

From 3ba5cb460cc3dfddbff930fc77568ac1e1aadc95 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Fri, 27 Dec 2024 15:01:31 +0800
Subject: [PATCH 22/24] =?UTF-8?q?chore:=20=E4=B9=B1=E7=A0=81=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E6=81=A2=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index a8e1dd4b..bdea492a 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -135,7 +135,7 @@ const saveSimpleFlowModel = async (simpleModelNode: SimpleFlowNode) => {
   }
 }
 
-// ���验节点设置。 暂时以 showText 为空 未节点错误配置
+// 校验节点设置。 暂时以 showText 为空 未节点错误配置
 const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
   if (node) {
     const { type, showText, conditionNodes } = node

From eeda821b74cd1952ce2122156601e6cae3ae012d Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Fri, 27 Dec 2024 15:22:02 +0800
Subject: [PATCH 23/24] =?UTF-8?q?fix:=20=E5=8C=BA=E5=88=86=E5=85=BC?=
 =?UTF-8?q?=E5=AE=B9bpmn=E8=AE=BE=E8=AE=A1=E5=99=A8=E4=B8=8Esimple?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E5=99=A8=E4=B8=8D=E5=90=8C=E4=BC=A0=E5=8F=82?=
 =?UTF-8?q?=E4=B8=8E=E4=B8=8D=E5=90=8C=E5=A4=84=E7=90=86=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/form/ProcessDesign.vue | 89 +++++++++++-----------
 src/views/bpm/model/form/index.vue         | 56 ++++++++------
 2 files changed, 77 insertions(+), 68 deletions(-)

diff --git a/src/views/bpm/model/form/ProcessDesign.vue b/src/views/bpm/model/form/ProcessDesign.vue
index 597f0194..c6d787ba 100644
--- a/src/views/bpm/model/form/ProcessDesign.vue
+++ b/src/views/bpm/model/form/ProcessDesign.vue
@@ -49,57 +49,23 @@ const modelData = computed({
   set: (val) => emit('update:modelValue', val)
 })
 
-/** 表单校验 */
-const validate = async () => {
-  try {
-    // 根据流程类型获取对应的编辑器引用
-    const editorRef =
-      modelData.value.type === BpmModelType.BPMN ? bpmnEditorRef.value : simpleEditorRef.value
-    if (!editorRef) {
-      throw new Error('流程设计器未初始化')
-    }
-
-    // 获取最新的XML数据
-    const bpmnXml = await getXmlString()
-    console.warn(bpmnXml, 'bpmnXml')
-    if (!bpmnXml) {
-      throw new Error('请设计流程')
-    }
-
-    return true
-  } catch (error) {
-    throw error
-  }
-}
-
-/** 获取当前XML字符串 */
-const getXmlString = async () => {
+/** 获取当前流程数据 */
+const getProcessData = async () => {
   try {
     if (modelData.value.type === BpmModelType.BPMN) {
       // BPMN设计器
       if (bpmnEditorRef.value) {
         const { xml } = await bpmnEditorRef.value.saveXML()
         if (xml) {
-          // 更新本地数据
-          modelData.value = {
-            ...modelData.value,
-            bpmnXml: xml
-          }
+          return xml
         }
-        return xml
       }
     } else {
       // Simple设计器
       if (simpleEditorRef.value) {
         const flowData = await simpleEditorRef.value.getCurrentFlowData()
         if (flowData) {
-          const jsonData = JSON.stringify(flowData)
-          // 更新本地数据
-          modelData.value = {
-            ...modelData.value,
-            bpmnXml: jsonData
-          }
-          return jsonData
+          return flowData // 直接返回流程数据对象，不需要转换为字符串
         }
       }
     }
@@ -110,14 +76,45 @@ const getXmlString = async () => {
   }
 }
 
-/** 处理设计器保存成功 */
-const handleDesignSuccess = (bpmnXml?: string) => {
-  if (bpmnXml) {
-    modelData.value = {
-      ...modelData.value,
-      bpmnXml
+/** 表单校验 */
+const validate = async () => {
+  try {
+    // 根据流程类型获取对应的编辑器引用
+    const editorRef =
+      modelData.value.type === BpmModelType.BPMN ? bpmnEditorRef.value : simpleEditorRef.value
+    if (!editorRef) {
+      throw new Error('流程设计器未初始化')
     }
-    emit('success', bpmnXml)
+
+    // 获取最新的流程数据
+    const processData = await getProcessData()
+    if (!processData) {
+      throw new Error('请设计流程')
+    }
+
+    return true
+  } catch (error) {
+    throw error
+  }
+}
+
+/** 处理设计器保存成功 */
+const handleDesignSuccess = (data?: any) => {
+  if (data) {
+    if (modelData.value.type === BpmModelType.BPMN) {
+      modelData.value = {
+        ...modelData.value,
+        bpmnXml: data,
+        simpleModel: null
+      }
+    } else {
+      modelData.value = {
+        ...modelData.value,
+        bpmnXml: null,
+        simpleModel: data
+      }
+    }
+    emit('success', data)
   }
 }
 
@@ -128,6 +125,6 @@ const showDesigner = computed(() => {
 
 defineExpose({
   validate,
-  getXmlString
+  getProcessData
 })
 </script>
diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
index 23c88d5e..4e807a26 100644
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -177,7 +177,7 @@ const validateAllSteps = async () => {
       currentStep.value = 0
       throw new Error('请完善基本信息')
     }
-
+    
     // 表单设计校验
     await formDesignRef.value?.validate()
     if (formData.value.formType === 10 && !formData.value.formId) {
@@ -191,15 +191,15 @@ const validateAllSteps = async () => {
       currentStep.value = 1
       throw new Error('请完善自定义表单信息')
     }
-
+    
     // 流程设计校验
     await processDesignRef.value?.validate()
-    const bpmnXml = processDesignRef.value?.getXmlString()
-    if (!bpmnXml) {
+    const processData = await processDesignRef.value?.getProcessData()
+    if (!processData) {
       currentStep.value = 2
       throw new Error('请设计流程')
     }
-
+    
     return true
   } catch (error) {
     throw error
@@ -211,22 +211,28 @@ const handleSave = async () => {
   try {
     // 保存前校验所有步骤的数据
     await validateAllSteps()
-
+    
     // 获取最新的流程设计数据
-    const bpmnXml = await processDesignRef.value?.getXmlString()
-    if (!bpmnXml) {
+    const processData = await processDesignRef.value?.getProcessData()
+    if (!processData) {
       throw new Error('获取流程数据失败')
     }
 
     // 更新表单数据
-    formData.value = {
-      ...formData.value,
-      bpmnXml: bpmnXml
+    const modelData = {
+      ...formData.value
     }
-
+    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(formData.value)
+      await ModelApi.updateModel(modelData)
       message.success('修改成功')
       // 询问是否发布流程
       try {
@@ -238,7 +244,7 @@ const handleSave = async () => {
       }
     } else {
       // 新增场景
-      const result = await ModelApi.createModel(formData.value)
+      const result = await ModelApi.createModel(modelData)
       formData.value.id = result
       message.success('新增成功')
       try {
@@ -275,24 +281,30 @@ const handleDeploy = async () => {
 
     // 校验所有步骤
     await validateAllSteps()
-
+    
     // 获取最新的流程设计数据
-    const bpmnXml = await processDesignRef.value?.getXmlString()
-    if (!bpmnXml) {
+    const processData = await processDesignRef.value?.getProcessData()
+    if (!processData) {
       throw new Error('获取流程数据失败')
     }
 
     // 更新表单数据
-    formData.value = {
-      ...formData.value,
-      bpmnXml: bpmnXml
+    const modelData = {
+      ...formData.value
+    }
+    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(formData.value)
+      await ModelApi.updateModel(modelData)
     } else {
-      const result = await ModelApi.createModel(formData.value)
+      const result = await ModelApi.createModel(modelData)
       formData.value.id = result.id
     }
 

From 6f724d9d52e136679b8fc8989d816ecfbebca723 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 27 Dec 2024 21:28:12 +0800
Subject: [PATCH 24/24] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91Bpm=EF=BC=9A=E6=96=B0=E7=9A=84=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/designer/ProcessDesigner.vue      | 83 +++++--------------
 src/views/bpm/model/editor/index.vue          |  6 +-
 src/views/bpm/model/form/index.vue            | 27 +++---
 3 files changed, 35 insertions(+), 81 deletions(-)

diff --git a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
index e9427292..9d2fa5ba 100644
--- a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -309,18 +309,26 @@ const props = defineProps({
 })
 
 // 监听value变化,重新加载流程图
-watch(() => props.value, (newValue) => {
-  if (newValue && bpmnModeler) {
-    createNewDiagram(newValue)
-  }
-}, { immediate: true })
+watch(
+  () => props.value,
+  (newValue) => {
+    if (newValue && bpmnModeler) {
+      createNewDiagram(newValue)
+    }
+  },
+  { immediate: true }
+)
 
 // 监听processId和processName变化
-watch([() => props.processId, () => props.processName], ([newId, newName]) => {
-  if (newId && newName && !props.value) {
-    createNewDiagram(null)
-  }
-}, { immediate: true })
+watch(
+  [() => props.processId, () => props.processName],
+  ([newId, newName]) => {
+    if (newId && newName && !props.value) {
+      createNewDiagram(null)
+    }
+  },
+  { immediate: true }
+)
 
 provide('configGlobal', props)
 let bpmnModeler: any = null
@@ -599,16 +607,6 @@ const processZoomOut = (zoomStep = 0.1) => {
   defaultZoom.value = newZoom
   bpmnModeler.get('canvas').zoom(defaultZoom.value)
 }
-// const processZoomTo = (newZoom = 1) => {
-//   if (newZoom < 0.2) {
-//     throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2')
-//   }
-//   if (newZoom > 4) {
-//     throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
-//   }
-//   defaultZoom = newZoom
-//   bpmnModeler.get('canvas').zoom(newZoom)
-// }
 const processReZoom = () => {
   defaultZoom.value = 1
   bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
@@ -647,62 +645,19 @@ const previewProcessXML = () => {
 }
 const previewProcessJson = () => {
   bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
-    // console.log(xml, 'xml')
-
-    // const rootNode = parseXmlString(xml)
-    // console.log(rootNode, 'rootNoderootNode')
     const rootNodes = new XmlNode(XmlNodeType.Root, parseXmlString(xml))
-    // console.log(rootNodes, 'rootNodesrootNodesrootNodes')
-    // console.log(rootNodes.parent.toJsObject(), 'rootNodes.toJSON()')
-    // console.log(JSON.stringify(rootNodes.parent.toJsObject()), 'rootNodes.toJSON()')
-    // console.log(JSON.stringify(rootNodes.parent.toJSON()), 'rootNodes.toJSON()')
-
-    // const parser = new xml2js.XMLParser()
-    // let jObj = parser.parse(xml)
-    // console.log(jObj, 'jObjjObjjObjjObjjObj')
-    // const builder = new xml2js.XMLBuilder(xml)
-    // const xmlContent = builder
-    // console.log(xmlContent, 'xmlContent')
-    // console.log(xml2js, 'convertconvertconvert')
     previewResult.value = rootNodes.parent?.toJSON() as unknown as string
-    // previewResult.value = jObj
-    // previewResult.value = convert.xml2json(xml,  {explicitArray : false},{ spaces: 2 })
     previewType.value = 'json'
     previewModelVisible.value = true
   })
 }
+
 /* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
-const processSave = async () => {
-  try {
-    const { err, xml } = await bpmnModeler.saveXML()
-    if (err) {
-      ElMessage.error('保存流程设计失败，请重试！')
-      return
-    }
-    emit('save', xml)
-  } catch (error) {
-    console.error(error)
-    ElMessage.error('保存流程设计失败，请重试！')
-  }
-}
-/** 高亮显示 */
-// const highlightedCode = (previewType, previewResult) => {
-//   console.log(previewType, 'previewType, previewResult')
-//   console.log(previewResult, 'previewType, previewResult')
-//   console.log(hljs.highlight, 'hljs.highlight')
-//   const result = hljs.highlight(previewType, previewResult.value || '', true)
-//   return result.value || '&nbsp;'
-// }
-onBeforeMount(() => {
-  console.log(props, 'propspropspropsprops')
-})
 onMounted(() => {
   initBpmnModeler()
   createNewDiagram(props.value)
 })
 onBeforeUnmount(() => {
-  // this.$once('hook:beforeDestroy', () => {
-  // })
   if (bpmnModeler) bpmnModeler.destroy()
   emit('destroy', bpmnModeler)
   bpmnModeler = null
diff --git a/src/views/bpm/model/editor/index.vue b/src/views/bpm/model/editor/index.vue
index 063e5709..6e71d01c 100644
--- a/src/views/bpm/model/editor/index.vue
+++ b/src/views/bpm/model/editor/index.vue
@@ -206,7 +206,7 @@ onBeforeUnmount(() => {
   }
 })
 
-/** 获取XML字符串 */
+/** 获取 XML 字符串 */
 const saveXML = async () => {
   if (!modeler.value) {
     return { xml: undefined }
@@ -251,7 +251,7 @@ defineExpose({
 <style lang="scss">
 .process-panel__container {
   position: absolute;
-  top: 180px;
-  right: 60px;
+  top: 172px;
+  right: 70px;
 }
 </style>
diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue
index 4e807a26..ac628e0a 100644
--- a/src/views/bpm/model/form/index.vue
+++ b/src/views/bpm/model/form/index.vue
@@ -79,14 +79,14 @@
 </template>
 
 <script lang="ts" setup>
-import { useRouter, useRoute } from 'vue-router'
+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 * as UserApi from '@/api/system/user'
 import { useUserStoreWithOut } from '@/store/modules/user'
-import { BpmModelType, BpmModelFormType } from '@/utils/constants'
+import { BpmModelFormType, BpmModelType } from '@/utils/constants'
 import BasicInfo from './BasicInfo.vue'
 import FormDesign from './FormDesign.vue'
 import ProcessDesign from './ProcessDesign.vue'
@@ -108,16 +108,17 @@ const validateBasic = async () => {
   await basicInfoRef.value?.validate()
 }
 
+/** 表单设计校验 */
 const validateForm = async () => {
   await formDesignRef.value?.validate()
 }
 
+/** 流程设计校验 */
 const validateProcess = async () => {
   await processDesignRef.value?.validate()
 }
 
-// 步骤控制
-const currentStep = ref(0)
+const currentStep = ref(0) // 步骤控制
 const steps = [
   { title: '基本信息', validator: validateBasic },
   { title: '表单设计', validator: validateForm },
@@ -177,7 +178,7 @@ const validateAllSteps = async () => {
       currentStep.value = 0
       throw new Error('请完善基本信息')
     }
-    
+
     // 表单设计校验
     await formDesignRef.value?.validate()
     if (formData.value.formType === 10 && !formData.value.formId) {
@@ -191,7 +192,7 @@ const validateAllSteps = async () => {
       currentStep.value = 1
       throw new Error('请完善自定义表单信息')
     }
-    
+
     // 流程设计校验
     await processDesignRef.value?.validate()
     const processData = await processDesignRef.value?.getProcessData()
@@ -199,7 +200,7 @@ const validateAllSteps = async () => {
       currentStep.value = 2
       throw new Error('请设计流程')
     }
-    
+
     return true
   } catch (error) {
     throw error
@@ -211,7 +212,7 @@ const handleSave = async () => {
   try {
     // 保存前校验所有步骤的数据
     await validateAllSteps()
-    
+
     // 获取最新的流程设计数据
     const processData = await processDesignRef.value?.getProcessData()
     if (!processData) {
@@ -229,11 +230,10 @@ const handleSave = async () => {
       modelData.bpmnXml = null
       modelData.simpleModel = processData // 直接使用流程数据对象
     }
-    
+
     if (formData.value.id) {
       // 修改场景
       await ModelApi.updateModel(modelData)
-      message.success('修改成功')
       // 询问是否发布流程
       try {
         await message.confirm('修改流程成功，是否发布流程？')
@@ -244,8 +244,7 @@ const handleSave = async () => {
       }
     } else {
       // 新增场景
-      const result = await ModelApi.createModel(modelData)
-      formData.value.id = result
+      formData.value.id = await ModelApi.createModel(modelData)
       message.success('新增成功')
       try {
         await message.confirm('创建流程成功，是否继续编辑？')
@@ -281,7 +280,7 @@ const handleDeploy = async () => {
 
     // 校验所有步骤
     await validateAllSteps()
-    
+
     // 获取最新的流程设计数据
     const processData = await processDesignRef.value?.getProcessData()
     if (!processData) {
@@ -312,7 +311,7 @@ const handleDeploy = async () => {
     await ModelApi.deployModel(formData.value.id)
     message.success('发布成功')
     // 返回列表页
-    router.push({ name: 'BpmModel' })
+    await router.push({ name: 'BpmModel' })
   } catch (error: any) {
     console.error('发布失败:', error)
     message.warning(error.message || '发布失败')